/*****
orange :
#f14d2b #ffb8a1 #ffe1d8

texte bleu ciel : #17a1b7
texte bleu foncé : #083c71
texte bleu noir : #0c2a46

gris clair, fonce{

  #f0f0f0 #ada6a7
}

rose rgb(255, 102, 196)

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

********/
/* * {  font-family: "Open Sans", sans-serif;} */
p,div,span,a,li {
  font-family: "Open Sans", sans-serif;
  font-weight:500;
  font-size:14px;
  color:#0c2a46;
}
a.box-fond-blanc,
.card-body a
{text-decoration: underline;}/* CARE */
/* nav[data-toggle="toc"] .nav > li > a {
	text-decoration: none;
} */
h5 {color:#0c2a46;}
p {text-align:justify;}

li span {
font-size:15px;
}

dt,dd {
	margin-bottom: .5rem;
}

dl dt span {color:#17a1b7;font-weight:700;}

.fiche_objectif h1 {
  text-align:center;
  color:#fff;
  /* font-family:"Open "; */
  font-family: "Open Sans", sans-serif;
  /* font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-size:18px;
  font-weight:700;
  text-transform: uppercase;
}

/* h2 */
.titre-h2-fo {
  text-transform: uppercase;
  position: relative;
  /* background-image: url('/img/fichesObjectif/flag.png'); */
  /* background-image: url('/img/fichesObjectif/ZH/engrenages.png'); */
  background-image: url('/img/fichesObjectif/ZH/loupe.png');
  background-repeat: no-repeat;
  /* background-position: 0px 0px; */
  background-position: 5px 20px;

  height:70px;
  background-size: auto 50px;
}
.titre-h2-fo.titre-h2-ampoule {
  background-image: url('/img/fichesObjectif/ampoule.png');
  height:80px;
}

.titre-h2-fo.titre-h2-loupe-vide {
  background-image: url('/img/assainissement/loupeVide.png');
  /* background-position: 0px 10px; */
  height:70px;
  background-size: auto 50px;
}
.titre-h2-fo.titre-h2-loupe-fiche {
  background-image: url('/img/assainissement/loupeFiche.png');
  background-position: 0px 12px;
  height:70px;
  background-size: auto 50px;
}
.titre-h2-fo.titre-h2-poing {
  background-image: url('/img/fichesObjectif/ZH/poing.png');
  /* background-position: 0px -4px; */
  background-position: -18px -8px;
  height: 70px;
  background-size: auto 70px;
}
/*
.titre-h2-fo.titre-h2-loupe {
  background-image: url('/img/fichesObjectif/ZH/engrenages.png');
  background-position: 0px 10px;
  height:70px;
  background-size: auto 50px;
}
*/

.titre-h2-fo:after {
  content: "";
display: block;
position: absolute;
bottom: 0px;
/* left: 12px; */
left: 24px;
width: 120px;
height: 4px;
background: #f14d2b;
}

.titre-h2-fo.titre-h2-loupe:after {
/* bottom: -10px; */
left: 24px;
}
.titre-h2-fo.titre-h2-ampoule:after {
/* bottom: -10px; */
left: 24px;
}


.titre-h2-fo h2 {
font-size:20px;
/* position: relative; */
/* padding-left:50px; */
padding-left:60px;
padding-top:34px;
/* } */

}


.titre-h2-fo h2,
.titre-h3-fo h3 {
margin-bottom:0;
  color:#f14d2b;
font-weight:700;
}
.titre-h3-fo h3 {
  font-size:16px;
  line-height:1;
  font-size:italic;
  position:relative;
  margin-left:24px;
}
.titre-h3-fo h3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: -24px;
  width: 16px;
  height: 16px;
  background: #f14d2b;
}

/* h5 */
h5.titre-h5  {
  font-size:16px;
  color:#0c2a46;
  line-height:1;
  /* font-size:italic; */
  font-weight:700;
}

h5.titre-h5-fo  {
  display: inline-block;
  position:relative;
  font-size:20px;
  color:#0c2a46;
  line-height:1;
  /* font-size:italic; */
  font-weight:700;
}
h5.titre-h5-fo:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -32px;
  width: 20px;
  height: 20px;
  background: #CB6CE6;
  border-radius:10px;
  border:solid 10px #CB6CE6;
}
h5.titre-h5-fo.rose:after {
  background:rgb(255, 102, 196) ;
  border-color:rgb(255, 102, 196);
}
h5.h5-hydro {
}

/****** Explication de la donnee ***************/
.explique-donnee p,
.explique-donnee li
 {
	color: #fff;
}
.explique-donnee p {margin-bottom: 0.6rem;

}
.explique-donnee {
	/* text-decoration: indianred; */
	/* text-transform: capitalize; */
	font-style: italic;
	/* font-weight: bold; */
	line-height: 1.4;
	font-size: 0.9rem;
  display:block !important;
}
.explique-donnee h5{
	font-style: normal;
	font-weight: bold;
	/* line-height: 1.4; */
	font-size: 1rem;
  margin-bottom: 0.2rem;
  margin-top: 0.9rem;
}

.tooltip-inner {
	max-width: 35rem;
	padding: .25rem .5rem;
	color: #fff;
	text-align: left;
	background-color: #332f2f;
	border-radius: .25rem;
}

 .badge.badge-tooltip {
   /* vertical-align: top; */
   cursor:pointer;
   vertical-align: super;
   height:18px;
   width:18px;
   padding:0;
   /* line-height:inherit; */
   line-height:18px;
   	border-radius: 18px;
    font-size:14px;
    margin-left: 2px;
 }

 .badge.badge-tooltip.legende-badge {
   vertical-align: baseline;
   cursor:inherit;
   /* vertical-align: super; */
   /* height:18px; */
   /* width:18px; */
   padding:0;
   line-height:inherit;
   	/* border-radius: 18px; */
    font-size:14px;
 }


#ficheObjectif #col-contenu {
  /* padding-right:30px; */
  /* padding-left:30px; */
  padding-right:5rem;
  padding-left:5rem;
}


/* p,a,span,li {color:#083c71;} */
ul {padding-left:15px;}
img{max-width:100%;}
img.evalThermo {max-width:150px;}/* 20240826 */
img.carteStatique {max-width:60%;}

/*** BANNIèRE *****/
#map {width:100%;}
.banner,#map {
  height:26rem;/* CARE RESP */
  background-color: lightgrey;
}
.banner span {
position:absolute;
z-index:4000;
padding:8px;
font-weight:700;
left:0px;
top:0px;
/* background-color: #b7d8e6; */
background-color: #4582a7;
color: #fff;
text-transform: uppercase;
}

.ol-zoom {
	top: .5em;
	right: .5em;
	left: inherit;
}


.etat,.etat_2 {background-color: inherit;
padding:0;
}

/********* BOITES **********************/
.box {
	/* background: #d1e9f5; */
	padding: 1.4rem 1.4rem 1.6rem 1.4rem;
  position: relative;
}

.box-fond-bleu {
	background: #b7d8e6;
  /* color:#083c71; */
	/* padding: 1.4rem 1.4rem 2rem 1.4rem; */
}
.boite-titre-rond {
  position:relative;
  color:#083c71;
	/* padding: 1.4rem 1.4rem 2rem 1.4rem; */
}

.boite-titre-rond.fond-bleu {
  background: #e2eff4;
}
.boite-titre-rond.fond-orange {
	/* background: #ffe9e2; */
	background: #fff4cc;
}

.box-fond-gris {
color:#ada6a7;
	background: #f0f0f0;
  font-style: italic;
}

.box-fond-gris p {
color:#ada6a7;
}

.box-fond-blanc {
  height:100%;
	background: #fff;
  color:#083c71;
	padding: 1rem 10px 1rem 10px;
  position: relative;
  /* margin-right:10px; */
  /* margin-left:10px; */
}

.autres-boites .box-fond-blanc {
  height:auto;
  margin-bottom: 1rem;
}
.box-fond-blanc h5 {
  font-weight:700;
  font-size: 17px;
  text-align: center;
}
.box-fond-blanc h6 {
  font-weight:700;
  font-size: 16px;
  /* text-align: center; */
}
/* .box-fond-blanc  */
h6.titre-carte {
background:#ffde59;
padding:10px;
/* padding-bottom:10px; */
  font-weight:700;
  font-size: 17px;
  /* text-align: center; */
}
.col-suivi .box-fond-blanc {
  /* margin-right:10px; */
  /* margin-left:10px; */

}

.outer-plus {
position: absolute;
  bottom:10px;
  right:10px;
}
a.plus {
  background: #b7d8e6;
  /* background: #f14d2b; */
  height:40px;
  width: 40px;
  border-radius: 20px;
  color: white;
  font-weight:700;
  line-height: 35px;
  font-size: 28px;
  text-align: center;
  display: inline-block;
  text-decoration: inherit;
}
.fond-orange a.plus {
  /* background: #f14d2b; */
  background: #ffcc00;
}
a.plus:after {
  text-decoration: inherit;
  color: #fff;
content:'+';
}

a.plus:not(.collapsed):after {
content:'-';
}

a.plus:hover {
  text-decoration: inherit;
  color: #fff;

}
.target .box-fond-blanc {
  padding-right:20px;
  padding-left:20px;
}
.target h5 {
  color: #f14d2b;
  text-align:left;
  text-decoration: underline;
}
/* #boite-preserver .target h5 {  color: #b7d8e6;} */
#boite-preserver .target h5 {  color: #083c71;}
#proteger .target h5 {  color: #ffcc00;}

nav[data-toggle="toc"] .nav-link.active, nav[data-toggle="toc"] .nav-link.active:focus, nav[data-toggle="toc"] .nav-link.active:hover {
	color: #0c2a46;
	border-left: 2px solid #0c2a46;
}

nav[data-toggle="toc"] .nav > li > a:focus, nav[data-toggle="toc"] .nav > li > a:hover {
	color: #0c2a46;
	border-left: 1px solid #0c2a46;
}

/*
texte bleu foncé : #083c71
texte bleu noir : #0c2a46
*/
/* h4 */
h3.titre-rond {
  color:#0c2a46;
  font-size:16px;
  line-height:1;
  font-size:italic;
  position:absolute;
  left:0;
  top:-20px;
  padding-left:24px;
  padding-right:24px;
  padding-top:12px;
  padding-bottom:12px;
  background:#b7d8e6;
font-weight: 700;
 border-radius: 20px;
  width:33%;
  text-transform: uppercase;
}
.fond-orange h3.titre-rond {
  /* background:#f14d2b; */
  background:#ffcc00;
}

.bleu-bold p,
.bleu-bold > ul > li > span{
  font-weight:700;
  font-size: 16px;
}


/* .fiche_objectif div. { */





.col-boitao > div {
  display:flex;
flex-direction: column;
align-items: center;
}
.col-boitao p {text-align: justify;}
.col-boitao img {max-width: 40%;}


.box.image-haute {
  position: relative;
  padding:0;
}

.box.image-haute > img {
/* img.stickedToTop { */
  position: absolute;
  	z-index: -5;
  	left: 50%;
  	/* transform: translateY(-100%); */
  	transform: translate(-70%,-100%);

}

.box.image-haute p {
	padding: 1.4rem 1.4rem 1.6rem 1.4rem;
}



.col-boitao.col-boitao-hydro .box.image-haute > img {
  	max-width: 60%;
      	transform: translate(0%,-100%);
}
.col-boitao.col-actions-1 img {max-width: 50%;}
.col-boitao.col-actions-2 img {max-width: 25%;}

 .coin-rond:before {
   position:absolute;
   content: "";
   position: absolute;
   top: -13px;
   right: -13px;
   width: 26px;
   height: 26px;
   background: #CB6CE6;
   border-radius:13px;
   border:solid 13px #CB6CE6;
 }

/****** ZH ******/
.leftIMG.imageHaute {max-height:115px;}

/****** Boite A Eau ******/
.titre-boiteAO  {
background: #f14d2b;
/* font-size:18px; */
margin-bottom:0;
}
.titre-boiteAO h2 {
color:#0c2a46;
font-size:20px;
font-weight:700;
margin-bottom:0;
}
.titre-boiteAO img {
position:absolute;
left:6rem;
bottom:-1px;
max-width:13rem;
}

/* .titre-boiteAO-h4 > .row  { */
.titre-boiteAO-h3   {
  /* display: flex; */
  align-items: center;
}
/* .titre-boiteAO-h4 .bigNumber, */
.titre-boiteAO-h3 .bigNumber  {
  font-size:4rem;
  font-weight: bold;
}
 .strategie-1 .titre-boiteAO-h3 .bigNumber  {
  padding-right: 30px;
  padding-left:0;
  /* margin-right:1rem; */
}

.titre-boiteAO-h3 h3 {
  font-size:24px;
  font-weight: bold;
  background:#ffb8a1;
  padding:0.5rem 1.5rem 0.5rem 1.5rem ;
  margin-bottom:0;
text-align:  center;
}



.titre-boiteAO-h5 h5 {
  font-size:15px;
  text-transform: uppercase;
  font-weight: bold;
  background:#ffb8a1;
  padding:0.5rem 0 0.5rem 0;
  margin-bottom:0;
text-align:  center;
}

.dynOp .titre-boiteAO-h5 h5 {
  background:#ada6a7;
}


.sous-titre-boiteAO-h5 h5 {
  font-size:15px;
  /* text-transform: uppercase; */
  font-weight: bold;
  /* background:#ffb8a1; */
  /* padding:0.5rem 0 0.5rem 0; */
  margin-bottom:3rem;
text-align:  center;
}
/*
.sous-titre-boiteAO-h5.text-left h5 {
text-align:  left;
}
.sous-titre-boiteAO-h5.text-right h5 {
text-align:  left;
}
*/
.titre-boiteAO-h6 h6 {
  font-size:14px;
  text-transform: uppercase;
  font-weight: bold;
  background:#ffb8a1;
  padding: 0 0.5rem 0 0.5rem;
  margin-bottom:0;
  text-align:  center;
}
.liste-boiteAO-triggers {
}

.ul-targets-outer {
  padding:0.6rem 0.6rem 0.6rem 0.6rem ;
  background:#ffe1d8;
}
.ul-targets-outer ul {
  list-style-type: none;
  padding-left:5px;
}
#reglementation-1-2 .ul-targets-outer,
#reglementation-1-2 .ul-targets-outer ul {
  padding-left:0px;
}

.ul-targets-outer li::before {
  background: #ffb8a1;
  /* background: #f14d2b; */
  height:20px;
  width: 20px;
  border-radius: 10px;
  color: white;
  font-weight:700;
  line-height: 18px;
  font-size: 18px;
  text-align: center;
  display: inline-block;
margin-right: 5px;

content:'+';
}

.ul-targets-outer li:not(.collapsed)::before {
content:'-';
}

.dynOp .ul-targets-outer {
  background:#ededed;
}

.benefice-video .ul-targets-outer {
  background:transparent;
}

.benefice-video .ul-targets-outer li::before {
	background: #b7d8e6;
	/* background: #f14d2b; */
	/* height: 20px;
	width: 20px;
	border-radius: 10px;
	color: white;
	font-weight: 700;
	line-height: 18px;
	font-size: 18px;
	text-align: center;
	display: inline-block;
	margin-right: 5px;
	content: '+'; */
}

/* .liste-boiteAO-triggers ul, */
.liste-boiteAO-triggers .targets {
  background:#ffe1d8;
  margin-top:1rem;
  margin-bottom:1rem;
}



#accordion-reglementation .targets .card-body h6 {
  font-weight: 700;
	font-size: 16px;
}

.titre-h7 {
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
  display:block;
}
.titre-h8 {
	margin-bottom: .4rem;
	font-weight: 700;
	line-height: 1.1;
  display:block;
  text-decoration: underline;
  font-size:13px;
}

#accordion-reglementation .targets .card-body .titre-h7 {
  font-weight: 700;
	font-size: 14px;
  color:#646464;
  margin-top:2.4rem;
}
#accordion-reglementation .targets {
  background:#ededed;
  margin-top:1rem;
}

/* #reglementation-1-2 li, */
.ul-targets-outer > ul > li,
.liste-boiteAO-triggers li {
  cursor:pointer;
  font-weight: 700;
  font-size: 15px;
}
/*
#reglementation-1-2 .inner-collapse li {
	cursor: inherit;
	font-weight: normal;
	font-size: inherit;
}
*/
.row-strategie .targets p {font-size:12px;}

.intro-boiteAO p ,
.intro-boiteAO li
{font-weight:700;}

/* TABLE SCOT ****/
.table-scot th,
.table-scot th {
  margin-right:2px;
  margin-left:2px;
}
.table-scot th {background:#f14d2b}
.table-scot td {background:#ffb8a1}

.explications .exp-titre {background:#f14d2b;
margin-bottom:0;
color:#fff;
padding:0.5rem 6rem 0.5rem 6rem;
font-size:18px;
font-weight: 700;
}
.explications >div > div {background:#ffe1d8;
padding:1rem;
}

#collapseIZHDU table th,
#collapseIZHDU table td {text-align: center;
vertical-align: middle;
}




/* boite dialogue */
#btn_dialogue {
height:25px;

}



@media (min-width: 768px) {
  #menu-haut.navbar-expand-md .navbar-collapse { justify-content: center;}

  /********** ACTIONS ***************/
  .col-actions-1 {margin-top:10rem;}
  .col-actions-2 {margin-top:8rem;}

  h3.titre-rond {
    width:33%;
  }



}

@media (min-width: 992px) {
  .banner,#map {
    height:430px;/* CARE RESP */
  }
  .banner img {
    top:100px; /* CARE RESP */
  }

}


@media (min-width: 1492px) {
  .col-actions-1 {margin-top:16rem;}

  img.carteStatique {
  	max-width: 50%;
  }

}