/*
# ------------------ BEGIN LICENSE BLOCK ------------------
#
# This file is part of PluXml : https://www.pluxml.org
#
# Package:		theme.css
# Copyright (c) 2017-2019 PluXml
# Authors		Stephane F., Pedro "P3ter" CADETE., Thomas "sudwebdesign" Ingles.
# Licensed under the GPL license.
# See http://www.gnu.org/licenses/gpl.html
#
# ------------------- END LICENSE BLOCK -------------------
*/

/* en gros, orga du fichier theme.css :
# police
# body
# header
# main
# pagination
# article
# commentaires
# sidebar
# tags
# footer
*/

@font-face {
    font-family: 'ahellyaregular';
    src: url('../fonts/ahellya-webfont.eot');
    src: url('../fonts/ahellya-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ahellya-webfont.woff') format('woff'),
         url('../fonts/ahellya-webfont.ttf') format('truetype'),
         url('../fonts/ahellya-webfont.svg#ahellyaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'refresh_bonusregular';
    src: url('../fonts/refreshbonus-regular-webfont.eot');
    src: url('../fonts/refreshbonus-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/refreshbonus-regular-webfont.woff') format('woff'),
         url('../fonts/refreshbonus-regular-webfont.ttf') format('truetype'),
         url('../fonts/refreshbonus-regular-webfont.svg#refresh_bonusregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'open_sansregular';
	src: url('../fonts/OpenSans-Regular-webfont.eot');
	src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
	url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
	url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'morsalregular';
    src: url('../fonts/morsal-webfont.eot');
    src: url('../fonts/morsal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/morsal-webfont.woff') format('woff'),
         url('../fonts/morsal-webfont.ttf') format('truetype'),
         url('../fonts/morsal-webfont.svg#morsalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'louis_george_caferegular';
    src: url('../fonts/louis_george_cafe-webfont.eot');
    src: url('../fonts/louis_george_cafe-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/louis_george_cafe-webfont.woff') format('woff'),
         url('../fonts/louis_george_cafe-webfont.ttf') format('truetype'),
         url('../fonts/louis_george_cafe-webfont.svg#louis_george_caferegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* police et mise en page par défaut*/
body {
	--header-height: 0rem;
	--header-padding-top: 0rem;
	--bg-height: 250px;
    --bg-foot-height: 200px;
	font-family: 'louis_george_caferegular', sans-serif;
	font-size: 1.8rem;
	line-height: 2.5rem;
	color: #5f5f5f;
	background-color: #fff;
}

/* ---------- Header ---------- */

.heading-small {
	font-size: 2.3rem;
}

.header {
	background-color: #fff;
	border-bottom: 0px solid #ddd;
	padding-top: var(--header-padding-top);
	height: var(--header-height);
	z-index: 2;
}

/* la couleur du texte Poivre & Zeste */
.header a {
        font-family: 'morsalregular', sans-serif;
		color: #fff55d;
        text-decoration: none;
}

/* hover c'est ce qu'il se passe quand on passe le pointeur dessus */
.header a:hover {
	color: #5f5f5f;
    text-decoration: none;
}

/* la couleur du sous-titre */
.header h2 {
	color: #5f5f5f;
}

/* toute la zone avec le titre, le sous-titre et l'image de fourchette */
.logo {
	background: url("../img/Sans titre.png") top left no-repeat;
/* no repeat pour indiquer que l'image n'est pas un motif, mais apparaît juste une fois (la zone est beaucoup plus grande que la taille d'image) */
	height: 250px;
	background-size: 3rem;
	background-position: 5rem 0rem;
	padding-left: 10rem;
	margin-left: -5rem;
    padding-top: 2rem;
}

/* obsolète car utilisation de la classe .banner à la place 
# .bg {
#	background: url(../img/bandeau-site.jpg) no-repeat top left;
#	-webkit-background-size: cover;
#	-moz-background-size: cover;
#	-o-background-size: cover;
#	background-size: cover;
#	height: var(--bg-height);
} */

.banner {
    	text-align: center;
    	padding: 0 ;
		}
.banner img {
    	max-width: 100vw;
    	margin: 0 auto;
    	height: auto;
		}

.nav {
	text-align: right;
	padding-top: 2rem;
	}

ul.menu {}

.menu>li {
	font-size: 2rem; 			/* taille de police des éléments du menu de nav */
	margin-bottom: .8rem;
    display: block;        		/* menu en colonne */
}

.menu a {
	text-decoration: none;
	border-bottom: 0px solid transparent ;
}

/* pour afficher/ou non le soulignage pour les éléments du menu
.menu a:hover { border-bottom: 1.5px solid #5F5F5F; }
*/

.menu>li>span {
	cursor: default;
	}
.menu>li ul {/* sub menu */
	position: absolute;
	padding: 0;
	line-height: 2.8rem;
	z-index: 10;
	}
.menu > li:last-of-type ul {
	right: 2rem;
	}
.menu>li:not(:hover) ul {/* hide sub menu */
	display: none;
	}
.menu ul li {
	display: block;
	margin: 0;
	padding: 1rem 1rem;
	text-align: left;
	}
.menu .sub-menu {
	overflow-y: auto;
}
.menu .sub-menu li {
	padding: 0 0.35rem;
}
.menu .sub-menu li:last-of-type {
	padding-bottom: 0.35rem;
}

.menu>li span::before {/* / menu */
	content: '25bc';
	padding-right: 0.5rem;
}

ul.menu a.noactive:hover,
ul.menu li.noactive a:hover,
ul.menu li.active a,
ul.menu li a.active {
	border-radius: 5px;
	color: #fff55d; /* couleur des éléments actifs et survolés du menu */
}

ol li strong.titre {
	font-size: 2.1rem;
	line-height: 2
	}

ol li strong.titre::after {
	content: '>';
	margin-left: 1rem;
	text-shadow: 2px 2px #fff55d;
	}

/* définition de la sous-classe 'titre' pour 'ol li strong' (et de son comportement) qui est utilisée pour les accroches en page d'accueil */
ol li strong.titre:hover {
	margin-left: 1.5rem
	}
	
ol li:hover::before {
	text-shadow: 2px 2px #fff55d;
/*
    padding-right: .5rem;
    margin-left: .5rem;
	transform: rotate(90deg);
*/
	}
	
ol li p {
	margin-left: 5rem;
	margin-bottom: .5rem;
	margin-top: .5rem;
	}

ul.menu li span,
ul.menu li a {
	display: inline;
	padding-left: .35rem;
	padding-right: .35rem;
	width: 100%;
	background-color: transparent;
	border-radius: 5px;
	color: #000; /* couleur des éléments du type 'Haut de page' tout en bas ? */
	white-space: nowrap;
}

ul.menu li span a,
ul.menu li a span {
	white-space: nowrap;
	display: inline;
	margin-right: -0.35rem;
	padding-left: 0;
}
ul.menu li.noactive a,
ul.menu a.noactive {
	border-radius: 5px;
	color: #5f5f5f; /* couleur des éléments du menu inactifs en haut */
}

p a:hover,
h1 a:hover {
	text-shadow: 2px 2px #fff55d;
	color: #5f5f5f;
    font-weight: bold;
	}


.cat-list .active,
.classified-in .active {
	background-color: #6aa6ce;
	color: #fff;
}

/* ---------- Main ---------- */

.main {
	background-color: #fff; /* couleur du fond de page par défaut */
	padding-top: 1rem;
}

.repertory {
	margin-top: 4rem;
}


/* ------- Pagination ------- */

.pagination {
	margin: 3rem 0 3rem 0;
}

.pagination a {
	background-color: #258fd6;
	border-radius: .3rem;
	color: #fff;
	padding: .9rem .7rem;
	transition-duration: .2s;
}

.pagination a:hover {
	background-color: #3a6c96;
	color: #fff;
	text-decoration: none;
}

.pagination span:first-letter,
.pagination a:first-letter {
	text-transform: uppercase;
}

.p_first,
.p_prev,
.p_current,
.p_next,
.p_last {
	display: inline-block;
}


/* ------- Article ------- */

article:after {
	display:block;
	content: "";
	clear: both;
}

.article header {
	margin-top: 2.5rem;
}

.article header div {
	margin: 0;
}

/* les titres de page en jaune */
.article header h2,
.article header h2 a {
	color: #5f5f5f;
	font-size: 2.9rem;
    font-family: 'morsalregular', sans-serif;
	line-height: 1.2em;
	margin: 0;
    text-align: center;
    text-shadow: 2px 2px #fff55d;
}

.article header h2:hover {
	text-shadow: none;
}

.article header small,
.comment small {
	color: #9EABB3;
}


/* ------- Comments ------- */

#form {
	border-top: 130px solid transparent;
	margin: -130px 0 0;
}

/* ------- Sidebar ------- */

.aside {
	padding: 0 2rem 0 2rem;
}

aside legend {
	text-align: center;
	color: #5f5f5f;
	margin-bottom: 1rem;
	padding: 6px;
	font-size: 1.4rem;
	line-height: 1.7rem;
	font-family: 'louis_george_caferegular', sans-serif;
	font-style: italic;
	}

/*
# spécifiquement les images mises en colonne 'aside' de la page 'exemples de menu'
# donc c'est à changer si les largeurs de colonne changent...!
*/
 aside.content.col.sml-12.med-5.lrg-4 img {
	border-radius: 15px;
	/* clip-path: circle(57%); */
	margin-bottom: 1rem;
	}


/* --------- tags ---------- */

/* ---------- Footer ---------- */

.footer {
	background: url(../img/bandeau-foot.jpg) no-repeat top right;
	color: #666;
	padding: 0;
	text-align: center;
        padding-bottom: 0;
	height: 140px;
	font-size: 1.2rem;
        -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
        z-index: 4;
}

.footer p {
	margin: 0;
        color: #fff;
}

.footer a:hover {
	text-decoration: none;
}

/* --------- Adaptativité en fonction des écrans -------- */

@media (min-width: 128rem) {
	.container {
		padding-left: 15rem;
		padding-right: 15rem;
	}
/* 
	.logo {
		background: url("../img/pluxml-logo-black.png") top left no-repeat;
		height: 12rem;
		background-size: 12rem;
		background-position: 6rem 0;
		padding-left: 18rem;
		margin-left: -12rem;
	}
*/
}

@media (min-width: 64rem) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

/* règles ajustées pour affichage entre 970 et 767px
 * a priori à 970px l'assiette de paëlla commence à prendre trop de place par rapport au texte, d'où cette valeur pour changer les règles
 * en fait on remplace la bannière (où le header a une hauteur nulle) par une bannière avec hauteur nulle et un header. 
 * C'est l'arrache mais ça marche !
*/
@media (max-width: 970px) {
	
	.banner img {
    	height: 0;
	}
	
	.header {
		background: url(../img/bandeau-responsive.jpg) no-repeat top;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		height: 300px;
	}
	
	ol li strong.titre {
		font-size: 2.1rem;
		line-height: 1.5
	}
	
	ol li p {
		margin-left: 5rem;
		margin-bottom: .5rem;
		margin-top: .5rem;
	}

	ol li {
        padding-left: 4rem;
        padding-bottom: 1rem;
        padding-right: 4rem;
	}
	
	
/* règles ajustées pour affichage entre 767 et 464px */
@media (max-width: 767px) {

/* 
#	'sticky' permet d'avoir le header toujours en haut de l'écran.
# 	'top' permet de régler la hauteur dont le header se relève avant de devenir vraiment sticky
*/

	.header {
		position: sticky;
		top: -290px;
		}
	.header:hover .grid {
		overflow: unset;
		} 
	.header div.grid {
		overflow: unset; /* fix hidden sub-menu */
		} 
/* 
# grosse bidouille où je change la largeur des 'colonnes' par défaut (définies dans plucss.css) pour que les 2 éléments du header (le titre et le menu) soient l'un au-dessus de l'autre, en prenant chacun toute la largeur
*/
	.header div.col.sml-6,
	.header div.col.med-5,
	.header div.col.med-7 li {
		width: 100%;
		} 

	.logo {
		background-size: 2.5rem;
		background-position: 1rem 0rem;
		padding-left: 5rem;
		margin-left: -1rem;
		padding-top: 2rem;
		height: 120px;
	}
	
	ol li strong.titre {
		font-size: 1.6rem;
		line-height: 1.2
	}
	
	ol li strong.titre:hover {
		margin-left: 0
		}
	
	ol li p {
		margin-left: 3rem;
		margin-bottom: .5rem;
		margin-top: .5rem;
	}

	ol li {
        padding-left: 2rem;
        padding-bottom: 1rem;
        padding-right: 2rem;
	}
	
	.article header h2 {
		font-size: 2rem;
		line-height: 3rem
	}
	
	body {
		font-size: 1.6rem;
	}
	h1,.h1,.s1 {
		font-size: 2.2rem;
	}
	h2,.h2,.s2 {
		font-size: 1.6rem;
        }
	h3,.h3,.s3 {
		font-size: 1.8rem;
        font-weight: bold;
        }

	.footer {
		padding: 1rem 0;
	}
	
	.nav {
		position: sticky;
		top: 0;
		z-index: 2;
		height: auto;
		max-height: 80%;
		overflow-y: auto;
		text-align: right;
		margin-top: 0;
		border-radius: 2rem;
		padding-top: 0rem;
	} 
	
	.nav>.container {
		padding: 0;	
	} 
	
	ul.menu {
		padding: 0;
	}
	
	.menu>li {
		font-size: 1.4rem; /* taille de police des éléments du menu de nav */
		margin-bottom: 0;
	}
	.responsive-menu label {
		color: #fff55d; 
		font-size: 2.1rem;
		text-align: right;
		background: transparent;
		font-family: 'morsalregular', sans-serif;
	} 

	.menu>li ul {
		position: relative !important;
		border-bottom: 0px solid transparent;
	}
	
	ul.menu li.active a,
	ul.menu li.active:hover,
	ul.menu li,
	ul.menu li:hover {
		background-color: none; /* couleur de fond des entrées du menu */
	}
}

/* règles ajustées pour affichage en-dessous de 490px --> smartphones ? */
@media (max-width: 490px) {
	.logo {
		background-position: 1rem 0;
		padding-left: 2rem;
		background-size: 2.5rem;
		padding-left: 5rem;
		margin-left: -1rem;
		}

	.header {
		position: sticky;
		top: -300px;
		}
	.header:hover .grid {
		overflow: unset
		} 
	.header div.grid {
		overflow: unset; /* fix hidden sub-menu */
		} 

	body {
		font-size: 1.5rem;
	}
/*
 * taille des entêtes de page (ou chapeaux, le texte qui n'est pas du 'corps', quoi)
*/
	h1,.h1,.s1 {
		font-size: 1.6rem;
	}
/*
 * taille de police des entrées principales dans la liste des menus
*/
	h3,.h3,.s3 {
		font-size: 1.4rem;
        	font-weight: bold;
        }
/*
 * taille du sous-titre du site
*/
    .h4 {
        font-size: 1.4rem;
        }
	.nav {
		padding-top: 0rem;
		}
		
	ul.menu {
		margin: 0 2px .5px 2px;
		border-radius: 15px;
		}
		
	ul.menu li.noactive a,	
	ul.menu a.noactive{
		color: #fff55d; /* couleur des éléments du menu inactifs en haut */
	}
	

	ul.menu li.active a,
	ul.menu a.active,
	ul.menu li.active:hover,
	ul.menu li:hover {
		color: #5f5f5f !important; /* couleur de l'élément actif du menu en haut et des autres quand on passe dessus */
		text-decoration: none;
	}
	

	ul.menu .noactive:hover,
	ul.menu li a:hover {
		color: #5f5f5f !important;
		text-decoration: none;
		}

	
	ul strong {
		padding-left: 2rem;
		}
	ul li {
		font-size: 1.3rem;
		padding-bottom: 5px;
		line-height: 1.7rem;
		padding-left: 2rem;
		}
	ul li::before {
		font-size: 110%;
		}
	.static.group,
	.static.menu a {
		padding: 0;
	}
}

@media (max-width: 421px) {
	ol li strong.titre {
		font-size: 1.4rem;
		line-height: 1.1
	}
	
	ol li p {
		margin-left: 2rem;
		margin-bottom: .5rem;
		margin-top: .5rem;
	}

	ol li {
        padding-left: 1.2rem;
        padding-bottom: 1rem;
        padding-right: 1.2rem;
	}
}