@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 1480px){
    #conteneurMenu {padding: 13% 5%;}
    h1 {font-size: 4.3em;width: 70%;margin-left: 0;}
    #content-before-intro {max-width: 70%; margin: 60px auto; padding: 0px 25px;}
    h2 {font-size: 3.5em;}
    .before-chapitre-noir:before, .before-chapitre-blanc:before {height: 20px;  top: -20px}
    .before-chapitre-noir:after, .before-chapitre-blanc:after {height: 20px; bottom: -30px}
    #background-chap03-top {height: 357px;}
    #background-chap04-top {height: 365px;}
    #before-intro {max-height: 80vh;}
}
@media only screen and (max-width: 1380px){
    h1 {font-size: 4.5em;width: 80%;margin-left: 0;}
    #before-intro {max-height: 70vh;}
    h6{padding: 5% 0 0;}
}
@media only screen and (max-width: 1281px){
    #conteneurMenu {padding: 5%;}
    #before-intro {max-height: 80vh;}
    h6{padding: 0;}
}
/*@media only screen and (max-width: 1279px){
    #before-intro {max-height: 45vh;}
}*/
@media only screen and (max-width: 1025px){
    #before-intro {max-height: 80vh;padding: 10% 5% 2%;}
    .all-content {padding: 0 20px;}
    #observatoires {width: 100%;}
    #background-chap03-top .all-content {padding-top: 11%;}
    #conteneurMenu {padding: 10% 5%;}
    #ytplayer01{transform: scale(50%);}
    .numero-h3{font-size: 0.7em;}
}
@media only screen and (max-width: 780px){
    #before-intro {padding: 10% 5%;    max-height: 50vh;}
    #content-before-intro {max-width: 100%;margin: 80px 0 0 0;padding: 0px;}
    #logo-unil {top: -127px;right: 0; left: inherit;}
    h1 {font-size: 4em;}
    h2 {font-size: 3em;}
    h3 { font-size: 1.7em;}
    .demi-blocG {width: 80%; margin-right: 0; margin-left: 10%;}
     #introduction .demi-blocG:nth-child(2) {width: 80%;}
    .five-bloc {width: 20%;padding: 50px 0;}
    #enseignement-schema01, #enseignement-schema02 {max-width: 700px;max-height: 520px;}
    .supermargin-t { margin-top: 5%;}
    .btn-action-chap02-01, .btn-action-chap02-02, .btn-action-chap02-03, .btn-action-chap02-04, .btn-action-chap02-05 {padding: 30px 20px;}
    .demi-bloc {width: 100%;float: none;margin-right: 0;    display: inline-block;}
    .demi-blocR {width: 100%;float: none;margin-left: 0;}
    .margin-l {margin-left: 0;}
    .supermargin-l {margin-left: 0;}
    .demi-bloc img{max-width: 90%;}
    .exergue {width: 84%;margin-top: 80px;}
    .numero-h3 {padding: 7px 0;height: -webkit-fill-available;}
    .ajust-tablet01{display: block;min-height: 250px;width: 100%;margin: 3% auto;padding: 5% 0;}
    .ajust-tablet01 .txt-chiffre-blue{left: 25%;}
    .bloc-flore {margin: 5% 0 0;}
    #img-rencontre, #img-debat, #img-invitation {background-position: center;background-size: 80%;width: 220px; height: 205px;}
    #observatoires {background-image: url("images/fond-observatoire-tablet.jpg");width: 100%;height: 450px;padding: 3% 0;}
    #observatoires .all-content{padding: 0;width: 400px;margin: 0 0 0 4%;}
    #img-soutenir {background-size: 100%;}
    .bloc-flore-line {padding-left: 6%;}
    #background-chap03-top { height: 305px;}
    #img-184-formation{left:5%; top: 6%;}
    .ajust-tablet02{display: block; min-height: 200px;width: 100%; margin: 5% auto 0;padding:0;}
    .ajust-tablet02 .chiffre-blue-02{right: 10%; bottom: 0;top: 15%;}
    .ajust-tablet02 .txt-chiffre-blue-02{right: -5%;top: 45%;bottom: 0;}
    .ajust-tablet02 .chiffre-blue-02:before {left: -37%; top: -18%;}
    .tier-bloc-flore { width: 37%;height: 80px;margin-bottom: 2%;}
    #background-chap04-top {height: 305px;}
    .demi-bloc-flore {padding-left: 4%;}
    .demi-bloc-flore02 {padding-left: 4%;margin: 3% 4% 0 2%;}
    #transition-schema { margin: 0 auto;}
    .ajust-tablet03{width: 50%; float: left;}
    #agriculture-schema {height: 305px;margin: 0 auto;}
    #schema-gouvernance {background-size: 90%;}
    .ajust-tablet04{min-height: 130px;}
    
    #before-intro {background-image: url("images/fond-header.jpg");}
    #img-400-informer {background-image: url("images/400-informer.png");}
    #img-soutenir {background-image: url("images/schema-soutenir.png");}
    #enseignement-schema01{background-image: url("images/enseignement-schema01bis.png");}
    #enseignement-schema02{background-image: url("images/enseignement-schema02bis.png");}
    #formation-continue-schema{background-image: url("images/formation-continue-schema.png");}
    #schema-scenarios{background-image: url("images/schema-scenarios.png");}
    .demi-bloc-flore:before, .demi-bloc-flore02:before, .bloc-flore-line:before, .bloc-flore:before, .bloc-flore-tiers:before{background-image: url('images/before-flore-new.png');}
    
    #conteneurSupra{ font-size: 0.8em; width: 700px;}
    
}
@media only screen and (max-width: 767px){
    body {margin: 0;}

    .noneMenu{display:block;}
    .noneSupra{display:none;}
    
    #tradchoice { left: 90px;top: 40px;}
}
@media only screen and (max-width: 520px){

    h1 {font-size: 2.5em;}
    h2 {font-size: 2em;}
    h3 { font-size: 1.5em; padding: 3% 10%; line-height: .8em;transform: translateY(20px);}
    h6 {font-size: 15px;}
    h7 { font-size: 16px;line-height:1.3em;}
    #before-intro {max-height: 60vh;padding: 20% 5%;background-position: 70% top;}
    #logo-unil {background-position: right;background-size: 100%; right: 0; width: 100px;}
    .petith1 {font-size: 0.6em; margin-top: 0px;}
    #conteneurMenu {padding: 30% 5% 0;font-size: 1.1em;line-height: 1.5em;}
    #conteneurMenu a {line-height: 1em;}
    .tier-bloc { width: 100%; padding: 30px 1%;}
    .numero-h3 {padding: 10px 0;width: 35px;max-height: 25px;}
    #intro-schema-new {max-width: 100%;}
    .five-bloc02 {float: left;width: 48%;}
    .exergue {font-size: 0.8em;line-height: 1.4em;padding: 25% 8% 10%;}
    #background-chap02-top {height: 450px; padding: 60px 0 0 0;}
    #background-chap01-top {height: 60px;}
    #background-chap01-bottom {height: 40px;padding-top: 20px;}
    .five-bloc {width: 100%;padding: 30px 0 0;}
    .five-bloc:last-child{margin-bottom: 30px;}
    .btn-action-chap02-01, .btn-action-chap02-02, .btn-action-chap02-03, .btn-action-chap02-04, .btn-action-chap02-05 { width: auto; height: auto;margin: auto; display: block; padding:20px 30px;}
    .bloc-flore {padding-left: 9%;}
    #img-rencontre, #img-debat, #img-invitation { margin: auto;}
    #observatoires {background-image: url("images/fond-observatoire-smart.jpg");width: 100%;height: 600px;padding: 3% 0;}
    #observatoires .all-content{padding: 0;width: 300px;margin: 70px auto 0;font-size: 0.9em;}
    #enseignement-schema01, #enseignement-schema02 {max-width: 370px;height: 350px; background-size: 98%;}
     #enseignement-schema02 {padding: 10% 0;}
    #background-gouvernance-top #equipe-demibloc .demi-bloc { width: 100%;}
    #schema-gouvernance {background-size: 100%;height: 220px;}
    .ajust-tablet03 {width: 100%; margin: 3% 0;}
    .tier1-bloc {width: 100%;margin: 10% 0 0;}
    .tier2-bloc {width: 100%;margin:0;}
    .bloc-a-venir:before {width: 94%;height: calc(100% - 20px);top: 10px; left: 10px;}
    #img-soutenir {background-image: url(images/schema-soutenir-smart.jpg);}
    #volteface-logo:after {background-size: 75%;width: 70px;right: -20px;top: -4px;}
    .bloc-flore-line { width: 90%;padding-left: 10%;}
    .tier-bloc-flore {width: 100%;height: 80px; margin: 0;}
    #formation-continue-schema { background-size: 100%; height: 170px;}
    #background-chap04-top {height: 260px;}
    .before-chapitre-noir:before, .before-chapitre-blanc:before{display: none;}
    #background-chap03-top {height: 260px;}
    #recits-schema {height: 210px;background-size: 60%;}
    #sante-schema { background-size: 60%; height: 230px;}
    .demi-bloc-flore { padding-left: 10%; width: 87%;}
    .demi-bloc-flore02 {padding-left: 10%;width: 88%;}
    #menuToggler {left: 15px;}
    #tradchoice { left: 80px;top: 40px;}
    #btn_rapportlink, #rapportcomplet{display: none;}
    #video01, #video02, #video03, #video04, #video05, #video06{font-size: 0.8em;}
    .bloc-a-venir {padding: 8%;}
    .txtmoyen {font-size: 0.7em;}
    #transition-schema { background-size: 70%; height: 207px;}
    #schema-scenarios {background-image: url(images/schema-scenarios-smart.png);background-size: 100%; height: 294px;margin: 20px auto;}
    #search-engagement { background-size: 60%; height: 205px;}
    #video03 {margin: 10% 0;}
    #biodiversity-schema { background-size: 80%; height: 270px;}
    #mobilite-schema { background-size: 80%;height: 260px;}
    .video { margin: 0 0 10% 0;}
    #energy-schema { background-size: 80%;}
    #chantiers-schema { background-size: 70%;height: 240px;margin: -20px auto 20px;}
    #agriculture-schema { background-size: 70%;height: 225px;}
    #img-400-informer {left: 12%; background-size: 80%; height: 200px}
    .chiffre-blue {left: 20%;top: 166px;}
    .ajust-tablet01 .txt-chiffre-blue {left: 0;line-height: 1.2em;font-size: 0.9em;top: 217px;}
    .chiffre-blue:before { left: -45px;top: -160px;}
    #img-184-formation {left:calc(50% - 150px);width: 300px;}
    .ajust-tablet02{height: 280px;}
    .ajust-tablet02 .chiffre-blue-02 {right: inherit;left: 25%;bottom: 0;top: 69%;}
    .ajust-tablet02 .txt-chiffre-blue-02{left: -10px;width: 80%;line-height: 1.2em;font-size: 0.9em;top: 240px;}
    .ajust-tablet02 .chiffre-blue-02:before {left: -2%;top: -188px;background-size: 89%;}    
    .ajust-smart01{margin-top: 30px; display: inline-block;}
    .ajust-smart02{margin-top: 30px; display: block;}
    .ajust-smart05{margin-top: 40px; display: inline-block;}
    .ajust-smart06{margin-top: 60px; display: inline-block;}

}
    @media only screen and (max-width: 380px){
    .ajust-smart03{transform: translateY(20px); display: block;}
    .ajust-smart04{transform: translateY(40px); display: block;}
    .ajust-smart05{margin-top: 20px; display: inline-block;}
    .ajust-smart06{margin-top: 80px; display: inline-block;}

    h1 {font-size: 2.3em;}
    h2 {margin: 40px auto 30px;}
    h3 { font-size: 1.5em;top: 30px;margin-bottom: 50px;}
    h6 {font-size: 12px;}
    .numero-h3 { width: 100%;padding: 0;left: 0;
    top: -25px;}
    #enseignement-schema01, #enseignement-schema02 {max-width: 100%;background-size: 99%;height: 300px;}
    #logo-unil {right: 0;top: -75px;width: 100px;background-size: 100%;}
    #before-intro {max-height: 55vh; padding: 10% 5%;}
}
    @media only screen and (max-width: 350px){
    #enseignement-schema02 {padding:0;}
    h1 {font-size: 2em;}
    #before-intro {max-height: 65vh;}
}