body
{
    background-color:#FBFBFB; 
    color: #000000; /* Le texte de la page sera noir */
}

#bloc-page
{
  margin:0%;
  padding:1%;
  min-height : 1050px;
  background: url(images/armoiries-background-flou-20.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

#bloc-arbre
{
    width: 98%;
    margin: auto;
    background-color:#E1E2E4;
	padding-left: 6%;
}




#scrollUp /*haut de page*/
{
position: fixed;
bottom : -3.0em;
right: -15em;
opacity: 0.5;
background-color:#BCBB79;
	opacity:0.75;
    width: 9em; /*longueur*/
	height: 2.3em; /*hauteur*/
	margin: -2.5em 2em 5em 10em; /*position contenant*/
	padding: 0.5em 0.5em 2em 1.5em;
    box-shadow: 5px 5px 5px rgba(0,0,0,1.15); /*ombre contenant*/
    border-radius: 2em 0.5em 0.5em 2em; /*angles contenant*/
	border: solid hsla(80, 10%, 10%, 0.1); /*bordure contenant*/s}
.hp
{
	font-family: verdana;
	font-size:90%;
	font-style: italic;
	text-decoration:none;
	color: black;
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
}
/*fin haut de page*/
a { text-decoration: none; }


/*----- Toggle Button -----*/
.toggle-nav {
	display:none;
}

/*----- Menu -----*/
@media screen and (min-width: 860px) {
	.menu {
	/*position: fixed;	*/
	width:98.0%;/*longueur du bandeau*/
	padding:5px 5px;
	box-shadow:5px 5px 5px rgba(0,0,0,0.15);/*ombre du bandeau*/
	border-radius:6px;
	background:#BCBB79;
	}
}

.menu ul {
	display:inline-block;
}

.menu li {
	margin:0px 50px 0px 0px;
	float:left;
	list-style:none;
	font-size:17px;
}

.menu li:last-child {
	margin-right:0px;
}

.menu a {
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
	text-decoration:none;
	color:#777;
	transition:color linear 0.15s;
}

.menu a:hover, .menu .current-item a {
	font-style:italic;
	color: black;
	text-decoration:none;
}
.menu a:active, .menu .current-item a {
	font-style:italic;
	color: #000066;
	text-decoration:none;
}

/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
	.wrap {
		width:90%;
	}
}

@media screen and (max-width: 970px) {
	.search-form input {
		width:120px;
	}
}

@media screen and (max-width: 860px) {
	.menu {
		position:relative;
		display:inline-block;
	}
	
	.menu ul.active {
		display:none;
	}

/*hamburger déployé*/	
	.menu ul {
		width:100%;
		position:absolute;
		top:120%;
		left:0px;
		padding:0px 80px;
		box-shadow:5px 5px 5px rgba(0,0,0,0.15);
		border-radius:6px;
		background:#BCBB79;
	}

	.menu ul:after {
		width:0px;
		height:0px;
		position:absolute;
		top:0%;
		left:22px;
		content:'';
		transform:translate(0%, -100%);
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #303030;
	}

	.menu li {
		margin:5px 0px 5px 0px;
		float:none;
		display:block;
	}

	.menu a {
		display:block;
	}
/* décor hamburger*/
	.toggle-nav {
		padding:20px;
		float:left;
		display:inline-block;
		box-shadow:5px 5px 5px rgba(0,0,0,0.15);
		border-radius:3px;
		background:#BCBB79;
		text-shadow:0px 1px 0px rgba(0,0,0,0.5);
		color:#777;
		font-size:15px;
		transition:color linear 0.15s;
	}

	.toggle-nav:hover, .toggle-nav.active {
		text-decoration:none;
		color:#66a992;
	}

}
/* fin menu*/

/* début texte*/

img {max-width: 100%;height:auto;} /*les images occupent la largeur max dispo*/

p.titre
{
	font-family: verdana;
	font-size:200%;
	font-style:bold;
	text-align: center;
}

p.soustitre
{
	font-family: verdana;
	font-size:120%;
	font-style:bold;
	text-align: center;
}

p
{
	font-family: verdana;
	font-size:100%;
	font-style:normal;
}

p.generation
{
	margin-top : 2%;
	text-align: center;
	font-family: verdana;
	font-size:100%;
	font-style:italic;
}

p.origine
{
	margin-top : 2%;
	margin-left:3%;
	font-family: verdana;
	font-size:100%;
	font-style:normal;
}

.femme
{
	font-family: verdana;
	font-size:120%;
	font-style:bold;
}

.nom
{
	font-family: verdana;
	font-size:150%;
	font-style:bold;
}

/* centrer image ou texte*/
img.displayed 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*fin*/

li
{
	font-family: verdana;
	font-size:100%;
	font-style:normal;	
}

p.extrait
{
	margin-left:5%;
	font-family: verdana;
	font-size:100%;
	font-style:italic;
}

p.titre-extrait
{
	margin-left:5%;
	font-family: verdana;
	font-size:100%;
	font-style:italic;
	font-weight: bold;
}

p.note
{
	font-style:italic;
}

p.note2
{
	font-style:italic;
	color:red;
	text-align:center;
}

.imageflottante
{
    float: left;
}

.doc-archives
{
	float: left;
	margin-left: 30em;
}
.dessous
{
    clear: both;
}

p.legende
{
		text-align: center;
}


/*portofolio*/ 
* {
  box-sizing: border-box;
}

/* Center website */
.main {
  max-width: 1920px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 20%;
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: #FAFAFA;
  padding: 10px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/* conteneur 2 images */
.contdeuximg {
  max-width: 1920px;
  height: auto;
  margin: auto;
  padding:0.5%;
  background-image: url("images/fond-2pge.jpg");
  box-shadow:5px 5px 5px rgba(0,0,0,0.75);/*ombre du bandeau*/
  border-radius:6px;
}

.contuneimg {
  max-width: 960px;
  height: auto;
  margin: auto;
  padding:0.5%;
  background-image: url("images/fond-2pge.jpg");
  box-shadow:5px 5px 5px rgba(0,0,0,0.75);/*ombre du bandeau*/
  border-radius:6px;
}