/* CSS Document */

	body{
		font-family:Helvetica, Arial, sans-serif;
		background-image: -webkit-linear-gradient(top, #FAC5B4 0%, #FFEDE0 100%);/* Chrome10 et suivants - Safari 5.1 et suivants */
		background-image:    -moz-linear-gradient(top, #FAC5B4 0%, #FFEDE0 100%);/* Firefox 3.6 et suivants */ 
		background-image:     -ms-linear-gradient(top, #FAC5B4 0%, #FFEDE0 100%);/* IE 10 et suivants */ 
		background-image:      -o-linear-gradient(top, #FAC5B4 0%, #FFEDE0 100%);/* Opera 11.10 et suivant */
		background-image:         linear-gradient(top, #FAC5B4 0%, #FFEDE0 100%);	
	}
	
  	img{ border:0px; }
  
 /* Style pour le tableau */
        .photo-table {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 20px;
        }

        /* Style pour chaque photo */
        .photo-item {
            text-align: center;
        }

        .photo-item img {
            width: 400px;
            height: 300px;
            object-fit: cover;
        }

        /* Style pour les commentaires sous les photos */
        .comment {
            margin-top: 10px;
            font-family:Helvetica, Arial, sans-serif;
		          font-size:16px;		
		          font-weight:bold;
            color: blue;
        }

        /* Ajout de réactivité pour petits écrans */
        @media (max-width: 768px) {
            .photo-table {
                grid-template-columns: 1fr;
            }

            .photo-item img {
                width: 100%;
                height: auto;
            }
        }


  	#global{
		width:1200px;
		height:auto;
		margin:auto;
    }

  	#entete{
    	width:1000px;
    	margin:auto;
    	border:0;
	}
	
	#menunav{
		width:auto;
		height:auto;
	}
	
	#debut{
		width:auto;
		height:auto;
		padding:8px;
	}

	#news{
		width:auto;
		height:auto;
		padding:8px;
	}
	
	#pied{
		width:1200px;
		height:auto;
	}
	
	#trait{
		border-top:1px solid grey;
		width:100%;
	}
	
/*Navigation Menu*/
	
#nav{
padding:0;
margin:0;
list-style:none;
line-height:2em;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
text-align:center;
}

#nav ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
}

#nav ul li{
display: inherit;
border-radius:0;
}

#nav a{
text-decoration:none;
padding:8px 32px;
color:#fff;
}
#nav ul a{
padding:0px 0px;
}

#nav li{
display:inline-block;
width:164px;
position:relative;
border-radius:8px 8px 0 0;
}

#nav li:hover li a{
text-align:left;
color:#fff;
text-transform:inherit;
}
#nav li:hover a, #nav li li:hover a {
color:#000000;
}

#nav ul li:hover{
border-radius:0;
}
#nav ul li:last-child{
border-radius:0 0 8px 8px;
}

#nav li:hover ul{
width:150px;
max-height: inherit;
text-align:left;
}

/* background des liens menus */
#nav li:first-child{
background-color: #65537A;
background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
}
#nav li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}

#nav li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}

#nav li:nth-child(4){
background-color: #ffff33;
background-image:-webkit-linear-gradient(top, #ffff33 0%, #cc3300 100%);
background-image:linear-gradient(to bottom, #ffff33 0%, #cc3300 100%);
}

#nav li:nth-child(5){
background-color: #66ff66;
background-image:-webkit-linear-gradient(top, #66ff66 0%, #006600 100%);
background-image:linear-gradient(to bottom, #66ff66 0%, #006600 100%);
}

#nav li:last-child{
background-color: #CFFF6A;
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
}
/* background des liens sous menus */
#nav li:first-child li{
background:#2A2333;
}
#nav li:nth-child(2) li{
background:#333A40;
}
#nav li:nth-child(3) li{
background:#9F391A;
}
#nav li:nth-child(4) li{
background:#cc3300;
}
#nav li:nth-child(5) li{
background:#006600;
}

#nav li:last-child li{
background:#677F35;
}
/* background des liens menus et sous menus au survol */
#nav li:first-child:hover, #nav li:first-child li:hover{
background:#65537A;
}
#nav li:nth-child(2):hover, #nav li:nth-child(2) li:hover{
background:#729EBF;
}
#nav li:nth-child(3):hover, #nav li:nth-child(3) li:hover{
background:#F6AD1A;
}
#nav li:nth-child(4):hover, #nav li:nth-child(4) li:hover{
background:#ffff33;
}
#nav li:nth-child(5):hover, #nav li:nth-child(5) li:hover{
background:#66ff66;
}

#nav li:last-child:hover, #nav li:last-child li:hover{
background:#CFFF6A;
}

/*Fin Navigation Menu*/

/*Début Navigation hors menu*/
#debut a, #news a {
		text-decoration:none;
	}

#debut a:hover, #news a:hover {
		color: #ffffff;
		background-color: #018800;
		}
/*Fin Navigation hors Menu*/

/*Début navigation menu tablettes*/
#menutab li a, #menutab li {
		font-size:16px;
		font-weight:bold;
		line-height:1.5em;
	}

#menutab li a:hover  {
		color: #ffffff;
		background-color: #ff6600;
		}
/*Fin navigation menu tablettes*/
	
	.colonnes{
	 clear:left;
		clear:right;
		width:auto;
		padding:3px;
	}

	.troiscolonnes {
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
		-moz-column-count: 3; /* Firefox */
		column-count: 3;
		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;
		-webkit-column-rule: 2px outset #6666cc; /* Chrome, Safari, Opera */
		-moz-column-rule: 2px outset #6666cc; /* Firefox */
		column-rule: 2px outset #6666cc;
}
	
	.separateur{
		width:900px;
		height:5px;
		clear:both;
	}
	.gris{color:#666666;}
	.grisg{color:#000000; font-weight:bold; background-color: #CCCCCC;}
	.noir{color:#000000;}
	.bleu{color:#0068B1;}
	.bleug{color:#000066;}
	.red {color:#FF0000; font-weight:bold;}
	
	.bords{
		border-left:1px solid #B7B7B7;
		border-right:1px solid #B7B7B7;
	}
 
 	.trait{
		border-top:1px solid grey;
		width:100%;
	}
 
	.fs10{
		font-family:Helvetica, Arial, sans-serif;
		font-size:10px;
	}
	.fs12{
		font-family:Helvetica, Arial, sans-serif;
		font-size:12px;
	}
	.fs14{
		font-family:Helvetica, Arial, sans-serif;
		font-size:14px;
		font-weight:normal;
	}
	.fs16{
		font-family:Helvetica, Arial, sans-serif;
		font-size:16px;		
		font-weight:bold;
	}

	.fs18{
		font-family:Helvetica, Arial, sans-serif;
		font-size:18px;
		font-weight:bold;
	}
	
	.fs24{
		font-family:Helvetica, Arial, sans-serif;
		font-size:24px;
		font-weight:bold;
	}
	
	.center{ text-align:center; }
	.fleft{ float:left; width:170px; height:100;}
	.fright{ float:right; width:660px; height:100;}
	.fleft1{ float:left; width:42%; height:auto;}
 .fright1{ float:right; width:58%; height:auto;}
	.fgauche{ float:left; width:170px; height:235px;}
	.fdroite{ float:right; width:660px; height:235px;}
	.flottantdroit {float:right; width:auto; padding:10px; padding-left: 10px;}
	.flottantgauche {float:left; width:auto; padding:10px; padding-right: 10px;}
	.flottantstop {clear:both;}
	
	.survolimage span {visibility: hidden;}
 	.survolimage img:hover + span {visibility: visible;}

<!-- Formulaire -->

form {
 background-color:#FAFAFA;
 padding:10px;
 width:auto;
 }
fieldset {
 padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #DF3F3F;
 }
legend {
 color:#DF3F3F;
 font-weight:bold
 }
label {
 margin-top:10px;
 display:block;
 }
label.inline {
 display:inline;
 margin-right:50px;
 }
input, textarea, select, option {
 background-color:#FFF3F3;
 }
input, textarea, select {
 padding:5px;
 border:1px solid #F5C5C5;
 border-radius:5px;
 width:400px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }
select {
 margin-top:10px;
 }
input[type=radio] {
 background-color:transparent;
 border:none;
 width:10px;
 }
input[type=submit], input[type=reset] {
 width:150px;
 margin-left:5px;
 box-shadow:1px 1px 1px #D83F3D;
 cursor:pointer;
 }