/* -------------------------------------------------------------------------- */
/* ----------------------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 {
	/* Nécessaire pour que la div.connexion s'étende du bas de header
	   jusqu'au bas de la page. */
	position: absolute;
	
	display: flex;
	flex-wrap: wrap;
	margin: 100px 0 0 0;
	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;
	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: 5;
	height: 100px;
	background: 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;
}

input

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;
}



/* -------------------------------------------------------------------------- */
/* ----------------------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, #pense-bete::-webkit-scrollbar {
	display:none
}

#medias {
	padding: 0.6em 1em 1em 1em;
	width: 20%;
	background: url("../images/texture.png");
	background-repeat: repeat-y;
	border-right: 1px solid black;
}

#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;
	width:15%;
	background: url("../images/texture.png");
	background-repeat: repeat-y;
	margin-top:-0.4em;
	border-left:1px solid black;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}

main, #medias, #pense-bete {
	/* On force footer en bas de page */
	/* (100px est la hauteur de header, 3.6em est la hauteur de footer) */
	min-height: calc(100vh - 100px - 3.6em);
}

/* -----------------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 calc(20% + 4em);
	padding: 0 10px;
	background-color: #595959;
	list-style-type: none;
	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, #menu li li > button {
	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,
#menu li li > button:hover {
	color: black;
}

#menu li li > button {
	border: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: uppercase;
	background: none;
	font-family: "rawline-300", sans-serif;
}

#menu li li > button:hover {
	background: none;
}

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

#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;
}

/*----------------------------------------------------------------------------*/
/* ---------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;
	width: 65%;
	min-width: 200px;
	padding: 2em;
}

main.accueil_main {
	background-image: url("../images/photos_accueil/accueil_4.webp");
	background-size: cover;
	background-repeat: no-repeat;
}

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;
}


/* --------------------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);
}

#btn-session-toggle {
	display: none;
}

label[for="btn-session-toggle"], #menu-session-toggle {
	cursor: pointer;
}

label[for="btn-session-toggle"]:hover {
	color: var(--link-color-dark);
}

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

#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;
	line-height: 1em; /* Garantie pour des ancres et boutons identiques en hauteur. */
}

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,
div.context-menu > button.context-menu.item-action {
	display: block;
	padding: 0.4em;
	text-align: left;
	color: var(--menu-item-color);
	font-weight: bold;
	font-size: medium;
}

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

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

div.context-menu > button.context-menu.item-action {
	background: none;
	border: none;
	text-shadow: none;
	box-shadow: none;
	line-height: unset;
	font-family: "rawline-300", sans-serif;
}

div.context-menu > button.context-menu.item-action:hover {
	border: none;
	background-image: none;
	text-shadow: none;
	box-shadow:none;
}


/*--------------------------------------------------------- ------------------*/
/*---------------------------- 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;
	}

div.tableaudesevenements {
	float: left;
	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:5em 0 0 0;
	background-image: url("../svg/golfe.svg");
	background-size: cover;
}

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;
	border-top: none;
}

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: 0.5em 5px;
	border-top: 2px dotted #729fcf;
}

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

div.encart {
	float: right;
	width: 50%;
	background-color: #fffe92;
	box-shadow: 4px 4px 8px #505050;
	margin:5em 0 0 0;
	padding:0 0 38px 0; /* padding bas pour inclure les points de navigation de flickity */
	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;
}

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 */

/*---------------------------------------------------------*/
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.action-set>button {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	border: 1px solid whitesmoke;
}

/* -------------------------------------------------------------------------- */
/* ----------------------Styles pour les actions -----------------------------*/
/* ------------------------------------------------------------------------FIN*/


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


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

form.edit > fieldset, form.edit > .fieldset {
	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 legend {
	margin-bottom: 2em;
}


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

form.edit .fieldset {
	width: 90%;
	margin-left: 5%;
}

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

form.edit fieldset label.text-editor,
form.edit .fieldset 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 .fieldset label>input:not([type=checkbox]):not([type=radio]),
form.edit .fieldset label>textarea,
form.edit .fieldset 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 le lien de modif d'une inscription ----------- */
/*--------------------------------------------------------------------------- */
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 le lien de modif d'une inscription ----------- */
/*-------------------------------------------------------------------------FIN*/


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

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(50%, -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(50%, -500px); }
	80%  { transform: translate(50%, calc(-50% + 15px)); }
	to   { transform: translate(50%, -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: 0 0 0 1em;
	text-align: left;
	margin: auto;
}

div#messages > div > * p {
	padding: 0;
}

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;
}

/*------------------------------------- --------------------------------------*/
/*---------------- 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 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*/