@charset "utf-8";
/* CSS Document */
/*-----------Généralités-----------*/
html {
  scroll-behavior: smooth;
}
body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #011224;
  font-family: 'Roboto', 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: 0px auto;
  width: 900px;
  border: 0px;
  text-align: left;
  vertical-align: middle;
  color: #ffffff;
  font-size: 6em;
	-webkit-animation: text-focus-in 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-delay: 1s;
}
.ss-h1 {
  margin: 0px auto;
  width: 900px;
  border: 0px;
  text-align: left;
  vertical-align: middle;
  padding-top: 17%;
  font-size: 1.4em;
  line-height: 1em;
    	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;

}
.ss1-h1 {
  margin: 0px auto;
  width: 900px;
  border: 0px;
  text-align: left;
  vertical-align: middle;
  padding-top: 0;
  font-size: 1.1em;
  line-height: 1em;
color: white;
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation-delay: 1s;

}


.ss2-h1 {
  margin: 0px auto;
  width: 900px;
  border: 0px;
  text-align: left;
  vertical-align: middle;
  padding-top: 4%;
  font-size: 1.4em;
  line-height: 1em;
color: white;
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        animation-delay: 1s;

}

h2 {
  text-align: left;
  vertical-align: middle;
  color: #011224;
  font-size: 3em;
  line-height: 1em;
}
h2:before {
  content: "";
  position: absolute;
  width: 43px;
  height: 43px;
  border-radius: 50px;
  background-color: transparent;
  border: 14px solid #FFCC30;
  z-index: -1;
  margin: -30px;
}
h3 {
  text-align: left;
  vertical-align: middle;
  color: #011224;
  font-size: 1.3em;
  line-height: 1em;
    
}
h3:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: transparent;
  border: 14px solid #D74D29;
  z-index: -1;
  margin: -30px;
  -webkit-animation: slide-bottom 1s infinite alternate-reverse both;
  animation: slide-bottom 1s infinite alternate-reverse both;
}
h4 {
  text-align: left;
  vertical-align: middle;
  color: #011224;
  font-size: 1.6em;
  line-height: 1em;
  position: relative;
}
h4::before {
  content: "";
  background-image: url("images/resume-before.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 160px;
  height: 51px;
  position: absolute;
  left: -30px;
  bottom: -12px;
}
.petit {
  font-size: .2em;
  line-height: .2em;
  font-weight: 400;
}
.petit02 {
  font-size: .7em;
  font-style: italic;
}
.petit03 {
  font-size: .5em;
  font-weight: 400;
}
.bigup01 {
  font-size: 1.2em;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3em;
}
.orange {
  color: #D74D29;
}
.white {
  color: #ffffff;
}
.yellow {
  color: #FFCC30;
}
.blue {
  color: #011224;
}
a {
  text-decoration: none;
  color: #fff;
}
a:focus {
  outline: none;
}
p {
  margin: 0;
  text-align: left;
  line-height: 1.5em;
}
img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
}
blockquote {
  margin: 0;
  font-size: 2em;
  line-height: 1.5em;
  font-weight: 600;
  font-style: italic;
}
.no-guillemets blockquote:before, .no-guillemets blockquote:after {
  display: none;
}
sup {
  font-size: xx-small;
}
.weightmore{font-weight: 400;}
/*-----------------------------------*/
/*----------------Menu---------------*/
#menu {
  z-index: 2;
  top: 0px;
  left: -900px;
  position: absolute;
  width: 800px;
  background: #011224;
  height: 100vh;
  transition: all 300ms ease;
}
#menu::before {
    content: "";
      background-image: url("images/wave-menu.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
    display: block;
    width: 110px;
    height: 101vh;
    position: absolute;
    right: -90px;
}
#conteneurMenu {
  padding: 20% 5% 0;
  font-size: 1em;
  line-height: 1.5em;
	font-weight: 400;
}
#conteneurMenu a {
  color: #ffffff;
}
#conteneurMenu a mark{
    background-color: transparent;
    color: white;    
    padding: 5px;
}
#conteneurMenu a mark:hover{
    padding-bottom: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, #ffcc30 45%, #ffcc30 100%);
}
#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:3;
  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: #011224;
  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: #011224;
  transition: transform 0.3s, top 0.3s;
}
.menuCross .bit-2 {
  position: absolute;
  width: 24px;
  top: 50%;
  left: 50%;
  height: 2px;
  background: #011224;
  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: #011224;
  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: #011224;
  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, .anim03, .anim03bis1, .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, .anim03bis1.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;
}
.anim03bis1.visible{
  animation: apparition-bottom 1.4s ease-in-out;
  -moz-animation: apparition-bottom 1.4s ease-in-out;
  -ms-animation: apparition-bottom 1.4s ease-in-out;
  -webkit-animation: apparition-bottom 1.4s ease-in-out;
  -o-animation: apparition-bottom 1.4s 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;
  }
}
/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
}
/*-------------------*/
/**
 * ----------------------------------------
 * animation focus-in-contract-bck
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(12px);
            transform: translateZ(12px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
/*----------------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: #011224; /* 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: transparent;
}
.progress-container {
  width: 100%;
  height: 15px;
  background-color: transparent;
}
.progress-bar {
  height: 15px;
  background: #d74e29;
  width: 0%;
  border-radius: 0 50px 50px 0;
  position: relative;
}
/*.progress-bar::before {
  position: absolute;
  content: "";
  background-image: url("images/zigzag-yellow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 100px;
  height: 25px;
  top: 0;
  left: -30px;
}*/
/*-----------------------------------*/
/*--------------Contenu--------------*/
.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}
.underline {
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, #ffcc30 45%, #ffcc30 100%);
}
.center, .center p {
  text-align: center;
}
.clear {
  clear: both;
}
.relative{
    position: relative;
}
.left {
  float: left;
  width: 46%;
}
.right {
  float: right;
  width: 47%;
  position: sticky;
}
.left30 {
  float: left;
  width: 26%;
}
.right70 {
  float: right;
  width: 67%;
  /*position: sticky;*/
}
.left60 {
  float: left;
  width: 57%;
}
.right40 {
  float: right;
  width: 36%;
  position: sticky;
}
.left40 {
  float: left;
  width: 36%;
}
.right60 {
  float: right;
  width: 57%;
  position: sticky;
}
.left-red {
  float: left;
  width: 41.8%;
  background-color: #d74d29;
  padding: 4% 4% 2%;
  min-height: 140px;
}
.right-blue {
  padding: 4% 4% 2%;
  min-height: 140px;
  float: right;
  width: 41.8%;
  background-color: #011224;
  position: sticky;
}
.mtop5 {
  margin-top: 5%;
}
.mtop10 {
  margin-top: 10%;
}
.mtop15 {
  margin-top: 15%;
}
.mbot5 {
  margin-bottom: 5%;
}
.mbot10 {
  margin-bottom: 10%;
}
.caption {
  font-size: .8em;
}
.logo-santeperso {
  position: absolute;
    top: 30px;
    left: 20%;
    margin: 0 auto;
    width: 250px;
    z-index: 1;
}
.logo-medhyg {
  position: absolute;
  top: -100px;
  right: 33%;
  margin: 0 auto;
}
.logo-leenards {
  position: absolute;
  top: -100px;
  right: 25%;
  margin: 0 auto;
}
#before-intro {
  background-image: url("images/header.jpg");
  background-repeat: no-repeat;
  width: auto;
  background-position: center bottom;
  background-size: cover;
  height: 100vh;
  background-color: #011224;
}
#intro {
  padding: 5% 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
  background-color: #fff;
  z-index: 0;
}
/*#intro:before {
  content: "";
  background-image: url("images/wave-white01.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  display: block;
  width: 100%;
  height: 408px;
  position: absolute;
  left: 0;
  top: -408px;
}*/
.content-quart {
  clear: both;
  display: block;
  padding: 10px 0 0 0;
}
.left-quart {
  float: left;
  width: 20%;
  font-size: 1.2em;
  text-align: center;
  margin: 0 50px 0 0;
  position: relative;
}
.content-classique-simple {
  margin-top: 5%;
  padding: 3% 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
}
.content-classique {
  margin-top: 5%;
  padding: 3% 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
    background-color: white;
    z-index: -1;
}
.content-classique::before{top: -20px;}
.content-classique02::before{top: -108px;}
.content-classique::before, .content-classique02::before {
  content: "";
  background-image: url("images/zigzag.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 300px;
  height: 45px;
  position: absolute;
  left: -33px;
}
.content-classique::after, .content-classique02::after {
  content: "";
  background-image: url("images/cercle.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 20px;
  top: -100px;
      -webkit-animation: slide-bottom 1s infinite alternate both;
  animation: slide-bottom 1s infinite alternate both;

}
.content-classique02 {
  padding: 3% 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
}
#chapitre01, #chapitre02, #chapitre03, #chapitre04 {
  background-image: url("images/fond-chap01.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 5%;
  padding: 10% 12% 3%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
  background-color: #011224;
  z-index: 0;
}
#conclusion {
  background-image: url("images/fond-headerconclusion.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 5%;
  padding: 10% 12% 3%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
  background-color: #d74d29;
  z-index: 0;
}
.definition-orange {
  background-image: url("images/fond-def-orange.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  padding: 10% 10px;
}
.ss-titre-definition {
  text-transform: uppercase;
  color: #011224;
  font-size: 1.2em;
  font-weight: 600;
  padding-left: 5%;
    position: relative;
}
.ss-titre-definition::before {
  content: "";
  background-image: url("images/def-icons.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 38px;
  height: 54px;
  position: absolute;
  left: -20px;
  top:-20px;
}
.txt-definition {
  padding: 0 10%;
}
.healthdata, .yellow02 {
  position: relative;
}
.healthdata::before {
  content: "";
  background-image: url("images/motif-yellow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 692px;
  height: 370px;
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -110px;
}
.healthdata::after {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  z-index: -1;
  background-color: #d74d29;
  border-radius: 50%;
  top: 180px;
}
.yellow02::before {
  content: "";
  background-image: url("images/motif-yellow02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 562px;
  height: 693px;
  position: absolute;
  /* z-index: -1; */
  top: -370px;
  right: 0px;
      -webkit-animation: slide-bottom 1s infinite alternate both;
  animation: slide-bottom 1s infinite alternate both;

}
.numero01, .numero02, .numero02-02, .numero01-bleu, .numero03-bleu, .numero01-02, .numero03-02, .numero04-02, .numero05-02, .numero06-02, .numero07-02, .numero02-02bleu {
  font-size: 2em;
  font-weight: 600;
  padding: 2%;
  position: relative;
}
.numero01::before {
  position: absolute;
  content: "";
  background-image: url("images/form-orange01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 140px;
  height: 150px;
  z-index: -1;
  top: -50px;
  left: -50px;
}
.numero02::before {
  position: absolute;
  content: "";
  background-image: url("images/form-orange02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 140px;
  height: 150px;
  z-index: -1;
  top: -50px;
  left: -50px;
}
.numero01-02::before {
  position: absolute;
  content: "";
  background-image: url(images/form-bleu02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  z-index: -1;
  top: -8px;
  left: -10px;
}
.numero02-02::before {
  position: absolute;
  content: "";
  background-image: url(images/form-orange02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 80px;
  height: 80px;
  z-index: -1;
  top: -20px;
  left: -20px;
}
.numero02-02bleu::before {
  position: absolute;
  content: "";
  background-image: url(images/form-bleu03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 80px;
  height: 80px;
  z-index: -1;
  top: -20px;
  left: -20px;
}
.numero03-02::before {
  position: absolute;
  content: "";
  background-image: url(images/form-bleu01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  z-index: -1;
  top: -6px;
  left: -14px;
}
.numero04-02::before {
  position: absolute;
  content: "";
  background-image: url(images/form-orange01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 80px;
  z-index: -1;
  top: -20px;
  left: -10px;
}
.numero01-bleu::before {
  position: absolute;
  content: "";
  background-image: url("images/form-bleu01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  z-index: -1;
  top: -10px;
  left: -10px;
}
.numero03-bleu::before {
  position: absolute;
  content: "";
  background-image: url("images/form-bleu02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 60px;
  height: 60px;
  z-index: -1;
  top: -10px;
  left: -10px;
}
.play {
  color: #FFCC30;
  font-weight: 500;
  position: relative;
  margin: 2%;
  display: block;
}
.play a {
  color: #FFCC30;
}
.play::before {
  position: absolute;
  content: "";
  background-image: url("images/play.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 30px;
  height: 30px;
  z-index: -1;
  top: -4px;
  left: -40px;
}
.content-resume {
  margin-top: 5%;
  padding: 3% 12%;
  width: auto;
  height: auto;
  animation-name: apparition-top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  position: relative;
  background-color: #d74d29;
  z-index: 0;
}
.content-resume::before {
  content: "";
  background-image: url("images/form-white02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 61%;
  height: 70%;
  position: absolute;
  left: 0px;
  top: -33px;
  z-index: -1;
}
.content-resume::after {
  content: "";
  background-image: url("images/form-white01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 42%;
    height: 100%;
  position: absolute;
  right: 0px;
  bottom: -40px;
  z-index: -1;
}
.definition-orange02 {
  background-image: url(images/fond-def-orange.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #fff;
  padding: 20% 10px;
}
.fond-orange02, .fond-orange03 {
  position: relative;
  z-index: 0;
}
.fond-orange02::before {
  content: "";
  background-image: url("images/fond-orange02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 110%;
  height: 450%;
  position: absolute;
  left: -50%;
  top: 0;
  z-index: -1;
}
.fond-orange02::after {
  content: "";
  background-image: url("images/zigzag-yellow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 60%;
  height: 40%;
  position: absolute;
  left: 0;
  top: 170%;
}
.rounded-orange {
  position: relative;
}
.rounded-orange::after {
  content: "";
  background-image: url("images/zigzag-yellow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 20%;
  height: 20%;
  position: absolute;
  right: 0;
  top: -20px;
}
.fond-orange03::before {
  content: "";
  background-image: url("images/fond-orange04.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 40%;
  height: 270%;
  position: absolute;
  right: 0;
  top: -80px;
  z-index: -1;
}
.pourcent-number01, .pourcent-number02, .pourcent-number03 {
  color: white;
  font-size: 1.5em;
  font-weight: 600;
  position: relative;
  z-index: 0;
}
.pourcent-number01::before {
  content: "";
  background-image: url("images/form-bleu02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 160%;
  height: 260%;
  position: absolute;
  left: -30%;
  top: -40px;
  z-index: -1;
}
.pourcent-number02::before {
  content: "";
  background-image: url("images/form-orange02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 160%;
  height: 320%;
  position: absolute;
  left: -20px;
  top: -58px;
  z-index: -1;
}
.pourcent-number03::before {
  content: "";
  background-image: url("images/form-orange01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 160%;
  height: 320%;
  position: absolute;
  left: -20px;
  top: -50px;
  z-index: -1;
  transform: rotate(300deg);
}
.rounded-orange {
  background-color: #d74d29;
  height: 100%;
  padding: 3% 5%;
  border-radius: 150px;
}
.content-tiers {
  clear: both;
  display: block;
  padding: 0;
}
.left-tiers01, .left-tiers02 {
  padding: 4% 4% 2%;
  float: left;
  width: 25%;
  min-height: 120px;
}
.left-tiers01 {
  background-color: #d74d29;
}
.left-tiers02 {
  background-color: #011224;
  border-left: 5px solid white;
  border-right: 5px solid white;
}
.left-tiers-simple01, .left-tiers-simple02, .left-tiers-simple03 {
  padding: 4% 4% 2%;
  float: left;
  width: 25%;
}
.number01 {
  color: white;
  font-size: 1.5em;
  font-weight: 600;
  position: relative;
  z-index: 0;
}
.number01::before {
  content: "";
  background-image: url("images/form-bleu02.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 270%;
  height: 150%;
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: -1;
}
.schema-4p{
    width: 50%;
}
.schema-resume, .schema-traitements{
    width: 80%;
}
.schema-implication-etapes{
    width: 60%;
}
/*---1er vague--*/

.custom-shape-divider-top-1626882438 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1626882438 svg {
    position: relative;
    display: block;
    width: calc(169% + 1.3px);
    height: 220px;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1626882438 .shape-fill {
    fill: #FFFFFF;
}
/*---2eme vague--*/
.custom-shape-divider-bottom-1626882076 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1626882076 svg {
    position: relative;
    display: block;
    width: calc(118% + 1.3px);
    height: 221px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1626882076 .shape-fill {
    fill: #FFFFFF;
}
/*---vague de fin----*/
.custom-shape-divider-bottom-1626883217 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1626883217 svg {
    position: relative;
    display: block;
    width: calc(147% + 1.3px);
    height: 42px;
}

.custom-shape-divider-bottom-1626883217 .shape-fill {
    fill: #FFFFFF;
}
/*----RESPONSIVE-----*/
@media only screen and (max-width: 1440px){
    .custom-shape-divider-top-1626882438 svg { width: calc(130% + 1.3px); height: 190px;}
    .custom-shape-divider-bottom-1626882076 svg {width: calc(140% + 1.3px); height: 180px;}
    h1 {font-size: 5em;}
    .logo-medhyg { top: -90px;right: 36%;}
    #intro {padding: 5% 5% 20%;}
    #chapitre01, #chapitre02, #chapitre03, #chapitre04 {margin-top: 0;padding: 10% 5% 3%;}
    .ss-titre-definition::before {width: 28px; height: 44px;left: -10px;top: -18px;}
    .content-classique {margin-top: 0; padding: 3% 6%;}
    .custom-shape-divider-bottom-1626882076 {bottom: -20px;}
    .content-resume { margin-top: 3%; padding: 2% 6%;}
    .yellow02::before { width: 522px;height: 603px;top: -250px;}
    .content-resume::before {width: 70%;}
    .definition-orange02 { color: #011224;}
    .content-classique-simple {margin-top: 2%; padding: 3% 3%;}
    .content-classique02 {padding: 3% 5%;}
    #conclusion {padding: 10% 5% 3%;}
    .healthdata::before {right: 0;}
    #conteneurMenu {padding: 16% 5% 0;font-size: 0.9em;line-height: 1.4em;}
    #menu::before {right: -70px;}
    .content-resume::after {width: 45%;height: 92%;}
}
@media only screen and (max-width: 1300px){
    h1 {padding-top: 1%;}
    .ss-h1 {padding-top: 15%;}
    .ss2-h1, .ss1-h1 {font-size: 1em;}
}
@media only screen and (max-width: 1024px){
    #conteneurMenu {font-size: 0.9em;line-height: 1.3em;}
    h1 {padding-top: 1%;}
    .ss-h1 {width: 90%;  padding-top: 25%;}
    .ss2-h1 {width: 90%;  padding-top: 5%;}
	.ss1-h1 {width: 90%;  padding-top: 0;}
    .custom-shape-divider-bottom-1626882076 svg {width: calc(208% + 1.3px);height: 221px;}
    .logo-medhyg {right: 50%;}
    #intro {padding: 5% 6%;}
    .left-quart {width: 45%;margin: 50px 30px 0 0;}
    #chapitre01, #chapitre02, #chapitre03, #chapitre04 {padding: 10% 6% 3%;}
    .content-classique {padding: 3% 6%;}
    .whitesmart{color: #fff}
    .ss-titre-definition::before{display: none;}
    .yellow02::before { width: 312px; height: 413px;top: -130px;}
    .schema-resume, .schema-traitements {width: 100%;}
    .content-resume {  padding: 3% 8%;}
    .content-classique-simple {padding: 3% 6%;}
        .padd0{padding: 0!important;}
    .content-classique::before, .content-classique02::before, .content-classique::after, .content-classique02::after{display: none;}
    .content-classique02 {padding: 3% 6%;}
    .schema-implication-etapes {width: 90%;}
    #conclusion {padding: 10% 6% 3%;}
    .bigup01 {font-size: 1em;}
    .content-resume::before {width: 100%;height: 70%;}
    .content-resume::after {width: 60%; height: 95%;}
    .numero01-bleu::before { left: -22px;}
    .numero02-02bleu::before {width: 60px; height: 60px;top: -16px; left: -18px;}
    .numero03-bleu::before { width: 46px;}
        .numero03-02::before {background-image: url(images/form-orange01.svg);}
    .numero01-02::before {background-image: url(images/form-orange02.svg);top: -13px;left: -20px;}
    .numero02-02::before {top: -23px;left: -30px;}
    .left-tiers01, .left-tiers02 { width: 24%; min-height: 140px;}
    .left-red, .right-blue { min-height: 200px;}

}
@media only screen and (max-width: 768px){
    #menu::before {display: none;}
    h1 { width: 90%; padding-top: 1%;font-size: 5em;}
    .ss-h1 {width: 90%;  padding-top: 35%;}
    .left, .right, .left60, .left30, .left40, .right40, .right60, .right70{ float: none; width: 100%;margin: 30px 0;}
    .content-resume::before {width: 100%;height: 30%;}
    .content-resume::after { width: 100%; height: 67%;}
    .left-tiers01, .left-tiers02 {min-height: 175px;width: 24%;}
    .left-red, .right-blue {min-height: 250px;}
    .left-tiers-simple01, .left-tiers-simple02, .left-tiers-simple03 {padding: 4% 2px 2%;width: 32%;}
}

@media only screen and (max-width: 767px){
    #conteneurMenu a mark {display: inline-block;}
    #before-intro {height: 90vh;}
    .displaynone{display: none;}
    #menuToggler {top: 30px;left: 20px;}
    #menu {width: 100%;}
    #conteneurMenu {padding: 30% 5% 0;}
    h1 {width: 300px;font-size: 2.8em; padding-top: 1%;}
    .custom-shape-divider-top-1626882438 svg {height: 60px;}
    .custom-shape-divider-bottom-1626882076 svg {height: 220px;
    width: calc(293% + 1.3px);}
    .custom-shape-divider-bottom-1626883217 svg {height: 20px;}
    .ss-h1 { width: 300px;padding-top: 50%;}
    .ss2-h1 { width: 300px;padding-top: 5%; font-size: .9em;}
	.ss1-h1 { width: 300px;padding-top: 0; font-size: .9em;}
    .logo-santeperso {top: 56px;left: initial;right: 30px; width: 150px;}
    .logo-medhyg {top: -80px;right: initial; width: 23%;}
    .logo-leenards {top: -95px;width: 30%;}
    h2 {font-size: 1.8em;padding-top: 30px;}
    .left-tiers01, .left-tiers02, .left-tiers03, .left-red, .right-blue { float: none; width: 80%;margin: 5px 0;padding: 10%;min-height: auto;border-left: 0; border-right: 0;}
    .left-quart{margin-top: 20px;font-size: 1em;}
    blockquote { font-size: 1.5em; line-height: 1.5em;}
    h3 {font-size: 1.1em;    margin-top: 50px;}    
    #chapitre01, #chapitre02, #chapitre03, #chapitre04 {padding: 10% 8% 3%;}
    #intro {padding: 5% 8%;}
    .definition-orange {padding: 10% 0;}
    .txt-definition { padding: 0;}
    .ss-titre-definition {font-size: 1em;padding-left: 0;}
    .bigup01 {font-size: 1em;font-style: normal;line-height: 1.2em;}
    .healthdata::after, .content-classique::before, .content-classique02::before, .content-classique::after, .content-classique02::after, .numero01-bleu::before, .numero02-02bleu::before, .numero03-bleu::before {display: none;}
    .yellow02::before {width: 150px;height: 190px;top: -70px;}
    .schema-4p, .schema-resume, .schema-traitements, .schema-implication-etapes{ width: 100%;}
    .content-classique {padding: 3% 8%;}
    h4 {font-size: 1.2em;}
    h4::before {width: 131px;height: 43px;}
    .content-resume::before {width: 100%;height: 25%;}
    .content-resume::after {width: 100%; height: 49%;}
    .content-resume, .content-classique-simple, .content-classique02 {padding: 3% 8%;}
    .definition-orange02 {color: #011224;}
    .numero03-02::before {background-image: url(images/form-orange01.svg);}
    .numero01-02::before {background-image: url(images/form-orange02.svg);top: -13px;left: -20px;}
    .numero02-02::before {top: -23px;left: -30px;}
    .pourcent-number01::before {top: -30px;}
    .pourcent-number02::before {left: -10px;top: -48px;transform: rotate(45deg);}
    .pourcent-number03::before {top: -35px;}
    .rounded-orange { border-radius: 50px;padding: 10%;}
    .number01{margin-top: 10px;}
    .left-tiers-simple01, .left-tiers-simple02, .left-tiers-simple03 {padding: 14% 0; float: none; width: 100%;}
    .left-tiers-simple01 img, .left-tiers-simple02 img, .left-tiers-simple03 img{width: 100%;}
    #conclusion {padding: 10% 8% 3%;}
    .citation-descripion{font-size: .8em;}
    .healthdata::before { width: 200%;height: 370px;top: -60px; right: 0;}
    .left-quart{ float: none; width: 100%;margin: 30px 0;}
    
    /*.yellow02{display: none;}*/
}