/*
    Version: 1.0
    Author: Corine Bitar <corine.bitar@gmail.com>
    Default stylesheet for RA RAFP
*/
*:focus {
  outline: none; }

html {
  overflow-x: hidden; }

html, body {
  height: 100%; }

ul,
ol {
  padding: 0;
  margin: 0;
  list-style-position: inside; }

body.modal-open {
  overflow: visible; }

.body-content {
  position: relative;
  top: 0;
  right: 0;
  padding: 0; }

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto; }

.hidden-xs {
  display: inline-block !important; }

.visible-xs {
  display: none !important; }

.page-section {
  padding: 0 155px;
  position: relative;
  width: 100%; }
  .page-section.risque {
    padding-top: 130px; }
  .page-section .section-title {
    font-family: "Roboto", sans-serif;
    font-size: 70px;
    font-weight: 300;
    color: #65346c;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -1px; }
    .page-section .section-title .bold {
      font-weight: bold; }
    .page-section .section-title .indent {
      padding-left: 100px; }
  .page-section .section-subtitle {
    font-family: "Rokkitt", serif;
    font-size: 40px;
    font-weight: bold;
    color: #ffffff; }
  .page-section.intro {
    background-image: url("assets/RAFP-home.jpg");
    background-size: cover;
    padding: 40px;
    background-color: #65346c; }
  .page-section.regards-croises {
    padding: 42px 155px; }
  .page-section.faits-marquants {
    padding: 50px 155px 0;
    position: relative; }
    .page-section.faits-marquants .section-title .indent {
      padding-left: 50px; }
    .page-section.faits-marquants .section-title .bold {
      font-size: 125px;
      color: #C7D395;
      padding-left: 100px; }
    .page-section.faits-marquants .section-title:before {
      content: '';
      background-image: url("assets/Forme-bloc1.png");
      background-size: cover;
      width: 388px;
      height: 364px;
      display: inline-block;
      margin-top: -125px; }
  .page-section.chiffres-cles {
    padding: 90px 155px 70px;
    background-color: #F1F0EC; }
    .page-section.chiffres-cles .section-title {
      text-align: center;
      margin-bottom: 40px; }
    .page-section.chiffres-cles:before {
      content: '';
      background-image: url("assets/Forme-bloc1.png");
      background-size: cover;
      width: 343px;
      height: 314px;
      display: inline-block;
      margin-top: -200px;
      position: absolute; }
  .page-section.big-title-green {
    background-color: #C7D395;
    text-align: center;
    color: #65346c;
    height: 300px; }
    .page-section.big-title-green .big-section-title {
      font-family: "Roboto", sans-serif;
      font-size: 60px;
      font-weight: 400;
      line-height: 65px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%); }
    .page-section.big-title-green.white {
      background-image: url("assets/Forme-1-blanc.png");
      background-size: 308px auto;
      background-repeat: no-repeat;
      background-position: 100px; }
  .page-section.big-title-yellow {
    background-color: #DEDC00;
    text-align: center;
    color: #65346c;
    height: 300px; }
    .page-section.big-title-yellow .big-section-title {
      font-family: "Roboto", sans-serif;
      font-size: 60px;
      font-weight: 400;
      line-height: 65px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%); }
    .page-section.big-title-yellow.white {
      background-image: url("assets/Forme-1-blanc.png");
      background-size: 308px auto;
      background-repeat: no-repeat;
      background-position: 100px; }
  .page-section .explication {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    display: block;
    margin-top: 30px;
    text-align: left;
    position: absolute;
    left: 30px; }
  .page-section .purple-bg {
    background-color: #65346c;
    padding: 60px 130px; }
    .page-section .purple-bg .section-title {
      color: #C7D395;
      text-align: center;
      font-weight: 300; }
      .page-section .purple-bg .section-title.title {
        font-family: "Rokkitt", serif;
        font-size: 40px; }
    .page-section .purple-bg .section-subtitle {
      margin-top: 30px;
      text-align: center;
      line-height: 38px; }
      .page-section .purple-bg .section-subtitle.underline {
        text-decoration: underline;
        margin: 0px 0 40px; }
    .page-section .purple-bg:before {
      content: '';
      background-image: url(assets/Forme-bloc2.png);
      background-size: 245px auto;
      width: 245px;
      height: 215px;
      display: inline-block;
      position: absolute;
      right: 40px;
      top: -67px;
      background-repeat: no-repeat; }
    .page-section .purple-bg p {
      font-family: "Roboto", sans-serif;
      font-size: 17px;
      font-weight: 400;
      color: #ffffff; }
    .page-section .purple-bg.yellow .zoom-wrapper {
      min-height: 0; }
    .page-section .purple-bg .modal-body p {
      color: #65346c;
      font-weight: bold;
      line-height: 25px; }
    .page-section .purple-bg .zoom-wrapper {
      margin-top: 30px; }
  .page-section.grey-bg {
    background-color: #F1F0EC; }
  .page-section.grey-before:before {
    content: '';
    background-color: #F1F0EC;
    width: 100%;
    height: 300px;
    display: inline-block;
    position: absolute;
    left: 0; }
  .page-section.les-pas {
    position: relative; }
    .page-section.les-pas:before {
      content: '';
      background-image: url("assets/Forme-bloc1.png");
      background-size: cover;
      width: 343px;
      height: 314px;
      display: inline-block;
      margin-top: -230px;
      position: absolute;
      right: 155px; }

.green-bar {
  width: 100%;
  height: 5px;
  background-color: #C7D395;
  display: block; }

button.close:hover {
  opacity: 1; }

.yellow-bar {
  width: 100%;
  background-color: #DEDC00;
  height: 10px;
  display: block; }

.design-luciole {
  position: absolute;
  transform: rotate(-90deg);
  right: -40px;
  top: 50%;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  width: 240px;
  text-align: center; }

.back-to-top {
  font-size: 15px;
  text-transform: uppercase;
  position: fixed;
  left: -30px;
  top: 70%;
  z-index: 1;
  transform: rotate(-90deg); }

.charte-wrapper {
  margin-top: 30px; }

@media (min-width: 768px) and (max-width: 991px) {
  .page-section.chiffres-cles,
  .page-section.faits-marquants,
  .page-section.text-section, .page-section.regards-croises {
    padding: 30px 75px; }
    .page-section.chiffres-cles.big-title-green .big-section-title,
    .page-section.faits-marquants.big-title-green .big-section-title,
    .page-section.text-section.big-title-green .big-section-title, .page-section.regards-croises.big-title-green .big-section-title {
      font-size: 40px;
      line-height: 1; }

  .page-section {
    padding: 30px 75px; }
    .page-section .section-title {
      font-size: 45px; }
    .page-section .section-subtitle {
      font-size: 30px; }
    .page-section.faits-marquants .section-title .bold {
      font-size: 80px; }
    .page-section.big-title-green .big-section-title, .page-section.big-title-yellow .big-section-title {
      font-size: 45px;
      line-height: 1; }
    .page-section .purple-bg {
      padding: 60px; }
      .page-section .purple-bg p {
        font-size: 15px;
        line-height: 1.3; } }
@media (max-width: 767px) {
  body {
    overflow-x: hidden; }

  .col-xs-6 {
    width: 50%; }

  .hidden-xs {
    display: none !important; }

  .visible-xs {
    display: block !important; }

  .visible-lg {
    display: none !important; }

  .page-section {
    padding: 35px; }
    .page-section.wide {
      padding: 35px 0 0; }
    .page-section.regards-croises, .page-section.chiffres-cles, .page-section.faits-marquants, .page-section.text-section {
      padding: 35px; }
    .page-section.faits-marquants .section-title {
      text-align: left;
      z-index: 1; }
      .page-section.faits-marquants .section-title .indent {
        padding-left: 20px; }
      .page-section.faits-marquants .section-title .bold {
        font-size: 80px;
        padding-left: 20px; }
      .page-section.faits-marquants .section-title:before {
        width: 203px;
        height: 209px;
        z-index: 0;
        left: -50px;
        position: absolute; }
    .page-section .section-title {
      text-align: center;
      font-size: 40px;
      font-weight: 300; }
    .page-section.chiffres-cles .section-title {
      margin-bottom: 0; }
    .page-section.big-title-green, .page-section.big-title-yellow {
      height: 245px; }
      .page-section.big-title-green .big-section-title, .page-section.big-title-yellow .big-section-title {
        font-size: 35px;
        line-height: 40px; }
    .page-section .explication {
      margin-top: 0;
      left: 0;
      line-height: 1;
      text-align: center; }
    .page-section .purple-bg {
      padding: 35px; }
      .page-section .purple-bg p {
        font-size: 15px; }
      .page-section .purple-bg .section-subtitle {
        font-size: 20px;
        line-height: 22px; }
      .page-section .purple-bg:before {
        content: '';
        background-size: 120px auto;
        width: 120px;
        height: 120px;
        right: 0;
        top: -25px; }
    .page-section.intro {
      padding: 35px; }
      .page-section.intro .download-btn {
        margin-left: 00%;
        display: none; } }
.sprite {
  background-image: url(assets/spritesheet.svg?v=1);
  background-repeat: no-repeat;
  background-size: 842px 2576px;
  display: block; }

.download-btn {
  width: 46px;
  height: 46px;
  background-position: -68px -138px; }
  .download-btn:hover {
    background-position: -136px -138px; }

.modal-close {
  width: 36px;
  height: 36px;
  background-color: #C7D395;
  color: #65346c;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 100%;
  display: inline-block;
  line-height: 36px;
  text-shadow: none; }
  .modal-close:hover {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

.droits {
  width: 91px;
  height: 128px;
  background-position: -61px -730px; }
  .droits:hover {
    background-position: -61px -889px; }

.progres {
  width: 90px;
  height: 128px;
  background-position: -176px -730px; }
  .progres:hover {
    background-position: -176px -889px; }

.democratie {
  width: 90px;
  height: 128px;
  background-position: -297px -730px; }
  .democratie:hover {
    background-position: -297px -889px; }

.env {
  width: 90px;
  height: 128px;
  background-position: -414px -730px; }
  .env:hover {
    background-position: -414px -889px; }

.transparent {
  width: 90px;
  height: 128px;
  background-position: -534px -730px; }
  .transparent:hover {
    background-position: -534px -889px; }

.defisEnv {
  width: 102px;
  height: 102px;
  background-position: -71px -1077px; }

.defisGouv {
  width: 102px;
  height: 102px;
  background-position: -217px -1077px; }

.defisSociaux {
  width: 102px;
  height: 102px;
  background-position: -380px -1077px; }

.people {
  width: 100px;
  height: 56px;
  background-position: -70px -373px; }

.hands {
  width: 80px;
  height: 56px;
  background-position: -192px -373px; }

.capital {
  width: 54px;
  height: 56px;
  background-position: -289px -373px; }

.rapport {
  width: 53px;
  height: 56px;
  background-position: -369px -373px; }

.chartes {
  width: 53px;
  height: 56px;
  background-position: -367px -373px; }

.prix {
  width: 69px;
  height: 56px;
  background-position: -459px -373px; }

.climat {
  width: 91px;
  height: 90px;
  background-position: -82px -1457px; }

.economique {
  width: 91px;
  height: 90px;
  background-position: -211px -1457px; }

.agents {
  width: 91px;
  height: 90px;
  background-position: -340px -1457px; }

.carbone {
  width: 91px;
  height: 90px;
  background-position: -74px -1571px; }

.temperature {
  width: 91px;
  height: 90px;
  background-position: -194px -1571px; }

.fossiles {
  width: 91px;
  height: 90px;
  background-position: -323px -1570px; }

.energie {
  width: 91px;
  height: 90px;
  background-position: -459px -1570px; }

.next-section {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 27px;
  height: 27px; }
  .next-section.white {
    background-position: -73px -306px; }
  .next-section.yellow {
    background-position: -162px -306px; }
  .next-section.purple {
    background-position: -119px -306px; }

.back-to-top {
  width: 27px;
  height: 27px;
  background-position: -73px -306px; }

.download-footer {
  transition: none;
  width: 650px;
  height: 81px;
  background-position: -58px -1979px;
  font-family: "Roboto", sans-serif; }
  .download-footer:hover {
    width: 652px;
    height: 81px;
    background-position: -58px -2094px; }

body {
  font-family: "Roboto", sans-serif;
  background: #ffffff; }

p {
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #000000; }

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s; }

.navbar {
  border: none;
  border-radius: 0;
  z-index: 1000;
  padding: 0; }

.menu-download {
  position: fixed;
  right: 75px;
  top: 22px; }
  .menu-download .download-btn {
    background-size: 640px 1960px;
    width: 35px;
    height: 35px;
    background-position: -52px -106px;
    margin-top: 6px; }

.menu-burger {
  position: fixed;
  right: 30px;
  top: 40px;
  background-color: transparent;
  padding: 0;
  color: #DEDC00; }
  .menu-burger:focus, .menu-burger:hover {
    outline: none;
    box-shadow: none; }
    .menu-burger:focus .fa-bars, .menu-burger:hover .fa-bars {
      color: #ffffff; }
  .menu-burger .fa-bars {
    font-size: 24px; }

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none; }

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0; }

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
  width: 500px;
  position: fixed;
  top: 0;
  right: -500px;
  height: 100vh;
  z-index: 10001;
  background: #ffffff;
  color: #000000;
  transition: all 0.3s;
  overflow-y: scroll;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); }

#sidebar.active {
  right: 0; }

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #ffffff;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  #dismiss .fa-times {
    font-size: 18px; }
  #dismiss:hover {
    color: #DEDC00; }

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: all 0.5s ease-in-out;
  top: 0; }

.overlay.active {
  display: block; }

#sidebar .sidebar-header {
  padding: 20px;
  background: #6d7fcc; }

#sidebar ul.components {
  padding: 20px 0 0 100px;
  border-bottom: 1px solid #47748b; }

#sidebar ul p {
  color: #fff;
  padding: 10px;
  margin: 0; }

#sidebar ul li a {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #65346c;
  padding: 10px;
  display: block; }

#sidebar ul li.download-link {
  margin-top: 30px; }
  #sidebar ul li.download-link a {
    font-size: 20px;
    text-decoration: underline; }
  #sidebar ul li.download-link a, #sidebar ul li.download-link .sprite {
    display: inline-block;
    vertical-align: middle; }
  #sidebar ul li.download-link .download-btn {
    margin-left: 0; }

#sidebar ul li:hover a {
  text-decoration: underline;
  color: #C7D395; }

#sidebar ul li.active > a,
a[aria-expanded="true"] {
  text-decoration: underline;
  color: #C7D395; }

a[data-toggle="collapse"] {
  position: relative; }

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%); }

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #6d7fcc; }

ul.CTAs {
  padding: 20px; }

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px; }

a.download {
  background: #fff;
  color: #7386D5; }

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important; }

.sidebar-logo {
  background-image: url("assets/rafp-logo-violet.svg");
  width: 145px;
  height: 97px;
  background-size: cover;
  margin: 30px 0; }

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s; }

@media (max-width: 767px) {
  #sidebar {
    width: 100%; }
    #sidebar ul li a {
      font-size: 20px; }
    #sidebar ul li.download-link a {
      font-size: 13px; }
    #sidebar ul.components {
      padding: 20px 0 0 40px; }

  .navbar .download-btn {
    margin-left: 0; }

  #dismiss {
    top: 15px;
    left: 15px; } }
.intro-logo {
  width: 224px;
  height: 150px; }

.intro-title {
  padding-top: 40px; }
  .intro-title h1 {
    font-size: 110px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 90px;
    color: #ffffff;
    padding-left: 40%; }
  .intro-title span {
    font-family: "Rokkitt", serif;
    font-size: 45px;
    color: #C7D395;
    font-weight: 500;
    display: block;
    margin-left: -10px; }
  .intro-title a {
    font-size: 15px;
    font-style: italic;
    line-height: 1;
    text-transform: none;
    text-decoration: none; }
    .intro-title a:hover {
      color: #DEDC00; }
    .intro-title a i, .intro-title a span {
      vertical-align: middle;
      margin-left: 0; }

.download-btn {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: #DEDC00;
  margin-left: 48%; }
  .download-btn i, .download-btn span {
    display: inline-block;
    vertical-align: middle; }
  .download-btn i {
    margin-left: 10px; }
  .download-btn:hover, .download-btn:active {
    color: #C7D395; }

.regards-croises {
  padding: 42px 0;
  text-align: left; }
  .regards-croises h3 {
    font-family: "Rokkitt", serif;
    font-weight: bold;
    font-size: 45px;
    line-height: 38px;
    color: #65346c;
    padding: 20px 0; }
  .regards-croises h4 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-transform: uppercase; }
    .regards-croises h4 span {
      font-weight: 900; }
  .regards-croises .btn-yellow {
    margin-top: 26px; }
  .regards-croises .image img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%); }
  .regards-croises .image.left img {
    top: 28%; }

.chiffre-cle-wrapper {
  text-align: center;
  padding: 35px 20px; }
  .chiffre-cle-wrapper .chiffre-cle {
    font-family: "Rokkitt", serif;
    font-weight: bold;
    font-size: 40px;
    color: #65346c; }
  .chiffre-cle-wrapper .chiffre-desc {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    line-height: 1.3; }
  .chiffre-cle-wrapper:before {
    content: '';
    background-color: #DEDC00;
    height: 4px;
    width: calc(100% - 30px);
    position: absolute;
    top: 0;
    left: 15px; }

.fait-marquant-wrapper {
  text-align: center;
  margin-bottom: 40px; }
  .fait-marquant-wrapper .date {
    font-family: "Rokkitt", serif;
    font-size: 30px;
    font-weight: bold;
    color: #65346c;
    background-color: #DEDC00;
    line-height: 1.1;
    display: inline-block;
    padding: 0 15px; }
  .fait-marquant-wrapper p {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    line-height: 1.3;
    padding: 20px 5px 0; }
  .fait-marquant-wrapper i {
    margin: 0 auto 20px; }

.text-section {
  padding: 60px 155px; }
  .text-section .underline {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    color: #65346c;
    line-height: 26px;
    text-decoration: underline;
    font-weight: bold;
    margin-bottom: 20px; }
    .text-section .underline.big {
      font-family: "Rokkitt", serif;
      font-size: 40px;
      margin-bottom: 30px;
      line-height: 38px; }
    .text-section .underline.yellow {
      color: #DEDC00;
      text-align: center;
      margin-top: 40px; }
  .text-section .purple {
    font-size: 20px;
    font-weight: bold;
    color: #65346c; }
  .text-section p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 23px;
    color: #000000;
    font-weight: 400; }
    .text-section p strong {
      font-weight: bold; }
    .text-section p.introduction {
      font-family: "Roboto", sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: #65346c; }
  .text-section blockquote {
    font-family: "Rokkitt", serif;
    font-size: 35px;
    font-weight: bold;
    line-height: 1;
    color: #65346c;
    padding: 30px 0 30px;
    position: relative; }
    .text-section blockquote:before {
      content: '';
      background-image: url("assets/Forme-1-verte.png");
      width: 215px;
      height: 215px;
      background-size: cover;
      background-repeat: no-repeat;
      display: inline-block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      position: absolute;
      margin-left: -100px;
      z-index: -1; }
    .text-section blockquote.bg {
      background-color: #DEDC00;
      padding: 25px 30px;
      font-size: 30px; }
      .text-section blockquote.bg:before {
        display: none; }

.quote-bg {
  margin-left: -50px;
  margin-bottom: -115px; }
  .quote-bg blockquote {
    z-index: 1; }

.risque-wrapper {
  text-align: center;
  min-height: 300px; }
  .risque-wrapper .number {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    font-weight: bold;
    background-color: #DEDC00;
    color: #65346c;
    width: 54px;
    height: 54px;
    line-height: 55px;
    border-radius: 100%;
    display: block;
    margin: 0 auto 10px; }
  .risque-wrapper h2 {
    font-family: "Rokkitt", serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 35px;
    text-decoration: underline;
    color: #65346c;
    margin-bottom: 35px; }
  .risque-wrapper p {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    line-height: 23px;
    font-weight: 400; }
  .risque-wrapper.green {
    margin-top: 40px;
    min-height: 0; }
    .risque-wrapper.green .number {
      background-color: #C7D395; }
    .risque-wrapper.green:after {
      display: none; }

.zoom-wrapper {
  text-align: center;
  min-height: 300px; }
  .zoom-wrapper .number {
    font-family: "Roboto", sans-serif;
    font-size: 40px;
    font-weight: bold;
    background-color: #C7D395;
    color: #65346c;
    width: 54px;
    height: 54px;
    line-height: 55px;
    border-radius: 100%;
    display: block;
    margin: 0 auto 10px; }
  .zoom-wrapper h4 {
    font-family: "Rokkitt", serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #C7D395;
    padding-bottom: 20px;
    border-bottom: 1px solid #C7D395; }
  .zoom-wrapper p {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    line-height: 23px;
    font-weight: 400;
    color: #ffffff; }

.youtube-embedds {
  margin-top: 70px; }

.engagement-section {
  text-align: center; }
  .engagement-section h3 {
    font-family: "Rokkitt", serif;
    font-size: 60px;
    font-weight: bold; }
  .engagement-section h4 {
    font-family: "Roboto", sans-serif;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase; }
    .engagement-section h4 i {
      margin: 15px auto; }
    .engagement-section h4:hover {
      color: #ffffff;
      text-decoration: underline; }
      .engagement-section h4:hover .open-popup {
        background-position: -164px -358px; }
  .engagement-section .top:after {
    content: '';
    height: 28px;
    width: 5px;
    background-color: #ffffff;
    position: relative;
    display: inline-block; }
  .engagement-section .bottom:before {
    content: '';
    height: 28px;
    width: 5px;
    background-color: #ffffff;
    position: relative;
    display: inline-block; }

.decisions-wrapper {
  margin-top: 50px; }
  .decisions-wrapper .decision-wrapper:after {
    content: '';
    height: 20px;
    width: calc(100% - 30px);
    background-color: #DEDC00;
    position: absolute;
    bottom: -15px;
    left: 15px; }
  .decisions-wrapper i {
    margin: 0 auto;
    margin-bottom: 20px; }

.charte {
  width: 20%;
  text-align: center;
  display: inline-block;
  float: left; }
  .charte i {
    margin: 0 auto 20px;
    cursor: pointer; }
  .charte p {
    font-family: "Roboto", sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
    line-height: 26px; }
  .charte:hover p {
    color: #C7D395; }
  .charte:hover .droits {
    background-position: -61px -889px; }
  .charte:hover .progres {
    background-position: -176px -889px; }
  .charte:hover .democratie {
    background-position: -297px -889px; }
  .charte:hover .env {
    background-position: -414px -889px; }
  .charte:hover .transparent {
    background-position: -534px -889px; }

.defis {
  margin-top: 50px;
  text-align: center; }
  .defis p {
    font-family: "Rokkitt", serif;
    font-size: 35px;
    font-weight: 700;
    color: #D1CF08;
    line-height: 1;
    margin-top: 30px; }
  .defis i {
    margin: 0 auto; }

.impact {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px; }
  .impact i {
    margin: 0 auto; }
  .impact p {
    font-family: "Rokkitt", serif;
    font-size: 35px;
    line-height: 1;
    font-weight: 700;
    color: #D1CF08;
    margin-top: 20px; }

.priorites-wrapper {
  margin-top: 60px; }
  .priorites-wrapper img {
    margin: 0 auto; }
  .priorites-wrapper p {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase; }

.zoom-wrapper {
  padding: 0 5px; }
  .zoom-wrapper i {
    margin: 0 auto; }
  .zoom-wrapper h4 {
    color: #C7D395;
    text-decoration: underline;
    border-bottom: 0;
    margin-top: 10px; }

@media (min-width: 992px) and (max-width: 1199px) {
  .regards-croises h3 {
    font-size: 30px; } }
@media (max-width: 1199px) {
  .chiffre-cle-wrapper {
    padding: 30px 15px; }
    .chiffre-cle-wrapper .chiffre-cle {
      font-size: 30px; }
      .chiffre-cle-wrapper .chiffre-cle span {
        font-size: 30px; }
    .chiffre-cle-wrapper .chiffre-desc {
      font-size: 16px; } }
@media (min-width: 768px) and (max-width: 991px) {
  .intro-title h1 {
    font-size: 40px;
    line-height: 48px; }
  .intro-title .picto-2019 {
    right: 75px; }

  .regards-croises {
    padding: 42px 0 0; }
    .regards-croises h3 {
      font-size: 35px;
      line-height: 1;
      padding: 20px 0 0; }
    .regards-croises h4 {
      font-size: 18px; }
    .regards-croises .right.image, .regards-croises .left.image {
      display: none; }

  .fait-marquant-wrapper .date {
    font-size: 18px; }
  .fait-marquant-wrapper p {
    font-size: 13px; }

  .text-section p {
    font-size: 18px; }
    .text-section p b {
      font-size: 22px; }
  .text-section .underline.big {
    font-size: 30px; }
  .text-section .purple {
    font-size: 18px; }

  .quote-bg {
    margin-bottom: 0; }

  .risque-wrapper {
    min-height: 0;
    margin-bottom: 40px; }
    .risque-wrapper h2 {
      font-size: 26px; }
    .risque-wrapper:after {
      display: none; }
    .risque-wrapper.green {
      margin-bottom: 0; }

  .zoom-wrapper {
    min-height: 0; }

  .download-btn {
    margin-left: 35%; } }
@media (max-width: 767px) {
  .intro-logo {
    width: 78px;
    height: 52px;
    position: relative; }

  .regards-croises h3 {
    font-size: 20px;
    margin-bottom: 0px;
    line-height: 1;
    padding: 20px 0 10px; }
  .regards-croises h4 {
    font-size: 13px; }
  .regards-croises .text {
    padding: 0; }
  .regards-croises .image {
    padding: 0; }
  .regards-croises .btn-yellow {
    margin-top: 15px; }

  .text-section p {
    font-size: 13px; }
    .text-section p b {
      font-size: 20px; }

  .text-section {
    font-size: 14px; }
    .text-section .underline {
      font-size: 15px; }
      .text-section .underline.big {
        font-size: 25px;
        line-height: 1.1; }
    .text-section .purple {
      font-size: 15px; }
    .text-section blockquote {
      font-size: 20px;
      padding: 50px 0 50px 20px; }
      .text-section blockquote:before {
        width: 120px;
        height: 120px;
        margin-left: -20px; }
      .text-section blockquote.bg {
        font-size: 20px; }
    .text-section p {
      font-size: 13px; }
      .text-section p.introduction {
        font-size: 14px; }
      .text-section p b {
        font-size: 17px; }

  .intro-title {
    position: relative;
    z-index: 1;
    margin: 50px 0px 0;
    text-align: center; }
    .intro-title h1 {
      font-size: 55px;
      line-height: 1;
      padding-left: 0; }
      .intro-title h1 span {
        font-size: 25px; }

  .chiffre-cle-wrapper {
    padding: 10px 15px 20px; }
    .chiffre-cle-wrapper:before {
      display: none; }
    .chiffre-cle-wrapper:after {
      content: '';
      background-color: #DEDC00;
      height: 4px;
      width: 50%;
      bottom: 0;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      position: absolute; }
    .chiffre-cle-wrapper:last-of-type:after {
      display: none; }
    .chiffre-cle-wrapper .chiffre-desc {
      font-size: 12px;
      margin-bottom: 0; }

  .fait-marquant-wrapper {
    margin-bottom: 20px; }
    .fait-marquant-wrapper .date {
      font-size: 25px; }
    .fait-marquant-wrapper p {
      font-size: 12px;
      margin-bottom: 0; }

  .charte {
    width: 100%;
    margin-bottom: 40px; }

  .defis p {
    font-size: 22px; }

  .quote-bg {
    margin: 0;
    margin-top: 50px; }

  .risque-wrapper {
    min-height: 0;
    padding-bottom: 20px;
    padding-top: 20px; }
    .risque-wrapper h2 {
      font-size: 20px; }
    .risque-wrapper:after {
      left: 10px; }
    .risque-wrapper.green {
      margin-top: 0; }

  .zoom-wrapper {
    min-height: 0;
    margin-bottom: 40px; }
    .zoom-wrapper h4 {
      font-size: 20px; } }
.modal {
  text-align: center; }
  .modal.green .modal-content {
    background-color: #C7D395;
    border: 10px solid #ffffff;
    text-align: center; }
    .modal.green .modal-content span {
      color: #ffffff; }
  .modal.green .modal-close {
    background-color: #65346c;
    color: #C7D395; }
  .modal.green .modal-body {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    color: #65346c; }
  .modal.green .modal-dialog.wide .modal-body {
    font-size: 22px;
    font-weight: 700; }
  .modal .modal-icon-wrapper {
    position: relative; }
    .modal .modal-icon-wrapper:before {
      content: '';
      height: 5px;
      width: 100%;
      background-color: #ffffff;
      position: absolute;
      top: 45px;
      left: 0; }
  .modal i {
    display: inline-block;
    position: relative; }
  .modal .droits {
    height: 90px;
    background-position: -61px -889px; }
  .modal .progres {
    height: 90px;
    background-position: -176px -889px; }
  .modal .democratie {
    height: 90px;
    background-position: -297px -889px; }
  .modal .env {
    height: 90px;
    background-position: -414px -889px; }
  .modal .transparent {
    height: 90px;
    background-position: -534px -889px; }

.modal-content {
  min-width: 730px;
  padding: 20px 70px 80px;
  border: 10px solid #C7D395; }

.modal-dialog {
  max-width: 730px; }
  .modal-dialog.wide {
    text-align: left;
    max-width: 900px; }
    .modal-dialog.wide .modal-body {
      font-size: 17px;
      font-weight: 400; }
      .modal-dialog.wide .modal-body strong, .modal-dialog.wide .modal-body b {
        font-weight: 700; }

.modal-header {
  border-bottom: 0;
  display: block;
  padding-top: 60px; }
  .modal-header.quote:before {
    content: '';
    background-image: url("assets/spritesheet.svg");
    background-size: 948px 2538px;
    background-position: -94px -1324px;
    width: 90px;
    height: 62px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 50px; }
  .modal-header.image h5 {
    font-size: 28px; }
  .modal-header.image .yellow-line {
    width: 100%;
    margin: 20px 0; }
  .modal-header.image img {
    margin: 0 auto 20px; }
  .modal-header h5 {
    font-family: "Rokkitt", serif;
    font-size: 45px;
    font-weight: bold;
    color: #65346c; }
  .modal-header .close {
    position: absolute;
    right: 50px;
    top: 20px;
    opacity: 1; }
    .modal-header .close:focus {
      outline: none; }
    .modal-header .close:hover {
      opacity: 1 !important; }

.modal-body {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 500; }
  .modal-body ul {
    list-style: none;
    padding: 0; }
    .modal-body ul li {
      margin-bottom: 15px; }
      .modal-body ul li span {
        color: #DEDC00; }

.modal-footer {
  border-top: 0;
  text-align: center;
  display: block;
  padding-top: 0; }
  .modal-footer h6 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #65346c;
    color: #ffffff;
    line-height: 42px; }
    .modal-footer h6 span {
      font-weight: bold; }

@media (min-width: 768px) and (max-width: 991px) {
  .modal-header h5 {
    font-size: 35px; }

  .modal-dialog.wide .modal-body {
    font-size: 16px; } }
@media (max-width: 767px) {
  .modal-header h5 {
    font-size: 25px; }
  .modal-header.quote:before {
    left: 20px;
    top: 20px; }
  .modal-header .close {
    right: 20px; }

  .modal-body {
    font-size: 12px; }

  .modal-content {
    min-width: 100%;
    max-width: 100%;
    padding: 20px; }

  .modal-footer h6 {
    font-size: 13px; }

  .modal.green .modal-dialog.wide .modal-body {
    font-size: 17px; } }
.btn-plus {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  color: #65346c;
  background-color: #DEDC00;
  font-size: 30px;
  line-height: 30px;
  font-weight: bold; }
  .btn-plus:hover, .btn-plus:active {
    background-color: #65346c;
    color: #DEDC00; }
  .btn-plus:focus {
    outline: none;
    box-shadow: none; }

.btn-wrapper {
  text-align: center; }

.btn-purple {
  background-color: #65346c;
  color: #ffffff;
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 78px;
  border-radius: 66px;
  padding: 0 32px; }
  .btn-purple span {
    background-color: #C7D395;
    color: #65346c;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    display: inline-block;
    font-size: 40px;
    line-height: 42px;
    margin-right: 10px; }
  .btn-purple:hover {
    background-color: #C7D395;
    color: #65346c; }
    .btn-purple:hover span {
      background-color: #65346c;
      color: #C7D395; }

.btn-white {
  background-color: #ffffff;
  color: #C7D395;
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 78px;
  border-radius: 66px;
  padding: 0 32px; }
  .btn-white span {
    background-color: #C7D395;
    color: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    display: inline-block;
    font-size: 40px;
    line-height: 42px;
    margin-right: 10px; }
  .btn-white:hover, .btn-white:focus {
    background-color: #C7D395;
    color: #65346c; }
    .btn-white:hover span, .btn-white:focus span {
      background-color: #65346c;
      color: #C7D395; }

@media (min-width: 768px) and (max-width: 991px) {
  .btn-white {
    font-size: 18px; } }
@media (max-width: 767px) {
  .btn-purple, .btn-white {
    font-size: 11px;
    line-height: 48px;
    padding: 0 15px; }
    .btn-purple span, .btn-white span {
      width: 25px;
      height: 25px;
      font-size: 20px;
      line-height: 25px; } }
footer {
  color: #65346c;
  padding: 70px 105px; }
  footer label {
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    font-weight: bold;
    margin-bottom: 0;
    color: #65346c; }
  footer a, footer span {
    font-size: 15px; }
  footer .column-one {
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.3;
    color: #65346c; }
  footer .footer-info {
    min-height: 100px; }
  footer .sidebar-logo {
    background-image: url("assets/rafp-logo-violet.svg");
    width: 230px;
    height: 155px;
    background-size: cover;
    margin: 0; }
  footer .center {
    text-align: center; }
    footer .center a {
      margin: 20px auto 0;
      transition: none; }

@media (max-width: 767px) {
  footer {
    padding: 25px 35px; }
    footer .column-one {
      font-size: 20px; }
    footer .sidebar-logo {
      width: 170px;
      height: 129px; }
    footer .design-luciole {
      position: relative;
      transform: rotate(0deg);
      right: 0;
      top: 0;
      width: auto; } }

/*# sourceMappingURL=style.css.map */