/*__________ RESET ____________________________________________*/

/* 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;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*_______ END RESET ____________________________________________*/

html{
	font-size: 62%;
	font-family: Helvetica, sans-serif;
}
a {
	color: black;
	/* text-decoration: none; */
}

header{
	position: fixed;
	z-index: 1;
}

sup{
	font-size: 70%!important;
}


/*_______ DIVERS MISE EN FORME TEXTES ______________________________*/
.ital {
	font-style: italic;
}
.small {
	font-size: 0.8vw !important;	
}
/*_______ FIN DIVERS MISE EN FORME TEXTES __________________________*/
/*_______ MODELES BODYs ____________________________________________*/

body#welcome {
/*	width: 100vw;
	height: 100vh;*/
	background-image: url("IMAGES/SENTINELLELABORATOIRE.jpeg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}
body#presentation {
/*	width: 100vw;
	height: 100vh;*/
	background-image: url("IMAGES/arbre_violet.jpeg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}
body#presentationSL {
/*	width: 100vw;
	height: 100vh;*/
	background-image: url("IMAGES/arbre_violet.jpeg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}

body#presentationSDX3 {
	background-image: url("IMAGES/arbre_violet.jpeg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}

body#siteArticleMethode {
	/* width: 100vw;
	height: 100vh; */
	background-image: url("IMAGES/fondPageMethode.jpg");
	background-color: #aeaeae;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}
body#autrePage {
/*	width: 100vw;
	height: 100vh;*/
	background: #FF373C url("IMAGES/fondAutrePage.jpeg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
}
body#presentationPerso {
	/*	width: 100vw;
		height: 100vh;*/
		background: url("IMAGES/fondPresentationPerso.jpeg");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: cover;
	}
body#sentiDroid {
	/*	width: 100vw;
		height: 100vh;*/
		background: url("IMAGES/fondPresentationPerso.jpeg");
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: cover;
	}
body#sectionPersos {
	background-color: black;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center 15%;
	background-size: cover;	
}
/*_______ FIN MODELES BODYs ____________________________________________*/


/*____________ NAV PROVISOIRE ________________*/
.navProvisoire {
	position: fixed;
}
.navProvisoire>ul{
	display: flex;
	margin: 1vw 0 0 2vw;
}
.navProvisoire>ul>li{
	background-color: black;
	font-size: 1.5vw;
	margin-right: 0.5vw;
	padding: 0 0.5vw 0 0.5vw;
}
.navProvisoire>ul>li>a{
	text-decoration: none;
	color: white;
}

.navProvisoire.siteArticle{
	margin-top: 8vw;
	z-index: 1;
}
.navProvisoire.negatif>ul>li{
	background-color: white;
}
.navProvisoire.negatif>ul>li>a{
	color: black;
}
.navProvisoire.siteArticleMethode{
	/* margin-top: 0; */
	z-index: 1;
}
.navProvisoire.autrePage {
	margin-top: 0;
}
.navProvisoire.presentationPerso {
	margin-top: 0;
}

/*____________ FIN NAV PROVISOIRE ________________*/


/*____________ NAV NOUVEAU _______________________*/

/*_________ MENU ACCUEIL GLOBAL ________*/

/* FOND DE PAGE ACCUEIL */

/* body#accueil div#fondPageAccueil {
	z-index: auto;
} */

#fond1 {
	background-color: yellow;
	height: 100vh;
	width: 33.3vw;
	position: fixed;
	left: 0;
}

#fond2 {
	background-color: blue;
	height: 100vh;
	width: 33.3vw;
	position: fixed;
	left: 33.3vw;
}

#fond3 {
	background-image: url(IMAGES/CAMOintro.jpg);
	background-size: 100vw;	
	height: 100vh;
	width: 33.5vw;
	position: fixed;
	right: 0;
}
/* FIN FOND DE PAGE ACCUEIL */


.menuAccueil>ul{
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}
.menuAccueil>ul>li{
	list-style-type: none;
}
.menuAccueil>ul>li>a{
	background-color: black;
	display: block;
	text-decoration: none;
	color: black;
}
.menuAccueil>ul>li>a:hover{
	background-color: black;
	color: black;
}

.zoneActive {
	height: 80vh;
	width: 33.3vw;
	margin-top: 20vh;
	background-color: rgba(255, 255, 255, 0);
	z-index: 1;
}
.zoneActive:hover {
	background-color: rgba(255, 255, 255, 0);

}

/*___ SOUS-MENU ACCUEIL GLOBAL___*/
.menuAccueil>ul>li>ul{
	display: none;
	flex-direction: column;
	list-style-type: none;
}

.menuAccueil>ul>li:hover>ul{
	display: flex;
}

.menuAccueil a{
	/* display: block; */
	/* padding: 0.5rem 1.2rem 0.5rem 1.2rem; */
	text-decoration: none;
	color: white;
	font-size: 2rem;
	letter-spacing: 0.1rem;
	/* background-color:  black; */
}
.menuAccueil a:hover{
	color: black;
}
#sectionPersos>ul>li {
	position: fixed;
	top: 20vh;
}

/* GÉNÉRAL */
#titre {
	position: fixed;
	color: rgb(255, 255, 255);
	font-size: 2vw;
	letter-spacing: 0;
}
.menuAccueil img {
	border-top: 1.7vw solid black;
}

/* OBSERVATIONS */
#sectionObservations>ul>li {
	position: fixed;
	top: 80vh;
	width: 33.3vw;
    overflow: hidden;
}
#accesObservations>a>img {
	width: 100vw;
}

#accesObservations #titre {
	font-size: 2vw;
	/* letter-spacing: -0.2vw; */
	bottom: 3vh;
	left: 1.5vw;
	line-height: 105%;
	font-weight: 500;
	filter: drop-shadow(0 0 1rem rgb(68, 68, 68));

/* color: #FF37FF;
color: #ffa5ff; */
}
/* ARTICLES */
#sectionArticles>ul>li {
	position: fixed;
	bottom: 0;
	left: 33.3vw;
    width: 33.2vw;
    overflow: hidden;
    height: 27vh;
}
#accesArticles>a>img {
	width: 100vw;
}

#accesArticles #titreGroupe {
	position: fixed;
	bottom: 0;
	left: 34vw;
	width: 32vw;
}
#accesArticles #titre {
	position: initial !important;
	margin-bottom: 2vh;
	font-size: 2vw;
	line-height: 110% !important;
	font-weight: 500;
	filter: drop-shadow(0 0 1rem rgb(68, 68, 68));
}


/* ART */
#sectionArt>ul>li {
	position: fixed;
	top: 83vh;
	left: 0;
}
#accesArt>img {
	width: 100vw;
}
#accesArt #titre, #accesArt #titre a{
	bottom: 3vh;
	left: 42vw;
	font-size: 3vw;
    font-weight: 500;
    letter-spacing: -0.1vw;
}


#sectionPersos, #sectionObservations, #sectionArticles, #sectionArt>a {
	/* background-color: black; */
	color: white;
}
#sectionPersos, #sectionObservations, #sectionArticles, #sectionArt>a:hover {
	color: rgb(56, 56, 56);
}
/* #accesObservations {
	width: 33vw;
	height: 100vh;
} */
/* #accesObservations>a>img {

} */
/*_________ FIN MENU ET SOUS_MENU ACCUEIL GLOBAL ________*/


/*_________ MENU SECTIONS GLOBAL ________*/
.menuSection>ul{
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	/* margin-top: 75vh;
	margin-left: 57vw; */
}
.menuSection>ul>li{
	list-style-type: none;
}
.menuSection>ul>li>a{
	background-color: black;
	display: block;
	/* height: 5vh;
	width: 15vw; */
	text-decoration: none;
	color: black;
}
.menuSection>ul>li>a:hover{
	background-color: black;
	color: black;
}
/*___ SOUS-MENU GLOBAL ___*/

.menuSection>ul>li>ul{
	display: none;
	flex-direction: column;
	list-style-type: none;
}

.menuSection>ul>li:hover>ul{
	display: flex;
}
/* 
.menuSection>ul>li>ul>li{
	background-color: black;
	border-style: solid;
	border-color: white;
} */

.menuSection>ul>li>ul>li>a{
	display: block;
	padding: 0.5rem 1.2rem 0.5rem 1.2rem;
	text-decoration: none;
	color: white;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
}
.menuSection>ul>li>ul>li>a:hover{
	color: rgb(190, 190, 190);
}
/*_________ FIN MENU ET SOUS-MENU SECTIONS GLOBAL ________*/



/*_________ MENU SECTIONS PERSOS _________*/
/* #sectionPersos>.menuSection {
	font-size: 2.5rem;
} */
.navAccesSD>a {
	cursor: crosshair!important;
}
#sectionPersos .menuSection a {
	font-size: 2.5rem!important;
}
.navAccesMethode {
	position: fixed;
	bottom: 0;
}
.navAccesMethode>a {
	cursor: crosshair!important;
}
.navAccesSD a:hover {
	color: #fedadf!important;
}
/*___ SOUS-MENU SECTIONS PERSOS ____*/

.accesSD {
	position: fixed;
	top: 21vh;
	right: 26vw;
}
.accesSD>a>p {
	letter-spacing: 0.3rem;
}
.accesMethode {
	position: fixed;
	bottom: 17vh;
	right: 24vw;	
}
.accesMethode>a>p {
	letter-spacing: 0.3rem;
}
/* .accesMethode>a {
	background-color: white;
	color: black;
} */
/* .accesMethode>a:hover {
	color: rgb(127, 127, 127);
} */
/*_________ FIN MENU ET SOUS-MENU SECTIONS PERSOS _________*/



/*_________ MENU SECTIONS OBSERVATIONS _________*/
.navObs01 {
	background-color: green;
	height: 50vh;
	width: 100vw;
}
.navObs02 {
	background-color: yellow;
	height: 50vh;
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
}
/*___ SOUS-MENU SECTIONS OBSERVATIONS ___*/
.obs01 {
	position: fixed;
	top: 30vh;
	left: 50vw;
}
.obs02 {
	position: fixed;
	bottom: 20vh;
	left: 60vw;
	background-color: white;
	color: black;
}
.obs02>a {
	background-color: white;
	color: black;
	font-weight: 600;
}
.obs02>a:hover {
	color: rgb(56, 56, 56);
}
/*_________ FIN MENU ET SOUS-MENU SECTIONS OBSERVATIONS _________*/



/*_____________ MENU SECTIONS ARTICLES _________*/
.navArticles01 {
	background-color: blue;
	height: 50vh;
	width: 100vw;
}
.navArticles02 {
	background-color: yellow;
	height: 50vh;
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
}
/*___ SOUS-MENU SECTIONS ARTICLES ___*/
.article01 {
	position: fixed;
	top: 30vh;
	left: 50vw;
}
.article02 {
	position: fixed;
	bottom: 20vh;
	left: 60vw;
	background-color: white;
	color: black;
}
.article02>a {
	background-color: white;
	color: black;
	font-weight: 600;
}
.article02>a:hover {
	color: rgb(56, 56, 56);
}

/*_________ FIN MENU ET SOUS-MENU SECTIONS ARTICLES _________*/



/*_________ MENU SECTIONS ART _________*/
.navArt01 {
	background-color: orange;
	height: 50vh;
	width: 100vw;
}
.navArt02 {
	background-color: yellow;
	height: 50vh;
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
}
/*___ SOUS-MENU SECTIONS ART ___*/
.art01 {
	position: fixed;
	top: 30vh;
	left: 50vw;
}
.art02 {
	position: fixed;
	bottom: 20vh;
	left: 60vw;
	background-color: white;
	color: black;
}
.art02>a {
	background-color: white;
	color: black;
	font-weight: 600;
}
.art02>a:hover {
	color: rgb(56, 56, 56);
}
/*_________ FIN MENU ET SOUS-MENU SECTIONS ART _________*/

/*____________ FIN NAV NOUVEAU _______________________________*/



/*____________ TITRES DES PAGES ________________*/

/* ___ GLOBAL _____ */
.titre {
	font-size: 1.4vw;
	display: block;
	padding: 1vh 1vh 1vh 17vw;
	margin-top: 1vh;
	margin-right: 67vw;
	color: white;
	background-color: black;
}

.titre a {
	text-decoration: none;
	color: black;
}

/* ___ SPECIFIQUE _____ */

body#welcome .titre {
	margin: 57vh 0 0 25vh;
	padding: 0;
	background-color: #ffffff00;
}

body#presentationSL h1 {
	color: white;
	font-weight: lighter;
}

body#presentation .titre {
	color: black;
	background-color: white;
	border: solid 1px black;
	position: fixed;
	margin-top: 10vh;
}
body#presentationSDX3 .titre {
	color: black;
	background-color: white;
	border: solid 1px black;
	position: fixed;
	margin-top: 10vh;
}

body#autrePage .titre h1 {
	font-weight: lighter;
	color: white;
}

/*____________ FIN TITRES DES PAGES ________________*/



/*_________ "MENU 5 ELEMENTS"  ______________________________*/
/*_________ GLOBAL __________*/

nav.tracesArbres>ul {
	display: flex;
	flex-direction: row-reverse;
}
nav.menuElements>ul {
	display: flex;
	flex-direction: row-reverse;
}
.symbolElement {
position: relative;
padding: 0;
width: 6.1vw;
display: block;
cursor: pointer;
overflow: hidden;
margin-left: 2vw;
margin-right: 3vw;
}

.symbolElement img{
	height: 11vh;
}

.content {
	opacity: 0;
	font-size: 1.2vw;
	/* text-transform: uppercase; */
	position: absolute;
	top: 0;
	left: 0;
	color: black;
	background-color: white;
	width: 2.4vw;
	height: 6.5vh;
	margin-top: 2vh;
	margin-left: 1.5vw;
	/* -webkit-transition: all 400ms ease-out;
	-moz-transition: all 400ms ease-out;
	-o-transition: all 400ms ease-out;
	-ms-transition: all 400ms ease-out;
	transition: all 400ms ease-out; */
	text-align: center;
}
.symbolElement .content:hover {
	opacity: 1;
}
.symbolElement .content .nomElement {
	height: 0;
	opacity: 1;
	/* transition-delay: 0s;
	transition-duration: 0s; */
	margin-top: 2.5vh;
}
.symbolElement .content:hover .nomElement {
	opacity: 1;
	/* transform: translateY(2.75vw);
	-webkit-transform: translateY(2.75vw); */
}


/* ________ >> PAGE WELCOME ____________ */

 body#welcome .menuElements>ul {
	margin-right: 26vw;
	margin-top: 29vh;
}

body#welcome .menuElements>ul>li{
	margin-left: 1vw;
	margin-right: 1vw;
}
body#welcome .menuElements>a{
	margin-left: 0;
	margin-right: 0;
}


/* ________ >> PAGES PRESENTATION ____________ */

body#presentation nav.menuElements {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	float: left;
	margin-left: 22vw;
}
body#presentation nav.menuElements .symbolElement {
	width: 5vw;
	margin-left: 1vw;
	margin-right: 1vw;
}
body#presentation nav.menuElements .symbolElement img {
	height: 9vh;
}
body#presentation nav.menuElements .symbolElement .content {
	margin-left: 1vw;
	width: 3vw;
}

body#presentation nav.menuElements .symbolElement .content .nomElement {
	margin-top: 1.5vh;
}

/* ________ >> PAGE PRESENTATION 3 logos SL____________ */

body#presentationSDX3 nav.menuElements {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	float: left;
	margin-left: 22vw;
}
body#presentationSDX3 nav.menuElements .symbolElement {
	width: 5vw;
	margin-left: 1vw;
	margin-right: 1vw;
}
body#presentationSDX3 nav.menuElements .symbolElement img {
	height: 9vh;
}
body#presentationSDX3 nav.menuElements .symbolElement .content {
	margin-left: 1vw;
	width: 3vw;
}

body#presentationSDX3 nav.menuElements .symbolElement .content .nomElement {
	margin-top: 1.5vh;
}

/* _______ >> PAGE PRÉSENTATION GENERALE PERSONNAGES ___ */

body#presentationPerso .menuElements {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	float: left;
	margin-left: 11vw;
}
body#presentationPerso nav.menuElements .symbolElement {
	width: 5vw;
	margin-left: 1vw;
	margin-right: 1vw;
}
body#presentationPerso nav.menuElements .symbolElement img {
	height: 9vh;
}
body#presentationPerso nav.menuElements .symbolElement .content {
	margin-left: 1vw;
	width: 3vw;
}

body#presentationPerso nav.menuElements .symbolElement .content .nomElement {
	margin-top: 1.5vh;
}

/* _______ >> PAGES PERSONNAGES ___ */

body#sentiDroid .menuElements {
	position: relative;
	top: 0;
	right: 0;
	left: 0;
	float: left;
	margin-left: 11vw;
}
body#sentiDroid nav.menuElements .symbolElement {
	width: 5vw;
	margin-left: 1vw;
	margin-right: 1vw;
}
body#sentiDroid nav.menuElements .symbolElement img {
	height: 9vh;
}
body#sentiDroid nav.menuElements .symbolElement .content {
	margin-left: 1vw;
	width: 3vw;
}

body#sentiDroid nav.menuElements .symbolElement .content .nomElement {
	margin-top: 1.5vh;
}

/* _______ >> PAGE AUTRE PAGE ____________ */

body#autrePage .menuElements {
	background-color: black;
	margin-top: 13vh;
	position: absolute;
	bottom: 0;	
	right: 0;
	left: 0;
}
body#autrePage .menuElements .content {
	background-color: black;
	color: white;
	font-weight: lighter;
  }
/*_________ FIN "MENU 5 ELEMENTS"  ___________________________*/





/*_________ "ARTICLE"  _______________________________________*/
/*_________ GLOBAL __________*/

.article {
	font-size: 1.3vw;
	font-weight: lighter;
	line-height: 1.1vw;
	margin: 20vh 0 3vh 4vw;
	overflow: scroll;
	position: fixed;
}

.article h2 {
	margin-top: 1.5vh;
	/* line-height: 20px; */
	/* font-stretch: 50%; */
}


/* ________ SPECIFIQUE __________ */

body#presentationSL .article {
	margin: 3vh 0 0 4vw;

}
body#presentationSL .article p {
	margin-left: 1.2vw;
	/* font-stretch: 150; */
}
.audioElement {
	float: right;
	margin-top: -5vh;
	opacity: 0;
}

body#presentation .article {
	height: 80vh;	
}
body#presentationSDX3 .article {
	height: 53vh;
	margin-top: 1.8vw;	
}

h2#titreArticle_03 {
	margin-top: 3vh;
}
h2#titreArticle_04 {
	margin-top: 1vw;
}

#SL_logoX3 img {
	max-width: 31vw;
	margin-left: 3.5vw;
	padding-top: 9.5vw;
}

/*_________ FIN "ARTICLE"  ___________________________________*/


/*_________ "LOGO"  __________________________________________*/

.logo img {
	width: 27vw;
	margin-top: 5vh;
	margin-left: 10vw;
}
body#autrePage .logo {
	padding-top: 15vh;
}

/*_________ FIN "LOGO"  _______________________________________*/



/*_________ AUTRE PAGE  _______________________________________*/

#inProgress {
	font-size: 1.5vw;
	display: block;
	padding: 1vh 1vh 1vh 10vw;
	margin-top: 10vh;
	margin-right: 35vw;
	color: white;
	background-color: black;
	font-weight: lighter;
	position: fixed;
}

/*_________ FIN AUTRE PAGE  __________________________________*/




/*___________ PAGE "SITE ARTICLE" ____________________________*/
body#siteObservation header {
	background-color: white;
}

/*_________ MENU S+D rouge ____________________*/

nav.SD{
	font-size: 1.8vw;
	font-family: sans-serif;
	display: flex;
	width: 100vw;
}


ul.SD{
	background-color: #ff3e53;
	padding-left: 1vw;
	padding-top: 0.2vw;
	display: flex;
	max-width: 22vw;
	padding-bottom: 1vh;
}

ul.SD > li{
	margin-right: 1.5vw;
}
ul.SD > li a{
	text-decoration: none;
	color: black;
}
ul.SD > li a:hover{
	color: white;
}
ul.SD > li a:active{
	color: white;
}
ul.SD > li a:focus{
	color: white;
}
ul.SD li:nth-child(3){
	margin-top: 1vw;
}

span.S_D{
	font-weight: bold;
	font-size: 3.5vw;
}
p.sentidrone{
	font-size: 1.2vw;
	font-weight: lighter;
}

p.plus{
	margin-top: 1vw;
	font-size: 2vw;
}
/*_________ FIN MENU S+D rouge ____________________*/


/*_________MENU ICONES_____________________________*/

ul.menuIcones{
	background-color: white;
	/* background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgba(255, 255, 255, 0) 100%); */
	display: flex;
	max-width: 80vw;
}

ul.menuIcones li{
	margin: 0 0.6vw 0 0.6vw;
}
ul.menuIcones img{
	display: block;
	max-width: 4.7vw;
}

/*___ EXCEPTIONS___*/
ul.menuIcones > li:nth-child(1){
	margin-right: 0.3vw;
	margin-top: 0.5vw;
}
ul.menuIcones > li:nth-child(2){
	margin-left: 0.3vw;
	margin-right: 0.3vw;
}
ul.menuIcones > li:nth-child(2) img{
	max-width: 6vw;
}
ul.menuIcones > li:nth-child(3){
	margin-left: 0.3vw;
	margin-right: 0.3vw;
}
ul.menuIcones > li:nth-child(4){
	margin-right: 0.3vw;
	margin-left: 0.3vw;
}
ul.menuIcones > li:nth-child(5){
	margin-right: 0.3vw;
	margin-left: 0.3vw;
}
ul.menuIcones > li:nth-child(7){
	margin-top: 0;
}
ul.menuIcones > li:nth-child(7) img{
	max-width: 7vw;
}


ul.menuIcones > li:nth-child(8){
	margin-top: 0;
}
ul.menuIcones > li:nth-child(8) img{
	max-width: 4.5vw;
}


ul.menuIcones > li:nth-child(9){
	margin-top: 0;
}
ul.menuIcones > li:nth-child(9) img{
	max-width: 7vw;
}

.inactif{
	opacity: 0.3;
}
/*_________ FIN MENU ICONES ____________________________*/



/*___________ TITRE PAGE "SITE ARTICLE" ________________*/
ul.titrePageSite{
	/* margin-top: 0.5vw; */
	background-color: white;
	margin-right: 0.5vw;
	margin-left: 2vw;
	max-width: 20vw;
}
/* ul.titrePageSite li{
	margin-left: 1vw;
} */

li.nom{
	font-size: 1.5vw;
	font-weight: bold;
	margin-top: 0.7vw;
}
li.lieu{
	font-size: 1vw;
	font-weight: lighter;
	margin-top: 0.3vw;
}
li.GPS{
	font-size: 1vw;
	font-weight: 200;
	margin-top: 0.5vw;
}

/*____________ ARTICLE "SITE OBSERVATION"__________*/
.imageArticle{
	overflow: hidden;
	position: fixed;
	object-position: bottom;
	object-fit: cover;
	margin-top: 10.5vh;
}
.imageArticle.lampy{
	max-height: 50vh;
}
.imageArticle.cammazes {
	max-height: 50vh;
}
.imageArticle img{
	width: 100%;
	height: auto;
}

.conteneurArticle{
	/* display: flex; */
	padding-top: 63vh;
	font-family: sans-serif;
	font-weight: lighter;
	font-size: 1.4vw;
}
.conteneurArticle .texteArticle {
	height: 31vh;
}
 /* .conteneurArticle.cammazes {
	padding-top: 62vh;
} */



.imageArticle.imageBandeau {
	height: 50vh;
	margin-top: 0;
}
.imageArticle.imageBandeau img{
	width: 100%;
	height: auto;
}
.conteneurArticle.imageBandeau {
	padding-top: 51vh;
}
.conteneurArticle.imageBandeau .texteArticle {
	height: 44vh;
}

.texteArticle{
	max-width: 50vw;
	margin-left: 15vw;
	height: 30vh;
	overflow: scroll;
	position: fixed;	
}
.conteneurArticle h1{
	font-weight: bold;
	font-size: 1.6vw;
	margin: 0.5vw 0 1vw 0;
	margin-left: 15vw;
    width: 50vw;
}
.texteArticle h2{
	font-weight:500;
	font-size: 1.2vw;
	margin: 0.5vw 0 0.5vw 0;
}
.texteArticle p{
	margin-bottom: 1vw;
	font-size: 1.2vw;
}
.source{
	font-size: 0.8vw;
	font-style: italic;
	max-width: 20vw;
	margin: 0.5vw 7vw 1vw 0;
	margin-top: -4vh;
	float: right;
}
.source > p {
	margin-bottom: 0.5vh;
	font-weight: 700;
}
sup{
	vertical-align: super;
	font-size: 1vw;
}
#carto {
	width: 20vw; 
	height: 20vh;
	margin-top: 0.7vw;
}
#carto img {
	width: 26vw; 
}

.tableau {
	font-size: 1vw;
	border: 1px solid #333;
	padding: 0.5vw;
	margin-bottom: 1vw;
}
.tableau td {
	padding: 0.2vw 0.5vw 0.2vw 0.5vw;
}
.tableau thead {
	background-color: #333;
    color: #fff;
	margin: 0.7vw;
}



.tableauPageSites {
	font-size: 1vw;
	border: 1px solid #333;
	padding: 0.5vw;
	margin-bottom: 2vw;
	text-align: center;
}

.tableauPageSites th {
	padding: 0.3vw;
	vertical-align : middle;
}

.tableauPageSites td {
	padding: 0.2vw;
}

.tableauPageSites thead {
	background-color: #333;
    color: #fff;
	margin: 0.5vw;
}


#cartoMeteo {
	width: 20vw;
	height: 20vh;
	margin-top: 0.7vw;
}

#cartoMeteo img {
	width: 20vw;
	height: 25vh;
	object-fit: cover;
}



/*___________ FIN PAGE "SITE OBSERVATION" ___________________________________*/

/*___________ PAGE "SITE ARTICLE" ___________________________________*/

body#siteArticle .imageArticle{
	/* overflow: hidden;
	position: fixed;
	object-position: top;
	object-fit: cover; */
	margin-top: 0;
}
/*___________ FIN PAGE "SITE ARTICLE" ___________________________________*/



/*___________ PAGE METHODE ___________________________________*/

/*_______ MENU SD ______*/
/*style fenêtre modale*/
.modal {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	/* top: 0; right: 0;
	bottom: 0; left: 0; */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .4s;
	/* background-color: #33333337; */
}

/*style contenu fenêtre modale*/
.modalContent {
	position: fixed;
	background-color: black;
	color: white;
	border-top: 2.5rem solid #ff3e53;
	width: 6.5vw;
	padding-left: 1vw;
}

.S1 {
	top: 36vh;
	left: 14.6vw;
	padding-bottom: 13vw;
}
.S2 {
	top: 36vh;
	left: 34vw;
	padding-bottom: 14vw;
}
.D1 {
	top: 33vh;
	left: 5.9vw;
	padding-bottom: 14vw;
}
.D2 {
	top: 34vh;
	left: 24vw;
	padding-bottom: 15vw;
}
.D3-4 {
	width: 21.1vw;
	top: 10vh;
	left: 28vw;
	padding-bottom: 1vw;
}
.contentS1 {
	padding-top: 1vh;
}
.nomSD {
	font-size: 1vw;
	font-weight: lighter;
}
.nomSD>span:first-child {
	font-size: 2.5vw;
	font-weight: 600;
}
.numeroSD {
	font-size: 1.5vw;
	font-weight: bolder;
}
.descriptionSD {
	font-size: 0.9vw;
	margin-top: 3vh;
	font-weight: 100;
}
.modalClose {
	text-decoration: none;
	color: white;
}

/*détection du clic*/
.modal:target {
	visibility: visible;
	opacity: 1;
}

/*_______ FIN MENU SD ______*/

/*_______ OUTILS METHODE ______*/

.tableauMethode {
	/* width: 40vw; */
	padding-top: 5vh;
	margin-left: 50vw;
	margin-right: 3vw;
}
.tableauMethode article {
	border: solid 1px black;
	margin-bottom: 5vh;
}
.tableauMethode ul {
	display: flex;
	border: solid 1px black;
	margin-top: 5vh;
}
.tableauMethode li{
	margin: 0 0.7vw 0 0.7vw;
	padding: 0 0.5vw 0 0.5vw;
}
.tableauMethode img{
	display: block;
	max-width: 6vw;
}
.tableauMethode article ul li:hover {
	background-color: white;
}
.tableauMethode article ul li:active {
	background-color: white;
}
.tableauMethode p {
	font-size: 1vw;
	text-transform: uppercase;
	margin: 1vw;
}
.tableauMethode {
	color: black;
}
/*___ EXCEPTIONS___*/

.tableau01 ul > li:nth-child(2) img{
	margin-top: 2.5vh;
}
.tableau01 ul > li:nth-child(3) img{
	margin-top: 1vh;
}

/*___ DESCRIPTION OUTILS _______*/
.noTransition {
	transition: none;
}
.outil {
	color: white;
	background-color: black;
	border: none;
	width: 49vw;
	height: auto;
	padding-top: 1vh;
	
}
.O1_6 {
	top: 25.8vh;
	right: 0;
}
.O7_11 {
	top: 57vh;
	right: 0;
}
.contentO1 {
	padding-top: 1vh;
	padding-bottom: 3vh;
}
.titreOutil, .nomOutil, .descriptionOutil {
	font-size: 1vw;
	color: white;
}

.nomOutil {
	font-weight: 600;
	margin-top: 2vh;
}
.descriptionOutil {
	margin-top: 1vh;
}


/*____ ENCART METHODE ______*/
.encartMethode {
	background-color: black;
	color: white;
	font-size: 1.2vw;
	font-weight: lighter;
	padding: 0.5vw 0.5vw 0.5vw 1vw;
	max-width: 58vw;
	margin-top: 15vh;
	position: relative;
	/* left: 0;
	bottom: 4vw; */
	z-index: 100;
}

/*____ VERS ACCUEIL ____*/

.versAccueil>img {
	width: 17vw;
	position: fixed;
	bottom: 0;
	right: 0;
}
/*_______ FIN OUTILS METHODE ______*/

/*___________ FIN PAGE METHODE ___________________________________*/


/*___________ PAGE SECTION PERSOS ___________________________________*/
#sectionPersos img {
	width: 100vw;
}
/*___________ FIN DE PAGE SECTION PERSOS ___________________________________*/


/*___________ PAGE "PRÉSENTATION SENTINELLES" ___________________________________*/
.sentinelles {
	padding-top: 5vw;
}
.sentinelles ul {
	display: flex;
	margin-left: 2vw;
	margin-right: 4vw;
}
.sentinelles li {
	margin-left: 5vw;
	margin-right: 5vw;
}
.sentinelles ul > li:nth-child(2) {
	margin-left: 2vw;
	margin-right: 3vw;
}
.sentinelles ul > li:nth-child(3) {
	margin-left: 0;
}
.sentinelles ul > li:nth-child(4) {
	margin-left: 2vw;
	margin-right: 0;
}
.sentinelles ul > li:nth-child(5) {
	margin-left: 0;
}



.symbolSentinelle {
	position: relative;
	padding: 0;
	/* width: 6.1vw; */
	display: block;
	cursor: pointer;
	overflow: hidden;
	/* margin-left: 2vw;
	margin-right: 3vw; */
	}
	
.symbolSentinelle img{
	height: 51vw;
	display: block;	
}

.contentSymbolSentinelle {
	opacity: 0;
	font-size: 1.2vw;
	/* text-transform: uppercase; */
	position: absolute;
	top: 28vh;
	left: 0;
	color: white;
	text-align: left;
	background-color: black;
	border-top: 3rem solid #ff3e53;
	width: 12vw;
	padding-bottom: 50vw;
	padding-left: 1vw;
	/* margin-top: 15vw; */
	/* -webkit-transition: all 400ms ease-out;
	-moz-transition: all 400ms ease-out;
	-o-transition: all 400ms ease-out;
	-ms-transition: all 400ms ease-out;
	transition: all 400ms ease-out; */
}
	
.symbolSentinelle .contentSymbolSentinelle:hover {
	opacity: 1;
}
.symbolSentinelle .contentSymbolSentinelle .nomSentinelle {
	height: 0;
	opacity: 1;
	/* transition-delay: 0s;
	transition-duration: 0s; */
	margin-top: 1vh;
}
.symbolSentinelle .contentSymbolSentinelle:hover .nomSentinelle {
	opacity: 1;
	/* transform: translateY(2.75vw);
	-webkit-transform: translateY(2.75vw); */
}
.nomSentinelle {
	/* margin-left: 1vw; */
	font-size: 1.3vw;
	font-weight: lighter;
}
.numero {
	font-size: 2vw;
	font-weight: bolder;
}
.contentSymbolSentinelle#D1 {
	transform: translateX(0.1vw);
} 

.contentSymbolSentinelle#S2 {
	transform: translateX(1vw);
}
.contentSymbolSentinelle#D3-4 {
	transform: translateX(4vw);
}
.nomSentinelle > img {
	width: 6vw;
	height: 6.5vw;
	margin-top: -0.5vw;
	margin-bottom: -1.5vw;
}
.descriptionSentinelle {
	font-size: 1.1vw;
	/* margin-left: 1vw; */
	margin-top: 5.5vw;
}
.descriptionSentinelle.drone {
margin-top: 11.7vw;
}
/*___________ FIN PAGE "PRÉSENTATION SENTINELLES" ___________________________________*/

/*___________ PAGES "PERSOS" ___________________________________*/
#presentationS_D {
	padding-top: 0;
}
#presentationS_D ul {
	margin-left: 0;
	margin-right: 0;
}

.nomPerso {
	font-size: 4vw;
	text-decoration: none;
	position: bottom;
}
.nomPerso small {
	font-size: 2.5vw;
}

/*___________ PAGE "PRESENTATION D1" __________*/
#presentationD1 #presentationS_D ul > li:nth-child(1) {
	margin-top: 5vw;
}
.details {
	background-image: url("IMAGES/persos/D1/fondEncartD1.jpg");
	background-color: black;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 90vw auto;	
	width: 80vw;
	height: 100vh;
	margin: 0;
	color: white;
}
.details article {
	margin-bottom: 2vh;
	display: flex;
}
.details img {
	width: 15vw;
	margin-right: 1vw;
}
.details h1 {
	margin-top: 31vh;
	margin-left: 5vw;
	font-size: 1vw;
}
.details h2 {
	margin-left: 1vw;
	margin-bottom: 1vh;
	font-size: 1.5vw;
}
.details p {
	font-size: 1.2vw;
	line-height: 3vh;
	margin-right: auto;
	margin-left: 1vw;
	font-weight: lighter;

}
.detailS_D {
	font-size: 2vw;
}
/*___________ FIN PAGE "PRESENTATION D1" __________*/
/*___________ PAGE "PRESENTATION D1" __________*/
#presentationD1 #detailApres {
	background-image: url("IMAGES/persos/D1/fondEncartD1.jpg");
	background-color: black;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 80vw auto;	
	width: 80vw;
	height: 100vh;
	margin: 0;
	color: white;
}
/*___________ FIN PAGE "PRESENTATION D1" __________*/
/*___________ PAGE "PRESENTATION S1" __________*/
#presentationS1 #presentationS_D ul > li:nth-child(2) {
	margin-top: 5vw;
}
#presentationS1 #detailAvant {
	background-image: url("IMAGES/persos/S1/fondEncartS1_00.jpg");
	background-position: 0 0;
	background-size: 20vw auto;	
	width: 20vw;
	height: 100vh;
	margin: 0;
	color: white;
}
#presentationS1 #detailAvant img {
	width: 11vw;
	margin-left: auto;
	margin-right: 0;
}
#presentationS1 #detailApres {
	background-image: url("IMAGES/persos/S1/fondEncartS1.jpg");
	background-size: 61vw auto;	
	width: 61vw;
	height: 100vh;
	margin: 0;
	color: white;
	margin-left: 2vw;
}
#presentationS1 #detailApres article:first-child{
	margin-top: 43vh;
}
#presentationS1 #detailApres article {
	margin-top: 6vh;
}
/*___________ FIN PAGE "PRESENTATION S1" __________*/

/*___________ PAGE "PRESENTATION D2" __________*/
#presentationD2 #presentationS_D ul > li:nth-child(2) {
	margin-top: 5vw;
}
#presentationD2 #detailAvant {
	background-image: url("IMAGES/persos/D2/fondEncartD2_00.jpg");
	background-position: 0 0;
	background-size: 38vw auto;	
	width: 38vw;
	height: 100vh;
	margin: 0;
	color: white;
}
#presentationD2 #detailAvant img {
	width: 11vw;
	margin-left: auto;
	margin-right: 0;
}
#presentationD2 #detailApres {
	background-image: url("IMAGES/persos/D2/fondEncartD2.jpg");
	background-position: 100% 0;
	background-size: 41vw auto;	
	width: 41vw;
	height: 100vh;
	margin: 0;
	color: white;
	margin-left: 5vw;
}
#presentationD2 #detailApres article:first-child{
	margin-top: 43vh;
}
#presentationD2 #detailApres article {
	margin-top: 6vh;
}
/*___________ FIN PAGE "PRESENTATION D2" __________*/

/*___________ PAGE "PRESENTATION S2" __________*/
#presentationS2 #presentationS_D ul > li:nth-child(2) {
	margin-top: 5vw;
}
#presentationS2 #detailAvant {
	background-image: url("IMAGES/persos/S2/fondEncartS2_00.jpg");
	background-position: 0 0;
	background-size: 58vw auto;	
	width: 58vw;
	height: 100vh;
	margin: 0;
	color: white;
}
#presentationS2 #detailAvant img {
	width: 11vw;
	margin-left: auto;
	margin-right: 0;
}
#presentationS2 #detailApres {
	background-image: url("IMAGES/persos/S2/fondEncartS2.jpg");
	background-position: 100% 0;
	background-size: 21vw auto;	
	width: 21vw;
	height: 100vh;
	margin: 0;
	color: white;
	margin-left: 5vw;
}
#presentationS2 #detailApres article:first-child{
	margin-top: 43vh;
}
#presentationS2 #detailApres article {
	margin-top: 6vh;
}
/*___________ FIN PAGE "PRESENTATION S2" __________*/

/*___________ PAGE "PRESENTATION D3-4" __________*/
#presentationD3-4 #presentationS_D ul > li:nth-child(2) {
	margin-top: 5vw;
}
#presentationD3-4 #detailAvant {
	background-image: url("IMAGES/persos/D3-4/fondEncartD3-4.jpg");
	background-position: 0 0;
	background-size: 76vw auto;	
	/* width: 100vw; */
	height: 100vh;
	margin: 0;
	color: white;
}
#presentationD3-4 #detailAvant img {
	width: 11vw;
	margin-left: auto;
	margin-right: 0;
}

#presentationD3-4 #detailApres article:first-child{
	margin-top: 43vh;
}
#presentationD3-4 #detailApres article {
	margin-top: 6vh;
}
/*___________ FIN PAGE "PRESENTATION D3-4" __________*/


/*___________ FIN PAGES "PERSOS" ___________________________________*/


/*___________ PAGE "PROJET ARTISTIQUE" ___________________________________*/

#siteArt .navProvisoire {
	margin-top: 60vh;
	z-index: 1;
}

.suricate {
	max-height: 30vh;
	float: left;
	position: fixed;
	bottom: 2vh;
	left: 2vw;
}
.imageArt{
	overflow: hidden;
	height: 60vh;
	position: fixed;
	object-position: top;
	object-fit: cover;
	/* margin-top: 10.5vh; */
}

.imageArt img{
	width: 100%;
	height: auto;
}
.source>img {
	max-height: 23vh;
	margin-top: 3vh;
}

/*_____ PAGE GRAVITE ZERO _____*/



/*___________ FIN PAGE "PROJET ARTISTIQUE" ___________________________________*/