/* CSS Document */


body {

    /* On définit une hauteur minimale pour que le dégradé couvre tout l'écran */
    min-height: 100vh;
    margin: 0;
    
    /* Le dégradé : 
       - 'to bottom' indique la direction
       - #02c4ff est le bleu officiel Fluff
       - #ffffff est le blanc */
    background: linear-gradient(to bottom, #02c4ff 0%, #ffffff 100%);
    
    /* Optionnel : fixe le fond pour qu'il ne défile pas avec le texte */
    background-attachment: fixed;
}


.titre {
     margin-left:auto;
	 margin-right:auto;
	 text-align: center;
	 
} 

.navigation-principale {
  
    padding: 10px 0;
    text-align: center;
}

.navigation-principale ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;       /* Aligne les éléments */
    justify-content: center;
    flex-wrap: wrap;    /* Très important : permet le passage à la ligne sur mobile */
}

.navigation-principale li {
    margin: 5px 5px;
    border-right: 2px solid #FF0000; /* Crée les séparateurs rouges */
    padding-right: 5px;
}

.navigation-principale li:last-child {
    border-right: none; /* Enlève le dernier trait vertical */
}

.navigation-principale a {
    color: #FFFFFF;
    text-decoration: none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: bold;
}

.navigation-principale a:hover {
    text-decoration:none;
   color:#FF0000;/* Changement de couleur au survol (Rouge Fluff) */
   background: #FFFFFF;
   border-radius: 2px;
} 

.menu {
    width: 900px;
    height: 20px;
    margin: 0 auto;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: red;
    text-align: center;
	}
	
.menu a{
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	font-size:16px;
	}

.menu a:hover /* Apparence au survol des liens */
{
   text-decoration:none;
   color:#FF0000;
   background: #FFFFFF;
   border-radius: 2px;
}


.pub_haute {
    width: 729px;
    height: 91px;
    margin: 0 auto;
}
	

.container {
	width: 900px;
	margin: 2px auto;
	background-color: #fff;
	color: #5599FF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align: justify;
	border: 3px solid red;
	border-radius: 10px;
	padding: 20px;
	min-height: 720px;
	horizontal-align: middle;
} 

.photorecettes {
 position:absolute;
 width:305px;
 margin-right:15px;
 }

.centrer{
  text-align: center;
}
.echo{
  text-align: center;
  horizontal-align: middle;
  
}


em { 
  color: #FF0000;
  font-size: 1.4em;
  font-weight:bold;
}

table
{
    border:3px solid red;
	border-radius: 10px;
    border-collapse: collapse; 
}	
th
{
   background-color: #0099FF;
   color: white;
   font-size: 1.1em;
   text-align:center;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td
{
    border: 1px solid #0099FF;
	padding: 5px;
	text-align: center;
}
 #gauche {
    float: left;
    width: 150px;
	margin-top:20px;
    margin-right: 180px;
}
 #droite {
	float: right;
	width: 250px;
	margin: 5px;
	margin-left : 15px;
	margin-top:20px;
	border: 3px solid red;
	border-radius: 10px;
}
 #droite2 {
   float: right;
	width: auto;
	margin: 5px;
	margin-left : 15px;
	margin-top:20px;
}

.bouton{
width:200px;
height:30px;
text-align: center;
display:block;
line-height:25px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border: 1px solid red;
    background: #febccc; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYmNjYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZlOTBhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg1JSIgc3RvcC1jb2xvcj0iI2ZmNWQ4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #febccc 0%, #fe90ac 45%, #ff5d85 85%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febccc), color-stop(45%,#fe90ac), color-stop(85%,#ff5d85)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #febccc 0%,#fe90ac 45%,#ff5d85 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #febccc 0%,#fe90ac 45%,#ff5d85 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #febccc 0%,#fe90ac 45%,#ff5d85 85%); /* IE10+ */
background: linear-gradient(to bottom, #febccc 0%,#fe90ac 45%,#ff5d85 85%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febccc', endColorstr='#ff5d85',GradientType=0 ); /* IE6-8 */
}
.bouton a{
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	text-align: center;
	font-size:16px;
	
	}
	.bouton a:hover 
	{
	text-decoration:none;
	color:#FF0000;
	}
	.bouton:hover /* Apparence au survol des liens */
{
   text-decoration: none;
   border-radius: 10px;
border: 1px solid red;
   }
   
   .formulaire
{
    background-color: red;
}
strong {
 color: #FF0000;
 font-size: 1.1em;
 font-weight:bold;
 }