:root {
  --chemin_logo : ;
  --chemin_logo_carte: ;
  --couleur_graphe_1: blue;
  --couleur_graphe_2: red;
  --couleur_graphe_3:green;
}

#mapid { height: 95%; }
@media all and (min-width: 960px) {
  #mapid { height: 90%; }
}

#mapidfull { height: 100%; 
  border : 5 px; }

.soustitrecarte{
  text-align: center;
}

.main-nav-div{
  grid-area: main-nav-div;
}
.menu-aside{
  grid-area: menu-aside;
}

.menulatcarte{
  grid-area: menulatcarte;
}

.tablerapport{
  grid-area:tablerapport;
  overflow-y: auto;
}


.footer{
  grid-area: footer;
}

.zonetexte{
  grid-area: zonetexte;
  padding : 10px;
}

.carte{
  grid-area: carte;
  overflow-y: auto;
}

.info-aside-urba{
  overflow-x: hidden;
  overflow-y: auto;
  grid-area: info-aside-urba;
}

#mapid{
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right:15px;
}

.infocarte{
margin:5px;
display:none;
} 
@media all and (min-width: 960px) {
  .infocarte{
    display:block;
  }
}

.titrecarte{
  font-size: 14px;
  color:black;
  margin:10px;
  text-align: center;
  position: relative;
  top: 50%;
}

.informationscarte{
  font-size: 12px;
  color:black;
  font-weight: normal;
}

.adressecarte{
  grid-area: adressecarte;
}
.infocarte{
  grid-area: infocarte;
}


.info-aside{
  grid-area: info-aside;
}
.info-aside-select{
  grid-area: info-aside-select;
}
.info-aside-chart{
  grid-area: info-aside-chart;
}

.reclame{
grid-area: reclame;
}


.info-aside{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 7fr;
  column-gap: 10 ptx;
  grid-template-areas:
  "info-aside-select"
  "info-aside-chart"
  ;
}




.containertext{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: 2fr 20fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div"
  "zonetexte"
  "footer";
}

@media all and (min-width: 960px) {
.containertext{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: 2fr 16fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div"
  "zonetexte"
  "footer";
}

}

.textaccueildetails {
  font-size: 14px;
}

.containeraccueil {
  display: grid;
  align-items: center; 
  grid-template-columns: 1fr ;
  column-gap: 5px;
 }

.textaccueil {
  font-size: 16px;
  padding: 10px;
}

.imageaccueil {
  max-width: 100%;
  max-height:100%;
  display: none;
}

@media all and (min-width: 960px) {
.containeraccueil {
  display: grid;
  align-items: center; 
  grid-template-columns: 1fr 1fr ;
  column-gap: 5px;
 }
 
 .imageaccueil {
   max-width: 100%;
   max-height:100%;
   display :block;
 }
 
 
}

.containerpop{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; 
  grid-template-rows: 1fr 2fr 10fr 6fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  " main-nav-div "
  " menu-aside "
  " carte"
  " info-aside"
  " footer"
  ;
}

@media all and (min-width: 960px) {
.containerpop{
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; 
  grid-template-rows: 1fr 2fr 6fr 8fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "menu-aside menu-aside"
  "carte reclame"
  "carte info-aside"
  "footer footer";
} 

}

.containerequipement,.containerplu_sup, .containergeorisque, .containerhlm,.containeremployeurs,
 .containerprixtransaction, .containerzonageadmin, .loyers, .containercopro, .containermultithemes  {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; /* repeat(2,fr)*/
  grid-template-rows: 1fr 18fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div"
  "carte"
  "footer"
  ;
}

@media all and (min-width: 960px) {
.containerequipement,.containerplu_sup, .containergeorisque, .containerhlm,.containeremployeurs,
 .containerprixtransaction, .containerzonageadmin, .loyers, .containercopro , .containermultithemes {
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; /* repeat(2,fr)*/
  grid-template-rows: 1fr 16fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "carte carte"
  "footer footer";
}
}


.containerplu_sup {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; /* repeat(2,fr)*/
  grid-template-rows: 1fr 12fr 6fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div"
  "carte"
  "info-aside-urba"
  "footer"
  ;
}

@media all and (min-width: 960px) {
.containerplu_sup {
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; /* repeat(2,fr)*/
  grid-template-rows: 1fr 12fr 4fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "carte info-aside-urba"
  "carte info-aside-urba"
  "footer footer";
}
}

.containereducation,.containercrimesdelits,.containersante {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; /* repeat(2,fr)*/
  grid-template-rows: 1fr  12fr 6fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div "
  "carte"
  "info-aside"
  "footer"
  ;
}

@media all and (min-width: 960px) {
.containereducation,.containercrimesdelits,.containersante{
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; /* repeat(2,fr)*/
  grid-template-rows: 1fr  8fr 8fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "carte reclame"
  "carte info-aside"
  "footer footer";
}
}


.containerprix, .containerpc {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; 
  grid-template-rows: 1fr 3fr 11fr 5fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  " main-nav-div "
  " menu-aside "
  " carte"
  " info-aside"
  " footer"
  ;
}

@media all and (min-width: 960px) {
.containerprix, .containerpc {
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; 
  grid-template-rows: 1fr  2fr 6fr 8fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "menu-aside menu-aside"
  "carte reclame"
  "carte info-aside"
  "footer footer";
} 

} 



.containerrapport{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: 2fr 20fr 0fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div"
  "zonetexte"
  "tablerapport"
  "footer";
}

@media all and (min-width: 960px) {
.containerrapport{
  height: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 2fr 8fr  8fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "zonetexte tablerapport"
  "zonetexte reclame"
  "footer footer";
}

}





.zonecartegrapheinfo {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr ; 
  grid-template-rows: 1fr 3fr 11fr 5fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  " main-nav-div "
  " menu-aside "
  " carte"
  " info-aside"
  " footer"
  ;
}

@media all and (min-width: 960px) {
.zonecartegrapheinfo {
  height: 100%;
  display: grid;
  grid-template-columns: 6fr 3fr; 
  grid-template-rows: 1fr  2fr 6fr 8fr 1fr;
  column-gap: 10 ptx;
  grid-template-areas: 
  "main-nav-div main-nav-div"
  "menu-aside menu-aside"
  "carte carte"
  "carte info-aside"
  "footer footer";
} 

}