/* Aline.css *************************************************************************************
Feuille de style pour essence-et-soi.fr
---------------------------------------
Les classes hors balise (celles qui commencent par un point, à la fin) peuvent s'appliquer à 
n'importe quelle balise simplement en le mentionnant dans le code HTML. Elles redéfinissent les
valeurs indiquées pour la balise à laquelle elles s'appliquent.

Les propriétés définies pour les balises s'appliquent :
	- soit à toutes les balises du nom indiqué, où qu'elles se trouvent dans la page, les valeurs
	  par défaut étant celles définies par les balises qui la contiennent,
	- soit aux balises du nom indiqué lorsqu'elles sont placées à un endroit bien déterminé
	  (comme le <p> de "footer div p" qui ne s'applique qu'aux balises <p> placées à l'intérieur
	  d'une balise <div> elle-même placée dans une balise <footer>.
Les valeurs par défaut pour les balises sont celles de son conteneur. La hiérarchie des conteneurs
est indiquée pour les balises principales.
**************************************************************************************************/
@font-face {
    font-family: 'latoregular';
    src: url('lato-regular-webfont.eot');
    src: url('lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('lato-regular-webfont.woff2') format('woff2'),
         url('lato-regular-webfont.woff') format('woff'),
         url('lato-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoitalic';
    src: url('lato-italic-webfont.eot');
    src: url('lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('lato-italic-webfont.woff2') format('woff2'),
         url('lato-italic-webfont.woff') format('woff'),
         url('lato-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('lato-bold-webfont.eot');
    src: url('lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('lato-bold-webfont.woff2') format('woff2'),
         url('lato-bold-webfont.woff') format('woff'),
         url('lato-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold_italic';
    src: url('lato-bolditalic-webfont.eot');
    src: url('lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('lato-bolditalic-webfont.woff2') format('woff2'),
         url('lato-bolditalic-webfont.woff') format('woff'),
         url('lato-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dancing';
    src: url('dancingscript-regular-webfont.eot');
    src: url('dancingscript-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('dancingscript-regular-webfont.woff2') format('woff2'),
         url('dancingscript-regular-webfont.woff') format('woff'),
         url('dancingscript-regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}	


/* Balises *************************************************/
/* article -------------------------------------------------
Zone de corps de texte
hiérarchie : OS-navigateur-body-div.opacite-section-article
-----------------------------------------------------------*/

article {
	/*background-color:#ffffff88;*/
	margin:0;
	padding:0 15px 15px 15px;
}

article.accueil {
	margin:0 -15px -15px -15px;
	width:100%;
}

article.accueil div {
	background-image:url("images/healing-process.jpg");
	/*background-color:yellow;*/
	background-size:cover;
	color: black;
	/*height: total-230(titre)-110(pied)*/
	height:calc(100vh - (230px + 110px));
}

@media all and (min-width: 1024px) {
	@media all and (min-aspect-ratio:16/7) {
		article.accueil div {
			height:calc(100vh - 230px);
		}
	}
	
	@media all and (max-aspect-ratio:1/1) {
		article.accueil div {
			background-image:url("images/healing-process-v.jpg");
		}
	}
}

@media all and (max-width: 1280px) {
	article.accueil div {
		margin-top:2px;
		height:calc(100vh - (230px + 127px));
	}
	@media all and (min-aspect-ratio:16/8) {
		article.accueil div {
			background-image:url("images/healing-process768.jpg");
			height:calc(100vh - 230px);
		}
	}
}

@media all and (max-width: 1023px) {
	article.accueil div {
		background-image:url("images/healing-process768.jpg");
		margin-top:2px;
		height:calc(100vh - (210px + 127px));
	}
	@media all and (min-aspect-ratio:16/8) {
		article.accueil div {
			height:calc(100vh - 210px);
		}
	}
	@media all and (max-aspect-ratio:1/1) {
		article.accueil div {
			background-image:url("images/healing-process768-v.jpg");
		}
	}
}

@media all and (max-width: 767px) {
	article.accueil div {
		background-image:url("images/healing-process480.jpg");
		height:calc(100vh - 160px);
	}
	@media all and (max-aspect-ratio:1/1) {
		article.accueil div {
			background-image:url("images/healing-process480-v.jpg");
		}
	}
}

@media all and (max-width: 479px) {
	article.accueil div {
		background-image:url("images/healing-process300.jpg");
		height:calc(100vh - 140px);
	}
	@media all and (max-aspect-ratio:1/1) {
		article.accueil div {
			background-image:url("images/healing-process300-v.jpg");
		}
	}
}

article.accueil div h1 {
	background-color: #ffffff99;
	color:black;
	font-family:latoregular, sans-serif;
	font-size:3em;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	text-align: center;
	text-shadow:none;
	width:100%;
}

article.accueil div h2 {
	background-color: #ffffff99;
	font-family:dancing, cursive;
	font-size:2.5em;
	font-weight:normal;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	text-align: center;
	color: black;
}

article.textaccueil {
	margin-bottom:100px;
	margin-top:150px;
}

article.textaccueil h3 {
	margin-bottom:50px;
	margin-top:0;
}

/* body ----------------------------------------------------
Fond de page
hiérarchie : OS-navigateur-body
-----------------------------------------------------------*/
body {
	font-family:latoregular, sans-serif;
	font-size:19px;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	width:100%;
}



div.fond {
/*	background-image:url("images/healing-process.jpg"); */
	background-size:cover;
	margin-top:-8px;
}

/* footer --------------------------------------------------
pied de page
hiérarchie : OS-navigateur-body-div.opacite-footer
-----------------------------------------------------------*/
footer {
	/* J-31-10-18 : Remis pied flottant en bas de page (bottom/display/padding/position) */
	background-color:white;
	/*background-color:lime;*/
	color:black;
	/*display:inline-block;
	display:block;*/
	font-size:0.9em;
	padding-left:10px;
	padding-right:10px;
	width:100%;/**/
}

@media all and (max-width: 1280px) {
	footer {
		font-size:0.8em;
	}
}

@media all and (max-width: 1023px) {
	footer {
		font-size:0.7em;
	}
}

@media all and (max-width: 767px) {
	footer {
		font-size:0.55em;
	}
}

@media all and (max-width: 479px) {
	footer {
		font-size:0.4em;
	}
}

footer.accueil {
	/* J-31-10-18 : Nouvelle classe pour positionner le pied dans la page d'accueil */
	bottom:0;
	/*margin-top:45px;*/
	position:fixed;
}

@media all and (min-aspect-ratio:16/7) {
	footer.accueil {
		bottom: unset;
		position: unset;
	}
}

@media all and (max-width: 1280px) and (min-aspect-ratio:16/8) {
	footer.accueil {
		bottom: unset;
		position: unset;
	}
}

@media all and (max-width: 768px) {
	footer.accueil {
		/*background-color:cyan;*/
		/*padding-top:-200px;*/
		bottom: unset;
		position: unset;
	}
}

footer a {
	color:black;
	text-decoration:underline;
}

footer a:visited {
	color:black;
	text-decoration:underline;
}

footer a:hover {
	color:black;
	font-weight:bold;
	text-decoration:underline;
}

footer div {
	/*background-color:lime;*/
	font-size:0.8em;
}

footer div p {
	margin-left: auto;
	margin-right:auto;
}

/* h1 ------------------------------------------------------
Titre principal
hiérarchie : OS-navigateur-body-div.opacite-[section]-[article]-h1
-----------------------------------------------------------*/
h1 {
  clear:both;
	color:blue;
	font-size:4em;
}

/* h2 ------------------------------------------------------
Sous-titre
hiérarchie : OS-navigateur-body-div.opacite-[section]-[article]-h2
-----------------------------------------------------------*/
h2 {
  /*clear:both;*/
	font-family:latobold, sans-serif;
  
}

h2.h2contact {
  font-family:latobold, sans-serif;
  color:black;
  /*float:none;
  overflow:auto;*/
  clear:none;
  
}
  

/* header -------------------------------------------------
Entête
hiérarchie : OS-navigateur-body-header
-----------------------------------------------------------*/
header {
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

header div h1 {
	color:black;
	font-family:latoregular, sans-serif;
	font-size:3em;
	font-weight:normal;
	margin-bottom:5px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	width:calc(100vw - 140px);
}

@media all and (max-width: 1023px) {
	header div h1 {
		font-size:2.75em;
	}
}

@media all and (max-width: 767px) {
	header div h1 {
		font-size:2em;
	}
}

@media all and (max-width: 479px) {
	header div h1 {
		font-size:1.7em;
	}
}

header div h2 {
	font-family:dancing, cursive;
	font-size:2.5em;
	font-weight:normal;
	margin-bottom:5px;
	margin-top:5px;
}

@media all and (max-width: 1023px) {
	header div h2 {
		font-size:2.1em;
	}
}

@media all and (max-width: 767px) {
	header div h2 {
		font-size:1.8em;
	}
}

@media all and (max-width: 479px) {
	header div h2 {
		font-size:1.3em;
	}
}

/* nav -------------------------------------------------
Menu
hiérarchie : OS-navigateur-body-div.opacite-header-nav
-----------------------------------------------------------*/
nav {
	/* J-31-10-18 - Réduction de la taille pour éviter le passage à la ligne au survol souris (font-size) */
	display:inline-block;
	font-size:1.15em;
	margin-bottom:-2px;
	margin-top:-10px;
	padding:5px;
	position:relative;
	width:100%;
}

@media all and (max-width: 1023px) {
	nav {
		font-size:0.8em;
	}
}

nav div {
	margin-left:auto;
	margin-right:auto;
	width:1000px;
}

@media all and (max-width: 1023px) {
	nav div {
		width:750px;
	}
}

@media all and (max-width: 767px) {
	nav div {
		display:none;
		width:450px;
	}
}

@media all and (max-width: 479px) {
	nav div {
		display:none;
		width:300px;
	}
}

nav div.petit {
	display:none;
}

@media all and (max-width: 767px) {
	nav div.petit {
		display:inline-block;
	}
}

@media all and (max-width: 479px) {
	nav div.petit {
		display:inline-block;
	}
}

nav div.petit a {
		border:2px #041E58 solid;
		color:black;
		padding-left:5px;
		padding-right:5px;
		text-decoration:none;
}

nav div.voir {
	background-color:/*#A59B9C*/ #B0CADE;
	display:inline-block;
	margin-left:-8px;
	margin-top:5px;
	padding-left:2px;
	padding-right:2px;
}

@media all and (max-width: 767px) and (min-width: 480px) {
	nav div.voir {
		width:446px;
	}
}

@media all and (max-width: 479px) {
	nav div.voir {
		width:296px;
	}
}

nav ul {
	display:inline-block;
	height:20px;
	margin-left:0;
	margin-right:0;
	margin-top:10px;
	padding-left:0;
	padding-right:0;
	vertical-align:top;
}

nav ul:hover {
    /*color:#A3103B;*/
    color:#4B6C85;
	cursor:pointer;
}

nav ul a {
	color:black;
	text-decoration: none;
}

nav ul a:hover {
    color:#4B6C85;
   /* color:#5C0036;*/
}

nav li {
	display:inline-block;
	margin-left:0;
	margin-right:0;
	padding-top:2px;
	padding-left:0;
	padding-right:0;
	text-decoration: none;
}

nav ul:hover li {
	padding-left:2px;	
	padding-top:4px;
}

@media all and (max-width: 767px) {
	nav ul:hover li {
		padding-left:0;	
		padding-top:2px;
	}
}

nav dl dd ul {
	background-image:url("images/essencelight.jpg");
	background-position:center;
	background-repeat:repeat;
	border:2px black solid;
	border-radius:15px;
	font-size:0.7em;
	line-height:0.7em;
	margin:13px 0 0 0;
	padding-left:0;
	padding-top:8px;
}

nav dl dd li {
	color: black;
	height:30px;
	margin-left:0px;
	padding-left:0;
}

nav dl dd li a:link { /* color hors pseudo-classe ne fonctionne pas ! (affichage en bleu...) pourquoi ??? */
	color: black;
}

nav dl dd li a:hover {
	color: #4B6C85;
}

nav dl dd a {
	color: #4B6C85;
	margin-left:0;
	margin-top:20px;
	margin-top:0;
	text-align:left;
	text-decoration:none;
}

nav dl dd a:hover {
	background-color:transparent;
}

/* section -------------------------------------------------
Partie de page
hiérarchie : OS-navigateur-body-div.opacite-section
-----------------------------------------------------------*/
section {
	color: #4B6C85;
	float:none;
}

section article p img {
	border:none;
	margin-left:10px;
	width:38px;
}

section img {
	border:none;
	float:left;
	margin-right:15px;
	width:199px
}

section img.accueil {
	background-color: red;
	margin: -38px 0 0 0;
	width:100%;
}

section h1 {
	/*background-color:yellow;*/
	color: black;
	font-family: latobold, sans-serif;
	font-size:2em;
	font-weight:normal;
	margin-bottom:-5px;
}

@media all and (max-width: 767px) {
	section h1 {
		font-size:1.4em;
	}
}

@media all and (max-width: 479px) {
	section h1 {
		font-size:1.2em;
	}
}

section h2 {
	/*color: fuchsia;
	color: mediumvioletred;
	color: #93143D;
	color:#5C0036;
	font-family: dancing, sans-serif;*/
	font-size:1.5em;
	font-weight:normal;
	margin-bottom:-5px;
  color:black;
}

@media all and (max-width: 479px) {
	section h2 {
		font-size:1.3em;
	}
}

section p {
	color:black;
}

@media all and (max-width: 479px) {
	section p {
		/*font-size:3em;*/
	}
}

ul {
    color:black;
    /* Attention : le padding ici joue pour toutes les listes à puce
    s'il faut prendre en compte un objet float, uliliser la classe .listapus */ 
    padding-left:30px; 
} 
 
/*li { 
    padding-left:20px; 
}*/ 



/* Classes et id *****************************************************************************************************************************/

.auteur {
	/*background-color:yellow;*/
	margin-top:-20px;
	text-align:right;
}

.centre {
	display:block;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#choixlangue {
	float:right;
	margin-bottom:-20px;
	margin-left:-75px;
	margin-right:15px;
	position:absolute;
	right:5px;
	top:5px;
	width:60px;
	/*z-index:100;*/
}

.citation {
	font-family:dancing, cursive;
	font-size:1.5em;
	font-style:italic;
	min-width:50%;
	text-align:right;
}

.copyright {
	background-color:white;
	font-size:0.9em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.cursive {
	font-family:dancing, cursive;
}

.droite {
	float:right;
	text-align:right;
}

.gauche {
	float:left;
	text-align:left;
}


.gras {
	font-weight:bold;
}

.illustration {
	font-style:italic;
	font-size:0.8em;
	margin-right:15px;
	margin-left:0px;
  padding-bottom:5px;
	width:50%;
}

.illustr {
	font-style:italic;
	font-size:0.8em;
	margin-right:15px;
	margin-left:0px;
  margin-top:20px;
	width:30%;
}

.illu {
	font-style:italic;
	font-size:0.8em;
	margin-right:15px;
	margin-left:0px;
  padding-bottom:30px;
	width:50%;
}


.large {
	width:100%;
}

.lg {
	background-color:#113060;
	color:white;
	display:inline-block;
	font-size:0.5em;
	/*height:30px;*/
	margin-left:10px;
	padding-bottom:4px;
	padding-left:4px;
	padding-right:4px;
	padding-top:4px;
	min-width:50px;
}

.lgc {
	background-color:white;
	color:#113060;
	display:inline;
	font-weight:bold;
	height:12px;
	margin:0 4px 0 0;
	padding-left:4px;
	padding-right:4px;
}

.listapus380 {
    /* Les padding et margin ne prennent pas en compte les objets en float
    On est donc obligé de rajouter leur largeur ici...
    background-color:yellow; */
    padding-left:380px;
} 

.opacite {
	background-image:url("images/opacite97.png");	
	/*background-color: #ffffffee;*/
	/*background-size:cover;
	margin-top:-15px;*/
}

.opaccueil {
	margin-top:-15px;
}

.photoid {
	float:right;
	margin-left:20px;
	text-align:right;
}

.pied {
	font-size:0.9em;
}

.right {
	text-align:right;
}

.secret {
	height:0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	visibility:hidden;
}

.souligne {
	text-decoration:underline;
}

.succes { // Message de réussite (ex: envoi de mail effectué)
	/*background-color:lightgreen;*/
	/*background-image:url("images/vert.png");*/
	background-size: cover;
	border:3px solid black;
	color:black;
	display:inline-block;
	font-size:x-large;
	margin-left:auto;
	margin-right:auto;
	padding-right:50px;
	padding-left:50px;
	text-align:center;
}

.warnbig { // Message d'erreur en gros caractères (ex: envoi de mail refusé)
	/*background-color:yellow;*/
	/*background-image:url("images/rouge.png");*/
	background-size: cover;
	border:3px solid black;
	color:black;
	display:inline-block;
	font-size:x-large;
	margin-left:auto;
	margin-right:auto;
	padding-right:50px;
	padding-left:50px;	
	text-align:center;
}