main.scss

@charset "UTF-8";
/*
################
               Bootstrap variables to change
################
*/
// COLORS
$orange: #ff661a;
$vert: #00B794;
$bleu: #00668E;
$yellow: #ffba4a;
$text-gray: #4D5755;
$text-gray-light: #AAAAAA;
$text-black: #4C4C4C;
$bg-colour: #F3F5F6;
$body-bg: $bg-colour;
$primary: $vert;
$info: $bleu;
$primary_rgb: rgb(0, 183, 148);
$adopted: $vert;
$abstention: #FFBA49;
$rejected: #C5283D;
$fcb-color: #4267B2;
$twitter-color: #1DA1F2;
$linkedin-color: #2867B2;
$whatsapp-color: #128C7E;

// BREADCRUMB
$breadcrumb-divider: quote(">");
$breadcrumb-border-radius: 6px;
$breadcrumb-bg: transparent;
$breadcrumb-active-color: $text-gray;
// CARD
$card-border-radius: 5px;
$card-border-color: transparent;
$card-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.08);
$card-box-shadow-hover: 5px 3px 11px rgba(0, 0, 0, 0.18);
// FONT
$font-family-sans-serif: "Open Sans";
$font-weight-bold: 800;
$h1-font-size:                2em;
$h2-font-size:                1.8em;
$h3-font-size:                1.6em;
$h4-font-size:                1.4em;
$h5-font-size:                1.2em;
$h6-font-size:                1em;
$h7-font-size:                0.85em;
// LINKS
$link-datan-color: $bleu;
//NAVBAR
$navbar-padding-y: 15px;
$navbar-padding-x: 15px;
// CAROUSEL
$carousel-caption-width: 100%;
// BUTTONS
$btn-font-weight: 800;

@import "node_modules/bootstrap/scss/bootstrap";

/*
################
               HTML
################
*/
html {
  overflow-x: hidden;
}

/*
################
               Sticky Top
################
*/
.sticky-top {
  @supports (position: sticky) or (position: -webkit-sticky) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}
/*
################
               LINKS
################
*/
a:not(.btn), .url_obf:not(.btn, .card) {
  color: $link-datan-color;
  text-decoration: underline;
  &:hover{
    color: $text-black;
    text-decoration: none;
  }
  &.no-decoration{
    color: $black;
    text-decoration: none;
  }
  &.underline{
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
  &.underline-blue {
    text-decoration: none;
    &:hover{
      text-decoration: underline;
      color: $link-datan-color;
    }
  }
}
.url_obf, .cursor-pointer{
  cursor: pointer;
}
/*
################
               ADD FLEX CLASS
################
*/
.flex-even{
  flex: 1;
}
/*
################
               Margin management
################
*/
.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 1rem;
}
@include media-breakpoint-up(lg) {
  .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
      margin-top: 0;
  }
}
@include media-breakpoint-up(md) {
  .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
      margin-top: 0;
  }
}
@include media-breakpoint-up(sm) {
  .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
      margin-top: 0;
  }
}
/*
################
               Cookies (tarte au citron)
################
*/
body:not(.pg-mentions) #tarteaucitronIcon {
  display: none !important;
}
/*
################
               Responsive font size
################
*/
@include media-breakpoint-up(sm) {
  // Small devices (landscape phones, 576px and up)
  body{
    font-size: 0.95rem;
  }
}
@include media-breakpoint-up(md) {
  // Medium devices (tablets, 768px and up)
  body {
    font-size: 0.95rem;
  }
}
@include media-breakpoint-up(lg) {
  // Large devices (desktops, 992px and up)
  body {
    font-size: 0.95rem;
  }
}
@include media-breakpoint-up(xl) {
  // Extra large devices (large desktops, 1200px and up)
  body {
    font-size: 0.95rem;
  }
}
/*
################
                PATTERN BACKGROUND
################
*/
#pattern_background{
  background-color: $body-bg;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300B794' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
/*
################
                CHECK ELEMENTS (HN)
################
*/
.test-border{
  border: 1px solid red;
}
/*
################
               GRAPHS ==> BAR (bar-container)
################
*/
.tooltipHelp{
  @include hover(){
    cursor: help;
  }
}
.tooltipDashed{
  border-bottom: 1px dashed;
}
.bar-container{
  &.stats{
    padding: 3rem 0 1.5rem 0;
    background-color: #E8E8E8;
    margin-left: -20px;
    margin-right: -20px;
    .bars{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .chart{
      width: auto;
      height: 150px;
      .chart-grid{
        height: 150px;
        left: 0;
        right: 0;
        position: absolute;
        z-index: 1;
        #ticks {
          width: 100%;
          display: block;
          position: relative;
          height: 100%;
          font-size: 11px;
          font-weight: 600;
          color: $text-black;
        }
        #ticks .tick {
          width: 100%;
          position: relative;
          border-top: 1px solid $text-black;
        }
        #ticks .tick p {
          position: absolute;
          left: -4.5em;
          top: -0.8em;
          margin: 0 0 0 0.5em;
        }
      }
      .bar-chart{
        z-index: 10;
        position: relative;
        height: 150px;
        .bars{
          background-color: $primary;
          width: 100%;
          .score{
            font-weight: 800;
          }
          &.white{
            background-color: #D3D3D3;
            color: $text-black;
          }
        }
      }
    }
  }
  &.history{
     background-color: #E8E8E8;
  }
  &.election{
    flex-grow: 1;
    .title{
      font-size: $h6-font-size;
      color: $text-black;
      font-weight: 800;
    }
    .legend-element{
      font-size: $h7-font-size;
      font-weight: 600;
    }
    .bars{
      position: relative;
      color: $text-black;
      .score{
        position: absolute;
        top: -30px;
        right: 0px;
        left: 0px
      }
    }
  }
  &.stats-horizontal{
    padding: 1rem;
    background-color: #E8E8E8;
    .row-chart{
      min-height: 35px;
    }
    .bars{
      height: 25px;
      background-color: $primary;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .score{
        font-weight: 800;
      }
      &.white{
        background-color: #D3D3D3;
        color: $text-black;
      }
    }
  }
}
.legend-element{
  width: 100%;
}
/*
################
               A CLASSER
################
*/
.dissolution-banner{
  background-color: $rejected;
  transition: 0.3s;
  p{
    color: $white !important;
  }
  @include hover-focus(){
    background-color: $bg-colour;
    p{
      color: $black !important;
    }
  } 
}
.quoted{
  padding-left: 1em;
  padding-top: 1em;
}
.quoted:before{
  content: open-quote;
  font-weight: bold;
  font-size: 36px;
  line-height: 1px;
  color: $primary;
  position: relative;
  top: 0.1em;
  left: -0.1em;
}
.quoted:after{
  content: close-quote;
  font-weight: bold;
  font-size: 36px;
  line-height: 1px;
  color: $primary;
  position: relative;
  bottom: -0.2em;
  right: -0.1em;
}
.modalExplication{
  .modal-content{
    border: none;
  }
  .modal-header{
    background-color: #F0F0F0;
  }
  .modal-title{
    font-weight: bold;
    font-size: $h5-font-size;
    color: $text-black;
  }
}
.quizBanner {
  background-color: $vert;
  text-decoration: none !important;
  span {
    font-size: $h5-font-size;
    color: #fff;
  }
  .text {
    font-weight: 400;
  }
  .quizz {
    font-weight: 800;
  }
  @include hover-focus(){
    span {
      text-decoration: underline;
    }
  }
}
.don{
  height: 30px;
  background-color: $bleu;
  transition: 0.3s;
  &:hover{
    background-color: $bg-colour;
    span{
      color: $bleu;
    }
  }
  span{
    color: #fff;
    font-size: 1.1em;
    font-weight: 800;
  }
}
body.modal-open {
    overflow: visible;
}
#filterBanner{
  background-color: $primary;
  opacity: 0;
  visibility: hidden;
  z-index: 900;
  transition: opacity .5s, visibility .5s;
  &.d-flex{
    opacity: 1;
    visibility: visible;
  }
  svg{
    color: #fff;
    width: 25px;
    height: auto;
  }
}
.badges-filter {
  .badge {
    padding: 0.375rem 0.75rem;
    border-radius: 9px;
    font-weight: 600;
    display: inline-block;
    margin: 0 0 8px 3px;
    font-size: $h7-font-size;
  }
  .not-selected{
    background-color: rgba(115, 115, 115, 0.1);
    border: 1px solid rgba(115, 115, 115, 0.9);
    color: rgba(115, 115, 115, 1);
  }
  .is-selected{
    background-color: rgba(0, 183, 148, 0.1);
    border: 1px solid rgba(0, 183, 148, 0.9);
    color: rgba(0, 183, 148, 1);
  }
  .btn{
    font-size: $h7-font-size;
    margin: 0 0 8px 3px;
  }
  .title{
    font-weight: 800;
    color: $text-gray;
  }
}
.follow-us{
  background-color: $bleu;
  .btn{
    max-width: 200px;
  }
  .title{
    font-size: $h1-font-size;
    color: #fff;
    font-weight: 800;
  }
  .subtitle{
    font-size: $h5-font-size;
    color: #fff;
    font-weight: 800;
  }
}
.popover_focus{
  cursor: pointer;
}
.badge{
  padding: 0.4em 0.6em;
  color: #fff;
  &.badge-adopté, &.badge-pour{
    background-color: $adopted;
  }
  &.badge-rejeté, &.badge-contre{
    background-color: $rejected;
  }
  &.badge-abstention{
    background-color: $abstention;
  }
}
.sort-pour, .sort-adopté, .sort-loyal{
  color: $adopted;
}
.sort-contre, .sort-rejeté, .sort-rebelle{
  color: $rejected;
}
.sort-abstention{
  color: $abstention;
}
.sort-bg-pour{
  background-color: $adopted;
}
.sort-bg-contre{
  background-color: $rejected;
}
.sort-bg-abstention{
  background-color: $abstention;
}
.pagination{
  a{
    color: $primary;
    text-decoration:none;
  }
}
.liseret-groupe{
  height: 10px;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.08);
  background-color: #fff;
}
@include media-breakpoint-up(lg){
  .sticky-offset{
    top: 80px;
  }
}
@include media-breakpoint-down(md) {
  .sticky-top-lg {
    position: relative !important;
  }
}
.anchor{
  padding-top: 100px;
  margin-top: -100px;
}
/* Bloc others */
.bloc-others-container{
  background-color: #ffffff;
  padding: 3rem 0 3rem 0;
  .bloc-others{
    &>.row:not(:first-child){
      margin-top: 3rem;
    }
    h2{
      font-size: $h3-font-size;
      font-weight: 600;
    }
  }
}
.read-more-container{
  max-height: 200px;
  position: relative;
  overflow: hidden;
  .read-more-button{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    margin: 0; padding: 30px 0;
    background-image: linear-gradient(to bottom, transparent, #fff);
  }
}
.mobileShow {display: none;}
  /* Smartphone Portrait and Landscape */
@media only screen and (max-width: 767.98px) {
  .mobileShow {display: block}
}
.chart-election {
  display: flex;
  position: relative;
  border: none;
  .majority{
    background-color: $adopted;
    padding: 0.8rem 0;
    span{
      color: #ffffff;
      font-size: 1.25em;
      font-weight: 800;
      margin-left: 2rem;
    }
  }
  .minority{
    padding: 0.8rem 0;
    background-color: #E8E8E8;
  }
  .line{
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 50%;
    height: 100%;
  }
}
/*
################
              Social media and social-share
################
*/
.fcb-bg{
  background-color: $fcb-color;
  color: #fff;
}
.twitter-bg{
  background-color: $twitter-color;
  color: #fff;
}
.linkedin-bg{
  background-color: $linkedin-color;
  color: #fff;
}
.whatsapp-bg{
  background-color: $whatsapp-color;
  color: #fff;
}
.social-share-bloc{
  button{
    padding: 0.2rem 0.6rem;
    margin: 0.2rem;
    transition: 0.3s;
    img{
      height: 20px;
      width: auto;
    }
    span{
      font-size: $h7-font-size;
      margin-left: 0.25rem;
    }
    &:hover{
      color: #fff;
      box-shadow: $card-box-shadow-hover;
    }
  }
}
/*
################
               Carousel  & card-vote
################
*/
.see-all-votes{
  background-color: $primary;
  color: #fff;
  font-weight: 800;
  transition: 0.3s;
  &:hover{
    border: 1px solid $primary;
    background-color: #fff;
    color: $primary;
  }
}
.see-all-carousel{
  background-color: $primary;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  transition: 0.3s;
  &:hover{
    border: 1px solid $primary;
    background-color: #fff;
    color: $primary;
  }
}
.carousel-container{
  .carousel-buttons{
    margin-top: 1rem;
  }
  button{
    &.prev, &.prev-all, &.next, &.next-all{
      border-radius: 12px;
      background-color: #E8E8E8;
      width: 50px;
      transition: 0.3s;
      &:hover{
        border: 1px solid $text-black;
      }
    }
  }
}
/* Bloc carousel */
.bloc-carousel-votes{
  .carousel-cards{
    margin-top: 1.5rem;
    margin-bottom: 3rem;
  }
}
/* Card-vote */
.bloc-carousel-votes, .bloc-carousel-votes-flickity {
  .flickity-viewport{
    @include media-breakpoint-up(xs) {
      height: 270px !important;
    }
    @include media-breakpoint-up(sm) {
      height: 270px !important;
    }
    @include media-breakpoint-up(md) {
      height: 260px !important;
    }
    @include media-breakpoint-up(lg) {
      height: 260px !important;
    }
  }
}
/* Card vote */
.card-vote {
  width: 265px;
  height: 250px !important;
  @include media-breakpoint-up(md) {
    width: 270px;
  }
  box-shadow: $card-box-shadow;
  margin: 0 0.75em 0em 0.75em;
  border: none;
  display: flex;
  transition: 0.3s;
  .sort{
    color: $white;
    font-weight: bold;
    border-top-right-radius: $card-border-radius;
    border-bottom-left-radius: $card-border-radius;
    &.adopté{
      background-color: $adopted;
    }
    &.rejeté{
      background-color: $rejected;
    }
  }
  .thumb{
    position: absolute;
    right: 0px;
    border-top-right-radius: $card-border-radius;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 7px;
    box-shadow: inset 3px 1px 4px rgba(0, 0, 0, 0.25);
    span{
      color: #ffffff;
      font-weight: 800;
      font-size: 1.15em;
    }
    &.pour, &.adopté{
      background-color: $adopted;
      padding: 5px 18px 5px 18px;
    }
    &.contre, &.rejeté{
      background-color: $rejected;
      padding: 5px 18px 5px 18px;
    }
    &.abstention{
      background-color: $abstention;
      padding: 5px 8px 5px 8px;
    }
    &.absent{
      background-color: $text-gray-light;
      padding: 5px 8px 5px 8px;
    }
  }
  .card-header{
    background-color: transparent;
    .date{
      color: $text-gray-light;
      font-weight: 400;
      font-size: 1em;
    }
  }
  .card-body{
    padding: 0 1.25rem 0 1.25rem;
    .title{
      font-weight: 600;
      font-size: $h6-font-size;
    }
    .reading{
      color: $text-gray-light;
      font-weight: 400;
      font-size: 0.9em;
    }
  }
  .card-footer{
    background-color: transparent;
    padding: 0 1.25rem 0.75rem 1.25rem;
    .field{
      font-weight: bold;
      font-size: 0.9em;
    }
  }
  .explication{
    background-color: $primary;
    border-bottom-left-radius: $card-border-radius;
    border-bottom-right-radius: $card-border-radius;
    border: 1px solid transparent;
    transition: .3s ease all;
    span {
      font-weight: bold;
      color: #fff;
      font-size: $h5-font-size;
      position: relative;
      z-index: 2;
    }
    .icon{
      color: #fff;
    }
    &:focus, &:active{
      outline: none;
      box-shadow: none;
    }
    &:hover{
      background-color: #fff;
      border: 1px solid $primary;
      span{
        color: $primary;
      }
      .icon{
        color: $primary;
      }
    }
  }
  // HOVER //
  &:hover{
    box-shadow: $card-box-shadow-hover;
  }
}
/* Card see-all */
.card-vote{
  &.see-all{
    background-color: $primary;
    a{
      color: #fff;
      font-weight: 800;
      font-size: $h4-font-size;
    }
  }
}
/*
################
               Search Element
################
*/
.search-element{
  //padding-top: 70px;
  @include media-breakpoint-up(lg){
    padding-top: 70px;
  }
  // FILTER
  .filters{
    width: 100%;
    .surtitre{
      color: $text-gray;
      font-weight: 800;
      font-size: $h5-font-size;
    }
    .radio-label {
      cursor: pointer;
      display: inline-block;
      font-weight: 600;
      margin: 0 auto 5px;
      padding: 0px 5px 0px 65px;
      position: relative;
      transition: .3s ease all;
      width: 100%;
      &:hover{
        color: rgba($primary_rgb, 0.75);
        &:before{
          background: rgba($primary_rgb, 0.75);
        }
      }
      &:before{
        background: #eee;
        border-radius: 50%;
        content:'';
        height: 22px;
        width: 22px;
        left: 20px;
        position: absolute;
        //top: calc(50% - 15px);
        transition: .3s ease background-color;
      }
    }
    span {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
    .radio-btn{
      position: absolute;
      visibility: hidden;

    }
    .radio-btn:checked + .radio-label {
      //background: rgba($primary_rgb, 0.5);
      //border-color: #4A90E2;
      font-weight: bold;
      color: $primary;
    }
    .radio-btn:checked + .radio-label:before {
        background-color: $primary;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
    }
  }
}
input#quicksearch{
  border: 1px solid #d4d4d4;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}
input#quicksearch[type=text]{
  width: 100%;
  color: $text-gray-light;
  text-align: left;
  &:focus{
    outline: none;
  }
  &::placeholder{
    color: $text-gray-light;
  }
}
/*
################
               Button UP
################
*/
#btnup {
  display: inline-block;
  background-color: $primary;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 100px;
  right: 25px;
  transition: background-color .3s,
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  &.show{
    opacity: 1;
    visibility: visible;
  }
  svg{
    width: 2.5em;
    height: 2.5em;
    color: $white;
  }
  &:hover{
    cursor: pointer;
    background-color: #333;
  }
  &:active{
    background-color: #555;
  }
}

/*
################
               Cards
################
*/
/* 1. Card depute and groups */
.card-depute, .card-groupe{
  margin-top: 60px;
}
.card-depute, .card-groupe, .card-election{
  border:0;
  text-align: center;
  width: 17em;
  margin-left:auto;
  margin-right: auto;
  box-shadow: $card-box-shadow;
  min-height: 290px;
  .liseret{
    height: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .card-title{
    margin-top: 10px;
    font-size: $h4-font-size;
    font-weight: 800;
  }
  .card-body{
    padding: .9375rem 1.875rem;
    min-height: 130px;
  }
  .card-footer{
    min-height: 68px;
  }
  a {
    color: $text-black;
    font-weight: 800;
  }
  .badge-stats{
    font-size: 0.95em;
    font-weight: 400;
    background-color: $text-gray-light;
  }
  .badge-center{
    font-size: 1em;
  }
  .btn-cat{
    color: #fff;
    padding: 10px;
  }
  .img-group-cat{
    img {
      border-radius: 10px;
    }
  }
  .libelle{
    font-weight: 600;
  }
}
/* card-avatar */
.card-avatar{
  width: 130px;
  max-width: 130px;
  max-height: 130px;
  margin: -50px auto 0;
  overflow: hidden;
  box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
  img{
    width: 100%;
    height: auto;
  }
}
.card-groupe{
  .card-avatar{
    border-radius: 10%;
    padding: 10px;
    background-color: #ffffff;
    img{
      margin-top: -5px;
    }
  }
}
.card-avatar-depute-circle, .card-avatar-depute-square{
  border-radius: 50%;
  padding: 0;
  background: linear-gradient(#99BDDA, white);
}
.card-avatar-depute-circle{
  img{
    width: 80%;
  }
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .card-depute, .card-groupe{
    transition: box-shadow .3s;
    &:hover{
      box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
    }
  }
}
/* 4. Card statistique */
.card-statistiques{
  i {
    color: $text-gray-light;
  }
  .icon{
    svg{
      width: 50px;
      height: auto;
    }
    path{
      fill: $primary;
    }
    circle{
      fill: $primary;
    }
    path#depute{
      fill: $orange;
    }
    circle#depute{
      fill: $orange;
    }
  }
  .legend{
    font-size: $h7-font-size;
    .legendBox{
      height: 10px;
      width: 10px;
    }
  }
}
// Medium devices (tablets, 768px and up)
@include media-breakpoint-up(lg) {
  .card-statistiques{
    .texte{
      border-left: 1.4px solid $primary;
    }
  }
}
/* 5. Card-vote-infos */
.card-vote-infos {
  box-shadow: $card-box-shadow;
  border: 0;
  border-radius: 10px;
  .num{
    color: $text-gray;
    font-weight: 600;
    font-size: $h5-font-size;
  }
  .title{
    font-size: 2em;
    color: $text-black;
    font-weight: 800;
  }
  .results {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    color: #fff;
    span{
      display: block;
    }
    div {
      padding: 0.50rem 0.75rem;
      width: 33.33%;
    }
    div:first-child{
      border-bottom-left-radius: 10px;
    }
    div:last-child{
      border-bottom-right-radius: 10px;
    }
    .legend{
      font-weight: 600;
    }
    .number{
      font-weight: 800;
      font-size: $h4-font-size;
    }
  }
}
/* 6. card-profile (MPs and groups) */
.card-profile {
  border: none;
  top: 0px;
  border-radius: 10px;
  box-shadow: $card-box-shadow;
  .title{
    color: $text-gray;
    font-size: $h1-font-size*1.1;
    line-height: 1.2;
    font-weight: 800;
  }
  .mandats{
    color: #fff;
    font-weight: 800;
    font-size: $h4-font-size;
    padding: 0.35rem 0 0.35rem 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    &.active{
      background-color: $primary;
    }
    &.inactive{
      background-color: $danger;
    }
  }
  .card-body{
    padding: 1.1rem 1.8rem;
  }
  .bloc-bref{
    ul{
      padding-inline-start: 0;
      margin-bottom: 0;
      display:inline-block;
    }
    li{
      list-style: none;
      display: flex;
      margin-bottom: 5px;
      .label{
        min-width: 30px;
      }
      .value{
        font-weight: 600;
      }
    }
    svg{
      color: $primary;
      width: 1.2em;
      height: auto;
    }
  }
  .link-group{
    font-size: $h5-font-size;
    font-weight: 600;
  }
}
.depute-img-circle{
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(#99BDDA, white);
  text-align: center;
  img{
    width: 80%;
    height: auto;
  }
  &.depute-img-circle-explication{
    width: 50px;
    height: 50px;
  }
}
.depute-img-square{
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(#99BDDA, white);
  text-align: center;
  img{
    width: 100%;
    height: auto;
  }
  &.depute-img-circle-explication{
    width: 50px;
    height: 50px;
  }
}
.card-profile {
  &.groupe{
    .bloc-bref{
      .label{
        width: 110px;
      }
    }
    picture {
      border-radius: 10px;
      overflow: hidden;
    }
  }
}
/* Card explication on homepage */
.card-explication-home{
  border: none;
  width: 100%;
  .title{
    font-weight: bold;
    font-size: $h5-font-size;
    color: $text-black;
  }
  .card-footer{
    background-color: transparent;
  }
}
/*
################
               TABLES
################
*/
#table-vote-all, #table-deputes-groupes-votes-all {
  background-color: $white;
  border-radius: 10px;
  th{
    color: $white;
    background-color: $primary;
    border-top: none;
    &:first-child{
      border-top-left-radius: 10px;
    }
    &:last-child{
      border-top-right-radius: 10px;
    }
  }
  tr{
    &:hover{
      background-color: $primary;
      cursor: pointer;
      a, td{
        color: $white!important;
      }
    }
  }
  td{
    .vote-datan-bold{
      font-weight: 600;
    }
    .vote-datan-italic{
      font-style: italic;
    }
    a{
      color: $text-gray;
      &:hover{
        text-decoration: none;
      }
    }
    &.sort{
      font-weight: 600;
    }
  }
}
#table-vote-individual-groupes, #table-vote-individual-deputes{
  .name, .vote{
    font-weight: 600;
  }
}
/*
################
               Navbar
################
*/
body{
  //padding-top: 100px; No longer used.
}
#navbar-logged-in {
  background-color: $bg-colour;
  border-bottom: 1px solid $text-gray-light;
  padding-top: 0;
  padding-bottom: 0;
}
#navbar-datan{
  background-color: $bg-colour;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .1);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 9998!important;
  .navbar-brand{

    .navbar-brand-img{
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
      width: 9em;
      height: auto;
    }
    .shrink{
      width: 7em;
      height: auto;
    }
  }
  .nav-link{
    color: $black;
    font-size: 1.3em;
    font-weight: 600;
    &:hover{
      color: $primary;
      text-decoration: none;
    }
  }
  .nav-item{
    text-align: center;
  }
}
.navbar-shrink{
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/*
################
               BLOCS IMAGES
################
*/
.bloc-img{
  h1{
    color: $white;
    font-weight: bold;
    font-size: 2.3em;
  }
}
.bloc-hemycicle-home{
  @include media-breakpoint-only(xs) {
    background-image: linear-gradient(130deg, rgba($primary_rgb, 0.7) 0.65%, rgba(36, 107, 150, 0.7) 112%);
  }
  @include media-breakpoint-up(sm) {
    &.async_home{
      background-image: linear-gradient(130deg, rgba($primary_rgb, 0.7) 0.65%, rgba(36, 107, 150, 0.7) 112%), url('https://datan.fr/assets/imgs/cover/hemicycle-from-back-min.jpg');
    }
    background-size: cover;
    min-height: 27rem;
  }
  border-radius: 0;
}
.bloc-img-deputes{
  &.async_background{
    @include media-breakpoint-only(xs){
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://datan.fr/assets/imgs/cover/hemicycle-front-375.jpg');
      background-size: cover;
      background-position-y: 50%;
    }
    @include media-breakpoint-between(sm, md){
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://datan.fr/assets/imgs/cover/hemicycle-front-768.jpg');
      background-size: cover;
      background-position-y: 50%;
    }
    @include media-breakpoint-up(lg){
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('https://datan.fr/assets/imgs/cover/hemicycle-front.jpg');
      background-size: cover;
      background-position-y: 50%;
    }
  }
  &.pg-parties-individual{
    @include media-breakpoint-down(sm) {
      //height: auto;
      //padding-bottom: 55px;
    }
  }
  background-position-y: 50%;
  background-size: cover;
  min-height: 14em;
  border-radius: 0;
  padding-top: 1rem;
}
/*
################
               BREADCRUMB
################
*/
// breadcrumb
.breadcrumb {
  a {
    &:hover{
      color: $link-datan-color;
    }
  }
}
.container-breadcrumb{
  background-color: $white;
  box-shadow: 0 2px 10px 4px rgba(0,0,0,.1);
}
/*
################
               PAGE : OUTILS
################
*/
.pg-outils{
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
}

.pg-outils-labo{
  .containerHemicycle{
    width: 100%;
    max-height: 300px
  }
  .switch_groups, .custom-control-label{
    cursor: pointer;
  }
  #textSeats{
    font-weight: 800;
    background-color: $primary;
    color: $white;
    padding: 0.15rem 0.50rem;
  }
}


/*
################
               PAGE : SEARCH (pg-search)
################
*/
.pg-search{
  h1{
    color: #ffffff;
    font-weight: 800;
  }
  h2{
    color: $text-black;
    font-size: $h4-font-size;
    font-weight: 800;
  }
  h3{
    color: $bleu;
    font-size: $h4-font-size;
    font-weight: 800;
    span{
      font-size: .85rem;
      font-style: italic;
      color: $text-gray-light;
      font-weight: 400;
    }
  }
  .results {
    font-size: $h6-font-size;
    font-weight: 800;
    color: $text-gray-light;
  }
  .card_results{
    border: none;
    box-shadow: $card-box-shadow;
    a {
      display: flex;
      padding: 0.6rem 1rem;
      &:not(:last-child){
        border-bottom: 1px solid #ccc;
      }
      .text{
        flex: 1 1 auto;
      }
      .icon{
        width: 40px;
        background-image: url('../../assets/imgs/icons/bi-chevron-right.svg');
        background-position: center;
        background-repeat: no-repeat;
      }
      .title{
        color: $text-black;
        font-weight: 800;
      }
      .description{
        display: block;
        font-style: italic;
        color: $text-gray-light;
      }
      &:hover{
        background-color: #F2F2F2;
      }
    }
    .progress{
      width: 200px;
    }
  }
}
/*
################
               PAGE : PAGE (pg-page)
################
*/
.pg-page{
  h2{
    font-weight: 800;
    color: $primary;
    font-size: $h4-font-size;
  }
  .card-member{
    border-radius: 10px;
    box-shadow: $card-box-shadow;
    border: 0;
    margin-bottom: 1.5rem;
    min-height: 150px;
    .card-body{
      padding: 0.7rem 0.95rem;
    }
    .left{
      flex: 0 0 100px;
    }
    .img-profile{
      overflow: hidden;
      position: relative;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
      flex: 0 0 100px;
      height: 100px;
      img{
        filter: grayscale(100%);
      }
      .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($primary_rgb, 0.15);
      }
    }
    .card-img-top{
      border-top-right-radius: 0;
    }
    .president{
      display: inline-block;
    }
    .social-media{
      flex: 1 1 auto;
      margin: 0 7px;
      a{
        color: transparent;
      }
      img{
        width: 30px;
        height: auto;
      }
    }
  }
  .card-team{
    border-radius: 10px;
    box-shadow: $card-box-shadow;
    border: 0;
    .img-profile{
      overflow: hidden;
      position: relative;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      img{
        filter: grayscale(100%);
      }
      .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba($primary_rgb, 0.15);
      }
    }
    .social-media{
      width: 100%;
      a{
        color: transparent;
        padding: 0 5px;
      }
      img{
        width: 30px;
        height: auto;
      }
    }
  }
}

/*
################
               PAGES : LOGIN
################
*/
.login_links{
  a{
    width: 50%;
    text-align: center;
    color: $text-gray;
    font-weight: 600;
    &:hover{
      text-decoration: none;
    }
    &.active{
      background-color: #EDEDED;
      border-bottom: 2px solid $primary;
    }
    &.inactive{
      border-bottom: 0.05px solid #CFCFCF;
    }
    &:hover{
      background-color: #EDEDED;
    }
  }
}
.login_credits{
  border-top: 1px solid #CFCFCF;
  p{
    font-size: $h7-font-size;
  }
}
.login_form{
  .form-group{
    width: 100%;
  }
}
.login_img{
  .img-container{
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Palais_Bourbon_Assembl%C3%A9e_nationale.JPG/1200px-Palais_Bourbon_Assembl%C3%A9e_nationale.JPG');
    background-size: cover;
    border-radius: 0;
    height: 100%;
  }
}
/*
################
               PAGE : HOME (pg-home)
################
*/
.pg-home{
  /* HN du haut */
  h1{
    color: $white;
    font-weight: 600;
    font-size: 2.4em;
    span {
      font-weight: 800;
    }
  }
  h2 {
    font-weight: 800;
    font-size: 2.2em;
    color: $text-black;
  }
  /* Bloc search-deputes */
  .bloc-search-deputes{
    .card{
      box-shadow: $card-box-shadow;
      border-radius: 8px;
    }
    .placeholder{
      color: $bleu;
      @include media-breakpoint-up(md) {
        font-size: $h2-font-size;
      }
      @include media-breakpoint-down(sm) {
        font-size: $h4-font-size;
      }
      font-weight: 800;
      .box{
        margin-right: 5px;
        width: 100%;
      }
      .slider{
        position: relative;
        width: 100%;
      }
    }
  }
  /* Bloc constat */
  .bloc-constats{
    h3{
      color: $primary;
      text-align: center;
      font-size: $h4-font-size;
      font-weight: 800;
    }
    p{
      text-align: center;
    }
    span {
      font-weight: 600;
    }
  }
  .bloc-quiz{
    background-color: $bleu;
    color: #fff !important;
    h2 {
      color: #ffffff;
    }
    h3 {
      font-weight: 800;
      font-size: $h4-font-size;
      color: #ffffff;
    }
  }
  .bloc-hasard{
    background: linear-gradient(136.67deg, #246B96 17.99%, #00B794 86.12%);
    h2 {
      color: $white;
      font-size: $h3-font-size;
      font-weight: 800;
      text-align: center;
    }
  }
  .bloc-election{
    h3{
      color: $text-black;
      text-align: center;
      font-weight: 800;
      font-size: $h4-font-size;
      color: $primary;
    }
  }
  .bloc-statistiques{
    h3{
      font-size: $h3-font-size;
      text-align: center;
      color: $text-black;
      font-weight: 600;
    }
    span{
      &.plus{
        font-weight: 800;
        color: $adopted;
      }
      &.minus{
        font-weight: 800;
        color: $rejected;
      }
    }
  }
  /* bloc-support */
  .bloc-support{
    background-color: $bleu;
  }
  /* BLOC-PIE */
  .bloc-pie{
    .tableGroupes{
      font-size: $h5-font-size;
      .tableHover{
        color: $rejected;
      }
      td{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.2rem;
        padding-top: 0.2rem;
      }
      .square{
        height: 12px;
        width: 12px;
      }
      .effectif{
        font-weight: 600;
      }
    }
  }
  .bloc-posts{
    img{
      width: 100%;
      height: auto;
    }
    .category{
      color: $primary;
      font-size: $h7-font-size;
    }
    .date{
      color: $text-gray-light;
      font-size: $h7-font-size;
    }
  }
  .bloc-map{
    .map_france{
      svg{
        path{
          fill: $text-gray-light;
          cursor: pointer;
          &:hover{
            fill: $primary;
          }
        }
      }
    }
    .map_outre_mer{
      svg{
        g{
          fill: $text-gray-light;
          cursor: pointer;
          &:hover{
            path{
              fill: $primary;
            }
          }
        }
      }
    }
  }
}


// Search bloc on homepage
.search-bloc{
  border: 1px solid #ddd;
  border-radius: 8px;
  form{
    width: 100%;
    margin: 0;
    > div{
      width: 100%;
    }
  }
  label{
    font-weight: 800;
    font-size: 16px;
    color: $text-black;
    margin-bottom: 0;
  }
  .search{
    position: relative;
    display: flex;
  }
  input{
    background-color: transparent;
    border: none;
    width: 100%;
    color: $text-black;
    font-weight: 600;
    padding: 0.75rem 0;
    outline: none;
    &:focus{
      outline: none;
    }
    &::placeholder{
      color: $text-gray-light;
    }
  }
  .search_icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
  }
  .search-results{
    position: absolute;
    z-index: 99;
    left: -1px;
    right: -1px;
    top: 100%;
    border: 1px solid #d4d4d4;
    border-top: none;
    background-color: #ffffff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    a:first-child{
      margin-top: 0.75rem;
    }
    a {
      display: block;
      margin-bottom: 0.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      cursor: pointer;
      &:before {
        vertical-align: middle;
        margin-right: 8px;
      }
      &:hover, &.active{
        background-color: #e9e9e9;
      }
      .description{
        font-size: .85rem;
        font-style: italic;
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .depute:before{
      content: url("../imgs/icons/person-fill.svg");
    }
    .ville:before{
      content: url("../imgs/icons/house-door-fill.svg");
    }
    .dpt:before{
      content: url("../imgs/icons/map_france.svg");
    }
    .groupe:before{
      content: url("../imgs/icons/people-fill.svg");
    }
    .blog:before, .vote:before{
      content: url("../imgs/icons/file-text-fill.svg");
    }
  }
}

.hemicycle{
  position: relative;
  @include media-breakpoint-down(sm) {
    height: 200px;
  }
  .n-hemicycle{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 20%;
    span{
      margin-bottom: 0;
      font-weight: 800;
      color: $bleu;
      @include media-breakpoint-up(md) {
        font-size: $h1-font-size;
      }
      @include media-breakpoint-down(sm) {
        font-size: $h5-font-size;
      }
    }
  }
}

/*
################
               PAGE : DEPARTEMENT (pg-departement)
################
*/
.pg-departement{
  h2{
    text-align: center;
    font-size: 2em;
    color: $text-black;
    font-weight: 800;
  }
}
/*
################
               PAGE : LISTE DEPARTEMENTS (pg-departement-liste)
################
*/
/*
################
               PAGE : COMMUNE (pg-commune)
################
*/
.pg-commune {
  h1, h2{
    font-size: $h1-font-size;
    font-weight: 800;
    color: $text-black;
  }
  h3{
    font-size: 1.2em;
    font-weight: 800;
    color: $text-black;
  }
  &.bloc-contact{
    background-color: $bleu;
  }
  .title{
    color: #fff;
  }
  .city{
    font-size: $h1-font-size*1.2;
    font-weight: 800;
  }
  .department{
    font-size: $h5-font-size;
  }
  .bloc-infos{
    color: #fff;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    h2{
      font-weight: 800;
      font-size: $h5-font-size;
      color: $primary;
    }
  }
  .bloc-elections{
    .card{
      border: 0;
      box-shadow: $card-box-shadow;
      width: 330px;
    }
    .card-footer{
      font-weight: 800;
      transition: .3s;
      color: $text-black;
      @include hover-focus(){
        background-color: $primary;
        color: #fff;
      }
    }
    .round{
      color: $text-gray;
    }
    .chart{
      margin-left: -20px;
      margin-right: -20px;
      .results{
        height: 150px;
        background-color: #E8E8E8;
        padding-left: 20px;
        padding-right: 20px;
        .bar{
          width: 100%;
          height: 100%;
          .element{
            background-color: $primary;
            width: 100%;
            max-width: 70px;
            .score{
              font-weight: 800;
              font-size: 1em;
              color: #fff;
            }
          }
        }
      }
      .names{
        padding: 20px 20px;
        @include media-breakpoint-up(md) {
          min-height: 80px;
        }
        .name{
          width: 100%;
          margin: 0 5px;
          p{
            font-weight: 600;
            color: $text-black;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  &.bloc-adjacentes{
    background-color: #536878;
    a {
      border-radius: 7px;
      height: 30px;
      color: white;
    }
  }
}
.mapouter{
  position:relative;
  text-align:right;
  height:100%;
  width:100%;
}
.gmap_canvas {
  overflow:hidden;
  background:none!important;
  height:100%;
  width:100%;
}
/*
################
               PAGE DEPUTES ALL (ACTIFS ET INACTIFS) (pg-depute-all)
################
*/
.pg-depute-all{
  // HN
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-black;
  }
  h3{
    font-weight: 800;
    color: $primary;
    font-size: $h5-font-size;
  }
  .bloc-titre{
    margin-top: 3rem;
  }
  .badges-groupes{
    .badge {
      padding: 7px 12px;
      border-radius: 10px;
      color: $white;
      font-weight: 600;
      display: inline-block;
      margin: 0 2px 3px 2px;
      span{
        font-weight: 700;
      }
    }
  }
}
/*
################
               PAGE DEPUTE ET GROUPE INDIVIDUAL (pg-depute-individual) & (pg-groupe-individual) & deputes/x/votes
################
*/
.pg-depute-individual, .pg-groupe-individual{
  /* HN */
  h1{
    color: $text-gray;
    font-size: $h1-font-size*1.1;
    font-weight: 800;
  }
  .title-center{
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-gray;
  }
  .bloc-statistiques, .bloc-votes, .bloc-bio, .bloc-election, .bloc-links, .bloc-chiffres, .bloc-key-votes, .bloc-mandats, .bloc-social {
    h3 {
      font-size: $h5-font-size;
      font-weight: 800;
      color: $text-gray;
    }
  }
  /* FIN HN */
  /* Bloc election feature */
  .card-election-feature{
    &.information-success{
      background-color: $bleu;
      color: #fff;
    }
    &.information-fail{
      background-color: $yellow;
      color: $text-black;
    }
    &.results-success{
      background-color: $primary;
      color: #fff;
    }
    &.results-fail{
      background-color: #FB9486;
      color: $text-black;
    }
    h2{
      font-weight: 800;
    }
  }
  /* Bloc election feature */
  .card-vote-feature{
    span{
      font-weight: 800;
    }
    &.pour{
      border: 2px solid $adopted;
      span{
        color: $adopted;
      }
    }
    &.contre{
      border: 2px solid $rejected;
      span{
        color: $rejected;
      }
    }
    &.abstention{
      border: 2px solid $abstention;
      span{
        color: $abstention;
      }
    }
    h2{
      font-weight: 800;
      font-size: $h3-font-size;
    }
  }
  /* Bloc biographie */
  .bloc-bio{
    max-width: 575px;
  }
  /* Bloc key-votes */
  .bloc-key-votes{
    .libelle{
      color: $primary;
      font-weight: 800;
      font-size: 1.2em;
    }
    .key-votes{
      .row:not(:first-child){
        margin-top: 1rem;
      }
    }
  }
  /* Bloc explication */
  .bloc-explication{
    .card-header{
      background-color: transparent;
    }
    .title{
      font-weight: 800;
      color: $text-black;
      font-size: $h5-font-size;
    }
    .date{
      font-weight: 400;
      color: $text-gray-light;
    }
  }
  /* Bloc election */
  .bloc-election{
    .card{
      border: none;
      overflow: hidden;
    }
    .subtitle{
      font-weight: 800;
      color: $text-gray-light;
    }
    .legend{
      span{
        color: $text-gray-light;
      }
    }
  }
  /* Bloc elections history */
  .bloc-elections-history{
    table{
      background-position: red;
      border-spacing: 0 1em;
      border-collapse:separate;
      tr{
        background-color: #fff;
        border-radius: $card-border-radius;
        box-shadow: $card-box-shadow;
      }
      td{
        border-top: 0;
      }
    }
  }
  /* Bloc chiffres */
  .bloc-chiffres{
    .stat{
      span{
        color: $primary;
        font-weight: 800;
        font-size: 3.2em;
      }
    }
    .explanation{
    }
  }
  /* Bloc proximité */
  .bloc-proximity{
    &.card{
      border: none;
    }
    h4{
      font-weight: 600;
      font-size: $h4-font-size;
    }
  }
  /* Bloc mandat */
  .bloc-mandats{
    .btn{
      height: 40px;
      width: 230px;
      background-color: $text-gray-light;
      color: #fff;
      margin: 0.5em 0;
      &:hover{
        background-color: #fff;
        border: 1px solid $text-gray-light;
        color: $text-black;
      }
    }
  }
  /* Bloc links */
  .bloc-links{
    a, .url_obf {
      min-height: 40px;
      width: 230px;
      margin: 0.5em 0;
      padding: 0.4em 0.7em 0.4em 0.7em;
      color: #ffffff;
      font-style: italic;
      i{
        margin-left: 0.7em;
      }
      &.btn-fcb{
        background-color: $fcb-color;
        svg{
          width: 10px;
          height: auto;
          path{
            fill: #fff;
          }
        }
        &:hover{
          background-color: #fff;
          border: 1px solid $fcb-color;
          span {
            color: $fcb-color;
          }
          svg path{
            fill: $fcb-color;
          }
        }
      }
      &.btn-twitter{
        background-color: $twitter-color;
        svg{
          width: 27px;
          height: auto;
          path{
            fill: #fff;
          }
        }
        &:hover{
          background-color: #fff;
          border: 1px solid $twitter-color;
          span{
            color: $twitter-color;
          }
          svg path{
            fill: $twitter-color;
          }
        }
      }
      &.btn-an, &.btn-website{
        background-color: $text-gray-light;
        &:hover{
          background-color: #fff;
          border: 1px solid $text-gray-light;
          color: $text-black;
        }
      }
    }
  }
}
/*
################
               PAGE GROUPES STATS
################
*/
.pg-groupe-stats{
  h1 {
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-gray;
  }
  h2{
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-gray;
  }
  .title{
    p{
      font-size: $h5-font-size;
      font-weight: 800;
      color: $text-gray-light;
    }
  }
  .card{
    border: none;
  }
  .card-stats{
    h3{
      color: black;
      font-weight: 600;
      font-size: $h4-font-size;
    }
  }
}
/*
################
               PAGE DEPUTE/GROUPES VOTES DATAN (pg-depute-votes) (decryptes and all)
################
*/
.pg-depute-votes, .pg-groupe-votes {
  h1 {
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-gray;
  }
  h2 {
    font-size: $h5-font-size;
    font-weight: 800;
    color: $text-gray;
  }
}
.pg-depute-votes-all{
  h2{
    font-size: $h4-font-size;
    font-weight: 800;
    color: $text-gray;
  }
}
.pg-groupe-individual{
  .bloc-votes-datan{
    h2{
      font-size: 1.9em;
      font-weight: 800;
      color: $text-gray;
    }
    h3{
      font-size: 1.7em;
      font-weight: 800;
      color: $primary;
    }
    .logo{
      svg{
        width: 50px;
        height: auto;
      }
    }
  }
}
.banner-depute-mobile, .banner-groupe-mobile{
  color: #fff;
  .title{
    font-weight: 800;
    font-size: 2.4em;
    line-height: 1.2;
  }
  .subtitle{
    margin-bottom: 0.5rem;
  }
}
/*
################
               PAGE GROUPE ALL (pg-groupe-all)
################
*/
.pg-groupe-all{
  // HN //
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: $h2-font-size;
    font-weight: 800;
    color: $text-black;
  }
  h3{
    font-weight: 800;
    color: $primary;
    font-size: $h5-font-size;
  }
  // END HN //
  .bloc-titre{
    margin-top: 3rem;
  }
}
/*
################
               PAGE PARTIES ALL (pg-parties-all)
################
*/
.pg-parties-all{
  // HN //
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    color: $text-black;
    font-size: $h2-font-size;
    font-weight: 600;
  }
  // END HN //
  .bloc-titre{
    margin-top: 4rem;
  }
}
/*
################
               PAGE PARTIES INDIVIDUAL (pg-parties-individual)
################
*/
.pg-parties-individual{
  // HN
  h1{
    color: #fff;
    font-weight: 800;
    font-size: 2.4em;
  }
  h2{
    font-size: 2em;
    font-weight: 800;
    color: $text-black;
  }
  .title-text{
    @include media-breakpoint-down(sm) {
      padding: 75px 0;
    }
    padding: 50px 0;
  }
  .subtitle{
    color: #fff;
    font-size: 1.2em;
  }
  .img-party{
    position: absolute;
    width: 130px;
    height: 130px;
    overflow: hidden;
    box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    border-radius: 10%;
    padding: 10px;
    background-color: #fff;
    @include media-breakpoint-down(xs) {
      top: -55px;
    }
    @include media-breakpoint-up(sm) {
      bottom: -50px;
    }
    img{
      width: 100%;
      height: auto;
    }
  }
  .first-row{
    @include media-breakpoint-down(xs){
      margin-top: 110px;
    }
    margin-top: 3rem;
  }
}
/*
################
               PAGE GROUPE MEMBRES (pg-groupe-membres)
################
*/
.pg-groupe-membres{
  h2{
    font-size: $h4-font-size;
  }
  .card-depute{
    min-height: 220px;
    .card-body{
      min-height: 90px;
    }
  }
}
/*
################
               PAGE VOTES INDIVIDUAL (pg-vote-individual)
################
*/
.pg-vote-individual{
  .category{
    font-weight: 800;
    color: #fff;
    font-size: 1.6em;
    text-decoration: none;
    &:hover{
      color: #fff;
    }
  }
  h2{
    color: $text-black;
    font-weight: 800;
    font-size: 1.8em;
  }
  h3{
    font-size: 1.2em;
    font-weight: 600;
  }
  .subtitle{
    color: $text-black;
    font-weight: 800;
    font-size: 1.3em;
  }
  // bloc-card-vote
  .bloc-card-vote{
    .card-vote-infos{
      margin-top: -140px;
    }
  }
  .sort{
    font-size: 1.2em;
    padding: 0.5em 1.5em;
  }
  // END HN //
  .bloc-groupes{
    .bloc-groupe{
      width: 100%;
    }
    .card{
      box-shadow: $card-box-shadow;
      border: 0;
      width: 100%;
      .card-body{
        margin: 15px 0;
        padding: 0 0.5rem;
      }
      .thumb{
        span{
          padding: 5px 18px;
          border-top-right-radius: 5px;
          border-bottom-left-radius: 10px;
          border-top-left-radius: 7px;
          color: #fff;
          font-weight: 800;
          font-size: 1.15em;
          box-shadow: inset 3px 1px 4px rgba(0,0,0,0.25);
        }
      }
    }
  }
  .bloc-infos{
    .infos{
      svg{
        color: $primary;
        width: 1.2em;
        height: auto;
      }
      .icon{
        width: 2em;
      }
      .label{
        font-weight: 800;
      }
      .value{
        font-weight: 600;
        padding-left: 20px;
      }
      .question{
        svg{
          width: 1.2em;
          height: auto;
        }
      }
      td {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      tr:not(:first-child){
        border-top: 1px solid #E5E5E5;
      }
    }
  }
  .bloc-links{
    .link{
      width: 100%;
      .text{
        font-weight: 800;
      }
    }
  }
  &.bloc-author{
    background-color: $bleu;
    .title{
      color: #fff;
    }
    p{
      color: #fff;
      font-style: italic;
      margin-top: 1rem;
    }
  }
  .bloc-table{
    img{
      width: 2rem;
      height: auto;
    }
    .table th {
      border-top: none;
    }
    .nav {
      a.active{
        background-color: $primary;
        color: $white;
      }
      a:not(.active){
        color: $primary;
        &:hover{
          background-color: rgba($primary_rgb, 0.1);
        }
      }
    }
  }
  .card-vote-groupe{
    width: 80px;
    height: 80px;
    .img{
      width: 100%;
      height: auto;
    }
  }
  // Other votes in footer //
  .votes-next{
    background-color: $bleu;
    .btn{
      background-color: #FFFFFF;
      border: none;
      color: $text-black;
      font-weight: 800;
      border-radius: 10px;
      padding: 0.5rem 1rem;
      height: 40px;
      i{
        margin: 0 0.25rem;
      }
    }
  }

  .explain{
    p.collapse:not(.show){
      height: 70px !important;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    p.collapsing{
      min-height: 70px !important;
    }
    a.read{
      &.collapsed:after{
        content: "+ Lire plus";
      }
      &:not(.collapsed):after{
        content: "- Lire moins";
      }
    }
    .depute-img{
      flex: 0 0 3.75rem;
      height: auto;
    }
  }
}
/*
################
               PAGE VOTE ALL
################
*/
.pg-vote-all{
  // HN //
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    text-align: center;
    font-size: 2.4em;
    color: $text-black;
    font-weight: 700;

  }
  .bloc-category{
    h3{
      color: $text-black;
      font-weight: 700;
      font-size: 1.6em;
    }
  }
  .bloc-titre{
    margin-top: 4rem;
  }
  .bloc-category{
    .logo-field img {
      width: 50px;
      height: auto;
    }
  }
  svg{
    width: 100%;
    height: auto;
  }
  // ARCHIVES //
  .year{
    span{
      font-weight: 800;
    }
  }
  .months, .year{
    .current{
      border: 2px solid $primary;
      border-radius: 6px;
      box-sizing: border-box;
      height: 100%;
      //background-color: $primary;
    }
    div{
      width: 125px;
      height: 24px;
      box-sizing: border-box;
    }
  }
  // END ARCHIVES //
}
/*
################
               PAGE VOTE DECRYPTES
################
*/
.pg-vote-decryptes{
  // HN
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: 1.6em;
    font-weight: 600;
    color: $text-black;
    span{
      color: $primary;
    }
  }
  .bloc-titre{
    .badge {
      padding: 16px 12px;
      border-radius: 10px;
      color: $white;
      font-weight: 600;
      display: inline-block;
      margin: 0 4px 12px 4px;
      font-size: $h6-font-size;
      span{
        font-weight: 800;
      }
    }
  }
  .bloc-sort{
    .bloc-search{
      top: -70px;
    }
    .card{
      margin: 1rem auto 1rem auto;
      @include media-breakpoint-up(sm) {
        height: 260px;
      }
    }
  }
}
/*
################
               PAGE PARRAINAGES (pg-parrainages)
################
*/
.pg-parrainages{
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: 1.8em;
    color: $text-black;
    font-weight: 800;
  }
  h3{
    font-size: 1.6em;
    color: $text-black;
    font-weight: 800;
  }
  .bloc-titre{
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  &.infosIndividual{
    background-color: $bleu;
    color: #fff;
    h2, a{
      color: #fff;
    }
    h2{
      font-size: 2.2em;
      margin-bottom: 1.5rem;
    }
    .card{
      color: $text-black;
    }
  }
  .wrapper{
    @include media-breakpoint-down(md) {
      height: 400px;
    }
    @include media-breakpoint-up(md) {
      height: 350px;
    }
    @include media-breakpoint-up(lg) {
      height: 450px;
    }
  }
}
/*
################
               PAGE ELECTIONS (pg-elections-index & pg-elections-candidats)
################
*/
.pg-elections-index, .pg-elections-candidats{
  // HN //
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: 1.8em;
    color: $text-black;
    font-weight: 800;
  }
  .bloc-titre{
    margin-top: 4rem;
    svg{
      width: 100%;
      height: auto;
    }
  }
}
.pg-elections-candidats{
  .bloc-titre{
    margin-bottom: 4rem;
  }
  &.infosIndividual{
    background-color: $bleu;
    color: #fff;
    h2, a{
      color: #fff;
    }
    h2{
      font-size: 2.2em;
      margin-bottom: 1.5rem;
    }
  }
  .infosGeneral{
    border: 1px solid #00b794;
    border-radius: 20px;
    .title{
      display: inline-block;
      transform: translateY(-50%);
      padding: 0 .5em;
      background: $bg-colour;
    }
  }
  .map-container{
    height: 300px;
  }
  .map-container-ledend{
    .color{
      width: 30px;
      height: 20px;
    }
  }
  .jvmap-smart{
    width: 100%;
    height: 100%;
  }
  @media only screen and (min-width: 576px) {
      .map-container{
          height: 350px;
      }
  }
  @media only screen and (min-width: 768px) {
      .map-container{
          height: 400px;
      }
  }
  @media only screen and (min-width: 992px) {
      .map-container{
          height: 500px;
      }
  }
  .candidatsN{
    color: $vert;
    font-size: 4em;
    font-weight: 800;
  }
  .resultsPresidentielle{
    img{
      width: 100px;
      height: auto;
    }
    p{
      font-weight: 800;
      color: $text-black;
    }
  }
}
/*
################
               PAGE STATS INDEX (pg-stats-index)
################
*/
.pg-stats-index{
  // HN //
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: 1.8em;
    color: $text-black;
    font-weight: 800;
  }
  h3{
    font-size: 1.6em;
    color: $text-black;
    text-align: center;
    font-weight: 800;
    margin-bottom: 1rem;
  }
  .bloc-titre{
    margin-top: 4rem;
    margin-bottom:  4rem;
  }
  .title_svg{
    position: relative;
    h2{
      z-index: 10;
    }
    svg{
      position: absolute;
      left: -70px;
      top: -50px;
      width: 140px;
      height: auto;
      z-index: -1;
      path{
        fill: $primary;
        fill-opacity: 0.8;
      }
    }
  }
  .bloc-ranking{
    .card {
      box-shadow: $card-box-shadow;
      border: 0;
      .card-footer{
        transition: 0.3s;
        color: $text-black;
        font-weight: 800;
        @include hover-focus(){
          background-color: $primary;
          color: #fff;
        }
      }
    }
  }
  .table_ranking{
    //margin-left: -20px;
    //margin-right: -20px;
    td, th{
      text-align: center;
      padding: 0.60rem 1rem;
    }
    tbody > tr:last-of-type {
      border-bottom: 1px solid #dee2e6;
    }
  }
  svg{
    width: 100%;
    height: auto;
  }
  .bar-container{
    .legend-element{
      span{
        color: $text-gray;
        font-size: 0.9em;
      }
    }
  }
}
.ranking-graph-group{
  background-color: #E8E8E8;
  margin-left: -20px;
  margin-right: -20px;
  .title{
    font-weight: 800;
    font-size: 1.4em;
    color: $text-black;
  }
  .score{
    position: relative;
    @include hover-focus(){
      .avatar{
        border: 1px solid $primary;
      }
    }
    .avatar{
      width: 160px;
      height: 160px;
    }
  }
  .avatar{
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    border: 1px solid transparent;
    overflow: hidden;
    transition: 0.3s;
    img{
      width: 100%;
      height: auto;
    }
  }
  .age{
    font-weight: 800;
    font-size: 1.5em;
    position: absolute;
    bottom: 10px;
    right: -10px;
  }
  .description a{
    color: $text-black;
    font-weight: 400;
    font-size: 1.1em;
  }
  .extremity{
    .avatar{
      @include media-breakpoint-up(sm) {
        margin-top: 35px;
      }
      width: 80px;
      height: 80px
    }
  }
}
/*
################
               PAGE STATS INDEX (pg-stats-individual)
################
*/
.pg-stats-individual{
  // HN //
  h1{
    font-size: 3.4em;
    font-weight: 800;
    color: $text-black;
  }
  h2{
    font-size: 1.8em;
    color: $text-black;
    font-weight: 800;
  }
  h3{
    font-size: 1.1em;
    color: $primary;
    font-weight: 800;
  }
}
/*
################
               FOR POSTS PAGE ALL & INDIVIDUAL
################
*/
.card-right-posts {
  border: none;
  .card-header {
    background-color: $primary;
    color: $white;
    padding: 0.50rem 1.25rem;
  }
}
.card-social-media-posts {
  img {
    width: 2.3em;
    height: auto;
    margin-right: 1em;
  }
}
.twitter-timeline {
    width: 100vw !important;
}
/*
################
               CARD-POST (for datan.fr & datan.fr/blog & datan.fr/blog/categorie/XX )
################
*/
.card-post{
  box-shadow: $card-box-shadow;
  border: none;
  .img-wrap{
    width: 50%;
    border-top-left-radius: $card-border-radius;
    border-bottom-left-radius: $card-border-radius;
    img{
      width: 100%;
      height: auto;
      border-top-left-radius: $card-border-radius;
      border-bottom-left-radius: $card-border-radius;
    }
  }
  .card-title{
    font-size: $h3-font-size;
    font-weight: 600;
    margin-top: 0.75rem;
    a{
      color: $text-black;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
  }
  .card-text{
    margin-top: 1rem;
  }
  .date{
    color: $text-gray;
  }
  .category{
    color: $primary;
  }
}
/*
################
               PAGE POSTS (ALL)
################
*/
.pg-posts{
  // EMPTY
}
/*
################
               PAGE POST INDIVIDUAL
################
*/
.pg-post-view{
  h1{
    font-weight: 600;
    font-size: 2.7em;
  }
  h2{
    color: $primary;
    margin-top: 1em;
    font-size: 1.4em;
    font-weight: 800;
  }
  .hr-title{ // Has been removed for now
    width: 16em;
    border-top: 1px solid $primary;
  }
  .category{
    color: $primary;
    font-size: $h5-font-size;
  }
  .date{
    color: $text-gray-light;
  }
  .img{
    img{
      width: 100%;
      height: auto;
    }
  }
  .body{
    p{
      &:first-child{
        &::first-letter{
          text-transform: uppercase;
          font-size: 3em;
          font-weight: bold;
          letter-spacing: 5px;
        }
      }
    }
    img{
      width: 100%;
      height: auto;
    }
  }
}
/*
################
               FOOTER
################
*/
.footer{
  //background-color: #282828;
  background-color: $text-black;
  color: $white;
  .form-control{
    background-color: transparent;
    border-radius: 0;
    border: 1px solid #ced4da;
    color: $white;
  }
  .form-control::-webkit-input-placeholder {
    color: $white;
  }
  .btn{
    border-radius: 0;
    background-color: transparent;
    border: 1px solid #ced4da;
    color: $white;
    &:hover{
      color: $bleu;
      background-color: $white;
    }
  }
  a{
    color: $white !important;
  }
  .liste{
    div{
      width: 50%;
    }
    p{
      border-top: 1px solid $white;
    }
  }
  .social-media{
    img{
      width: 20px;
      height: auto;
      margin-right: 5px;
    }
  }
}
.footer-data{
  background-color: $bg-colour;
}
/*
################
FAQ
################
*/
.pg-compte{
  background-color: $bg-colour;
  border-top-left-radius: $card-border-radius;
  border-top-right-radius: $card-border-radius;
  h1{
    font-weight: 800;
    color: $primary;
  }
}
/*
################
FAQ
################
*/
.faq-header{
  background-color: $vert;
  color: #fff;
}
.pg-faq{
  h2{
    color: $vert;
    font-size: 1.8em;
  }
  .card-categories{
    border: none;
    .card-header{
      background-color: #fff;
      border-right: solid 1px rgba(0, 0, 0, 0.125);
      border-left: solid 1px rgba(0, 0, 0, 0.125);
      border-top: solid 1px rgba(0, 0, 0, 0.125);
    }
  }
  .card-question{
    border: none;
    .card-header{
      background-color: transparent;
      span{
        font-size: 1.1em;
        color: $text-black;
        font-weight: 800;
      }
    }
  }
}
/*
################
MODAL
################
*/
.pg-newsletter{
  h1{
    font-size: 3em;
    font-weight: 800;
    color: $text-black;
  }
  .legend{
    color: $text-gray-light;
    font-weight: 800;
  }
}
.modal {
  z-index: 9999;
}

/*
################
MODAL EXPLAIN
################
*/
.quote-img{
  float:left;
}

/*
################
MODAL
################
*/
#modalSubscription,#modalFail, #fail, #success{
  display: none;
}
.modalDatan{
  .modal-header{
    background-color: $primary;
  }
  .modal-title{
    font-size: $h4-font-size;
    font-weight: 800;
    color: #fff;
  }
  .source{
    font-size: $h7-font-size;
    font-style: italic;
  }
  .close{
    font-size:25px;
    color: #fff;
  }
}
/*
################
dialogueBoxQuiz
################
*/
#dialogueBoxQuiz{
  display:none;
  background-color: $bleu;
  z-index: 9999;
  position: fixed;
  color: #ffffff;
  @include media-breakpoint-down(md) {
    width: 100%;
    bottom: 0;
  }
  @include media-breakpoint-up(md) {
    width: 350px;
    height: 290px;
    border-top-left-radius: 10px;
    bottom: 0;
    right: 0;
  }
  #closeDialogueBoxQuiz{
    padding: 10px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .text {
    font-size: $h4-font-size;
  }
  .text-container{
    height: 100%;
  }
}