div {
	/* background-color:rgba(0,0,255,0.9); */
	/* background-color:rgba(30,30,30,1); */
	/* background-color:blue; */
	text-align:left;
	margin:0px;
	padding:0px;
}

.menu {
	width:90%;
	height:50px;
	display:flex;
	background-color:#434fbf;
	border-radius: 1em;
	padding:20px;
	align-items:center;
}

.material-symbols-outlined {
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}

@font-face {
	font-family:"ArchivoBlack-Regular"; 
	/* src:url("/font/ArchivoBlack-Regular.ttf"); */
	src:url("/font/Ethna-Thin.ttf");
	}

@font-face {
	font-family:"GochiHand-Regular"; 
	src:url("/font/GochiHand-Regular.ttf");
	}
	
@font-face {
	font-family:"Comfortaa-VariableFont_wght"; 
	src:url("/font/Comfortaa-VariableFont_wght.ttf");
	}

@font-face {
	font-family:"Roboto"; 
	src:url("/font/RobotoCondensed-Regular.ttf");
	}
	
@font-face {
	font-family:"JackInput"; 
	src:url("/font/JackInput.ttf");
	}

body {
	background-image:url(../images/unsplash.jpg);
	color: white;
}

.titre {
    position: relative; /* Conteneur en position relative */
    padding: 0px;
    display: flex;
    align-items: center;
	margin:0px;
	margin-top:90px;
	margin-bottom:90px;
	border:0 0 0 0;
}

.square {
    width: 450px;
    height: 160px;
    background-color: #434fbf;
    margin-right: 0px; /* Espace entre le carré et le triangle */
    position: absolute; /* Carré en position absolue */
    left: 0px; /* Décalage à partir de la gauche */
	border-radius: 1em 0 0 0;
	padding:0px;
	border-left: 10px solid #E3B505;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 160px solid #434fbf; /* Triangle rectangle au centre */
    position: absolute; /* Triangle en position absolue */
    left: 460px; /* Décalage à partir de la gauche */
	border-radius: 0px;
	padding:0px;
}

.image {
    width: 450px; /* Largeur de l'image */
    height: 160px; /* Hauteur automatique pour conserver les proportions */
    position: absolute; /* Image en position absolue */
    left: 350px; /* Décalage à partir de la droite */
    /* top: 50%; Aligné verticalement au milieu */
    /* transform: translateY(-10%);  Ajustement vertical */
	background-image:url(../images/unsplash.jpg);
	background-size:100%;
	border-radius: 0 1em 1em 0;
	padding:0px;
}

h1
{
	font-family:"ArchivoBlack-Regular";
	padding:10px;
	padding-left:10px;
	background-image:none;
	letter-spacing: 5px;
}

h1.danselibrelyon {
    margin: 0;
	color:white;
    position: absolute; /* Titre en position absolue */
    left: 20px; /* Aligné à gauche */
	font-size: 56;
	color:white;
	font-family:"ArchivoBlack-Regular";
	font-weight:bold;
	letter-spacing: 5px;
}

#Lyon {
	font-size: 32;
	font-family:Roboto;
	font-weight:normal;
	color:#eac831;
}

h2
{
  font-size: 28;
  color:white;
  /* font-family:Helvetica, sans-serif; */
  font-family:"ArchivoBlack-Regular";
  font-weight:bold;
  text-align:left;
  margin:5px;
  padding:10px;
  padding-left:10px;
}

h3
{
  font-size: 20;
  color:#E3B505;
  /* font-family:Helvetica, sans-serif; */
  font-family:"ArchivoBlack-Regular";
  margin:5px;
  padding:10px;
  padding-left:40px;
  font-weight:bold;
}

h4
{
  font-size: 32;
  color:white;
  font-family:"GochiHand-Regular";
  padding:10px;
  margin:5px;
  text-align:center;
  font-weight:normal;
}

.saison {
	position: absolute;
	font-weight:bold;
	top: 205px; 
	left: 290px;
	font-size: 32;
	font-family:"ArchivoBlack-Regular";
	border:4px solid white;
	border-radius:10px;
	padding:3px;
}

#mois
{
	font-weight:bold;
	color:#E3B505;
}

#symbole {
	padding:0px;
	font-size:32;
}

#footer-main {
  padding: 0px;
  margin:0px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 10px;
  margin: 0 auto;
  max-width: 100%;
  padding-left: 0px;
}

#myDIV {
  height:auto;/* 420px; */
  /* background-color:rgba(30,30,30,1); */
  display: grid;
  grid-template-columns: 40px 50px 65px 100px auto;
  grid-auto-rows: 30px 30px auto auto auto auto auto auto 60px;
  grid-template-areas:
		".                   num_jour            jour                .            .           "
		".                   num_jour            jour                .            .           "
		"event               event               event               event        event       "
		"intervenant         intervenant         intervenant         intervenant  intervenant "
		"libelle             libelle             libelle             libelle      libelle     "
		"type                type                type                type         type        "
		"symbole_horaire     horaire             horaire             horaire      horaire     "
		"symbole_lieu        lieu                lieu                lieu         lieu        "
		"inscription         inscription         inscription         inscription  inscription ";  
  gap: 5px;
  margin: 0px;
  align-items:left;
  justify-content: left;
  border: 0px solid grey;
  text-shadow: 1px 1px 2px black;
}

.item {
  padding:10px;	
  padding-left:15px;
}

.mois_entete{
	padding-left:20px;
	border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;
	color:#bf434f;
}

#mois_entete {
	font-size:76;
	padding-top:100px;
    font-family:"Comfortaa-VariableFont_wght";
	font-weight:bold;
	letter-spacing: -5px;
	text-align:center;
	}
	
.num_jour {
  grid-area: num_jour;
  font-family:"Comfortaa-VariableFont_wght"; 
  /* font-family:"JackInput"; */
  /* font-family:"Courrier New"; */
  text-align:right;
  padding-top:17px;
  /* background-color: red;   */
  font-size:48px;	
  /* text-align: right; */
}

.jour {
  grid-area: jour;
  font-family:"Comfortaa-VariableFont_wght";
  font-size: 24;
  font-weight: normal;  
  padding-left:5px;
  display:flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: start;	
}

.mois {
  grid-area: mois;
  font-family:"Comfortaa-VariableFont_wght";
  font-size: 24;
  font-weight: normal;  
  /* align-self:end; */
}

.event {
  grid-area: event;
  font-size: 32;	
  font-family:"ArchivoBlack-Regular";
  font-weight: bold;
  letter-spacing: 2px;
}

.inscription {
  grid-area: inscription;
  display:flex;
  align-items: center;
  justify-content: left;	
  padding-left:50px;  
}

a#lien_inscription
{
	font-size:20;
	text-align:center;
	font-family:"Comfortaa-VariableFont_wght";
	font-weight:bold;
	color:#E3B505;
	background-color:#434fbf;
	border: 2px solid #E3B505;
	padding:10px;
	text-decoration:none;
	border-radius: 1em;
	/* filter : brightness(1); */
}

a#lien_inscription:hover
{
	color:white;
	background-color:#434fbf;
	border: 2px solid white;
	text-decoration:underline;
	filter : brightness(0.9);
}

.symbole_horaire {
  grid-area: symbole_horaire;
  color:#E3B505;
  text-align:center;
}

.horaire {
  grid-area: horaire;
  text-align:left;
  color:#E3B505;
  font-weight: normal;
  font-family:"GochiHand-Regular";
  font-size: 24;
}

.symbole_lieu {
  grid-area: symbole_lieu;  
  text-align:center;
}

.lieu {
  grid-area: lieu;
  text-align:left;
  font-size: 16;
  font-family:"Comfortaa-VariableFont_wght";
  font-weight:bold;
}

.type {
  grid-area: type;
  font-size: 24;
  font-family:"GochiHand-Regular";
}

.intervenant {
  grid-area: intervenant;
  font-family:"GochiHand-Regular";
  color:#E3B505;
  font-size: 32;
  font-weight: normal;
}

.libelle {
  grid-area: libelle;
  font-family:"Comfortaa-VariableFont_wght";
  font-size:24;
  font-weight:bold;
}

p#texte {
	font-family:"Comfortaa-VariableFont_wght";
	font-size: 24;
	width:80%;
	padding:20px;
	background-color:#434fbf;
	text-align:justify;
	font-weight:normal;
	line-height:1.5em;
	border-radius: 1em;
	word-spacing:0px;
	}	
	
a
{
	color:#E3B505;
}

a:hover
{
	color:white;
	text-decoration:underline;
}

a#lien_menu
{
	font-size:16;
	font-family:"Comfortaa-VariableFont_wght";
	font-weight:bold;
	color:white;
	background-color:#bf434f;
	border: 5px solid white;
	padding:10px;
	text-decoration:none;
	border-radius: 1em;
}

a#lien_menu:hover
{
	color:#E3B505;
	background-color:#434fbf;
	border: 5px solid #E3B505;
	text-decoration:underline;
	border-radius: 1em;
}

div#bandeau {
	width: fit-content;
	background-color:#434fbf;
	margin:0px;
	border-left: 10px solid #E3B505;
	border-radius: 0 1em 1em 1em;
	}
	
div#bandeau_bas {
	width:fit-content;
	color:#FFFFFF;
	background-color:#434fbf;
	text-align:center;
	}

@media only screen and (max-width: 1000px) {

	.footer-grid {
	  grid-template-columns: minmax(500px, 1fr);
	}	
	
	#myDIV {
	  /* grid-template-columns: 80px 50px 140px auto; */
	  /* grid-auto-rows: 60px 60px auto auto auto auto auto auto 130px; */
	  /* grid-template-areas: */
			/* "num_jour            num_jour            jour         .        " */
			/* "num_jour            num_jour            jour         .        " */
			/* "event               event               event        event       " */
			/* "intervenant         intervenant         intervenant  intervenant " */
			/* "libelle             libelle             libelle      libelle     " */
			/* "type                type                type         type        " */
			/* "symbole_horaire     horaire             horaire      horaire     " */
			/* "symbole_lieu        lieu                lieu         lieu        " */
			/* "inscription         inscription         inscription  inscription ";   */
	  grid-template-columns: 90px 60px 105px 100px auto;
	  grid-auto-rows: 60px 60px auto auto auto auto auto auto 110px;
	  grid-template-areas:
			".                   .                   num_jour            jour         .        "
			".                   .                   num_jour            jour         .        "
			"event               event               event               event        event       "
			"intervenant         intervenant         intervenant         intervenant  intervenant "
			"libelle             libelle             libelle             libelle      libelle     "
			"type                type                type                type         type        "
			"symbole_horaire     horaire             horaire             horaire      horaire     "
			"symbole_lieu        lieu                lieu                lieu         lieu        "
			"inscription         inscription         inscription         inscription  inscription "; 			
	  gap: 3px;
	  /* background-color: yellow; */
	  padding: 10px;
	  padding-left: 20px;
	  margin: 10px;
	  align-items:normal;
	  border-left: 0px solid #bf434f;
	  border-bottom: 0px solid #bf434f;
	}

	.triangle {
		left: 459px; /* Décalage à partir de la gauche */
	}	
	
	.item {
	  padding:10px;	
	  padding-left:10px;
	}
	
	
	#mois_entete {
	padding-top:0px;
	margin:100px;
	}
	
	.num_jour {
	  padding-top:30px;
	  font-size:90;
	}	

	.jour {
		font-size:54;
		padding-left:10px;
	}			

	.horaire {
	  font-size: 63;
	}
	
	.intervenant {
	  grid-area: intervenant;
	  font-size: 63;
	}	

	.inscription {
	  font-size: 54;
	  text-align:center;
	  padding:30px;
      display:flex;
      align-items: center;
      justify-content: center;		  
	}
	
	.type {
	  font-size: 54;
	}	
	
	.lieu {
	  font-size: 36;
	}	
	
	.event {
	  font-size: 63px;
	}	
	
	.libelle {
	  font-size: 45px;
	}	
	
	div#bandeau {
		width:95%;
	}
	
	p#texte {
		font-size: 45px;
		width:95%;
		}	

	p#trait { 
		width:95%;
		border:3px solid #E3B505;
	}

	div#bandeau_bas {
		width:95%;
		}		
		
	h1.danselibrelyon
	{
	  font-size: 63;
	  line-height:60px;
	  letter-spacing: 3px;
	}  
	
	#Lyon {
		font-size: 36;	
	}
	
	h1
	{
	  font-size: 58.5;
	  line-height:60px;
	}	
	
	h2
	{
	  font-size: 31.5;
	}

	h3
	{
	  font-size: 22.5;
	}	
	
	#symbole {
		padding:0px;
		font-size:72;
	}
	
	a#lien_inscription {
		font-size:36;
		padding:20px;
	}	
	
	a#lien_inscription:hover {
		padding:20px;
	}		
	
	a#lien_menu {
	font-size:36;
	}
	
}