* {
	margin: 0;
	padding: 0;
}

.bloquage{
	display: none;
}

@media (max-width: 1100px) {
	#site {
		display: none;
	}
	.bloquage{
		display: block !important;
		position: absolute;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		background: linear-gradient(to right, #141E30, #243B55);
		height: 150%;
		width: 100%;
		flex-direction: column;
	    display: flex;
    	align-items: center;
    	justify-content: center;
    	font-size: 24px;
    	text-align: center;
		font-family: sans-serif;
    	padding-left: 5%;
		padding-right: 5%;
		padding-top: 10%;
		color: #ffff;
	}
	.bloquage h1{
		margin-bottom: 150px;
	}
	.bloquage img{
		width: 50%;
		margin-bottom: 120px;
	}
	img:hover{
		transform: scale(1) !important;
	}
	.bloquage .bouttons{
		text-align: center;	
		height: 30px;
		width: 60%;
		justify-content: center;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 15px; /*arrondit les angles*/
		padding: 10px;
		cursor: pointer; /*met le curseur en mode click*/
		display: flex;
		margin-left: 20%;
	}
	.bouttons a{
		color: rgb(255, 255, 255);
		text-align: center;
		text-decoration: none; /*pour enlever le soulignage*/
		font-family: "Raleway", sans-serif;
		font-style: normal;
		font-weight: 200;
		font-size: x-large;
	}
	.bouttons:hover {
	    transform: scale(1.08);
	    background: rgba(255, 255, 255, 0.23);
	    transition: transform 0.2s, opacity 0.3s; /* temps de latence pour que ca fasse doucement l'agrandissement et le changement de couleur*/
    }
}

html{
	scroll-behavior: smooth;
}

body.compte{
	background-image: url("images/FondPlatMauvais.png");
}

/*Acceuil*/

img#nohover:hover {
	transform: none;
}

.imageacceuil{
	width: 100%;
}

.Avis{
	height: 50px;
	margin-left: 400px;
}

.etagere{
	height: 450px;
	position: absolute;
	margin-top: 100px;
}

.imagepresentation{
	margin-left: 30px;
}

.TitreAcceuil{
	color: #4f205d;
	font-family: sans-serif;
	font-weight: bold;
	font-family: "Raleway", sans-serif;
	margin-top: 100px;
	margin-left: 500px;
	font-size: 30px;
	text-decoration: overline;
	text-decoration-color: #ED81A8;
}

.bannière1{
	color:#fff;
	font-family: sans-serif;
	background-color: #1ac494;
	height: 70px;
	padding-left: 300px;
	padding-top: 15px;
	position: relative;
}

.bannière1b{
	height: 70px;
	width: 70px;
	background-color: #1ac494;
    position: absolute;
	margin-left: 300px;
    transform: rotate(180deg);
	transform-origin: center center;
}

/*---------------------------------------------------------------------------*/

.grille{
	display: grid;
	grid-template-columns: 250px 250px 250px 250px 250px; 
    margin-left: 150px;
	margin-top: 30px;
	gap: 19px; /*espaces entres les bouttons*/
    margin-right: 100px;
}

.plat{
	width: 200px;
	height: 200px;
	border-radius: 15px;
}

.head{
    height: 6pc;
	width: 96.5%;              /* pour que ca prenne toute la largeur toute la largeur */
	background-color: rgba(248, 249, 250, 1);
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
	/* position: fixed;             ne bouge plus meme si on descend dans la page */ 
	display: flex;              /* aligne tous les elements sur une ligne */
	align-items: center;        /* centre verticalement tous les elemenbts */
}

.head .house{
	padding-left: 10px;
    width: 40px;   /* largeur du logo */
    height: auto;   /* garde les proportions */
	align-items: bottom;
}

.bandeaupromo{
	background-color: rgb(190, 3, 73);
	text-align: center;
	height: 50px;
	color: rgb(255, 255, 255);
	font-family: "Raleway", sans-serif;
	padding-top: 5px;
}

.bandeaupromo p{
	text-align: right;
}

.logo{
    height: 90px;
	margin-left: 20px;
    margin-right: 240px;
}

h2{
	text-decoration: underline;
	font-family: "Ralway", sans-serif;
}

h3{
	color:rgb(41, 41, 41);
	font-weight: bold;
	font-family: "Raleway", sans-serif;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 20px;
}

a {
	text-decoration: none;
}

img:hover { /* pour metre les images en gris quand on passe dessus*/
	transform: scale(1.1);
	transition: transform 0.2s; /* temps de latence pour que ca fasse doucement l'agrandissement et le changement de couleur*/
}

.menu { 
	position: relative; 
	display: inline-block;
	cursor: pointer;  /* curseur en mode pointer au survol */ 
	font-family: "Arial", sans-serif;
}

.sousmenu {
    display: none; /* est cachée par défaut. */
    position: absolute;
    background: rgba(255, 255, 255, 0.788);
	backdrop-filter: blur(10px); /* Floute le fond */
    padding: 5px 10px;
    list-style: none; /*supprime les trucs par défaut de la liste*/
    border-radius: 5px; /* arondir les angles*/
	box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* ombre */
    min-width: 120px;                  /* largeur minimale */
}

.menu:hover .sousmenu { 
	display: block; /* Quand on survole le menu le sous menu apparait*/
} 

.sousmenu li { 
	margin: 5px 0;  /* marge entre les elements de la liste du sous menu*/
}

.sousmenu li a {
  padding: 8px 15px;                  /* marges pour centrer les liens */
  color: #333;
  text-decoration: none;              /* supprime soulignement*/
}

.sousmenu li a:hover {
  color:rgb(190, 3, 73);
  font-weight: bold;
}

/* MOULA */

.VientLàLaMoula{
    width: 800px;
    height: auto;
	position: absolute;
	top: 150px;    /* Distance par rapport au haut */
	left: 400px;   /* Distance par rapport à la gauche */
	z-index: 10;  /* Assure que la div est au-dessus des autres */
	background-color: rgba(248, 249, 250, 1);
	padding: 50px;
	display: none;
	border-radius: 5px;
	box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.25);
}

.VientLàLaMoula h3{
	margin: 0px 0px 20px 250px; /* H D B G*/
	text-decoration: overline;
}

.Case-1{
	margin: 0px 50px 10px 0px;
}

#NumCarte{
	width: 200px;
}

label{
    font-weight: bold;
    font-size: 18px;
    margin-right: 10px;
    color: #777;
	font-family: sans-serif;
}
.VientLàLaMoula input{  /*.VientLàLaMoula input[type="text"]{*/
    padding: 10px;
    font-size: 20px;
    margin-right: 20px;
    border: 2px solid #ddd;
    border-radius: 3px;
}

.button-OK{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 11px;
    background-color: rgb(190, 3, 73);
    border-style: none;
    border-radius: 3px;
	float: right;
	margin-top: 12px;
}
.button-OK:hover{
    color: #fff;
    background-color: #444;
	cursor: pointer;
}

.VientLàLaMoula p{
	font-family: "Ralway", sans-serif;
	font-weight: bold;
	text-indent: 30px; /* Alinéah */
	color: #777;
	margin-bottom: 25px;
}

/* FOOTER*/

footer{
	margin-top: 35px;
    height: 100px;
    background-color: #4f205de1;
}

footer h1{
    color:#fff;
    text-align:center;
    padding-top: 15px;
}

.Copyright{
    text-align: center;
    font-weight: bold;
    padding-top: 5px;
    color: #c298cfe1;
}

a:hover{
	transform: scale(1.1);
	transition: transform 0.2s;
}

/* CONNEXION */

.divconnexion{
	height: 600px;
	width: 400px;
	padding-top: 100px;
	padding-left: 650px;
	margin-bottom: 100px;
}

.divconnexion h1{
	color: #4f205d;
	font-size: 30px;
	font-family: "Ralway", sans-serif;
	margin-left: 50px;
	margin-bottom: 30px;
}

.divconnexion h2{
	color: #4f205d;
	font-size: 17px;
	font-weight: 400;
	font-family: "Ralway", sans-serif;
	text-decoration: none;
	margin-left: 15px;
	margin-top: 150px;
	margin-bottom: 15px;
}

.divconnexion p{
	font-size: small;
	font-family: "Ralway", sans-serif;
	text-decoration: none;
	margin-left: 32px;
}

.Case-2{
	margin-bottom: 30px;
}

.divconnexion input{
    padding: 10px;
    font-size: 20px;
    margin-right: 20px;
    border: none;                
    border-bottom: 1px solid rgb(190, 3, 73);
}

.divconnexion input:focus {
	outline: none;
}

.button-Soumettre{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 11px;
    background-color: rgb(190, 3, 73);
    border-style: none;
    border-radius: 13px;
	margin-left: 65px;
}
.button-Soumettre:hover{
    color: #fff;
    background-color: #444;
	cursor: pointer;
}

.eye {
	position: absolute;
    transform: translate(-200%, 35%);
    cursor: pointer;
    font-size: 18px;
}

/* conseils */

#Conseils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 40px;
}

.Texte {
  width: 300px;
  background-color: #ddd;
  border-radius: 10px;
  padding: 15px;
}

#Conseils h2{
	color: #4f205d;
	font-size: 25px;
	font-family: "Ralway", sans-serif;
	text-decoration: none;
	margin-bottom: 10px;
}

#Conseils p{
	color: #000000;
	font-family: "Ralway", sans-serif;
	text-decoration: none;
	text-indent: 15px; /* Alinéah */
}