@charset "UTF-8";
  /* Welcome to Compass.
   * In this file you should write your main styles. (or centralize your imports)
   * Import this file using the following HTML or equivalent:
   * <link href="/css/main.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
  }
  video { cursor: pointer; }

  html {
    line-height: 1;
    font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (1600 - 300)));
  }

  ol, ul {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
  }

  q, blockquote {
    quotes: none;
  }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none;
  }

  a {
    text-decoration: none;
  }
  a img {
    border: none;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
  }

  /* The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. */
  /* ------------------------------------------------------ */
  /* TYPO
  /* ------------------------------------------------------ */
  /* ------------------------------------------------------ */
  /* COLORS
  /* ------------------------------------------------------ */
  /* Text colors */
  /* Defaults neutral colors for borders & background*/
  /* Forms */
  /* Theme */
  /* BREAK POINTS, may have to adapt at the beginning, depending of the application */
  /* ------------------------------------------------------ */
  /* CSS EASING ANIMATION
  /* ------------------------------------------------------ */
  /* ------------------------------------------------------ */
  /* MIXIN
  /* ------------------------------------------------------ */
  /* Responsive
  /* ------------------------------------------------------ */
  /* standard styles for commonly used HTML, Base styles: projects defaults html elements, class-one-rule helpers for flexible html edition, fontfaces configuration */
  /*@import "base/reset";*/
  /* ------------------------------------------------------ */
  /* Base styles: projects defaults
  /* ------------------------------------------------------ */
  html, body {
    font-family: 'universlt-boldcn', helvetica, arial;
    font-size: 1rem;
    /* Indiquer la font-size du body par d├®faut*/
    overflow: auto;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    outline: none;
    color: #fff;
    background: #212121;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    /* For some Androids */
    -webkit-font-smoothing: antialiased;
  }

  img {
    max-width: 100%;
  }

  video {
    max-width: 100%;
  }

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    overflow: auto; /* scrollbar will appear if the viewport is too tight to display all the popin content */
    opacity: 0;
    visibility: hidden;
  
    /* design */
  
    background-color: rgba(0,0,0,0.5);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.smart-popin:target {
    opacity: 1;
    visibility: visible;
}
.smart-popin .sp-table {
    display: table;
    height: 100%;
    width: 100%;
}
.smart-popin .sp-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px; /* this space is important to let the box-shadow exceed around the popin - so it has to be at least equal to the shadow radius */
}
.smart-popin .sp-body {
    position: relative; /* to allow absolute positionning inside */
    z-index: 1; /* to ensure the popin body will be over the .sp-back layer */
    width: auto; /* by default the width of the wider element inside */
    min-width: 300px;  /* standard width for xs smartphones (320px) minus 2*10px (.sp-cell margins) */
    margin: 0 auto;
    text-align: center;
  
    /* design */
  
    background-color: #000;
    padding: 2em;
    -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
    box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
    width: 66.66%; /* 66.66 looks good :-) */;
}
.smart-popin .sp-body * {
    max-width: 100%; /* this is a security to prevents wide elements such as img to stretch the popin beyond the viewport width */
}
.smart-popin .sp-back { /* only used to get clicks out of the popin body */
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    display: block;
}
.smart-popin .sp-close {
    position: absolute;
    top: 0;
    right: 0;

    width: 36px;
    height: 36px;

    text-align: center;
    line-height: 36px;
    font-size: 1.6em;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}


  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  @keyframes loading {
    from {
      left: -200px;
      width: 30%;
    }
    50% {
      width: 30%;
    }
    70% {
      width: 70%;
    }
    80% {
      left: 50%;
    }
    95% {
      left: 120%;
    }
    to {
      left: 100%;
    }
  }
  .italic {
    font-style: italic;
  }

  .cap {
    text-transform: uppercase;
  }

  .grey {
    color: #a1a1a1;
  }

  .hide {
    display: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .white {
    color: white;
  }

  .purple {
    color: #59217e;
  }
  .darkpurple {
    color: #34003c;
  }

  .red {
    color: #ff0000;
  }

  .bleu-light {
    color: #19afe4;
  }

  .error {
    color: red;
  }

  .nomargin {
    margin: 0;
  }

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

  /* #wrapper, #main {
    width: 990px;
    background: #fff;
    margin: 0 auto;
    height: 100%;
    position: relative;
    min-height: 800px;
  } */

  /* ------------------------------------------------------ */
  /* STANDARD
  /* ------------------------------------------------------ */
  @font-face {
    font-family: "universltstd";
    src: url("../fonts/UniversLTStd.otf");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "universlt-boldcn";
    src: url("../fonts/UniversLTStd-BoldCn.otf");
    font-weight: bold;
    font-style: normal;
  }
  @font-face {
    font-family: "universlt-light";
    src: url("../fonts/UniversLTStd-Light.otf");
    font-weight: normal;
    font-style: normal;
  }
  /*
  @font-face {
    font-family: "universltstd";
    src: url("../fonts/UniversLTStd.otf");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "universltstd";
    src: url("../fonts/UniversLTStd.otf");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "universltstd";
    src: url("../fonts/UniversLTStd.otf");
    font-weight: normal;
    font-style: normal;
  } */


  /* contains everything that takes part in laying out the site or application, defining the global wireframe*/
  header, footer {
    background-color: #000;
    width: 100%;
  }
  a{
    color: #ffffff;
    cursor: pointer;
  }
  #header {
    height: auto;
    margin: 0 auto 2.875rem;
    padding: 1.5625rem 0 0.375rem;
    text-align: center;
    font-weight: bold;
  }

  .header-date {
    display: block;
    color: #ffffff;
    font-size: 0.75rem;
    margin-bottom: 2.5625rem;
  }
  .header-title {
    color: #ffffff;
    margin-top: 1.5625rem;
    font-size: 4.5625rem;
    line-height: 0.97;
  }

  footer {
    height: 91px;
    margin: 0 auto;
    padding: 1.5625rem 0 0.375rem;
    text-align: center;
    font-weight: bold;
  }

  #content .article-block {
    width: 33rem;
    height: auto;
    margin: 0 auto 1rem;
  }
  #content .article-block p{
    text-align: justify;
  }
  #content .article-block:not(:first-of-type) {
    border-top: 1px solid #59217e;
  }
  #content .article-block .article-content_title {
    text-align: center;
    font-size: 2.5625rem;
    letter-spacing: 3px;
    margin: 3.125rem auto 1.4375rem;
  }
  #content .article-block .article-content_visuel {
    margin-bottom: 2.25rem;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #content .article-block .article-content_visuel::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(148deg, #ac0477 25%, #E7108A 93%);
  }
  #content .article-block .article-content_visuel img,
  #content .article-block .article-content_visuel video {
    position: relative;
    width: 100%;
    border: 1px solid #dfcce3;
    background-color: white;
  }
  #content .article-block .article-content_visuel .btn-player{
    width: auto;
    height: auto;
    position: absolute;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
    transition: all 0.75s ease-out;
    border: none;
    background-color: transparent;
  }
  #content .article-block .article-content_audio {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
  }
  .hide {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
    z-index: -1;
    transition: all 0.75s ease-out;
  }
  #content .article-block .article-content_subtitle {
    font-size: 1.25rem;
    line-height: 1.47;
    margin-bottom: 1.5rem;
  }
  #content .article-block .article-content_text {
    font-family: 'universlt-light', helvetica, arial;
    font-weight: bold;
    font-size: 1.0625rem;
    line-height: 1.47;
    margin-bottom: 2.125rem;
  }

  @media screen and (max-width: 500px) {
    html {
      font-size: 12px;
    }
    #content .article-block {
      width: 90vw;
      height: auto;
      margin: 0 auto 1rem;
      font-family: helvetica, arial;
    }
    #content .article-block:not(:first-of-type) {
      border-top: 1px solid #59217e;
    }
    #content .article-block .article-content_title {
      text-align: center;
      font-size: 2.5625rem;
      letter-spacing: 3px;
      margin: 3.125rem auto 1.4375rem;
    }
    #content .article-block .article-content_visuel {
      margin-bottom: 2.25rem;
      text-align: center;
      width: 100%;
      height: 56.37vw;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #content .article-block .article-content_visuel::before {
      top: 4vw;
      left: 2vw;
      width: 100%;
      height: 92%;
    }
  }