@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; }
  html, body {height:100%;}

  

.reseau {
  display: inline-block;
  margin:0 10px 0px 0;
  font-size:20px;
}

.cursor_wait { cursor:wait!important;}

.book_col:hover { cursor:pointer;}

/*------------------------------*/

      .section{
        /*padding-top: 100px;*/
        /*min-width:100%;*/ 
        /*min-height:100%;*/
        /*font-size: 34px;*/
        /*color:#FFF;*/
        /*opacity: 0.8;*/
        display:inline-block;
        /*background-position:center center;*/
        /*background-size:contain;*/
        /*background-repeat:no-repeat;*/
      }
      
      .img_section{
        /*min-width:100%;*/ 
        /*min-height:100%;*/
        /*display:inline-block;*/
      }
      
      .div_portrait {
        height:100%;
        text-align:center;
      }      
      
      
      #hr_regle{
        position: fixed;
        height: 2px;
        background-color: #FF0000;
        top: 50%;
        margin-top: -1px;
        left: 0; right: 0;
      }

      .hr_section{
        margin:8px 40px 10px 40px;
        height: 1px;
        /*border-bottom: 1px solid #333333;*/
      }

      .hr_section1{
        margin:17px 40px 20px 40px;
        height: 1px;
        border-bottom: 1px solid #333333;
      }

      .hr_section2{
        margin:17px 40px 23px 40px;
        height: 140px;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;
      }
      

      .current{
        border-bottom: 3px solid #50c1e9;
      }
      .nav-link{
        display: block;
        width: 65px;
        position: relative;
        line-height: 20px;
        padding-bottom: 15px;
        padding-top: 15px;
        box-sizing: border-box;
        float:left;
        text-decoration: none;
      }
      
      .container {
        width: 1170px;
      }

      .navbar-header {
        width: 70px;
        float:left;
      }

      .navbar {
        display: none;
      }

      .nav {
        height: 45px;
        font-family: sans-serif;
        font-size: 14px;
      }
      
      .nav > li {
        display: block;
        position: relative;
      }
      
      .navbar-custom {
        background-color: rgba(255, 255, 255, 0.9);
        border: medium none;
        border-radius: 0;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2000;
      }


/*------------------------------*/

  @media (min-width:826px){
    #entete {
      margin:0px 0 0 0;
    }
    .players {width:85% !important; margin-right:auto !important; margin-left:auto !important;}
  }

  @media all and (max-width:825px){
    #entete {
      margin:60px 0 0 0;
    }
    .players {width:100% !important; margin-right:auto !important; margin-left:auto !important;}
  }

  body{
    /*font-family: "Roboto",Helvetica,Arial,sans-serif;*/
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 1.2rem;
    color:#000000;
    /*background-color:#000110;*/
    background-color:#ffffff;
    overflow-x:hidden;
  }

  .div_paysage {
    height:100%;
    text-align:center;
  }      
      
  
    
  .titre_bandeau{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompSemibld,cbRegular,Akkurat,Verdana;
    font-variant: small-caps;
  }
    
  .titre_bandeau2{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompSemibld,cbRegular,Akkurat,Verdana;
    /*font-variant: small-caps;*/
  }
    
  .titre_bandeau3{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompSemibld,cbRegular,Akkurat,Verdana;
    font-variant: all-small-caps;
  }
    
  .titre_bandeau4{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompBold,cbRegular,Akkurat,Verdana;
    font-variant: small-caps;
  }
    
  .titre_bandeau5{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompBold,cbRegular,Akkurat,Verdana;
    /*font-variant: small-caps;*/
  }
    
  .titre_bandeau6{ 
    display:inline-block;
    font-size: 50px;
    color:#000000;
    margin: 15px 40px 0px 40px;
    padding: 0px 0px 10px 0px;
    font-family: TungstenCompBold,cbRegular,Akkurat,Verdana;
    font-variant: all-small-caps;
  }
    
  .titre_bandeau_petit{ 
    font-size: 50px;
    color:#000000;
    letter-spacing: 3px;
  }
    
  .titre_bandeau_moyen{ 
    font-size: 80px;
    color:#000000;
    letter-spacing: 3px;
  }
    
  .titre_bandeau_grand{ 
    font-size: 120px;
    color:#000000;
    letter-spacing: 3px;
  }
    
  .div_dotgotop {
    width:100%;
    text-align:right;
  }
  
  .dotgotop {
    margin:0px 40px 0px 0px;
  }
  
  
  
  .titre{
    font-size: 1.6rem;
  }
  
  .text_gris{
    color:#898989;
  }
  
  .smallcaps{
    font-variant:small-caps;
  }
  
  .trait_gris{
    border-top:1px solid #888888;
    margin:22px 0px 18px 0px;
  }
  
  .trait_gris_clair{
    border-top:1px solid #333333;
    margin:22px 40px 18px 40px;
  }
  
  .marge_150{
    margin:150px 0px 0px 0px;
  }
  
  .contributeur_table{
    display:table;
    margin:60px 40px 40px 40px;
  }
  
  .contributeur_ligne{
    display:table;
    width:100%;
    margin:10px 0px 0px 0px;
  }
  
  .contributeur_col1{
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    display:table-cell; 
    width:190px;
    font-size: 16px;
    color: #898989;
    letter-spacing:3px;
  }
  
  .contributeur_col2{
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    display:table-cell; 
    width:-moz-calc(100% - 190px);
    width:-webkit-calc(100% - 190px);
    width:calc(100% - 190px);
    font-size: 16px;
    color: #898989;
  }
  
  .img_onglet_son{
    width:30px;
    margin:0 10px 0 0;
  }
  
  .img_onglet_video{
    width:65px;
    margin:0 10px 0 0;
  }
  
  .onglet_off{
    font-size: 12px;
    color:#898989;
  }
  
  .onglet_on{
    font-size: 16px;
    color:#000000;
  }
  
  .media_auteur{
    font-size: 14px;
    color:#000000;
    margin:0 0 0 63px;
    font-variant:small-caps;
  }
  
  .media_texte{
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 16px;
    color:#000000;
    margin:0 40px 0 63px;
  }
  
  .hideContent {
    overflow: hidden;
    /*line-height: 1.4em;*/
    height: 1.4em;
  }

  .showContent {
    /*line-height: 1em;*/
    height: auto;
  }
  .showContent{
    height: auto;
  }
  
  .show-more {
    font-size: 15px;
    color:#000000;
    margin:0 40px 0 63px;
  }

  .show-more a { 
    text-decoration: none; 
    color:#898989;
  }
  .show-more a:hover { color:#000000; text-decoration: none; }
  

  /* width */
  html::-webkit-scrollbar { width: 7px; }
  /* Track */
  html::-webkit-scrollbar-track { background: #ffffff; }
  /* Handle */
  html::-webkit-scrollbar-thumb { background: #000000; }
  /* Handle on hover */
  html::-webkit-scrollbar-thumb:hover { background: #000000; }

  /* width */
  #div_texte::-webkit-scrollbar { width: 7px; }
  /* Track */
  #div_texte::-webkit-scrollbar-track { background: #ffffff; }
  /* Handle */
  #div_texte::-webkit-scrollbar-thumb { background: #000000; }
  /* Handle on hover */
  #div_texte::-webkit-scrollbar-thumb:hover { background: #000000; }

  /* width */
  #div_quickstart_right::-webkit-scrollbar { width: 7px; }
  /* Track */
  #div_quickstart_right::-webkit-scrollbar-track { background: #ffffff; }
  /* Handle */
  #div_quickstart_right::-webkit-scrollbar-thumb { background: #000000; }
  /* Handle on hover */
  #div_quickstart_right::-webkit-scrollbar-thumb:hover { background: #000000; }
  
  
  
  .div_player{
    display:table;
    width:99%;
    overflow-x:hidden;
  }

  #player2-container .mejs__time-buffering, #player2-container .mejs__time-current, #player2-container .mejs__time-handle,
  #player2-container .mejs__time-loaded, #player2-container .mejs__time-hovered, #player2-container .mejs__time-marker, #player2-container .mejs__time-total {
    height: 2px;
  }

  #player2-container .mejs__time-total {
    margin-top: 9px;
  }
  #player2-container .mejs__time-handle {
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    top: -5px;
    cursor: pointer;
    display: block;
    position: absolute;
    z-index: 2;
    border: none;
  }
  #player2-container .mejs__time-handle-content {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
  }

  #tableau_haut_quickstart {
    display:table; 
    width:100%;
    height:auto;  
    padding:20px 20px 5px 20px;
    height:auto;
  }

  #tableau_haut {
    display:table; 
    width:100%;
    height:auto;  
    padding:0px 20px 5px 20px;
    height:auto;
  }

  #tableau_bas2 {
    display:table; 
    width:auto; 
    height:-moz-calc(100% - 300px);
    height:-webkit-calc(100% - 300px);
    height:calc(100% - 300px);
    min-height:-moz-calc(100% - 300px);
    min-height:-webkit-calc(100% - 300px);
    min-height:calc(100% - 300px);
    max-height:-moz-calc(100% - 300px);
    max-height:-webkit-calc(100% - 300px);
    max-height:calc(100% - 300px);
    padding:5px 20px 20px 20px;
    text-align:center;
  }
  
  #tableau_bas {
    display:table; 
  }

  #img_bas_gauche {
    width:100%;
    padding: 0 5px 0 20px; 
  }

  .img_bas_droit {
    width:49%;
    padding: 0 0px 0 5px;
  }

  #tableau_bas_gauche {
    display:table-cell;
    width:50%;
    text-align:right;
  }

  #tableau_bas_droit {
    display:table-cell;
    width:50%;
    padding: 0 15px 0 0px;
    vertical-align:top;
    text-align:left;
  }

  #img_bas_centre {
    width:50%; 
    padding:0 5px 0 20px; 
  }

  #img_bas_gauche2 {
    width:100%;
    padding:0 5px 0 20px; 
  }
  
  #img_bas_droit2 {
    width:100%;
    padding:0 0px 0 5px; 
  }
  
  #tableau_bas_gauche2 {
    display:table-cell;
    width:50%;
    text-align:right; 
  }

  #tableau_bas_droit2 {
    display:table-cell;
    width:50%;
    text-align:left;
    vertical-align:top;
    padding: 0 20px 0 0px; 
  }
  
  .playlist_titre{
    font-size: 14px !important;
    letter-spacing: 1px;
    margin:0 40px 0 63px;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    /*font-variant:small-caps;*/
  }

  .playlist_soustitre{
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 14px;
    color:#000000;
    margin:0 40px 0 63px;
    /*font-variant:small-caps;*/
    letter-spacing: 1px;
  }
  
  .playlist_puce{
    width: 8px;
    height: 15px;
    float: left;
    margin: -1px 0px 0px 40px;
    visibility: hidden;
  }

  .playlist_lien{
    color:#898989;
    /*color:#898989;*/
  }


  .copyright{ 
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 15px;
    color:#A8A6A6;
    /*letter-spacing: 3px;*/
  }

  .citation{ 
    padding: 0 0 0 10%;
    font-family: 'Libre Baskerville', serif;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 18px;
    line-height: 31px;
    font-style: italic;
    color:#333333;
    /*letter-spacing: 3px;*/
  }

  .sous_citation{ 
    padding: 0 0 0 10%;
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 15px;
    line-height: 21px;
    color:#333333;
  }

  .sous_citation a {
    color: #aaaaaa;
    text-decoration: underline;
  }
  .sous_citation a:hover {
    color: #000000;
    text-decoration: underline;
  }      
  
  .sous_section{ 
    width: 50%;
    margin: 10px 40px 50px;
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 15px;
    line-height: 21px;
    color:#333333;
  }

  .sous_section a {
    color: #aaaaaa;
    text-decoration: underline;
  }
  .sous_section a:hover {
    color: #000000;
    text-decoration: underline;
  }      
  
  .question{ 
    color:#000000;
  }

  .fleche{ 
    font-family: AustieBostArrowMania;
    color:#000000;
    font-size: 25px;
  }

  .lien_img{ 
    height: auto;
    width: 14px;
  }


  /*@media (min-width:641px){*/
  @media (min-width:826px){
    .marge_index {
      display:none;
      display:inline-block;
      height:100px;
    }
    
    .tabulation_0{margin:0 0 0 0px;}
    .tabulation_1{margin:0 0 0 70px;}
    .tabulation_2{margin:0 0 0 140px;}
    .tabulation_3{margin:0 0 0 210px;}
    .tabulation_4{margin:0 0 0 280px;}

    #div_quickstart_left {
      display:inline-block;
      float:left;
      width:50%;
      height:auto;
      padding:0px 0 0 0;
    }
    
    .div_texte {
      display:inline;
      /*float:left;*/
      /*width:50%;*/
      height:auto;
      /*border-bottom:1px solid #aaaaaa;*/
      padding:0px 0 0 0;
    }
    
    #div_playlist {
      display:inline-block;
      /*float:left;*/
      width:50%;
      height:auto;
      /*border-top:1px solid #aaaaaa;*/
      /*border-right:1px solid #aaaaaa;*/
      /*border-bottom:1px solid #aaaaaa;*/
      padding:0px 0px 0px 0px;
      text-align: left;
      overflow-x:hidden;
      font-size: 0.875rem;
      color:#333333;
    }
    
    
    #div_quickstart_right {
      display:inline-block;
      float:left;
      width:50%;
      height:auto;
      padding:0px 0px 0px 0px;
      text-align: left;
      overflow-x:hidden;
      font-size: 0.875rem;
      color:#aaaaaa;
    }

    .titre_divtext{ 
      /*display:inline-block;*/
      width: 50%;
      margin: 19px 40px 0px 40px;
      padding: 0px 0px 10px 0px;
      text-align:left;
    }
    
    .titre_divtext_trait{ 
      display: table-cell;
      padding:0 0 5px 0;
      border-bottom:1px solid #333333;
    }
    
    .divtext_titre{ 
      /*display:block;*/
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbBold,Akkurat,Verdana,sans-serif;
      font-size: 56px;
      line-height: 65px;
      /*font-size: 44px;*/
      color:#000000;
      /*letter-spacing: 3px;*/
    }
    
    .divtext_soustitre{ 
      display:block;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      font-size: 21px;
      line-height: 25px;
      color:#000000;
      /*letter-spacing: 3px;*/
    }
    
    .div_img_encart_gauche{ 
    }
    
    .credit{ 
      display:inline-block;
      float:left;
      margin:30px 10px 0 90px;
      text-align:left;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      font-size: 15px;
      line-height: 21px;
      color:#333333;
    }
    
    .credit_titre{ 
      text-align:left;
      color:#000000;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }
    
    .titre_bio{ 
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      color:#000000;
    }
    
    .titre_divtext_left{ 
      display:inline-block;
      float: left;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      font-size: 18px;
      color:#000000;
      margin: 10px 10px 0px 5%;
      padding: 0px 0px 10px 0px;
      /*border-bottom:1px solid #333333;*/
      letter-spacing: 3px;
    }
    
    .soustitre_divtext_left{ 
      letter-spacing: 0px;
    }
    
    .texte_divtext_left{ 
      margin: 10px 40px 50px 40px;
      width:50%;
      font-size: 18px;
      line-height: 27px;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      color:#333333;
      text-align:left;
    }
  
    .texte_divtext_head{ 
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      font-size: 21px;
      line-height:30px;
      color:#333333;
      margin: 30px 40px 0px 40px;
      width:50%;
      text-align:left;
    }
    
    
    .titre_bandeau_entete{ 
      display:inline-block;
      font-size: 50px;
      color:#000000;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: TungstenCompSemibld,cbRegular,Akkurat,Verdana;
      font-variant: all-small-caps;
      line-height: 70px;
    }
    .titre_bandeau_entete_petit{ 
      font-size: 50px;
      color:#000000;
      letter-spacing: 3px;
    }
      
    .titre_bandeau_entete_moyen{ 
      font-size: 80px;
      color:#000000;
      letter-spacing: 3px;
    }
      
    .titre_bandeau_entete_grand{ 
      font-size: 120px;
      color:#000000;
      letter-spacing: 3px;
    }
    
    .div_bouton_sommaire {
      display:none;
      position:absolute;
      top:110px;
      right:15px;
    }
    
    .div_entete_home {
      padding:80px 3% 0 10%;
    }
    
    .section_sommaire{ 
      position:absolute;
      width:50%;
      margin: 91px 0 0 10%;
      /*margin: 200px 0 0 10%;*/
      padding: 0 0 90px 0;
      top:0px;
      background:rgba(0,0,0,0.5);
      color:white;
    }
    
    .titre_sommaire{ 
      margin:85px 0 30px 0;
      text-align:left;
      font-size: 17px;
      line-height:23px;
      font-family: 'cbBold';
      color:#000000;
      letter-spacing: 3px;
      border-bottom: 1px solid #333333;
    }
    
    .div_playlist_home{
      padding:40px 3% 0 10%;
    }
  
    .playlist_titre_home{
      font-size: 21px;
      line-height:28px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      letter-spacing: 3px;
      color:#000000;
      margin:0 0 0 0px;
    }
  
    .playlist_soustitre_home{
      letter-spacing: 0px;
      font-size: 18px;
      line-height:27px;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      color:#000000;
      margin:0 0 20px 0px;
    }
  
    .bandeau_ruban{ 
      position:absolute;
      width:100%;
      height:91px;
      top:0px;
      left:0px;
      /*background:rgba(11,13,15,0.7);*/
      background:rgba(0,0,0,0.71);
      color:white;
    }
    
    .bandeau_gauche{ 
      display:inline-block;
      float:left;
      font-size: 17px;
      letter-spacing: 3px;
      color:#000000;
      margin: 38px 0px 0px 143px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }

    .bandeau_droit{ 
      display:inline-block;
      float:right;
      font-size: 17px;
      letter-spacing: 3px;
      color:#000000;
      margin: 38px 143px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }
    
    .hr_texte{
      width: 70%;
      margin:17px 40px 0px 5%;
      height: 1px;
      border-bottom: 1px solid #333333;
    }
    
    .marge_image_texte{
      display: inline-block;
      margin-top:80px;
    }
    
  }
  
  #saisie_recherche_livres{
    display:block;
    float:right;
    width: 200px;
    margin:0px 5% 25px 0;
    padding: 0px 15px 0px 15px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #707070;
    background-color: #ffffff;
    color:#000000;
    font-size: 15px;
  }
    
  /*@media all and (max-width:640px){*/
  @media all and (max-width:825px){
    .marge_index {
      display:none;
      display:inline-block;
      height:100px;
    }
    
    .tabulation_0{margin:0 0 0 0px;}
    .tabulation_1{margin:0 0 0 20px;}
    .tabulation_2{margin:0 0 0 40px;}
    .tabulation_3{margin:0 0 0 60px;}
    .tabulation_4{margin:0 0 0 80px;}

    
    #div_quickstart_left {
      display:inline-block;
      float:left;
      min-width:100%;
      max-width:100%;
      height:auto;
      /*border:1px solid #aaaaaa;*/
      padding:0px 0 0 0;
    }
    
    .div_texte {
      display:inline;
      /*float:left;*/
      min-width:100%;
      max-width:100%;
      height:auto;
      /*border-bottom:1px solid #aaaaaa;*/
      padding:0px 0 0 0;
    }
    
    #div_playlist {
      display:inline-block;
      /*float:left;*/
      min-width:100%;
      max-width:100%;
      height:auto;
      /*border-top:1px solid #aaaaaa;*/
      /*border-left:1px solid #aaaaaa;*/
      /*border-right:1px solid #aaaaaa;*/
      /*border-bottom:1px solid #aaaaaa;*/
      padding:20px 20px 20px 20px;
      text-align: left;
      overflow-x:hidden;
      font-size: 0.875rem;
      color:#333333;
    }
    
    #div_quickstart_right {
      display:inline-block;
      float:left;
      min-width:100%;
      max-width:100%;
      height:auto;
      /*border-top:1px solid #aaaaaa;*/
      /*border-left:1px solid #aaaaaa;*/
      /*border-right:1px solid #aaaaaa;*/
      /*border-bottom:1px solid #aaaaaa;*/
      padding:20px 20px 20px 20px;
      text-align: left;
      overflow-x:hidden;
      font-size: 0.875rem;
      color:#aaaaaa;
    }
  
    .titre_divtext{ 
      display:inline-block;
      /*width: 40%;*/
      margin: 15px 0px 0px 0px;
      padding: 0px 20px 10px 20px;
      text-align:left;
    }
    
    .titre_divtext_trait{ 
      display: table-cell;
      padding:0 0 5px 0;
      border-bottom:1px solid #333333;
    }
    
    .divtext_titre{ 
      /*display:block;*/
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbBold,Akkurat,Verdana,sans-serif;
      /*font-size: 56px;*/
      font-size: 37px;
      color:#000000;
      /*letter-spacing: 3px;*/
    }
    
    .divtext_soustitre{ 
      /*display:block;*/
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      font-size: 21px;
      line-height: 25px;
      color:#000000;
      /*letter-spacing: 3px;*/
    }
    
    .div_img_encart_gauche{ 
      display:none;
    }
    
    .credit{ 
      display:block;
      margin:0 10px 0 143px;
      text-align:left;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      font-size: 15px;
      line-height: 21px;
      color:#333333;
    }
    
    .credit_titre{ 
      text-align:left;
      color:#000000;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }
    
    .titre_bio{ 
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      color:#000000;
    }
    
    .titre_divtext_left{ 
      display:inline-block;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      font-size: 18px;
      color:#000000;
      margin: 10px 40px 0px 40px;
      padding: 0px 0px 10px 0px;
      /*border-bottom:1px solid #333333;*/
      letter-spacing: 3px;
    }
    
    .soustitre_divtext_left{ 
      letter-spacing: 0px;
    }
    
    .texte_divtext_left{ 
      margin: 10px 40px 50px 40px;
      font-size: 18px;
      line-height: 27px;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      color:#333333;
      text-align:left;
    }
  
    .texte_divtext_head{ 
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      font-size: 21px;
      line-height:30px;
      color:#333333;
      margin: 30px 40px 0px 40px;
      text-align:left;
    }
  
    .titre_bandeau_entete{ 
      display:inline-block;
      font-size: 30px;
      color:#000000;
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: TungstenCompSemibld,cbRegular,Akkurat,Verdana;
      font-variant: all-small-caps;
      line-height: 55px;
    }
    
    .titre_bandeau_entete_petit{ 
      font-size: 30px;
      color:#000000;
      letter-spacing: 3px;
    }
      
    .titre_bandeau_entete_moyen{ 
      font-size: 60px;
      color:#000000;
      letter-spacing: 3px;
    }
      
    .titre_bandeau_entete_grand{ 
      font-size: 100px;
      color:#000000;
      letter-spacing: 3px;
    }
    
    .div_bouton_sommaire {
      display:none;
      position:absolute;
      top:90px;
      right:15px;
    }
    
    .div_entete_home {
      padding:50px 3% 0 10%;
    }
    
    .section_sommaire{ 
      /*position:absolute;*/
      width:95%;
      margin: 0px 0 0 0;
      top:0px;
      background:rgba(0,0,0,0.5);
      color:white;
    }
    
    .titre_sommaire{ 
      margin:0px 0 50px 5%;
      text-align:left;
      font-size: 17px;
      line-height:20px;
      font-family: 'cbBold';
      color:#000000;
      letter-spacing: 3px;
      border-bottom: 1px solid #333333;
    }
    
    .div_playlist_home{
      padding:50px 0 0 0%;
    }
  
  
    .playlist_titre_home{
      padding:10px 0 0 5%;
      font-size: 21px;
      line-height:28px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
      color:#000000;
      margin:0 0 0 0px;
    }
  
    .playlist_soustitre_home{
      font-size: 18px;
      line-height:27px;
      font-family: cbLight,Akkurat,Verdana,sans-serif;
      color:#000000;
      margin:0 0 20px 5%;
    }
  
    .bandeau_ruban{ 
      position:absolute;
      width:100%;
      height:60px;
      top:0px;
      left:0px;
      background:rgba(11,13,15,0.7);
      color:white;
    }
    
    .bandeau_gauche{ 
      display:inline-block;
      float:left;
      font-size: 17px;
      letter-spacing: 3px;
      color:#000000;
      margin: 21px 0px 0px 65px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }

    .bandeau_droit{ 
      display:inline-block;
      float:right;
      font-size: 17px;
      letter-spacing: 3px;
      color:#000000;
      margin: 21px 30px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-family: cbRegular,Akkurat,Verdana,sans-serif;
    }
    
    .hr_texte{
      margin:17px 40px 0px 40px;
      height: 1px;
      border-bottom: 1px solid #333333;
    }
    
    .marge_image_texte{
      display: inline-block;
      margin-top:17px;
    }
    
    
  }
  
@media (min-width:801px) and (max-width:900px){
    .marge_index {
      display:inline-block;
      height:550px;
    }
  
}

@media (min-width:901px) and (max-width:1000px){
    .marge_index {
      display:inline-block;
      height:380px;
    }
  
}

@media (min-width:1001px) and (max-width:1150px){
    .marge_index {
      display:inline-block;
      height:250px;
    }
  
}



  #div_texte ul {
    padding:0px 0 0 15px;
  }

  #div_quickstart_right ul {
    padding:0px 0 0 15px;
  }

  .div_playlist a { 
    text-decoration: none; 
  }
  .div_playlist a:hover { color:#000000; text-decoration: none; }
  
  .playlist_titre a { 
    color:#898989;
    text-decoration: none; 
  }
  .playlist_titre a:hover { color:#000000; text-decoration: none; }
  
  .div_quickstart_left a { 
    text-decoration: none; 
  }
  .div_quickstart_left a:hover { color:#000000; text-decoration: none; }
  
  
  .bandeau_gauche a { 
    color:#ffffff;
    text-decoration: none; 
  }
  .bandeau_gauche a:hover { color:#aaaaaa; text-decoration: none; }
  
  .bandeau_droit a { 
    color:#ffffff;
    text-decoration: none; 
  }
  .bandeau_droit a:hover { color:#aaaaaa; text-decoration: none; }
  
  .div_playlist_home a { 
    color:#000000;
    text-decoration: none; 
  }
  .div_playlist_home a:hover { color:#aaaaaa; text-decoration: none; }
  
  .divtext_titre a { 
    color:#aaaaaa;
    text-decoration: none; 
  }
  .divtext_titre a:hover { color:#000000; text-decoration: none; }
  
  
  .divtext_soustitre a { 
    color:#aaaaaa;
    text-decoration: none; 
  }
  .divtext_soustitre a:hover { color:#000000; text-decoration: none; }
  
  
  
  .texte_divtext_head a { 
    color:#aaaaaa;
    text-decoration: underline; 
  }
  .texte_divtext_head a:hover { color:#000000; text-decoration: underline; }
  
  .texte_divtext_left a { 
    color:#aaaaaa;
    text-decoration: underline; 
  }
  .texte_divtext_left a:hover { color:#000000; text-decoration: underline; }
  
  .credit a { 
    color:#aaaaaa;
    text-decoration: underline; 
  }
  .credit a:hover { color:#000000; text-decoration: underline; }
  
  #div_texte a { 
    color:#aaaaaa;
    text-decoration: underline; 
  }
  #div_texte a:hover { color:#000000; text-decoration: underline; }
  
  #div_quickstart_right a { 
    color:#aaaaaa;
    text-decoration: underline; 
  }
  #div_quickstart_right a:hover { color:#000000; text-decoration: underline; }
  
  #titre_playlist{ 
    color:#000000;
    padding: 0px 27px 0px 27px;
  }
  
  #titre_quickstart_left{ 
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 24px;
    color:#000000;
    margin: 40px 40px 0px 40px;
    border-bottom:1px solid #333333;
    letter-spacing: 3px;
  }
  
  #texte_quickstart_left{ 
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 16px;
    color:#000000;
    margin: 40px 120px 40px 40px;
  }
  
  #titre_divtext_right{ 
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 24px;
    color:#000000;
    margin: 40px 40px 22px 40px;
    padding: 0px 0px 10px 0px;
    border-bottom:1px solid #333333;
    letter-spacing: 3px;
  }
  
  .deselect_playlist{ 
    color:#898989;
    margin:0 0 0 26px;
    padding: 0px 27px 0px 37px;
    background-image:url("icon_play_off.png");
    background-repeat:no-repeat;    
    background-position: 0px -7px
  }
  
  .select_playlist{ 
    display: inline-block;
    width:100%;
    color:#000000;
    text-decoration:none;
    /*border-top:1px solid #000000;*/
    /*border-right:7px solid #000000;*/
    /*border-bottom:1px solid #000000;*/
    /*border-left:7px solid #000000;*/
    margin:0 0 0 26px;
    padding: 0px 27px 0px 37px;
    background-image:url("icon_play_on.png");
    background-repeat:no-repeat;    
    background-position: 0px -7px
  }

  .triangle_ombre {
    position:fixed;
    top:0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1067px 800px 0 0;
    border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
    -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.0));
  }

  .triangle_texte {
    position: relative;
    top:-1071px;
    padding:15px 0 0 15px;
    text-align: left;
    width: 650px;
    height: 126px;
    margin: 0px;
  }

  .bandeau_titre{ 
    font-family: "Roboto",Helvetica,Arial,sans-serif;
    color: #0b0d0f;
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.7143em;
      text-transform: uppercase;
      margin:0 0 0 20px;
  }

  .lightbox-info-title::before {
    font-family: "Roboto",Helvetica,Arial,sans-serif;
      background-color: #1efa46;
      content: "";
      display: block;
      height: 0.125rem;
      left: 0;
      position: absolute;
      top: 0.625rem;
      width: 1.25rem;
      margin:0 0 0 20px;
  }

  *, *::before, *::after {
      box-sizing: border-box;
  }
  *, *::before, *::after {
      box-sizing: border-box;
  }
  .lightbox-info-title {
      color: #0b0d0f;
  }
  .lightbox-info-title {
      /*max-height: 3rem;*/
  }
  .lightbox-info-title {
      color: white;
      display: block;
      max-height: 3.5rem;
      overflow: hidden;
      padding-left: 2.5rem;
      position: relative;
  }
  #triangle{
    display:table-cell;
    float:right;
    position:relative;
    width:1002px;
    min-width: 1002px;
    height:1369px;
    background:url(gep_fond5.png) no-repeat 0 0px transparent;
  }
  
  #div_langues{
    position:absolute;
    top:10px;
    right:45px;
  }
  
  #triangle_haut{
  }
  
  #triangle_bas{
    float:right;
    width:250px;
    margin:115px 0 0 0;
    font-size:15px;
    color:#F5F5F5;
  }
  
  #triangle_bas_2{
    clear:both;
    float:right;
    width:415px;
    margin:10px 0 0 0;
    font-size:15px;
    color:#F5F5F5;
  }
  
  #triangle_titre_1{
    margin:70px 0 0 100px;
    font-size:18px;
    font-weight:bold;
    color:#242452;
  }
  
  #triangle_ligne_1_1{
    margin:0px 0 0 115px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_1_2{
    margin:0px 0 0 130px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_1_3{
    margin:0px 0 0 145px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_titre_2{
    margin:20px 0 0 160px;
    font-size:18px;
    font-weight:bold;
    color:#242452;
  }
  
  #triangle_ligne_2_1{
    margin:0px 0 0 175px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_2_2{
    margin:0px 0 0 190px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_2_3{
    margin:0px 0 0 205px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_titre_3{
    margin:20px 0 0 215px;
    font-size:18px;
    font-weight:bold;
    color:#242452;
  }
  
  #triangle_ligne_3_1{
    margin:0px 0 0 230px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_3_2{
    margin:0px 0 0 245px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_3_3{
    margin:0px 0 0 260px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_titre_4{
    margin:20px 0 0 290px;
    font-size:18px;
    font-weight:bold;
    color:#242452;
  }
  
  #triangle_ligne_4_1{
    margin:0px 0 0 305px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_4_2{
    margin:0px 0 0 320px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }
  
  #triangle_ligne_4_3{
    margin:0px 0 0 335px;
    font-size:17px;
    font-weight:bold;
    color:#0E833B;
  }

  
  .videocontent2 {
    width:70%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* These declarations force the video element to resize with the browser. */
  .videoContainer .mejs-container.svg.mejs-video,
  .videoContainer .mejs-overlay.mejs-layer.mejs-overlay-play,
  .videoContainer .mejs-poster.mejs-layer,
  .videoContainer .mejs-captions-layer.mejs-layer,
  .videoContainer video{
    margin: 0 !important;
    text-align: center;
    width: 100% !important;
    height: auto !important;
  }

  /* This forces the dimensions of the video container to retain the 4:3
  ratio. Adjust percentage if your video is
  a different ratio. (16:9 is 56.25%). This works because "padding"
  attribute dimensions are always calculated using
  element width. Something like the "height" attribute would derive its value
  from the parent element's height, which we don't want. */

  .videoContainer{
    padding-bottom: 75%;
    position: relative;
  }


  /* These declarations force the child elements that MEJS creates to render
  relative to the videoContainer object. */

  .videoContainer .mejs-layer,
  .videoContainer .mejs-container,
  .videoContainer .mejs-overlay {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }


#mep_0 {
    width: 90% !important;
    margin:0 25px 0 25px !important;
    /*background-color:#000110;*/
    background-color:#ffffff;
}

/* ---------------------- */

  @-webkit-keyframes cf3FadeInOut {
   0% {
     opacity:1;
   }
   25% {
    opacity:1;
  }
  75% {
    opacity:0;
  }
  100% {
   opacity:0;
 }
}

@-moz-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@-o-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

#cf3 {
  /*position:relative;*/
  /*height:100%;*/
}
#cf3 img {
  position:absolute;
}

#cf3 img.top {
  -webkit-animation-name: cf3FadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: alternate;

  -moz-animation-name: cf3FadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 5s;
  -moz-animation-direction: alternate;

  -o-animation-name: cf3FadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 5s;
  -o-animation-direction: alternate;

  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}
      
/* ---------------------- */
 #ecrire:before { content: "hello"; } 
 #ecrire:after { content: "icplab.org"; } 
/* ---------------------- */

.rouge00 {
  color: #ff0000;
  font-size: 11px;
}

.coins_arrondis_4 {
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box;
  -webkit-border-radius:4px 4px 4px 4px;
  -moz-border-radius:4px 4px 4px 4px;
  -ms-border-radius:4px 4px 4px 4px;
  border-radius:4px 4px 4px 4px;
  /*behavior: url(/lib/js/PIE.htc);*/
}

.coins_arrondis_6 {
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box;
  -webkit-border-radius:6px 6px 6px 6px;
  -moz-border-radius:6px 6px 6px 6px;
  -ms-border-radius:6px 6px 6px 6px;
  border-radius:6px 6px 6px 6px;
  /*behavior: url(/lib/js/PIE.htc);*/
}

.textarea_partage { 
  width:100%;
  padding:2px 2px 2px 2px;
  border:1px solid #c4c4c4;
  background: #efefef;
  color: #4d4d4d;
  font-size:15px;
  font-family:SourceCodePro,Helvetica,Arial,sans-serif;
  resize:vertical;
}

.label_partage { 
  display:block;
  width:100%;
  margin:15px 10px 0px 0;
  line-height:25px;
  font-family: cbRegular,Akkurat,Verdana,sans-serif;
  font-size:16px;
  color:#7a7a7a;
}

.input_text_partage {
  width:100%;
  padding: 2px;
  border:1px solid #c4c4c4;
  font-size:15px;
  line-height:25px;
  font-weight:normal;
  background: #efefef;
  color: #4d4d4d;
  font-family:SourceCodePro,Helvetica,Arial,sans-serif;
}

#envoyer_partager{
  width:100%;
  height: 40px;
  margin:15px 0px 15px 0;
  font-family:SourceCodePro,Helvetica,Arial,sans-serif;
  font-family: cbRegular,Akkurat,Verdana,sans-serif;
  font-size:16px;
}

.input_erreur { background:#ffdddd; border:1px solid #ff9999; }
#form_partager .formError { display:none; } /* neutralise validationEngine */

/* ---------------------- */


#footer a { 
  color:#000000;
  text-decoration: none; 
}
#footer a:hover { color:#aaaaaa; text-decoration: none; }

#ping  { 
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  color:#888888;
}
#ping:hover {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  color:#000000;
}



#email_newsletter {
    height:56px;
    margin: 0 0 5px 0px;
    padding: 6px 15px 5px 15px;
    border: 1px solid #fff;
    text-align: center;
    font-family:SourceCodePro,Helvetica,Arial,sans-serif;
    font-size:17px;
    background:#ffffff;
    color:#000000;
    text-align:left;
}

.btn {
  display: inline-block;
  float:left;
  height:40px;
  padding: 3px 15px 5px 15px;
  /*border: 1px solid #fff;*/
  text-align: center;
  font-family:SourceCodePro,Helvetica,Arial,sans-serif;
  font-family: cbRegular,Akkurat,Verdana,sans-serif;
  font-size:13px;
  line-height: 40px;
  background:#ffffff;
  color:#000000;
  text-decoration: none; 
}

.reseau_img {
  height: auto;
  margin: 0 0 -2px 0;
  width: 20px;
}

.footer_img {
  height: auto;
  margin: 0 0 -5px 0;
  width: 19px;
}

#signup_newsletter { 
  padding: 0 30px 0 30px;
  border: 1px solid #ffef02;
  background:#ffffff;
  color:#000000;
  text-decoration: none; 
}
#signup_newsletter:hover { 
  border: 1px solid #000000;
  background:#ffef02;
  color:#ffffff;
  text-decoration: none; 
}


.mce_inline_error{
/*
  position: absolute;
  margin:-40px 0 0 0!important;
  display:none !important;
*/
  clear: both;
  float: left;
  border: 1px solid #ff9999 !important;
}

#mce-responses{
  width:515px;
  margin: 0 82px 0 0px;
  font-family: cbRegular,Akkurat,Verdana,sans-serif;
  font-size: 13px;
}
#mce-error-response{
  color:#ff9999;
  margin: 0 0 10px 0;
}
#mce-error-response a { 
  color:#aaaaaa;
}

#mce-error-response a:hover { color:#000000;  }

#mce-success-response{
  margin: 0 0 10px 0;
}

#mc-embedded-subscribe { 
  padding: 0 30px 0 30px;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  border-right: 1px solid #707070;
  border-left: 1px solid #707070;
  background:#ffffff;
  color:#333333;
  text-decoration: none; 
  font-family: cbBold,Akkurat,Verdana,sans-serif;
}

#mc-embedded-subscribe:hover { 
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  border-right: 1px solid #707070;
  border-left: 1px solid #707070;
  background:#000000;
  color:#ffffff;
  text-decoration: none; 
}


@media (min-width:826px){
  #footer{ 
    display: block;
    clear:both;
    margin: 0px 0px 0px 40px;
    bottom:0px;
  }
  .footer_gauche{ 
    display:inline-block;
    float:left;
    margin: 0px 40px 20px 10%;
    padding: 0px 0px 0px 0px;
    text-align:left;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: 1px;
    color:#000000;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }

  .footer_milieu{ 
    display:inline-block;
    float:left;
    margin: 0px 5px 20px 0px;
    padding: 0px 0px 0px 0px;
    text-align:left;
    font-size: 13px;
    line-height: 30px;
    letter-spacing: 1px;
    color:#000000;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }
  
  .footer_droit{ 
    float:right;
  }


  .lien_footer{ 
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0px 30px 0px 0px;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }
  
  #form_newsletter{
    clear:both;
    float: left;
  }
  .form_newsletter_mailchimp{
    display: inline-block;
    clear:both;
    float: left;
    width:390px;
    
    height:40px;
    margin: 0 0 5px 0px;
    padding: 6px 15px 5px 15px;
    border: 1px solid #707070;
    text-align: center;
    font-family:SourceCodePro,Helvetica,Arial,sans-serif;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size:15px;
    background:#ffffff;
    color:#000000;
    text-align:left;
  }
  #email_newsletter {
    display: inline-block;
    float:left;
    width:500px;
  }
  .signup_newsletter {
    clear:none;
    float:left;
    margin: 0 82px 5px 14px;
    background-color: #ffffff;
  }
  #signup_newsletter {
    float:left;
  }
  #ping  {
    float: left;
    clear: none;
    display: block;
    margin: 0 0 5px 15px;
  }
  #mc_embed_signup_scroll{
    background:#ffffff;
    float:left;
  }

  #mc_embed_signup{
    background:#ffffff;
    clear:left;
    font:14px Helvetica,Arial,sans-serif;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }

  .copyright_titre{ 
    display:block;
    float:right;
    margin:20px 82px 0px 0;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 14px;
    color:#333333;
    letter-spacing: 1px;
  }

}

@media all and (max-width:825px){
  #footer{ 
    display: block;
    clear:both;
    margin: 0px 0px 0px 0px;
    bottom:0px;
  }
  .footer_gauche{ 
    display:block;
    float:none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align:center;
    font-size: 13px;
    line-height:35px;
    letter-spacing: 3px;
    color:#000000;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }

  .footer_milieu{ 
    display:block;
    float:none;
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
    text-align:center;
    font-size: 13px;
    line-height:35px;
    letter-spacing: 3px;
    color:#000000;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }

  .footer_droit{ 
    float:none;
  }

  .lien_footer{ 
    font-size: 13px;
    letter-spacing: 3px;
    margin: 0px 0px 0px 0px;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }
  #form_newsletter{
    clear:both;
    float: none;
    margin: 0 0 15px 0px;
  }
  .form_newsletter_mailchimp{
      display: inline-block;
    clear:both;
    float: none;
    margin: 0 0 15px 0px;
      width:100%;
      
    height:40px;
    padding: 6px 15px 5px 15px;
    border: 1px solid #707070;
    text-align: center;
    font-family:SourceCodePro,Helvetica,Arial,sans-serif;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size:15px;
    background:#ffffff;
    color:#000000;
    text-align:left;
  }
  
  #mc-embedded-subscribe { 
    float: none;
  }

  
  #email_newsletter {
      display: inline-block;
      float:none;
      width:100%;
  }
  .signup_newsletter {
    clear:both;
    float:none;
    margin: 0 0 50px 0px;
    background-color: #ffffff;
  }
  #signup_newsletter {
    float: none;
  }
  #ping  {
    float: none;
    clear: both;
    display: block;
    margin: 0 0 5px 0px;
    /*
    margin:0 40px 0 40px;
    width: 100%;
    */
  }
  #mc_embed_signup_scroll{
    background:#ffffff;
    float:none;
    margin: 0 2px 0 0;
  }

  #mc_embed_signup{
    background:#ffffff;
    clear:left;
    font:14px Helvetica,Arial,sans-serif;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
  }

  .copyright_titre{ 
    display:block;
    float:none;
    margin:10px 0px 20px 0;
    font-family: cbRegular,Akkurat,Verdana,sans-serif;
    font-size: 14px;
    color:#333333;
    letter-spacing: 1px;
  }

}

@media only screen and (max-width:768px) {
  .btn {
    margin-left: 0px;
    margin-right: 0px;
    height:50px;
    line-height: 15px;
    /*vertical-align: top;*/
  }
}

.btn span {
  display: block;
  color: #000000;
  font-family:SourceCodePro,Helvetica,Arial,sans-serif;
  font-size:13px;
}

.text-placeholderjs { 
  background:#ffffff;
  color:#aaaaaa;
  font-size:13px;
}

.input_erreur { background:#ffdddd; border:1px solid #ff9999!important; }
#form_newsletter .formError { display:none; } /* neutralise validationEngine */


/* ---------------------- */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@media (min-width:501px){
  .modal-content {
    width: 370px;
  }
}

@media all and (max-width:500px){
  .modal-content {
    width: 320px;
  }
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: #333333;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #ffffff;
    color: #000000;
    font-size: 12px !important;
    font-family: cbLight,Akkurat,Verdana,sans-serif !important;
    line-height: 40px;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #ffffff;
    color: #000000;
}

/* ---------------------- */

@media (min-width:801px){
  .div_list_books{
    display:block;
  }

  .line_books_titre{
    font-family: cbRegular,Akkurat,Verdana,sans-serif !important;
    color:#000000 !important;
    border-bottom:1px solid #333333 !important;
  }

  .line_books{
    display:block;
    height: 40px;
    margin:0px 5% 0px 5%;
    padding:18px 0 0px 0;
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 16px;
    line-height:16px;
    clear:both;
    text-align:left;
    color:#333333;
    /*border-bottom:1px solid #333333;*/
  }

  .book_col_1{
    display:block;
    width:6%;
    float:left;
    line-height:20px;
  }

  .book_col_2{
    display:block;
    width:20%;
    float:left;
    line-height:20px;
  }

  .book_col_3{
    display:block;
    width:25%;
    float:left;
    line-height:20px;
    padding:0 5px 0 0;
  }

  .book_col_4{
    display:block;
    width:25%;
    float:left;
    font-family: cbRegular,Akkurat,Verdana,sans-serif !important;
    color:#000000 !important;
    line-height:20px;
    padding:0 5px 0 0;
  }

  .book_col_5{
    display:block;
    width:10%;
    float:left;
    line-height:20px;
  }

  .book_col_6{
    display:block;
    width:8%;
    float:left;
    line-height:20px;
  }
  
  .book_col_7{
    display:block;
    width:6%;
    float:left;
    line-height:20px;
  }
  
  .url_lien{ 
    position: relative;
    bottom: 1px;
  }
}

@media all and (max-width:800px){
  .div_list_books{
    display:block;
  }

  .line_books_titre{
    /*display:none !important;*/
    font-family: cbRegular,Akkurat,Verdana,sans-serif !important;
    color:#000000 !important;
    border-bottom:1px solid #333333 !important;
  }

  .line_books{
    display:block;
    height: 104px;
    margin:0px 5% 0px 5%;
    padding:18px 0 0px 0;
    font-family: cbLight,Akkurat,Verdana,sans-serif;
    font-size: 16px;
    line-height:20px;
    clear:both;
    text-align:left;
    color:#333333;
    border-bottom:1px solid #333333;
  }

  .book_col_1{
    display:block;
    float:left;
  }

  .book_col_2{
    display:block;
    float:left;
    margin:0 0 0 10px;
  }

  .book_col_3{
    display:block;
    clear:both;
    float:none;
  }

  .book_col_4{
    display:block;
    float:none;
    font-family: cbRegular,Akkurat,Verdana,sans-serif !important;
    color:#000000 !important;
  }

  .book_col_5{
    display:block;
    float:left;
  }

  .book_col_7{
    display:block;
    float:left;
    margin:0 0 0 10px;
  }
  
  .book_col_6{
    display:block;
    float:left;
    margin:0 0 0 10px;
  }
  
  .url_lien{ 
    position: relative;
    bottom: -1px;
  }
}

.trait_line_books{
  display:none;
  display:block;
  clear:both;
  float:left;
  width:90%;
  height:1px;
  border-top:1px solid #333333;
  /*margin:5px 5% 0px 5%;*/
  margin:0px 5% 0px 5%;
}

.line_books_on{
  /*font-family: cbRegular,Akkurat,Verdana,sans-serif;*/
  color:#000000;
  border-top:1px solid #aaaaaa;
}

.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 1.0s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

figure.effect-none {
	background: #ffffff;
  margin:0 0 0px 0;
}

.legende_bottom  {
  text-align:left;
	color: #000000;
  padding:10px 10px 10px 10px;
  font-size: 15px;
  font-family: cbLight,Akkurat,Verdana,sans-serif;
  line-height: 18px;
}

.legende_bottom  a {
  color: #aaaaaa;
  text-decoration: underline;
}

.legende_bottom  a:hover {
  color: #aaaaaa;
  text-decoration: underline;
}

.legende_bottom_titre {
  margin:0px 0px 5px 0px !important;
}