/*@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab|Open+Sans+Condensed:wght@300&display=swap');*/

@viewport {
    width: device-width;
    zoom: 1;
}

body {
    overflow-x: hidden;
    font-size: 1rem;
}

ol, ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a, summary {
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

p, a, li, text, blockquote, td, th, select, option, text {
    font-family: 'Roboto', sans-serif;
    color: #555;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 1rem;
}

div, nav, main, article, aside, section {
    display: block;
    position: relative;
}

header {
    width: 100%;
}

header h1, header h2 {
    padding-left: .5rem;
}

header h1 {
    display: block;
    font-size: 200%;
    text-transform: uppercase;
}

header h2 {
    color: #666;
    font-size: 130%;
}

header span {
    display: inline-block;
    white-space: nowrap;
}

header span#mainKeyword {
    color: #eee;
    background-color: #333;
    border-radius: 4px;
    padding: .1rem .5rem;
    margin-right: .5rem;
    font-family: 'Roboto', sans-serif;
}

nav.carousel {
    width:100%;
    margin: 1rem 0;
    overflow:hidden;
    padding-bottom:1rem;
    height:7rem;
}

nav.carousel>ul:first-child {
    position: relative;
    text-transform: uppercase;
    text-align:center;
    font-weight: bolder;

}
nav.carousel li.group {
    padding:0.5rem 0;
    display:inline-block;
    margin:0;
    border: thin solid #ccc;
    background:#efefef;
    border-radius:5px;
}

nav.carousel li.group ul {
    width:100%;
    display:flex;
    justify-content:center;
}


nav.carousel li.group li {
    text-transform: none;
    background: #f5f5f5;
    border-color: #f0f0f0;
    display: inline-block;
    margin: 0.3rem;
    padding: 0.2rem .5rem;
    position: relative;
    align-items: stretch;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
    text-align: center;
    font-weight: bolder;
    border: thin solid #ddd;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.3s ease-out;
    background: #eee;
}

header nav li.group li:hover {
    background: #ddd;
    border-color: #bbb;
    color: #333;
}

header nav li.group li.selected {
    background: #fff;
    border-color: #bbb;
    color: #000;
}


#outerContainer {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#outerContainer section {
    width: 100%;
    border-top: thin solid #ccc;
}

svg {
    width: 100%;
    height: auto;
    position: relative;
}

svg g.labels text {
    font-family: 'Open Sans Condensed', sans-serif;
}

g#layer_regions path {
    fill: none;
    stroke-width: 2px;
    pointer-events: none;
}

/*Neutralise le calque régions*/

#tooltip {
    position: absolute;
    top: -2000px;
    left: -2000px;
    width: 80%;
    border: thin solid #ccc;
    border-radius: 6px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 100;
    background-color: white;
    padding: 0;
}
#tooltip section {
    border:none;
    padding:0.2rem 0;
    width:96%;
    margin-left:2%;

}
#dragbar {
    position: absolute;
    background-color:#eee;
    border-bottom: 1px solid #ccc;
    z-index:90;
    width: 100%;
    margin-right:30px;
    height: 2.2rem;
    opacity: 0.5;
    cursor: move;
    min-height: 28px
}

#tooltip h3 {
    font-size: 120%;
    width: 90%;
    color: #333;
    padding: 0.5rem 0 1rem 0.5rem;
    text-transform: uppercase;
}

#tooltip p {
    font-size: 100%;
    margin:0.3rem 0;
}

#tooltip th, #tooltip h6 {
    text-align: left;
    font-size: 120%;
    margin-top: 20px;
    color: #444;
}

#tooltip p.categorie {
    font-weight: bold;
    color: #444;
    margin-bottom: 0.1rem;
}

#tooltip p.chiffres {
    padding-left: 1rem;
    color: #444;
    margin-top: 0.1rem;
}

#tooltip th {
    padding-bottom: 0.7rem;
}

#tooltip td + td {
    text-align: right;
}

#tooltip td + td + td {
    text-align: left;
}

#tooltip a.close {
    position: absolute;
    display: block;
    z-index:200;
    top: -5px;
    right: -5px;
    padding: 10px;
    transition: all 0.5s ease-in-out;
}

#tooltip a.close img {
    transition: all 0.5s ease-in-out;
    opacity: 0.6;
}

#tooltip a.close:hover img {
    opacity: 1;
}


ul.flexButtons {
    justify-content: flex-start!important;
}
ul.flexButtons li {
    margin:2px!important;
}

ul.flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

ul.flex li {
    position:relative;
    display: inline-block;
    margin: 0.3rem;
    padding: 0 1rem 0.5rem;
    flex-grow: 0;
    flex-shrink: 1;
    text-align: center;
    border:thin solid #eee;
    border-radius:2px;
}

ul.flex span.block {
    display: inline-block;
    position:relative;
    top:0.3rem;
    width: 2rem;
    height: 0.9rem;
    border-radius: 2px;
    margin-right: 0.3rem;
    opacity: 1 !important;
}
ul.flex span.text {
    position:relative;
    top:0.2rem;
}

ul.flex a.close {
    position: absolute;
    padding:0!important;
    top:-2px!important;
    right:1px!important;
}
g.regions path {
    stroke: #fff;
    stroke-width: .5;
    cursor: pointer;
    shape-rendering: optimizeSpeed;
    fill: #ccc;
}

g.regions path {
    opacity: 0.9;
    transition: all 0.3s ease-out;
}

g.labels text {
    font-size: 20px;
    text-shadow: 1px 1px 2px black;
    pointer-events: none;
}

img.zoomlogo {
    width: 10%;
    max-width: 50px;
    position: absolute;
    top: 6rem;
    right: 10px;
    opacity: 0;
    transition: all 0.5s ease-out;
    cursor: pointer;
}

img.zoomlogo.active {
    opacity: 1;
    cursor: pointer;
}

g.legend text {
    dominant-baseline: middle;
}

g.svgSlider text {
    font-size: 20px;
    fill: #666;
}

g.svgSlider g.parameter-value text {
    fill: #aaa;
}

g.svgSlider path.handle {
    fill: #eee;
    stroke: #444;
    stroke-width: 1px;
    outline: none !important;
}

g.svgSlider line.track-overlay {
    stroke-width: 1px;
    stroke: #888;
}

image.playpause {
    cursor: pointer;
    transition: all 0.3s ease-out;
    opacity: 0.3;
}

image.playpause:hover {
    opacity: 0.5 !important;
}

svg.Figure {
    width: 20%;
    height: 40%;
}

g.xAxis path, g.yAxis path {
    stroke: #000;
}

footer {
    display: block;
    position: relative;
    margin-top: 5%;
    width: 100%;
    height: 4rem;
    padding-top: 6px;
    border-top: thin solid #ccc;
}

footer p {
    position: relative;
    font-family: 'Fredoka One', sans-serif;
    text-align: right;
    margin: 0.2rem 70px 0 0;
}

footer p span {
    font-weight: bold;
}

footer img {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}

footer a {
    text-decoration: underline gray;
    color: #888 !important;
}


@media (min-width: 655px) and (max-width: 850px) {
    body {
        font-size: 0.9rem;
    }

    header h1 {
        font-size: 170%;
    }

    header h2 {
        font-size: 110%;
    }

}

@media (min-width: 531px) and (max-width: 654px) {
    body {
        font-size: 0.8rem;
    }

    header h1 {
        font-size: 150%;
    }

    header h2 {
        font-size: 100%;
    }

    nav.carousel li.group li {
        font-size:0.7rem;
    }
}

@media (max-width: 530px) {
    body {
        font-size: 0.7rem;
    }

    header h1 {
        font-size: 140%;
    }

    header h2 {
        font-size: 100%;
    }

    hgroup.titles, header {
        padding-left: 0.5rem;
    }

    nav.carousel li.group li {
        font-size:0.6rem;
    }

    img.zoomlogo {
        width: 8%;
        max-width: 35px;
        top: 4rem;
    }

    footer img {
        width: 40px;
    }

    footer p {
        margin-right: 45px;
    }
}
