.container12.flex {
  display: flex;
  flex-wrap: wrap;
}

/* ---------- */
/* PGIR */
/* ---------- */
:root{
    --pgirA : #83d1da;
    --pgirB : #29707d;
    --pgirC : #588640; 
    --pgirD : #b2d343; 

    --accent-color:red;
}

.BlocSousPage.pgir::after {
    content: "";
    position: absolute;
    width: 4em;
    height: 4em;
    right: 0.5em;
    top:0.5em;

    background-size: contain;
}

.bloc_axe h2::after,
.section::after {
    content: "";
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    top:0%;
    left:35%;
    margin-top: -15%;
    background-size: contain;
}
.bloc_axe h2 {
  position: relative;
}
.bloc_axe h2::after{

    width: 120px;

  left:calc(50% - 30px);
    /* margin-top: 0px; */

}

.section {
  position: relative;
  padding: 2em 1em 2em 1em;
  text-align: center;
  --text-color:white;
  color: var(--text-color);
}
.bouton {
  padding: 0.25em 1em;
  border-radius: 50px;
  border: 1px solid var(--text-color);
}
.section.axeA { background-color: var(--pgirA);}
.section.axeB { background-color: var(--pgirB);}
.section.axeC { background-color: var(--pgirC);}
.section.axeD { background-color: var(--pgirD);}

.axeA {
  --accent-color : var(--pgirA);
}
.axeB {
  --accent-color : var(--pgirB);
}
.axeC {
  --accent-color : var(--pgirC);
}
.axeD {
  --accent-color : var(--pgirD);
}
.section p {
  margin-bottom: 0.75em;
}


.axeA::after {
    background-image: url('/images/pgir_picto-01.png');
}
.axeB::after {
    background-image: url('/images/pgir_picto-02.png');
}
.axeC::after {
    background-image: url('/images/pgir_picto-03.png');
}
.axeD::after {
    background-image: url('/images/pgir_picto-04.png');
}

/* stats */

.pgir_stat .ctx_back_deep {
  background-color: #1a2442;
  color: white;
  --text-color:white;
  --accent-color:rgb(188, 238, 255);
  /* padding: 1em; */
  background-image: url('/css/images/tcref-footer-001.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 1em;;
  margin-bottom: 2em;
  overflow: hidden;
}

.pgir_stat h2, 
.pgir_stat h3{
  color: var(--accent-color);
}
/* SECTION DOUGHTNUT charts*/
:root{
  --donut-size : 150px;
  --doughtnut-color : #FFF
}



.doughtnut_chart {
  position: relative;
  width: var(--donut-size);
  aspect-ratio: 1;

}
.doughtnut_chart.mod_aqua {
  --doughtnut-color : var(  --accent-color); 
}
.doughtnut_chart.small {
  --donut-size : 100px;

}
.doughtnut_chart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  margin: 0px;
  border: calc(var(--donut-size) / 10) solid  var(--doughtnut-color);
  opacity: 0.5;
  box-sizing: border-box;

}

.doughtnut_chart canvas {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.doughtnut_chart .center-text {
  position: absolute;
  inset: 0;
  display: flex;
  font-weight: 100;
  align-items: center;
  justify-content: center;
  /* font-size: 2cqw;  */
  font-size: calc(var(--donut-size) / 4);
  color:var(--doughtnut-color);
  font-weight: bold;
  pointer-events: none;
}


/* SECTION MAP */

.map_pgir {
  background-image: url('/images/tcref_map_local3.png');
  aspect-ratio: 1600/1090;
background-size: clamp(1723px, 143vw, 2300px);
  background-repeat: no-repeat;
  background-position: center top;
  min-width: 960px;
  max-height: 1090px;
  min-height: 818px;
  width: 100%;
  margin-left:auto; margin-right:auto; 
  overflow: hidden;
}


.map_pgir .lst_action { display: none ;}
.map_pgir .pastille {
  width: 1em;
  padding: 0.25em;
  aspect-ratio: 1;
  border-radius: 1em;
  background-color: rgb(20, 206, 203);
  color: white;
  display: block;
  text-align: center;
  line-height: 1em;
  cursor: pointer;
}
.map_pgir .pastille[data-count="0"] {
  display: none;
}

.map_pgir .bloc {
  position: absolute;
  top:0px;
  left: 0px;
  height: 4em;
}

.bloc_marqeur {
font-size: 16px;
/* Souhaite avoir le même comportement que container12*/
min-width:960px; 
width:80%; margin-left:auto; margin-right:auto;  position:relative; 
max-width: 1280px;

    height: 100%;
    position: relative;


}
.map_pgir.inside {
   margin-top:-5em;
   background-size: clamp(1770px, 143vw, 2300px);
   aspect-ratio: 1600/1137;
   min-height: unset;
  /* background-color: red; */
  /* margin:-5em -1em -1em -1em; */
  /* width: calc(100% + 2em); */
}

.map_pgir.inside .bloc_marqeur {
height: 122%;
width: 100%;
min-width: 100%;
color: #000;
 
}

.map_pgir .bloc.id1 {  left:18%;   top:53%; }
.map_pgir .bloc.id2 {  left:18%;   top:43%; }
.map_pgir .bloc.id3 {  left:39%;   top:52%; }
.map_pgir .bloc.id4 {  left:50%;   top:50%; }
.map_pgir .bloc.id5 {  left:58%;   top:63%; }
.map_pgir .bloc.id6 {  left:64%;   top:50%; }
.map_pgir .bloc.id7 {  left:75%;   top:61%; }
.map_pgir .bloc.id8 {  left:84%;   top:66%; }
.map_pgir .bloc.id9 {  left:13%;   top:39%; }
.map_pgir .bloc.id10 {  left:28%;   top:42%; }
.map_pgir .bloc.id11 {  left:37%;   top:44%; }
.map_pgir .bloc.id12 {  left:47%;   top:41%; }
.map_pgir .bloc.id13 {  left:62%;   top:47%; }
.map_pgir .bloc.id14 {  left:72%;   top:47%; }
.map_pgir .bloc.id15 {  left:76%;   top:53.5%; }
.map_pgir .bloc.id16 {  left:80%;   top:59%; }
.map_pgir .bloc.id17 {  left:86%;   top:62%; }


.map_pgir .bloc:hover .lst_action {
    display: block;
    position: absolute;
    top: 2.5em;
    left: 1em;
    background-color: #ffffff;
    padding: 10px;
    min-width: 150px;
    max-width: 300px;
    font-size: 0.9em;
    line-height: 1em;
    transform: translateX(-50%);
  z-index: 100;
  border-radius: 0.4em;


}
.map_pgir .bloc:hover .lst_action a {
  display: block;
}

.map_pgir .bloc:hover .lst_action a + a {
  margin-top: 0.8em;
}


.extra_info {
  max-height: 0;
  overflow: hidden;
  padding-top:1em;
  transition: max-height 0.3s ease;
  text-wrap: balance;
}
.extra_info.open {
  max-height: 2000px;
}

.extra_info .resume_objectif {
  padding:1em;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:1em;
  align-items: center;
  z-index: 33333;
  position: relative;
}

.bloc_axe {
--accent-color : #2f9db1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
    flex-wrap: wrap;
    text-transform: uppercase;
    color: var(--accent-color);

    font-size: 1.5em;
    line-height: 1.5em;

}
.bloc_axe h2 { width: 100%;
text-align: center;

}

.mod_encadre {
  display: flex;
  gap:2em;
  align-items: center;
}

.mod_encadre .el_rule { 
  flex: 1;
  height: 3px;
  background-color: #216d7d;
}

/* INFOBOX : Zone qui donne le détail d'une action (Axe, orientation etc) */

.pgir_info_box {
 --text-color:white;
  color:var(--text-color);
  margin: 1em 0px;
  padding: 1em;
  background-color: #216d7d;
  background-image: url("/images/tcref_motif.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 1em;
  text-transform: uppercase;
  text-wrap: balance;
  position: relative;
}
.pgir_info_box p{
  margin-top: 1em;
}
.pgir_info_box p:before {
  content:"-";
  font-size: 0.7em;
  display: block;
}
.pgir_info_box p.axe:before { content : "AXE"; }
.pgir_info_box p.orientation:before { content : "ORIENTATION"; }
.pgir_info_box p.objectif:before { content : "OBJECTIF"; }
.pgir_info_box p.obj_valeur:before { content : "RÉSULTAT"; }
.pgir_info_box p.municipalite:before { content : "MUNICIPALITÉ"; }
.pgir_info_box p.porteur:before { content : "ORGRANISME PORTEUR"; }
			
.pgir_info_box::after {
    content: "";
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    top:1em;
    right:1em;
    background-size: contain;
}

.bouton {
  margin-top: 0.7em;
  display: inline-block;
}