@font-face {
    font-family: Geograph;
    src: url('typo/geographeditwebregular.ttf');
}

body {
    font-family: Geograph, Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1000px;
       padding: 20px;
}

.pair{
    display:flex;
    align-items: center;
}
.impair{
    display:flex;
    flex-direction: row-reverse;
    align-items: center;
}

.pair img, .impair img {
    max-width: 45%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.pair p, .impair p {
    padding:60px;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    .pair p, .impair p {
        padding:0;
    }
}
/* ---------------------------- Occitanie 2 ------------------------------------*/
#occitanie2{
    width:100%;
    display:flex;
    height:1400px;
}

#usage_production_ressources{
    width:70%;
}

#innovation_formation{
    background-color: #c1c1c1;
    transition: background-color 2s;
    width:30%;
    cursor: pointer;
    position:relative;
}

#innovation_formation:hover{
    background-color:#89a0e3;
    transition: background-color 2s;
}

#usage_production_ressources > article{
    transition: background-color 2s;
    cursor: pointer;
}
#usages{
    background-color: #d7d7d7;
    height:550px;
    position:relative;
}
#production{
    background-color: #cbcbcb;
    height:550px;
    position:relative;

}
#ressources{
    background-color: #c7c7c7;
    height:300px;
    position:relative;
}
#pointe-prod {
    position: absolute;
    top: -64px;
    width: 25%;
    left:37.5%;
    height: 160px;
    background-color: #cbcbcb;
    clip-path: polygon(50% 10%, 100% 40%, 80% 40%, 80% 60%, 20% 60%, 20% 40%, 0 40%);
    z-index: 11;
    transition: background-color 2s;
}
#pointe-ressource {
    position: absolute;
    top: -64px;
    width: 25%;
    left:37.5%;
    height: 160px;
    background-color: #c7c7c7;
    clip-path: polygon(50% 10%, 100% 40%, 80% 40%, 80% 60%, 20% 60%, 20% 40%, 0 40%);
    z-index: 11;
    transition: background-color 2s;
}
#icone-prod{
    position: absolute;
    width: 50px;
    top: -25px;
    left: calc(50% - 25px);
    z-index: 12;
}
#icone-ressource{
    position: absolute;
    width: 35px;
    top: -30px;
    left: calc(50% - 22.5px);
    z-index: 12;
}
#usages:hover{
    background-color:#4abe73;
    transition: background-color 2s;
}

#production:hover,
#production:hover #pointe-prod{
    background-color:#0098a9;
    transition: background-color 2s;
}

#ressources:hover,
#ressources:hover #pointe-ressource{
    background-color:#097fdf;
    transition: background-color 2s;
}
.bleu-ressources{
    background-color:#097fdf !important;
}
.bleu-production{
    background-color:#0098a9 !important;
}

#text_rd{
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    display:none;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;

}

#text_rd::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #89a0e3;
    opacity:1;
    z-index:-1;
}

#text_usage{
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    display:none;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

#text_usage::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4abe73;
    opacity:1;
    z-index:-1;
}
#text_prod{
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    display:none;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

#text_prod::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0098a9;
    opacity:1;
    z-index:-1;
}
#text_ressource{
    width:100%;
    height:100%;
    position:absolute;
    z-index:10;
    display:none;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

#text_ressource::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #097fdf;
    opacity:1;
    z-index:-1;
}
#close_rd,
#close_prod,
#close_usage,
#close_ressource{
    position:absolute;
    top:10px;
    left:10px;
    font-size: 30px;
}
#text_usage > p,
#text_rd > p,
#text_prod > p,
#text_ressource > p{
    padding: 30px;
    color: white;
    font-weight: 500;
    text-align:center;
    line-height: 30px;
    font-size:16px;
}

#text_usage > a,
#text_rd > a,
#text_prod > a,
#text_ressource > a{
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: solid 1px white;
    padding: 10px 15px;
    color:white;
}

#text_usage > a:hover,
#text_rd > a:hover,
#text_prod > a:hover,
#text_ressource > a:hover{
    background:white;
}
#text_usage > a:hover{
    color:#4abe73;
}
#text_rd > a:hover{
    color:#89a0e3;
}
#text_prod > a:hover{
    color:#0098a9
}
#text_ressource > a:hover{
    color:#097fdf;
}
#text_usage > span,
#text_rd > span,
#text_prod > span,
#text_ressource > span{
    color: white;
    font-weight: 700;
}

#text_usage > span:hover,
#text_rd > span:hover,
#text_prod > span:hover,
#text_ressource > span:hover{
    color: white;
    font-weight: 700;
}

.puce{
    position:absolute;
    top:40px;
    left:40px;
    width:20px;
    animation: grossir 2s infinite;
}
.puce img{
    width:100%;
}

@keyframes grossir {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
/*-------------------------------------- Innovation Formation --------------------------------------*/
#innovation_formation{
    display:flex;
    flex-wrap: wrap;
    align-content: center;
    gap:30px;
}
#titre_rd{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
#innovation_formation > #titre_rd > img{
    width:80%;
}
#illus_rd{
    width:100%;
}
#illus_rd > article{
    width:80%;
    position:relative;
}
#illus_rd > article > img{
    width:100%;
}

#illus_rd1{
    left:30px;
    top:0px;
    z-index:3;
}
#illus_rd1.move-vertical-rd1 {
    animation: moveVerRD1 1s forwards;
}
#illus_rd1.move-vertical-rd1Return {
    animation: moveVerRD1Return 1s forwards;
}
@keyframes moveVerRD1 {
    from {
        top: 40px;
    }
    to {
        top: 0px;
    }
}
@keyframes moveVerRD1Return {
    from {
        top: 0px;
    }
    to {
        top: 40px;
    }
}
#illus_rd2{
    left:30px;
    top:-76px;
    z-index:2;
}
#illus_rd2.move-vertical-rd2 {
    animation: moveVerRD2 1s forwards;
}
#illus_rd2.move-vertical-rd2Return {
    animation: moveVerRD2Return 1s forwards;
}
@keyframes moveVerRD2 {
    from {
        top: -36px;
    }
    to {
        top: -76px;
    }
}
@keyframes moveVerRD2Return {
    from {
        top: -76px;
    }
    to {
        top: -36px;
    }
}
#illus_rd3{
    left:30px;
    top:-130px;
    z-index:1;
}
#illus_rd3.move-vertical-rd3 {
    animation: moveVerRD3 1s forwards;
}
#illus_rd3.move-vertical-rd3Return {
    animation: moveVerRD3Return 1s forwards;
}
@keyframes moveVerRD3 {
    from {
        top: -90px;
    }
    to {
        top: -130px;
    }
}
@keyframes moveVerRD3Return {
    from {
        top: -130px;
    }
    to {
        top: -90px;
    }
}
/*-------------------------------------- Usages --------------------------------------*/
#usages{
    display:flex;
    flex-wrap: wrap;
}
#usages > article:not(:last-of-type){
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
#usages > #titre_usage > img{
    width:130px;
}
#usages > #illus_usages > img{
    width:90%;
}
#illus_usages_avion{
    width:80px !important;
    position:relative;
    bottom:340px;
    left:520px;
}
#illus_usages_avion > img{
    width:100%;
}
#illus_usages_avion.move-diagonal {
    animation: moveDiagonal 1s forwards;
}
#illus_usages_avion.move-diagonalReturn {
    animation: moveDiagonalReturn 1s forwards;
}
@keyframes moveDiagonal {
    from {
        left: 520px;
        bottom: 340px;
    }
    to {
        left: 560px;
        bottom: 370px;
    }
}
@keyframes moveDiagonalReturn {
    from {
        left: 560px;
        bottom: 370px;
    }
    to {
        left: 520px;
        bottom: 340px;
    }
}

#illus_usages_nuage{
    width:60px !important;
    position:relative;
    bottom:380px;
    left:100px;
}
#illus_usages_nuage > img{
    width:100%;
}
#illus_usages_nuage.move-horizontal-nuage {
    animation: moveHorizonNuage 1s forwards;
}
#illus_usages_nuage.move-horizontal-nuageReturn {
    animation: moveHorizonNuageReturn 1s forwards;
}
@keyframes moveHorizonNuage {
    from {
        left: 100px;
        bottom: 380px;
    }
    to {
        left: 100px;
        bottom: 340px;
    }
}
@keyframes moveHorizonNuageReturn {
    from {
        left: 100px;
        bottom: 340px;
    }
    to {
        left: 100px;
        bottom: 380px;
    }
}
/*-------------------------------------- Production --------------------------------------*/
#production{
    display:flex;
    flex-wrap:wrap;
}
#titre_production{
    width:100%;
    position:absolute;
    top:33px;
    display:flex;
    justify-content: center;
    align-items: center;
}
#titre_production > img{
    width:260px;
}

#illus_production_double{
    width:100%;
    height: 245px;
}

#illus_production_double > article{
    width:20%;
    position:relative
}
#illus_production_double > article:nth-of-type(2){
    width:32%;
    position:relative
}

#illus_production_double > article > img{
    width:100%;
}

#illus_production_stockage{
    left:100px;
    bottom: -75px;
}
#illus_production_stockage.move-horizontal-stockage {
    animation: moveHorizonStock 1s forwards;
}
#illus_production_stockage.move-horizontal-stockageReturn {
    animation: moveHorizonStockReturn 1s forwards;
}
@keyframes moveHorizonStock {
    from {
        left: 100px;
        bottom: -75px;
    }
    to {
        left: 180px;
        bottom: -75px;
    }
}
@keyframes moveHorizonStockReturn {
    from {
        left: 180px;
        bottom: -75px;
    }
    to {
        left: 100px;
        bottom: -75px;
    }
}

#illus_production_compression{
    left:420px;
    bottom:102px;
}

#illus_production_compression.move-horizontal-compression {
    animation: moveHorizonCompr 1s forwards;
}
#illus_production_compression.move-horizontal-compressionReturn {
    animation: moveHorizonComprReturn 1s forwards;
}
@keyframes moveHorizonCompr {
    from {
        left: 420px;
        bottom: 102px;
    }
    to {
        left: 340px;
        bottom: 102px;
    }
}
@keyframes moveHorizonComprReturn {
    from {
        left: 340px;
        bottom: 102px;
    }
    to {
        left: 420px;
        bottom: 102px;
    }
}

#illus_production_end{
    width:100%;
    display:flex;
    padding-bottom: 30px;
    justify-content: center;
    align-items: center;
}
#illus_production_end > img{
    width:100%;
}

/*-------------------------------------- Ressources --------------------------------------*/
#ressources{
    display:flex;
    flex-wrap:wrap;
    align-content: space-around;
}
#ressources > article{
    width:100%;
}

#titre_ressources{
    width:100%;
    padding-top:30px;
    display:flex;
    justify-content: center;
    align-items: center;
}
#titre_ressources > img{
    width:260px;
}
#barr_eol_sol{
    width:100%;
    display:flex;
}

#barr_eol_sol > article{
    width:20%;
    position:relative;
}

#illus_eolien > img{
    height:196px
}

#illus_eolien{
    bottom: -10px;
    left: 70px;
}

#illus_eolien.move-vertical-eol {
    animation: moveVerticalEol 1s forwards;
}
#illus_eolien.move-vertical-eolReturn {
    animation: moveVerticalEolReturn 1s forwards;
}
@keyframes moveVerticalEol {
    from {
        bottom: -10px;
    }
    to {
        bottom: 20px;
    }
}
@keyframes moveVerticalEolReturn {
    from {
        bottom: 20px;
    }
    to {
        bottom: -10px;
    }
}

#illus_solaire{
    bottom: -10px;
    left: 140px;
}
#illus_solaire.move-vertical-sol {
    animation: moveVerticalSol 1s forwards;
}
#illus_solaire.move-vertical-solReturn {
    animation: moveVerticalSolReturn 1s forwards;
}
@keyframes moveVerticalSol {
    from {
        bottom: -10px;
    }
    to {
        bottom: 20px;
    }
}
@keyframes moveVerticalSolReturn {
    from {
        bottom: 20px;
    }
    to {
        bottom: -10px;
    }
}

#illus_barrage{
    bottom: -10px;
    left: 210px;
}
#illus_barrage.move-vertical-bar {
    animation: moveVerticalBar 1s forwards;
}
#illus_barrage.move-vertical-barReturn {
    animation: moveVerticalBarReturn 1s forwards;
}
@keyframes moveVerticalBar {
    from {
        bottom: -10px;
    }
    to {
        bottom: 20px;
    }
}
@keyframes moveVerticalBarReturn {
    from {
        bottom: 20px;
    }
    to {
        bottom: -10px;
    }
}
/*-------------------------------------- Responsive Tablet --------------------------------------*/
@media (max-width: 1040px) {
    .container{
        max-width:728px;
    }
    #occitanie2 {
        height: 1105px;
    }
    .puce {
        position: absolute;
        top: 20px;
        left: 20px;
    }
    #innovation_formation {
        background-color: #89a0e3 !important;
    }
    #usages{
        height:425px;
        background-color:#4abe73 !important;
    }
    #production{
        height:425px;
        background-color:#0098a9 !important;
    }
    #ressources{
        height:255px;
        background-color:#097fdf !important;
    }
    .pointe-prod {
        background-color: #0098a9 !important;
    }
    .pointe-ressource {
        background-color: #097fdf !important;
    }
    #illus_usages_avion {
        width: 70px !important;
        bottom: 255px;
        left: 360px;
    }
    @keyframes moveDiagonal {
        from {
            left: 360px;
            bottom: 255px;
        }
        to {
            left: 400px;
            bottom: 285px;
        }
    }
    @keyframes moveDiagonalReturn {
        from {
            left: 400px;
            bottom: 285px;
        }
        to {
            left: 360px;
            bottom: 255px;
        }
    }
    #illus_usages_nuage {
        width: 55px !important;
        position: relative;
        bottom: 270px;
        left: 70px;
    }
    @keyframes moveHorizonNuage {
        from {
            left: 70px;
            bottom: 270px;
        }
        to {
            left: 70px;
            bottom: 245px;
        }
    }
    @keyframes moveHorizonNuageReturn {
        from {
            left: 70px;
            bottom: 245px;
        }
        to {
            left: 70px;
            bottom: 270px;
        }
    }

    #illus_production_double {
        height: 190px;
    }

    #illus_production_stockage{
        left:75px;
        bottom: -60px;
    }
    @keyframes moveHorizonStock {
        from {
            left: 75px;
            bottom: -60px;
        }
        to {
            left: 125px;
            bottom: -60px;
        }
    }
    @keyframes moveHorizonStockReturn {
        from {
            left: 125px;
            bottom: -60px;
        }
        to {
            left: 75px;
            bottom: -60px;
        }
    }

    #illus_production_compression{
        left:320px;
        bottom:70px;
    }

    @keyframes moveHorizonCompr {
        from {
            left: 320px;
            bottom: 70px;
        }
        to {
            left: 270px;
            bottom: 70px;
        }
    }
    @keyframes moveHorizonComprReturn {
        from {
            left: 270px;
            bottom: 70px;
        }
        to {
            left: 320px;
            bottom: 70px;
        }
    }

    #barr_eol_sol > article > img {
        height: 120px;
    }
    #barr_eol_sol > article {
        width: 13%;
    }

    #illus_rd1{
        left:10px;
        top:0px;
    }
    @keyframes moveVerRD1 {
        from {
            top: 0px;
        }
        to {
            top: 20px;
        }
    }
    @keyframes moveVerRD1Return {
        from {
            top: 20px;
        }
        to {
            top: 0px;
        }
    }
    #illus_rd2{
        left:16px;
        top:-57px;
    }
    @keyframes moveVerRD2 {
        from {
            top: -57px;
        }
        to {
            top: -35px;
        }
    }
    @keyframes moveVerRD2Return {
        from {
            top: -35px;
        }
        to {
            top: -57px;
        }
    }
    #illus_rd3{
        left:10px;
        top:-100px;
    }
    @keyframes moveVerRD3 {
        from {
            top: -100px;
        }
        to {
            top: -80px;
        }
    }
    @keyframes moveVerRD3Return {
        from {
            top: -80px;
        }
        to {
            top: -100px;
        }
    }
}

/*-------------------------------------- Responsive Mobile --------------------------------------*/
@media (max-width: 750px) {
    .container{
        max-width:none;
        padding:0;
    }
    #occitanie2 {
        height: auto;
        flex-wrap: wrap;
    }

    #innovation_formation {
        width:100%;
    }
    #usage_production_ressources {
        width: 100%;
    }


    #usages{
        height:570px;
    }
    #production{
        height:570px;
    }
    #ressources{
        height:260px;
    }

    #usages > #illus_usages > img {
        width: 90%;
    }

    #illus_usages_avion {
        width: 70px !important;
        bottom: 360px;
        left: 70%;
    }
    @keyframes moveDiagonal {
        from {
            left: 70%;
            bottom: 360px;
        }
        to {
            left: 80%;
            bottom: 390px;
        }
    }
    @keyframes moveDiagonalReturn {
        from {
            left: 80%;
            bottom: 390px;
        }
        to {
            left: 70%;
            bottom: 360px;
        }
    }
    #illus_usages_nuage {
        width: 10% !important;
        position: relative;
        bottom: 350px;
        left: 18%;
    }
    @keyframes moveHorizonNuage {
        from {
            left: 18%;
            bottom: 350px;
        }
        to {
            left: 18%;
            bottom: 380px;
        }
    }
    @keyframes moveHorizonNuageReturn {
        from {
            left: 18%;
            bottom: 380px;
        }
        to {
            left: 18%;
            bottom: 350px;
        }
    }

    #illus_production_double {
        height: 190px;
    }
    #illus_production_double > article {
        height:150px;
    }
    #illus_production_double > article:nth-of-type(2) {
        width: 25%;
    }
    #illus_production_double > article {
        width: 16%;
    }
    #illus_production_stockage{
        left:16%;
        bottom: -90px;
    }
    @keyframes moveHorizonStock {
        from {
            left: 16%;
            bottom: -90px;
        }
        to {
            left: 26%;
            bottom: -90px;
        }
    }
    @keyframes moveHorizonStockReturn {
        from {
            left: 26%;
            bottom: -90px;
        }
        to {
            left: 16%;
            bottom: -90px;
        }
    }

    #illus_production_compression{
        left:65%;
        bottom:60px;
    }

    @keyframes moveHorizonCompr {
        from {
            left: 65%;
            bottom: 60px;
        }
        to {
            left: 55%;
            bottom: 60px;
        }
    }
    @keyframes moveHorizonComprReturn {
        from {
            left: 55%;
            bottom: 60px;
        }
        to {
            left: 65%;
            bottom: 60px;
        }
    }

    #barr_eol_sol > article > img {
        height: 150px;
    }

    #illus_eolien{
        width:33% !important;
        left: 0;
        text-align:center;
    }
    #illus_solaire{
        width:34% !important;
        left:0;
        text-align:center;
    }
    #illus_barrage{
        width:33% !important;
        left:0;
        text-align:center;
    }

    #innovation_formation {
        flex-wrap:nowrap;
        gap: 0;
        height: 425px;
    }

    #titre_rd {
        width: 50%;
    }
    #illus_rd {
        width: 50%;
    }
    #illus_rd > article{
        width:200px;
        text-align:center;
        margin:auto;
    }
    #illus_rd > article > img {
        width: 100%;
    }


    #illus_rd1{
        left:10px;
        top:55px;
    }
    @keyframes moveVerRD1 {
        from {
            top: 55px;
        }
        to {
            top: 16px;
        }
    }
    @keyframes moveVerRD1Return {
        from {
            top: 16px;
        }
        to {
            top: 55px;
        }
    }
    #illus_rd2{
        left:17px;
        top:-8px;
    }
    @keyframes moveVerRD2 {
        from {
            top: -8px;
        }
        to {
            top: -47px;
        }
    }
    @keyframes moveVerRD2Return {
        from {
            top: -47px;
        }
        to {
            top: -8px;
        }
    }
    #illus_rd3{
        left:10px;
        top:-55px;
    }
    @keyframes moveVerRD3 {
        from {
            top: -55px;
        }
        to {
            top: -95px;
        }
    }
    @keyframes moveVerRD3Return {
        from {
            top: -95px;
        }
        to {
            top: -55px;
        }
    }
}

@media (max-width: 1040px) {
    #text_usage > p,
    #text_rd > p,
    #text_prod > p,
    #text_ressource > p {
        padding: 30px;
        color: white;
        font-weight: 700;
        line-height: 30px;
        font-size: 12px;
    }
    #text_usage > a,
    #text_rd > a,
    #text_prod > a,
    #text_ressource > a {
        font-size: 12px;
    }
}

@media (max-width: 485px) {
    #text_usage > p,
    #text_rd > p,
    #text_prod > p,
    #text_ressource > p {
        line-height: 18px;
        padding: 20px 10px;
        font-size:10px;
    }
}

@media (max-width: 520px) {
    #barr_eol_sol > article > img {
        height: 100px;
    }

    #illus_usages_nuage {
        left: 14%;
        bottom:295px
    }
    @keyframes moveHorizonNuage {
        from {
            left: 14%;
            bottom: 295px;
        }
        to {
            left: 14%;
            bottom: 350px;
        }
    }
    @keyframes moveHorizonNuageReturn {
        from {
            left: 14%;
            bottom: 350px;
        }
        to {
            left: 14%;
            bottom: 295px;
        }
    }
    #production{
        height:410px;
        padding-bottom:20px;
    }

    #illus_production_compression{
        left:65%;
        bottom:60px;
    }

    @keyframes moveHorizonCompr {
        from {
            left: 65%;
            bottom: 60px;
        }
        to {
            left: 55%;
            bottom: 60px;
        }
    }
    @keyframes moveHorizonComprReturn {
        from {
            left: 55%;
            bottom: 60px;
        }
        to {
            left: 65%;
            bottom: 60px;
        }
    }

    #illus_rd > article{
        width:160px;
        text-align:center;
        margin:auto;
    }

    #illus_rd1{
        left:10px;
        top:95px;
    }
    @keyframes moveVerRD1 {
        from {
            top: 95px;
        }
        to {
            top: 55px;
        }
    }
    @keyframes moveVerRD1Return {
        from {
            top: 55px;
        }
        to {
            top: 95px;
        }
    }
    #illus_rd2{
        left:17px;
        top:42px;
    }
    @keyframes moveVerRD2 {
        from {
            top: 42px;
        }
        to {
            top: 2px;
        }
    }
    @keyframes moveVerRD2Return {
        from {
            top: 2px;
        }
        to {
            top: 42px;
        }
    }
    #illus_rd3{
        left:10px;
        top:3px;
    }
    @keyframes moveVerRD3 {
        from {
            top: 3px;
        }
        to {
            top: -37px;
        }
    }
    @keyframes moveVerRD3Return {
        from {
            top: -37px;
        }
        to {
            top: 3px;
        }
    }
}

@media (max-width: 470px) {
    #usages {
        height: 325px;
    }
    #illus_usages_avion {
        width: 70px !important;
        bottom: 220px;
        left: 70%;
    }
    @keyframes moveDiagonal {
        from {
            left: 70%;
            bottom: 220px;
        }
        to {
            left: 80%;
            bottom: 240px;
        }
    }
    @keyframes moveDiagonalReturn {
        from {
            left: 80%;
            bottom: 240px;
        }
        to {
            left: 70%;
            bottom: 220px;
        }
    }
    #illus_usages_nuage {
        left: 4%;
        bottom:208px
    }
    @keyframes moveHorizonNuage {
        from {
            left: 4%;
            bottom: 208px;
        }
        to {
            left: 4%;
            bottom: 228px;
        }
    }
    @keyframes moveHorizonNuageReturn {
        from {
            left: 4%;
            bottom: 228px;
        }
        to {
            left: 4%;
            bottom: 208px;
        }
    }
}

@media (max-width: 400px) {
    #production{
        height:355px;
    }
    #illus_production_compression{
        left:65%;
        bottom:81px;
    }

    @keyframes moveHorizonCompr {
        from {
            left: 65%;
            bottom: 81px;
        }
        to {
            left: 55%;
            bottom: 81px;
        }
    }
    @keyframes moveHorizonComprReturn {
        from {
            left: 55%;
            bottom: 81px;
        }
        to {
            left: 65%;
            bottom: 81px;
        }
    }
    #ressources{
        height:250px;
    }
    #barr_eol_sol > article > img {
        height: 80px;
    }

    #illus_rd > article > img {
        width: 100%;
    }


    #innovation_formation{
        height:300px;
    }

    #illus_usages_avion {
        width: 50px !important;
        bottom: 185px;
        left: 70%;
    }
    @keyframes moveDiagonal {
        from {
            left: 70%;
            bottom: 185px;
        }
        to {
            left: 80%;
            bottom: 200px;
        }
    }
    @keyframes moveDiagonalReturn {
        from {
            left: 80%;
            bottom: 200px;
        }
        to {
            left: 70%;
            bottom: 185px;
        }
    }
    #illus_usages_nuage {
        width:7%;
        left: 0;
        bottom:208px
    }
    @keyframes moveHorizonNuage {
        from {
            left: 0;
            bottom: 208px;
        }
        to {
            left: 0;
            bottom: 228px;
        }
    }
    @keyframes moveHorizonNuageReturn {
        from {
            left: 0;
            bottom: 228px;
        }
        to {
            left: 0;
            bottom: 208px;
        }
    }
    #illus_production_double {
        height: 120px;
    }

    #illus_production_stockage{
        left:16%;
        bottom: -70px;
    }
    @keyframes moveHorizonStock {
        from {
            left: 16%;
            bottom: -70px;
        }
        to {
            left: 26%;
            bottom: -70px;
        }
    }
    @keyframes moveHorizonStockReturn {
        from {
            left: 26%;
            bottom: -70px;
        }
        to {
            left: 16%;
            bottom: -70px;
        }
    }

    #illus_production_compression{
        left:65%;
        bottom:80px;
    }

    @keyframes moveHorizonCompr {
        from {
            left: 65%;
            bottom: 80px;
        }
        to {
            left: 55%;
            bottom: 80px;
        }
    }
    @keyframes moveHorizonComprReturn {
        from {
            left: 55%;
            bottom: 80px;
        }
        to {
            left: 65%;
            bottom: 80px;
        }
    }

    #illus_rd > article{
        width:130px;
    }

    #illus_rd1{
        left:10px;
        top:55px;
    }
    @keyframes moveVerRD1 {
        from {
            top: 55px;
        }
        to {
            top: 15px;
        }
    }
    @keyframes moveVerRD1Return {
        from {
            top: 15px;
        }
        to {
            top: 55px;
        }
    }
    #illus_rd2{
        left:17px;
        top:18px;
    }
    @keyframes moveVerRD2 {
        from {
            top: 18px;
        }
        to {
            top: -28px;
        }
    }
    @keyframes moveVerRD2Return {
        from {
            top: -28px;
        }
        to {
            top: 18px;
        }
    }
    #illus_rd3{
        left:10px;
        top:-14px;
    }
    @keyframes moveVerRD3 {
        from {
            top: -14px;
        }
        to {
            top: -60px;
        }
    }
    @keyframes moveVerRD3Return {
        from {
            top: -60px;
        }
        to {
            top: -14px;
        }
    }
}