/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
	box-sizing: border-box;
	/*overflow: hidden;*/
}
img{
	max-width: 100%;
}

/*_____________flex class______________________*/
.col-mob{
	display: flex;
	flex-direction: column;
}
.row-mob{
	display: flex;
	flex-direction: row;
}
.row-reverse-mob{
	display: flex;
	flex-direction: row-reverse;
}
.col-reverse-mob{
	display: flex;
	flex-direction: column-reverse;
}
.col-mob-1{flex:1;}	.col-mob-2{flex:2;}	.col-mob-3{flex:3;}
.col-mob-4{flex:4;}	.col-mob-5{flex:5;} .col-mob-6{flex:6;}
.col-mob-7{flex:7;}	.col-mob-8{flex:8;}	.col-mob-9{flex:9;}
.col-mob-10{flex:10;}	.col-mob-11{flex:11;} .col-mob-12{flex:12;}

.row-mob>*, .row-reverse-mob>*{
	margin: 0.5rem 0.4rem;
}
.row-mob>*:first-child, .row-reverse-mob>*:last-child{
	margin-left: 0;
}
.row-mob>*:last-child, .row-reverse-mob>*:first-child{
	margin-right: 0;
}
.col-mob>*, .col-reverse-mob>*{
	margin: 0.5rem 0rem;
}

@media (min-width:768px){
	.row-tab{
		display: flex;
		flex-direction: row;
	}
	.row-reverse-tab{
		display: flex;
		flex-direction: row-reverse;
	}
	.col-tab{
		display: flex;
		flex-direction: column;
	}
	.col-reverse-tab{
		display: flex;
		flex-direction: column-reverse;
	}
	.col-tab-1{flex:1;}	.col-tab-2{flex:2;}	.col-tab-3{flex:3;}
	.col-tab-4{flex:4;}	.col-tab-5{flex:5;} .col-tab-6{flex:6;}
	.col-tab-7{flex:7;}	.col-tab-8{flex:8;}	.col-tab-9{flex:9;}
	.col-tab-10{flex:10;}	.col-tab-11{flex:11;} .col-tab-12{flex:12;}

	.row-tab>*, .row-reverse-tab>*{
		margin: 0.5rem 0.4rem;
	}
	.row-tab>*:first-child, .row-reverse-tab>*:last-child{
		margin-left: 0;
	}
	.row-tab>*:last-child, .row-reverse-tab>*:first-child{
		margin-right: 0;
	}
	.col-tab>*, .col-reverse-tab>*{
		margin: 0.5rem 0rem;
	}
}

@media (min-width:1024px){
	.row-desk{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.row-reverse-desk{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.col-desk{
		display: flex;
		flex-direction: column;
	}
	.col-reverse-desk{
		display: flex;
		flex-direction: column-reverse;
	}
	.col-desk-1{flex:1;}	.col-desk-2{flex:2;}	.col-desk-3{flex:3;}
	.col-desk-4{flex:4;}	.col-desk-5{flex:5;}	.col-desk-6{flex:6;}
	.col-desk-7{flex:7;}	.col-desk-8{flex:8;}	.col-desk-9{flex:9;}
	.col-desk-10{flex:10;}	.col-desk-11{flex:11;}	.col-desk-12{flex:12;}

	.row-desk>*, .row-reverse-desk>*{
		margin: 1rem 0.8rem;
	}
	.row-desk>*:first-child, .row-reverse-desk>*:last-child{
		margin-left: 0;
	}
	.row-desk>*:last-child, .row-reverse-desk>*:first-child{
		margin-right: 0;
	}
	.col-desk>*, .col-reverse-desk>*{
		margin: 1rem 0rem;
	}
}




/*_______________________________*/
/*________général___________________*/

#chevron{
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	border-radius: 50%;
	font-size: 3rem;
	color: darkgray;
	height: 2.8rem;
	width: 2.8rem;
	z-index: 50;
}
#chevron>i{
	position: relative;
	vertical-align: top;
	top: -0.1rem;
	left: -0.1rem;
}

/*____________span / style___________*/
body{
	font-family: 'Chivo', sans-serif;
	/*font-family: 'Bree', serif;*/
	/*font-family: 'Open Sans', sans-serif;*/
	text-align: justify;
	font-size: 1.1rem;
	line-height: 1.5rem;
}

h1, h2{
	color: rgb(11, 23, 55);
	font-family: 'Bree', serif;
	font-weight: bold;
	/*font-family: 'Chivo', serif;*/
	text-align: center;
}
h3, h4{
	font-family: 'Chivo', serif;
	text-align: center;
}
h2{
	font-size: 1.8rem;
	margin-bottom: 2rem;
	/*color: rgb(70, 95, 165);*/
}
h3{
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: rgb(70, 95, 165);
}
h4{
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
	color: rgb(70, 95, 165);
}

.iconeLangage{
	height: 1.5rem;
	width: auto;
	vertical-align: middle;
}
.fa-html5{
	color: rgb(217, 56, 27);
	font-size: 1.5rem;
	vertical-align: middle;
}
.fa-css3-alt{
	color: rgb(63, 69, 209);
	font-size: 1.5rem;
	vertical-align: middle;
}
.fa-js-square{
	color: rgb(208, 194, 17);
	font-size: 1.5rem;
	vertical-align: middle;
}
.fa-php{
	color: rgb(33, 55, 201);
	font-size: 2rem;
	vertical-align: middle;
}
.fa-angular{
	color: rgb(250, 9, 9);
	font-size: 1.5rem;
	vertical-align: middle;
}
h5{
	text-align: center;
	color: rgb(70, 95, 165);
}
.techno{
	display: flex;
	justify-content: center;
}
.techno i{
	font-size: 2.5rem;
	margin: 0.5rem;
}
.techno img{
	height: 2.5rem;
	margin: 0.5rem;
}

@media (min-width:768px){
	h3{
		text-align: left;
	}
	h2{
		font-size: 2.5rem;
		margin-bottom: 2rem;
		/*color: rgb(70, 95, 165);*/
	}
}

a{
	text-decoration: none;
}
button.click, a.click{
	cursor: pointer;
	font-size: 1.2rem;
	text-decoration: none;
	border-radius: 0.5rem;
	padding: 0.3rem 1rem;
	border: 0.1rem groove rgb(70, 95, 165);
	background-color: rgb(70, 95, 165);
	color: white;
	box-shadow: 0.15rem 0.15rem 0.15rem darkblue;
}
button.click:hover, a.click:hover,
button.click:active, a.click:active {
	background-color: rgb(70, 95, 165, 0.6);
}
button.click:active, a.click:active {
	background-color: rgb(70, 95, 165, 0.6);
	box-shadow: 0rem 0rem 0rem darkblue;
}
div.button{
	display: flex;
	justify-content: center;
}
.center{
	text-align: center;
}
.center-mob{
	text-align: center;
}
p{
	text-align: justify;
}
@media (min-width:768px){
	.center-mob{
		text-align: justify;
	}
}

.red{
	color: red;
}
.center{
	text-align: center;
}



/*_______________________________________________*/
/*__________________header_____________*/
header{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;

}

/*____________________bandeau_______________*/

#portrait{
  position: fixed;
  transform: rotate(-50deg);
  background-color: rgba(90, 150, 180, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.6s;
	z-index: 150;
	box-shadow: 0.1rem 0.1rem 0.1rem black;
}
#portrait *{
	transition: all 0.6s;
}
.portrait{
	  transform: rotate(50deg);
}
.portrait img:hover{
	opacity: 0.8;
}

#portrait.styleTop{
	width: 20rem;
  height: 3rem;
  left: -8.5rem;
}
#portrait.styleTop img{
	width: 2.7rem;
	height: auto;
	margin-left: 0.5rem;
	margin-top: 0.5rem;
}
#portrait.styleBot{
	width: 20rem;
  height: 3rem;
  left: -8.5rem;
}
#portrait.styleBot img{
	width: 2.7rem;
	height: auto;
	margin-left: 0.5rem;
	margin-top: 0.5rem;
}
#portrait.styleDown{
  position: fixed;
	width: 50rem;
  height: 9rem;
  left: -22rem;
}
#portrait.styleDown img{
  width: 5rem;
	height: auto;
	margin-left: 3rem;
	margin-bottom: 1rem;
}


@media (min-width:768px){
	/*#portrait.styleTop{
		width: 50rem;
	  height: 10rem;
	  left: -20.3rem;
		z-index: 30;
	}
	#portrait.styleTop img{
	  width: 7rem;
		height: auto;
		margin-bottom: 0rem;
		margin-top: 3rem;
		margin-left: 0rem;
	}*/
	#portrait.styleTop{
		width: 50rem;
	  height: 5rem;
	  left: -22rem;
	}
	#portrait.styleTop img{
	  width: 5rem;
		height: auto;
		margin-bottom: 0rem;
		margin-left: 0rem;
	}
	#portrait.styleBot{
		width: 50rem;
	  height: 5rem;
	  left: -22rem;
	}
	#portrait.styleBot img{
	  width: 5rem;
		height: auto;
		margin-bottom: 0rem;
		margin-left: 0rem;
	}

}

@media (min-width:1024px){
	#portrait.styleTop{
	  width: 50rem;
	  height: 10rem;
	  left: -16rem;
		z-index: 150;
	}
	#portrait.styleTop img{
	  width: 9rem;
		height: auto;
		margin-top: 0rem;
		margin-left: 1rem;
	}
	#portrait.styleBot{
		width: 50rem;
	  height: 5rem;
	  left: -22rem;
	}
	#portrait.styleBot img{
	  width: 5rem;
		height: auto;
		margin-bottom: 0rem;
		margin-left: 0rem;
	}
	#portrait.styleDown{
	  width: 50rem;
	  height: 10rem;
	  left: -16rem;
		z-index: 150;
	}
	#portrait.styleDown img{
	  width: 9rem;
		height: auto;
		margin-left: 1rem;
	}
}

/*______________________nav_______________*/

#nav{
	position: fixed;
	top:0;
	width: 100%;
	height: 3rem;
	z-index: 50;
	margin: 0;
	background-color: rgba(80, 130, 160, 1);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: all 0.6s;
}
#nav *{
	transition: all 0.6s;
}
p.burger{
	font-size: 2rem;
	padding: 0 0.5rem;
	z-index: 100;
	width: 3rem;
	height: 3rem;
	align-self: flex-end;
}
p.burger:hover{
	background-color: rgba(145, 172, 185, 1);
}
#nav ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
#nav li{
	display: flex;
	flex-direction: column;
}
nav p, nav i{
	color: rgb(15, 20, 15);
	font-size: 1.4rem;
	padding: 0.8rem 0.3rem;
	text-align: right;
	cursor: pointer;
}
li.vignette{
	display: flex;
	flex-direction: column;
}
li.vignette>a, li.vignette>div{
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
	width: 100%;
	background-color: rgba(80, 130, 160, 1);
	align-items: center;
	height: 3rem;
}
li.vignette>a:hover, li.vignette>div:hover, li.vignette:hover{
	background-color: rgba(145, 172, 185, 1);
}
.vignette i{
	padding-left: 0.5rem;
	padding-right: 1rem;
}
#nav .nav1, #nav .nav1 *{
	z-index: 10;
}
#nav ul.nav2{
	transform: scale(1,0) translateY(-3rem);
	height: 0;
	transition: all 0.6s;
}
#nav ul.nav2 a{
	padding-right: 1rem;
}
#nav .nav1{
	transform: scale(1,0) translateY(-6rem);
	height: 0;
}
#nav ul.styleDown{
	transform: scale(1,1)  translateY(0rem);
	height: 6rem;
}
/*#nav.styleTop .nav1{
	transform: scale(1,0) translateY(-6rem);
	height: 0;
}
#nav.styleBot .nav1{
	transform: scale(1,0) translateY(-6rem);
	height: 0;
}*/
#nav.styleDown .nav1{
	transform: scale(1,1) translateY(0rem);
	height: 12rem;
}
#nav ul.nav2>li.vignette>a{
	height: 3rem;
}



@media (min-width:768px){
	.burger{
		display: none;
	}
	nav#nav{
		flex-direction: row;
	}
	nav p, nav i{
		font-size: 1.2rem;
	}
	nav#nav>div{
		width: 100%;
		height: 3rem;
	}
	nav#nav ul.nav1{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-left: 7rem;
		height: 3rem;
	}
	nav#nav ul.nav1 li:not(:last-child){
		flex:3.5
	}
	nav#nav ul.nav1 li:last-child{
		flex:2.5
	}
	#nav ul.nav2 a{
		padding-right: 0rem;
	}
	li.vignette>a, li.vignette>div{
		flex-direction: row;
		justify-content: center;
	}
	ul.nav1>.vignette>a, ul.nav1>li>.vignette>div{
		background-color: rgba(0,0,0,0);
	}
	ul.nav1>.vignette>a:hover, ul.nav1>li>.vignette>div:hover{
		background-color: rgba(145, 172, 185, 1);
	}
	.vignette i{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	nav p, nav i{
		text-align: center;
		cursor: pointer;
	}
	#nav .nav1{
		transform: scale(1,1) translateY(0);
		height: auto;
	}
	#nav .nav1 *{
		z-index: 50;
	}
	#nav.styleTop .nav1{
		height: 3rem;
	}
	#nav.styleTop .nav1, #nav.styleTop .nav1>*{
		transform: translateY(0);
	}
	#nav.styleBot .nav1, #nav.styleBot .nav1>*{
		transform: translateY(0);
	}
	#nav.styleDown .nav1{
		transform: scale(1,1) translateY(0rem);
		height: auto;
	}
}

@media (min-width:1024px){
	#nav{
		position: fixed;
		left: 0rem;
		width: 17rem;
		top: 0;
		bottom: 0;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		background-color: rgba(0,0,0,0);
	}
	nav p, nav i{
		font-size: 1.4rem;
	}
	nav#nav>div{
		background-color: rgba(80, 130, 160, 1);
		position: relative;
		height: 100%;
		width: 15rem;
		left: 2rem;
	}
	nav#nav ul.nav1{
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 15rem;
		margin-left: 0rem;
	}
	nav#nav ul.nav1 li:not(:last-child){
		flex:initial;
		min-width: 3rem;
		height: 3rem;
	}
	nav#nav ul.nav1 li:last-child{
		flex:initial;
		min-width: 3rem;
		height: 3rem;
	}
	li.vignette>a, li.vignette>div{
		flex-direction: row-reverse;
		justify-content: flex-start;
	}
	#nav ul.nav2{
		position: relative;
		left:15rem;
		top: -3rem;
		transform: scale(0,1) translateX(-7.5rem) translateY(0);
		height: auto;
		width: 0rem;
	}
	#nav ul.styleDown{
		transform: scale(1,1) translateX(0rem) translateY(0);;
		height: auto;
		width: 15rem;
	}
	#nav ul.nav2>li.vignette>a{
		flex-direction: row;
		justify-content: flex-start;
	}
	.vignette i{
		padding-left: 0.8rem;
		padding-right: 0.8rem;
	}
	#nav.styleTop{
		transform: translateX(0);
	}
	#nav.styleBot{
		transform: translateX(-14rem);
	}
	#nav.styleDown{
		transform: translateX(0);
	}
}





/*____________________________________*/
/*__________main____________________*/
main{
	z-index: 150;
	/*background-color: rgb(205, 210, 215);*/
	min-height: 50rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
section{
	width: 100%;
	padding: 1.5rem 6%;
	display: flex;
	justify-content: center;
}
.container{
	max-width: 70rem;
	flex: 1;
}
article{
	margin-bottom: 1rem;
}

@media (min-width:1024px){
	main{
		z-index: 150;
	}
	section{
		padding-left: 4rem;
	}
}




/*___________#banniere____________________*/
section#banniere{
	width: 100%;
	margin-bottom: 2rem;
	padding: 0;
	position: relative;
	margin-top: 3rem;
}
section#banniere>*{
	max-width: 100%;
}
#banniere picture{
	width: 100%;
	max-width: 100%;
	height: auto;
}
#banniere img{
	width: 100%;
	max-width: 100%;
	height: auto;
}

h1{
	font-size: 1.6rem;
	font-weight: bold;
	color: rgb(11, 23, 55);
	text-shadow:
		0.08rem 0rem 0rem rgb(242, 243, 255),
		0rem -0.08rem 0rem rgb(242, 243, 255),
		0rem 0.08rem 0rem rgb(242, 243, 255),
		-0.08rem 0rem 0rem rgb(242, 243, 255);

	line-height: 2.5rem;
	margin-bottom: 1rem;
}
@media (min-width:768px){
	h1{
		font-size: 3.5rem;
		line-height: 3.5rem;
	}
}

@media (min-width:1024px){
	section#banniere{
		margin-top: 0rem;
	}
}





/*_______________________________________________*/
/*___________________index_______________________*/

/*_________slider _______________*/

#slider{
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-shadow: 0.2rem 0.2rem 0.2rem black;
	margin-top: 3rem;
	padding: 0;
}

#sliderRacines{
	position: relative;
	overflow: hidden;
	height: 100%;
}
.slider picture{
	transition: all 1.5s;
}

#slider picture{
	width: 100%;
	max-width: 100%;
}
#slider img{
	width: 100%;
	max-width: 100%;
}
div.slider{
	position: absolute;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-shadow: 0.2rem 0.2rem 0.2rem black;
	overflow: hidden;
	transition: all linear 1.5s;
	height: 100%;
	left: 0;
}
#slider picture{
	position: absolute;
	z-index: -20;
}

.textSlider{
	color: rgba(185, 212, 225, 1);
	text-align: center;
}
.textSlider h1{
	font-size: 2rem;
}
.textSlider a{
	font-size: 1.2rem;
}

.bas{
	position: absolute;
	bottom: 0;
	width: 50%;
	left: 25%;
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	color: white;
}
.bas>div{
	margin: 0 1.5rem;
}
.bas>div>*{
	cursor: pointer;
}
.bas>div>*:hover{
	text-shadow: 0.3rem 0.3rem 0.3rem black;
}
.bas>div>*:active{
	text-shadow: 0.05rem 0.05rem 0.05rem black;
}
.balises{
	display: none;
}
.balises div{
	margin: 0.2rem;
}
.gauche, .droite{
	font-size: 1.5rem;
}


@media (min-width:768px){
	.textSlider h1{
		font-size: 3rem;
	}
	.textSlider a{
		font-size: 1.5rem;
	}
	.bas>div{
		margin: 0 3rem;
	}
	.gauche, .droite{
		font-size: 3rem;
	}
	.balises{
		display: flex;
		justify-content: center;
	}
}

@media (min-width:1024px){
	#slider{
		margin-top: 0rem;
	}
	.textSlider h1{
		font-size: 4rem;
	}
	.textSlider a{
		font-size: 2rem;
		margin-top: 1rem;
	}
	.textSlider{
		margin-left: 0rem;
	}
	.bas{
		margin-left: 0rem;
	}
}



/*____________#presentation___________________________*/
#presentation{
	align-items: center;
}
#presentation h2{
	text-align: center;
}
#presentation p{
	margin-bottom: 1rem;
	line-height: 1.5rem;
	font-size: 1.1rem;
}
#photoPortrait{
	max-width: 12rem;
	max-height: 12rem;
	border-radius: 5rem;
	border: 0.1rem groove rgba(80, 130, 160);
	border-style: ridge;
}




/*____________#competences   _________________*/
#competences{
	background-color: rgb(205, 210, 215);
}
#competences ul{
	list-style: none;
}
#competences h2{
	text-align: center;
}
#competences article{
	text-align: center;
}
#competences p{
	margin-bottom: 1rem;
	line-height: 1.5rem;
	font-size: 1.1rem;
}
#competences li{
	margin-bottom: 0.2rem;
}

/*____________#projets   _________________*/
#projets article>div{
	justify-content: center;
	align-items: flex-start;
}
#projets h3{
	text-align: center;
}
.projet{
	max-width: 30rem;
}
.projet a img{
	transition: all 0.6s;
	border: 0.1rem solid darkblue;
	margin-top: 1rem;
}
.projet a img:hover{
	opacity: 0.8;
	transform: scale(1.05,1.05);
}


/*____________#contact   _________________*/
#contact{
	background-color: rgb(205, 210, 215);
}
#contact address div{
	margin: 0rem;
}
#contact textarea{
	resize: none;
}
#contact iframe{
	width: 100%;
}
div.formu>*{
	margin: 0.5rem 0rem;
}
#contact form{
	margin-bottom: 2rem;
}

address p.sansmarginbot{
	margin-bottom: 0;
}
address p.margintopspe{
	margin-top: 0.1rem;
	margin-left: 0rem;
}

address a{
	color: black;
}

@media (min-width:768px){
	#contact label.right{
		text-align: right;
	}
	#contact fieldset{
		width: 95%;
	}
	div.formu>*{
		margin: 0.5rem 0.5rem;
	}
}





/*_______________________________________________*/
/*__________________Dames_______________________*/



/*____________#Dames____________________________*/
#dames h2 {
	text-align: center;
	font-size: 3rem;
}

/*_____________#damier__________________*/

#damier{
  display: flex;
  flex-direction: row;
	justify-content: center;
}
table{
  width: 100%;
	margin: auto;
  margin-bottom: 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  padding-left: 1px;
  padding-top: 1px;
}
tbody{
  display: flex;
  flex-direction: column;
}
tr{
  display: flex;
  flex-direction: row;
}
td{
  width: 9%;
  padding-top: 9%;
  position: relative;
  display: flex;
  flex-direction: row;
}
.blanc{
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white;
}
.noir{
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: rgba(120,120,120,1);
}
td.noir:nth-child(2), td.blanc:nth-child(2){
  border-left: 1px solid black;
}
tr:nth-child(2)>td:not(:first-child){
  border-top: 1px solid black;
}



.text {
  position: absolute;
  top: 20%;
  left: 40%;
  bottom: 0;
  right: 0;
}


/*____________.pion__________________*/

.pion{
  position: relative;
}

.pion_blanc{
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  background-color: white;
  z-index: 40;
}
.pion_noir{
  position: absolute;
  border: 1px solid black;
  border-radius: 50%;
  background-color: black;
  z-index: 40;
}
.dame_blanc{
  position: absolute;
  border: 5px solid black;
  border-radius: 50%;
  background-color: white;
  z-index: 50;
}
.dame_noir{
  position: absolute;
  border: 5px solid white;
  border-radius: 50%;
  background-color: black;
  z-index: 50;
}

/*_____#commentaires ____________*/


#recap{
  justify-content: flex-end;
}



/*_______________________________________________*/
/*____________projets____________________________*/

/*____________tir_________________________*/

section#tir{
	position: relative;

}
section#tir>div{
	justify-content: center;
	text-align: center;
	align-items: center;
}


#champsDeTir{
	position: relative;
	margin: 1rem;
	border: 0.2rem dashed black;
	cursor: crosshair;
	background-color: lightgray;
	display: flex;
	justify-content: center;
	align-items: center;
}
#champsDeTir img{
	position: absolute;
	height: 50px;
	width: 50px;
}
#champsDeTir p{
	font-size: 2rem;
	line-height: 2.5rem;
}


/*_______________________________________________*/
/*____________mentions___________________________*/
@media (min-width:768px){
	#mentions>div>article{
		margin: 5rem;
	}
}




/*_______________________________________________*/
/*____________footer____________________________*/
footer{
	background-color: rgba(90, 150, 180, 0.9);
	color: darkblue;
}
#navigation ul{
	list-style: square;
	display: flex;
	flex-direction: column;
}
#navigation li{
	margin: 0.5rem 1rem;
}
.vignette2 a{
	color: darkblue;
}
a.deco:hover, a.deco:active{
	opacity: 0.8;
	text-decoration: underline;
}
a.deco:visited{
	color: rgb(50, 20, 80);
}


@media (min-width:768px){
	#navigation ul{
		flex-direction: row;
	}
}


/**/