@charset "utf-8";

/*============*
 * GRAPHIQUE  *
 *============*/
.soustitre-page-graphique {
	color: #6b6f78;
	font-family: Arial, sans-serif;
	font-weight: bold;
  font-size: 17px;
}

.polimetre-graphique {
  border: 16px solid #e5eaed;
  font-family: "Myriad Pro";
  margin: 20px auto 0 auto; /* center */
  padding: 16px;
  /*width: 600px;*/
  text-align: left;
}

.polimetre-graphique-text-under {
 /* border: 16px solid #e5eaed;*/
    border-top: 0;
  margin: 0 auto 0; /* center */
  padding: 16px;
  /*width: 600px;*/
  text-align: left;
}

.polimetre-graphique-text-under-half {
  /*border: 16px solid #e5eaed;*/
  margin: 10px 5% 0 0;
  padding: 16px;
  width: 250px;
  text-align: left;
  float:left;
}

.polimetre-graphique-text-under-half p
{
	margin-top:0;
}

.polimetre-graphique-text-under-half-last {
  /*border: 16px solid #e5eaed;*/
  margin: 10px 0 0 0;
  padding: 16px;
  width: 250px;
  text-align: left;
  float:left;
}

.polimetre-graphique-text-under-half-last p
{
	margin-top:0;
}

.polimetre-graphique-text-under-half-last p a,.polimetre-graphique-text-under-half p a
{
	font-weight:bold;
}


.polimetre-graphique-text-under a {
  text-decoration: underline;
}


/* Titre: texte */
.polimetre-graphique .polimetre-graphique-titre-texte {
	color: #6b6f78;
	display: block;
	font-family: Arial, sans-serif;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
  font-size: 24px;
}

/* Titre: barre sous le texte */
.polimetre-graphique .polimetre-graphique-titre-barre {
	background-color: #3597ac;
	border-radius: 6px;
  margin: 0 auto 10px auto; /* center */
  height: 12px;
  width: 300px;
}

/* Sous-titre "Score actuel" */
.polimetre-graphique .polimetre-graphique-soustitre-score {
  color: black;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  margin: 26px 0 12px 0;
  text-transform: uppercase;
  /*text-decoration: underline;*/
}

.polimetre-graphique ul {
  list-style-type: none;
}

.polimetre-graphique li.polimetre-graphique-etat-promesse {
  margin-bottom: 5px; /* espace entre les états */
}

/* Titre (lien) des états des promesses */
.polimetre-graphique a.polimetre-graphique-etat-promesse-titre {
  color: #4f868e;
  overflow: hidden;
  line-height: 1.25;
  text-decoration: none;
  clear: left;
  float: left;
  width: 200px;
  padding:0 15px 0 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;

}
.polimetre-graphique a.polimetre-graphique-etat-promesse-titre:hover {
  text-decoration: underline;
}

/* Barre pourcent (vide/background) */
.polimetre-graphique .polimetre-graphique-etat-promesse-barre {
  background-color: #ddd;
  float: left;
  height: 14px;
  width: calc(100% - 300px);
}
/* Barre pourcent (pleine/foreground) */
.polimetre-graphique .polimetre-graphique-etat-promesse-barre-pleine {
  background-color: #6b6f78;
  height: 14px;
}

/* Score (nombre) */
.polimetre-graphique .polimetre-graphique-etat-promesse-score {
  text-align: center;
  float: right;
  font-weight: bold;
  color: black;
  width: 50px;
}
/* Score (pourcent) */
.polimetre-graphique .polimetre-graphique-etat-promesse-score-pourcent {
  text-align: center;
  float: left;
  width: 50px;
}

.polimetre-graphique .clear {
  clear: both;
}


.polimetre-graphique-barre-total {
  border-bottom: 1px solid #ccc;
  /*margin: 10px;*/
  margin: 10px 0;
  margin-top: 10px;
  width: 480px;
}

.polimetre-graphique-show-all a.polimetre-graphique-etat-promesse-titre {
  width: 400px;
  font-weight: bold;
}

/*==========*
 * PROMESSE *
 *==========*/

.promesse-container {
  border: 1px solid #c9c9c9;
  margin-bottom: 1em;
}

.promesse-row,
.promesse-maj-row {
  background: #EEEEEE;
  padding: 1em;
  position: relative;
}

.promesse-title, .promesse-title h2, .promesse-title h2 a, .promesse-title h2 a:hover,
.promesse-maj-title, .promesse-maj-title h2, .promesse-maj-title h2 a, .promesse-maj-title h2 a:hover {
	color: black;
  font-size: 18px;
	line-height: 18px;
	padding: 0;
  font-weight: bold;
  margin: 0;
  border: 0; /* override */
	margin-bottom: 16px;
  text-align: left;
}

.promesse-title h2 a:hover,
.promesse-maj-title h2 a:hover {
  border-bottom: 0 !important;
  text-decoration: underline;
}

.promesse-content {
  float: left;
  width: 100%;
}

.promesse-content p {
  margin-top: 0; /* Enlever l'espace en haut du texte */
  margin-bottom: 10px;
  margin-right: 260px !important;
  text-align: justify;
}

.promesse-maj-content p {
  margin-top: 0; /* Enlever l'espace en haut du texte */
  margin-bottom: 10px;
  text-align: justify;
}

.promesse-sources {
  margin-top: 1em;
  float: left;
  clear: right;
  width: 380px;
  border: 0px solid black;
}

.promesse-maj-sources {
  margin-top: 1em;
  border: 0px solid black;
}

.promesse-sources p,
.promesse-maj-sources p {
  margin: 0;
  padding: 0;
}

.promesse-sources-label {
  color: black;
  font-weight: bold;
  display: none;
}

.promesse-maj-sources-label {
  color: black;
  font-weight: bold;
}

.promesse-sources-content {
}

.promesse-sujets {
  padding-top: 1em;
  clear: left;
}

.promesse-sujets-content {
}

.promesse-sujets-label {
  color: black;
  font-weight: bold;
  padding-right: 1ex;
  float: left; /* afficher sur une même ligne */
}

.promesse-sujets-content {
}

.promesse-ligne-info-maj {
  color: black;
  margin-top: 1em;
  margin-bottom: 1em;
  position: absolute;
  bottom: 0;
}

.promesse-ligne-info-maj-label {
  color: black;
  font-weight: bold;
  text-decoration: underline;
  /*background-color: yellow;*/
}

.promesse-ligne-info-maj-date {
  color: black;
}

.promesse-ligne-info-maj-link a {
  color: #4f868e;
  font-weight: bold;
}

.promesse-maj-date {
  color: black;
  margin-top: 1em;
  margin-bottom: 1em;
}

.promesse-maj-date-label {
  color: black;
  font-weight: bold;
}

.promesse-read-more, .promesse-read-more a {
  float: right;
  text-decoration: underline;
  margin: 7px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.promesse-lien-retour {
  float: right;
  margin-top: 1em;
  /*position: absolute;
  bottom: 0;
  right: 0;*/
}
.promesse-lien-retour-inner {
  /*padding: 3px 9px;
  text-align: center;
  vertical-align: middle;
  border-radius: 3px;*/

}
.promesse-lien-retour-inner:hover {
  /*background-color: white;*/
}


.liste-promesse-maj-titre, .liste-promesse-maj-titre h2 {
  text-decoration: none;
  border: none;
  color: #4f868e;
  line-height: 1.5em;
	padding: 10px 0 10px 0;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  text-align: left;
}


/*=====================*
 * ÉTAT DE LA PROMESSE *
 *=====================*/
.polimetre-etat{
	background: #fff;
	/*float: right;
	padding: 2%;
	width: 33%;*/
  clear: right;
  float: right;
  width: 216px; /*232px*/
  padding: 10px;
  color: black;
  border: 1px solid #ccc;
  margin-left: -100%;
  position: relative;
  z-index: 50;
}

.polimetre-etat-title {
	color: #6b6f78;
	display: block;
	font-family: Arial, sans-serif;
	font-weight: bolder;
  font-size: 16px;
	margin-bottom: 6px;
	text-align: center;
	text-transform: uppercase;
}

.polimetre-etat-graphic {
	background: #cfcfcf;
	border-radius: 10px;
	height: 10px;
	margin-bottom: 4px;
}

.polimetre-etat-graphic-left {
  height: 100%;
  width: 50%;
  float: left;
  border-radius: 10px 0 0 10px;
}

.polimetre-etat-graphic-right {
  height: 100%;
  width: 50%;
  float: left;
  border-radius: 0 10px 10px 0;
}

.polimetre-etat-text {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
  font-weight: bold;
	text-transform: uppercase;
  text-align: left;
}

.gray .polimetre-etat-graphic-left,
.gray .polimetre-etat-graphic-right {
	background: #596d75; /* gray */
}

.red .polimetre-etat-graphic-left,
.red .polimetre-etat-graphic-right {
	background: #e12f2f; /* red */
}

.yellow .polimetre-etat-graphic-left,
.yellow .polimetre-etat-graphic-right {
	background: #c7a316; /* yellow */
}

.green .polimetre-etat-graphic-left,
.green .polimetre-etat-graphic-right {
	background: #34ad4e; /* green */
}

.blue .polimetre-etat-graphic-left,
.blue .polimetre-etat-graphic-right {
	background: #4d89bc; /* blue */
}

.green-gray .polimetre-etat-graphic-left {
  background: #419f16; /* left = green */
}
.green-gray .polimetre-etat-graphic-right {
  background: #a6b2b3; /* right = gray */
}

.orange .polimetre-etat-graphic-left {
  background: #f88216; /* left = green */
}
.orange .polimetre-etat-graphic-right {
  background: #a6b2b3; /* right = gray */
}



/*
///////////////////////////////////////
*/

.promesse-liste .promesse-title, .promesse-liste .promesse-title h2,
.promesse-liste .promesse-title h2 a, .promesse-liste .promesse-title h2 a:hover {
  width: 100%;
  float: left;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

.promesse-liste .promesse-title h2 a {
  margin-right: 260px !important;
  width: auto !important;
}

.promesse-liste .polimetre-etat {
  clear: none;
}

.graph {
  float: left;
  margin-top: 11px;
  width: 323px;
}

.graph img {
  border: 16px solid #e5eaed;
}

.graph.first {
  margin-right: 11px;
}

.graph p {
  color: #6B6F78;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 1.25em;
  text-align: left;
  text-transform: uppercase;
}

.texte a.graph-button {
  border-radius: 35px;
  background: #3597AC url("front-actions-arrow.png") no-repeat 10em center;
  color: #fff;
  float: right;
  font-size: 18px;
  font-weight: 700;
  margin-top: 2.5em;
  padding: 1.25em 4em 1.25em 1.5em;
}

.texte a.graph-button-gros {
  border-radius: 35px;
  background: #3597AC url("front-actions-arrow.png") no-repeat 34.5em center;
  color: #fff;
  float: right;
  font-size: 18px;
  font-weight: 700;
  margin-top: 2.5em;
  padding: 1.25em 4em 1.25em 1.5em;
}

.texte a.graph-button:hover,.texte a.graph-button-gros:hover {
  color: #fff;
}

.bordure-grise
{
	/*border: 16px solid #e5eaed;*/
	width:291px;

}

.bordure-grise h2
{
	padding:0 5px 0 5px;
	line-height:inherit;
}

.bordure-grise p
{
	color:#696969!important;
	font-family: Arial!important;
	font-size: 12px!important;
	line-height: 16px!important;
	text-transform:none!important;
	font-weight:normal!important;
	padding:0 5px 20px 5px!important;
	text-align:justify!important;
}
