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

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

    --pgirA-complement : #269aac;
    --pgirB-complement : #29707d;
    --pgirC-complement : #588640; 
    --pgirD-complement : #98be1c;

    --pgirA-dark : hsl(186, 54%, 58%);
    --pgirB-dark : hsl(189, 51%, 23%);
    --pgirC-dark : hsl(99, 35%, 29%); 
    --pgirD-dark : hsl(74, 74%, 33%);    

    --accent-color:red;
}

.BlocSousPage.pgir::after {
    content: "";
    position: absolute;
    width: 14%;
    margin-top: 2%;
    margin-right: 2%;
    aspect-ratio: 1;
    right: 0px;
    top:0px;
    background-repeat: no-repeat;
    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% - 60px);
    /* margin-top: 0px; */

}

.section {
  position: relative;
  padding: 3em 1em 2em 1em;
  text-align: center;
  --text_color:white;
  color: var(--text_color);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}

.section h3 {
  font-weight: 800;
}
.section p:not(.mini_bilan) {
  flex: 1;
}

.bouton {
  padding: 0.25em 1em;
  border-radius: 50px;
  border: 1px solid var(--text_color);
}
.bouton:hover {
  text-decoration: none;
  outline:  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);
  --accent-color2 : var(--pgirA-complement);
  --dark_color : var(--pgirA-dark);
}
.axeB {
  --accent-color : var(--pgirA);
    --accent-color2 : var(--pgirB-complement);
    --dark_color : var(--pgirB-dark);
}
.axeC {
  --accent-color : var(--pgirD);
   --accent-color2 : var(--pgirC-complement); 
   --dark_color : var(--pgirC-dark);
}
.axeD {
  --accent-color : var(--pgirD);
  --accent-color2 : var(--pgirD-complement); 
  --dark_color : var(--pgirD-dark);
}
.section p {
  margin-bottom: 0.75em;
  margin-top: 0px;
}


.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 : 180px;
  --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 : 130px;

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

}

.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;
      position: relative;
}


.map_pgir .lst_action { 
  display: none ;
  --text_color: gray;
}
.map_pgir .pastille {
  width: 1em;
  padding: 0.5em;
  font-size: 0.9em;
  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;
}


.mod_extra_info {
      font-size: 1.42em;
    line-height: 1.3em;
        /* --color_secondary: #00b0cf; */
    /* --text_color: var(--color_secondary); */
    /* --componement_color: var(--color_secondary); */
    /* --color_secondary: #25b98d; */
}
.widget.middle {
  align-items: center;
}
.ctx_back-couleur {
  background-color: var(--pgirB);
  --text-color:white;
    --text_color:white;
  --componement_color:var(--pgirA);
}
.ctx_back-couleur h6 {
  color: var(--componement_color);
  --text_color:var(--componement_color);
  padding-top: 1.5em;
}

.mod_2col {
    column-count: 2;
    column-gap: var(--gap);
}
.mod_2col h1, 
.mod_2col h2, 
.mod_2col h3,
.mod_2col h4 {
  column-span: all;
}
.mod_2col p {
  margin: 0px;
  padding: 1em 0px;
}
.mod_texture1::before {
  content:"";
      position: absolute;
    background-image: url('/images/TextureGray2.jpg');
    mix-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;

}

.ctx_back-couleur2 {
  background-color: var(--pgirA);
}
.widget .editable ul li {
  margin-bottom: 0.5em;
}

.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!important;

    height: 100%;
    position: relative;
max-height: 1090px;

}
.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%;

color: #000;
 
}


.map_pgir .pastille::before {
  /* content:"Deschaillons-sur-Saint-Laurent"; */
  position:absolute;
  bottom:4.8em;
  left:1em;
  transform: translateX(-50%);
  font-weight: 500;
  text-shadow: 0 0 5px black;
  max-width: 10em;

  width: max-content;
}


.map_pgir .bloc.id21 {  left:18%;   top:53%; }
.map_pgir .bloc.id36 {  left:18%;   top:43%; }
.map_pgir .bloc.id33 {  left:39%;   top:52%; }
.map_pgir .bloc.id24 {  left:50%;   top:50%; }
.map_pgir .bloc.id27 {  left:58%;   top:63%; }
.map_pgir .bloc.id28 {  left:64%;   top:50%; }
.map_pgir .bloc.id34 {  left:75%;   top:61%; }
.map_pgir .bloc.id32 {  left:84%;   top:66%; }
.map_pgir .bloc.id35 {  left:15.5%;   top:38%; }
.map_pgir .bloc.id23 {  left:28%;   top:42%; }
.map_pgir .bloc.id20 {  left:37%;   top:44%; }
.map_pgir .bloc.id31 {  left:47%;   top:41%; }
.map_pgir .bloc.id25 {  left:62%;   top:47%; }
.map_pgir .bloc.id30 {  left:72%;   top:47%; }
.map_pgir .bloc.id22 {  left:76%;   top:53.5%; }
.map_pgir .bloc.id26 {  left:80%;   top:59%; }
.map_pgir .bloc.id29 {  left:86%;   top:62%; }
.map_pgir .bloc.id99 {  left:-286%;   top:62%; }

/* .bloc.id21 .pastille::before { content:"Bécancour"} */
/* .bloc.id24 .pastille::before { content:"Deschaillons-sur-Saint-Laurent"} */

.bloc.id20  .pastille::before {  content:"Batiscan"}
.bloc.id21  .pastille::before {  content:"Bécancour"}
.bloc.id22  .pastille::before {  content:"Cap-Santé"}
.bloc.id23  .pastille::before {  content:"Champlain"}
.bloc.id24  .pastille::before {  content:"Deschaillons-sur-Saint-Laurent"}
.bloc.id25  .pastille::before {  content:"Deschambault-Grondine"}
.bloc.id26  .pastille::before {  content:"Donnacona"}
.bloc.id27  .pastille::before {  content:"Leclercville"}
.bloc.id28  .pastille::before {  content:"Lotbinière"}
.bloc.id29  .pastille::before {  content:"Neuville"}
.bloc.id30  .pastille::before {  content:"Portneuf"}
.bloc.id31  .pastille::before {  content:"Saint-Anne-de-la-Pérade"}
.bloc.id32  .pastille::before {  content:"Saint-Antoine-de-Tilly"}
.bloc.id33  .pastille::before {  content:"Saint-Pierre-les-Becquets"}
.bloc.id34  .pastille::before {  content:"Sainte-Croix"}
.bloc.id35  .pastille::before {  content:"Trois-Rivières"}
.bloc.id36  .pastille::before {  content:"Wôlinak"}
.bloc.id99  .pastille::before {  content:"Tout TCREF"}


.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;
  max-height: 300px;
  overflow-y: auto;

}
.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;
}