/*    	    *** *** *** *** 	        */
/*    	    				 	        */
/*    	    	Module 	        		*/
/*  	   Og-Page (CMS et tools)		*/
/*    	    				 	        */
/*    	    *** *** *** *** 	        */


/*
contient les styles utilisés pour les contenus administrables uniquement via la Class Page
ainsi que les contenus générés par les méthodes de la Class Page (Ariane, Popup, par ex.)
et les contenus CMS de la page d'Accueil (donc issus de la BdD table 'pages' et consors)
*/


/****************************/
/*    	   PAGES CMS        */
/****************************/

.cms_page_titre {
	margin: 2em 0 0em;
	line-height: 1.2em;
	text-transform: uppercase;
	font-family: montserratlight, serif;
	font-size: 2.7em;
}
.cms_page_intro {
	margin: 1.7em 0 1.7em;
	font-family: montserratlight, serif;
	font-size: 1.6em;
	/*font-weight: bold;
	font-style: italic;*/
	line-height: 1.6em;
	color: #0ae;
	color: #258;
}
.cms_page_texte { /* ce style doit permettre la mise en page Page::Og_CMS_affiche() */ 
	font-family: montserratlight, sans-serif;
	font-size: 1.4em;
	font-size: calc(0.7em + 0.5vw);
	line-height: 1.6em;
	color: #333;
}
.cms_page_texte p:not([class]) {
	margin: 2em 0;
}
.cms_page_mention { /* entre texte et commentaires */ 
	font-size: 0.7em;
	line-height: 1.6em;
	color: #333;
}
/* si l'image principale est quelque part dans le corps de texte */
.cms_page_illus { /* v° vite fait, à compléter avec les autres possibilités */
	float: right;
	width: 50%;
	margin: 0 0 1em 2em;
}

.cms_page_lien {
	display: inline-block;
	margin: 2em 0px;
	padding: 0em 2em 0em 0em;
    font-style: italic;
	font-size: 0.9em;
	color: #5c5c59;
	border: 1px solid #242;
	border-radius: 2em;
}
.cms_page_lien span {
	display: inline-block;
	margin: 0px 2em 0px 0px;
	padding: 1em 2em 1em 2em;
	color: #242;
	background: #e0e6e3;
	border-radius: 2em 0 0 2em;
}
.cms_page_lien:hover {
	color: #fff;
	background: linear-gradient(#363, #242);
}


/****************************/
/*    	PAGES de PREZ       */
/****************************/

#html_page_titre_prez {
	margin: 0px 0px 0px;
	padding: 0px;
	text-align: center;
	background: center center;
	background-size: cover;	
}
#filAriane {
	margin: 0px auto 0px;
}
.titre_page_prez {
	margin: 0 0 0;
	padding: 50px 10vw 200px;
	letter-spacing: 6px;
	line-height: 3.2vw;
	font-family: "montserratbold",sans-serif;
	font-size: 5.4vw;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	border: none;
	background: linear-gradient(rgba(100, 100, 100, 0), rgba(0, 0, 0, 0.5));
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
	background: linear-gradient(rgba(0,50,100,0.9), rgba(0,50,100, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}
.titre_page_prez img{
	vertical-align: middle;
	width: calc(100px + 5vw);
	background: #fff; 
	border: 1px solid #ddd; 
	border-radius: 20px; 
	margin: 0 3vw 1vh 0;
	padding: 1vh 1vw;
}

.prez_titre {
	position: relative;
	margin: 2em 0 0;
	margin: -2em 0 0;
	padding: 0 0 1em;
	line-height: 1.2em;
	text-transform: uppercase;
	font-size: 2.7em;
}
.prez_titre:after {
	content: " ";
	position: absolute;
	z-index: -10;
	bottom: 0px;
	left: 0%;
	width: 1.5em;
	height: 6px;
	margin: auto;
	/* border-radius: 2px; */
	background: #ffcc00;
}

.prez_coord {
	float: right;
	margin: 0 0 2vh 2vw;
	/* border: 1px solid #cdcecf; */
	padding: 1vh 1vw;
	background: #fcfcfc;
	background: linear-gradient(to bottom right, #fff 0%, #f9fcff 20%, #f6f6f6 100%);
	color: #456;
	line-height: 1.6em;
	box-shadow: 2px 2px 4px #cdcecf;
}
.prez_clefs {
	margin-top: 4em;
}
.prez_clefs a{
	font-family: montserrat_italic;
	font-size: 0.8em;
	border: 1px solid #ddd;
	background: #eee;
	padding: 0.5vh 1vw;
	border-radius: 20px;
	color: #999
}
.prez_clefs a::before {
	content: "\00023";
	padding: 0 1ex 0 0;
}
.prez_clefs a:hover{
	background: #003264;
	color: #fff;
}
@media screen and (max-width: 700px) {
	.prez_titre {
		margin: 2em 0 0;
	}
	.prez_coord {
		float: none;
		margin: 0  2vw 2vh 2vw;
		line-height: 1.6em;
		font-size: 1.4em;
		text-align: center;
	}
	.prez_coord .bt_4 {
		font-size: 1.2em;
		margin: 0 1ex;
	}
	.prez_clefs {
		text-align: center;
	}
}

/* médaillon sommaire pages de prez */

.liste_logos {
	margin: 2vh 10vw;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.liste_logo_un {
	margin: 1vh 1vw;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #000;
	border: 1px solid #eee;
	padding: 0.5vh 0.5vw;
	box-shadow: 2px 2px 2px #f9f9f9;
	background: #fcfcfc;
}
.liste_logo_bg {
	/* background: url("../images/profils/_ent_no_image.png") no-repeat center center; */
	/* background-size: 150px 150px; */
}
.liste_prez {
	display: flex;
	justify-content: center;
	margin: 10vh 2vw;
}
@media screen and (max-width: 700px) {
	.liste_logos {
		justify-content: center;
	}
	.liste_prez {
		flex-flow: column wrap;
		align-items: center;
	}
}


/****************************/
/*    PAGES de Services     */
/****************************/


/* 
	on gardera ce modèle Og'Up, si besoin de structurer autrement 
	(hors adaptation courleurs/polices) 
	il faudra créer des styles supplémentaires 
*/

#nav_sous_serv { /* nav = ensemble des liens */
	/* actuellement class='basVide' */
	text-align: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.nav_sous_serv_bloc { /* 1 lien */
	display: inline-block;
	margin: 0% 1% 1vh 1%;
	padding: 0% 0% 0% 0%; 
	width: 300px;
	max-height: 300px; 
	height: 300px; 
	overflow-y: hidden;
	position: relative;
	/* background: linear-gradient(rgba(10,50,100,0),rgba(10,50,100,0),rgba(10,50,100,0.8)); */
}
.nav_sous_serv_bloc:first-child {
	margin: 0% 1% 0% 0%;
}
.nav_sous_serv_titre {
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background-color: #003264;
	background: rgba(10,50,100,0.8);
	margin: 0 0;
	padding: 1em 0;
	/* height: 1em; */
	transition: 0.4s;
	/**/
	z-index: 300;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.nav_sous_serv_img {
	margin: 0 0;
	/* height: 130px; */
	/* height: 160px;  */
	height: 100%; 
	transition: 0.4s;
	overflow: hidden;
	z-index: 200;
	position: relative;
}
.nav_sous_serv_img img{
	/* width: 100%; */
	height: 100%;
	width: auto;
	max-width: none;
	transition: 0.4s;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50%;
	margin-left: -50%;
	filter: brightness(200%);
}
.nav_sous_serv_logo {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	height: 92%; /* parce que la descr est plus haute que le titre */
	width: 100%;
	display: flex;
	z-index: 300;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}
.nav_sous_serv_logo p {
	margin: 1em 0;
	text-align: center;
	font-size: 2.3em;
	line-height: 1.1em;
	color: #fff;
	text-shadow: 2px 2px 2px #666;
	/* background: linear-gradient(rgba(10,50,100,0),rgba(10,50,100,0.8),rgba(10,50,100,0.8),rgba(10,50,100,0)); */
}
.nav_sous_serv_logo img {
	max-height: 50%;
	margin: auto;
}
.nav_sous_serv_descr {
	margin: 0 0;
	padding: 1em 1px;
	background: #999;
	background: #9c9f9c;
	background: rgba(10,60,90,0.6);
	color: #fff;
	text-align: center;
	font-size: 0.9em;
	font-weight: normal;
	font-style: italic;
	line-height: 1.4em;
	transition: 0.4s;
	/**/
	z-index: 300;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
a:hover .nav_sous_serv_titre {
	opacity: 0.5;
}
a:hover .nav_sous_serv_descr {
	color: #1d1d1d;
	color: #000;
	background: rgba(240,250,246,0.5);
	transition: 0.4s;
}
a:hover .nav_sous_serv_img img{
	/* height: 160px;  */
	/* height: 220px;  */
	transform: scale(2); 
}

@media screen and (max-width: 700px) {
	.nav_sous_serv_bloc, .nav_sous_serv_bloc:first-child {
		margin: 0% auto 4vh;
	}
}


/****************************/
/*   PAGES RECHERCHE        */
/****************************/

.res_page_titre {
	
}
.res_page_descr {
	
}
.res_page_liste {
	
}
.res_article {
	/* bloc */
	margin: 1vh 0;
	padding: 1vh 0;
	/* flex */
	display: flex;
	flex-flow: column wrap;
	align-items: flex-start;
}
.res_art_vign {
	
}
.res_art_nom {
	margin: 1vh 0;
	color: #258;
    font-family: 'montserratregular';
	font-size: 1em;
}
.res_art_descr {
    font-family: 'montserrat_italic';
	font-size: 0.8em;
	line-height: 1.4em;
}
.res_art_bt {
	margin: 1vh 0;
	padding: 0.4em 1.4em;
	border-radius: 2em;
    font-family: 'montserratregular';
	font-size: 0.8em;
	text-align: center;
	background: #ccc;
	color: #fff;
	transition: 0.5s;
}
.res_art_bt:hover {
	background: #0ae;
	background: #258;
}
.res_form {
	margin: 4vh 0;
}
.res_form_entree {
	border: 1px solid #258;
	padding: 5px 1em;
	color: #606366;
}
.res_form_submit {
	background: #258;
	color: #fff;
	padding: 5px 2em;
	border: 1px solid #258;
	transition: 0.5s;
}
.res_form_submit:hover {
	color: #258;
	background: transparent;
}