/************************
*****Background**********
************************/
body{
	padding: 0 ;
	text-align: center ;
	font: 0.9em Geneva, "Trebuchet MS", Verdana, helvetica, sans-serif ;
	margin: 1.55rem; /* Pour centrer un objet -> margin: auto; */
	background-image:url("images/background/purty_wood.png");
}
@media (max-width: 480px) {
	body{
		font: 0.7em Geneva, "Trebuchet MS", Verdana, helvetica, sans-serif ;
	}
}
/************************
*****En-tête*************
************************/
header{
	background-image:url("images/accueil/frise.jpg");
	background-size: contain;
	height:11rem; /* 175 px */
	background-repeat:repeat-x;
	display: block;
}
@media (max-width: 300px) {
	header{
		height:3rem;
	}
}
@media (min-width: 301px) and (max-width: 640px) {
	header{
		height:5rem;
	}
}
@media (min-width: 641px) and (max-width: 780px) {
	header{
		height:8rem;
	}
}
/************************
*****Menu principal******
************************/
nav{
	background-color: #AD6F1F; /* Couleur de menu en dehors de la flexbox */
	margin-top: 0.5em; /* Ecartement de la barre de menu avec la frise */
	margin-bottom: 0.5em; /* Ecartement de la barre de menu avec le contenu */
}
#main-nav, #main-nav ul {
    padding: 0;
    margin: 0;
    list-style: none; /* enlève les puces de la liste */
}
#main-nav{
    text-align: center; /* menu centré dans la page */
	width:77%;
	margin: 0 auto ;
	display: flex; /* flexbox */
	flex-wrap: wrap; /* flexbox */
	justify-content: space-between; /* flexbox */ 
}
#main-nav li{
	display: inline-block; /* menu placé horizontalement */
}
#main-nav ul li{
	display: inherit; /* sous-menu placé verticalement */
}
#main-nav a {
    text-decoration: none; /* supprime le souligné sur les liens */
    display: block;
	color:#000; /* noir */
}
#main-nav ul{
	display: none; /* on cache les sous-menus */
	text-align: left; /* sous-menus alignés à gauche sous leur menu */
	position: absolute; /* les sous-menus se déroulent par-dessus la suite de la page */
	-moz-transition: .8s all .3s;
	-webkit-transition: .8s all .3s;
	transition: .8s all .3s;
}
#main-nav li:hover ul{
	display: block; /* on montre les sous-menus au survol du li */
}
/* Background de la barre du menu */
#main-nav{
	background: #AD6F1F; /* Couleur de la barre de menu à côté des boutons */
	margin-top: 5px;
	margin-bottom: 5px;
}
/* Background des liens du menu */
#main-nav li{
	background: #AD6F1F;
}
/* Background des liens du sous-menu */
#main-nav li li{
	background: #AD6F1F;
	opacity: 1.0;
}
/* Background des liens menus et sous menus au survol */
#main-nav li:hover, #main-nav li li:hover{
	background: white;
}
/* Les a href */
#main-nav a{
	color: white; /* Couleur de police du menu */
	padding: 0.5rem 0.5rem;
    font-size: 1.4rem;
    font-weight: bold;
	display: flex; /* flexbox */
    align-items: flex-start; /* flexbox */
}
@media (max-width: 480px) {
	#main-nav a{
		font-size: 1.1rem;
	}
}
#main-nav a:hover{
	color: #AD6F1F; /* Couleur de police du menu au survol de la souris */
}
#main-nav li:hover a{
	color: #AD6F1F; /* Couleur de police du niveau 1 quand niveau 2 déplié pour la case à la jonction menu/sous-menu */
}
#main-nav li:hover li a{
	color: white; /* Couleur de police du sous-menu déroulant */
	font-size: 1.2em;
}
#main-nav li:hover li a:hover{
	color: #AD6F1F; /* Couleur de police du sous-menu au survol de la souris */
}

/************************
******Menu secondaire****
************************/
#menu-gauche{
	float:left;
	text-align:left;
	max-width:12%;
}
#menu-gauche img{
	width:85%;
	border: 1px solid #AD6F1F;
}
/************************
****Barre de recherche***
************************/
#recherche {
	margin-top:0.6em;
}
#recherche input{
	width: 86%;
	border: 1px solid #AD6F1F; /* Bordure autour du bouton de recherche */
}
#rechercheAleatoire {
	margin-top:0.7em;
}
	
/************************
*****Contenu*************
************************/
div#content{
	width: 75% ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #AD6F1F;
	display:block;
	background-color: #fff; /* blanc */
	padding-bottom: 25px;
	padding-left: 1em;
	padding-right: 1em;
}
.center{
	text-align:center;
}

/************************
*****Pied de page********
************************/
footer{
	font-size:1em;
}
#hautPage{
	font-size:1.07em;
}
#gabarit_copyright{
	text-align:center;
}
#gabarit_pied{
	text-align:right;
}
/************************
*****Balises de texte****
************************/
h1, h2, h3, h4, h5, h6 {
	text-align:center;
	font-weight: bold;
}
h1{
	color:#6B0D0D;
	font-size:2.25em;
}
h3{
	text-align: left;
}
hr{
	width:100%;
	color:#black;
}
@media (max-width: 480px) {
	h1{
		font-size:1.75em;
	}
}
p{
	text-align : left;
}
.red{
	color:red;
}
/************************
*******Formulaires*******
************************/
form{
	margin-left:auto; 
    margin-right:auto; /* Ces deux lignes permettent de centrer les formulaires */
}
/************************
*********Accueil*********
************************/
.imageFouloir{
	padding-left: 1em;
}
.texteAccueil p{
	padding-left: 1em;
	padding-right: 1em;
}
#banderole_bas_accueil{
	padding-left: 1em;
	padding-right: 1em;
}
#banderole_bas_accueil img{
	float: bottom;
	height: 304px;
}
/************************
********Tableaux********
************************/
table, th, td {
   border: 1px solid black;
}

table {
    width: 95%;
	margin-left:auto; 
    margin-right:auto;
}

th{
	text-align : center;
}
/** Tableaux d'outils **/
td.nomOutil {
	width: 20%;
	text-align : center;
}
td.photoOutil {
	width: auto;
	text-align : center;
}
.photoOutil img{
	height:154px;
	width: auto;
	max-width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
}
td.categoriesOutil {
	width: 25%;
}
.categoriesOutil p{
	text-align : left;
	padding-left: 0.5em;
	padding-right: 0.25em;
}
/** Tableaux d'éléments **/
.elements-grid-container{
	display: grid;
	width: 95%;
	margin-left:auto; 
    margin-right:auto;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0.2%;
	padding: 0.2%;
	padding-bottom: 0.7%;
	text-align: center
}
.element-grid-item{
	border: 1px solid black;
}
.element-grid-item-img{
	max-width: 100%;
	padding-top: 25px;
	padding-bottom: 5px;
	height:124px;
}

/* Mobile View */
@media screen and (max-width:240px) {
	.elements-grid-container{
	  grid-template-columns: repeat(1,1fr);
	}
	.element-grid-item-img{
		height:104px;
	}
}
@media screen and (min-width:240px) and (max-width:480px) {
	.elements-grid-container{
	  grid-template-columns: repeat(2,1fr);
	}
	.element-grid-item-img{
		height:104px;
	}
}
@media screen and (min-width:481px) and (max-width:640px) {
	.elements-grid-container{
	  grid-template-columns: repeat(2,1fr);
	}
}

/* Tablet View */
@media screen and (min-width:641px) and (max-width:768px) {
	.elements-grid-container{
	  grid-template-columns: repeat(3,1fr);
	}
}

/* Laptop View */
@media screen and (min-width:769px) and (max-width:1024px) {
	.elements-grid-container{
	  grid-template-columns: repeat(4,1fr);
	}
}

/** Tableaux de photos manquantes **/
table.photos_manquantes{
	border: none;
}
tr.photos_manquantes {
	border: none;
}
td.photos_manquantes{
	border: none;
}
/************************
*******Fiche outil*******
************************/
#photoOutil{
	height:250px;
	max-width:95%;
}
#commentaireOutil{
	text-align:left;
	padding-left: 1em;
	padding-right: 1em;
}
#categoriesOutil{
	padding-top: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
}
/************************
*****Barre alphabet******
************************/
#barre_lettres{
	text-align: center;
}
/************************
*****Pagination**********
************************/
.pagination {
	font:0.75rem Arial, Helvetica, sans-serif;
	margin:40px 0 35px 0; /* top right bottom left */
	text-align: center;
}
 
.pagination a {
	background:#fff;
	border:1px solid #6B0D0D;
	color: #6B0D0D;
	margin:2px;
	padding:.2em .4em;
	text-decoration:none
}
 
.pagination a:hover {
	background:#fff;
	border:1px solid #AD6F1F;
	color:#AD6F1F;
}
 
.pagination span.inactive {
	background:#fff;
	border:1px solid #f0f0ff;
	color:#f0f0ff;
	margin:2px;
	padding:.2em .4em
}
 
.pagination span.active {
	background:#f9e8da;
	border:1px solid #AD6F1F;
	color:#AD6F1F;
	font-weight:bold;
	margin:2px;
	padding:.2em .4em
}

/************************
******Formulaires********
************************/
/* Contact */
#contact label{
	display:table-cell;
}
#contact{
	margin-left:4%;
	margin-bottom: 2em;
}
.red_star{
	color:#ff0000;
}
.objet{
	display:none;
}
/* Connexion */
#connexion label{
	display: inline-block;
	margin-right: 1em;
}
#connexion {
	margin-top: 5em;
	margin-bottom: 5em;
	margin-left: 12%;
}
/************************
*****Fouloir*************
************************/
.visiteFouloir img{
	text-align:center;
}
div#vue_mur_fouloir img{
	vertical-align: middle;
}
.groupeOutils area:hover{
	border: 1px solid white;
}
/************************
*****Visite virtuelle****
************************/
.flecheVisite{
	height:32px;
}
/************************
*********Images**********
************************/
.imgComplement150{
	height:150px;
}
.imgComplement200{
	height:200px;
}
.imgComplement250{
	height:250px;
}
.imgComplement350{
	height:350px;
}
.imgComplement400{
	height:400px;
}
/************************
*****Divers*************
************************/
.right_button{
	text-align: right;
	float:right;
	position:relative;
	left: -2.5%;
}
img {
	max-width: 100%;
	max-height: 100%;
}
html{
	font-size: 100% /* Pour Internet Explorer */
}

@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */
	img {
		height: auto;
	}
	
	/* gestion des mots longs */
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* masquer les éléments superflus */
	.hide_mobile {
		display: none !important;
	}
}

/* Réduit de façon harmonieuse toutes les tailles de polices en orientation paysage */
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}