@charset "utf-8";
/* CSS Document */
/*-----------Généralités-----------*/
html {
  scroll-behavior: smooth;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #1b223f;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  outline: none;
}
h1 {
  margin: 0 auto;
  width: max-content;
  border: 0;
  text-align: left;
  vertical-align: middle;
  color: #fff;
padding-top: 5%;  font-size: 6em;
  line-height: 1em;
}
.petit{
	  font-size: .3em;line-height: .2em;
}
#ss-h1{
    margin: 50px 0 0 28%;
    border: 0;
    text-align: left;
    vertical-align: middle;
    color: #fff;
    font-size: 1em;
    display: block;
}
h2 {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 1em;
  font-size: 2.5em;
  margin-bottom: 50px;
}
#title-intro {
  margin: 0;
}
#title-intro:before {
  background-image: url('images/before_h2.gif');
  background-size: 40px 50px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 40px;
  height: 50px;
padding-right: 20px;
    margin-bottom: 20px;
    margin-top: -20px;
    content: "";
    transform: rotate(-5deg);
}

#chap01 h3 {
  padding: 0;
}
h3 {
  margin: 0;
  padding: 50px 0 0 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 200;
  text-transform: uppercase;
  line-height: 2em;
  color: #4eddb8;
  font-size: 1em;
}
h4 {
  font-size: 2.5em;
  width: fit-content;
  margin: 50px auto 20px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  clear: both;
  text-transform: uppercase;
  color: #4eddb8;
  /*border: 1px solid #4eddb8;*/
  position: relative;
}
.h4bis{margin: 0 auto 20px;}
.ss-h4{font-size: 1.2em;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  clear: both;
  text-transform: uppercase;
  color: #4eddb8;
  position: relative;
}
/*h4:before {
  content: "";
  position: absolute;
  border: 1px solid #4eddb8;
  padding: 5px;
  left: -6px;
  top: -6px;
  width: 100%;
  height: 100%;
}*/
h5 {
  margin: 0;
  padding: 20px 0 40px 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  clear: both;
  font-size: 1em;
 text-transform: uppercase;
}
h5:before {
  background-image: url('images/arrow02.gif');
  background-size: 15px 22px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 15px;
  height: 22px;
margin-left: -20px;
    margin-right: 5px;
    content: "";
    transform: rotate(180deg);
}
.h5-special {
  margin: 0;
  padding: 20px 0 40px 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  clear: both;
  font-size: 1.2em;
}
a {
  text-decoration: none;
  color: #fff;
}
a:focus {
  outline: none;
}
p {
  margin: 0;
  text-align: justify;
}
img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}
blockquote {
  margin: 0;
  font-weight: 600;
  position: relative;
}
blockquote:before {
  content: "«";
  font-size: 100px;
  color: #4eddb8;
  line-height: 0;
  position: absolute;
  z-index: -1;
  margin-left: 10px;
  margin-top: -10px;
}
blockquote:after {
  content: "»";
  font-size: 100px;
  color: #4eddb8;
  line-height: 0;
  position: absolute;
  z-index: -1;
  margin-left: -60px;
  margin-top: 10px;
}
.blockquote02:before {
  content: "«";
  font-size: 100px;
  color: #1b223f;
  line-height: 0;
  position: absolute;
  z-index: -1;
margin-left: -60px;
    margin-top: 0;
}
.blockquote02:after {
  content: "»";
  font-size: 100px;
  color: #1b223f;
  line-height: 0;
  position: absolute;
  z-index: -1;
  margin-left: 0px;
  margin-top: 0px;
}
.no-guillemets blockquote:before, .no-guillemets blockquote:after{display: none;}

sup {
  font-size: xx-small;
}
#tradchoice{display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    z-index: 9;
    font-size: 0.9em;}

#tradchoice a:hover{color: #4eddb8;}
/*-----------------------------------*/
/*----------------Menu---------------*/
#menu{
	z-index: 1;
	top:0px;
	left:-800px;
	position:absolute;
	width:800px;
	background:#4eddb8;
	height: 100vh;
    transition: all 300ms ease;
}
#conteneurMenu{
padding: 20% 5% 0;
    font-size: 1em;
    line-height: 1.5em;
}
#conteneurMenu a{
	color:#1b223f;
}
#conteneurMenu a:hover{
	color:#ffffff;
}
#menu.open{
	left:0px;
	position: fixed;
}
#menuTxt,#closeTxt{
	color:#FFF;
}
#menuTxt.open,#closeTxt{
	display:none;
	
}
#closeTxt.open,#menuTxt{
	display:block;
}
#menuToggler{
	line-height:24px;
	position: fixed;
	z-index: 2;
	top: 50px;
	left:45px;
	cursor:pointer;
background-color: #fff;
    border-radius: 50px;
    padding: 10px;
}
.menuCross {
  width: 36px;
  height: 36px;
  position:relative;
  float: left;
}
.menuCross .bit-1::before {
  content: '';
  left: 6px;
  top: 10px;
  position: absolute;
  width: 12px;
  transform-origin: left bottom;
  height: 2px;
  background: #1b223f;
  transition: transform 0.3s, top 0.3s;
}
.menuCross .bit-1::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 10px;
  width: 12px;
  transform-origin: right bottom;
  height: 2px;
  background: #1b223f;
  transition: transform 0.3s, top 0.3s;
}
.menuCross .bit-2 {
  position: absolute;
  width: 24px;
  top: 50%;
  left: 50%;
  height: 2px;
  background: #1b223f;
  transform: translate(-50%, -50%);
  transition: transform 0.3s 0.3s, width 0.3s 0.6s;
}
.menuCross .bit-3::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 6px;
  width: 12px;
  transform-origin: left top;
  height: 2px;
  background: #1b223f;
  transition: transform 0.3s, bottom 0.3s;
}
.menuCross .bit-3::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 6px;
  width: 1.1em;
  transform-origin: right top;
  height: 2px;
  background: #1b223f;
  transition: transform 0.3s, bottom 0.3s;
}
.menuCross.open .bit-1:before {
  top: 0.4em;
  width: 14px;
  transform: rotate(41deg);
  transform-origin: left bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menuCross.open .bit-1:after {
  top: 0.4em;
  width: 14px;
  transform: rotate(-41deg);
  transform-origin: right bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menuCross.open .bit-2 {
  width: 0.1em;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s 0.3s, width 0.3s;
}
.menuCross.open .bit-3:before {
  bottom: 0.5em;
  width: 16px;
  transform: rotate(-41deg);
  transform-origin: left top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
.menuCross.open .bit-3:after {
  bottom: 0.5em;
  width: 16px;
  transform: rotate(41deg);
  transform-origin: right top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
/*-----------------------------------*/
/*-----animations----*/
.anim, .anim02, .anim02bis1, .anim02bis2, .delay01, .delay02, .delay03, .delay04, .delay05, .delay06 {
  position: relative;
  transition: opacity;
  opacity: 0;
}
.anim.visible, .delay01.visible, .delay02.visible, .delay03.visible, .delay04.visible, .delay05.visible, .delay06.visible {
  opacity: 1;
  left: 0px;
}
.anim02.visible, .anim02bis1.visible, .anim02bis2.visible{
  opacity: 1;
  right: 0px;
}
.anim.visible{
  animation: apparition-left 1s ease-in-out;
  -moz-animation: apparition-left 1s ease-in-out;
  -ms-animation: apparition-left 1s ease-in-out;
  -webkit-animation: apparition-left 1s ease-in-out;
  -o-animation: apparition-left 1s ease-in-out;
}
.anim02.visible{
  animation: apparition-right 1s ease-in-out;
  -moz-animation: apparition-right 1s ease-in-out;
  -ms-animation: apparition-right 1s ease-in-out;
  -webkit-animation: apparition-right 1s ease-in-out;
  -o-animation: apparition-right 1s ease-in-out;
}
.anim02bis1.visible{
  animation: apparition-right 1.2s ease-in-out;
  -moz-animation: apparition-right 1.2s ease-in-out;
  -ms-animation: apparition-right 1.2s ease-in-out;
  -webkit-animation: apparition-right 1.2s ease-in-out;
  -o-animation: apparition-right 1.2s ease-in-out;
}
.anim02bis2.visible{
  animation: apparition-right 1.4s ease-in-out;
  -moz-animation: apparition-right 1.4s ease-in-out;
  -ms-animation: apparition-right 1.4s ease-in-out;
  -webkit-animation: apparition-right 1.4s ease-in-out;
  -o-animation: apparition-right 1.4s ease-in-out;
}
.delay01.visible {
  animation: apparition-left 1.2s ease-in-out;
  -moz-animation: apparition-left 1.2s ease-in-out;
  -ms-animation: apparition-left 1.2s ease-in-out;
  -webkit-animation: apparition-left 1.2s ease-in-out;
  -o-animation: apparition-left 1.2s ease-in-out;
}
.delay02.visible {
  animation: apparition-left 1.4s ease-in-out;
  -moz-animation: apparition-left 1.4s ease-in-out;
  -ms-animation: apparition-left 1.4s ease-in-out;
  -webkit-animation: apparition-left 1.4s ease-in-out;
  -o-animation: apparition-left 1.4s ease-in-out;
}
.delay03.visible {
  animation: apparition-left 1.6s ease-in-out;
  -moz-animation: apparition-left 1.6s ease-in-out;
  -ms-animation: apparition-left 1.6s ease-in-out;
  -webkit-animation: apparition-left 1.6s ease-in-out;
  -o-animation: apparition-left 1.6s ease-in-out;
}
.delay04.visible {
  animation: apparition-left 1.8s ease-in-out;
  -moz-animation: apparition-left 1.8s ease-in-out;
  -ms-animation: apparition-left 1.8s ease-in-out;
  -webkit-animation: apparition-left 1.8s ease-in-out;
  -o-animation: apparition-left 1.8s ease-in-out;
}
.delay05.visible {
  animation: apparition-left 2s ease-in-out;
  -moz-animation: apparition-left 2s ease-in-out;
  -ms-animation: apparition-left 2s ease-in-out;
  -webkit-animation: apparition-left 2s ease-in-out;
  -o-animation: apparition-left 2s ease-in-out;
}
.delay06.visible {
  animation: apparition-left 2.2s ease-in-out;
  -moz-animation: apparition-left 2.2s ease-in-out;
  -ms-animation: apparition-left 2.2s ease-in-out;
  -webkit-animation: apparition-left 2.2s ease-in-out;
  -o-animation: apparition-left 2.2s ease-in-out;
}
/*------KEYFRAMES----*/
@keyframes apparition-left {
  0% {
    opacity: 0;
    left: -50px;
  }
  100% {
    opacity: 1;
    left: 0px;
  }
}
@keyframes apparition-right {
  0% {
    opacity: 0;
    right: -50px;
  }
  100% {
    opacity: 1;
    right: 0px;
  }
}
/*-------------------*/
/*----------------btn top---------------*/
#btn-top-icone {
  height: 10px;
  padding: 10px;
  margin: auto;
}
#btn-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #1b223f; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px 10px;
  /*border-radius: 50%;*/
  font-size: 18px; /* Increase font size */
}
#btn-top:hover {
  background-color: #4eddb8; /* Add a dark-grey background on hover */
}
/*------------ProgressBar-----------*/
.header {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  background-color: #f1f1f1;
}
.progress-container {
  width: 100%;
  height: 15px;
  background: #1b223f;
}
.progress-bar {
  height: 15px;
  background: #4eddb8;
  width: 0%;
}
/*-----------------------------------*/
/*--------------Contenu--------------*/
.green {
  color: #4eddb8;
}
.blue{
  color: #1b223f;
}
.surligner {
  background-color: #1b223f;
  padding: 15px;
  color: #fff;
}
.underline {
  text-decoration: underline;
}
.center, .center p {
  text-align: center;
}
.clear {
  clear: both;
  padding: 15px 0;
}
.center-center {
  text-align: center;
  margin-top: 50px;
}
.left {
  float: left;
  width: 46%;
}
.left02 {
  float: right;
  width: 39%;
  margin: 10% 0 0 0;
}
.right {
  float: right;
  width: 47%;
	position: sticky;
}
.left-tiers {
	padding: 0 4%;
    float: left;
    width: 25%;
  text-align: center;
}
.left-quart {
  float: left;
  width: 25%;
  text-align: center;
}
.left-quart02 {
  float: left;
  width: 21%;
  text-align: justify;
  padding: 2%;
}
.left-quart02 .number02{ border-bottom: 2px solid #4eddb8;}
.content-tiers {
  clear: both;
  display: block;
  padding: 50px 0 0 0;
}
.content-quart {
  clear: both;
  display: block;
  padding: 50px 0 0 0;
}
.content-quart-mission {
  clear: both;
  display: block;
  padding: 10px 0 0 0;
}
.left-quart-mission {
  float: left;
  width: 20%;
  text-align: left;
  border: 1px solid #4eddb8;
  padding: 1%;
  margin: 0 50px 0 0;
  position: relative;
}
.left-quart-mission:last-child {
  margin: 0;
}
.left-quart-mission:after {
  content: "";
  border-right: 8px solid #4eddb8;
  border-bottom: 8px Solid #4eddb8;
  width: 98%;
  height: 98%;
  top: 2%;
  left: 2%;
  position: absolute;
}
.number {
  font-size: 3em;
  line-height: 1em;
}
.number02 {
  font-size: 3em;
  line-height: 1em;
  margin: 10px;
  display: block;
}
.number03,.number04{
  font-size: 3em;
  line-height: 1em;
padding: 0 10px 0 0;
}

.number-description {
  font-size: 2em;
  line-height: 1em;
}
.number:before {
  background-image: url('images/arrow02.gif');
background-size: 15px 25px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 5px;
    height: 5px;
margin-left: -40px;
    padding-right: 30px;
    padding-top: 20px;
    content: "";
    transform: rotate(90deg);
}
.number03:before {
  background-image: url('images/arrow02.gif');
background-size: 15px 25px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 5px;
    height: 5px;
margin-left: -15px;
    padding-right: 10px;
    padding-top: 20px;
    margin-bottom: 30px;
    content: "";
    transform: rotate(145deg);
}
.filets-green {
  border-left: 2px #4eddb8 solid;
  padding-left: 5px;
}
.filets-blue {
  border-left: 2px #1b223f solid;
  padding-left: 5px;
}

.citation-descripion {
  font-size: 10px;
  font-style: italic;
}
.citation-cadre {
  border: 1px #fff solid;
  margin-top: 50px;
  padding: 20px;
  position: relative;
}
.citation-cadre:after {
  content: "";
  border-right: 8px solid #fff;
  border-bottom: 8px Solid #fff;
  width: 98%;
  height: 98%;
  top: 2%;
  left: 2%;
  position: absolute;
}
.titre-graphic {
  clear: both;
  margin: 0 0 30px;
  display: block;
  font-weight: 600;
}
.titre-graphic:before {
  background-image: url('images/arrow03.png');
  background-size: 22px 15px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 22px;
  height: 15px;
  padding: 0 15px 0 0;
  content: "";
}
.fond-green {
  background-color: #4eddb8;
  padding: 3%;
  color: #fff;
  text-align: justify;
}
.fond-blue {
  background-color: #1b223f;
  padding: 3%;
  color: #fff;
  text-align: justify;
}
.tableau-complexe {
  position: relative;
  width: 100%;
}
.titre-schemacomplexe {
  text-transform: uppercase;
  border: 2px solid #1b223f;
  padding: 20px;
  margin: 20px 2px;
  text-align: center;
}
.titre-tableaucomplexe {
  text-transform: uppercase;
  border: 2px solid #4eddb8;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}
.txt-tableaucomplexe-left {
  text-align: left;
}
.txt-tableaucomplexe-right {
  text-align: right;
}
.tableau-complexe-tiers01 {
  float: left;
  width: 33%;
}
.ss-titre-schemacomplexe {
  text-align: center;
  padding: 65px 50px 30px;
  font-size: 1em;
}
.tableau-complexe-left {
text-align: left;
    float: left;
    width: 25%;
    padding: 0 0 0 20%;
    font-size: 0.8em;
}
.tableau-complexe-right {
  text-align: right;
  float: right;
  width: 25%;
  padding: 0 20% 0 0;
    font-size: 0.8em;

}
.tableau-complexe-right p, .tableau-complexe-left p {
  text-align: inherit;
}
.relative {
  position: relative;
}
.fleche-chap03 {
  float: left;
  display: grid;
}
#graphic-defis {
  width: 100%;
  height: auto;
}
.fleche-chap03 div:nth-child(1) img {
  transform: rotate(-30deg);
  margin: 50px 20px;
}
.fleche-chap03 div:nth-child(3) img {
  transform: rotate(30deg);
  margin: 50px 20px;
}
.displaynonedesktop{display: none;}

#graphic-defis img {
  margin: 30px;
}
#graphic-defis div:nth-child(1) p {
  margin: 0px !important;
}
#graphic-defis div:nth-child(2) p {
  margin: 30px;
}
#graphic-defis div:nth-child(3) p {
  margin: 50px;
}
#defis {
  float: left;
  position: relative;
  color: #fff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  padding: 30px;
  margin: 50px;
  display: inline-block;
  text-align: center;
}
#defis:before {
  content: "";
  position: absolute;
  border: 2px solid #fff;
  padding: 5px;
  left: -16px;
  top: -16px;
  width: 108%;
  height: 108%;
  border-radius: inherit;
}
#defis span {
  display: block;
  font-size: 1.1em;
  margin: 60px 0 0 0;
}
.legende-carre {
  margin-left: 90px;
  position: relative;
  text-align: left;
}
.legende-carre:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #4eddb8;
  margin-left: -30px;
  position: absolute;
}
.legende-carre:nth-child(3)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #4eddb8;
  opacity: .8;
  margin-left: -30px;
  position: absolute;
}
.legende-carre:nth-child(5)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #4eddb8;
  opacity: .6;
  margin-left: -30px;
  position: absolute;
}
.legende-carre:nth-child(7)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #4eddb8;
  opacity: .4;
  margin-left: -30px;
  position: absolute;
}
.Tableau {
  margin: 0 20%;
  width: 100%;
}
.Tableau span {
  display: inline;
  float: left;
  margin: 0px;
  padding: 5px 0;
}
.Tableau p {
  clear: left;
  margin: 0px;
  padding: 0px;
  height: 100% !important;
  height: 1em;
}
.Tableau p.legende {
  font-weight: bold;
  line-height: 1em;
}
.Tableau span.col1 {
  width: 45%;
  text-align: left;
}
.Tableau span.col2 {
  width: 15%;
  text-align: right;
}
#tableau-complexe-centre {
  width: 40%;
  height: 360px;
  padding: 50px;
  position: absolute;
  top: 30%;
  left: calc(50% - 25%);
  background-image: url("images/img010.gif");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#before-intro {
  background-image: url("images/Fond-intro02.gif");
  background-repeat: no-repeat;
  width: auto;
	background-position: center bottom;
    background-size: cover;
    height: 100vh;
background-color: #1b223f;
}
#intro:before{
	content: "";
	 background-image: url("images/wave-white01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    display: block;
    width:100%;
    height: 154px;
    position: absolute;
    left: 0;
    top: -153px;
}
#intro {
  padding: 0 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
	background-color: #fff;
 
}
#intro-chap01 {
  background-image: url("images/Fond-chap01intro.gif");
  background-repeat: no-repeat;
  width: auto;
  background-position: top;
  background-size: 100%;
  background-color: #4eddb8;
  color: #1b223f;
  padding: 0 12%;
position: relative;
}
#intro-chap01 h3 {
  color: #fff;
  padding-top: 80px;
}
#intro-chap03 h3 {
  color: #1b223f;
  padding-top: 80px;
}
#intro-chap02 {
  background-image: url("images/Fond-chap02intro.jpg");
  background-repeat: no-repeat;
  width: auto;
  background-position: top;
  background-size: contain;
  background-color: #1b223f;
  color: #fff;
  padding: 0 12%;
}
#intro-chap03 {
  background-image: url("images/Fond-chap01intro.gif");
  background-repeat: no-repeat;
  width: auto;
  background-position: top;
  background-size: cover;
  background-color: #4eddb8;
  color: #1b223f;
  padding: 0 12%;
}
#imgwave{
	clear: both;
 	width: auto;
  	height: auto;
	position: relative;
	background-color: #ffffff;
}
#chap01, #chap02, #chap03 {
  clear: both;
  padding: 0 12%;
  width: auto;
  height: auto;
position: relative;
	background-color: #ffffff;
z-index: 0;
}
#conclusion {
  background-color: #1b223f;
  color: #fff;
  padding: 10px 12% 50px;
  width: auto;
  height: auto;
}
#conclusion h2:before {
  background-image: url('images/img014.jpg');
  background-size: 81px 105px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 81px;
  height: 105px;
  padding: 0 15px 0 0;
  content: "";
}
.logo-partenaire{
	margin: 50px 0 0 28%;
}