/*TAILLE ELEMENTS SELON SUPPORT MACHINE
SMARTPHONE WIDTH [0; 375]
TABLET WIDTH [376; 768]
LAPTOP WIDTH [769; 1920]
DEKSTOP WIDTH [1921;+8[*/

@media screen and (max-width: 375px) {
    #menu-opened_desktop {display: none!important;}
    .desktop-view {display: none!important;}
    .smartphone-view {display: block!important;}
/*SMARTPHONE - iPHONE 5*/
    /*TAILLES DE TEXTE*/
    h1 {font-size: 2.5em;}
    h2 {font-size: 2em;}
    h3 {font-size: 1.9em;}
    h4 {font-size: 1.5em;}
    h5 {}
    h6 {}
    a {font-size: .85em; line-height: 1em;}
    p.keywords-important {font-size: 1em; line-height: 1.15em;}
    p {font-size: .75em; line-height: 1.4em;}
    ul li {font-size: .75em; line-height: 1.3em;}
    p.plus-petit {font-size: .65em;}
    
    /*BOUTONS*/
    
    .bouton-CTA {font-size: .75em; line-height: 1em; }
    
    /*PAGES SPEC ELEMENTS*/
    /*CONCEPT*/
    #section2-part1-concept .conteneur-image-step img {width: 45%;}
    #section2-part2-concept div ul {
        max-height: 32.5vh;
        width: 90%;
        margin: 0;
        margin-left: 10%;
    }
    #section2-part2-concept div ul li {
        padding: .5% 0;
    }
    /*UNIVERS*/
    #dates-cles .conteneur-images .superpose-dates-contenu p.keywords-important {font-size: .85em; line-height: 1.4em; padding: 0 5%;}
    /*REFERENCES*/
    .marges-cotes5 {padding: 0;}
    #intro-references .voile-myVideo .block5 {padding: 0; padding-top: 5%; padding-bottom: 2%;} 
    #intro-references .voile-myVideo #refs-clients {padding: 2% 0;}
    #intro-references .voile-myVideo #refs-clients p {font-size: .65em; line-height: 1.25em;}
    #intro-references .voile-myVideo #refs-clients p:first-child {font-size: .6em; line-height: 1.25em;}
    /*PRATIQUES*/
    .voile-degrade-noir h1 {
        font-size: 2em;
        line-height: 1em;
        padding: 5% 0;
    }
    #intro-pratique-contenu {height: 40vh;}
    #intro-pratique-CTA {height: 20vh;}
    #form-pratique p {font-size: .75em; line-height: 1.4em;}
    input[type=button], input[type=submit] {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 7.5vh;
        width: 100%; 
        font-size: .65em; 
        line-height: 1em;
    }
}
@media screen and (min-width: 376px) and (max-width: 768px) {
    #menu-opened_desktop {display: none!important;}
    .desktop-view {display: none!important;}
    .smartphone-view {display: block!important;}
/*SMARTPHONE DEVICE - iPhone 6/7*/
    /*ELEMENTS SPEC. POUR DEVICE*/
    input[type=button], input[type=submit] {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 7.5vh;
        width: 100%; 
    }
}
@media screen and (min-width: 769px) and (max-width:1919px) {
    #menu-opened_smartphone {display: none;}
    #menu-opened_desktop {display: none;}/*PAR DEFAUT OFF*/
    .desktop-view {display: block!important;}
    .smartphone-view {display: none!important;}
    /*TAILLES TEXTE*/
    h1 {font-size: 4em;}
    h2 {font-size: 3.25em; line-height: 1.5em;}
    h3 {font-size: 3em; line-height: 1em;}
    h4 {font-size: 2.2em;}
    h6 {font-size: 2em; line-height: 2em;}
    
    a {font-size: 1.4em; line-height: 1em;}
    p.keywords-important {font-size: 1.4em; line-height: 1.5em;}
    p {font-size: 1.15em; line-height: 1.3em;}
    ul li {font-size: 1em; line-height: 1.5em;}
    .plus-petit {font-size: 1em;}
    
    img {
        /*width: 100%;*/
        height: auto;
    }
    /*BOUTONS*/
    .bouton-menu-to-open {
        position: absolute;
        z-index: 1;
        top:0;
    }
    .bouton-CTA {
        font-size: 1.2em;
        padding: 1.5% 0;
    }
    .bouton-menu-to-close {padding: 2.5%;}
    #bouton-slide-step-AVT {justify-content: flex-end;}
    #bouton-slide-step-APS {justify-content: flex-start;}
    .bouton-next-slide img {
        width: 7.5%;
    }
    
    #mentions-legales #mentions-legales-contenu .partie1 {padding: 2.5% 0;}
    #mentions-legales #mentions-legales-contenu .partie1 .bouton-fermer-mentions {width: 15%; padding: 0 2.5%;}
    #mentions-legales #mentions-legales-contenu .partie2 {flex-direction: column;}
    #cookies .bouton-fermer-cookies {width: 10%; padding: 1% 2.5%;}
    footer nav .arbo-bonus {height: inherit;}
    footer nav ul {flex-direction: row;}
    
    /*FLEXBOX POUR LAPTOP & DESKTOP*/
    .centrer-vertic {justify-content: center;}
    .centrer-horiz {align-items: center;}
    .centrer-texte {justify-content: center;}
    .gauche-texte {align-items: flex-start;}
    
    .fin-horiz {justify-content: flex-end;}
    .fin-vertic {align-items: flex-end;}
    .orga-colonnes {flex-direction: column;}
    .orga-lignes {flex-direction: row;}
    
    .block-flex {display: flex; flex-wrap: nowrap;}
    
    /*MENU DESKTOP & LAPTOP HEADER - MENU FERME*/
    header #menu-closed .conteneur {display: block;}
    header #menu-closed .arborescence {list-style-type: none; display: flex; justify-content: center;}
    header #menu-closed .arborescence li,  header #menu-closed .arborescence li a {
        height: 15vh; 
        min-height: 100px;
        max-height: 200px;
    }
    header #menu-closed .arborescence li {display: flex; align-content: center;}
    header #menu-closed .arborescence li:last-child {
        position: absolute; 
        top: 0; right: 0;
        margin: 0;
        padding: 0;
    }
    header #menu-closed .arborescence li a:last-child {position: absolute; z-index: 5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;}
    header #menu-closed .arborescence img, #menu-closed .bouton-menu-to-open img, 
    header #menu-opened_desktop .arborescence img, #menu-opened_desktop .bouton-menu-to-close img {display: block; height: 100%; width: auto;}
    #menu-closed .bouton-menu-to-open img {padding: 5%;}
    #menu-opened_desktop .bouton-menu-to-close img {padding: 10%;}
    #navigation-principale #rubrique-survol li a img {
        height: auto;
        width: 100%;
    }
    #navigation-principale #rubrique-survol li {height: auto;}
    
    /*FOOTER*/
    footer nav {flex-direction: row;}
    footer nav ul .logo {display: block; padding: 0;}
    
    /*TAILLES DE BLOCS*/
    #intro-concept, #voile-myVideo {height: 85vh;}
    
    /*PAGES SPEC.*/
    /*CONCEPT*/
    #myVideoConcept {
        top: 0; bottom: 0; left: 0; right: 0;
        min-width: 100%;
        min-height: 100%;
    } 
    #intro-concept-contenu {
        bottom: 0; top: 0;
        margin: 0;
    }
    #intro-concept-contenu h1, #intro-concept-contenu p {
        margin-left: auto;
        margin-right: auto;
    }
    #intro-concept-contenu h1 {
        display: flex;
        align-items: flex-start;
        padding: 0 0 2% 0;
    }
    a.bouton-next-slide {
        padding: 0;
        margin: 0;
        
        position: absolute;
        z-index: 55;
        display: flex;
        width: 100%;
        height: auto;
        text-align: center;
    }
    a.bouton-next-slide img {
        display: flex;
        height: auto;
        padding: 2% 0;
    }
    
    #section2-part1-concept {height: 30vh;}
    #section2-part1-concept h2 {padding-bottom: 0;}
    #section2-part1-concept div:first-child {}
    #section2-part1-concept img {
        width: 16%;
        position: relative;
        z-index: 0;
    }
    #section2-part1-concept a img {width: 20%;}
    #section2-part2-concept {height: 45vh; align-items: center;}
    #section2-part2-concept div ul li {padding: .25%;}
    .contenu-certif {flex-direction: column;}
    .contenu-step .bouton-CTA, .contenu-certif .bouton-CTA {padding: 3% 0;}
    #section3-part1-concept .certif-logo {
        display: flex;
        justify-content: center;
        height: 100%;
        width: auto;
    }
    #section3-part1-concept h3 {padding-bottom: 1%;}
    #section3-part1-concept div {height: 35vh; }
    #section3-part2-concept .contenu-certif div p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    #section3-part2-concept {
        position: relative;
        height: 50vh;
    }
    #contenu-certif1 {padding-top: 0;}
    #contenu-certif1 img {}

    /*UNIVERS*/
    h1, h2, h3, h4, h5, h6 {justify-content: center;}
    #intro-univers .block2_5 {padding-top: 1%; padding-bottom: 1%;}
    p {display: block!important;}
    #citation-univers {margin: 0 auto;}
    span { display: inline;}
    #fondatrice { /*background-color: white;*/}
    #dates-cles .conteneur-images .superpose-dates-contenu h3 {padding: 5%;}
    #dates-cles .conteneur-images .superpose-dates-contenu h3::after {
        width: 10%;
        height: 5px;
        left: 45%;
        margin-top: 2.5%;
    }
    #dates-cles .conteneur-images .superpose-dates-contenu p {font-size: 1.5em;}

    /*SAVOIR-FAIRE*/
    #myVideoSavoirFaire {left: 0; top: 0;}
    #intro-savoir-faire-contenu {display: flex; align-items: center;}
    #intro-savoir-faire-contenu p.texte-centre {text-align: left;}
    #intro-savoir-faire-contenu .block2_5, #intro-savoir-faire-contenu .block5 {padding-top: 1%; padding-bottom: 1%;}
    .filet-blanc-separe::after {display: none;}
    .block10 {padding-top: 4%; padding-bottom: 3%}
    .section100 h2, .section100 p, .section80 h2, .section80 p {align-items: flex-start; justify-content: flex-start; text-align: left;}
    .section100 p.texte-centre {}
    .section100 .block-align-gauche {flex-direction: column; justify-content: center;}
    #bouton-goTop {display: flex; height: 12.5vh; padding: 1% 0;}
    #bouton-goTop img {width: auto; height: 100%;}
    
    /*REFERENCES*/
    #intro-references {}
    #intro-references #refs-clients p:nth-child(n) {border-left: white 1px solid;}
    #intro-references #refs-clients p {display: flex!important; flex-direction: row; flex-wrap: nowrap; font-size: 1.25em;}
    #section2-references .fond-tex-pois .conteneur {flex-direction: row;}
    #section2-references .fond-tex-pois .conteneur #bouton-slide-ref-AVT, 
    #section2-references .fond-tex-pois .conteneur #bouton-slide-ref-APS {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10%;
        padding: 1%;
    }

    #section2-references .fond-tex-pois .conteneur h2 {
        display: flex;
        align-items: center;
        width: 80%;
    }
    .article-references {
        flex-direction: row;
        align-items: center;
        background-color: white;
    }

    /*PRATIQUES*/
    #intro-pratique {display: flex;}
    #intro-pratique iframe {min-height: 120%;}
    .voile-degrade-noir {display: flex; flex-direction: column;}
    .voile-degrade-noir h1 {display: flex; padding: 2.5% 0;}
    .voile-degrade-noir .conteneur {flex-direction: row;}
    #intro-pratique-contenu {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40vh;
    }
    #intro-pratique-CTA {
        display: flex;
        align-items: center;
        height: 40vh;
    }
    #intro-pratique-CTA nav {display: flex;}
    #intro-pratique-CTA nav ul {
        list-style: none; 
        display: flex;
        flex-direction: column;
    }
    #intro-pratique-CTA nav ul li a{
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 2.5% 0;
        padding: 2.5% 0;
        font-size: 1.5em; 
        line-height: 2em;
    }
    #lexique-pratique div {overflow: hidden;}
    #lexique-pratique.section100 {height: auto;}
    .definition p {padding: 5% 2.5%;}
    

    /*FLEXBOX*/
    .centrer-horiz, .centrer-texte {justify-content: center;}
    .gauche-texte {justify-content: flex-start;}
    .droite-texte, .fin-horiz {justify-content: flex-end;}

    .centrer-vertic {align-items: center;}
    .haut-block {align-items: flex-start;}
    .bas-block {align-items: flex-end;}
    
    .orga-colonnes {flex-direction: column;}
    .orga-lignes {flex-direction: row;}
    
    /*ESPACEMENTS BLOCS*/
    .block1, .block2_5, .block5, .block10 {display: flex;}
    .block5 {padding-top: 2.5%; padding-bottom: 2.5%;}
    .block2_5 {padding-top: 1.5%; padding-bottom: 1.5%;}
    .marges-contour3 {
        padding: 2.5% 3%;
    }
    span {margin: 0; padding: 0; flex-wrap: wrap;}
    .encadre-blanc {padding: 1% 0;}
}
@media screen and (min-width: 1920px) {
    #menu-opened_smartphone {display: none;}
    #menu-opened_desktop {display: none;}/*PAR DEFAUT OFF*/
    .desktop-view {display: block!important;}
    .smartphone-view {display: none!important;}
    /*TAILLES TEXTE*/
    h1 {font-size: 6em;}
    h2 {font-size: 4em; line-height: 1.5em;}
    h3 {font-size: 3.8em; line-height: 1em;}
    h4 {font-size: 3em;}
    h6 {font-size: 2.8em; line-height: 2em;}
    a {font-size: 1.5em; line-height: 1em;}
    
    p.keywords-important {font-size: 2em; line-height: 1.5em;}
    p {font-size: 1.5em; line-height: 1.5em;}
    .plus-petit {font-size: 1.3em;}
    ul li {font-size: 1.2em; line-height: 1.3em;}
    img {
        /*width: 100%;*/
        height: auto;
    }
    .bouton-next-slide img {
        width: 7.5%;
    }
    /*BOUTONS*/
    .bouton-menu-to-open {
        position: absolute;
        z-index: 1;
        top:0;
    }
    .bouton-CTA {
        font-size: 1.8em;
            padding: 1.5% 0;
    }
    .bouton-menu-to-close {padding: 2.5%;}
    #bouton-slide-step-AVT {justify-content: flex-end;}
    #bouton-slide-step-APS {justify-content: flex-start;}
    
    /*FLEXBOX POUR LAPTOP & DESKTOP*/
    .centrer-vertic {justify-content: center;}
    .centrer-horiz {align-items: center;}
    .centrer-texte {justify-content: center;}
    .gauche-texte {align-items: flex-start;}
    
    .fin-horiz {justify-content: flex-end;}
    .fin-vertic {align-items: flex-end;}
    .orga-colonnes {flex-direction: column;}
    .orga-lignes {flex-direction: row;}
    
    .block-flex {display: flex; flex-wrap: nowrap;}
    
    /*MENU DESKTOP & LAPTOP HEADER - MENU FERME*/
    header #menu-closed .conteneur {display: block;}
    header #menu-closed .arborescence {list-style-type: none; display: flex; justify-content: center;}
    header #menu-closed .arborescence li,  header #menu-closed .arborescence li a {
        height: 15vh; 
        min-height: 100px;
        max-height: 200px;
    }
    header #menu-closed .arborescence li {display: flex; align-content: center;}
    header #menu-closed .arborescence li:last-child {
        position: absolute; 
        top: 0; right: 0;
        margin: 0;
        padding: 0;
    }
    header #menu-closed .arborescence li a:last-child {position: absolute; z-index: 5; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;}
    header #menu-closed .arborescence img, #menu-closed .bouton-menu-to-open img {display: block; height: 100%; width: auto;}
    #navigation-principale #rubrique-survol li a img {
        height: auto;
        width: 100%;
    }
    
    
    #navigation-principale #rubrique-survol li {height: auto;}
    /*FOOTER*/
    
    
    #mentions-legales #mentions-legales-contenu .partie1 {padding: 2.5% 0;}
    #mentions-legales #mentions-legales-contenu .partie1 .bouton-fermer-mentions {width: 15%; padding: 0 2.5%;}
    #mentions-legales #mentions-legales-contenu .partie2 {flex-direction: column; margin: 0 10%;}
    #cookies .bouton-fermer-cookies {width: 10%; padding: 1% 2.5%;}
    footer nav {flex-direction: row;}
    footer nav .arbo-bonus {height: inherit;}
    footer nav ul {flex-direction: row;}
    /*TAILLES DE BLOCS*/
    
    #intro-concept, #voile-myVideo {height: 85vh;}
    
    /*PAGES SPEC.*/
    /*CONCEPT*/
    #myVideoConcept {
        top: 0; bottom: 0; left: 0; right: 0;
        min-width: 100%;
        min-height: 100%;
    } 
    #intro-concept-contenu {
        bottom: 0; top: 0;
        margin: 0;
    }
    #intro-concept-contenu h1, #intro-concept-contenu p {
        margin-left: auto;
        margin-right: auto;
    }
    #intro-concept-contenu h1 {
        display: flex;
        align-items: flex-start;
        padding: 0 0 2% 0;
    }
    a.bouton-next-slide {
        padding: 0;
        margin: 0;
        
        position: absolute;
        z-index: 55;
        display: flex;
        width: 100%;
        height: auto;
        text-align: center;
    }
    a.bouton-next-slide img {
        display: flex;
        height: auto;
        padding: 2% 0;
    }
    
    #section2-part1-concept {height: 35vh;}
    #section2-part1-concept h2 {padding-bottom: 0;}
    #section2-part1-concept div:first-child {}
    #section2-part1-concept img {
        width: 16%;
        position: relative;
        z-index: 0;
    }

    #section2-part2-concept {margin-top: 17.5vh; height: 45vh; align-items: center;}
    .contenu-certif {flex-direction: column;}
    .contenu-step .bouton-CTA, .contenu-certif .bouton-CTA {padding: 3% 0;}
    #section3-part1-concept .certif-logo {
        display: flex;
        justify-content: center;
        height: 100%;
        width: auto;
    }
    #section3-part1-concept h3 {padding-bottom: 1%;}
    #section3-part1-concept div {height: 35vh; }
    #section3-part2-concept .contenu-certif div p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    #section3-part2-concept {
        position: relative;
        height: 50vh;
    }
    #contenu-certif1 {padding-top: 0;}
    #contenu-certif1 img {}

    /*UNIVERS*/
    h1, h2, h3, h4, h5, h6 {justify-content: center;}
    #intro-univers p.block5 {padding-top: 1%; padding-bottom: 1%;}
    #intro-univers .block2_5 {padding-top: 1%; padding-bottom: 1%;}
    p {display: block!important;}
    #citation-univers {margin: 0 auto;}
    span { display: inline;}
    #fondatrice { /*background-color: white;*/}
    #dates-cles .conteneur-images .superpose-dates-contenu h3 {padding: 5%;}
    #dates-cles .conteneur-images .superpose-dates-contenu h3::after {
        width: 10%;
        height: 5px;
        left: 45%;
        margin-top: 2.5%;
    }
    #dates-cles .conteneur-images .superpose-dates-contenu p {font-size: 2em;}

    /*SAVOIR-FAIRE*/
    #myVideoSavoirFaire {left: 0; top: 0;}
    #intro-savoir-faire-contenu {display: flex; align-items: center;}
    #intro-savoir-faire-contenu p.texte-centre {text-align: left;}
    #intro-savoir-faire-contenu .block2_5, #intro-savoir-faire-contenu .block5 {padding-top: 1%; padding-bottom: 1%;}
    .filet-blanc-separe::after {display: none;}
    .block10 {padding-top: 4%; padding-bottom: 3%}
    .section100 h2, .section100 p, .section80 h2, .section80 p {align-items: flex-start; justify-content: flex-start; text-align: left;}
    .section100 p.texte-centre {}
    .section100 .block-align-gauche {flex-direction: column; justify-content: center;}
    #bouton-goTop {padding: 1% 0}
    #bouton-goTop img {width: auto;}
    
    /*REFERENCES*/
    #intro-references {}
    #intro-references #refs-clients p:nth-child(n) {border-left: white 1px solid;}
    #intro-references #refs-clients p {display: flex!important; flex-direction: row; flex-wrap: nowrap; font-size: 1.5em;}
    #section2-references .fond-tex-pois .conteneur {flex-direction: row;}
    #section2-references .fond-tex-pois .conteneur #bouton-slide-ref-AVT, 
    #section2-references .fond-tex-pois .conteneur #bouton-slide-ref-APS {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 10%;
        padding: 2.5%;
    }

    #section2-references .fond-tex-pois .conteneur h2 {
        display: flex;
        align-items: center;
        width: 80%;
    }
    .article-references {
        flex-direction: row;
        align-items: center;
        background-color: white;
    }

    /*PRATIQUES*/
    #intro-pratique {display: flex;}
    #intro-pratique iframe {min-height: 120%;}
    .voile-degrade-noir {display: flex; flex-direction: column;}
    .voile-degrade-noir h1 {display: flex; padding: 2.5% 0;}
    .voile-degrade-noir .conteneur {flex-direction: row;}
    #intro-pratique-contenu {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40vh;
    }
    #intro-pratique-CTA {
        display: flex;
        align-items: center;
        height: 40vh;
    }
    #intro-pratique-CTA nav {display: flex;}
    #intro-pratique-CTA nav ul {
        list-style: none; 
        display: flex;
        flex-direction: column;
    }
    #intro-pratique-CTA nav ul li a{
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 2.5% 0;
        padding: 2.5% 0;
        font-size: 1.5em; 
        line-height: 2em;
    }
    .definition p {padding: 5% 2.5%;}

    /*FLEXBOX*/
    .centrer-horiz, .centrer-texte {justify-content: center;}
    .gauche-texte {justify-content: flex-start;}
    .droite-texte, .fin-horiz {justify-content: flex-end;}

    .centrer-vertic {align-items: center;}
    .haut-block {align-items: flex-start;}
    .bas-block {align-items: flex-end;}
    
    .orga-colonnes {flex-direction: column;}
    .orga-lignes {flex-direction: row;}
    
    /*ESPACEMENTS BLOCS*/
    .block1, .block2_5, .block5, .block10 {display: flex;}
    .block5 {padding-top: 2.5%; padding-bottom: 2.5%;}
    .block2_5 {padding-top: 1.5%; padding-bottom: 1.5%;}
    .marges-contour3 {
        padding: 2.5% 3%;
    }
    span {margin: 0; padding: 0; flex-wrap: wrap;}
    .encadre-blanc {padding: 1% 0;}
}