/*-----------Généralités-----------*/
html {
  scroll-behavior: smooth;
}
body {
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  border: 0;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  outline: none;
}
h1 {
  width: 90%;
  margin: 20px 0;
  text-align: left;
  vertical-align: middle;
  color: #000;
  padding: 0;
  font-size: 6em;
  line-height: .7em;
  font-family: platelet, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}
h2 {
  position: relative;
  width: auto;
  margin: 60px auto 30px;
  border: 0;
  padding: 0;
  font-size: 4em;
  line-height: .7em;
  font-family: platelet, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  text-align: center;
  vertical-align: middle;
}
h3 {
  margin: 0 0 4% 0;
  font-size: 2em;
  line-height: 1em;
  font-family: platelet, sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  color: #fff;
  text-align: center;
  background-image: url("images/fond-h3.png");
  padding: 1% 0;
  position: relative;
  text-transform: uppercase;
}
h6 {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  outline: none;
}
h7 {
  color: #006598;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1em;
  text-align: center;
  margin: 0 auto 30px;
  padding: 0;
  border: 0;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  outline: none;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
a:focus {
  outline: none;
}
p {
  margin: 0;
  padding: 0;
  text-align: justify;
  font-size: 1em;
  line-height: 1.5;
}
img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}
strong {
  font-weight: 700;
}
sub {
  vertical-align: baseline;
}
sup {
  font-size: xx-small;
}
/*-----------------------------------*/
/*------------ProgressBar-----------*/
.header {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  background-color: #f1f1f1;
}
.progress-container {
  width: 100%;
  height: 10px;
  background: #d4e5f5;
}
.progress-bar {
  height: 10px;
  background: #008ccc;
  width: 0%;
}
/*-----------------------------------*/
/*----------------MenuBurger---------------*/
#menu {
  z-index: 2;
  top: 0px;
  left: -800px;
  position: absolute;
  width: 800px;
  background: #fff;
  height: 100vh;
  transition: all 500ms ease-in-out;
}
#conteneurMenu {
  padding: 20% 5%;
  font-size: 1.6em;
  line-height: 1.5em;
  text-align: center;
}
#conteneurMenu a {
  color: #000;
  line-height: 0.5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  display: block;
}
#conteneurMenu a:hover {
  color: #008ccc;
}
#menu.open {
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
}
#menu.open:before {
  content: "";
  position: absolute;
  width: 92%;
  height: 60%;
  left: 4%;
  top: 10%;
  z-index: -1;
}
#menuTxt, #closeTxt {
  color: #FFF;
}
#menuTxt.open, #closeTxt {
  display: none;
}
#closeTxt.open, #menuTxt {
  display: block;
}
#menuToggler {
  line-height: 24px;
  position: fixed;
  z-index: 3;
  top: 30px;
  left: 30px;
  cursor: pointer;
  background-color: #008ccc;
  padding: 5px;
}
#menuToggler:before {
  content: "";
  position: absolute;
  border: 1px solid #008ccc;
  width: 80%;
  height: 80%;
}
.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: #fff;
  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: #fff;
  transition: transform 0.3s, top 0.3s;
}
.menuCross .bit-2 {
  position: absolute;
  width: 24px;
  top: 50%;
  left: 50%;
  height: 2px;
  background: #fff;
  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: #fff;
  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: #fff;
  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.4em;
  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.4em;
  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;
}
#rapportlink {
  font-size: 0.8em;
  color: #005578 !important;
}
#rapportlink:hover {
  color: #008ccc !important;
}
/*-----------------------------------*/
/*---------RAPPORT PDF---------------*/
#btn_rapportlink {
  width: 42px;
  height: 42px;
  position: fixed;
  z-index: 3;
  top: 90px;
  left: 30px;
}
#btn_rapportlink:before {
  content: "";
  position: absolute;
  border: 2px solid #008ccc;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
#btn_rapportlink:after {
  background-image: url('images/rapport-pdf.svg');
  background-size: 23px 36px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 23px;
  height: 36px;
  content: "";
  position: absolute;
  left: calc(50% - 9px);
  top: 4px;
  transition: top 300ms ease-in;
}
#btn_rapportlink:hover::after {
  background-image: url('images/rapport-pdf.svg');
  background-size: 23px 36px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 23px;
  height: 36px;
  content: "";
  position: absolute;
  left: calc(50% - 9px);
  top: 7px;
  transition: top 300ms ease-out;
}
#rapportcomplet{
    position: fixed;
    z-index: 1;
    width: 50px;
    top: 140px;
    left:28px;
    font-size: .8em;
    text-align: center;
    margin: auto;
    color: #008ccc;
    font-weight: 400;
    line-height: 1em;
}
#rapportcomplet:hover{
    color: #00476b;
}
/*----------------------------------*/
/*---------LANGUES------------------*/
#tradchoice {
  display: block;
  position: fixed;
  top: 60px;
  left: 30px;
  color: #828282;
  z-index: 9;
  font-size: 0.8em;
}
#tradchoice a:hover {
  color: #008ccc;
}
/*----------------------------------*/
/*------------Content---------------*/
#before-intro {
  background-image: url("images/header-cid.gif");
  background-repeat: no-repeat;
  width: auto;
  background-position: center bottom;
  background-size: cover;
  height: 841px;
  max-height: 70vh;
  background-color: #fff;
  padding: 5%;
}
#content-before-intro {
  position: relative;
  max-width: 60%;
  margin: 40px auto;
  padding: 60px 20px;
}
#logo-unil {
  background-image: url("images/logo_unil.png");
  background-repeat: no-repeat;
  width: 180px;
  height: 60px;
  background-size: contain;
  position: absolute;
  top: -100px;
  left: 27px;
}
.all-content {
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
}
.content {
  width: 100%;
  margin: 0 auto;
  clear: both;
}
.before-chapitre-noir {
  background-image: url('images/before-chapitre-veget.png');
  background-repeat: no-repeat;
  width: auto;
  background-position: center;
  background-size: contain;
  height: 64px;
  position: relative;
}
.before-chapitre-noir:before {
  content: "";
  width: 1px;
  height: 40px;
  background-color: #000000;
  position: absolute;
  margin: auto;
  left: 50%;
  top: -35px
}
.before-chapitre-noir:after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: #000000;
  position: absolute;
  margin: auto;
  left: 50%;
  bottom: -50px
}
.before-chapitre-blanc {
  background-image: url('images/before-chapitre-veget.png');
  background-repeat: no-repeat;
  width: auto;
  background-position: center;
  background-size: contain;
  height: 64px;
  position: relative;
}
.before-chapitre-blanc:before {
  content: "";
  width: 1px;
  height: 40px;
  background-color: #fff;
  position: absolute;
  margin: auto;
  left: 50%;
  top: -35px
}
.before-chapitre-blanc:after {
  content: "";
  width: 1px;
  height: 40px;
  background-color: #fff;
  position: absolute;
  margin: auto;
  left: 50%;
  bottom: -50px
}
.exergue {
  width: 30%;
  float: right;
  background-color: #00476b;
  padding: 8%;
  margin: 6% 0 0 0;
  color: #fff;
  font-weight: 600;
  font-style: italic;
  text-align: justify;
  position: relative;
}
.exergue:before {
  background-image: url('images/exergue-before.png');
  background-size: 96px 129px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 96px;
  height: 129px;
  content: "";
  position: absolute;
  left: calc(50% - 48px);
  top: -70px;
}
#intro-schema-new{
    max-width: 90%;
    margin: 3% auto;
}
#background-chap01-top {
  background-image: url("images/fond-chap01-top.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #fff;
  height: 148px;
}
#background-chap01 {
  background-image: url("images/fond-chap01.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #fff;
  padding-bottom: 3%;
}
#background-chap01-bottom {
  background-image: url("images/fond-chap01-bottom.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-color: #fff;
  height: 87px;
}

.numero-h3 {
  background-image: url("images/fond-num-h3.png");
  width: 50px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 0;
}
#img-plateforme {
  background-image: url("images/plateforme.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 106px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-dispositif {
  background-image: url("images/dispositif.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 106px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-renforcer {
  background-image: url("images/renforcer.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 106px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-enseignement {
  background-image: url("images/enseignement.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 135px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-recherche {
  background-image: url("images/recherche.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 135px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-oeuvrer {
  background-image: url("images/oeuvrer.png");
  background-position: top center;
  background-repeat: no-repeat;
  width: 106px;
  height: 111px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
.tier-bloc-special01 {
  width: 30%;
  float: left;
  text-align: center;
  padding: 7% 0;
  margin: 30px 0 0;
  background-image: url("images/fond-special.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}
.tier-bloc-special02 {
  width: 30%;
  float: left;
  text-align: center;
  padding: 8% 0;
  margin: 100px 0 0 50px;
  background-image: url("images/fond-special.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}
.tier-bloc-special03 {
  width: 30%;
  float: right;
  text-align: center;
  padding: 8% 0;
  margin: 30px 0 0;
  background-image: url("images/fond-special.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}
#video01 {
  background-color: #fff;
  width: 40%;
  height: auto;
  float: right;
  text-align: center;
  line-height: 1.2em;
  padding: 10px;
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  transform: scale(1);
  transition: transform 300ms ease-out;
}
.btn-hover{
    transform:translateY(0);
  transition: transform 300ms ease-out;
}
.btn-hover:hover {
    transform:translateY(10px);
  transition: transform 300ms ease-out;
}
#video01:hover, #video02:hover, #video03:hover, #video04:hover, #video05:hover, #video06:hover{
  transform: scale(1.02);
  transition: transform 300ms ease-in;
}
#video02 {
  background-color: #fff;
  width: 95%;
  height: auto;
  float: right;
  text-align: center;
  line-height: 1.2em;
  padding: 10px;
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  transform: scale(1);
  transition: transform 300ms ease-out;
}
#video03, #video04, #video05, #video06 {
  background-color: #fff;
  width: calc( 100% - 20px);
  height: auto;
  float: left;
  text-align: center;
  line-height: 1.2em;
  padding: 10px;
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  transform: scale(1);
  transition: transform 300ms ease-out;
}

#img-deploiement01, #img-deploiement02, #img-deploiement03, #img-deploiement05, #img-deploiement06, #img-deploiement07, #img-deploiement08, #img-deploiement09, #img-deploiement10 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 112px;
  height: 118px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-deploiement04 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 160px;
  height: 118px;
  padding: 10px 0;
  display: block;
  margin: auto;
}
#img-deploiement01 {
  background-image: url("images/deploiement01.png");
}
#img-deploiement02 {
  background-image: url("images/deploiement02.png");
}
#img-deploiement03 {
  background-image: url("images/deploiement03.png");
}
#img-deploiement04 {
  background-image: url("images/deploiement04.png");
}
#img-deploiement05 {
  background-image: url("images/biodiversity-schema.png");
}
#img-deploiement06 {
  background-image: url("images/deploiement06.png");
}
#img-deploiement07 {
  background-image: url("images/deploiement07.png");
}
#img-deploiement08 {
  background-image: url("images/deploiement08.png");
}
#img-deploiement09 {
  background-image: url("images/deploiement09.png");
}
#img-deploiement10{
  background-image: url("images/formation.png");
}
#background-chap02-top {
  background-image: url("images/fond-chap02bis-top.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #fff;
  height: 358px;
  padding: 160px 0 0 0;
}
.btn-action-chap02-01:hover, .btn-action-chap02-02:hover, .btn-action-chap02-03:hover, .btn-action-chap02-04:hover, .btn-action-chap02-05:hover {
  top: 5px;
  transition: top 300ms ease-in;
}
.btn-action-chap02-01, .btn-action-chap02-02, .btn-action-chap02-03, .btn-action-chap02-04, .btn-action-chap02-05 {
  top: 0px;
  transition: top 300ms ease-out;
  width: 100%;
  height: 50px;
  background-color: #fff;
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  box-shadow: 0px 0px 30px 0px rgba(0, 102, 153, 0.3);
  padding: 30px 35px;
  text-transform: uppercase;
  font-weight: 600;
  color: #006699;
  position: relative;
}
.btn-action-chap02-01:before {
  content: "1";
}
.btn-action-chap02-02:before {
  content: "2";
}
.btn-action-chap02-03:before {
  content: "3";
}
.btn-action-chap02-04:before {
  content: "4";
}
.btn-action-chap02-05:before {
  content: "5";
}
.btn-action-chap02-01:before, .btn-action-chap02-02:before, .btn-action-chap02-03:before, .btn-action-chap02-04:before, .btn-action-chap02-05:before {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 2px solid #006699;
  border-radius: 50%;
  padding: 3px;
  position: absolute;
  top: -20px;
  left: calc(50% - 20px);
  line-height: 1.8em;
}
.chiffre-blue {
  text-align: center;
  font-size: 5em;
  color: #0089c7;
  font-weight: 800;
  position: absolute;
  margin: auto;
  top: 196px;
  left: 34%;
}
.chiffre-blue:before {
  background-image: url('images/circle-topo.png');
  background-size: 254px 254px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 254px;
  height: 254px;
  content: "";
  position: absolute;
  left: -55px;
  top: -180px;
  z-index: -1;
}
#img-400-informer {
  background-image: url("images/400-informer.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 247px;
  width: 234px;
  position: absolute;
  top: -8px;
  left: 30%;
  display: block;
  z-index: 1;
}
.txt-chiffre-blue {
 position: absolute;
  top: 250px;
  left: 15%;
  display: block;
  max-width: 350px;
  margin: auto;
  vertical-align: middle;
}
.bloc-a-venir {
  margin: 3% 0;
  display: block;
  background-image: url("images/fond-bloc-a-venir.jpg");
  background-repeat:repeat;
  background-position: center;
  background-size: contain;
  width: auto;
  padding: 5%;
  position: relative;
    z-index: 0;
}
.bloc-a-venir:before {
  content: "";
  width: 96%;
  height: calc(96% - 30px);
  border: 1px solid #0089c7;
  position: absolute;
  top: 20px;
  left: 20px;
    z-index: -1;
}
#img-rencontre {
  display: block;
  background-image: url("images/rencontre.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  width: 266px;
  height: 285px;
}
#img-debat {
  display: block;
  background-image: url("images/debat.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  width: 282px;
  height: 285px;
}
#img-invitation {
  display: block;
  background-image: url("images/invitation.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  width: 270px;
  height: 285px;
}
#observatoires {
  display: block;
  background-image: url("images/fond-observatoire.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 78%;
  height: 600px;
  margin:auto;
padding: 3% 0;
}
#img-soutenir {
  display: block;
  background-image: url("images/schema-soutenir.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  width: 100%;
  height: 389px;
  margin: 5% auto;
}
#background-chap03-top {
  background-image: url("images/fond-chap03bis-top.jpg");
      background-repeat: no-repeat;
    background-position:center top;
    background-size:cover;
    height: 415px;
    padding: 0;
    margin-top: 0;
}
#background-chap03-top .all-content{
    padding-top: 8.5%;
}
.chiffre-blue-02 {
  text-align: center;
  font-size: 5em;
  color: #0089c7;
  font-weight: 800;
  position: absolute;
  margin: auto;
  top: 115px;
  left: 37%;
}
.chiffre-blue-02:before {
  background-image: url('images/circle-topo.png');
  background-size: 180px 180px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 180px;
  height: 180px;
  content: "";
  position: absolute;
  left: -16px;
  top: -210px;
  z-index: -1;
}
#img-184-formation {
  background-image: url("images/img-184.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 70%;
    height: 170px;
    width: 340px;
    position: absolute;
    left: 15%;
    top: -70px;
  display: block;
  z-index: 1;
}
.txt-chiffre-blue-02 {
 position: absolute;
  top: 170px;
  left: 23%;
  display: block;
  max-width: 300px;
  margin: auto;
  vertical-align: middle;
}
.legende-intro-schema01 {
  display: block;
  margin-bottom: 5px;
  position: relative;
  line-height: 1em;
  padding: 7px;
}
.legende-intro-schema01:before {
  content: "";
  position: absolute;
  padding: 9px 8px;
    left: -30px;
    top: 0px;
    width: 12px;
  height: 10px;
background-color: #008ccc;
    border-radius: 50px;
}
.legende-number {
  position: absolute;
  left: -19.5px;
  top: 2px;
  line-height: 1.7;
  font-size: .8em;
    font-weight: 600;
  color: #fff;
}
.legendecolor01-intro-schema01, .legendecolor02-intro-schema01, .legendecolor02bis-intro-schema01, .legendecolor03-intro-schema01 {
  display: block;
  line-height: 1em;
  margin-bottom: 5px;
  position: relative;
  padding: 7px;

}
.legende-color01 {
  background-color: #d4404f;
}
.legende-color02 {
  background-color: #eaa830;
}
.legende-color02bis {
  background-color: #c1d865;
}
.legende-color03 {
  background-color: #e0e0e0;
}
.legende-color01, .legende-color02, .legende-color02bis, .legende-color03 {
  position: absolute;
  top: 0px;
  left: -30px;
      padding: 4px 8px;

width: 12px;
  height: 10px;
border-radius: 50px;
  /*height: 20px;*/
}
#enseignement-schema01{
    background-image: url("images/enseignement-schema01.gif");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 80%;
    height: 720px;
    width: 1000px;
  display: block;
}
#enseignement-schema02{
    background-image: url("images/enseignement-schema02.gif");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 70%;
    height: 750px;
    width: 1000px;
  display: block;

}
#formation-continue-schema{
     background-image: url("images/formation-continue-schema.gif");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 80%;
    height: 350px;
    max-width: 1000px;
  display: block;
    margin: auto;
}
#background-chap04-top {
  background-image: url("images/fond-chap02bis-top.jpg");
      background-repeat: no-repeat;
    background-position:center top;
    background-size:cover;
    height: 410px;
    padding: 0;
    margin-top: 0;
}
#background-chap04-top .all-content{
    padding-top: 6%;
}
#recits-schema{
         background-image: url("images/recits-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 80%;
    height: 332px;
    max-width: 293px;
  display: block;
    margin: auto;

}
#sante-schema{
         background-image: url("images/sante-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 80%;
    height: 281px;
    max-width: 290px;
  display: block;
    margin: -40px auto 0;

}
#strat-climatique{
         background-image: url("images/deploiement04.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 100%;
    height: 179px;
    max-width: 243px;
  display: block;
    margin: 0 auto 50px;

}
#schema-scenarios{
         background-image: url("images/schema-scenarios.gif");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 194px;
    max-width: 887px;
  display: block;
    margin: 30px auto ;

}
#search-engagement{
         background-image: url("images/search-engagement-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 70%;
    height: 225px;
    max-width: 321px;
  display: block;
    margin: -15px auto 0;

}
#biodiversity-schema{
         background-image: url("images/biodiversity-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 339px;
    max-width: 300px;
  display: block;
    margin: -30px auto 0;

}
#mobilite-schema{
         background-image: url("images/mobilite-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 330px;
    max-width: 380px;
  display: block;
    margin: 20px auto 0;

}
#transition-schema{
         background-image: url("images/transition-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 277px;
    max-width: 330px;
  display: block;
    margin: -10px 0 30px 60px;

}
#energy-schema{
         background-image: url("images/deploiement09.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 100%;
    height: 228px;
    max-width: 248px;
    display: block;
    margin: 4% 0 0 10%;
    
}
#chantiers-schema{
         background-image: url("images/chantiers-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 290px;
    max-width: 300px;
    display: block;
    margin: -20px 0 0 -30px;

}
#agriculture-schema{
         background-image: url("images/agriculture-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 100%;
    height: 257px;
    max-width: 317px;
    display: block;
    margin: 0 0 0 80px;
    

}
#background-budget-top {
  background-image: url("images/fond-bloc-budget.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size:cover;
  background-color: #fff;
    max-width: 100%;
    height: 100%;
    min-height: 720px;
  padding: 50px 0;
}
#background-budget-top .all-content{
    margin-top: 80px;
}
#budget-schema{
         background-image: url("images/budget-schema.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 90%;
    height: 250px;
    max-width: 250px;
    display: block;
    margin: 0 auto;
}
#schema-gouvernance{
         background-image: url("images/schema-gouvernance.png");
  background-repeat: no-repeat;
  background-position: center;
      background-size: 75%;
    height: 450px;
    max-width: 1000px;
    display: block;
    margin: 0 auto;
}
#background-gouvernance-top #equipe-demibloc .demi-bloc{
    height: 100px;
    width: 45%;
    margin: 2%;
}
#footer{
    background-color: #005884;
    padding: 1%;
}
#special01{
    margin-top: 0;
}
#volteface-logo{
    position: relative;
}
#volteface-logo:after{
  background-image: url('images/logo-volteface.png');
  background-size: 100%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
height: 55px;
content: "";
position: absolute;
top: -10px;
    right: 3%;
}
/*----------------------------------*/
/*-----------AJUSTEMENT-------------*/
.blue {
  color: #0089c7;
}
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.petith1 {
  font-weight: 400;
  font-style: normal;
  font-size: .3em;
  display: block;
  margin-top: -20px;
}
.interligne-normal {
  line-height: 1.2em;
}
.interligne-petit{
    line-height:.8em;
}
.petit {
  font-size: .5em;
}
.txtmoyen {
  font-size: .8em;
  line-height: 1em;
}
.txtgros {
  font-size: 1.3em;
}
.gras {
  font-weight: 400;
}
.supergras {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.margin-l {
  margin-left: 2%;
}
.supermargin-l {
  margin-left: 10%;
}
.margin-t {
  margin-top: 5%;
}
.supermargin-t {
  margin-top: 15%;
}
.margin-b {
  margin-bottom: 2%;
}
.supermargin-b {
  margin-bottom: 4%;
}
.txt-white {
  color: #fff;
}
.clear {
  clear: both;
}
.upper {
  text-transform: uppercase;
}
.re-normal {
  font-weight: 300;
}
.valign {
  width: 1000px;
  margin: auto;
}
.underline{text-decoration: underline;}
.block{display: block;}
/*----------------------------------*/
/*---------BLOCS SPECIAUX-----------*/
.demi-bloc {
  width: 48%;
  float: left;
  margin-right: 2%;
  position: relative;
  display: block;
}
.demi-blocR {
  width: 48%;
  float: right;
  margin-left: 2%;
  position: relative;
  display: block;
}
.demi-blocG {
  width: 60%;
  float: left;
  margin-right: 5%;
  position: relative;
  display: block;
}
#introduction .demi-blocG:nth-child(2) {
  margin-right: 0;
    margin-left: 10%;
    width: 20%;
}
.tier-bloc {
  width: 30%;
  float: left;
  text-align: center;
  padding: 50px 1%;
}
.five-bloc {
  width: 18%;
  float: left;
  text-align: center;
  padding: 50px 1%;
}
.five-bloc02 {
  width: 18%;
  float: left;
  text-align: center;
  padding: 50px 1%;
    height: 100px;
}
.six-bloc {
  width: 14.6%;
  float: left;
  text-align: center;
  padding: 50px 1%;
}
.demi-bloc-flore {
  width: 40%;
  /*height: 30px;*/
    min-height: 55px;
  float: left;
  position: relative;
  text-align: justify;
  padding-left: 3%;
  margin: 3%;
}
.demi-bloc-flore:before {
  background-image: url('images/before-flore-new.gif');
  background-size: 75%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
}
.demi-bloc-flore:after {
  width: 1px;
      height: calc(100% - 35px);
    content: "";
    position: absolute;
    left: 11px;
    top: 30px;
  background-color: #005884;
}
.demi-bloc-flore02 {
  width: 40%;
  float: left;
  position: relative;
  text-align: justify;
  padding-left: 3%;
  margin: 3% 3% 0;
}
.demi-bloc-flore02:before {
  background-image: url('images/before-flore-new.gif');
  background-size: 75%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
}
.demi-bloc-flore02:after {
  width: 1px;
      height: calc(100% - 35px);
    content: "";
    position: absolute;
    left: 11px;
    top: 30px;
  background-color: #005884;
}
.bloc-flore-line {
  width: 94%;
  clear: both;
  position: relative;
  text-align: justify;
  padding-left: 3%;
  margin: 5% 0 0;
}
.bloc-flore-line:before {
  background-image: url('images/before-flore-new.gif');
  background-size: 75%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
}
.bloc-flore-line:after {
  width: 1px;
      height: calc(100% - 35px);
    content: "";
    position: absolute;
    left: 11px;
    top: 30px;
  background-color: #005884;
}
.bloc-flore {
  width: 90%;
  float: left;
  position: relative;
  text-align: justify;
  padding-left: 6%;
  margin: 10% 0 0;
}
.bloc-flore:before {
  background-image: url('images/before-flore-new.gif');
  background-size: 75%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
}
.bloc-flore:after {
  width: 1px;
      height: calc(100% - 35px);
    content: "";
    position: absolute;
    left: 11px;
    top: 30px;
  background-color: #005884;
}
.bloc-flore-tiers {
  width: 90%;
  float: left;
  position: relative;
  text-align: justify;
  padding-left: 12%;
  margin: 0;
}
.bloc-flore-tiers:before {
  background-image: url('images/before-flore-new.gif');
  background-size: 75%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 30px;
  height: 30px;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
}
.bloc-flore-tiers:after {
  width: 1px;
      height: calc(100% - 35px);
    content: "";
    position: absolute;
    left: 11px;
    top: 30px;
  background-color: #005884;
}
.tier-bloc-flore {
  vertical-align: middle;
  width: 25%;
  float: left;
  margin: 1% 40px;
  height: 150px;
  position: relative;
  display: inline-block;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}
.tier1-bloc{
  width: 30%;
  float: left;
    margin: 2% 5%;
}
.tier2-bloc{
  width: 60%;
  float: left;
}

/*----------------------------------*/
.video { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.video iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}
/*-----------------------*/
/*-----animations----*/
.anim,  .anim02, .anim03, .anim-apparition, .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;
}
.anim03.visible {
  opacity: 1;
  top: 0px;
}
.anim-apparition.visible{
    opacity: 1;
}
.anim-apparition.visible{
  animation: apparition 1.5s ease-in-out;
  -moz-animation: apparition 1.5s ease-in-out;
  -ms-animation: apparition 1.5s ease-in-out;
  -webkit-animation: apparition 1.5s ease-in-out;
  -o-animation: apparition 1.5s ease-in-out;
}
.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;
}
.anim03.visible{
  animation: apparition-bottom 1s ease-in-out;
  -moz-animation: apparition-bottom 1s ease-in-out;
  -ms-animation: apparition-bottom 1s ease-in-out;
  -webkit-animation: apparition-bottom 1s ease-in-out;
  -o-animation: apparition-bottom 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 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@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;
  }
}
@keyframes apparition-bottom {
  0% {
    opacity: 0;
    top: 50px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
/*-------------------*/
/*-----Suprabar-----*/
.noneMenu{display:none;}
.noneSupra{display:block;}
#suprabar{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    padding: 7px 0;
    background-color:#008CCC;
}
#conteneurSupra{
    margin: auto;
    width: 764px;
    padding: 0;
    color: #fff;
    font-size: .9em;
    font-weight: 600;
}
#conteneurSupra a{
    display:inline-block;
    margin: 0 5px
}
#conteneurSupra a:hover{
    color: #00476B;
}