/* -------------------------------------------------------------------------- */
/* ----------------------Style global des elements--------------------------- */
/* -------------------------------------------------------------------------- */

/* -----------elements à afficher uniquement en mode smartphone --------------*/
main #shortcuts
{
display:none;
}

#menu-toggle, #menu-toggle + input {
	display: none;
}
/* -----------elements à afficher uniquement en mode smartphone -----------FIN*/

/*----------------------------------------------------------------------------*/
/* --------------elements généraux -------------------------------------------*/
/*----------------------------------------------------------------------------*/
* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	margin: 120px 0 0 0;
	height: 100%;
	min-height: 100%;
	font-size: 16px;
	font-family: "rawline-300", sans-serif;
	line-height: 1.6;
	background-attachment: fixed;
	background-color: #e7e4e4;
	background-image: url("../svg/m34-logo-translucide.svg");
	background-repeat: no-repeat;
	/* Position et dimension du fond pour tous sauf classic. */
	background-position: top 220px right 10%;
	background-size: 80%;
}

header {
	display: block;
	position: fixed;
	box-shadow: 0 4px 4px black;
	top: 0;
	left: 0;
	right: 0;
	z-index: 13;
	height: 100px;
	background: /*no-repeat url("../svg/m34-icone2.svg") top right/11%,*/ repeat url("../images/banniere.png");
}

header h1 {
	display: block;
	text-shadow: 2px 2px #fffe92;
	text-align: center;
	margin: 20px 0 0 0 ;
	font-family: 'mickey';
}

header h1 a, header h1 a:visited {
	color: black;
}

header h1 a:hover {
	color: #729fcf
}

audio {
	display: block;
	border: 2px solid #fffe92;
	border-radius: 10px;
	width: 50%;
	box-shadow: 0 4px 4px black;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:visited {
	color:var(--link-color-vis);
	text-decoration: none;
}

a:hover {
	color: var(--link-color-hov);
}

label {
	font-weight: bold;
}

input[type="number"] {
	font-size: medium;
	padding: 0;
	text-align: right;
}

fieldset {
	border: none;
}

article {
	float: right;
	width: 100%;
	margin-top: 20px;
	border-top: 1px solid black;
	box-shadow: 4px 4px 8px #c8c8c3;
	clear: left;
	padding:5px;
}

p {
	padding: 10px 10px 10px 10px;
	text-align: justify;
	font-size: 0.8em;
}

p a {
	/* Dans les paragraphes de texte, on donne un fond aux liens, afin de
		 les mettre en valeur, en particulier si la couleur de fond du
		 paragraphe est proche de celle du lien. */
	padding: 0.1em 0.5em;
	border-radius: 1em;
	background-color: var(--link-bg);
}

em {
		font-weight: bolder;
}

.material-icons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	font-size: 30px;
}



/*----------------------------------------------------------------------------*/
/* --------------elements généraux -------------------------------------------*/
/*-------------------------------------------------------------------------FIN*/







/*----------------------------------------------------------------------------*/
/*-------------------------pagination-----------------------------------------*/
/*----------------------------------------------------------------------------*/
main nav.pagination ul {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	background-color: #c8c8c3;
}

main nav.pagination ul li {
	float:left;
	padding: 0.2em;
}

main nav.pagination a:hover{
	color: white;
}

nav.pagination .active {
	color: white;
}

/*----------------------------------------------------------------------------*/
/*-------------------------pagination-----------------------------------------*/
/*-------------------------------------------------------------------------FIN*/







/* -------------------------------------------------------------------------- */
/* ----------------------Styles dans les divs gauche et droite--------------- */
/* -------------------------------------------------------------------------- */

/*ces deux lignes permettent de masquer les les scrollbars mais de conserver
la fonction de defilement pour chrome, firefox pas besoin */
#medias::-webkit-scrollbar {display:none}
#pense-bete::-webkit-scrollbar {display:none}

#medias {
	padding:1em;
	width:20%;
	background: url("../images/texture.png");
	background-repeat: repeat-y;
	height: 159%;
	float: left;
	margin-top:-2%;
	border-right:1px solid black;
	overflow: scroll;
}

#medias img {
	width: auto;
	height: auto;
	float: none;
	margin: 0 0.5em;
	max-width: 4em;
	max-height: 4em;
	box-shadow: none;
	transition: none;
	border: 1px solid #fffe92;
}

#medias img:hover {
	width: auto;
	height: auto;
	margin: 0em 0.5em;
	max-width: 4em;
	max-height: 4em;
	box-shadow: 0px 3px #729fcf;
	filter: contrast(130%);
}

#medias > h3, #medias > div, #medias > p {
	width:100%;
	height: max-content;
	color:white;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	padding:10px;
	text-align: center;
	box-shadow: 4px 4px 8px #505050;
	font-size: 0.7em;
	font-weight: bold;
	border-right:1px solid black;
	border-bottom:1px solid black;
	margin-top:12%;
	text-transform: capitalize;
}

#medias > h3::after{
	content: "";
	width: 32px;
	position: relative;
	top: 2.6em;
	height: 20px;
	background-color: #fffe92;
	display:block;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
}

/* -------------------style concernant la div MAXIGOS de gauche --------------*/
#medias > div.maxigos {
	padding: 1em;
	/*float:right;*/
	width: 100%;
	/*display:block;*/
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	color: black;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	box-shadow: 4px 4px 8px #505050;
	}
/* -------------------style concernant la div MAXIGOS de gauche -----------FIN*/

/* -------------------style concernant la div chaines TV de gauche -----------*/
#medias > div.chaines a{
	font-size: 1.2em;
}
/* -------------------style concernant la div chaines TV de gauche --------FIN*/

#pense-bete {
	display: flex;
	padding: 0;
	width:15%;
	background: url("../images/texture.png");
	height: 159%;
	float: right;
	background-repeat: repeat-y;
	margin-top:-2%;
	border-left:1px solid black;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	overflow-y: scroll;
}

/* -----------------le style qui suit concerne les champions du club ---------*/
#champions h3 {
	color: white;
}

#champions {
width: 90%;
background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center;
display:flex;
flex-direction: column;
align-content: center;
justify-content: center;
margin-top:20%;
min-width:160px;
box-shadow: 4px 4px 8px #505050;
}

#champions p{
	display: flex;
	width:95%;
	height: max-content;
	color:white;
	padding:10px;
	box-shadow: 4px 4px 8px #505050;
	font-size: 0.7em;
	font-weight: bold;
	border-right:1px solid black;
	border-bottom:1px solid black;
	margin-top:0;
	margin-left: 3%;
	justify-content: left;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	text-align: left;
}

#champions p:hover {
	background: linear-gradient(135deg, #5a5a5a 5%, #333 100%);
	color:black;
}

#champions p a {
	background-color:transparent;
	width:100%;
	filter: brightness(1.5);
	text-transform: capitalize;
}


/* --------------------------------les champions du club ------------------FIN*/

/* -------------------------------------------------------------------------- */
/* ----------------------Styles dans les divs gauche et droite--------------- */
/* ------------------------------------------------------------------------FIN*/



/*    *       *     ***********     *         *    *          *
			**     **     *               * *       *    *          *
			* *   * *     *               *  *      *    *          *
			*  * *  *     *               *   *     *    *          *
			*   *   *     *               *    *    *    *          *
			*       *     **********      *     *   *    *          *
			*       *     *               *      *  *    *          *
			*       *     *               *       * *    *          *
			*       *     *               *        **    *          *
			*       *     ***********     *         *    ************
*/
/*----------------------------------------------------------------------------*/
/*-------------------------style pour le menu horizontal principal------------*/
/*----------------------------------------------------------------------------*/
header nav {
	position: relative;
	margin-left: 0px;
	margin-right: 10px;
	font-size: 0.6em;
	font-weight: bold;
	text-transform: uppercase;
}

#menu {
	position: relative;
	top:29px;
	width: 60%;
	height: 2.9em;
	margin: 0 0 0 23.29%;
	padding: 0 10px;
	background-color: #595959;
	list-style-type: none;
	border-right: 0;
	z-index: 2;
	box-shadow: 0 4px 4px black;
}

#menu li {
	position: relative;
	float: left;
	width:25%;
	margin:0;
	background-color: transparent;
	line-height: 2.9em;
	text-align: center;
	min-width: 122px;
	color: #fffe92;
	font-weight: bold;
}

#menu a.material-icons {
	font-size:25px;
}

#menu li > ul {
		opacity:0;
		list-style: none;
		max-height: 0;
		padding: 2px 0 0 0;
		overflow: hidden;
		text-transform: uppercase;
		font-weight: 300;
		border-top: 0;
		background: transparent;
		transition: max-height 0.5s ease;
}

#menu li:hover {
	background-color: #595959;
	box-shadow: inset 2px 2px 2px black;
}

#menu li li {
	display:block;
	float: none;
	margin:0;
	padding: 0;
	line-height: 1.5em;
	text-align: left;
	width:100%;
}

#menu li li:last-child {
}

#menu li li > a {
	color: #63aefd;
	text-decoration: none;
	text-align: left;
	display: block;
	padding: 0.25em 0 0.25em 14%;
}

#menu li li > a:visited {
	color: #63aefd;
}

#menu li li > a:hover, #menu li li > a:hover:visited {
	color: black;
}

#menu > ul li {
	width: 100%;
	background: transparent;
}
/*----------------------------------------------------------------------------*/
/*-------------------------style pour le menu horizontal principal------------*/
/*-------------------------------------------------------------------------FIN*/
#raccourcis {
display: flex;
justify-content: center;
align-items: center;
background-color: #fffe92;
width: 7%;
float: right;
padding:0;
list-style-type:none;
box-shadow: 0 4px 4px black;
position: relative;
top: -9px;
height: 3em;
}

#raccourcis li{
position: relative;
float: left;
margin:0;
background-color: transparent;
line-height: 2em;
}



/* ceci est le bloc pour le titre " à venir" (attention l'image est un fond dans media)*/
#evenements {
	/*background-color: red;*/
	width: 80%;
	margin-left: 10%;
	margin-top: -175px;
	text-align: center;
	min-width: 35px;
}

#raccourcis a#btn-logout {
	cursor: pointer;
}

/*----------------------------------------------------------------------------*/
/* ---------style concernant l'extension du menu principal horizontal------FIN*/
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
/* ---------style concernant le message "site officiel"-----------------------*/
/*----------------------------------------------------------------------------*/
#officiel {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fffe92;
	width: 13%;
	float: left;
	padding:0;
	list-style-type:none;
	/*border-radius: 0 0 10px 10px;*/
	box-shadow: 0 4px 4px black;
	position: relative;
	top: 19px;
	left:2em;
	min-height: 3em;
	text-align: center;
}

#officiel span, #officiel a {
	display: inline-block;
}

#officiel a {
	font-style: italic;
}

/*----------------------------------------------------------------------------*/
/* ---------style concernant le message "site officiel"--------------------FIN*/
/*----------------------------------------------------------------------------*/



/*    *       *          *          *    *         *
			**     **         * *         *    * *       *
			* *   * *        *   *        *    *  *      *
			*  * *  *       *     *       *    *   *     *
			*   *   *      *********      *    *    *    *
			*       *     *         *     *    *     *   *
			*       *    *           *    *    *      *  *
			*       *   *             *   *    *       * *
			*       *  *               *  *    *        **
			*       *  *               *  *    *         *
*/

/*----------------------------------------------------------------------------*/
/* ------------------style concernant la div principale MAIN -----------------*/
/*----------------------------------------------------------------------------*/
main {
	display: block;
	padding: 50px 50px 0 50px;
	margin-top: -2%;
	float: left;
	width: 65%;
	min-height: 159%;
	min-width: 200px;
	margin-bottom: 0;
	margin-right:0;
	margin-left:0;
	box-shadow: inset 2px 2px 8px 1px grey;
}

.accueil_main {
	display: block;
	padding: 50px 0px 0 0px;
	margin-top: -2%;
	float: left;
	width: 65%;
	min-height: 159%;
	min-width: 200px;
	margin-bottom: 0;
	margin-right:0;
	margin-left:0;
	background-image: url("../images/photos_accueil/accueil_4.webp");
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: none;
}

main article a > img {
	width: 10%;
	float: right;
	margin: 1em;
	transition: all 1s ease;
	background-color: transparent;
}

article img, p img {
	width: auto;
	height: auto;
	float: right;
	margin: 1em;
	max-width: 30%;
	max-height: 230px;
}

main a.championnatsduclub {
	display: inline-block;
	background-color: #fffe92;
	margin: 1px 20%;
padding: 5px;
color: black;
font-weight: bolder;
}

main a.championnatsduclub:hover {
background:linear-gradient(135deg, #333 5%, #5a5a5a 100%);
color: white;
}

/* ----------------- style concernant l'encart "a la une" --------------------*/
span.accueil_span {
	background-color: white;
	position: absolute;
	bottom:10%;
	right:1em;
	padding:0.3em;
	/*border-radius: 5px;*/
	font-size:0.6em;
	font-weight: bold;
	box-shadow: 2px 2px steelblue;
}
/* ----------------- style concernant l'encart "a la une" -----------------FIN*/

/* --------------------style pour l'encart " à venir" ------------------------*/
#evenements {
	width: 80%;
	margin-left: 10%;
	margin-top: -175px;
	text-align: center;
	font-weight: 400;
	font-size: 150%;
	text-shadow: 2px 2px 4px #756e05;
	display: flex;
	justify-content: center;
}

#tableaudesevenements {
	width: 100%;
	margin-left: 0;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom:30px;
	text-align: left;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	background-image: none;
	margin: 20px 0 20px -5px;
	border-radius: 0px 10px 10px 0;
	box-shadow: 5px 0 lightgrey;;
	border:1px solid white;
}



.media table.table-page{
	box-shadow: none;
	margin: 0.5em auto;
	background-color: lightgrey;
}

body {
	margin: 120px 0 0 0;
	height: 100%;
	min-height: 100%;
	font-size: 16px;
	font-family: "rawline-300", sans-serif;
	line-height: 1.6;
	background-attachment: fixed;
	background-color: #e7e4e4;
	background-image: url("../svg/m34-logo-translucide.svg");
	background-repeat: no-repeat;
	/* Position et dimension du fond pour tous sauf classic. */
	background-position: top 220px right 10%;
	background-size: 80%;
}

header {
	display: block;
	position: fixed;
	box-shadow: 0 4px 4px black;
	top: 0;
	left: 0;
	right: 0;
	z-index: 13;
	height: 100px;
	background: repeat url("../images/banniere.png");
}
/* --------------------style pour l'encart " à venir" ---------------------FIN*/
/*----------------------------------------------------------------------------*/
/* ------------------style concernant la div principale MAIN -----------------*/
/*-------------------------------------------------------------------------FIN*/


/* ------------------style pour les images dans le header --------------------*/
#club-icon {
	position: absolute;
	right:10px;
	top:0;
	width:120px;
	height:100px;
}

#home-icon {
	position: absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
}
#home-icon2 {
	position: absolute;
	left:82px;
	top:0;
	width:100px;
	height:100px;
	animation-name: translation;
	animation-duration: 5s;
}
/*animation sur la couleuvre*/
@keyframes translation{
		from{
				left:-18px;
				opacity: 0;
		}
		25%{
			opacity: 0;
		}
		50%{
			opacity: 0;
		}
		75%{
			opacity: 0;
			left:60px;
		}
		80%{
			opacity: 0;
			left:70px;
		}
		90%{
			opacity: 0;
			left:75px;
		}
		95%{
			opacity: 0.2;
			left:78px;
		}
		to{
			left:82px;
			opacity: 1;
		}
}
/* ------------------style pour les images dans le header -----------------FIN*/


header h1.accueil {
	display: block;
	text-shadow: 2px 2px #fffe92;
	text-align: center;
	margin: 20px 0 0 0 ;
	font-family: 'mickey';

}


/*------------------*/
/*   MENU DU SITE   */
/*------------------*/

header nav {
	position: relative;
	margin-left: 0px;
	margin-right: 10px;
	font-size: 0.6em;
	font-weight: bold;
	text-transform: uppercase;
}

#raccourcis a, #raccourcis a:visited {
	color: black;
}

#raccourcis a:hover {
	/* Note: On force la couleur normale, sinon c'est celle de
		 "#raccourcis a:visited" qui prend le dessus (et pas celle de
		 "a:hover"). */
	color: var(--link-color-dark);
}

#connexion {
	display: none;
	position: absolute;
	top:100px;
	right:250px;
}

#menu-toggle, #menu-toggle + input {
	display: none;
}

#menu {
	position: relative;
	top:29px;
	width: 60%;
	height: 2.9em;
	margin: 0 0 0 23.29%;
	padding: 0 10px;
	background-color: #595959;
	list-style-type: none;
	border-right: 0;
	z-index: 2;
	box-shadow: 0 4px 4px black;


}

#menu li {
	position: relative;
	float: left;
	width:25%;
	margin:0;
	background-color: transparent;
	line-height: 2.9em;
	text-align: center;
	min-width: 122px;
	color: #fffe92;
	font-weight: bold;
}

#menu a.material-icons {
	font-size:25px;
}

#menu li > ul {
		opacity:0;
		list-style: none;
		max-height: 0;
		padding: 2px 0 0 0;
		overflow: hidden;
		text-transform: uppercase;
		font-weight: 300;
		border-top: 0;
		background: transparent;
		transition: max-height 0.5s ease;

}

#menu li:hover {
	background-color: #595959;
	box-shadow: inset 2px 2px 2px black;

}

#menu li:hover > ul {
	opacity: 1;
	position: absolute;
	width: 100%;
	list-style: none;
	max-height: 200px;
	left: 0px;
	padding: 2px 0 0 0;
	text-transform: uppercase;
	font-weight: 300;
	border-top: 0;
	border-right: 2px solid white;
	border-bottom: 2px solid white;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	box-shadow: 2px 4px 4px gray;
}

#menu li li:hover {
	width: 100%;
	background: #729fcf;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	line-height: 1.5em;
	text-align: left;
}

#menu li li
{
	display:block;
	float: none;
	margin:0;
	padding: 0;
	line-height: 1.5em;
	text-align: left;
	width:100%;
}

#menu li li:last-child{

}

#menu li li > a {
	color: #63aefd;
	text-decoration: none;
	text-align: left;
	display: block;
	padding: 0.25em 0 0.25em 14%;
}

#menu li li > a:visited {
	color: #63aefd;
}

#menu li li > a:hover, #menu li li > a:hover:visited {
	color: black;
}

#menu > ul li {
	width: 100%;
	background: transparent;
}

details, .requirements {
	font-style: italic;
	font-weight: normal;
	font-size: smaller;
}

ul.requirements {
	margin-top: 0;
}

dl {
	text-align: left;
}

dt {
	font-weight: bold;
}

span.note, p.note {
	font-weight: normal;
	font-style: italic;
	color: black;
}

p.note {
	font-size: smaller;
}

a.buttoncustom,
button:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"])
/*
	Le style des button ne doit pas parasiter le style des boutons
	de EditorJS et d'OpenLayers, d'où les ':not(...)'
*/
{
	box-shadow: 4px 5px 5px 3px lightgrey;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	margin: 0;
	border-radius: 0;
	border: 1px solid darkgrey;
	display: inline-block;
	padding: 7px 25px;
	outline: none;
	color: #f7f7f7;
	text-decoration: none;
	text-shadow: 0px 1px 0px #e1e2ed;
}

a.buttoncustom:hover,
button:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"]):hover,
button.toggle-on:hover
/*
	Le style des button ne doit pas parasiter le style des boutons
	de EditorJS et d'OpenLayers, d'où les ':not(...)'
*/
{
	background: linear-gradient(135deg, #f7f7f7, #e6e6e6);
	border: 1px solid lightgrey;
	color: #333;
}

a.buttoncustom:active,
button:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"]):active
/*
	Le style des button ne doit pas parasiter le style des boutons
	de EditorJS et d'OpenLayers, d'où les ':not(...)'
*/
{
	top: 1px;
}

div#connexion a.buttoncustom>i {
	font-size: 24px;
}

div#connexion a.buttoncustom {
	padding: 5px 5px;
	background-color: black;
	border: none;
	color: #fffe92;
	box-shadow: 2px 2px 2px 2px rgba(200, 200, 200, 0.2);
}

div#connexion a.buttoncustom:hover {
	background: none;
	background-color: #fffe92;
	color: black;
}

/* ------------------- */
/* Bouton marche/arret */
button.toggle-on {
	background: linear-gradient(135deg, #f0f0f0, #dfdfdf);
	border: 1px solid lightgrey;
	color: #333;
}

/*--------------------------------------------------------- ------------------*/
/*---------------------------- Menus contextuels -----------------------------*/
/*--------------------------------------------------------- ------------------*/
button.context-menu:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"]) {
	/* NOTE: Les :not(...) sont nécessaires pour que cette règle soit
		prioritaire sur le style par défaut du bouton (dont le sélecteur est:
		button:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"])) */
	box-shadow: 2px 4px 4px #4a4a4a;
	margin-left: 0;
	padding: 5px 5px;
}

button.context-menu+div.hidden {
	display: none;
}

div.context-menu {
	display: inline-block;
	/* pour positionner par rapport au bouton */
	position: absolute;
	/* On déplace le menu à gauche de sa largeur + (celle du bouton et celle de la flèche). */
	/* Note: Le 0px est nécessaire lorsqu'on ne manipule que des négatifs dans calc. */
	transform: translateX(calc(0px - 55px - 100%));

	width: max-content; /* pour éviter que le menu se limite à la largeur d'une colonne. */
	padding: 0.2em;
	background: var(--menu-bg);
	box-shadow: 3px 3px 3px 0 silver;
	border-radius: 5px;
	z-index: 1;
}

/* Dessin de la flèche du menu contextuel. */
div.context-menu:after {
	content: "";
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #505050;
	position: absolute;
	top: 10px;
	right: -10px;
}

div.context-menu > a {
	display: block;
	padding: 0.4em;
	text-align: left;
	color: var(--menu-item-color);
	font-weight: bold;
}

div.context-menu > a:visited {
	color: var(--menu-item-color-vis);
}

div.context-menu > a:hover {
	color: var(--menu-item-color-hov);
	background-color: var(--menu-item-bg-hov);
	cursor: default;
}


/*--------------------------------------------------------- ------------------*/
/*---------------------------- Menus contextuels -----------------------------*/
/*--------------------------------------------------------- ---------------FIN*/



div.window {
	/* Initialement, une fenetre est la plupart du temps cachée. */
	display: none;

	position: fixed;
	z-index: 2;
	margin: 0;
	padding: 1em;
	background: silver;
	box-shadow: 3px 3px 5px #888;

	/* On centre la fenetre au milieu de main */
	top: 50%;

	/* main prend 65% et pense-bete prend 15%. On centre la fenêtre
		 sur main: (65% / 2) + 15% = 48% */
	right: 48%;

	transform: translate(50%, -50%);
}

div.window>h3 {
	margin: 0 0 1em 0;
	font-size: medium;
	border-bottom: 1px solid darkgray;
	padding: 0 0 0.5em 0;
}

div.window>h3>i.material-icons {
	font-size: medium;
}







main article table.table-etroite {
	width:50%;
	margin: 10px auto;
}


/*------------------------------------------------------------------------*/
/*----------------------------ENCART ARTICLES RECENTS --------------------*/
/*------------------------------------------------------------------------*/
main #article_bienvenue {
	width:100%;
	position: relative;
	display: none;
	flex-wrap: wrap;
	padding:0;
	justify-content: end;
	}

main #article_bienvenue p {


}

div.tableaudesevenements {
	position:relative;
	float: left;
	top:5em;
	width: 30%;
	background-color: #fffe92;
	box-shadow: 4px 4px 8px #505050;
	padding:0 0 38px 0; /* padding bas pour inclure les points de navigation de flickity */
	margin:0 25px;
	background-image: url("../svg/golfe.svg");
	background-size: cover;
	z-index: 8;
}

div.tableaudesevenements h2 {
	width:100%;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	padding:0 10px;
	margin-top:0;
	color:white;
	animation: animationFrames linear 0.2s;
	animation-iteration-count: 1;
	transform-origin: 0% 100%;
}

div.tableaudesevenements table.table-page {
	margin: 0;
	border-collapse: collapse;
}

div.tableaudesevenements table.table-page tbody tr:nth-child(2n) {
	background-color: rgba(255, 254, 146, 0.8);
}

div.tableaudesevenements table.table-page tbody tr:nth-child(2n+1) {
	background-color: rgba(255, 254, 146, 0.9);
}

div.tableaudesevenements table.table-page tbody tr td {
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	border-top: 2px dotted #729fcf;
}

div.tableaudesevenements table.table-page tbody tr:first-child td {
	border-top: none;
}

div.encart {
	position:relative;
	float: right;
	top:5em;
	width: 50%;
	background-color: #fffe92;
	box-shadow: 4px 4px 8px #505050;
	padding:0 0 38px 0; /* padding bas pour inclure les points de navigation de flickity */
	margin:0 25px;
	background-image: url("../svg/golfe.svg");
	background-size: cover;
	overflow: auto;
}

div.encart h2 {
	width:100%;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	padding:0 10px;
	margin-top:0;
	color:white;
	animation: animationFrames linear 0.2s;
	animation-iteration-count: 1;
	transform-origin: 0% 100%;
}

a.encart {
	/* Le lien doit s'etendre sur la largeur de l'article, pour faciliter
		 son activation par les utilisateurs aux gros doigts. */
	display:block;

	font-size: 0.8em;
	font-weight: bolder;
	text-align:right;
	border-radius: 0 2em 2em 0;
	padding: 0.5em;
	background: linear-gradient(135deg, rgba(233, 236, 238, 0) 35%, rgba(0, 0, 0, 0.5) 72%);
}

a:hover.encart > span {
				background-color: white;
				transition:0.5s;
}

a.encart > span {
				transition:0.5s;
				padding: 0.1em 0.5em;
				border-radius: 1em;
				background-color: var(--link-bg);
}

@keyframes animationFrames{
	0% {
		opacity:0;
		transform:  rotate(-19deg) ;
	}
	100% {
		opacity:1;
		transform:  rotate(0deg) ;
	}
}

article.news-carousel-cell > h3 {
	margin:0 0.5em;
}

article.news-carousel-cell {
	margin:0 0.5em;
	box-shadow: none;
	float:none;
	border-top:none;
}

article.news-carousel-cell > p {

}


div.news-date {
	margin: 0 1em;
	text-align: right;
	font-weight:bold;
	font-size: 0.6em;
}

a.liresuite {
 float:right;
 font-style:italic;
 font-weight: bold;
 color: #7b451e; /* pour pouvoir voir le lien, meme si le fond est bleu. */
 text-decoration: underline;
}

a.liresuite:hover {
	color: white;
}

/* ICI commence le bloc de style des fieldset des formulaires */
/*----------------------------------------------------------------------*/
/*---------------------- LOGIN ----------------------------------------*/
/*-----------------------------------------------------------------------*/
main form.connexion fieldset {
	box-shadow: 4px 0px 8px #c8c8c3;
	border-top: 1px solid black;
	padding-top: 30px;
	margin: 80px auto 0 auto;
	min-width: 300px;
	width: 25%;
	background: linear-gradient(135deg, #bbb, #fffe92);

}

main form.connexion fieldset legend i.material-icons {
	font-size: 70px;
}

main form.connexion div.action-set {
	width: 100%;
	/*background: linear-gradient(7deg, #bbb, #fffe92);*/
	/*background-color: #e5e4ad;*/
	padding: 10px 0;
	/*box-shadow: 4px 4px 8px #c8c8c3;*/
}

main form.connexion div.action-set button, main form.inscription div.action-set button, main form.passwordegare div.action-set button  {
	border-radius: 20%;
	box-shadow: none;
}

main form.connexion input {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid black;
	background-color: transparent;
}

main form.connexion label {
	font-weight: 900;
}

main form.connexion a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 900;
	line-height: 3em;
}

/*----------------------------------------------------------------------*/
/*---------------------- PASSWORD EGARE ----------------------------------------*/
/*-----------------------------------------------------------------------*/
main form.passwordegare fieldset {
	box-shadow: 4px 0px 8px #c8c8c3;
	border-top: 1px solid black;
	padding-top: 30px;
	margin: 80px auto 0 auto;
	/*height: 600px;*/
	min-width: 300px;
	width: 25%;
	background: linear-gradient(135deg, #bbb, #fffe92);
	align-items: center;
	justify-content: center;

}

main form.passwordegare fieldset legend i.material-icons {
	font-size: 70px;
}

main form.passwordegare div.action-set {
	width: 100%;
	min-width: 300px;
	/*background: linear-gradient(7deg, #bbb, #fffe92);*/
	/*background-color: #e5e4ad;*/
	padding: 10px 0;
	/*box-shadow: 4px 4px 8px #c8c8c3;*/
}



main form.passwordegare input {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid black;
	background-color: transparent;
}

main form.passwordegare label {
	font-weight: 900;
}

main form.passwordegare p {
	font-size: small;
}

/*----------------------------------------------------------------------*/
/*---------------------- INSCRIPTION AU SITE ----------------------------------------*/
/*-----------------------------------------------------------------------*/
main form.inscription fieldset {
	box-shadow: 4px 0px 8px #c8c8c3;
	border-top: 1px solid black;
	padding-top: 30px;
	margin: 80px auto 0 auto;
	/*height: 600px;*/
	min-width: 300px;
	width: 25%;
	background: linear-gradient(135deg, #bbb, #fffe92);
	align-items: center;
	justify-content: center;
}

main form.inscription fieldset legend i.material-icons {
	font-size: 70px;
}

main form.inscription div.action-set {
	width: 100%;
	min-width: 300px;
	/*background: linear-gradient(7deg, #bbb, #fffe92);*/
	/*background-color: #e5e4ad;*/
	padding: 10px 0;
	/*box-shadow: 4px 4px 8px #c8c8c3;*/
}


main form.inscription input {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid black;
	background-color: transparent;
}

main form.inscription label {
	font-weight: 900;
}

main form.inscription a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 900;
	line-height: 3em;
}

main form.inscription p {
	font-size: 10px;
}


/*---------------------------------------------------------*/
main form.redacarticle {
	margin-left: 10%;
	margin-top: 1%;
	width: 80%;
}

main fieldset.uploadsgf {
	margin-top: 1%;
	width: 60%;
	margin-left: 20%;
	border-top: 1px solid black;
	box-shadow: 4px 4px 8px #c8c8c3;
}

main fieldset.newevent {
	margin-top: 1%;
	width: 100%;
	border-top: 1px solid black;
	box-shadow: 4px 4px 8px #c8c8c3;
}







/* Pour l'éditeur de texte de la création d'article, il faut une largeur fixe */
div#article-editor {
	width: 100%;
}




/* -------------------------------------------------------------------------- */
/* ----------------------Styles pour les actions -----------------------------*/
/* -------------------------------------------------------------------------- */
button.action {
	margin: 0;
	margin-left: 1em;
	/*padding: 0;*/
}

div.action-set {
	margin-top: 1em;
	margin-bottom: 1em;
	text-align: center;
}

div.add-list-item {
margin-top: 1em;
text-align: center;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
border-bottom: 1px solid;
padding-bottom: 1em;
}

div.add-list-item h2 {
	display: flex;
	margin: 0 2em;
}

div.add-list-item h3 {
	display: flex;
	margin: 0 2em;
}

div.add-list-item a {
	display:flex;
}

div.action-set>button {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	border: 1px solid whitesmoke;
}
/* -------------------------------------------------------------------------- */
/* ----------------------Styles pour les actions -----------------------------*/
/* ------------------------------------------------------------------------FIN*/






/* ---------------------------------------------------------------------------*/
/* ---------------------Style pour les controles -----------------------------*/
/* ---------------(boutons et entrées qui controlent les vues)--------------- */
div.control-set {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}

div.control-set nav {
}

div.control-set nav ul {
	display: flex;
	width:100%;
	padding: 0.3em;
	background-color: #565656;
	border:1px solid black;
	border-radius: 5px;
}

div.control-set nav li {
	display: flex;
	flex-wrap: wrap;
	width: 2em;
	margin:0 0.2em;
	justify-content: center;
}

div.control-set nav li a.clickpage{
	color:#fffe92;
	width:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 0.2em;
}

div.control-set nav li.precedente a{
	color:#fffe92;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.control-set nav li.precedentenull a{
	color:grey;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.control-set nav li.suivante a{
	color:#fffe92;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.control-set nav li.suivantenull a{
	color:grey;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.control-set nav li a.start{
	width: 4.5em;
	background-color: #fffe92;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	font-weight: bold;
	justify-content: center;
}

div.control-set nav li a.startnull {
	width: 4.5em;
	background-color: grey;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	font-weight: bold;
	justify-content: center;
}

div.control-set nav li a.end{
	width: 4.5em;
	background-color: #fffe92;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	font-weight: bold;
	justify-content: center;
}

div.control-set nav li a.endnull {
	width: 4.5em;
	background-color: grey;
	font-size: 0.7em;
	display: flex;
	align-items: center;
	font-weight: bold;
	justify-content: center;
}

div.control-set nav li a:hover.startnull, div.control-set nav li a:hover.endnull {
color:black;
}

div.control-set nav a {
	width: 1em;
	padding-left: 0.25em;
	padding-right: 0.25em;

}

div.control-set nav a,
div.control-set nav a:visited {
	color: black;
	text-decoration: none;
}

div.control-set nav a.current, div.control-set nav span.current {
	color: white;
	font-weight: bold;
	background-color: #565656;
	text-decoration-line: underline;
	width:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 0.2em;
}



div.control-set nav a:hover {
	color: #2c78ca;
	/* couleur du golfe en plus foncé */
}

div.control-set nav a.current:hover {
	color: #729fcf;
	/* couleur du golfe */
}

div.control-set dl {
	font-style: italic;
	font-size: small;
}

div.control-set dl > dt, div.control-set dl > dd {
	display: inline;
}

div.control-set dl > dt::after {
	content: ":";
}

div.control-set dl dd {
	margin-left: 1em;
}

div.control-set label {
	font-size: small;
		margin: 0 0 0 2%;
}

div.control-set input {
	font-size: medium;
		width: 60%;
		margin: 0 0 0 3%;
}
/* ---------------------------------------------------------------------------*/
/* ---------------------Style pour les controles -----------------------------*/
/* ---------------(boutons et entrées qui controlent les vues)-------------FIN*/


input#maxcount {
	width: 4.2em;
	margin-left: 0.5em;
}


/*----------------------------------------------------------------------------*/
/*---------------------- Styles pour les vues tables -------------------------*/
/*----------------------------------------------------------------------------*/

.image_tableau {
		border: solid 1px black;
		width:100%;
		max-width: none;
		max-height: none;
		margin:0;
}

table.table-page, div.table-page {

	margin: 0.2em 0;
	width: 100%;

}

table.table-page th, table.table-page td {
	max-width: 200px;
	text-align: center;
}

table.table-page td.actions {
	width: 0;
}

table.table-page th {
	background-color: #fffe92;
}

table.table-page th {
	background-color: #fffe92;
}

table.table-page th a {
	display: block;
	color: black;
}

table.table-page th a:visited {
	color: black;
}

table.table-page th a:hover {
	color: #2c78ca; /* couleur du golfe en plus foncé */
	background-color: #fffeb0;
}

table.table-page th a.sort-asc::before,
table.table-page th a.sort-desc::before {
	float: right;
	/* La police monospace permet d'avoir les fleches identiques
		 entre FF et Chrome. */
	font-family: monospace;
	font-weight: bold;
}

table.table-page th a.sort-asc::before {
	content: "\2191"; /* fleche vers le haut */
}

table.table-page th a.sort-desc::before {
	content: "\2193"; /* fleche vers le bas */
}

table.table-page tbody tr {
	height: 4rem;
}

table.table-page tbody tr:nth-child(odd) {
	background-color: var(--table-row-bg-odd);
}

table.table-page tbody tr:nth-child(even) {
	background-color: var(--table-row-bg-even);
}

table.table-page tbody tr:hover {
	background-color: var(--table-row-bg-hov);
}

p.table-page {
	font-style: italic;
}
/*----------------------------------------------------------------------------*/
/*---------------------- Styles pour les vues tables -------------------------*/
/*-------------------------------------------------------------------------FIN*/





/*----------------------------------------------------------------------------*/
/*------------- Styles pour les formulaires d'édition------------------------ */
/*----------------------------------------------------------------------------*/
form.edit {
	margin-top: 2em;
}

form.edit > fieldset, form.edit > div.tabs {
	margin: 0 auto;
	width: 100%;
	border-top: 1px solid #0000;
	box-shadow: 4px 4px 8px #c8c8c3;
	background: center / cover no-repeat url("../svg/golfe.svg"), url("../images/texture.jpeg");
}

form.edit > fieldset {
	border-top: 1px solid black;
}

form.edit > div.tabs {
	border-top: 1px solid #0000;
	float: left;
}

form.edit > div.tabs:before,
form.edit > div.tabs:after {
	/* Emulation du border-top de fieldset */
    content: "";
    position: absolute;
    height: 1px; /* taille de border-top de div.tabs */
    background: #000;
    top: -1px;
}

form.edit > div.tabs:before {
	/* Emulation du border-top de fieldset */
    width: 20px;
    left: 0;
}

form.edit > div.tabs.event-new:after {
	/* Emulation du border-top de fieldset */
    /* Note: taille du texte de h3 en font 16px = 206.1px */
    width: calc(100% - 231px);
    left: 231px;
}

form.edit > div.tabs.event-item:after {
	/* Emulation du border-top de fieldset */
    /* Note: taille du texte de h3 en font 16px = 206.1px */
    width: calc(100% - 231px);
    left: 231px;
}

form.edit legend {
	margin-bottom: 2em;
}

form.edit h3.legend {
	position: relative;
	top: -3em;
	margin-bottom: 0;
	padding: 0 5px;
	font-size: 16px;
}

form.edit fieldset label,
form.edit > div.tabs div label,
form.edit > fieldset > dl.infos,
form.edit > fieldset div.action-set,
form.edit > div.tabs > div {
	float: left;
	width: 35%;
	margin: 1.5em 7% 0 7%;
	padding-bottom: 1em;
}

form.edit fieldset label.text-editor,
form.edit div.tabs label.text-editor {
	width: 86%;
	/* L'éditeur de texte doit prendre la plus grande largeur possible */
}

form.edit fieldset label,
form.edit fieldset div {
	text-align: left;
	color: black;
}

form.edit fieldset label > span {
	display: block;
}

form.edit fieldset label>input:not([type=checkbox]):not([type=radio]),
form.edit fieldset label>textarea,
form.edit fieldset label>select,
form.edit div.tabs label>input:not([type=checkbox]):not([type=radio]),
form.edit div.tabs label>textarea,
form.edit div.tabs label>select {
	width: 80%;
	background-color: whitesmoke;
	box-shadow: inset 0px 1px 4px 1px lightgray;
	padding: 1em;
	text-align: center;
	border-top: none;
	border-right: none;
	border-left: none;
	border-bottom: 1px solid black;
}

form#contact textarea  {
	height: 10em;
	margin: 1em auto;
	background-color: whitesmoke;
	width: 100%;
}

form.edit label.required::before,
form.edit fieldset label > span.required::before {
	color: red;
	content: "* ";
}

form.edit label#email-label {
	margin-top: 0;

	/* Pour avoir le courriel sur une seule ligne, poussant
		 le prénom et le nom sur la même ligne. */
	margin-right: 10%;
}

form.edit label#password-label {
	/* Rapprocher les pré-requis de l'input dans le formulaire du profil */
	padding: 0;
}

form.edit fieldset label>input[type="checkbox"] {
	width: auto;
}

form.edit>fieldset>dl.infos {
	font-style: italic;
}

form.edit div.input-set>details {
	clear: left;
}

form.edit div.input-set>ul {
	clear: left;
}

form.edit div.input-set>label {
	width: 100%;
	margin: 0;
}

form.edit>fieldset>dl {
	display: inline-block;
	margin: 0;
}

form.edit>fieldset>dl>dt {
	margin-top: 1em;
}

form.edit>fieldset>dl>dd {
	margin: 0 0 1em 20%;
}

form.edit>fieldset>dl>dt>label {
	float: none;
	margin: 0;
}

fieldset#pas-bot {
	margin: 1em 0 1em 7%;
	padding: 1em;
	width: 86%;
	text-align: center;
	border: 1px solid black;
}

fieldset#pas-bot> p{
	color: yellow;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
}

fieldset#pas-bot>legend {
	margin: 0;
}

fieldset#pas-bot>label {
	float: none;
	margin: 0;
}

fieldset#pas-bot>label>input {
	width: auto;
}
/*----------------------------------------------------------------------------*/
/*------------- Styles pour les formulaires d'édition------------------------ */
/*-------------------------------------------------------------------------FIN*/











/*----------------------------------------------------------------------------*/
/*------------------------- Styles pour les onglets --------------------------*/
/*----------------------------------------------------------------------------*/
.tabs {
	min-height: 7em;
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding: 1em;
	border-top: 1px solid black;
	box-shadow: 4px 4px 8px #c8c8c3;
}

.tabs > input {
	display: none;
}

.tabs > label {
	display: inline;
	margin: 0;
}

form.edit > .tabs > label {
	/* Annule le style de "form.edit fieldset label" */
	float: none;
	width: auto;
	margin: 0;
	padding: 0 0.4em 0.1em 0.4em;
	color: black;
	font-weight: normal;
	border: 0.1em outset rgba(204, 204, 204, 0.5);
}

form.edit > .tabs > input:not(:checked) + label {
	border-bottom: none;
	background: rgba(153, 153, 153, 0.5);
}

form.edit > .tabs > input:checked + label {
	border-bottom: 0.1em solid rgba(204, 204, 204, 0.5);
	background: rgba(204, 204, 204, 0.5);
}

form.edit > .tabs > input:not(:checked) + label + div {
	display: none;
}

form.edit > .tabs > input:checked + label + div:not([class ^="codex-editor"]):not([class ^="ce-"]):not([class ^="cdx-"]):not([class ^="tc-"]) {
/* Le style des div du formulaire ne doit pas parasiter le style des div de EditorJS,
   d'où les ":not(...)"... Dans le cas présent, les "not..." prennent la priorité sur
   fieldset.tabs. Sans "not...", ce style n'est pas appliqué aux onglets. */
	background: rgba(204, 204, 204, 0.5);
	padding: 0.3em;
	border: 0.1em outset rgba(187, 187, 187, 0.5);
	width: 100%;
	/* Annule le width: 35% de "form.edit fieldset div" */
	margin: 0;
}

form.edit > .tabs fieldset.option {
	clear: left;
	margin: 0 1em 1em 1em;
	border: 2px solid rgba(240, 240, 240, 0.7);
}

form.edit > .tabs fieldset.option > legend {
	margin: 0;
}

form.edit > .tabs fieldset.option > label.emphasis {
	width: 100%;
	font-style: italic;
}

form.edit > .tabs div.option-btn-set {
	padding: 0;
	text-align: right;
}

fieldset.option:first-of-type div.option-switches > button:first-child {
	display: none;
}

form.edit > .tabs label[for="event-poster"] + div label {
	width: 50%;
}

form.edit > .tabs label[for="event-poster"] + div label img {
	width: 100%;
}

form.edit > .tabs label[for="event-poster"] + div label p {
	text-align: unset;
}

form.edit > .tabs label[for="event-poster"] + div:not([class ^="codex-editor"]):not([class ^="ce-"]):not([class ^="cdx-"]):not([class ^="tc-"]) div.action-set {
/* Le style des div du formulaire ne doit pas parasiter le style des div de EditorJS,
   d'où les ":not(...)"... Dans le cas présent, les "not..." prennent la priorité sur
   fieldset.tabs. Sans "not...", ce style n'est pas appliqué à l'action-set de l'onglet
   "Affiche". */
	float: right;
	margin-left: 0;
	margin-right: 0;
}

button.add-option {
	margin-left: 81%;
	margin-bottom: 0.5em;
}

button#add-opt-btn {
	float: right;
	margin: 0 0.5em 0.5em 0;
}

/*----------------------------------------------------------------------------*/
/*------------------------- Styles pour les onglets --------------------------*/
/*-------------------------------------------------------------------------FIN*/








/* ---------------------------------------------------------------------------*/
/*---------- Styles pour la fenetre de copie d'un évènement existant--------- */
/* ---------------------------------------------------------------------------*/
div#evt-copy div.table-page {
	display: table;
	margin-top: 1em;
	border: 1px solid white;
}

div#evt-copy div.table-page>label {
	display: table-row;
	width: 100%;
	background: #d0d0d0;
}

div#evt-copy div.table-page>label:nth-child(even) {
	background: #d8d8d8;
}

div#evt-copy div.table-page>label:hover {
	background: #dddddd;
}

div#evt-copy div.table-page>label>input[type="radio"],
div#evt-copy div.table-page>label>span {
	display: table-cell;
	padding: 0.2em 1em;
	text-align: left;
}

div#evt-copy div.table-page>label>span:nth-child(3) {
	font-weight: bold;
}
/* ---------------------------------------------------------------------------*/
/*---------- Styles pour la fenetre de copie d'un évènement existant--------- */
/* ------------------------------------------------------------------------FIN*/

div.evt-promo {
	margin-bottom: 1em;
}






/*--------------------------------------------------------------------------- */
/*---------------- Styles pour les formulaires de recherche------------------ */
/*--------------------------------------------------------------------------- */
form.search {
	margin: 0;
	display: flex;
}

form.search>button {
	padding: 0.2em;
	font-size: 1.6em;
	text-shadow: none;
	box-shadow: 2px 2px 2px 0 lightgray;
	/* pour essayer de faire comme une pierre */
	/* border-radius: 50%;
	box-shadow: 2px 2px 2px 0 gray;
	border: 1px solid gray;
	*/
}

form.search>button:hover {
	border: 1px solid lightgray;
}

div.link-copy {
	display: flex;
	flex-direction: row;
	width: 80%;
	margin: 0 10px;
}

div.link-copy > input {
	flex: auto;
}

div.link-copy > button:not([class ^= "ce-inline-tool"]):not([class ^= "ol-"]) {
	display:inline-flex;
	width: 35px;
}
/*--------------------------------------------------------------------------- */
/*---------------- Styles pour les formulaires de recherche------------------ */
/*-------------------------------------------------------------------------FIN*/







/*----------------------------------------------------------------------------*/
/*---------- Styles pour les messages envoyés par le serveur----------------- */
/*----------------------------------------------------------------------------*/
div#messages {
	position: absolute;
	z-index: 5;
}

div#messages>div {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	box-shadow: 3px 3px 5px #333;
	right: 50%;
	top: 50%;
	transform: translate(calc(50% + 150px), -50%);
	max-width: 600px;
	max-height: 500px;
	border-radius: 0 0 9px 0;
	animation: 0.5s ease 0s 1 normal show-message;
}

@keyframes show-message {
	from { transform: translate(calc(50% + 150px), -500px); }
	80%  { transform: translate(calc(50% + 150px), calc(-50% + 15px)); }
	to   { transform: translate(calc(50% + 150px), -50%); }
}

div#messages>div.info {
	background-color: aliceblue;
	color: black;
}

div#messages>div.success {
	background-color: mintcream;
	color: black;
}

div#messages>div.error {
	background-color: crimson;
	color: white;
}

div#messages>div> :not(label) {
	flex: 1;
	margin: 0;
	padding: 1em;
	text-align: left;
}

div#messages>div>p {
	display: block;
	align-items: center;
}

div#messages>div>label {
	display: flex;
	align-items: center;
}

div#messages>div>label.message-icon {
	padding: 0.5em;
}

div#messages>div.info>label.message-icon {
	background-color: #a6d8fb;
	color: #4444ff;
}

div#messages>div.success>label.message-icon {
	background-color: #c1ffa1;
}

div#messages>div.error>label.message-icon {
	background-color: red;
}

div#messages>div>label.close-btn {
	top: -10px;
	background-color: black;
	position: relative;
	height: 22px;
	border-radius: 22px;
	color: white;
	border: solid 2px white;
	padding: 4px 0 4px 0;
	font-size: 18px;
}

div#messages>div>label.close-btn:hover {
	background-color: #444;
}
/*----------------------------------------------------------------------------*/
/*---------- Styles pour les messages envoyés par le serveur----------------- */
/*----------------------------------------------------------------------------*/















/*-------------------------------*/
/* flickity pour histoiredusite------- */
/*-------------------------------*/

.gallery-site {
	width:100%;
	background-color: #444444;
	margin-top :1%;
	/*max-height:500px;*/
	margin-bottom: 40px;
	padding-bottom: 1%;

}

.gallery-cell-site {
	background-color: transparent;
	height:400px;
	border:2px solid black;
	margin-top:10px;
	border-radius:10px;
	margin-right:10px;
	/*unselected*/
	transition: opacity 0.3s, transform 0.3s;
}

.gallery-cell-site a {
	width:100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gallery-cell-site a > img {
width:auto;
height:100%;
margin:0;
max-width:none;
max-height:none;
transition: none;
transform: none;
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}

.gallery-cell-site.is-selected a >img {
	width:auto;
	height:100%;
	margin:0;
	max-width:none;
	max-height:none;
	transition: none;
	transform: none;
	box-shadow: none;
	border-radius: 10px;
}

.gallery-cell-site img:hover {
max-width:none;
max-height:none;
transition: none;
transform: none;
box-shadow: none;
}

.gallery-cell-site.is-selected img:hover {
	max-width:none;
	max-height:none;
	transition: none;
	transform: none;
	box-shadow: none;
}

.gallery-cell-site.is-selected {
	opacity: 1;
	filter: none;
}

/*------------------------------------- --------------------------------------*/
/*---------------- Style pour les posters des évènements ---------------------*/
/*------------------------------------- --------------------------------------*/

h2.poster-caption {
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 1em white, 0 0 0.2em black;
	position: absolute;
	/* margin: 1em 30% 0 30%; */
	margin: 2em 0 0 300px;
	font-size: xx-large;
}

p.poster-caption {
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 1em white, 0 0 0.2em black;
	position: absolute;
	/* margin: 10em 20% 0 20%; */
	margin: 10em 0 0 285px;
	width: 300px;
	font-size: large;
	font-weight: bold;
}

p.poster-caption:nth-of-type(2) {
	margin: 12em 0 0 325px;
}

img.poster-caption {
	max-height: 400px;
}

div#event-info, div#event-info {
	margin: 0 5%;
	text-align: left;
}

div#event-prices h4 {
	width: auto;
	margin: 0 5%;
	text-align: left;
}

div#event-prices table {
	margin: 0 auto 2em auto;
}

div#event-prices thead th, div#event-prices td {
	font-style: italic;
	border: none;
}

div#event-prices tbody th, div#event-prices td {
	padding: 0.5em 1em;
	text-align: right;
}

div#event-prices tbody th {
	font-weight: bold;
	background-color: rgba(255, 255, 255, 0.5);
}

div#event-prices td:nth-child(2n+1) {
	background-color: rgba(220, 220, 220, 0.5);
}

div#event-prices td:nth-child(2n+2) {
	background-color: rgba(187, 187, 187, 0.5);
}

div#event-prices td.note {
	text-align: left;
	background-color: transparent;
	color: #555;
}

div#event-prices td.total {
	background-color: rgba(187, 187, 187, 0.5);
	font-weight: bold;
}

div#event-prices td:empty {
	background-color: transparent;
}
/*------------------------------------- --------------------------------------*/
/*---------------- Style pour les posters des évènements ---------------------*/
/*------------------------------------- -----------------------------------FIN*/








/* *********  *        *  ***********  *    *   *   ***********   *       *
	 *          *        *  *            *   *    *       *          *     *
	 *          *        *  *            *  *     *       *           *   *
	 *****      *        *  *            * *      *       *            * *
	 *          *        *  *            *  *     *       *             *
	 *          *        *  *            *   *    *       *             *
	 *          *******  *  ***********  *    *   *       *             *
*/
/*------------------------------------- --------------------------------------*/
/* -------------------------- flickity-button ------------------------------- */
/*------------------------------------- --------------------------------------*/
.flickity-button {
	background: hsla(0, 0%, 100%, 0.75);
	border-radius: 50%;
	border: none;
	color: #333;
	box-shadow: none;
	padding: 0;
}

button.flickity-button {
background: #333;
color: hsla(0, 0%, 100%, 0.75);}

.flickity-button:hover {
	background: white;
}

.flickity-button:focus {
	outline: none;
	box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
	opacity: 0.6;
}

.flickity-button:disabled {
	opacity: 0.3;
}
/*------------------------------------- --------------------------------------*/
/* -------------------------- flickity-button ------------------------------- */
/*------------------------------------- --------------------------------------*/


/*----------------------------------------------------------------------------*/
/*------------------ flickity pour histoire du club --------------------------*/
/*----------------------------------------------------------------------------*/

main .gallery-bureaux {
	width:100%;
	background-color: #bbb;
	margin-top :1%;
	margin-bottom: 40px;
	padding:1em;
}

main .gallery-cell-bureaux {
	width:20%;
	height:340px;
	border-left:1px solid black;
	padding-left:5px;
	margin-right:10px;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	/*unselected*/
	opacity: 1;
	transform: scale(0.85);
	filter: none;
	transition: opacity 0.3s, transform 0.3s, filter 0.3s;
	color:white;
	box-shadow: 3px -3px 6px #fffe92;
}

main dt {
 color: #147587;
}

main dd {
		font-size:0.85em;
		text-align: justify;
}

main dt.dates {
	color:#fffe92;
}

main .gallery-cell-bureaux.is-selected {
	opacity: 1;
	transform: scale(1);
	filter: none;
}
/*----------------------------------------------------------------------------*/
/*------------------ flickity pour histoire du club --------------------------*/
/*-------------------------------------------------------------------------FIN*/

/*----------------------------------------------------------------------------*/
/*--------------------------- flickity tournois ------------------------------*/
/*----------------------------------------------------------------------------*/
main .gallery-tournois {
	background-color: #444444;
	margin-top :1%;
	/*max-height:500px;*/
	margin-bottom: 40px;
	padding-bottom: 1%;
}

main .gallery-cell-tournois {
	width:45%;
	height:500px;
	background-color: lightgrey;
	border:2px solid black;
	padding:30px 30px 10px 30px;
	margin-top:10px;
	border-radius:10px;
	margin-right:10px;
	/*unselected*/
	opacity: 0.8;
	transform: scale(0.6);
	filter: blur(2px);
	transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

main .gallery-cell-tournois.is-selected {
	opacity: 1;
	transform: scale(1);
	filter: none;
}

main article .gallery-cell-tournois figure img {
		float: none;
		box-shadow: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: auto;
		background-color: transparent;
		margin: 0% 20% 0 20%;
		transition: none;
		max-width: none;
		max-height: none;
		border: solid 2px #2e8291;
		border-radius: 10px;
}

main article .gallery-cell-tournois figcaption {
		color: white;
		background-color: rgba(51, 51, 51, 0.6);
		border: solid 2px #2e8291;
		border-radius: 10px;
		margin:1% 0 0 0;
}

main article .gallery-cell-tournois dd img {
		float: none;
		box-shadow: none;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60%;
			height: auto;
			background-color: transparent;
			margin: 1% 20% 0 15%;
			transition: none;
			max-width: none;
			max-height: none;
			border: solid 2px #2e8291;
			border-radius: 10px;
}
main .gallery-cell-tournois a:visited {
	color:#7d6503;
}
/*----------------------------------------------------------------------------*/
/*--------------------------- flickity tournois ------------------------------*/
/*-------------------------------------------------------------------------FIN*/


/*----------------------------------------------------------------------------*/
/*-------------------- flickity pour archives-------------------------------- */
/*----------------------------------------------------------------------------*/
main .gallery-archives {
	width:100%;
	background-color: #444444;
	margin-top :1%;
	/*max-height:500px;*/
	margin-bottom: 40px;
	padding-bottom: 1%;
}

main .gallery-cell-archives {
	width:32%;
	height:500px;
	background-color: lightgrey;
	border:2px solid black;
	margin-top:10px;
	border-radius:10px;
	margin-right:10px;
	/*unselected*/
	opacity: 1;
	transform: scale(0.65);
	filter: none;
	transition: opacity 0.3s, transform 0.3s;
}

main .gallery-cell-archives a {
	width:100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

main .gallery-cell-archives a > img {
width:auto;
height:100%;
margin:0;
max-width:none;
max-height:none;
transition: none;
transform: none;
box-shadow: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}

.gallery-cell-archives.is-selected a >img {
	width:auto;
	height:100%;
	margin:0;
	max-width:none;
	max-height:none;
	transition: none;
	transform: none;
	box-shadow: none;
	border-radius: 10px;
	background-color: transparent;
}

main .gallery-cell-archives img:hover {
max-width:none;
max-height:none;
transition: none;
transform: none;
box-shadow: none;
}

.gallery-cell-archives.is-selected img:hover {
	max-width:none;
	max-height:none;
	transition: none;
	transform: none;
	box-shadow: none;
}

.gallery-cell-archives.is-selected {
	opacity: 1;
	transform: scale(1);
	filter: none;
}
/*----------------------------------------------------------------------------*/
/*-------------------- flickity pour archives-------------------------------- */
/*-------------------------------------------------------------------------FIN*/

/*  **********  ***********   ***********   *********   ********    ************
		*           *         *   *         *       *       *           *          *
		*           *         *   *         *       *       *           *         *
		*           *         *   *         *       *       *           *      *
		******      *         *   *         *       *       *           *    *
		*           *         *   *         *       *       *******     * *
		*           *         *   *         *       *       *           *   *
		*           *         *   *         *       *       *           *     *
		*           *         *   *         *       *       *           *       *
		*           ***********   ***********       *       *********   *         *

*/



/* ---------------------------------------------------------------------------*/
/*------------------style concernant le footer ------------------------------ */
/* ---------------------------------------------------------------------------*/
footer {
	width: 100%;
	height: 3.6em;
	background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
	box-shadow: none;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}

footer ul {
	display: flex;
	padding:0;
}

footer ul li {
	list-style: none;
	display: inline-block;
	text-decoration: none;
	line-height: 20px;
	padding: 0 0.5em 0 0.5em;
	text-align: center;
}

footer ul li:nth-of-type(n+2) {
	border-left: 1px solid black;
}

footer a {
	color: var(--link-color-dark);
}

footer a:visited {
	color: var(--link-color-vis-dark);
}

footer a:hover {
	color: var(--link-color-hov-dark);
}

footer img {
	width:40px;
	height:40px;
}
/* ---------------------------------------------------------------------------*/
/*------------------style concernant le footer ------------------------------ */
/* ------------------------------------------------------------------------FIN*/