html, body, #conteneur {
	margin: 0;
	padding: 0;
    width: 100%;
	font-family: 'Oxygen', sans-serif;
}

.background {
  fill: none;
  pointer-events: all;
}

h2 {
    border-right: 0;
    border-left: 0;
    border-bottom: 4.5px;
    border-top: 0;
    border-style: solid;
    width: 49%
    text-align:center;
}


#cartouche { 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25%;
    height: 100%; 
} 

#histo_ins {
    position: absolute;
    top: 0;
    width: 100%;
    height: 33%;
    overflow: hidden; 
} 

#histo_exp {
    position: absolute;
    top: 33%;
    width: 100%;
    height: 33%;
    overflow: hidden;
} 

#carte {
    position: absolute;
    top: 0;
    left: 25%;
    bottom: 0;
    width: 75%;
    overflow: hidden; 
}

.riviere {
    fill:none;
    stroke: #25a0c6;
    stroke-linejoin: round;
    stroke-width:1.7px;
    stroke-opacity:0.8;
    pointer-events:none;
}

.contours_stras {
    fill-opacity:0;
    fill:none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-dasharray: 1,4;
    stroke-width:.14%;
    stroke-opacity:0.9;
}


.t_carte {
     font-weight: bold;
	  float:left;
	  font-family:Arial;
	  font-size:1.3em;
	  position: relative;
}

.t_bureau {
     font-weight: italic;
      float:left;
      font-family:Arial;
      font-size:1em;
      position: relative;
}


.label-reperes {
    background: none repeat scroll 0 0 white;
    fill: #494949;
    fill-opacity: 1;
    text-anchor: middle;
    font-weight: bold;
    letter-spacing: 0em;
    text-anchor: middle;
    text-shadow: -1px 0 #f3f3f3, 0 1px #f3f3f3, 1px 0 #f3f3f3, 0 -1px #f3f3f3;
    pointer-events:none;
}

.text {
    text-anchor: left;
    text-align: left;
}

.resultat {
    font-weight: bold;
}

.barres {
    font-weight: italic;
}

@media screen and (min-width: 1000px) {

	.t_carte, .label-villes {
       	font-size: 1.2em;
     }

    .t_legende, .label-reperes {
        font-size: 0.9em;
        }

    .t_circo {
        font-size: 0.8em;
    }

    .text, .d3-tip {
        font-size: 1em;
    }
    .ttext, .resultat {
        font-size: 0.9em;
    }

}

@media screen and (min-width: 700px) and (max-width: 999px) {
    .t_carte, .label-villes {
        font-size: 0.6em;
     }

    .t_legende, .label-reperes {
        font-size: 0.7em;
        }

    .t_circo {
        font-size: 0.7em;
    }

    .text, .t_bureau, .d3-tip {
        font-size: 0.6em;
    }

    .ttext, .resultat, .barres  {
        font-size: 0.7em;
    }

}

@media screen and (min-width: 500px) and (max-width: 699px) {
	.t_carte, .label-villes {
       	font-size: 0.5em;
     }

    .t_legende, .label-reperes {
        font-size: 0.8em;
        }

    .t_circo {
        font-size: 0.7em;
    }

    .text, .t_bureau, .d3-tip {
        font-size: 0.5em;
    }

    .ttext, .resultat, .barres  {
        font-size: 0.5em;
    }

}

@media screen and (min-width: 400px) and (max-width: 499px) {
	.t_carte, .label-villes {
       	font-size: 0.8em;
     }

    .t_legende, .label-reperes {
        font-size: 0.6em;
        }

    .t_circo {
        font-size: 0.5em;
    }

    .text, .t_bureau, .d3-tip {
        font-size: 0.4em;
    }

    .ttext, .resultat, .barres  {
        font-size: 0.5em;
    }

}

@media screen and (min-width: 400px) and (max-width: 499px) {
	.t_carte, .label-villes {
       	font-size: 0.6em;
     }

    .t_legende, .label-reperes {
        font-size: 0.5em;
        }

    .t_circo {
        font-size: 0.4em;
    }

    .text, .t_bureau, .d3-tip {
        font-size: 0.3em;
    }

    .ttext, .resultat, .barres  {
        font-size: 0.4em;
    }

}

@media screen and (max-width: 399px) {
	.t_carte, .label-villes {
       	font-size: 0.5em;
     }

    .t_legende {
        font-size: 0.4em;
        }

    .t_circo {
        font-size: 0.3em;
    }

    .text, .t_bureau, .d3-tip {
        font-size: 0.2em;
    }

    .ttext, .resultat, .barres  {
        font-size: 0.3em;
    }

}

.circoleg {
    stroke: #ffffff;
    opacity: 1;
    stroke-linejoin: round;
    stroke-width:.15%;
    stroke-opacity:.8;
    }
        
 .circoleg:hover {
    opacity: 0.3;
    cursor: pointer
}

 .circoleg.active {
    visibility: hidden;
}

.circoleg.grey {
    fill:#c0c0c0;
    }

.circocom {
    stroke: #ffffff;
    stroke-linejoin: round;
    stroke-width:.12%;
    stroke-opacity:.6;
    }
        
 .circocom:hover {
    fill:#8F2D56;
    cursor: pointer
}

 .circocom.active {
    fill:#8F2D56;
}



.d3-tip {
    max-width: 100%;
    margin: 15;
    padding: 5px;
    border-radius: 4px;
    background: rgba(125, 125, 125, 0.9);
    color: white;
    line-height: 1.2;
    font-weight: normal;
    font-family: Arial;
    margin-top: -5%;
    pointer-events:none;
}