::selection{
	background-color: #DDD;
}
::-moz-selection {
	background-color: #DDD;
}
@font-face {
  font-family: "Regular";
  src: url("./fonts/Carolineale-Regular.woff2") format("woff2"),
         url("./fonts/Carolineale-Regular.woff") format("woff");
 }
 @font-face {
  font-family: "Black";
  src: url("./fonts/Carolineale-Black.woff2") format("woff2"),
         url("./fonts/Carolineale-Black.woff") format("woff");
 }
 @font-face {
  font-family: "Bold";
  src: url("./fonts/Carolineale-Bold.woff2") format("woff2"),
         url("./fonts/Carolineale-Bold.woff") format("woff");
 }
 @font-face {
  font-family: "Light";
  src: url("./fonts/Carolineale-Light.woff2") format("woff2"),
         url("./fonts/Carolineale-Light.woff") format("woff");
 }
 @font-face {
  font-family: "Thin";
  src: url("./fonts/Carolineale-Thin.woff2") format("woff2"),
         url("./fonts/Carolineale-Thin.woff") format("woff");
 }
 @font-face {
  font-family: "Ultralight";
  src: url("./fonts/Carolineale-Ultralight.woff2") format("woff2"),
         url("./fonts/Carolineale-Ultralight.woff") format("woff");
 }
 @font-face {
    font-family: "ItalicRegular";
    src: url("./fonts/Carolineale-Regularitalic.woff2") format("woff2"),
           url("./fonts/Carolineale-Regularitalic.woff") format("woff");
   }
   @font-face {
    font-family: "ItalicBlack";
    src: url("./fonts/Carolineale-BlackItalic.woff2") format("woff2"),
           url("./fonts/Carolineale-BlackItalic.woff") format("woff");
   }
   @font-face {
    font-family: "ItalicBold";
    src: url("./fonts/Carolineale-Bolditalic.woff2") format("woff2"),
           url("./fonts/Carolineale-Bolditalic.woff") format("woff");
   }
   @font-face {
    font-family: "ItalicExtraBold";
    src: url("./fonts/Carolineale-ExtraBolditalic.woff2") format("woff2"),
           url("./fonts/Carolineale-ExtraBolditalic.woff") format("woff");
   }
   
   @font-face {
    font-family: "ItalicLight";
    src: url("./fonts/Carolineale-LightItalic.woff2") format("woff2"),
           url("./fonts/Carolineale-LightItalic.woff") format("woff");
   }
   @font-face {
    font-family: "ItalicThin";
    src: url("./fonts/Carolineale-ThinItalic.woff2") format("woff2"),
           url("./fonts/Carolineale-ThinItalic.woff") format("woff");
   }
   @font-face {
    font-family: "ItalicUltralight";
    src: url("./fonts/Carolineale-UltralightItalic.woff2") format("woff2"),
           url("./fonts/Carolineale-UltralightItalic.woff") format("woff");
   }
 body {
	font-family:"Regular";
	-webkit-font-smoothing: antialiased ;
	-moz-osx-font-smoothing: grayscale;
  }


#loader
{
	background-color: #ccc;
	font-family: "Regular";
}
.credits {
	display: none;
	position: absolute;
	bottom: 150px;
}
#goSite {display:none;
	position: absolute;
	bottom: 50px;
	padding-left: 6px;
cursor : default;
}
.enterIcon {
	border  :  none;
	position: absolute;
	margin-top: 0px;
	left:-10px;
	display: inline-block;
	-webkit-transition: margin-right 0.4s, margin-left 0.4s, margin-top 0.4s;
	transition: margin-right 0.4s, margin-left 0.4s, margin-top 0.4s;
}
.enterIcon:before {
	content:  '\2193';
}

#goSite:hover .enterIcon {
	margin-top:6px;
}
#site
{
	top:100vh;
}
.anim {
}
a {
	text-decoration: dotted;
	color: inherit;
}
a:hover {
	color: inherit;
}
.fontN {
	font-family: "Regular";
	font-size: 22px;
	font-weight: normal;
}

.fontB {
	font-family: "Bold";
	font-weight: normal;
	font-size: 23px;
}
.fontCorps {
	font-family: "Regular";
	font-size: 17px;
	font-weight: normal;
}
.fontB2 {
	font-family: "Bold";
	font-weight: normal;
	
}
.fontplate1{
	font-family: "Regular";
	font-size: 60px;
	line-height: 64px;
	margin-right: 5%;
	font-weight: normal;
	
}
.fontplate2{
	font-family: "Regular";
	font-size: 25px;
	line-height: 30px;
	font-weight: normal;
}
#plate1 {
position: absolute;
height: 100vh;
padding-top:9%;
padding-left : 85px;
padding-right : 60%;
}
@-webkit-keyframes slideinPlate2 {
	from {
	 left:100vw;
	  
	}
  
	to {
	  left:0;
	}
  }
@keyframes slideinPlate2 {
	from {
	 left:100vw;
	  
	}
  
	to {
	  left:0;
	}
  }
#plate2 {
left : 100vw;
width: 100%;
height: 100vh;
padding-top:9%;
padding-left : 85px;
padding-right : 70%;
background-color: #FFF;
background-position-y: 95px;
position: absolute;
z-index: 10;
animation: slideinPlate2 2s ease-in-out 2s 1 normal forwards;
-webkit-animation: slideinPlate2 2s ease-in-out 2s 1 normal forwards;
}

@-webkit-keyframes slideinPlate3 {
	from {
	 left:100vw;
	}
	to {
	  left:0;
	}
  }
@keyframes slideinPlate3 {
	from {
	 left:100vw;
	}
	to {
	  left:50vw;
	}
  }
  @-webkit-keyframes slideinPlate3 {
	from {
	 left:100vw;
	}
	to {
	  left:0;
	}
  }
@keyframes slideinPlate3 {
	from {
	 left:100vw;
	}
	to {
	  left:50vw;
	}
  }
  
#plate3 {
position: absolute;
background-repeat: no-repeat;
background-position-y: 95px;
color: #fff;
left: 100vw;
width: 50%;
height: 100vh;
padding-top:12%;
background-color: #000;
z-index: 20;

animation: slideinPlate3 1s ease-in-out 5s 1 normal forwards;
	-webkit-animation: slideinPlate3 1s ease-in-out 5s 1 normal forwards;}


.iLoad {
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	display: none;
	width: 50%;
	height: 100%;
}

@media screen and (max-width: 1024px) {
	#plate1, #plate2 {
		padding-top: 15%;
		padding-left : 30px;	
	}	

	#plate3 {
		background-position-y: 52px;
		padding-top: 10%;
	}
	.iLoad {
		background-position-y: 52px;
	}
	.fontplate1{
		font-size: 40px;
		line-height: 44px;
		padding-top: 12%
	}
	.fontplate2{
		font-size: 18px;
		line-height: 22px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	#plate1, #plate2 {
		padding-top: 10%;
		padding-left : 55px;
	 }	
	#plate3 {
		background-position-y: 73px;
		padding-top: 10%;
	 } 	 
	.iLoad {
		background-position-y: 73px;
	}
	.fontplate1{
		font-size: 40px;
		line-height: 44px;
		padding-top: 10%;
		padding-left: 55px;
	}
	.fontplate2{
		font-size: 16px;
		line-height: 20px;
		padding-top: 10%;
		padding-left: 55px;
	}
 }

@media screen and (min-width: 1301px) and (max-width: 1500px) {
	#plate1, #plate2 {
		padding-top: 10%;
		padding-left :85px;
	}	
	#plate3 {
		background-position-y: 73px;
		padding-top: 10%;
	} 	 
	.iLoad {
		background-position-y: 73px;
	}
	.fontplate1{
		font-size: 44px;
		line-height: 48px;
		margin-right: 10%;
		padding-left: 85px;
	}
	.fontplate2{
		font-size: 20px;
		line-height: 24px;
		padding-left: 85px;
	}
}
@media screen and (min-width: 1501px) and (max-width: 2500px) {
	#plate1, #plate2 {
		padding-top: 13%;
		padding-left : 90px;
		margin-right: 10%;
	}	
	#plate3 {
		background-position-y: 73px;
		padding-top: 10%;
	} 	 
	.iLoad {
		background-position-y: 73px;
	}
	.fontplate1{
		font-size: 54px;
		line-height: 58px;
		margin-right: 30%;
		padding-left: 90px;
	}
	.fontplate2{
		font-size: 25px;
		line-height: 29px;
		padding-left: 90px;
		margin-right: 40%;
	}
}
@media screen and (min-width: 1901px) and (max-width: 2500px) {#plate2 {padding-right: 77%;}}
	@media screen and (min-width: 2501px) and (max-width: 3600px) {
	#plate1, 	#plate2 {
		padding-top: 15%;
		padding-left : 90px;
		margin-right: 12%
	}	
		#plate2 {padding-right: 80%;}
	#plate3 {
		background-position-y: 73px;
		padding-top: 12%;
	} 	 
	.iLoad {
		background-position-y: 73px;
	}
	.fontplate1{
		font-size: 54px;
		line-height: 58px;
		margin-right: 35%;
		padding-left: 90px;
	}
	.fontplate2{
		font-size: 25px;
		line-height: 29px;
		padding-left: 90px;
		
	}
}
@media screen and (max-width: 1024px) {
    .fontN {
		font-family: "Regular";
		font-size: 16px;
		font-weight: normal;
	}
	.fontB {
		font-family: "Bold";
		font-weight: normal;
		font-size: 16px;	
	}
	.fontCorps {
		font-family: "Regular";
		font-size: 12px;
		font-weight: normal;
	}
	
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
    .fontN {
		font-family: "Regular";
		font-size: 20px;
		font-weight: normal;
	}
	.fontB {
		font-family: "Bold";
	    font-weight: normal;
		font-size: 20px;
	}
	.fontCorps {
		font-family: "Regular";
		font-size: 14px;
		font-weight: normal;
	}
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
	.fontCorps {
		font-family: "Regular";
		font-size: 14px;
		font-weight: normal;
	}
}
@media screen and (min-width: 1680px) and (max-width: 1900px) {
	.fontCorps {
		font-family: "Regular";
		font-size: 17px;
		font-weight: normal;
	}
}
@media screen and (min-width: 1901px) and (max-width: 3500px) {
	.fontCorps {
		font-family: "Regular";
		font-size: 22px;
		font-weight: normal;
	}
}
#carouselG {
	overflow: hidden;
}

#carouselG>div:first-child{
	transition:  margin-top 1s;
}
#carouselD {
	overflow: hidden;
}

#carouselD>div:first-child {
	transition:  margin-top 1s;
}
.notesCorps {
 	font-family: "Regular";
	font-size: 15px;
	font-weight: normal;
}

.notesB {
	background-color: black;
	color : white;
}
.noteW {
	background-color: white;
	color :  black;
}



@media screen and (max-width: 1024px) {
	.notesCorps{
	font-family: "Regular";
	font-size: 10px ;
	font-weight: normal;
	}
	
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.notesCorps {
	font-family: "Regular";
	font-size: 12px; 
	font-weight: normal;
	}
	
}
@media screen and (min-width: 1301px) and (max-width: 1400px) {
	.notesCorps{
	font-family: "Regular";
	font-size: 12px; 
	font-weight: normal;
	}
	
}

.container {
	position: fixed;
	height: 100vh;
	width: 100%;
	
}


.row2 {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
  	border-left-color: #FFFFFF;
  	border-left-style: solid;
  	border-left-width: 100px;
  	border-right-color: #000000 ;
  	border-right-style: solid;
  	border-right-width: 100px;
  	border-top-width: 00px;
  	border-top-style :  none;
  	border-bottom-width: 0px;
  	border-bottom-style: none;
}

.barreTitre {

	height: 95px;
	z-index: 100;
}
.barreTitre .contentG2,.barreTitre .contentD2 {
	height: 95px;
}
.barreTitre .titre {
	top: 40px;
	height :  35px;
}

@media screen and (max-width: 1024px) {
   .barreTitre {
		height: 52px;
		z-index: 100;
	}
	.barreTitre .contentG2,.barreTitre .contentD2 {
		height: 52px;
	}
	.barreTitre .titre {
		top: 22px;
		height :  15px;
	}
	
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
   .barreTitre {
		height: 73px;
		z-index: 100;
	}
	.barreTitre .contentG2,.barreTitre .contentD2 {
		height: 73px;
	}
	.barreTitre .titre {
		top: 27px;
		height :  25px;
	}
	
}


.barreContenu1 {
	height: calc((100vh - 860px)/2); 
	width :  100%;	
}
.barreContenu1 .contentG2,.barreContenu1 .contentD2 {
	height: 1000px;
}
@media screen and (max-width: 1024px) {
	.barreContenu1 {
		height: calc((100vh - 477px)/2); 
	}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.barreContenu1 {
		height: calc((100vh - 633px)/2); 
	}
}
#expandG2 {
	height: 460px;
	cursor: url(icons/fleches_Panneaux_droit_noir.png) 30 15,auto;
}
#expandD2 {
	height: 460px;
	cursor: url(icons/fleches_Panneaux_gauche_blanc.png) -3 15 ,auto;
}
#expandG3 {
	
	cursor: url(icons/fleches_Panneaux_droit_noir.png) 30 15,auto;
}
#expandD3 {
	
	cursor: url(icons/fleches_Panneaux_gauche_blanc.png) -3 15 ,auto;
}
.expandCroixNoir {
	cursor: url(icons/croix_noir2.png) 16 16 ,auto !important;
}
.expandCroixBlanc {
	cursor: url(icons/croix_blanche2.png) 16 16 ,auto !important;
}
#expandG {

}
#expandD {
	
}

.expandDIcon, .expandGIcon {
	border  :  none;
	margin-right: 6px;
	margin-left :  6px;
	display: inline-block;
	-webkit-transition: margin-right 0.4s, margin-left 0.4s;
	transition: margin-right 0.4s, margin-left 0.4s;
}
.expandDIcon:before {
	content:  '\2190';
}

.expandGIcon:before {
	content :  '\2192';
}

.expandTIcon {
	margin-left :  6px;
	display: inline-block;
	
}
.expandTIcon:before {
	content :  '';
}

.barreTitre .titreG1:hover .expandGIcon:not(.expandGIconOn) {
	margin-left: 10px;
}
.barreTitre .titreG1:hover .expandGIconOn,
.barreFooter .titreG1:hover .expandTIconOn {
	transform: rotate(-90deg);
}

.barreTitre .titreD2:hover .expandDIcon:not(.expandDIconOn) {
	margin-right : 10px;
}
.barreTitre .titreD2:hover .expandDIconOn {
	transform: rotate(90deg);
}

.expandGIconOn, .expandTIconOn, .expandDIconOn {
	-webkit-transition: -webkit-transform .25s ease-in-out;
	transition:         transform .25s ease-in-out;
	transform-origin: 50% 60%;
}
.expandGIconOn {
	margin-left: 6px;
}
.expandGIconOn:before {
	content : '\00D7';
}

.expandDIconOn {
	margin-right: 6px;
}
.expandDIconOn:before {
	content : '\00D7';
}

.expandTIconOn:before {
	content : '\00D7';
}


.barreContenu2 {
	height: 675px;
	width :  100%;
}

.barreContenu2>div {
	height: 675px;
}

@media screen and (max-width: 1024px) {
	.barreContenu2 {
		height: 365px;
	}
	.barreContenu2>div {
		height: 365px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.barreContenu2 {
		height: 485px;
	}
	.barreContenu2>div {
		height: 485px;
	}
	
}


.barreFooter {
	height: 90px;
}
.barreFooter .titre {
	bottom: 35px;
}

@media screen and (max-width: 1024px) {
.barreFooter {
	height: 60px;
}
.barreFooter .titre {
	bottom: 30px;
}

}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
.barreFooter {
	height: 75px;
}
.barreFooter .titre {
	bottom: 33px;
}

}


.titre {
	position: absolute;
	display:inline-block;
	width: fit-content;
	min-height: 1px;
	z-index: 100;
}
.titreG1 {
	left: 0px;
	color: black;
	padding-right: 0px;	
}

.titreD1 {
	text-align: left;
	right: 0px;
	color: black;
    transition: color 1s ease;
}
.titreD1E {
	color: white;
}



.contentExtendG .titreD1E{
	color: white;
	transition:  color 0s ease;
}


.titreG2 {
	left: 0px;
	color: white;
	transition: color 1s ease;
	
}
.titreG2E {
	color: black;
}
/*infos*/
.infos a {
	text-decoration: none;
}
.infoG1 {
	left: 20px;
	color: black;
	padding-right: 0px;	
	transition: color 1s ease;

}

.infoD1 {
	text-align: left;
	right: 50px;
	color: black;
	transition: color 1s ease;

}

.barreTitre .titreG2 {
	cursor: url(icons/fleches_Article_precedent_blanc.png) 15 0,auto;;
}
.barreTitre .titreG2E {
	cursor : url(icons/fleches_Article_precedent_noir.png)  15 0,auto;
}
.firstArticle {
	cursor:  default !important; 
}
.barreFooter .titreG2 {
	cursor: url(icons/fleches_Article_suivant_blanc.png) 15 30,auto;;
}
.barreFooter .titreG2E {
	cursor : url(icons/fleches_Article_suivant_noir.png)  15 30,auto;
}

.contentExtendD .titreG2E{
	color :  black;
	transition:  color 0s ease;
}
.titreD2 {
	text-align: right;
	right: 0px;
	color: white;

}	

.titreD2E {
	text-align: right;
	right: 0px;
	color: black;

}	
.barreTitre .titreG2 span:before, .barreTitre .titreG2 span:after {

transition: none;
width: 100%;
opacity: 1;
content: "";
position: absolute;
bottom: 2px;
height: 0.1em;
margin: 0px 0 0;
}

.barreTitre .titreD1 span .titreD1E span .titreG2E span, .barreFooter .titreG1 span, .barreFooter .titreG2 span  {
	transition: width 0.2s ease-in-out, opacity  0.2s ease-in-out;
  }

  .barreTitre .titreD1 span:before, .barreTitre .titreD1 span:after,
  .barreFooter .titreG1:not(.surligner) span:before, .barreFooter .titreG1:not(.surligner) span:after,
  .barreFooter .titreG2 span:before , .barreFooter .titreG2 span:after,
  .infos .barreTitre  .titreG1 span:before , .infos .barreTitre  .titreG1 span:after,
  .infos .barreTitre  .titreD2 span:before , .infos .barreTitre  .titreD2 span:after   {
	content: "";
	position: absolute;
	bottom: 2px;
	width: 0px;
	height: 0.1em;
	margin: 0px 0 0;
	transition: width 0.2s ease-in-out, opacity  0.2s ease-in-out;
	transition-duration: 0.75s;
	opacity: 0;
  }
  .surligner span:before, .surligner span:after  {
	  transition: none;
	  width: 62px;
	opacity: 1;
	content: "";
	position: absolute;
	bottom: 6px;
	height: 0.1em;
	margin: 0px 0 0;
  }
  .barreFooter .titreG2 span:before , .barreFooter .titreG2 span:after {
	bottom: 0px;
  }
  .barreFooter .titreG1 span:before, .barreFooter .titreG1 span:after
   {
	bottom: 1px !important;
  }
  .barreFooter .titreG2:not(.titreG2E) span:before,
  .barreTitre .titreD1E:not(.titreAbout) span:before,
  .barreTitre .titreG2:not(.titreG2E) span:before
   {
	left: 0;
	background: linear-gradient(to bottom, #FFF 0.05em, rgba(255,255,255,0.5) 0.06em) !important;
  }
  .barreFooter .titreG2E span:before, .barreTitre .titreD1 span:before,
  .barreFooter .titreG1 span:before, .surligner span:before, 
  .barreTitre .titreG2E span:before,
  .infos .barreTitre  .titreG1 span:before , .infos .barreTitre  .titreG1 span:after,
  .infos .barreTitre  .titreD2 span:before , .infos .barreTitre  .titreD2 span:after    {
	left: 0;
	background: linear-gradient(to bottom, #000 0.05em, rgba(0,0,0,0.5) 0.06em)
  }
  .barreTitre .titreD1:hover span:before, .barreTitre .titreD1:hover span:after,
  .barreFooter .titreG1:hover span:before, .barreFooter .titreG1:hover span:after,
  .barreFooter .titreG2:hover span:before , .barreFooter .titreG2:hover span:after,
  .infos .barreTitre .titreG1:hover span:before , .infos .barreTitre .titreG1:hover span:after,
  .infos .barreTitre  .titreD2:hover span:before , .infos .barreTitre  .titreD2:hover span:after     {
	width: 100%;
	opacity: 1;
  }

  .barreFooter .titreG1:hover span:before, .barreFooter .titreG1:hover span:after {
	width:62px;
}

@media screen and (max-width: 1024px) {
	.barreTitre .titreD1 span:before, .barreTitre .titreD1 span:after,
	.infos .barreTitre  .titreG1 span:before , .infos .barreTitre  .titreG1 span:after,
	.infos .barreTitre  .titreD2 span:before , .infos .barreTitre  .titreD2 span:after 
	 {
		bottom: -8px;
	  }
  	.barreFooter .titreG2 span:before , .barreFooter .titreG2 span:after  {
	bottom: 0px !important;

  }
  .barreFooter .titreG1 span:before, .barreFooter .titreG1 span:after
  {
   bottom: 1px !important;

 }
	.barreTitre .titreD1:hover span:before, .barreTitre .titreD1:hover span:after {
	
	  }

	  .barreTitre .titreG2 span:before, .barreTitre .titreG2 span:after {
	
		bottom: -8px !important;

		}
	.barreFooter .titreG1:hover span:before, .barreFooter .titreG1:hover span:after, 
	.surligner span:before, .surligner span:after {
			width:43px  !important;
		}
		
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.barreTitre .titreD1 span:before, .barreTitre .titreD1 span:after,
	.infos .barreTitre  .titreG1 span:before , .infos .barreTitre  .titreG1 span:after,
	.infos .barreTitre  .titreD2 span:before , .infos .barreTitre  .titreD2 span:after 
	  {
		bottom: -4px;
	  }
  	.barreFooter .titreG2 span:before , .barreFooter .titreG2 span:after  {
	bottom:  0px !important;
  }
  .barreFooter .titreG1 span:before, .barreFooter .titreG1 span:after
   {
	bottom: 1px !important;
  }
	.barreTitre .titreD1:hover span:before, .barreTitre .titreD1:hover span:after {

	}
	.barreTitre .titreG2 span:before, .barreTitre .titreG2 span:after {
	
		bottom: -4px !important;

		}
	.barreFooter .titreG1:hover span:before, .barreFooter .titreG1:hover span:after,
	.surligner span:before, .surligner span:after {
			width:53px  !important;
		}		
}

#titreCaro {
	z-index: 5005;
}
#titreCaro, .titreG1, .titreD2 {
	cursor: default;
}
#info {
	z-index: 5005;

}
.surligner {
	
}
.infos {
	top: 0;
	width :  100%;
	position: fixed;
	z-index: 5000;

	overflow-x:  none;
	overflow-y: auto;
	background-color: #DDD;

	padding-top: 45px;
	padding-bottom: 100px;
	height: 100%;
	display: none;
	cursor: url(icons/croix_noir_gris.png) 16 16 ,auto !important;
}
.infos .titreD2 {
	color:#000;
}
.infosG {
width: calc(50% - 85px);
position: absolute;
left:0;
height:73%;
margin-right:65%;

}
.infosG1 {
width:66%;
padding-right:2%;
padding-left: 2%;
right:24%;
position:absolute; 
height:100%;
overflow-y: auto;
}
.infosD {
	width: calc(50% - 85px);
	position: absolute;
	left:50%;

	height:70%;
	margin-right:2%;
}
.infosD1 {
width:35%;
position:absolute;
left:0;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
}
.infosD2 {
width:35%;
position:absolute;
left:35%;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
}

	@media screen and (max-width: 1024px) {
		.infosG, .infosD {
		
			width: calc(50% - 30px);
			height:74%;
		}

		.infosG1 {

     width: 55%;
    padding-right: 2%;
    padding-left: 2%;
    left:4.5%;
    position: absolute;
    height: 100%;
    overflow-y: auto;
    font-size: 13px;
}
	.infosD1 {
width:45%;
position:absolute;
left:0;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
			font-size: 13px;
}
.infosD2 {
width: 45%;
    position: absolute;
    left: 48%;
    padding-right: 2%;
    padding-left: 2%;
    height: 100%;
    overflow-y: auto;
	font-size: 13px;
}
	
	}
	@media screen and (min-width: 1025px) and (max-width: 1500px) {
		.infosG, .infosD {
			width: calc(50% - 50px);
			height:70%;
		}	
		
.infosD1 {
width:35%;
position:absolute;
left:0;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
			font-size: 15px;
}
.infosD2 {
width: 35%;
    position: absolute;
    left: 36%;
    padding-right: 2%;
    padding-left: 2%;
    height: 100%;
    overflow-y: auto;
	font-size: 15px;
}
	}
@media screen and (min-width: 1501px) and (max-width : 2500px) {
		.infosG, .infosD {
			width: calc(50% - 50px);
			height:73%;

		}
		.infosG1 {

     width: 55%;
    padding-right: 2%;
    padding-left: 2%;
    left:75px;;
    position: absolute;
    height: 100%;
    overflow-y: auto;
    font-size: 15px;
}

.infosD1 {
width:35%;
position:absolute;
left:-5%;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
	font-size:15px;
}
.infosD2 {
width:35%;
position:absolute;
left:33%;
padding-right:2%;
padding-left: 2%;
height:100%;
overflow-y: auto;
	font-size:15px;
}
}
@media screen and (max-width: 960px) {
	.infosG1 {left:6%;}}

	@media screen and (min-width: 961px) and (max-width: 1024px) {
		.infosG, .infosD {
		
			width: calc(50% - 30px);
			height:74%;
		}

		.infosG1 {
	
     width: 55%;
    padding-right: 2%;
    padding-left: 2%;
    right: 25%;
    position: absolute;
    height: 100%;
    overflow-y: auto;
    font-size: 13px;
}
	.infosD1 {
width:45%;
position:absolute;
left:0;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
			font-size: 13px;
}
.infosD2 {
width: 45%;
    position: absolute;
    left: 48%;
    padding-right: 2%;
    padding-left: 2%;
    height: 100%;
    overflow-y: auto;
	font-size: 13px;
}
	
	}

@media screen and (max-width: 1300px) and (min-width: 1025px){.infosG1 {
	
  right: 27%;
    
}}
@media screen and (max-width: 1500px) and (min-width: 1301px){.infosG1 {
	    right: 21.5%;  
}}

@media screen and (max-width: 1900px) and (min-width: 1501px){.infosG1 {
	       right: 24.5%;
}}
@media screen and (min-width: 1901px) and (max-width : 2500px) {
		.infosG, .infosD {
			width: calc(50% - 50px);
			height:78%;

		}
		.infosG1 {

     width: 55%;
    padding-right: 2%;
    padding-left:1.5%;
    left:75px;
	
    position: absolute;
    height: 100%;
    overflow-y: auto;
    font-size: 17px;
}

.infosD1 {
width:35%;
position:absolute;
left:-5%;
padding-right:2%;
padding-left: 2%;
height:100%;
	overflow-y: auto;
	font-size:17px;
}
.infosD2 {
width:35%;
position:absolute;
left:33%;
padding-right:2%;
padding-left: 2%;
height:100%;
overflow-y: auto;
	font-size:17px;
}
}
@media screen and (min-width: 2501px) and (max-width : 3500px) {
		.infosG, .infosD {
			width: calc(50% - 50px);
			height:85%;}
	.infosG1 {    right: 28.8%;    font-size: 17px; }
.infosD1 {

	font-size:17px;
}
.infosD2 {
	font-size:17px;
}
}

.infosActif {
	top :  0px;
	cursor : url(icons/fleches_Article_suivant_noir.png)  00 9,auto;
}

.infoActif {
cursor : url(icons/fleches_Article_suivant_noir.png)  00 9,auto !important;	
}


.notes {
	text-decoration: underline;
}



.FVliga {
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings: "liga", "clig";
-webkit-font-feature-settings: "liga", "clig";
font-feature-settings: "liga", "clig";
}

.FVdlig {
font-variant-ligatures: discretionary-ligatures;
-moz-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
font-feature-settings: "dlig";
}

.FVsmcp {
font-variant-caps: small-caps;
-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";
}

.FVc2sc {
font-variant-caps: all-small-caps;
-moz-font-feature-settings: "c2sc", "smcp";
-webkit-font-feature-settings: "c2sc", "smcp";
font-feature-settings: "c2sc", "smcp";
}

.FVlnum {
font-variant-numeric: lining-nums;
-moz-font-feature-settings: "lnum";
-webkit-font-feature-settings: "lnum";
font-feature-settings: "lnum";
}

.FVtnum {
font-variant-numeric: tabular-nums;
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}
.FVtnumlnum {
        font-variant-numeric: tabular-nums lining-nums;   
}

.FVfrac {
font-variant-numeric: diagonal-fractions;
-moz-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
font-feature-settings: "frac";
}

.FVordn {
font-variant-numeric: ordinal;
-moz-font-feature-settings: "ordn";
-webkit-font-feature-settings: "ordn";
font-feature-settings: "ordn";
}

.FVsups {
font-variant-position: super;
-moz-font-feature-settings: "sups";
-webkit-font-feature-settings: "sups";
font-feature-settings: "sups";
}


.contentG2 {
	display:inline-block;
	position: absolute;
	width: 50%;
	min-height: 1px;
	left: 0px;
	background-color: rgba(255, 255, 255, 1);
	color: #000000;
	z-index: 1;
	
	transition: width 1s ease-in-out,z-index 1s linear;
}

.contentD2 {
	display:inline-block;
	position: absolute;
	width: calc(50%-80px);
	min-height: 1px;
	right: 0px;
	background-color: rgba(0, 0, 0, 1);
	color: #ffffff;
	z-index: 1;

	transition: width 1s ease-in-out,z-index 1s linear;
}

.contentG2 div:first-Child {
	transition: left 1s ease-in-out;
}
.contentG2 div:last-Child {
	transition: left 1s ease-in-out;
}
.contentD2 div:first-Child {
	transition: left 1s ease-in-out;
}
.contentD2 div:last-Child {
	transition: left 1s ease-in-out;
}
.contentG2 div {
	color: black;
}
.contentD2 div {
	color: white;
}
.contentExtendG{
	z-index: 100;
	transition:  width 1s ease-in-out, z-index 0s linear;
}
.contentExtendD{
	z-index: 100;
	transition:  width 1s ease-in-out, z-index 0s linear;
}
.col1 {
	display:inline-block;
	position: absolute;
	width: 100%;
	right: 0px;
	overflow-y: auto;
	overflow-x: hidden;
}

.col2 {
	display: inline-block;
	position: absolute;
	width: 100%;
	right: 0px;
	overflow-y: auto;
	overflow-x: hidden;
}

.col3{
	display: inline-block;
	position: absolute;
	overflow-y: auto;
	overflow-x: hidden;
}

.col3X {
	display: inline-block;
	position: absolute;

	overflow-y: auto;
	overflow-x: hidden;

	
}
.colonnes3 {
		-moz-column-count: 3;
	-moz-columns: 3;
	-webkit-columns: 3;
	columns: 3;
	height:  auto !important;
}

.infos div::-webkit-scrollbar {
	width: 10px;
}
.infos div::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px 2px rgb(230,230,230);
    border-left: solid 8px transparent;
}
.infos div::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 2px 2px rgb(204,204,204);
	border-left: solid 8px transparent;
} 


.contentG2 .article .panneau .col1::-webkit-scrollbar,
.contentG2 .article .panneau .col2::-webkit-scrollbar,
.contentG2 .article .panneau .col3::-webkit-scrollbar,
.contentG2 .article .panneau .col3X::-webkit-scrollbar {
	width: 10px;
} 

.contentG2 .article .panneau .col1::-webkit-scrollbar-track,
.contentG2 .article .panneau .col2::-webkit-scrollbar-track,
.contentG2 .article .panneau .col3::-webkit-scrollbar-track,
.contentG2 .article .panneau .col3X::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px 2px rgb(230,230,230);
    border-left: solid 8px transparent;
}
.contentG2 .article .panneau .col1::-webkit-scrollbar-thumb,
.contentG2 .article .panneau .col2::-webkit-scrollbar-thumb,
.contentG2 .article .panneau .col3::-webkit-scrollbar-thumb,
.contentG2 .article .panneau .col3X::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 2px 2px rgb(204,204,204);
	border-left: solid 8px transparent;
} 

.contentD2 .article .panneau .col1::-webkit-scrollbar,
.contentD2 .article .panneau .col2::-webkit-scrollbar,
.contentD2 .article .panneau .col3::-webkit-scrollbar,
.contentD2 .article .panneau .col3X::-webkit-scrollbar {
	width: 10px;
} 

.contentD2 .article .panneau .col1::-webkit-scrollbar-track,
.contentD2 .article .panneau .col2::-webkit-scrollbar-track,
.contentD2 .article .panneau .col3::-webkit-scrollbar-track,
.contentD2 .article .panneau .col3X::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px 2px rgb(77,77,77);
    border-left: solid 8px transparent;
}


.contentD2 .article .panneau .col1::-webkit-scrollbar-thumb,
.contentD2 .article .panneau .col2::-webkit-scrollbar-thumb,
.contentD2 .article .panneau .col3::-webkit-scrollbar-thumb,
.contentD2 .article .panneau .col3X::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 2px 2px rgb(128,128,128);
	border-left: solid 8px transparent;
} 


.offset1 {

}
.offset2 {

}
.stepSVG {
	width: inherit;
}
.stepSVG div {
	width:100%;
	position: absolute;
	display: none;
}
.stepSVG div:first-Child {
	/*
	display: grid;
	display: -moz-grid;
	*/
	display: flex;
}


.article {
  height: 100%;
}

.compteur {
	height:  75px !important;
	transition: margin-left 1s  ease-in-out !important;
		font-family: "Regular";
	font-size: 22px;
	font-weight: normal;
	font-variant-numeric: diagonal-fractions;
}

@media screen and (max-width: 1024px) {
.compteur {
	height:  30px !important;
	font-size: 19px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
.compteur {
	height:  52px !important;
	font-size: 20px;
}
	
}



.panneau {

position: absolute;
display: none;
height: 600px; 
}
.panneau div {
	height:  600px;
}

@media screen and (max-width: 1024px) {
	.panneau {
	
		height: 335px; 
	}
	.panneau div {
		height: 335px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.panneau {

		height: 433px; 
	}
	.panneau div {
		height: 433px;
	}
	
}




.article>div:nth-child(2) {
	display: block;
	
}

.contentG2 .vide {
/*	background: linear-gradient(to bottom left, transparent 49.9%, black 50%, transparent 50.1%)*/
stroke-width:1;
stroke:black;
}
.contentD2 .vide {
/*	background: linear-gradient(to bottom left, transparent 49.9%, white 50%, transparent 50.1%)*/
stroke-width:1;
stroke:white;
}
/*
@media screen and (max-width: 1024px) {
	.contentG2 .vide {
		background:	linear-gradient(to bottom left, transparent 49.85%, black 50%, transparent 50.15%)
	}
	.contentD2 .vide {
		background: linear-gradient(to bottom left, transparent 49.85%, white 50%, transparent 50.15%)
	}
}
@media screen and (min-width: 1025px) and (max-width: 1300px) {
	.contentG2 .vide {
		background: linear-gradient(to bottom left, transparent 49.87%, black 50%, transparent 50.13%)
	}
	.contentD2 .vide {
		background:	linear-gradient(to bottom left, transparent 49.87%, white 50%, transparent 50.13%)
	}
}
*/
.curseurLeftB {

	cursor: url(icons/fleches_Slider_droit_noir.png) 30 15,auto;
}
.noCursor {
	cursor : default !important;
}

.curseurRightB {
	cursor: url(icons/fleches_slider_gauche_noir.png) 00 15,auto;
}


.curseurLeftW {

	cursor: url(icons/fleches_Slider_droit_blanc.png) 30 15,auto;
}


.curseurRightW {
	cursor: url(icons/fleches_slider_gauche_blanc.png) 00 15,auto;
}
.hideGrid{
	display: none !important;
}
.showGrid{
	/*
	display: grid !important;
	display: -moz-grid !important;
	*/
	display : flex !important;
}
/********************/
/*
.imageH {
	/*
	display: grid;
	display: -moz-grid;
	*/
/*
}
.imageH img, .imageH div {
	margin:  auto;
	max-height: 100%;
	max-width: -webkit-fill-available;
	max-width: -moz-available;
}
.imageV {
	
}
.imageV img {	
	max-height: 100%;
	max-width: -webkit-fill-available;
	max-width: -moz-available
}
.imageV img[src$=".svg"] {
	height: 100%;
}
/*************************************/

.imageH img, .imageH div {
	margin:  auto auto auto auto;
}
.imageV img, .imageV div {		
	margin : 0 auto auto 0;
}

.imageH2 img, .imageH2 div{
	margin:  0 auto auto auto;
}

.imageH2 img, .imageH2 div,
.imageV img, .imageV div,
.imageH img, .imageH div 
{
	max-height: 100%;
	max-width: -webkit-fill-available;
	max-width: -moz-available;
}

.notransition * { 
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
} 
.titreAbout {
	color : black !important;
}