/********************************/
/* Description: Master CSS file */
/********************************/


/********************************************/
/* Note:						  		    */
/* 	Écran 13 po (Dell e5450)    1366 x 768  */
/*        13 po (Patrice)    	1920 x 1080 */
/*        17 po (dell inspiron) 1920 x 1080 */
/*  Écran HP2310m - Défaut      1600 x 1200 */
/********************************************/
/*	Notes									*/
/*		1 rem = 16 px						*/
/*	  										*/
/********************************************/
/*	  										*/
/*  Valeur par défaut						*/
/*		écran = 1600 x 1200 				*/
/*			donc 1200 / 16 = 75rem			*/
/*	  										*/
/********************************************/


/**************************/
/*     General Styles     */
/**************************/
body,
html {
    width: 100%;
	height: 100%;
}

h1, h2, h3, h4, h5, h6
{
	color: #24262a;
	font-weight: 700;
	font-family: B Garamond;
}	
	
h1 {
	
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 3.25rem;
}

h2 {
	font-size: 2.25rem;
	line-height: 2.75rem;
}

h3 {
	font-size: 1.75rem;
	line-height: 2.25rem;
}

h4 {
	font-size: 1.5rem;
	line-height: 2rem;
}

h5 {
	font-size: 1.25rem;
	line-height: 1.625rem;
}

h6 {
	font-size: 1rem;
	line-height: 1.375rem;
}

img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}
	  
/*******************************/
/*     Les classes globales    */
/*******************************/

.NePasAfficher{
	display: None;
}
.bg-VertPale {
	background-color: #A8D08D;
	color: #24262a;
}
.bg-VertFonce {
	background-color: #375623;	
	color: #ffffff;
}

.BordureTest{
	border: 1px solid orange;
}
.texte{
	color: #24262a;
	font-weight: 500;
	font-family: EB Garamond;
	font-size: 1.5rem;
	line-height: 2rem;
}
.Blanc{
	color: #ffffff;
}

.Blue{
	color: blue;
}

.TexteColor{
	color: #24262a;
}
.underline {
  text-decoration: underline;
}
.gorendezvous-button{
  height: 2rem;
  weight: 50px;
	color: #375623;
}
/**********************/
/*     Navigation     */
/**********************/

.navbar {
	background-color: #24262a;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.025);
}
.navbar-dark{
	background: linear-gradient(rgba(0, 0, 0,1), rgba(0, 0, 0,1)) center center no-repeat;
	background-size: cover;
}

.navbar .navbar-brand {
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
}

.navbar .logo-image img {
    width: 118px;
	height: 36px;
}

.navbar .logo-text {
	color: #ffffff;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1rem;
	text-decoration: none;
}

.offcanvas-collapse {
	position: fixed;
	top: 3.25rem; /* adjusts the height between the top of the page and the offcanvas menu */
	bottom: 0;
	left: 100%;
	width: 100%;
	padding-right: 1rem;
	padding-left: 1rem;
	overflow-y: auto;
	visibility: hidden;
	background-color: #24262a;
	transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, visibility .3s ease-in-out;
	transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.offcanvas-collapse.open {
	visibility: visible;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.navbar .navbar-nav {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.navbar .nav-item .nav-link {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.2s ease;
}

.navbar .nav-item.dropdown.show .nav-link,
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active {
	color: #9c9ead;
}

/* Dropdown Menu */
.navbar .dropdown .dropdown-menu {
	animation: fadeDropdown 0.2s; /* required for the fade animation */
}

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
	}
}

.navbar .dropdown-menu {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border: none;
	background-color: #24262a;
}

.navbar .dropdown-item {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0.875rem;
	text-decoration: none;
}

.navbar .dropdown-item:hover {
	background-color: #24262a;
	color: #9c9ead;
}

.navbar .dropdown-divider {
	width: 100%;
	height: 1px;
	margin: 0.5rem auto 0.5rem auto;
	border: none;
	background-color: #505050;
}
/* end of dropdown menu */

.navbar .fa-stack {
	width: 2em;
	margin-right: 0.25rem;
	font-size: 0.75rem;
}

.navbar .fa-stack-2x {
	color: #0b36a8;
	transition: all 0.2s ease;
}

.navbar .fa-stack-1x {
	color: #ffffff;
	transition: all 0.2s ease;
}

.navbar .fa-stack:hover .fa-stack-2x {
	color: #ffffff;
}

.navbar .fa-stack:hover .fa-stack-1x {
	color: #0b36a8;
}

.navbar .navbar-toggler {
	padding: 0;
	border: none;
	font-size: 1.25rem;
}

/***********************************/
/*     Les classes pour le site    */
/***********************************/

/******************/
/*     Accueil    */
/******************/

.Accueil {
	height: 60rem;
	padding-top: 30rem;
	background-color: linear-gradient(rgba(55, 86, 35, 1), rgba(55, 86, 35, 1));
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.Accueil .text-container{
	width: 50%;
	height: 100%;
	float: right;
	background-color: #C5E0B440;
	text-align: center;
}

.Accueil .h1-large {
	padding-top: auto;
	padding-bottom: auto;
	color: #70AD47;	
	font-family: EB Garamond;
	text-decoration: none;	
}

/************************/
/*     AutresPages  	*/
/************************/

.AutresPages{
	float: clear;
}

.AutresPages .h2-heading {
	text-align: center;
}

.AutresPages .text-container {
	text-align: justify;
}

/************************/
/*     Les images    	*/
/************************/

.Image-Pat {
	/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
	float: right;
	padding-right: 3.4rem;
	width: 60%;
	height: 400px;
}

.Image-Foret {
	/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
	float: right;
	padding-left: 3.4rem;
	padding-right: 3.4rem;
	width: 100%;
	height: 250px;
}

.Image-Arbres{
	/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
	float: right;
	padding-left: 3.4rem;
	padding-right: 3.4rem;
	width: 100%;
	height: 250px;
}

.Image-Localisation {
	/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
	width: 100%;
	height: 85%;
	margin-bottom: 1rem;
}
	
/****************************/
/*     Massotherapeute  	*/
/****************************/

.Massotherapeute{
	padding-top: 4rem;
}

.Massotherapeute .text-container{
	padding-top: 2rem;
}
.Massotherapeute a:hover{
	color: #24262a;
	text-decoration: none;	
}
/****************************/
/*     Massage suédois  	*/
/****************************/

.Massage_suedois{
	padding-top: 4rem;
}

.Massage_suedois .text-container{
	padding-top: 2rem;
}

.Image-Foret {
	margin-top: 1rem;
}
	
/************************/
/*     Déroulement  	*/
/************************/

.Deroulement{
	padding-top: 4rem;
}

.Deroulement-texte{
	font-weight: 200;
	font-family: EB Garamond;
	font-size: 1,25rem;
	line-height: 1.75rem;
}

.Deroulement .text-container{
	padding-top: 2rem;
}

.Image-Arbres{
	margin-top: 1rem;
}

/************************/
/*     Information  	*/
/************************/

.Information {
	float: clear;
	height: 1250rem;
	padding-top: 4rem;
}

.Information .col-xl-4{
	padding-top: 2rem;
}

.Information .col-xl-8{
	padding-top: 2rem;
}

.Text-box-Tarifs{
	width: 90%;
	height: 25%;
	background-color: #C5E0B440;
	text-align: center;
}

.msg-box-Rdv{
	width: 90%;
	height: 35%;
	background-color: #C5E0B440;
	text-align: center;
	margin-bottom: 1rem;
}

.msg-box-Localisation{
	width: 90%;
	height: 20%;
	background-color: #C5E0B440;
	text-align: center;
	margin-bottom: 1rem;
}

.Information .h4{
	color: #ffffff;
}

/*********************/
/*     Copyright     */
/*********************/
.copyright {
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #24262a;
	text-align: center;
}

.copyright .p-small {
	color: #9da6ac;
	text-align: center;
}

.copyright a {
	color: #9da6ac;
}

/******************************/
/*     Back To Top Button     */
/******************************/

a.back-to-top {
	position: fixed;
	z-index: 900;
	right: 12px;
	bottom: 12px;
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 30px;
	background: #3a424d url("../images/up-arrow.png") no-repeat center 47%;
	background-size: 18px 18px;
	text-indent: -9999px;
}

a:hover.back-to-top {
	background-color: #0b36a8;
}

/*************************/
/*     Media Queries     */
/*************************/	

/*	Pour les écrans d'une hauteur maximum de 768pix */

@media screen and (max-device-height: 768px) and (orientation: landscape) {
	
	/*	768 px / 16 px = 48 rem */
	
	/* Accueil page */
	.Accueil {
	height: 48rem;	
	background-image: url('../images/Page_Accueil.png');
	padding-top: 20rem;
	padding-right: 17rem;
	}
	/* Fin de Accueil page */
	
	/* Autres pages */
	.AutresPages {
		height: 43rem;
	}
	/* fin de Autres page */
	
	/* Massage suédois */
	.Massage_suedois{
		height: 50rem;
	}
	/* Fin de Massage suédois */
	
	/* Derouleent */
	.Deroulement{
		height: 60rem;
	}
	/* fin de Deroulement */
	
}
/*	Pour les écrans d'une hauteur maximum entre 769 et 1080 pix */ 

@media screen and (min-device-height: 769px) and (max-device-height: 1080px) and (orientation: landscape)  {
	
	/*	1080 px / 16 px = 68 rem */
	
	/* Accueil page */
	.Accueil {
	height: 65rem;	
	background-image: url('../images/Foret_accueil.jpg');
	padding-top: 30rem;
	padding-right: 17rem;
	}
	/* Fin de Accueil page */
	
	/* Autres pages */
	.AutresPages {
		height: 65rem;
	}
	/* fin de Autres page */
	
	/* Massage suédois */
	.Massage_suedois{
		height: 65rem;
	}
	/* Fin de Massage suédois */
	
	/* Derouleent */
	.Deroulement{
		height: 65rem;
	}
	/* fin de Deroulement */
}

/*	Pour les écrans d'une hauteur maximum entre 1081 et 1300 pix */ 

@media screen and (min-device-height: 1081px) and (max-device-height: 1300px) and (orientation: landscape) {
	
	/*	1200 px / 16 px = 75 rem */
	
	/* Accueil page */
	.Accueil {
		height: 75rem;
		background-image: url('../images/Foret_accueil.jpg');
		padding-top: 40rem;
		padding-right: 8rem;
	}

	/* Fin de Accueil page */
	
	/* Autres pages */
	.AutresPages {
		height: 100rem;
	}
}

/* Max width: 480px -	For mobile phones: */
@media only screen and (max-device-width: 480px){
	.texte{
		font-size: 1rem;
		line-height: 1.5rem;
	}
	/* Accueil page */
	.Accueil {
		height: 35rem;
		background-image: url('../images/Foret_accueil.jpg');
		padding-top: 16rem;
	}
	.Accueil .text-container{
		background-color: #C5E0B4;
		text-align: center;
		width: 80%;
		margin-left: 20%;
	}
	.Accueil .h1-large {
		padding-top: auto;
		padding-bottom: auto;
		color: #70AD47;	
		font-family: EB Garamond;
		text-decoration: none;
		font-weight: 200;
		font-size: 1.5rem;
		line-height: 1.75rem;
	}
	
	.AutresPages{
		float: cl
		7rem;
		padding-top: 2rem;
	}
	.Image-Pat {
	/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
		width: 80%;
		height: 250px;
		margin-left: 10rem;
	}

	.Image-Foret {
		/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
		width: 110%;
		height: 150px;
		margin-left: 7rem;
	}

	.Image-Arbres{
		/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
		width: 110%;
		height: 150px;
		margin-left: 7rem;
	}

	.Image-Localisation {
		/* image: Dimension: 671 x 739 ou Largeur: 671 pix x hauteur: 739 pix - Facteur l/H: 0,9078 */
		margin-top: 2rem;
		width: 100%;
		height: 85%;
		margin-bottom: 1rem;
	}
	
	.Text-box-Tarifs{
		width: 100%;
		height: 30%;
		background-color: #C5E0B440;
		text-align: center;
		margin-bottom: 2rem;
	}

	.msg-box-Rdv{
		width: 100%;
		height: 45%;
		background-color: #C5E0B440;
		text-align: center;
		margin-bottom: 1rem;
	}

	.msg-box-Localisation{
		width: 100%;
		height: 25%;
		background-color: #C5E0B440;
		text-align: center;
		margin-bottom: 1rem;
	}
	
	.Deroulement{
		height: 80rem;
	}
	.Information {
		float: clear;
		height: 60rem;
	}
}
/* end of min-width 480px */

/* Min-width 992px */

@media screen and (min-width: 992px) {
	/* Navigation */
	.navbar .top-nav-collapse {
		padding-top: 0.5rem;
		padding-top: 0.5rem;
		background-color: #24262a;
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.025);
	}

	.offcanvas-collapse {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		width: auto;
		padding-right: 0;
		padding-left: 0;
		background-color: transparent;
		overflow-y: visible;
		visibility: visible;
	}

	.offcanvas-collapse.open {
		-webkit-transform: none;
		transform: none;
	}

	.navbar .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.navbar .nav-item .nav-link {
		padding-right: 0.625rem;
		padding-left: 0.625rem;
	}

	.navbar .dropdown-menu {
		margin-top: 0.25rem;
		box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.08);
	}

	.navbar .dropdown-divider {
		width: 90%;
	}

	.navbar .social-icons {
		margin-left: 0.5rem;
	}
	
	.navbar .fa-stack {
		margin-right: 0;
		margin-left: 0.25rem;
	}
	/* end de navigation */

}
@media screen and (min-device-height: 1024px) and (max-device-height: 1366px) and (orientation: landscape)  {
	
	/*	1080 px / 16 px = 68 rem */
	
	/* Accueil page */
	.Accueil {
	height: 65rem;	
	background-image: url('../images/Foret_accueil.jpg');
	padding-top: 30rem;
	padding-right: 17rem;
	}
	/* Fin de Accueil page */
	
	/* Autres pages */
	.AutresPages {
		height: 65rem;
	}
	/* fin de Autres page */
	
	/* Massage suédois */
	.Massage_suedois{
		height: 65rem;
	}
	/* Fin de Massage suédois */
	
	/* Derouleent */
	.Deroulement{
		height: 65rem;
	}
	/* fin de Deroulement */
}

@media screen and (min-device-height: 1024px) and (max-device-height: 1366px) and (orientation: portrait)  {
	
	/*	1080 px / 16 px = 68 rem */
	
	/* Accueil page */
	.Accueil {
	height: 65rem;	
	background-image: url('../images/Foret_accueil.jpg');
	padding-top: 30rem;
	padding-right: 17rem;
	}
	/* Fin de Accueil page */
	
	/* Autres pages */
	.AutresPages {
		height: 65rem;
	}
	/* fin de Autres page */
	
	/* Massage suédois */
	.Massage_suedois{
		height: 65rem;
	}
	/* Fin de Massage suédois */
	
	/* Derouleent */
	.Deroulement{
		height: 65rem;
	}
	/* fin de Deroulement */
}

@media screen and (min-width: 992px) and (orientation: landscape)  {
	
	/* Accueil page */

	.Accueil .text-container{
		width: 40%;
	}
	/* Fin de Accueil page */
	
	/* Autres pages */
	.texte{
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
	/* Fin de Autres pages */
	
	/* Images */
	.Image-Foret {
		margin-top: 1rem;
		height: 250px;
	}
	
	.Image-Arbres{
		margin-top: 1rem;
		height: 250px;
	}
	/* Fin de Images 
}
/* end de min-width 992px */


/* Min-width 1200px */

@media screen and  (min-width: 1200px) and (orientation: landscape) {
	
	
	/* Navigation */
	.navbar .container {
		max-width: 1330px;
	}
	/* end of navigation */

}
/* end of min-width 1200px */