:root {
  --primary: darkorange;
  --hover-color: #ffbf00;
  --dark: #4233a8;
  --meddark:#6868FF;
  --light: white;
  --lightprim:lightyellow;
  --medprim:orange;
  --lightprim2:#ffb97c;
  --complementaire:#00BBFF;
  --header-bg: var(--primary);
  --present:lime;
  --retard:darkorange;
  --absent:red;
}
/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
 /*   font-family: Avenir, sans-serif; */
	font-family: system-ui;
}
/*
@font-face {
    font-family: Seventies;
    src: url("../css/Seventies_Sunrise_Trial.otf");
}
@font-face {
    font-family: Disco;
    src: url("../css/d2k.ttf")  format('truetype');
}
*/
@font-face {
    font-family: Sooky;
    src: url("../css/Sooky70s.ttf")  format('truetype');
}






.liste ul{
	margin-left: 2rem;
}

.logo {display: flex;
  width: 100%;
  margin: 20px;
  align-items: center;
}
.logo .a { 
         background: url("rallye2025.svg") no-repeat;
		 background-size: contain;
         width: 200px; 
         height: 100px; 
         display: block; 
		 float:left;
         text-indent: -9999px;
		 
}

.logo p {
    font-size: 4rem;
    letter-spacing: 0.2rem;
    font-weight: 600;
    font-family: Sooky;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
  color: white;
	}
.alert{
  position: absolute;
  text-align: right;
  right: 1em;
}
.btalert{
  border-radius: 0.5em;
  border: solid red 3px;
  padding: 0.5em;
  background: white;
  margin-top: 0.5em;
  width: 10em;
}
.btalert a{
	text-decoration:none;
	color: black;
}


section{
	padding-left:1rem;
	padding-right:1rem;
	margin-top: 190px;
}
nav{
    width: 100%;
    margin: 0 auto;
    background-color: white;
    position: sticky;
    top: 0px;
	font-weight:600;
	z-index:1000;
}
footer{
  background: var(--primary);
  color:var(--lightprim);
  font-weight: 600;
  padding-left: 1rem;
  z-index: -100;
  position: absolute;
  width: 100%;
}
.conteneur-nav{
    position: absolute;
    width: 100%;
	}
nav input[type=checkbox]{
    display: none;
}
nav label{
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
    background-color: gold;
}
nav ul{
    display: none;
    list-style-type: none;
    background-color: #555;
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: center;
}
nav > div > ul > li > a{
    color: white;
}
nav a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px 0px;
}
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 1000;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
}
.sous a{
    padding: 10px;
	color:var(--lightprim);
    background-color:var(--dark); /* RGBa(200,200,200,0.8); */
}
.deroulant > a::after{
	content:" ▼";
	font-size: 12px;
}
.sous li ul {
			display:none;
			left:100%;
			top:0;
			position: absolute;
		}
.resous{
			padding: 10px;
	}
.sous li:hover ul{
	display: flex;
	overflow:visible;			
}
.sous > a::after{
	content:" ▼";
	font-size: 12px;
}

.colonnes {
  display: grid;
  grid-template-columns: repeat(3, 30% 30% 30%);
}

@media screen and (min-width: 980px){
	header{
	  position: fixed; /* Set the navbar to fixed position */
	  top: 0; /* Position the navbar at the top of the page */
	  width: 100%; /* Full width */
      background: var(--lightprim);
	  z-index:100;
	}
    .conteneur-nav{
        position: static;
    }
    nav label, nav input{
        display: none;
    }
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
        background-color: var(--primary);
    }
    nav ul li{
        position: relative;
    }
    nav > div > ul > li > a{
        color: black;
    }
    nav a{
        border-bottom: 2px solid transparent;
    }
    nav a:hover{
        color:var(--lightprim);
		background:var(--dark);
        border-bottom: 2px solid gold;
    }
    
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: var(--primary);
		color:black;
        position: absolute;
        width: 100%;
    }
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
    .sous a{
        border-bottom: none;
        background-color: var(--lightprim);
		color:var(--dark);
		/* border:1px solid black; */
    }
    .sous a:hover{
        border-bottom: none;
        background-color: var(--dark);
    }

}
textarea{
	width:100%;
	resize: vertical;
}
fieldset{
	border: 3px var(--primary) solid;
	border-radius: 10px;	
	margin: 10px auto;
    padding: 10px;
	background: var(--lightprim);
	width:90%;
}

fieldset p{
	line-height:1.5em;
}

legend{
	font-size: 1.2em;
  font-style: italic;
  color: var(--primary);
  font-weight: 600;  
  padding: 0px 1em;
}

label {
	font-weight:800;
}
/*
	****************************** INPUT
*/
input[type=button], input[type=submit],button[type=submit],select{
	border-radius: 20px;
	color: black;
	background-color: var(--primary);
	border: 3px solid var(--primary);
	padding: 5px 12px;
	margin:20px;
	font-weight: 800;
}

input[type=file] {
border-radius: 220px;
  color: black;
  background-color: var(--primary);
  border: 3px solid var(--primary);
  padding: 5px 12px;
  margin: 24px;
  font-weight: 800;
  width: 300px;
}


input[type=button],button[type=submit], input[type=submit]:hover {
	border: 3px solid var(--dark);
	background-color: var(--dark);
	color: var(--lightprim);
}
input[type=radio]+label{
	color: var(--primary);
  padding: 0 1em 0 0;
}
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date] {
  font-size: 14px;
  background: #fff;
  /* border: 1px solid #ddd; */
  border:none;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}
input[type=date] 
{ background: rgba(0, 255, 0, .1);}

input[type=text]:invalid, input[type=password]:invalid, input[type=email]:invalid, input[type=tel]:invalid{  background: rgba(255, 0, 0, .1);}
input[type=text]:valid, input[type=password]:valid, input[type=email]:valid, input[type=tel]:valid{ background: rgba(0, 255, 0, .1);}

.ahref{
	border-radius: 20px;
	color: black;
	background-color: var(--primary);
	border: 3px solid var(--primary);
	padding: 5px 12px;
	font-weight: 800;
	text-decoration:none;
	display: block;
	width: fit-content;
}

/*input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,textarea:focus {
    outline: none;
	border: 2px solid var(--primary);
}
*/

.conteneur-contenu{
 
  /* height: 1500px; */
}

/*
	****************************** TABLE
*/
table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
		
	
thead{

background-color: var(--primary);
color: white;

}
	

th,td{padding:8px 0}


tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
td a {
	text-decoration: none;
  background: var(--primary);
  color:black;
  padding: 0px 20px;
  border-radius: 20px;
}

td a:hover {
  background: var(--dark);
  color:white;
}
/*
	****************************** Fadin/Fadout
*/
.disparaitre {
    opacity: 1;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}
.disparaitre.unload {
    opacity: 0;
}

/* TITLE */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
a[data-title]:after,td[data-title]:after {
    content: attr(data-title);
    background-color: var(--primary);
    border-radius: 0.5em;
    color: white;
    font-size: 150%;
    padding: 0.2em 0.5em;
	position: absolute;	
    bottom: -1.5em;
    left: 100%; 
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
a[data-title],td[data-title] {
    position: relative;

}
button[data-title]:after {
    content: attr(data-title);
    background-color: var(--absent);
    border-radius: 0.5em;
    color: white;
    font-size: 150%;
    padding: 0.2em 0.5em;
	position: absolute; 
    bottom: -1.5em;
    right: 100%; 
	white-space: pre;
   /*  white-space: nowrap; */
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
}
button[data-title] {
    position: relative;
}
@media only screen and (max-width: 980px) {
		
table, 
thead, 
tbody, 
th, 
td, 
tr{ 
	
display: block
	
}
	
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
th{display:none;}
 
td { 
	
position: relative;
padding-left: 50%; 
white-space: normal;
text-align: left
	
	}
 
td:before { 
	
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
font-weight: bold;
white-space: nowrap;
text-align:left;
content: attr(data-title)
	
	}
}