/* ################################### Menu déroulant ################################### */

nav {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0px;
	z-index: 1;
}

nav ul {
	list-style-type: none;
}

nav ul li {
    float: left;
    width: 200px;
	left: -20px;
    text-align: center;
    position: relative;
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    display: block;
    text-decoration: none;
    color: #000000;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
}

nav a:hover {
    color: white;
    border-bottom: 2px solid white;
}

.sous a:hover {
    border-bottom: none;
    color: white;
}

.sous, .deroulant {
    background-color: #cddc46;
}

.deroulant {
	border-radius: 20px 20px 0  0;
}

.sous {
    display: none;
    /*box-shadow: 0px 1px 2px #ccc;*/
    position: absolute;
    width: 100%;
    z-index: 1000;
}

nav > ul li:hover .sous { 
	display: block;
}

.sous li {
    float: none;
    width: 100%;
    text-align: left;
}
.sous a {
    padding: 10px;
    border-bottom: none;
}

.deroulant > a::after {
    content:" ▼";
    font-size: 12px;
}

/* ################################### Fin du menu déroulant ################################### */
/* ################################### Général ################################### */

body {
	font-family: "Verdana", "Helvetica", "Century Gothic", "Calibri", "Roboto", sans-serif;
	font-size: 18px;
	margin: 0;
	text-align: center;
	color: #000000;
}

.container {
	overflow: hidden;
}
  
.sliding-background {
	position: fixed;
	background-image: url("images/background.png");
	height: 3000px;
	width: 11400px;
	animation: slide 30s linear infinite;
	z-index: -10;
}
  
@keyframes slide{
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-1140px, -300px, 0);
	}
}

section {
	max-width: 1200px;
	min-width: 400px;
	margin: 50px auto;
    overflow: hidden;
    word-wrap: break-word;
	padding: 20px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	min-width: 400px;
	margin: 20px;
}

h2 {
	font-size: 48px;
}

.btn {
	border-width: 1px;
	border-radius: 100px;
	background-color: #cddc46;
	border: 2px solid #cddc46;
	margin: 15px 15px 15px 15px;
}

.btn a {
	color: #000000;
	padding: 15px 30px;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

/* ################################### Fin de général ################################### */
/* ################################### Titre ################################### */

section#titre {
	background-color: #ffffff;
	border-radius: 50px;
	border: unset;
	margin: auto;
	max-width: 780px;
	min-width: 400px;
}

section#titre .image {
	width: 85%;
	min-width: 200px;
}

section#titre p {
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
}

section#titre p.ligne {
	margin: 20px 0;
	width: 90%;
	border-top: solid;
	border-top-color: #cddc46;
	border-top-style: dotted;
	border-top-width: 6px;
}

section#titre .row p {
	font-size: 24px;
	font-weight: bold;
	width: 100%
}

section#titre div.row div.contenu {
	margin: 30px;
}

section#titre div.row div.separateur {
	margin: 30px 0;
}

section#titre div.row img {
	width: 50px;
	filter: brightness(0) saturate(100%) invert(82%) sepia(92%) saturate(361%) hue-rotate(6deg) brightness(91%) contrast(89%);
	/* couleur convertie sur https://codepen.io/sosuke/pen/Pjoqqp */
}

/* ################################### Fin du titre ################################### */
/* ################################### Règlement ################################### */

section#reglement {
	max-width: max-content;
}

section#reglement img {
	width: 50px;
	filter: brightness(0) saturate(100%);
	/* couleur convertie sur https://codepen.io/sosuke/pen/Pjoqqp */
}

section#reglement h2 {
	border-radius: 50px;
	background-color: #ffffff;
	margin-bottom: 0;
	max-width: 1200px;
}

section#reglement p {
	max-width: 1200px;
	border-radius: 50px;
	background-color: #ffffff;
	text-transform: uppercase;
	margin: 5px 0px;
	padding: 5px 0px;
}

section#reglement .row h4 {
	min-width: 100px;
	margin: 0;
}

section#reglement .row {
	gap: 30px;
	padding: 10px;
}

section#reglement .row div {
	background-color: #FFFFFF;
	padding: 10px 20px;
	border-color: #C6D81D;
	border-style: dotted;
	border-width: 5px;
	border-radius: 50px;
}

@media (max-width: 1200px) {
	section#reglement .row div {
		max-width: 1200px;
		min-width: 400px;
	}
}
@media (min-width: 1200px) {
	section#reglement .row div {
		width: 400px
		/*width: 25%*/
	}
}

/* ################################### Fin du règlement ################################### */
/* ################################### Planning ################################### */

section#planning .invisible {
	width: 20px;
	background-color: transparent;
	color: transparent;
	border-color: transparent;
}

section#planning {
	max-width: max-content;
}

section#planning h3, section#planning table {
	border-radius: 50px;
	border: solid;
	background-color: #ffffff;
	border-width: 6px;
	padding: 10px;
}

section#planning h3 {
	min-width: 180px;
	max-width: 180px;
	margin: 0;
	padding: 10px;
}

section#planning div table {
	text-transform: uppercase;
	font-weight: bold;
}

section#planning div table td {
	padding-top: 20px;
}

section#planning div table .one {
	color: #cddc46;
	text-align: right;
}

section#planning div table .two {
	text-align: left;
}

@media (max-width: 720px) {
	section#planning .row {
		flex-direction: column;
		align-items: baseline;
	}

	section#planning div table {
		margin-bottom: 50px;
	}
	
	section#planning .column-one, section#planning .column-two, section#planning .column-three {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
	}

	section#planning .column-one div.line, section#planning .column-two div.line, section#planning .column-three div.line {
		border: none;
	}

	section#planning .column-one, section#planning .column-two, section#planning .column-three {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}
	
}
@media (max-width: 1500px) and (min-width: 720px) {

	section#planning .row {
		gap: 50px;
		flex-direction: column;
	}
	
	section#planning .column-one, section#planning .column-two, section#planning .column-three {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}

	section#planning div.line {
		width: 30px;
		z-index: -1;
	}
	
	section#planning .column-one div.line {
		height: 0.1px;
		border-top: 6px solid #000;
	}
	section#planning .column-two div.line {
		height: 100px;
		border-top: 6px solid #000;
		border-bottom: 6px solid #000;
	}
	section#planning .column-three div.line {
		height: 0.1px;
		border-top: 6px solid #000;
	}

	section#planning div.one, section#planning div.two {
		background-color: #e6eda1;
		height: 1000px;
		width : 80px;
		position: relative;
		z-index: -2;
	}
	section#planning div.one {
		margin: -980px;
		border-right: 10px dotted #000;
		left: -255px;
		top: 1020px;
	}
	section#planning div.two {
		border-left: 10px dotted #000;
		left: -175px;
		top: 1000px;
	}
	
}
@media (min-width: 1500px) {

	section#planning .row {
		gap: 50px;
		align-items:center;
	}
	
	section#planning .column-one, section#planning .column-two, section#planning .column-three {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-wrap: wrap;
	}
	section#planning .column-one {
		align-items: end;
		flex-direction: column-reverse;
	}
	section#planning .column-two {
		align-items: center;
	}
	section#planning .column-three {
		align-items: baseline;
		flex-direction: column-reverse;
	}
	
	section#planning div.line {
		height: 30px;
		position: relative;
		z-index: -1;
	}
	
	
	section#planning .column-one .invisible {
		height: 385px;
	}
	section#planning .column-two .invisible {
		height: 166px;
	}
	section#planning .column-three .invisible {
		height: 500px;
	}

	section#planning .column-one div.line {
		width: 90px;
		border-left: 6px solid #000;
	}
	section#planning .column-two div.line {
		width: 250px;
		border-left: 6px solid #000;
		border-right: 6px solid #000;
	}
	section#planning .column-three div.line {
		width: 90px;
		border-right: 6px solid #000;
	}
	
	
	section#planning div.one, section#planning div.two {
		background-color: #e6eda1;
		height: 50px;
		width : 5000px;
		position: relative;
		z-index: -2;
	}
	section#planning div.one {
		margin: -100px;
		border-bottom: 10px dotted #000;
		top: 394px
	}
	section#planning div.two {
		border-top: 10px dotted #000;
		top: 484px
	}
	
}

/* ################################### Fin du planning ################################### */
/* ################################### Talk ################################### */

section#talk {
	max-width: 800px;
}

section#talk div, section#talk img {
	border-radius: 50px;
	border: solid;
	border-color: #cddc46;
	border-style: dotted;
	border-width: 6px;
}

section#talk div {
	background-color: #ffffff;
	padding: 20px;
	margin-top: 50px;
}

section#talk img {
	width: 200px;
	float: left;
	border-radius: 20%;
	margin: 0;
}

section#talk p {
	margin: 0;
}



/* ################################### Fin du talk ################################### */
/* ################################### Table ronde ################################### */


section#table-ronde {
	max-width: max-content;
}

section#table-ronde img {
	border-radius: 192px;
	border: solid;
	border-color: #cddc46;
	border-style: dotted;
	border-width: 6px;
}

section#table-ronde h2 {
	border-radius: 50px;
	background-color: #ffffff;
	margin-bottom: 0;
	max-width: 1200px;
}

section#table-ronde p {
	max-width: 1200px;
	border-radius: 50px;
	background-color: #ffffff;
	text-transform: uppercase;
	margin: 5px 0px;
	padding: 5px 0px;
}

section#table-ronde .row h4 {
	min-width: 100px;
	margin: 0;
}

section#table-ronde .row {
	gap: 30px;
	padding: 10px;
}

section#table-ronde .row div {
	background-color: #FFFFFF;
	padding: 10px 20px;
	border-color: #C6D81D;
	border-style: dotted;
	border-width: 5px;
	border-radius: 50px;
}

@media (max-width: 1200px) {
	section#table-ronde .row div {
		max-width: 1200px;
		min-width: 300px;
	}
}
@media (min-width: 1200px) {
	section#table-ronde .row div {
		width: 300px
		/*width: 25%*/
	}
}





/*
Ancien table rond avat 2023-04-25 Gilles
section#table-ronde {
	max-width: max-content;
}

section#table-ronde .row {
	gap: 30px;
}

section#table-ronde .column {
	gap: 10px;
}

section#table-ronde p, section#table-ronde img {
	border: solid;
	border-color: #cddc46;
	border-style: dotted;
	border-width: 6px;
}

section#table-ronde img {
	border-radius: 50px;
}

section#table-ronde p {
	border-radius: 25px;
	padding: 15px;
}

section#table-ronde img {
	background-color: #ffffff;
	width: 150px;
	border-radius: 50%;
}

section#table-ronde p {
	background-color: #ffffff;
	padding: 20px;
	margin: 0;
	min-width: 150px;
}
*/
/* ################################### Fin de la table ronde ################################### */
/* ################################### Informations pratiques ################################### */

section#infos {
	max-width: max-content;
}

section#table-ronde h3 {
	padding: 15px 40px;
}

section#infos .row .column div {
	background-color: #FFFFFF;
	padding: 10px 20px;
	border-color: #C6D81D;
	border-style: dotted;
	border-width: 5px;
	border-radius: 50px;
	margin: 15px 30px;
}

@media (max-width: 1100px) {
	section#infos .row .column {
		max-width: 1100px;
		min-width: 400px;
	}
}
@media (min-width: 1100px) {
	section#infos .row .column .one {
		width: 600px;
	}
	section#infos .row .column .two {
		width: 220px;
	}
}

/* ################################### Fin d'informations pratiques ################################### */
/* ################################### Live ################################### */

section#live h2 {
	border-radius: 50px;
	background-color: #ffffff;
	margin-bottom: 0;
	max-width: 1200px;
}
section#live p {
	max-width: 1200px;
	border-radius: 50px;
	background-color: #ffffff;
	text-transform: uppercase;
	margin: 5px 0px;
	padding: 5px 0px;
}

/* ################################### Fin du live ################################### */

/* ################################### Contacts et réseaux sociaux ################################### */

section#contacts {
	background-color: #ffffff;
	border-color: #C6D81D;
	border-style: dotted;
	border-width: 6px;
	border-radius: 50px;
}

section#contacts .row div {
	width: 8%;
	min-width: 80px;
	padding: 50px 7%;
	display: inline-block;
	vertical-align: middle;
}

section#contacts img {
	width: 100%;
	filter: brightness(0) saturate(100%) invert(82%) sepia(92%) saturate(361%) hue-rotate(6deg) brightness(91%) contrast(89%);
	/* couleur convertie sur https://codepen.io/sosuke/pen/Pjoqqp */
}

/* ################################### Fin des contacts et réseaux sociaux ################################### */
/* ################################### Partenaires ################################### */

section#partenaires {
	background-color: #ffffff;
	border-color: #C6D81D;
	border-style: dotted;
	border-width: 6px;
	border-radius: 50px;
}

section#partenaires .row1 div {
	width: 20%;
	min-width: 150px;
	padding: 20px;
	display: inline-block;
	vertical-align: middle;
}
section#partenaires .row2 div {
	width: 12%;
	min-width: 120px;
	padding: 5px;
	display: inline-block;
	vertical-align: middle;
}

section#partenaires img {
	width: 100%;
	filter: brightness(0) saturate(100%) invert(82%) sepia(92%) saturate(361%) hue-rotate(6deg) brightness(91%) contrast(89%);
	/* couleur convertie sur https://codepen.io/sosuke/pen/Pjoqqp */
}

/* ################################### Fin de partenaires et réseaux sociaux ################################### */
/* ################################### Pastille ################################### */

div.pastille {
	padding: 20px;
	border-radius: 100%;
	border: solid;
	border-color: #cddc46;
	border-width: 15px;
	background-color: #ffffff;
	position: absolute;
	right: 50px;
	top: 50px;
	width: 300px;
	height: 300px;
	transform: rotate(10deg);
	z-index: -1;
}

div.pastille p {
	font-weight: bold;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

div.pastille p.one {
	font-size: 32px;
	margin-top: 80px
}

div.pastille p.two {
	font-size: 62px;
}

/* ################################### Fin de pastille ################################### */

section#planning h2, section#talk h2, section#table-ronde h2, section#table-ronde h3, section#infos h2 {
	border-radius: 50px;
	border: solid;
	border-color: #cddc46;
	border-style: dotted;
	border-width: 6px;
	background-color: #ffffff;
	padding: 5px 40px;
}

section#inscription, section#jeux, section#editions-precedentes {
	background-color: #ffffff;
	text-transform: uppercase;

	border-radius: 50px;
	border: solid;
	border-color: #cddc46;
	border-style: dotted;
	border-width: 6px;
}

section#editions-precedentes div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
}