/* @import '../../node_modules/vue-plyr/dist/vue-plyr.css'; */

#catalogue .conteneurFond {
    max-width:1160px;
}
svg text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#svgDessin {
    max-width: 100%;
    height: auto;
}
.liste {
    /*padding-left: 2em;*/
    margin-top: 1em;
}
.liste.infosKatia  {
    font-size:1.4em;
    max-width: 460px;
}
.clear {
    clear:both;
    }

.liste.infosKatia > div.sous-liste {
    padding-left:30px;
}
.sous-liste {
    margin-top: 1em;
    font-size:80%;
    }

.sous-sous-liste {
    margin-top: 0.4em;
    margin-left: 2em;
    }
#legende {
    text-align: left;
    padding : 0 2em;
}
#legende p {
    margin : 0 ;
    font-size: 0.9em;
}
#legende span {
    padding-left: 0.6em;
    display: inline-block;
}
#legende span::before {
    content: "";
    width:1em;
    height:1em;
    border-radius:1em;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 0.2em;
    margin-bottom: 0.2em;
}

#legende span.LPT {
    color : #604a7b;
}
#legende span.LPT::before {
    background-color : #604a7b;
}
#legende span.ETR {
    color : #953735;
}
#legende span.ETR::before {
    background-color : #953735;
}
#legende span.LFP {
    color : #3a5f8b;
}
#legende span.LFP::before {
    background-color : #3a5f8b;
}
#legende span.PEE {
    color : #77933c;
}
#legende span.PEE::before {
    background-color : #77933c;
}
#legende span.MEN {
    color : #ff9c00;
}
#legende span.MEN::before {
    background-color : #ff9c00;
}
#infosListe {
    max-width: 460px;
    padding-bottom: 0.6em;
}
#infosListe .guidu {
}
#infosListe p {
    margin-top: 0;
    text-align: justify;
}
#solutionsListe {
    margin-top: 4%;
}
#solutionsListe img.fermeture {
    position: absolute;
    right: -15px;
    top: -22px;
    cursor:pointer;
}
.infosKatia {
    float:left;
    margin:2%;
    max-width: 640px;
    text-align: left;
}
.liste.infosKatia {
    border-left: 2px solid #777;
    border-top: 2px solid #777;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 2em;
}

.infosKatia .fuite, .infosKatia .solution {
    display: inline-block;
    padding-left:20px;
    max-width: 480px;
    max-width: 440px;
}

.infosKatia .solution {
    margin-bottom: 0;
    width:100%;
    max-width: 420px;
}
.infosKatia .solution.description {
    padding-left:20px;
    font-size: 0.7em;
    margin-bottom: 0.4em;
}
.liste.infosKatia > span.rond {
    border-radius:50%;
    width:0;
    height:0;
    border:12px solid #fff;
    display: inline-block;
    vertical-align: top;
    margin-left: -13px;
    margin-top: 3px;
}

.liste.infosKatia .sous-liste span.rond {
    border-radius:50%;
    width:0;
    height:0;
    border:9px solid #fff;
    display: inline-block;
    vertical-align: top;
    margin-left: -40px;
    border-color:#334569;
    margin-top: 3px;
}

.infosKatia span.LFP.rond {
    border-color:#3a5f8b;
}
.infosKatia span.LPT.rond {
    border-color:#604a7b;
}
.infosKatia span.ETR.rond {
    border-color:#953735;
}
.infosKatia span.PEE.rond {
    border-color:#77933c;
}
.infosKatia span.MEN.rond {
    border-color:#ff9c00;
}
.infosKatia .LFP.fuite {
    color:#3a5f8b;
}
.infosKatia .LPT.fuite {
    color:#604a7b;
}
.infosKatia .ETR.fuite {
    color:#953735;
}
.infosKatia .PEE.fuite {
    color:#77933c;
}
.infosKatia .MEN.fuite {
    color:#ff9c00;
}


      .cls-1 {
        fill: #878384;
      }

      .cls-1, .cls-10, .cls-11, .cls-12, .cls-2, .cls-29, .cls-4 {
        stroke: #3a3a3a;
      }

      .cls-1, .cls-10, .cls-11, .cls-12, .cls-14, .cls-15, .cls-16, .cls-2, .cls-20, .cls-22, .cls-24, .cls-26, .cls-28, .cls-29, .cls-4 {
        stroke-miterlimit: 10;
      }

      .cls-2 {
        fill: #e0dedf;
      }

      .cls-11, .cls-3 {
        fill: #cccacb;
      }

      .cls-4 {
        fill: #e2e2e2;
      }

      .cls-5 {
        fill: #bfbdbe;
      }

      .cls-6 {
        fill: #585354;
      }

      .cls-7 {
        fill: #b8b6b7;
      }

      .cls-8 {
        fill: url(#Dégradé_sans_nom_3);
      }

      .cls-9 {
        fill: url(#Dégradé_sans_nom_3-2);
      }

      .cls-10 {
        fill: #5a5657;
      }

      .cls-12 {
        fill: #a5a4a4;
      }

      .cls-13 {
        fill: #1c1c1a;
      }

      .cls-14 {
        fill: #221e1d;
      }

      .cls-14, .cls-15, .cls-16 {
        stroke: #221e1d;
      }

      .cls-15 {
        fill: url(#Dégradé_sans_nom);
      }

      .cls-16 {
        fill: url(#Dégradé_sans_nom-2);
      }

      .cls-17 {
        fill: #3a3a3a;
      }

      .cls-18 {
        fill: #fff;
      }

      .cls-18, .cls-19, .cls-21, .cls-23, .cls-25, .cls-27 {
        opacity: 0.25;
      }

      .cls-19 {
        fill: #953735;
      }

      .cls-20, .cls-22, .cls-24, .cls-26, .cls-28 {
        fill: none;
        stroke-width: 2px;
      }

      .cls-20 {
        stroke: #8d3a38;
      }

      .cls-21 {
        fill: #604a7b;
      }

      .cls-22 {
        stroke: #604a7b;
      }

      .cls-23 {
        fill: #3a5f8b;
      }

      .cls-24 {
        stroke: #3a5f8b;
      }

      .cls-25 {
        fill: #ff9c00;
      }

      .cls-26 {
        stroke: #b66e33;
      }

      .cls-27 {
        fill: #77933c;
      }

      .cls-28 {
        stroke: #77933c;
      }

      .cls-29 {
        fill: #f2f0f1;
      }

      .cls-30 {
        font-size: 12px;
        fill: #252525;
        font-family: Roboto-Regular, Roboto;
      }

    .cls-18:hover, .cls-19:hover, .cls-21:hover, .cls-23:hover, .cls-25:hover, .cls-27:hover {
        opacity: 0.75;
        cursor:pointer;
      }

/************************ RESPONSIF ********************************/
.mobile .infosKatia .fuite, .mobile .infosKatia .solution {
    max-width: 80%;
}


@media (max-width: 1164px) {
    .conteneurFond {
        text-align: center;
        max-width:700px;
    }
    .infosKatia {
        float:none;
        margin : 2em auto;
        text-align: center;
    }
    .liste.infosKatia {
        text-align: left;
        margin: 1em auto;
        width:94%;
    }
    .infosKatia .fuite, .infosKatia .solution {
        max-width: 94%;
    }
    .infosKatia .fuite {
        padding-left: 4px;
    }
    .infosKatia .solution {
        padding-left: 10px;
    }
}