/*smartphone css pointer coarse ou largeur inferieure à 800px */
@media (pointer:coarse), (max-width:700px) {








/* -------------- NE PAS TOUCHER ,IMPORTANT pour ACCUEIL SMARTPHONE ----------*/
p {
		font-size: 0.8em;
}

h2 {
		font-size: 0.9em;
}

h3 {
		font-size: 0.7em;
}

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

#medias, #pense-bete, ul#officiel, ul#raccourcis {
		display:none;
}

div.tableaudesevenements {
	display: none;
}

span.accueil_span {
		background-color: white;
		position: absolute;
		right:1em;
		padding:1em;
		bottom: 0;
}

ol.flickity-page-dots {
		position: absolute;
		width: 100%;
		bottom: -1.5em;
		padding: 0.5em;
		margin: 0;
		list-style: none;
		text-align: center;
		line-height: 0.5em;
}

a.liresuite {
	text-decoration: none;
	color: black;
	float:right;
	font-style:italic;
	font-weight: bold;
}

a.is-selected {
	color:black;
}

html {
	height: auto;

}

body {

	margin:0;
}

/* main div#fond_accueil_smartphone {
	display: block;
	background-image: url("../images/photos_accueil/max.webp");
	width: 100%;
	position: fixed;
	top: -1em;
	left: 0px;
	height: 104%;
	background-size: cover;
}
*/

	main #article_bienvenue {
		display: none;
		}

header h1 {
	font-size:1.3em;
}

	main h2.accueil_h2 {
		display: none;
	}


	header {
		display: block;
		position: fixed;
		box-shadow: 0 4px 4px black;
		top: 0;
		left: 0;
		right: 0;
		z-index: 3;
		height: 70px;
		background: repeat url("../images/banniere.png");
	}

	audio {
		width: 95%;
	}

	#club-icon {
		position: absolute;
		top:0;
		width:3em;
		height:3em;
		right:0em;
	}


	#home-icon {
		display:none;
	}
	#home-icon2 {
		display:none;
	}


	header h1 {
		font-size:1.1em;
	}

	h2 {
		font-size: 1em;
		line-height: 2em;
	}

	/* ------------------------------------- */
	/*  Styles pour les composants généraux  */

	input[type="number"] {
		/* Sur un smartphone, aligner les chiffres à gauche est plus pratique. */
	text-align: left;
	}

	a.buttoncustom:hover, button:hover, button.toggle-on:hover {
		background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
		border: 1px solid darkgrey;
		color: #f7f7f7;
	}

	a.buttoncustom:active, button:active, button.toggle-on:active {
		background: linear-gradient(135deg, #f7f7f7, #e6e6e6);
		border: 1px solid lightgrey;
		color: #333;
		top: 1px;
	}



	/*----------------------------------------------------------------------*/
	/*---------------------- PASSWORD EGARE ----------------------------------------*/
	/*-----------------------------------------------------------------------*/
	main form.passwordegare fieldset {
		position: relative;
		width:100%;
		box-shadow: none ;
		margin:0;
	}

	main form.passwordegare input {
		margin-top:30px;
	}






/* MENU */

	header nav {
	/*
		'nav' sert de conteneur au menu tiroir. Il ne faut pas que cet
		élément se superpose avec le hamburger, pour éviter que les 2
		se parasitent l'un l'autre lors d'un évènement 'touch'.
	*/
	height: calc(100vh - 50px);

	/* Il ne faut pas non plus que 'nav' se superpose avec le contenu. */
	width: 0;
	}

	input#menu-toggle + label
	{
		display: block;
		position: absolute;
		top: 12px;
		left: 10px;
		z-index: 3;
		width: auto;
		user-select: none;
	}

	/*
	 * Just a quick hamburger
	 */
	input#menu-toggle + label span
	{
		display: block;
		width: 33px;
		height: 4px;
		margin-bottom: 5px;
		position: relative;

		background: black;
		border-radius: 3px;

		transform-origin: 4px 0px;

		transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
								background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
								opacity 0.55s ease;
	}

	input#menu-toggle + label span:first-child
	{
		transform-origin: 0% 0%;
	}

	input#menu-toggle + label span:nth-last-child(2)
	{
		transform-origin: 0% 100%;
	}

	/*
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	input#menu-toggle:checked + label span
	{
		opacity: 1;
		transform: rotate(45deg) translate(1px, -4px);
		background: white;
	}

	/*
	 * But let's hide the middle one.
	 */
	input#menu-toggle:checked + label span:nth-last-child(2)
	{
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * Ohyeah and the last one should go the other direction
	 */
	input#menu-toggle:checked + label span:nth-last-child(1)
	{
		transform: rotate(-45deg) translate(-1px, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu
	{
		position: relative;
		top:0;
		left: calc(-90vw + 17px);
		width: calc(90vw + 25px);
		min-width: unset;
		min-height: 100vh;
		margin: -52px 0 0 -40px;
		padding: 0px 20px 25px 30px;
		background: linear-gradient(135deg, #333 5%, #5a5a5a 100%);
		list-style-type: none;


		box-shadow: none;
		border-right: 2px solid black;

		overflow-y: auto;
		border-radius: 0;

	}

	#menu li, #menu li:hover
	{
		text-align: inherit;
		box-shadow: none;
		padding: 0;
		margin-left:55px;
		font-size: 16px;
		background-color:transparent;
		width: calc(90vw - 75px);
		transition: none;
		transform: none;
		color:white;
	}

	#menu li>ul, #menu li:hover>ul {
		position: inherit;
		opacity:1;
		width: unset;
	max-height: unset;
		text-transform: uppercase;
		font-weight: 300;
		border-top: 0;
		background-color:transparent;
		transition: none;
		transform: none;
		top: 0px;
		padding: 0;
		background: none;
		border: none;
		box-shadow: none;
		transition: none;
	}

	#menu li li, #menu li li:hover
	{
		background:none;
		line-height:1.1em;
		padding: 0.1em 0 0.1em 4%;
		font-size: 1.2em;
		list-style-type: none;
		box-shadow: none;
	}

	#menu li li > a, #menu li li > a:hover
	{
		padding: 0;
		display: inline;
		background: none;
		border: none;
	}

	#menu li#menu-shortcuts {
	display: block;
		position: absolute;
		right:10px;
		width:40px;
		min-width: unset;
		height: calc(100vh - 40px);
		margin: 0;
		padding: 0;
	}

	#menu li#menu-shortcuts ul {
	display: flex;
	height: calc(100vh - 150px);
	min-height: 300px;
	margin-top: 50px;
	justify-content: space-between;
	flex-direction: column;
	border-radius: 0;
	}

	#menu li#menu-shortcuts li {
	display: block;
	width:40px;
	height:40px;
	background-color: #fffe92;
	padding: 0;
	min-width: unset;
	line-height: 2;
	border-radius: 3px;
	}

	main #shortcuts
	{
	display:block;
	position: absolute;
	top:10%;
	list-style-type: none;
	background-color: transparent;
	width: 100%;
	}

	main #shortcuts li{
	float: left;
	list-style-type: none;
	color: black;
	font-weight: bolder;
	width: 33%;
	}

	main #shortcuts li > a {
		padding: 0.3em;
		background-color: #fffe92;
		background-image: url("../svg/golfe.svg");
		background-size: cover;
		margin: 0.5em 0.5em;
		border-radius: 10px;
		font-size: 2em;
		color:black;
	}



	#menu li#menu-shortcuts li#menu-connexion {
	border-radius: 3px;
	}



	main #shortcuts li > a:visited {
color: black;
}


	 #connexion li{
		display:none;
	}

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

	#menu label {
		text-decoration-line: underline;
	}

	/* -------------------------------------------- */
	/* Style pour les controles                     */
	/* (boutons et entrées qui controlent les vues) */

	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: 0.5em;
	}

	form.search {
		margin: 0 0 1em 0;
		width: 100%;
		height: 2em;
	}

	div.control-set {
		display: block;
	}

	div.control-set nav {
		width: 100%;
		display: flex;
		margin: 0 0 1em 0;
	}

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

	div.control-set nav li {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	div.control-set nav li a.clickpage{
		color:#fffe92;
		font-size: 1.5em;
		width:1.5em;
		padding-bottom: 0.2em;
	}

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

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

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

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

	div.control-set nav a {
		display: flex;
		justify-content: space-evenly;
		width: 1.5em;
		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;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration-line: underline;
		width: 1.5em;
		padding-left: 0.25em;
		padding-right: 0.25em;
		padding-bottom: 0.2em;
		margin-right: 0.75em;
		margin-left: 0.75em;
		font-size: 1em;

	}

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

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

	div.control-set dl {
		font-size: small;
		margin: 0 0 1em 0;
		float: left;
	}

	div.control-set dl > dt, div.control-set dl > dd {
		display: inline;
		font-weight: bold;
		font-size: small;
		color:black;
		font-style: normal;

	}

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

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

	div.control-set label {
		font-size: small;
	}

	div.control-set input {
		font-size: small;
		width:100%;
		text-align: center;
		margin: 1% 0 0 0;

	}

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












	.media {
		display: none;
	}

	.maxigoscentral {
		display: block;
		float: right;
		margin-left: 20px;
		width: 100%;

	}
	/* attention legere difference par rapport à la default */
	main {
		display: block;
		width: 100%;
		min-width: 220px;
		position: relative;
		top:1em;
		min-height: 100%;
		padding-left: 10px;
		padding-right: 0px;
		margin-top: 0;
		margin-right: 0%;
		width: 95%;
		min-width: 98%;
		margin-bottom: 0;
		float: none;
		box-shadow: none;
	}

	article img, p img {
		box-shadow: 8px 8px 8px #c8c8c3;
		float: none;
		margin: 1em;
		width:90%;
		max-width:none;
	}

	article img {
		width: auto;
		height: auto;
		float: right;
		margin: 5px;
		max-width: 95%;
		max-height: 230px;
		background-color: transparent;
	}

	article {
		float: right;
		width: 95%;
		padding: 0;
		margin-top: 1px;
		margin-bottom: 10px;
		margin-right: 0;
		border-top: 1px solid black;
		box-shadow: 4px 4px 8px #c8c8c3;
		clear: left;
	}




	div.encart {
		position: absolute;
		float: none;
		top:unset;
		width: 90%;
		margin:10% 5%;
		background-color: #fffe92;
		box-shadow: 4px 4px 8px #505050;
		padding:0 0 18px 0;
		background-image: url("../svg/golfe.svg");
		background-size: cover;
		z-index: 0;
		resize: none;
		overflow: unset;
		bottom: 1em;
	}






	main nav {
		width: 100%;
	}

	main div.mxMainBoxDiv {
		float: left;
	}

	main div.mxBesideBoxDiv {
		float: left;
	}

	.pagination ul {
		list-style: none;
		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
	}

	.pagination li {
		display: inline-block;
		position: relative;
		padding: 0 5px;
		background-color: #c8c8c3;
	}

	.pagination li {
		display: inline-block;
		position: relative;
		padding: 0 5px;
		background-color: #c8c8c3;
	}

	.pagination li a {
		color: black;
		text-decoration: none;
	}

	.pagination ul li:hover a {
		color: #686864;
		/* Couleur du texte des sous-menu au survol */
	}

	.pagination a:hover {
		color: #686864;
		opacity: 0.5;
	}

	.pagination .active {
		color: white;
	}

	div#event-prices table {
		font-size: x-small;
	}

	/* -------------------------------------------- */
	/* Style pour les controles                     */
	/* (boutons et entrées qui controlent les vues) */

	input#maxcount {
		/* Pas besoin d'etre plus large, car il n'y a pas le spinner. */
	width: 4em;
		text-align: center;
		height: auto;
	}


	/* --------------------------- */
	/* Styles pour les vues listes */


	#table-page-settings {
		display: block;
		float:right;
	}

	#table-page-settings label {
		display: block;
	}

	table.table-page, div.table-page {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	.table-page .optional {
		display: none;
	}

	form.search button[type="submit"] {
		/* Dans un smartphone, le bouton loupe est redondant avec
			 le clavier virtuel. */
		display: none;
	}

	.pagination ul li:hover a {
		color: #686864;
		/* Couleur du texte des sous-menu au survol */
	}

	.pagination a:hover {
		color: #686864;
		opacity: 0.5;
	}

	.pagination .active {
		color: white;
	}

 /* ICI commence le bloc de style des fieldset des formulaires */

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



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

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

	main fieldset.uploadsgf {
		margin-top: 1%;
		width: 95%;
		margin-left: 0%;
		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;
	}

	div#messages > div {
		left: 5vw;
		width: 90vw;
		transform: translateY(-50%);
	animation: 0.5s ease 0s 1 normal show-phone-message;
	}

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

	div#messages>div>label.close-btn {
	height: 28px;
	border-radius: 28px;
	border: solid 2px white;
	padding: 6px 0 6px 0;
	font-size: 24px;
	}

	table.table-page {
		margin-top: 3%;
		width: 100%;
		border-top: 1px solid black;
		box-shadow: 4px 4px 8px #c8c8c3;
	}

	table.table-page th {
		max-width: 200px;
		font-size: 0.75em;
		background-color: #fffe92;
		text-align: center;
	}

	table.table-page td {
		max-width: 200px;
		text-align: center;
		font-size: 0.8em;
	}

	table.table-page tbody tr:nth-child(odd) {
		max-width: 200px;
		background-color: rgba(221, 221, 221, 0.5);
		text-align: center;
	}

	table.table-page tbody tr:nth-child(even) {
		max-width: 200px;
		background-color: rgba(206, 206, 206, 0.5);
		text-align: center;
	}

	table.table-page tbody tr:hover {
		background-color: rgba(114, 159, 207, 0.2);
		/* couleur du golfe */
	}

	p.table-page-note {
		font-style: italic;

	}

	/* ------------------------------------- */
	/* Styles pour les formulaires d'édition */

		form.edit fieldset label, form.edit fieldset div, form.edit > fieldset > dl.infos {
			float: none;
			width:100%;
			margin: 0;
			padding-bottom: 1em;
		}

		form#contact textarea {
			height:80px;
			margin: 1em 0 1em 8%;
			background-color: #d7cfb8;
		}
		
		form.edit>fieldset>dl.infos {
			font-style: italic;
			float:right;
		}
	/* ------------------------ */
	/* ------------------------ */
	 /* flickity pour le diaporama des photos  */
	/* ------------------------ */
	/* ------------------------ */
	main .gallery-photos {

	}

	main .gallery-cell-photos.is-selected {
		opacity: 1;
		transform: none;
		filter: none;

	}

	main .gallery-cell-photos {
			width:80%;
			height:500px;
			background-color: lightgrey;
			border:2px solid black;
			padding-left:3px;
			padding-right:3px;
			margin-top:10px;
			border-radius:10px;
			margin-right:10px;
			/*unselected*/
			opacity: 1;
			transform: none;
			filter: none;
			transition: none;
	}

	@media (orientation: landscape) {

		main .gallery-cell-photos img, main .gallery-cell-photos.is-selected img {
				width:auto;
				height: 70%;
				}


			}

main button#pleinecran {
	position: absolute;
	top:10px;
	right:1%;
	z-index: 7;
	box-shadow: none;
	padding:0;
}

main .gallery-photos.is-fullscreen .gallery-cell-photos {
		position: absolute;
		height: 100%;
		width:100%;
		background-color: transparent;
		border:none;
		display: flex;
		align-items: center;
		justify-content: center;
}

main .gallery-photos.is-fullscreen .gallery-cell-photos img {
	width:100%;
	/*max-width: 512px;*/
	height: auto;
	box-shadow: none;
	transition: none;
	border-radius: 10px;
	margin: 0.5em;
	}


@media (orientation: landscape) {
	main .gallery-photos.is-fullscreen .gallery-cell-photos img {
			width:auto;
			height: 90%;
			}
}




/* ------------------------ */
 /* ------------------------ */
 /* Styles flickity  archives */
 /* ------------------------ */
 /* ------------------------ */



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

		main .gallery-cell-archives {
			width:80%;
			height:500px;
			background-color: lightgrey;
			border:2px solid black;
			padding-left:5px;
			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;
	}

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

		 main dd {
				 font-size:0.65em;
				 text-align: left;
		 }

		 main .gallery-bureaux {
			 width:100%;
		 }

		 main .gallery-cell-bureaux {
			 width:80%;
			 height:350px;
			 border-left:1px solid black;
			 padding-left:5px;
			 margin-right:10px;
			 /*unselected*/
			 opacity: 1;
			 transform: scale(1);
			 filter: none;
			 transition: none;
		 }

		 main .gallery-cell-bureaux.is-selected {
			 opacity: 1;
			 transform: none;
			 filter: none;
		 }

	/* flickity tournois */



		main .gallery-tournois {
			width:100%;
		}

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

			main .gallery-cell-tournois {
				width:80%;
				height:500px;
				background-color: lightgrey;
				border:2px solid black;
				padding:40px;
				margin-top:10px;
				border-radius:10px;
				margin-right:10px;
				/*unselected*/
				opacity: 1;
				transform: none;
				filter: none;
				transition: none;
		}
		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 article .gallery-cell-tournois figure{
				width:90%;
				margin: 0 10% 0 10%;
		}

		main article .gallery-cell-tournois figure img {
				float: none;
				box-shadow: none;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: auto;
				background-color: transparent;
				margin: 0;
				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: 2% 0 0 0;
				font-size: 0.85em;
		}

	/* ICI commence le style du bas de page */
	footer {
		display: none;
		float: left;
		width: 100%;
		background-color: #fffe92;
		box-shadow: 0 -2px 2px #c8c8c3;
	}

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

	footer a:visited {
		color: black;
		text-decoration: none;
	}

	footer a {
		color: black;
		text-decoration: none;
	}


/**
 * Dans le cas d'une fenêtre d'ordi de largeur <= 700px, on active le
 * comportement du bouton hamburger par CSS, car le javascript mobile.js
 * (qui active, entre autre, le glissement au doigt) n'est envoyé qu'aux
 * smartphones et tablettes.
 */


@media not(pointer:coarse), (max-width:700px) {

	input#menu-toggle + label:hover {
		cursor: pointer;
	}

	input#menu-toggle:checked + label + nav > ul {
		/* translation de la valeur 'left' du menu */
		transform: translateX(calc(90vw - 20px));
		transition: transform 0.5s ease;
	}

	input#menu-toggle:not(checked) + label + nav > ul {
		transform: translateX(0);
		transition: transform 0.5s ease;
	}
}


/*
div.encart{
	width: 50%;
	position: absolute;
	right: 3em;
	top: 5em;
}

main #shortcuts
{
display:block;
position: relative;
top:1em;
}

main #shortcuts
{
display:block;
position: relative;
top:18em;
}

main #shortcuts ul
{
background-color: transparent;
width: 100%;
list-style-type: none;
position: absolute;
top:100px;
}

main #shortcuts li{
	float: left;
list-style-type: none;
color: black;
font-weight: bolder;
width: 15%;

}

main #shortcuts li > a {
	padding: 0.3em;
	margin: 0.5em 1.5em;
	font-size: 2em;

}

main div#max {
	display: block;
	background-image: url("../images/max.jpg");
	width: 100%;
	position: fixed;
	top: -1em;
	left: 0px;
	height: 104%;
	background-size: contain;
	background-repeat: no-repeat;
}
*/