.fwf_dimmer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(110, 145, 16, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.degrade_normal,
body.logged-in,
.fwf_main_dimmer {
  background: rgb(123, 146, 10);
  background: var(--degrade-principal-1);
}

.fond_bac_a_sable,
body.fwf_bac_a_sable .fwf_main_dimmer {
  background: var(--env-2);
}

.fond_dev,
body.fwf_dev .fwf_main_dimmer {
  background: var(--env-1);
}

.degrade_vacances {
  background: rgb(112, 225, 245);
  background: linear-gradient(
    90deg,
    rgba(112, 225, 245, 1) 0%,
    rgba(255, 209, 148, 1) 100%
  );
}

.degrade_ete {
  background: rgb(107, 85, 86);
  background: linear-gradient(
    90deg,
    rgba(255, 78, 80, 1) 0%,
    rgba(249, 212, 35, 1) 100%
  );
}

.degrade_bleu_orage {
  background: rgb(9, 32, 63);
  background: linear-gradient(
    to top,
    rgba(9, 32, 63, 1) 0%,
    rgba(83, 120, 149, 1) 100%
  );
}

.degrade_bleu_orage_horizontal {
  background: rgb(9, 32, 63);
  background: linear-gradient(
    90deg,
    rgba(9, 32, 63, 1) 0%,
    rgba(83, 120, 149, 1) 100%
  );
}

.degrade_automne {
  background: rgb(218, 210, 153);
  background: linear-gradient(
    90deg,
    rgba(218, 210, 153, 1) 0%,
    rgba(176, 218, 185, 1) 100%
  );
}

.degrade_bleu_fond {
  background: rgb(96, 108, 136);
  background: linear-gradient(
    90deg,
    rgba(96, 108, 136, 1) 0%,
    rgba(63, 76, 107, 1) 100%
  );
}

.background-violet-degrade-1,
.degrade_violet {
  background: rgb(145, 164, 218);
  background: var(--degrade-violet-1);
}

.background-violet-degrade-2,
.degrade_violet_inverse {
  background: var(--degrade-violet-2);
}

.background-bleu-degrade-1,
.degrade_bleu {
  background: rgb(140, 166, 219);
  background: var(--degrade-bleu-1);
}

.background-rose-degrade-1,
.degrade_rose {
  background: var(--degrade_rose_1);
}

.background-rose-degrade-2,
.fwf_fond_degrade_rose {
  background: var(--degrade_rose_2);
}

/* Colors */

.color-primary {
  color: var(--primary-2);
}

.color-secondary {
  color: var(--secondary-1);
}

.color-previsionnel {
  color: var(--previsionnel);
}

.color-bleu {
  color: var(--bleu-3);
}

.color-violet {
  color: var(--violet-1);
}

.color-ok {
  color: var(--stats-1);
}

.color-rouge,
.color-danger {
  color: var(--rouge-3);
}

.color-warning {
  color: var(--orange-3);
}

.color-gris {
  color: var(--gris-5) !important;
  fill: var(--gris-5);
}

.color-gris-1 {
  color: var(--gris-1);
  fill: var(--gris-1);
}

.color-gris-2 {
  color: var(--gris-2);
  fill: var(--gris-2);
}

.color-gris-3 {
  color: var(--gris-3);
  fill: var(--gris-3);
}

.color-gris-4 {
  color: var(--gris-4);
  fill: var(--gris-4);
}

.color-gris-5 {
  color: var(--gris-5);
  fill: var(--gris-5);
}

.color-gris-6 {
  color: var(--gris-6);
  fill: var(--gris-6);
}

.color-gris-7 {
  color: var(--gris-7);
  fill: var(--gris-7);
}

.color-magenta {
  color: var(--fwf_magenta);
}

.color-white {
  color: var(--white) !important;
  fill: var(--white);
}

.color-blue {
  color: var(--blue);
}

.color-indigo {
  color: var(--indigo);
}

.color-purple {
  color: var(--purple);
}

.color-pink {
  color: var(--pink);
}

.color-red {
  color: var(--fwf_rouge_fonce);
  fill: var(--fwf_rouge_fonce);
}

.color-orange {
  color: var(--orange);
}

.color-degrade-ete {
  background: var(--degrade-ete-2);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.color-vert {
  color: var(--fwf_vert);
}

.color-yellow {
  color: var(--yellow);
}

.color-green {
  color: var(--green);
}

.color-vert-fonce {
  color: var(--fwf_vert_fonce);
  fill: var(--fwf_vert_fonce);
}

.color-teal {
  color: var(--teal);
}

.color-cyan {
  color: var(--cyan);
}

.color-black {
  color: var(--black);
}

.color-indigo_clair {
  color: var(--fwf_indigo_clair);
}
.color-indigo_clair {
  color: var(--fwf_indigo_fonce);
}

/* backgrounds */

.background-blue {
  background: var(--bleu-3);
}

.background-indigo {
  background: var(--indigo-3);
}
.border-color-indigo {
  border-color: var(--indigo-3);
}

.background-indigo_clair {
  background: var(--indigo-2);
}
.border-color-indigo_clair {
  border-color: var(--indigo-2);
}
.color-indigo_clair {
  color: var(--indigo-2);
}

.background-indigo_fonce {
  background: var(--indigo-4);
}
.border-color-indigo_fonce {
  border-color: var(--indigo-4);
}
.color-indigo_clair {
  color: var(--indigo-4);
}

.background-purple {
  background: var(--violet-1);
}

.background-pink {
  background: var(--pink);
}

.background-red {
  background: var(--red);
}

.background-orange {
  background: var(--orange);
}

.background-yellow {
  background: var(--yellow);
}

.background-green {
  background: var(--green);
}

.background-teal {
  background: var(--teal);
}

.background-cyan {
  background: var(--cyan);
}

.background-black {
  background: var(--black);
}

.background-gris-1,
.background-gris-clair {
  background: var(--gris-1);
}

.background-gris-2 {
  background: var(--gris-2);
}

.background-gris-3 {
  background: var(--gris-3);
}

.background-gris-4,
.background-gris-medium {
  background: var(--gris-4);
}

.background-vert {
  background-color: var(--vert-4);
}

.background-vert-2 {
  background-color: var(--vert-2);
}

.border-color-vert {
  border-color: var(--vert-4);
}
.color-vert {
  color: var(--vert-4);
}

.background-magenta {
  background-color: var(--rouge-4);
}
.border-color-magenta {
  border-color: var(--rouge-4);
}
.color-magenta {
  color: var(--rouge-4);
}

.color-white {
  color: var(--white) !important;
  fill: var(--white);
}

.color-blue {
  color: var(--bleu-3);
}

.color-indigo {
  color: var(--indigo);
}

.color-purple {
  color: var(--violet-1);
}

.color-pink {
  color: var(--pink);
}

.color-red {
  color: var(--rouge-3);
  fill: var(--rouge-3);
}

.color-orange {
  color: var(--orange);
}

.background-jaune {
  background: var(--jaune-2);
}

.background-jaune-clair {
  background: var(--jaune-1);
}

.color-yellow {
  color: var(--yellow);
}

.color-green {
  color: var(--green);
}

.color-vert-fonce {
  color: var(--vert-5);
  fill: var(--vert-5);
}

.color-teal {
  color: var(--teal);
}

.color-cyan {
  color: var(--cyan);
}

.color-black {
  color: var(--black);
}

.fwf_background_mois_1 {
  background: var(--mois_1);
}

.fwf_background_mois_2 {
  background: var(--mois-2);
}

.fwf_background_mois_3 {
  background: var(--mois-3);
}

.fwf_background_mois_4 {
  background: var(--mois-4);
}

.fwf_background_mois_5 {
  background: var(--mois-5);
}

.fwf_background_mois_6 {
  background: var(--mois-6);
}

.fwf_background_mois_7 {
  background: var(--mois-7);
}

.fwf_background_mois_8 {
  background: var(--mois-8);
}

.fwf_background_mois_9 {
  background: var(--mois-9);
}

.fwf_background_mois_10 {
  background: var(--mois-10);
}

.fwf_background_mois_11 {
  background: var(--mois-11);
}

.fwf_background_mois_12 {
  background: var(--mois-12);
}

.background-ok {
  background: var(--fwf_stats_ok);
}

.background-warning {
  background: var(--fwf_orange_warning);
}

.background-danger {
  background: var(--fwf_rouge_fonce);
}

/* couleur de fond des notifications */
.background-notifications_fond_vert_clair {
  background: var(--fwf_vert);
}

.background-notifications_fond_vert_sombre {
  background: var(--fwf_vert_fonce);
}

.background-notifications_fond_anthracite {
  background: var(--fwf_anthracite);
}

.background-notifications_fond_rev {
  background: rgb(225, 130, 45);
  background: linear-gradient(
    to top,
    rgba(255, 78, 80, 1) 0%,
    rgba(249, 212, 35, 1) 100%
  );
}

/* Border color */
.border-color-indigo {
  border-color: var(--fwf_indigo);
}
.border-color-indigo_clair {
  border-color: var(--fwf_indigo_clair);
}
.border-color-indigo_fonce {
  border-color: var(--fwf_indigo_fonce);
}
.border-color-orange {
  border-color: var(--orange);
}

.border-color-vert {
  border-color: var(--fwf_vert);
}

.border-color-magenta {
  border-color: var(--fwf_magenta);
}

.fwf_border_mois_1 {
  border-color: var(--mois-1);
}

.fwf_border_mois_2 {
  border-color: var(--mois-2);
}

.fwf_border_mois_3 {
  border-color: var(--mois-3);
}

.fwf_border_mois_4 {
  border-color: var(--mois-4);
}

.fwf_border_mois_5 {
  border-color: var(--mois-5);
}

.fwf_border_mois_6 {
  border-color: var(--mois-6);
}

.fwf_border_mois_7 {
  border-color: var(--mois-7);
}

.fwf_border_mois_8 {
  border-color: var(--mois-8);
}

.fwf_border_mois_9 {
  border-color: var(--mois-9);
}

.fwf_border_mois_10 {
  border-color: var(--mois-10);
}

.fwf_border_mois_11 {
  border-color: var(--mois-11);
}

.fwf_border_mois_12 {
  border-color: var(--mois-12);
}

.background-warning {
  background: var(--orange-3);
}

/* couleur de fond des notifications */
.background-notifications_fond_vert_clair {
  background: var(--vert-4);
}

.background-notifications_fond_vert_sombre {
  background: var(--vert-5);
}

.background-notifications_fond_anthracite {
  background: var(--gris-7);
}

.background-notifications_fond_rev {
  background: rgb(225, 130, 45);
  background: linear-gradient(
    to top,
    rgba(255, 78, 80, 1) 0%,
    rgba(249, 212, 35, 1) 100%
  );
}

/* couleurs svg */

.fill-warning {
  fill: var(--orange-3);
}
.fill-jaune {
  fill: var(--jaune-2);
}

/* couleurs border */

.border-warning {
  border-color: var(--orange-3);
}
.border-jaune {
  border-color: var(--jaune-2);
}

/***************************************************************************/
/* Containers de base                                                      */
/***************************************************************************/

.container-full-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/***************************************************************************/
/* Footer                                                                  */
/***************************************************************************/

.fwf_footer {
  display: none;
}

/***************************************************************************/
/* Contenu                                                                 */
/***************************************************************************/

.fwf_contenu_listing,
.fwf_contenu_page {
  padding: 1rem var(--contenu-listing-left) 15vh var(--contenu-listing-right);
}

.fwf_contenu_listing_fullscreen {
  padding: 0.5rem 0 15vh 0;
}

.fwf_bloc {
  padding: 4rem 3vw 4rem 3vw;
}

.bloc-boxed {
  box-shadow: var(--box-shadow-2);
}

.fwf-contenu ul {
  padding: 0;
}

.fwf-contenu ul li {
  list-style-type: none;
  position: relative;
  padding-left: 2rem;
}

.fwf-contenu ul li + li {
  margin-top: 1rem;
}

.fwf-contenu ul li::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--secondary-1);
  position: absolute;
  left: 0;
  top: 5px;
}

.bloc-facturation-action {
  display: flex;
  background: var(--degrade-violet-1);
  align-items: center;
  justify-content: flex-end;
  padding: 0.6rem;
  position: relative;
  color: #fff;
  font-weight: 500;
  user-select: none;
}

/****************************/
/* Images 
/****************************/

*.rounded > img,
img.rounded {
  border-radius: 50%;
}

*.image-fit > img,
img.image-fit {
  max-width: 100%;
  height: auto;
}

/****************************/
/* Elements de titre 
/****************************/

.phase-titre {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 0.5rem;
}

.phase-titre > .phase-code {
  min-width: 40px;
}

.phase-titre > .phase-code > strong {
  font-size: 0.9em;
  background: var(--primary-2);
  color: var(--blanc-1);
  padding: 0.05rem 0.4rem;
  border-radius: var(--arrondi-form-field-1);
}

.phase-titre > .phase-title {
  display: flex;
  flex-direction: column;
}

.phase-titre > .phase-title > strong {
  font-weight: 500;
  font-size: 1.1em;
}

.phase-titre .phase-teneur {
  font-size: 0.85em;
  font-weight: 100;
}

/****************************/
/* Facturation 
/****************************/

.phase-facturation-value {
  width: 100%;
  padding: 0.15rem;
  border-radius: var(--arrondi-form-field-1);
}

.phase-facturation-value .pourcentage {
  font-weight: 500;
}

.phase-facturation-value-pending {
  background: var(--orange-3);
}

/****************************/
/* Avancements 
/****************************/

.valeur_avancement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.3rem;
  margin: 0 1rem;
  border-radius: 999em;
  width: 50px;
  height: 50px;
  position: relative;
  user-select: none;
}

.valeur_avancement .date {
  width: 100%;
  text-align: center;
  font-size: 0.75em;
  margin-top: 0.05rem;
  line-height: 1;
  opacity: 0.7;
}

.valeur_avancement small {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.65em;
}

.valeur_avancement small i {
  color: rgba(0, 0, 0, 0.3);
}

.valeur_avancement.avancement_archive {
  padding: 0;
}

.valeur_avancement.avancement_effectif {
  background: var(--vert-2);
}

.valeur_avancement.avancement_confirmed {
  background: var(--secondary-1);
  font-weight: 500;
}

.valeur_avancement.disabled {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

.message {
  border: 1px solid var(--gris-4);
  border-radius: var(--arrondi-form-field-1);
  min-width: 50%;
  padding: 2rem;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.message > * {
  text-align: center;
}

.message > *:last-child {
  margin-bottom: 0;
}

/* Laptops */
@media (min-width: 992px) and (max-width: 1600px) {
  .fwf_bloc {
    padding: 3rem 2vw 3rem 2vw;
  }
}

/* <= à sm -> Tablettes & Smartphones */
@media (max-width: 991px) {
  .fwf_bloc {
    margin: 0 var(--marge-horizontale);
    padding: 0.5rem var(--marge-horizontale) 2rem;
  }

  .fwf_bloc + .fwf_bloc {
    margin-top: 2rem;
  }
}

/*******************************/
/* Stats (éléments indicateurs)
/*******************************/
.indicateur-stat {
  position: relative;
}

.indicateur-stat .titre {
  line-height: 1;
}

.indicateur-stat .titre small {
  color: var(--gris-7);
  display: block;
  text-transform: uppercase;
  font-weight: 100;
  font-size: var(--font-size-3);
}

.indicateur-stat .titre span {
  display: inline-block;
  position: relative;
}

.indicateur-stat .titre .fwf_infobulle_component {
  font-size: var(--font-size-5);
}

.indicateur-stat .legende {
  margin-top: 0.5rem;
  text-align: center;
  font-size: var(--font-size-3);
}

.indicateur-stat.is-disabled .legende {
  opacity: 0.5;
}

.disabled-layer {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.7);
}

.disabled-reason {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gris-1);
  padding: 0.5rem;
  border-radius: var(--arrondi-1);
  font-size: var(--font-size-3);
  border: 1px solid var(--gris-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 90%;
}

.disabled-reason > *:nth-child(1) {
  font-weight: 500;
}

.disabled-reason > * + * {
  margin-top: 0.5rem;
}

/* Laptops */
@media (min-width: 992px) and (max-width: 1600px) {
  .indicateur-stat .legende {
    font-size: var(--font-size-2);
  }

  .disabled-reason {
    padding: 0.25rem;
  }
}