/* NE SPECIFIER AUCUNE HAUTEUR NULLE PART SAUF AUX "a" DES MENUS */

/* EFFET DE ZOOM DANS CARTE */
.zoom-lens {
    border: 4px solid #adad2e;
    margin: -4px;
    /* Set this to minus the border thickness. */
    background-color: #fff;
    cursor: move;
}

/* This is for the title text. */
.zoom-title {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute !important;
    background-color: #000;
    color: #fff;
    padding: 3px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    top: 0px;
}

/* This is the zoom window. */
.zoom-big {
    border: 4px solid #adad2e;
    overflow: hidden;
}

/* This is the loading message. */
.zoom-loading {
    color: white;
    background: #222;
    padding: 3px;
    border: 1px solid #adad2e;
}

.zoom-section {
    float: left;
    width: 60%;
    height: auto;
    clear: both;
    /*padding:0px 40px 0px 60px;*/
}

* html .zoom-section {
    display: inline;
    clear: both;
}

/* Feature descriptions in ZoomEngine page */
.zoom-desc {
    float: left;
    margin-left: 10px;
    width: 310px;
}

.zoom-small-image {
    border: 4px solid #adad2e;
    float: left;
    margin-left: 60px;
}

.zoom-tiny-image {
    border: 1px solid #adad2e;
    margin: 0px;

}

.zoom-tiny-image:hover {
    border: 1px solid #adad2e;
}


/*BALISES GÉNÉRIQUES*/

* {
    padding: 0px;
    margin: 0px;
    outline: none;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #fff;
    height: 100%;
    /*prendre la hauteur des divers navigateurs*/
}

a {
    text-decoration: none;
    color: inherit;
    /*garde la couleur de son parent*/
}

h2 {
    font-size: 1.6em;
}

img {
    max-width: 100%;
    /*Redimensionnement des images (en conservant le ratio)*/
    height: auto;
    /*Redimensionnement des images (en conservant le ratio)*/
    border: none;
}

.clear {
    clear: both;
}

.align-right, .align-right-introduction {
    text-align: right;
}

.color-gray {
    background-color: #B1B1B1;
}

.color-white {
    background-color: #ffffff;
}

.text-color-white {
    color: #ffffff;
}

.anchor {
    /*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
    transform: translateY(-95px);
    -ms-transform: translateY(-95px);
    /* IE 9 */
    -moz-transform: translateY(-95px);
    /* Firefox */
    -webkit-transform: translateY(-95px);
    /* Safari and Chrome */
    -o-transform: translateY(-95px);
    /* Opera */
}

.site-container {
    overflow: hidden;
}

/*ZONE HEADER*/

#header {
    position: fixed;
    /*le header est tjs visible dans le haut de la fenêtre*/
    z-index: 8;
    background-color: #fff;
    top: 0px;
    left: 0px;
    /*centrage horizontal*/
    right: 0px;
    /*centrage horizontal*/
    width: 100%;
    /*centrage horizontal*/
    height: 80px;
    box-shadow: 0px 10px 27px -27px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 10px 27px -27px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 10px 27px -27px rgba(0, 0, 0, 0.5);
}

.header_icon {
    position: relative;
    margin: 28px 0px;
    width: 30%;
    height: auto;
    float: right;
    background-color: #d9d9d9;
}

.header_line {
    line-height: 24px;
}

.header_dot {
    position: absolute;
    display: block;
    float: right;
    top: -13px;
    left: -100px;
    width: 110px;
    height: 50px;
    background-image: url(../images/planche_menu1.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 110px;
    cursor: pointer;
    /*curseur adapté pour autre(s) média(s) que smartphone*/
}

.header_dot:hover {
    background-image: url(../images/planche_menu2.svg);
}

.logo a {
    width: 240px;
    height: 56px;
    margin: 12px 0px 12px 30px;
    text-indent: -2000px;
    font-size: 3px;
    background-image: url(../images/logo-canopia-300x70.svg);
    background-position: center left;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    float: left;
}

.nav {
    position: fixed;
    right: 0px;
    top: 72px;
    /*on déplace la colonne de la hauteur du header*/
    color: #4A4A4A;
    list-style: none;
    float: right;
    padding-top: 0px;
    padding-right: 0px;
    bottom: 0px;
    width: 170px;
    height: auto;
    -moz-transform: translateX(170px);
    -webkit-transform: translateX(170px);
    transform: translateX(170px);
}

.nav li {
    display: block;
    padding: 15px 5px;
    margin: 0px;
}

.nav li a {
    background-image: url(../images/planche_nav1.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    display: block;
    /*on transforme le menu d'une ligne à une colonne*/
    width: 130px;
    height: 50px;
    margin-left: 10px;
    padding-left: 26px;
    font-weight: bold;
    font-size: 14px;
    line-height: 50px;
    /*positionnement des menu par rapport au logo*/
    text-align: left;
    float: left;
    max-width: none;
    /*Annulation du redimensionnement des images de la balise générique*/
    overflow: hidden;
    /*on n'englobe pas la partie cachée dans le contenu affiché*/
}

.nav li a:hover {
    background-image: url(../images/planche_nav2.svg);
}

/*EFFECTS MENUS*/

.site-pusher {
    /*valeur indépendante de la classe with--sidebar*/
    -moz-transform: translateX(0px);
    /*position par défaut = pas d'effet*/
    -webkit-transform: translateX(0px);
    /*position par défaut = pas d'effet*/
    transform: translateX(0px);
    /*position par défaut = pas d'effet*/
    -moz-transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
    -webkit-transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
    transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
}

.with--sidebar .site-pusher {
    -moz-transform: translateX(-170px);
    /*position au clic = décalage de la largeur du menu*/
    -webkit-transform: translateX(-170px);
    /*position au clic = décalage de la largeur du menu*/
    transform: translateX(-170px);
    /*position au clic = décalage de la largeur du menu*/
}

.site-container {
    margin-left: 0px;
}

.with--sidebar .site-cache {
    /*on noircit la zone externe lorsque le menu apparait*/
    position: absolute;
    z-index: 800;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.6);
}

.with--sidebar .nav {
    -moz-transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
    -webkit-transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
    transition-duration: 0.3s;
    /*durée de déplacement du contenu*/
    -moz-transform: translateX(0px);
    /*position au clic = décalage de la largeur du menu*/
    -webkit-transform: translateX(0px);
    /*position au clic = décalage de la largeur du menu*/
    transform: translateX(0px);
    /*position au clic = décalage de la largeur du menu*/
}

.section {
    position: relative;
    width: 100%;
}

#pre-introduction_container {
    height: 75px;
}

#introduction-container {
    background-image: url(../images/background-forest.jpg);
    background-repeat: no-repeat;
    background-size: 105% auto;
    background-position: top center;
    overflow: hidden;
    height: auto;
    min-height: 600px;
}

.introduction-line {
    position: relative;
    background-image: -webkit-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: -o-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: linear-gradient(to right, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    margin: 100px 0px;
    width: 65%;
    height: auto;
    float: right;
}

.introduction-line p {
    font-size: 28px;
    padding: 50px 120px 50px 0px;
}

.title-right {
    text-align: right;
    position: relative;
    margin: 50px 0px 0px 0px;
    padding-right: 60px;
    width: 80%;
    height: auto;
    float: right;
    font-weight: bold;
    font-size: 42px;
    line-height: 42px;
    /*positionnement des menu par rapport au logo*/
}

.subtitle-right-line {
    position: relative;
    margin: 30px 0px 60px 0px;
    height: auto;
    float: right;
}

.subtitle-introduction {
    width: 90%;
}

.subtitle-platform {
    width: 70%;
}

.subtitle-company {
    width: 50%;
}

.subtitle-contact {
    width: 90%;
}

.subtitle-right-icon-gray {
    position: absolute;
    background-image: url(../images/planche_title2.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 22px;
    top: -6px;
    left: -21px;
    width: 22px;
    height: auto;
    min-height: 22px;
}

.subtitle-right-icon-white {
    position: absolute;
    background-image: url(../images/planche_title1.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 22px;
    top: -6px;
    left: -21px;
    width: 22px;
    height: auto;
    min-height: 22px;
}

.title-left {
    text-align: left;
    position: relative;
    margin: 50px 0px 0px 0px;
    padding-left: 60px;
    width: 80%;
    height: auto;
    float: left;
    font-weight: bold;
    font-size: 42px;
    line-height: 42px;
    /*positionnement des menu par rapport au logo*/
}

.subtitle-left-line {
    position: relative;
    margin: 30px 0px 60px 0px;
    height: auto;
    float: left;
}

.subtitle-approachESG {
    width: 90%;
}

.subtitle-solution {
    width: 40%;
}

.subtitle-partners {
    width: 60%;
}

.subtitle-demonstration {
    width: 60%;
}

.subtitle-left-icon-white {
    position: absolute;
    background-image: url(../images/planche_title1.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 22px;
    top: -6px;
    right: -21px;
    width: 22px;
    height: auto;
    min-height: 22px;
}

.subtitle-left-icon-gray {
    position: absolute;
    background-image: url(../images/planche_title2.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 22px;
    top: -6px;
    right: -21px;
    width: 22px;
    height: auto;
    min-height: 22px;
}

.subtitle-underline {
    line-height: 10px !important;
}

.approachESG-element-right {
    padding: 0px 60px 0px 0px !important;
}

.platform-element-left {
    padding: 0px 0px 0px 60px !important;
}

.button-login a {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    margin: 18px 0px 0px 10%;
    /*aligner la zone du bouton*/
    width: 20%;
    height: auto;
    float: left;
    background-image: -webkit-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: -o-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    text-decoration: none;
    border: none;
    font-size: 18px;
    padding: 10px 40px 10px 0px !important;
    line-height: 22px;
    color: #FFFFFF;
    text-align: right;
}

.button-request a {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    margin: 40px 0px 0px 0px;
    /*aligner la zone du bouton*/
    width: 40%;
    height: auto;
    float: left;
    background-image: -webkit-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: -o-linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    background-image: linear-gradient(left, rgba(180, 175, 23, 0), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0.9));
    text-decoration: none;
    border: none;
    font-size: 22px;
    padding: 20px 80px 20px 0px !important;
    line-height: 26px;
    color: #FFFFFF;
    text-align: right;
}

.button-login a:hover, .button-request a:hover {
    cursor: pointer;
    /*curseur adapté pour autre(s) média(s) que smartphone*/
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.icon-request {
    position: absolute;
    top: -25px;
    right: -30px;
    width: 77px;
    height: 105px;
    background-image: url(../images/acces-picto.svg);
}

#approachESG-container {
    background-color: #FFFFFF;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#platform-container {
    background-color: #B1B1B1;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#solutions-container {
    background-color: #FFFFFF;
    overflow: hidden;
    min-height: 600px;
    color: #4A4A4A;
}

#company-container {
    background-color: #D9D9D9;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#partners-container {
    background-color: #FFFFFF;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#contact-container {
    background-color: #adad2e;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#demonstration-container {
    background-color: #FFFFFF;
    overflow: hidden;
    height: auto;
    color: #4A4A4A;
}

#approachESG-container h2, #platform-container h2, #solutions-container h2, #company-container h2, #partners-container h2, #contact-container h2, #demonstration-container h2 {
    padding: 0px 60px;
}

#approachESG-container p, #platform-container p, #solutions-container p, #company-container p, #partners-container p, #contact-container p, #demonstration-container p {
    font-size: 1.2em;
    padding: 0px 60px;
}

.approachESG-text {
    float: left;
    width: 50%;
    height: auto;
}

.approachESG-visual {
    width: 50%;
    height: auto;
    float: left;
}

.approachESG-visual img {
    float: right;
    padding-right: 40px;
    width: 70%;
    height: auto;
}

.platform-text {
    float: left;
    width: 30%;
    height: auto;
}

.platform-visual {
    width: 70%;
    height: auto;
    float: left;
}

.platform-visual img {
    width: 95%;
    height: auto;
}

.multicases {
    height: auto;
    margin: 20px 60px;
    display: table;
    /*paramètre pour l'alignement vertical*/
}

.highlights {
    display: table-cell;
    /*paramètre pour l'alignement vertical*/
    vertical-align: top;
    /*paramètre pour l'alignement vertical*/
    text-align: center;
    width: 31%;
    min-height: 180px;
    background-image: -webkit-linear-gradient(top, rgba(180, 175, 23, 1), rgba(180, 175, 23, 1), rgba(180, 175, 23, 0));
    background-image: -o-linear-gradient(top, rgba(180, 175, 23, 1), rgba(180, 175, 23, 1), rgba(180, 175, 23, 0));
    background-image: linear-gradient(to bottom, rgba(180, 175, 23, 1), rgba(180, 175, 23, 1), rgba(180, 175, 23, 0));
}

.highlights img {
    margin-top: -1px;
    width: 100%;
    height: auto;
}

.highlights h3 {
    padding: 0px 15px !important;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: #4A4A4A;
}

.highlights span {
    font-size: 40px;
}

.highlights p {
    padding: 0px 20px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #4A4A4A;
}

.company-logos {
    margin: 30px auto;
    width: 60%;
    max-width: 600px;
}

.company-logo1 {
    width: 45%;
    float: left;
    height: auto;
}

.company-logo2 {
    width: 45%;
    float: left;
    height: auto;
}

.company-logo1 img, .company-logo2 img {
    padding: 10px 0px 20px 0px;
}

.company-interlogo {
    width: 10%;
    float: left;
}

.logo-link {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5px;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    margin-bottom: 20px;
}

.logo-link img {
    width: 17%;
    height: auto;
    position: absolute;
    top: -1px;
    left: -9px;
}

.logo-link a {
    padding-left: 20%;
    font-weight: bold;
    color: #D9D9D9;
}

.logo-link a:hover {
    color: #adad2e;
}

.external-link a {
    font-weight: bold;
    color: #adad2e;
}

.external-link a:hover {
    text-decoration: underline;
}

.button-emailing {
    font-family: 'Open Sans', arial, sans-serif !important;
    margin: 60px 0px 0px 0px;
    /*aligner la zone du bouton*/
    width: 65%;
    height: auto;
    float: right;
    background-color: #fff !important;
    background-image: -webkit-linear-gradient(left, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    background-image: -o-linear-gradient(left, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    background-image: linear-gradient(to right, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    text-decoration: none;
    border: none;
    font-size: 22px;
    padding: 20px 0px 20px 80px !important;
    line-height: 26px;
    color: #FFFFFF;
    text-align: left;
    appearance: auto;
    /*idem que input*/
    user-select: none;
    /*idem que input*/
    white-space: pre;
    /*idem que input*/
    align-items: flex-start;
    /*idem que input*/
    cursor: default;
    /*idem que input*/
    box-sizing: border-box;
    /*idem que input*/
}

.button-emailing:hover {
    cursor: pointer;
    /*curseur adapté pour autre(s) média(s) que smartphone*/
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.icon-emailing {
    float: right;
    width: 116px;
    height: 84px;
    margin-top: 20px;
    margin-right: -40px;
    background-image: url(../images/Mail-icon-58x42.svg);
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari and Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
    box-shadow: 5px 10px 8px rgba(0, 0, 0, .5);
}

.contact-text {
    float: left;
    width: 40%;
    height: auto;
}

.address-text p {
    font-size: 1.6em !important;
    padding-left: 30px !important;
}

.demo-element {
    position: relative;
    margin: 80px 0px;
    width: 60%;
    height: auto;
    padding-bottom: 5%;
    float: left;
}

.demo-visual {
    position: absolute;
    bottom: -20%;
    right: -600px;
    width: 923px;
    height: 466px;
    float: left;
    background-image: url(../images/demonstration-laptop2.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: contain;
}

/******* FORMULAIRE CONTACT *******/
.contactform {
    color: #ffffff;
    width: 100%;
    padding: 0%;
}

.contactform .fields {
    height: auto;
    font-size: 1.1em;
    padding: 0px 60px;
    color: #4A4A4A;
}

.contactform .fields .field {
    width: 100%;
    text-align: left;
    height: 90px;
    line-height: 50px;
    min-height: 90px;
    /*ajustement de l'espacement vertical*/
}

.contactform .fields .field2 {
    width: 100%;
    text-align: left;
    height: 150px;
    line-height: 50px;
}

.contactform .fields .field .white-field {
    float: right;
    width: 96%;
    height: 30px;
    background-color: #D9D9D9;
    border: none;
    font-size: 20px;
    padding: 5px 2%;
    font-family: 'Open Sans', arial, sans-serif !important;
}

.contactform .fields .field2 .white-field2 {
    float: right;
    width: 96%;
    height: 180px;
    background-color: #D9D9D9;
    border: none;
    font-size: 20px;
    padding: 5px 2%;
    font-family: 'Open Sans', arial, sans-serif !important;
}

.contactform .fields .red-field {
    float: right;
    width: 100%;
    padding-left: 10px;
    background-color: #F00;
    opacity: 0.5;
    filter: alpha(opacity=50);
    border: none;
    color: #FFF;
}

.contactform .fields .green-field {
    float: right;
    width: 100%;
    padding-left: 10px;
    background-color: #0C0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    border: none;
    color: #FFF;
}

.button-send {
    font-family: 'Open Sans', arial, sans-serif !important;
    margin: 60px 0px 0px 0px;
    /*aligner la zone du bouton*/
    width: 65%;
    height: auto;
    float: right;
    background-color: #fff !important;
    background-image: -webkit-linear-gradient(left, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    background-image: -o-linear-gradient(left, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    background-image: linear-gradient(to right, rgba(180, 175, 23, 0.9), rgba(180, 175, 23, 0.7), rgba(180, 175, 23, 0));
    text-decoration: none;
    border: none;
    font-size: 22px;
    padding: 20px 0px 20px 80px !important;
    line-height: 26px;
    color: #FFFFFF;
    text-align: left;
}

.button-send:hover {
    cursor: pointer;
    /*curseur adapté pour autre(s) média(s) que smartphone*/
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.icon-send {
    float: right;
    width: 116px;
    height: 84px;
    margin-top: 20px;
    margin-right: -40px;
    background-image: url(../images/Mail-icon-58x42.svg);
    transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    /* IE 9 */
    -moz-transform: rotate(-10deg);
    /* Firefox */
    -webkit-transform: rotate(-10deg);
    /* Safari and Chrome */
    -o-transform: rotate(-10deg);
    /* Opera */
    box-shadow: 5px 10px 8px rgba(0, 0, 0, .5);
}

/*ZONE FOOTER*/

#footer {
    background-color: #B2B2B2;
    height: 60px;
    color: #FFFFFF;
}

#footer p {
    font-size: 12px;
    line-height: 60px;
    text-align: center;
}

/*CONDITION POUR ECRAN ORDINATEUR (GRANDE TAILLE)*/
@media only screen and (max-width:1500px) {
    .title-right, .title-left {
        font-size: 32px;
        line-height: 32px;
        /*positionnement des menu par rapport au logo*/
    }

    .introduction-line p {
        font-size: 22px;
    }

    h2 {
        font-size: 1.2em;
    }

    #approachESG-container p, #platform-container p, #solutions-container p, #company-container p, #partners-container p, #contact-container p, #demonstration-container p {
        font-size: 1.0em;
    }

    .subtitle-left-line, .subtitle-right-line {
        margin: 20px 0px 40px 0px;
    }

    .highlights span {
        font-size: 30px;
    }

    .highlights h3 {
        font-size: 18px;
    }

    .highlights p {
        padding: 0px 15px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    .address-text p {
        font-size: 1.4em !important;
    }

    .demo-element {
        margin: 80px 0px 60px 0px;
        width: 50%;
    }
}

/*CONDITION POUR ECRAN TABLETTE (TAILLE MOYENNE)*/
@media only screen and (max-width:1050px) {
    .anchor {
        /*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
        transform: translateY(-65px);
        -ms-transform: translateY(-65px);
        /* IE 9 */
        -moz-transform: translateY(-65px);
        /* Firefox */
        -webkit-transform: translateY(-65px);
        /* Safari and Chrome */
        -o-transform: translateY(-65px);
        /* Opera */
    }

    #header {
        height: 60px;
    }

    .header_icon {
        position: relative;
        margin: 21px 0px;
        width: 20%;
    }

    .header_line {
        line-height: 18px;
    }

    .header_dot {
        top: -11px;
        left: -80px;
        width: 88px;
        background-size: 88px;
    }

    .logo a {
        width: 210px;
        height: 49px;
        margin: 5px 0px 6px 20px;
    }

    #pre-introduction_container {
        height: 60px;
    }

    #introduction-container {
        background-size: auto 100%;
    }

    .introduction-line {
        margin: 60px 0px;
        width: 75%;
    }

    .introduction-line p {
        font-size: 20px;
        padding: 50px 60px 50px 0px;
    }

    .demo-element {
        position: relative;
        margin: 80px 0px;
        width: 50%;
        height: auto;
        padding-bottom: 5%;
        float: left;
    }

    .demo-visual {
        position: absolute;
        bottom: -20%;
        right: -600px;
        width: 923px;
        height: 466px;
        float: left;
        background-image: url(../images/demonstration-laptop2.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    .button-login a {
        margin: 10px 0px 0px 10%;
        font-size: 16px;
        line-height: 22px;
    }
}


/*CONDITION*/
@media only screen and (max-width:880px) {
    .platform-text {
        float: none;
        width: 100%;
        padding: 0px 20px !important;
    }

    .platform-text .platform-element-left {
        width: auto;
        padding: 0px 60px 0px 60px !important;
    }

    .platform-visual {
        width: 90%;
        padding: 30px 5% 0px 5%;
    }

    .platform-visual img {
        width: auto;
        padding: 0px;
    }

    .solution-title {
        padding: 0px 20px !important;
    }

    .zoom-section, .contact-text {
        float: none;
        width: 100%;
    }

    .zoom-small-image {
        margin: 0px 60px 20px 60px;
    }

    .address-text p {
        font-size: 1.4em !important;
        padding-left: 60px !important;
    }

    .demo-visual {
        right: -500px;
        width: 738px;
        height: 373px;
    }
}


/*CONDITION*/
@media only screen and (max-width:780px) {
    .anchor {
        /*spécifier des zones pour les ancres qui sont décalées de la hauteur du header toujours visible*/
        transform: translateY(-107px);
        -ms-transform: translateY(-107px);
        /* IE 9 */
        -moz-transform: translateY(-107px);
        /* Firefox */
        -webkit-transform: translateY(-107px);
        /* Safari and Chrome */
        -o-transform: translateY(-107px);
        /* Opera */
    }

    .multicases {
        display: block;
        /*on bloque la largeur car pas de float à anuler*/
        width: 100%;
        margin: 0px;
    }

    .highlights {
        display: block;
        /*on bloque la largeur car pas de float à anuler*/
        width: auto;
        min-height: 0px;
        /*on annule la min-height */
        margin: 30px 20px;
    }

    .contactform .fields .field, .contactform .fields .red-field, .contactform .fields .green-field {
        min-height: 70px;
        /*ajustement de l'espacement vertical*/
    }

    .button-login a {
        position: absolute;
        right: 0px;
        top: 65px;
        margin: 0px;
        width: 100%;
        height: auto;
        float: right;
        font-size: 18px;
        padding: 10px 40px 10px 0px !important;
        line-height: 22px;
        text-align: right;
    }

    #header, #pre-introduction_container {
        height: 107px;
    }

    .nav {
        top: 107px;
    }

    .button-request a {
        width: 60%;
        font-size: 16px;
        line-height: 26px;
    }

    .button-emailing, .button-send {
        font-size: 16px;
        line-height: 26px;
    }

    .company-logos {
        margin: 20px auto;
        width: 100%;
    }

    .company-logo1, .company-logo2 {
        width: 50%;
        padding: 0px 25%;
        float: none;
    }

    .company-logo1 img, .company-logo2 img {
        padding: 10px 0px 20px 0px;
    }

    .company-interlogo {
        width: 100%;
        float: none;
    }

    .logo-link img {
        width: 40px;
        top: -15px;
        left: -9px;
    }

    .logo-link a {
        width: 50%;
        padding: 0px 25%;
    }

    .subtitle-introduction {
        width: 90%;
    }

    .subtitle-platform {
        width: 90%;
    }

    .subtitle-company {
        width: 90%;
    }

    .subtitle-contact {
        width: 90%;
    }

    .subtitle-approachESG {
        width: 90%;
    }

    .subtitle-solution {
        width: 90%;
    }

    .subtitle-partners {
        width: 90%;
    }

    .subtitle-demonstration {
        width: 90%;
    }
}

/*CONDITION*/
@media only screen and (max-width:610px) {
    .header_icon {
        width: 10%;
    }

    .title-right, .title-left {
        font-size: 22px;
        line-height: 26px;
        margin: 30px 0px 0px 0px;
        width: 90%;
    }

    .title-right {
        padding-right: 30px;
    }

    .title-left {
        padding-left: 30px;
    }

    #introduction-container p, #approachESG-container h2, #approachESG-container p, #platform-container h2, #platform-container p, #solutions-container h2, #solutions-container p, #company-container h2, #company-container p, #partners-container h2, #partners-container p, #contact-container h2, #contact-container p, #demonstration-container h2, #demonstration-container p {
        font-size: 16px;
        line-height: 20px;
    }

    .approachESG-text {
        float: none;
        width: 100%;
        padding: 0px 20px !important;
    }

    .approachESG-text .approachESG-element-right {
        width: auto;
    }

    .approachESG-visual {
        width: 70%;
        padding: 0px 15% 30px 15%;
    }

    .approachESG-visual img {
        width: auto;
        padding: 0px;
    }

    .platform-text .platform-element-left {
        padding: 0px 60px 0px 0px !important;
    }

    .align-right {
        text-align: left;
    }

    .company-text, .partners-title, .partners-text, .coordonate-title, .coordonate-text, .demo-title, .demo-text {
        padding: 0px 20px !important;
    }

    .zoom-section {
        float: none;
        width: 100%;
    }

    .zoom-small-image {
        margin: 0px 16px 18px 16px;
    }

    .address-text p {
        font-size: 16px !important;
        padding-left: 20px !important;
    }

    .demo-element {
        margin: 40px 0px 60px 0px;
    }

    .demo-visual {
        right: -400px;
        width: 554px;
        height: 280px;
    }

    .contactform .fields {
        padding: 0px 20px;
    }
}


/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:580px) {
    .logo a {
        width: 180px;
        height: 42px;
        margin: 9px 0px 9px 20px;
    }

    .subtitle-left-line, .subtitle-right-line {
        margin: 10px 0px 20px 0px;
    }
}


/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:470px) {
    #pre-animation_container {
        height: 80px;
    }

    .logo-link img {
        width: 40px;
        top: -15px;
        left: -30px;
    }

    .logo-link a {
        width: 80%;
        padding: 0px 10%;
    }

    .button-send, .button-emailing {
        width: 80%;
        margin: 60px 0px 0px 0px;
        /*aligner la zone du bouton*/
        padding: 10px 0px 10px 30px !important;
    }

    .icon-send, .icon-emailing {
        float: right;
        width: 58px;
        height: 42px;
        margin-top: 30px;
        margin-right: -15px;
        background-image: url(../images/Mail-icon-58x42.svg);
        background-size: contain;
    }

    .demo-element {
        position: relative;
        margin: 20px 0px 40px 0px;
        width: 100%;
    }

    .demo-visual {
        display: none;
    }
}

/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:390px) {
    .introduction-line p {
        font-size: 15px;
        padding: 30px 30px 30px 60px;
        /*line-height:18px;*/
    }

    .title-right, .title-left {
        font-size: 20px;
        line-height: 24px;
    }

    .title-right {
        padding-right: 20px;
    }

    .title-left {
        padding-left: 20px;
    }

    .button-request a {
        width: 70%;
        font-size: 12px;
        line-height: 18px;
    }

    .icon-request {
        right: 0px;
        width: 77px;
        height: 105px;
    }
}


/*CONDITION POUR ECRAN SMARTPHONE (PETITE TAILLE)*/
@media only screen and (max-width:360px) {
    .header_dot {
        top: -11px;
        left: -30px;
        width: 44px;
        height: 50px;
        background-image: url(../images/planche_menu1.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 88px;
    }
}