@font-face {        /*sert à importer la police d'écriture de Helvetica*/ 
    font-family: helveticafont;
    src: url("./font/helvetica.otf");
}

@font-face {        /*sert à importer la police d'écriture de Helvetica Bold*/ 
    font-family: helveticabold;
    src: url("./font/helveticabold.ttf");
}

@font-face {        /*sert à importer la police d'écriture de Neuton*/ 
    font-family: neuton;
    src: url("./font/neuton.ttf");
}

@font-face {        /*sert à importer la police d'écriture de Work Sans*/ 
    font-family: worksans;
    src: url("./font/worksans.otf");
}

@font-face {        /*sert à importer la police d'écriture de Work Sans*/ 
    font-family: worksansbold;
    src: url("./font/worksansbold.otf");
}

.centrer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2%;
}

#mapid {
    width: 600px;
    height: 500px;
}

.ecartement {
    padding-top: 1px;
}

.grid > div{
    text-align: center;
}

.grid > img {
    max-width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 10% 10% 40% 5% 5% 5% 5% 5% 5%;;
    align-items: center;
}

a{
    font-family: helvetica;
    text-decoration: none;
    color: black;
}

.barrecentrer {
    display: flex;
    text-align: center;
    justify-content: center;
}

header > div > img {
    max-width: 90%;
}

.divcentrer {
    display:flex;
    text-align: center;
    justify-content: center;
}

h1 {
    font-family: neuton;
}

.pageactuelle {
    text-decoration: underline orange; 
    text-decoration-thickness: 2px; 
    text-underline-offset: 4px; 
}
 
.pageactuelle > a {
    font-family: helveticafont;
    font-size: large;
}

.bouton > a {
    display: inline-block;
    position: relative;
    font-family: helveticafont;
    font-size: large;
}
  
.bouton > a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: orange;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out, text-decoration-thickness 0.25s ease-out; 
}
  
.bouton > a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.charts {
    max-width: 25%;
}

.graph {
    width: 500px;
    margin-left: 30%;
}
  
.flex{       /*flexbox avec une marge à 5% de chaque côté*/
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 5%;
    margin-left: 5%;
}

.flexespacement{     /*partie gauche de la flexbox appliquant une marge à gauche de 1.5%*/   
    padding:1%;
    font-size:0.825vw ;
    margin-left: 1.5%;
    align-items: center;
    text-align: center;
}

.flexespacementdroite{      /*partie droite de la flexbox appliquant une marge à droite de 1.5%*/  
    align-items: center;
    padding:1%;
    font-size:0.825vw ;
    margin-right: 1.5%;
    text-align: center;
}

/* Style de base pour les boutons */
button {
    font-family: helveticafont;
    padding: 10px 20px;
    border: none;
    background-color: orange;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 5px;
}

/* Style au survol des boutons */
button:hover {
    background-color: #ff9000;
}

/* Style pour les boutons "Tous" */
#btn-non-specifie,
#btn-tous-sexe,
#btn-tous-ans {
    background-color: black;
}

/* Style au survol des boutons "Tous" */
#btn-non-specifie:hover,
#btn-tous-sexe:hover,
#btn-tous-ans:hover {
    background-color: #3e3d3c;
}

h2 {
    font-family: worksans;
    text-align: center;
    font-size: large;
    margin-left: 20%;
    margin-right: 20%;
}
  
p {
    margin-left: 30%;
    font-family: worksansbold;
    font-size: small;
}

.gras {
    font-family: worksans;
}
  
h3 {
    text-align: center;
    font-style: italic;
} 

.ecartement1 {
    padding-top: 2%;
}

.flexgraph{       /*flexbox avec une marge à 5% de chaque côté*/
    display: flex;
    flex-direction:row ;
    justify-content: center;
    margin-right: 10%;
    margin-left: 10%;
}

.flexespacementgraph{     /*partie gauche de la flexbox appliquant une marge à gauche de 1.5%*/   
    padding:1%;
    align-items: center;
    text-align: center;
}

.flexespacementdroitegraph{      /*partie droite de la flexbox appliquant une marge à droite de 1.5%*/  
    margin-left: 7%;
    align-items: center;
    padding:1%;
    text-align: center;
}

.divimage {
    display:flex;
    text-align: center;
    justify-content: center;
}

.divimage > img {
    max-width: 25%;
}