@charset "UTF-8";

/**
 * @package simplePluCss
 * @version 11.04
 * @lastmodified 2021-10-25
 * @site http://plusimplexml.fr
 * @author Patrice Cahue as cpalo
 * Author Url: http://www.cahue.net
 * @license Coding under GNU GPL
 * 		See http://www.gnu.org/licenses/gpl-3.0.html
 * @license Content & others under CC-BY-NC-SA
 * 		See http://creativecommons.org/licenses/by/3.0/fr/
 */

/*! simplecss.css v11.03 | GPL License | simpleframework.fr - 2021/03/17 */
/*! sanitize v12.0.0     | CC0 1.0 Universal License | csstools.github.io/sanitize.css - 2020/08/20 */


/*! plucss.css v1.3.1 | GPL License | pluxml.org - 2019/09/18 */
/*! Authors	Jos, Stephane F., sudwebdesign, Pedro "P3ter" CADETE */


/**
 * =======================================================
 * ---     SIMPLE-PLUCSS - BASE 100% (1rem = 16px)     ---  
 * ---              PLUXML VERSION  v5.8.7             --- 
 * ======================================================= 
 */
 
/**
 * Ce travail est une adaptation du theme par défaut de PluXml : PluTheme 
 *     
 * Typographie
 *     base font-size : 100% au lieu de 62.5%
 *     mais en conservant le font-size de base ( 1.5rem = 0.9375rem = 15px )
 * Utilisation des variables css (custom properties)
 *     permettant en particulier d'éviter les helpers liés aux couleurs des composants
 */
 
 
/**
 * ------------------------
 * --- TABLE OF CONTENT ---
 * ------------------------
 */

/**
    1 - Reset & Default Settings
	2 - Typographical basics
		2.1 - Fonts & Body
		2.2 - Heading
		2.3 - Helpers : Couleur du texte
	3 - Typography : Miscellaneous
		3.1 Typographical enhancements
		3.2 Quotes, code and poetry
		3.3 Lists
		3.4 Tables
		3.5 Hyperlinks
	4 - Forms
		4.1 Reset
		4.2 Forms
		4.3 Helpers : Couleur des button et input
	5 - Navigation
		5.1 Divers menus
		5.2 Menu responsive
		5.3 Pagination
	6 - Others Components
		6.1 - modal-xxxx
		6.2 - Gallery 
		6.3 - Alert
		6.4 - Button
		6.5 - Progress Bars 
		6.5 - Elements Badge & Label 
		6.6 - Frame
		6.7 - Images
		6.8 - Tooltip
	7 - Helpers
    8 - Grid, gallery & helpers
    9 - Styles for printing
*/ 
 
 
/**
 * -------------------------------------
 * --- 01 - RESET & DEFAULT SETTINGS ---
 * -------------------------------------
 */
 
*,
*:after,
*:before {
	box-sizing: border-box;
}

html {
	font-size: 100%;	/* 62.5% */
}

details,
main,
summary {
	display: block;
}

pre {
	overflow: auto;
}
progress {
    vertical-align: baseline;
}

svg:not(:root) {
	overflow: hidden;
}


/**
 * ---------------------------------
 * --- 02 - TYPOGRAPHICAL BASICS ---
 * ---------------------------------
 */
 
 body {
	font-family: sans-serif;
	font-size: 0.9375rem;     /* 1.5rem; */
	line-height: 1.5;
	margin: 0;
}

blockquote {
	font-style: italic;
}

code,
kbd,
pre,
samp {
	font-family: serif;
	font-size: 1rem;		/* .9375rem; */
}

pre {
	overflow: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1;
	margin:  1.875rem 0 .9375rem 0;	/* 3rem 0 1.5rem 0; */
	font-weight: 500;
}

hr {
	height: 0;
}

body {
	color: #444;
}

cite:before {
	content: "— ";
}

.h1,.s1,
.h2,.s2,
.h3,.s3,
.h4,.s4,
.h5,.s5,
.h6,.s6 {
	height: auto;
}

.h1,
.s1,
h1 {
	font-size: 1.5625rem;	/* 2.5rem */
}
.h2,
.s2,
h2 {
	font-size: 1.25rem;	/* 2rem */
}
.h3,
.s3,
h3 {
	font-size: 1.04375rem;	/* 1.67rem */
}
.h4,
.s4,
h4 {
	font-size: .9375rem;/* 1.5rem */
}
.h5,
.s5,
h5 {
	font-size: .83125rem;	/* 1.33rem */
}
.h6,
.s6,
h6 {
	font-size: .73125rem;	/* 1.17rem */
}

.heading-large {
	font-size: 5rem;	/* 8rem; */
}
.heading-medium {
	font-size: 4.0625rem;	/* 6.5rem; */
}
.heading-small {
	font-size: 2.5rem;	/* 4rem; */
} 
 
 
 /**
 * ---------------------------------------
 * --- 03 - TYPOGRAPHY : MISCELLANEOUS ---
 * ---------------------------------------
 */

/** 
 * --- 3.1 - Typographical enhancements ---
 * ----------------------------------------
 */
 
abbr {
	border-bottom: none;
	cursor: help;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

small {
	font-size: 0.7313rem;		/* 1.17rem; */
}

sub,
sup,
.sup {
	font-size: 0.7313rem;		/* 1.17rem; */
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup,
.sup {
	top: -0.4688rem;			/* -0.75rem; */
}
sub {
	bottom:  -0.4688rem;		/* -0.75rem; */
}


/** 
 * --- 3.2 - Quotes, code and poetry ---
 * -------------------------------------
 */

/** 
 * --- 3.3 - Lists ---
 * -------------------
 */
 
 ul.inline-list {
	font-size: 0;
	margin: 0.9375rem 0;		/* 1.5rem 0 */
	padding-left: 0;
}

	ul.inline-list li {
		display: inline-block;
		list-style-type: none;
		margin-left: .3125rem;	    /* .5rem */
		font-size: 0.9375rem;		/* 1.5rem */
	}
	ul.inline-list li:first-child {
		margin-left: 0;
	}

ul.unstyled-list {
	padding-left: 0;
}
	ul.unstyled-list li {
		list-style-type: none;
	}

/** --- 3.4 - Tables ---
    -------------------- */
	
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	caption,
	th {
		text-align: left;
	}
	tr {
		border-bottom: 1px solid;
	}
	td,
	th {
	height: 2.1875rem; 		    /* 3.5rem; */
	padding-left:  0.4375rem; 	/* .7rem; */
	padding-right: 0.4375rem;   /* .7rem; */
}

	tr {
		border-color: #bbb;
		transition-duration: .2s;
	}
	tr:hover {
		background-color: #dbedf9;
		transition-duration: .2s;
	}

.scrollable-table {
	overflow: auto;
}
	
	
/** 
 * --- 3.5 - Hyperlinks --- 
 * ------------------------
 */
 
a {
	background: transparent;
}
a:active,
a:hover {
	outline: 0;
}

a {
	color: #258fd6;
	text-decoration: none;
}
	a:active,
	a:hover {
		color: #444;
		text-decoration: underline;
	}
	
/** 
 * --- 3.6 - Images et médias --- 
 * ------------------------
 */
 
figure {
	margin: 0;
}
 
 img {
	border: 0;
	height: auto;
	max-width: 100%;
}

.img-circle {
	border-radius: 50%;
}
.img-rounded {
	border-radius: .1875rem;		/* .3rem */
}
	
	
/**
 * ------------------
 * --- 04 - FORMS ---
 * ------------------
 */
 
/** 
 * --- 4.2 - Reset ---
 * -------------------
 */

fieldset {
	border: none;
	padding: 0;
}

legend {
	margin-bottom: .9375rem;  /* 1.5rem; */
	padding: 0;
}

label {
	display: block;
	padding-bottom: 0.1875rem; /* .3rem; */
}

button,
input,
select,
textarea {
	font: inherit;
	height: 1.875rem;		 /* 3rem; */
	margin: 0;
	outline: none;
	padding-left:  0.25rem;   /* .4rem; */
	padding-right: 0.25rem;   /* .4rem; */
	width: 100%;
}

button,
input {
	overflow: visible;
}
	button::-moz-focus-inner,
	input::-moz-focus-inner {
		border: 0;
		padding: 0;
	}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	border-color: transparent;
	cursor: pointer;
	padding-left:  0.4375rem;  /* .7rem; */
	padding-right: 0.4375rem;  /* .7rem; */
	width: auto;
}

textarea {
	height: auto;
	overflow: auto;
}

select {
	padding-left: .125rem;	/* .2rem; */
	padding-right: 0;
}

optgroup {
	font-weight: bold;
	font-style: normal;
}

[type="checkbox"],
[type="radio"] {
	height: auto;
	padding: 0;
	width: auto;
}
[type="file"] {
	height: auto;
	padding: 0;
}
[disabled]:hover {
	cursor: not-allowed;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-style: italic;
	color: #999;
}
::-moz-placeholder { /* Firefox 19+ */
	font-style: italic;
	color: #999;
}
:-ms-input-placeholder { /* IE 10+ */
	font-style: italic;
	color: #999;
}
:-moz-placeholder { /* Firefox 18- */
	font-style: italic;
	color: #999;
}  
 
/** 
 * --- 4.2 - Default settings by PluCss ---
 * ----------------------------------------
 */

form .col {
	margin-bottom: 0.9375rem;		/* 1.5rem */
}
form.inline-form button,
form.inline-form input,
form.inline-form label,
form.inline-form select,
form.inline-form textarea {
	display: inline-block;
	width: auto;
}
form .col.label-centered {
	margin-bottom: 0;
}

form .label-centered label {
	padding-top: 0.1875rem;		/* .3rem */
}

button,
input,
select,
textarea {
	border: 1px solid #bbb;
	border-radius: 0.1875rem;		/* .3rem */
	transition-duration: .2s;
}
input:focus,
select:focus,
textarea:focus {
	border: 1px solid #258fd6;
	transition-duration: .2s;
}
[type="file"] {
	border: none;
}

/** 
 * --- 4.2 - 4.3 - Color Settings by PluCss ---
 * --------------------------------------------
 */

:root {
	--bg-color-input: #777; 	  		 /* gris */
	--bg-color-input-hover: #555; 	 	 /* gris foncé */
	--color-input: #fff;		 		 /* blanc */
	--bg-color-elts-form-disabled: #ddd; /* gris clair */
	--color-elts-form-disabled: #aaa; 	 /* gris noir */	
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var(--bg-color-input);
	color: var(--color-input);
	transition-duration: .2s;
}
	button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover {
		background-color: var(--bg-color-input-hover);
		transition-duration: .2s;
	}
	
button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
button[disabled]:hover,
input[disabled]:hover,
select[disabled]:hover,
textarea[disabled]:hover {
	background-color: var(--bg-color-elts-form-disabled);
	color: var(--color-elts-form-disabled);
} 
 
 
/**
 * -----------------------
 * --- 05 - NAVIGATION ---
 * -----------------------
 */
 
 .menu {
	font-size: 0;
	margin: 0;
	padding-left: 0;
}
	.menu li {
		display: inline-block;
		font-size: .9375rem;		/* 1.5rem */
		list-style-type: none;
		margin-left: .9375rem;		/* 1.5rem */
	}
	.menu li:first-child {
		margin-left: 0;
	}
		.menu li.active a {
			color: #444;
		}

.menu.vertical li {
	display: block;
	margin-left: 0;
}

.menu.expanded li {
	margin-left: 0;
	transition-duration: .2s;
}
	.menu.expanded li:hover {
		border-radius: .1875rem;		/* .3rem */
		background-color: #ddd;
		transition-duration: .2s;
	}
		.menu.expanded li a {
			border-radius: .1875rem;		/* .3rem */
			display: block;
			height: 2.1875rem;			/* 3.5rem; */
			line-height: 2.1875rem;		/* 3.5rem; */
			padding-left: .4375rem;		/* .7rem; */
			padding-right: .4375rem;	/* .7rem; */
		}
		.menu.expanded li a:hover {
			text-decoration: none;
		}
		
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
	content: "/";
}
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
	margin-right: 0.4375rem;		/* .7rem */
}
.menu.expanded.breadcrumb > li + li:before {
	content: none;
}
.menu.expanded li.active a,
.menu.expanded li.active:hover {
	background-color: #258fd6;
	color: #fff;
}

/** 
 * --- 5.2 - Menu respponsive ---
 --------------------------------
 */

.responsive-menu label {
	background-color: #444;
	color: #fff;
	cursor: pointer;
	text-align: center;
}
#nav,/* fix old android browser (always open) */
.responsive-menu label,
.responsive-menu input[type=checkbox] { 
	display: none;
}
.responsive-menu label {
	height: 2.1875rem;			/* 3.5rem; */
	line-height: 2.1875rem;		/* 3.5rem; */
	padding-left: 0.4375rem;	/* .7rem; */
	padding-right:0.4375rem;	/* .7rem; */
}
#nav:checked+ul#responsive-menu,/* fix old android browser */
.responsive-menu input[type=checkbox]:checked+ul { 
	display: block;
}

@media (max-width: 767px) {
	.responsive-menu { /* fix old android browser : good position*/
		left: 0;
		right: 0;
	}
	/* Modif de gcyrillus-nomade du 23/10/2021 */
	/*.responsive-menu ul {
		display: none;
	}*/
	.responsive-menu > ul {
		display: none;
	}
			.responsive-menu label,
			.responsive-menu ul li {
				display: block;
				margin-left: 0;
			}
			.responsive-menu ul li:hover {
				background-color: #ddd;
			}
			.responsive-menu ul li a {
				display: block;
				height: 2.1875rem;			/* 3.5rem; */
				line-height:2.1875rem;		/* 3.5rem; */
				padding-left: 0.4375rem;	/* .7rem; */
				padding-right: 0.4375rem;	/* .7rem; */
			}
			.responsive-menu ul li a:hover {
				text-decoration: none;
			}
			.responsive-menu .menu.breadcrumb li + li:before,
			.responsive-menu .menu.expanded.breadcrumb > li + li a:before {
				content: none;
			}
			.responsive-menu ul li.active a,
			.responsive-menu ul li.active:hover {
				background-color: #258fd6;
				color: #fff;
			}
}

/** 
 * --- 5.3 - Pagination ---
 * ------------------------
 */
 
.pagination {
	margin: 0;
	padding: 0;
	width: 100%;
}
	.pagination ul,
	.pagination ul ul {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
		.pagination li,
		.pagination li li {
			display: inline-block;
			font-size: 0.9375rem;		/* 1.5rem */
			list-style-type: none;
			margin: 10px;
			cursor: pointer;
		}
		.pagination li.active a {
			color: #ff0000;
		}
		.pagination li.disabled a {
			color: #999;
		}
		.pagination li.disabled a:hover {
			text-decoration: none;
		}
		

/**
 * -----------------------------
 * --- 06 - OTHER COMPONENTS ---
 * -----------------------------
 */
 
/**
  * --- 6.1 - modal-xxxx ---
  * ------------------------
  */

.modal-mask {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	transition: opacity .3s ease;
}
.modal-container {
	width: 450px;
	margin: 40px auto 0;
	padding: 20px 30px;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
	transition: all .3s ease;
	font-family: Helvetica, Arial, sans-serif;
}
.modal-header {
	margin-top: 0;
}
.modal-body {
	margin: 20px 0;
}
.modal-footer {
	margin: 20px 0;
	text-align: right;
}
.modal-container button:hover {
	color: #333;
	background-color: transparent;
}
.modal-btn-close {
	background: transparent;
	border: 0;
	height: 1rem;
	height: 0.625rem;		/* 1rem */
	line-height: 0.625rem;	/* 1rem */
	margin-left: .125rem;	/* .2rem */
	padding: 0 2px;
	text-decoration: none;
	width: 0.625rem;		/* 1rem */
	color: #999;
}
.modal-btn-close:after {
	display: inline-block;
	content: "\00d7"; /* This will render the 'X' */
}

/** 
 * --- 6.2 - Gallery ---
 * ---------------------
 */

.gallery {
	list-style: none;
	margin-left: -0.9375rem;		/* -1.5rem */
	margin-right: -0.9375rem;		/* -1.5rem */
	overflow: hidden;
	padding-left: 0;
}
	.gallery li {
		float: left;
		padding: 0 .9375rem .9375rem .9375rem;	/* 0 1.5rem 1.5rem 1.5rem */
	}

/** 
 * --- 6.3 - Alert  ---
 * --------------------
 */
 
:root {
	--bg-color-alert: #777;
	--color-alert: #fff;
}

.alert {
	border-radius: 0.1875rem;	/* .3rem */
	margin-bottom: .9375rem;	/* 1.5rem */
	padding: .9375rem;			/* 1.5rem */
	background-color: var(--bg-color-alert);
	color: var(--color-alert);
}
	.alert a,
	.alert a:hover {
		color: inherit;
	}
	
/** 
 * --- 6.4 - Button ---
 * --------------------
 */

:root {
	--bg-color-button: #777;
	--bg-color-button-hover: #555;
	--color-button: #fff;
}
 
.button {
	border-radius: 0.1875rem;		/* .3rem */
	padding: .5625rem .4375rem;		/* .9rem .7rem */
	background-color: var(--bg-color-button);
	color: var(--color-button);
	transition-duration: .2s;
}
	.button:hover {
		background-color: var(--bg-color-button-hover);
		text-decoration: none;
		transition-duration: .2s;
	}
	
/** 
 * --- 6.5 - Progress Bars ---
 * ---------------------------
 */

.progress {
	background-color: #fff;
	border-radius: 0.1875rem;		/* .3rem */
	border: 1px solid #bbb;
	position: relative;
	width: 100%;
}
	.progress span {
		background-color: #258fd6;
		border-radius: 0.1875rem;		/* .3rem */
		color: #fff;
		display: block;
		height: 2.1875rem;			/* 3.5rem */
		line-height: 2.1875rem;		/* 3.5rem */
		min-width: 1.375rem;		/* 2.2rem */
		overflow: hidden;
		position: relative;
		text-align: center;
	}
	.progress span[style="width: 0%;"] {
		background: none;
		color: #444;
	}
	
/** 
 * --- 6.5 - Elements Badge & Label ---
 * ------------------------------------
 */

.badge,
.label {
	background-color: #258fd6;
	border-radius: 0.1875rem;		/* .3rem */
	color: #fff;
	display: inline-block;
	margin-left: .25rem;		/* .4rem */
}
.badge {
	line-height: 1;
	padding: .125rem;			/* .2rem; */
}
.menu.expanded .active a .badge {
	background-color: #fff;
	color: #258fd6;
}
.menu.vertical .badge {
	float: right;
}
.menu.vertical.expanded .badge {
	margin-top: .5rem;			/* .8rem */
}
.label {
	padding: .15625rem .25rem;	    /* .25rem .4rem */
}

/** 
 * --- 6.6 - Frame ---
 * -------------------
 */

.frame {
	height: 0;
	padding-top: 56.25%;
	position: relative;
}
.frame embed,
.frame iframe,
.frame object,
.frame video {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/** 
 * --- 6.7 - Images ---
 * --------------------
 */



/** 
 * --- 6.8 - Tooltips ---
 * ----------------------
 */

a.tooltip {
	position: relative;
	display: inline;
}
	a.tooltip span {
		font-size: .8125rem;		/* 1.3rem */
		line-height: 1.0625rem;  	/* 1.7rem */
		position: absolute;
		min-width:140px;
		color: #fff;
		background: #555;
		min-height: 30px;
		text-align: center;
		visibility: hidden;
		border-radius: 4px;
		opacity: 0;
		-webkit-transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		-ms-transition: opacity 0.3s ease-in-out;
		-o-transition: opacity 0.3s ease-in-out;
		transition: opacity 0.3s ease-in-out;
	}
	a.tooltip span:after {
		content: '';
		position: absolute;
		width: 0; height: 0;
	}
a:hover.tooltip span {
	visibility: visible;
	opacity:1;
	z-index: 999;
}
a.tooltip.tooltip-top span:after {
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border-top: 8px solid #555;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
a:hover.tooltip-top span {
	bottom: 30px;
	left: 50%;
	margin-left: -76px;
}
a.tooltip.tooltip-right span:after {
	top: 50%;
	right: 100%;
	margin-top: -8px;
	border-right: 8px solid #555;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
a:hover.tooltip-right span {
	left: 100%;
	top: 50%;
	margin-top: -15px;
	margin-left: 15px;
}
a.tooltip.tooltip-bottom span:after {
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
	border-bottom: 8px solid #555;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;	
}
a:hover.tooltip-bottom span {
	top: 30px;
	left: 50%;
	margin-left: -76px;
}
a.tooltip.tooltip-left span:after {
	top: 50%;
	left: 100%;
	margin-top: -8px;
	border-left: 8px solid #555;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
a:hover.tooltip-left span {
	right: 100%;
	top: 50%;
	margin-top: -15px;
	margin-right: 15px;
}


/**
 * ---------------------------------
 * --- 07 -  HELPERS & UTILITIES ---
 * ---------------------------------
 */ 

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}
.float-left {
	float: left;
}
.float-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.float-right {
	float: right;
}
.float-none {
	float: none;
}
.show {
	display: initial;
}
.hide {
	display: none;
}
.full-width {
	width: 100%;
}
.width-auto {
	width: auto;
}
.no-margin {
	margin: 0;
}
.no-padding {
	padding: 0;
}
.sticky {
	position: fixed;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}


/**
 * -------------------------------------
 * --- 09 - STYLES POUR L'IMPRESSION ---
 * -------------------------------------
 */

@media print {
	body {
		padding: 0;
		margin: 0;
	}
	header .sticky,
	nav .nav,
	aside,
	#form {
		display:none;
	}
	main .content {
		width: 100% !important;
	}
	aside {
		display: none;
	}
	form {
		display: none;
	}
}