/* général */

html, body {
  height: 100%;
  margin: 0;
  background-color: #000000;
    
}

/* accueil */
.menu-blanc {
  float:right;
  padding-top: 2rem;
  display:inline-block;
}
#menunoir {
  display: block;
  position: absolute;
  top:0;
  right:0;
  padding: 2rem;
}

li {
  display: block;
}

#desktop-img-titre-evenement {
position: absolute;
margin-right:auto; 
margin-left:auto; 
right:0; 
left:0; 
bottom:0;
margin-bottom:-2em;
padding:4em;
width:85%;
}

#desktop-img-titre-forum {
position: absolute;
margin-right:0; 
margin-left:0; 
right:0; 
left:0; 
bottom:0;
padding-bottom:5em;
margin:2em;
}

#desktop-img-titre-film {
position: absolute;
margin-right:auto; 
margin-left:auto; 
right:0; 
left:0; 
bottom:0;
padding-bottom:4em;
margin:2em;
width:75%;
}

#desktop-img-titre-livre {
position: absolute;
margin-right:0; 
margin-left:0; 
right:0; 
left:0; 
bottom:0;
margin-top:0em;
padding-bottom:3.5em;
margin-left:2em;
margin-right:2em;
}
#mobile-img-titre-evenement{
display:none;
}

#mobile-img-titre-forum {
display:none;
}

#mobile-img-titre-livre {
display:none;
}

#mobile-img-titre-film {
display:none;
}

.block-evenement {
  height: 100%;
  background-image: url("./titre-evenement-bg.jpg");
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}

.block-forum {
  height: 100%;
  background-image: linear-gradient(#009fe3, #ffed00);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}


.block-livre {
  height: 100%;
  background-image: linear-gradient(#ffed00, #ff0000);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}

.block-film {
  height: 100%;
  background-image: linear-gradient(#ff0000, #009fe3);
  background-color: black;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  padding: 2rem;
}


#page-wrap { 
  background-color: black;
  display:inline-block;
  max-width: 100%; 
}

#programme {
  height: 70em;
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#ffed00, #ff0000);
  padding: 2rem;
  padding-bottom:6rem;
  height: auto;
  overflow: hidden;
}

#inscriptions {
  background-color: black; 
  padding: 2rem;
}

#infos {
  background-image: linear-gradient(#ff0000, #009fe3); 
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#partenaires {
  background-color: black; 
  padding: 2rem;
  min-height:100%;
}

#corps-film {
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#009fe3, #ffed00);
  padding: 2rem;
  height: auto;
  overflow: hidden;
}

#corps-livre {
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#ff0000, #009fe3);
  padding: 2rem;
  height: auto;   
  overflow: hidden;
}

#footer-forum {
  background-color: black; /* navigateurs ne supportant pas les dégradés */
  background-image: linear-gradient(#7ad3db, #ffed00);
  padding: 2rem; 
  overflow: hidden;
  height: auto;   
  max-height:10%;
}

#footer-livre-film {
  background-color: black;
  padding: 2rem;
  overflow: hidden;
  height: auto;  
  max-height:10%;
}

/* ancres */

#one, #two, #three, #four, #five {
  background-color: black;
  display:inline-block;
  min-width: 100%;
  height: 0px;
  outline: none;  
}



#fleches {
  max-width: 8000%; 
  margin:0 auto;
  text-align:center;    
}

#fleche-film-livre { 
  max-width: 8000%; 
}

.fleche-forum-bas { 
    clear:left;
    bottom: 0px;
    height: 50px;
    display: block;  
    left:0;
    right:0;
    margin-top:2em;
    margin-left: auto; 
    margin-right: auto; 
}

.fleches {
  width: 2.5em;
  padding-top:25px;
  margin-bottom:25px;
}

.fleche-film-livre {
    position: absolute;
    bottom: 25px;
    height: 50px;
    display: inline-block;  
    left:0;
    right:0;
    margin-left: auto; 
    margin-right: auto; 
}

.fleche-film-livre-bas {
    clear:left;
    bottom: 0px;
    height: 50px;
    display: block;  
    left:0;
    right:0;
    margin-left: auto; 
    margin-right: auto; 
}

.fleche-film-livre-bas-mobile {
    display:none; 
}

.fleche-forum-bas-mobile {
    display:none; 
}

#lien-en {
    padding:2em;
    position: absolute;
    bottom: -25px;
    height: 50px;
    display: inline-block;  
    right:0;
    margin-left: auto; 
    margin-right: auto; 
}

/* 4 colonnes */

section
{
    clear:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
   -webkit-column-count:4; /* Opera, Safari, Google Chrome */
    -moz-column-count: 4; /* Firefox */
    column-count: 4; /* Internet Explorer */
    padding-bottom:4%;
    columns: 4;
}

#deuxcolonnesgauche
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:2; /* Opera, Safari, Google Chrome */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; /* Internet Explorer */
    padding-bottom:4%;
    width:49%;
    padding-right:1%;
}

#unecolonnegauche
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:49%;
    padding-right:1%;
}


#deuxcolonnesdroite
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:2; /* Opera, Safari, Google Chrome */
    -moz-column-count: 2; /* Firefox */
    column-count: 2; /* Internet Explorer */
    padding-bottom:4%;
    width:49%;
    padding-left:1%;
}

#colonnesimple
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:24%;
    padding-left:1%;
}


#section1
{
    background-color: black;
    padding: 2rem;
}

#section2
{
  padding-bottom: 0rem;
}


.sectiontitre {
  -webkit-column-count:1; /* Opera, Safari, Google Chrome */
  -moz-column-count: 1; /* Firefox */
  column-count: 1; /* Internet Explorer */
  break-inside: avoid-column;
  /* Pour Firefox : */
  page-break-inside: avoid;
  /* Pour WebKit : */
  break-before: column;
}

.sectiontitre-mobile {
display:none;
}


#colonnes-footer
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    padding-bottom:4%;
    width:45%;
    padding-right:1%;
}

#desktop-img-forum-droite {
   float:left;
   width:48.5%;
   padding-left:1.5%;
   padding-bottom:2%;
}

#desktop-img-forum-gauche {
   float:left;
   width:48.5%;
   padding-right:1.5%;
   padding-bottom:2%;
}


#desktop-legendegauche
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    margin-top:-1.2%;
    width:45%;
}

#mobile-legendegauche
{
    display:none;
}

#desktop-legendedroite
{
    float:left;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-count:1; /* Opera, Safari, Google Chrome */
    -moz-column-count: 1; /* Firefox */
    column-count: 1; /* Internet Explorer */
    margin-top:-1.2%;
    width:45%;
    padding-left:6.5%;
}

#mobile-legendedroite
{
    display:none;
}

/* partie programme forum */
    
#titres-programme{
    clear:left;
    background: none;  
    width: 70%;
    position: relative;
    left: 15%;  
    min-width: 45%;   
    margin-top:5%;
}

.lien-menu-noir {
     text-decoration: none;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#000000;
}

.lien-menu-blanc {
     text-decoration: none;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: medium;    
     background-color: transparent;
     color:#ffffff;
}

.lien-menu-noir-actif {
     text-decoration: none;
     border-bottom: 2px solid black;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#000000;
}

.lien-menu-blanc-actif {
     text-decoration: none;
     border-bottom: 2px solid #ffffff;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: medium;    
     background-color: transparent;
     color:#ffffff;
}

a, label {
  text-decoration: none;
  color: #000000;
  font-weight: medium;
}


.lien-menu-blanc: hover {
     text-decoration: none;
     border-bottom: 2px solid #ffffff;
     text-align: right;
     background-color: none;
     display:block;
     float:right;
     clear:right;
     line-height: 1.5;
     padding-top:5px;
     outline: none;   
     font: 1.4em 'Roboto', sans-serif;
     font-weight: bold;    
     background-color: transparent;
     color:#ffffff;
}

.menu a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu2 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu3 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;     
}

.menu4 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;      
}

.menu5 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;     
}

.menu6 a {
  display: block;
  padding-top: 0px;       
  padding-bottom: 10px;       
}

.drop-down a {
  min-width: 90px;
}

.drop-down-menu {
  display: block; 
  border-bottom-style: solid;  
  border-width : 1px;
  border-bottom-color: #000000; 
  line-height: 1;
  outline: none;   
  font: 1em 'Roboto', sans-serif;
  font-weight: medium;    
  color: #000000;
  text-align: left; 
} 
    
.menu-title {
  cursor: pointer;
  line-height: 1;
  outline: none;   
  font: 1em 'Roboto', sans-serif;
  font-weight: medium;    
  color: #000000;
  text-align: left;           
}

.menu-title {
  display:block;
  padding: 10px 0px;
}

.activate {
  display: none;
  position: absolute;
  cursor: pointer;
  width: 65%;
  height: 40px;
  margin: 0 0 0 0;
  opacity: 0;
}
    
.last {
  border-bottom-style: solid;  
  border-width : 1px;
  border-bottom-color: #000000;  
  width:65%;
}    

.invisible{
  opacity: 0;
}

.menu a, .drop-down-menu {
  background: none;     
}

.menu a:hover, .drop-down-menu:hover {
  background: none;  
}
    
.drop-down a {
  background: none;
}

.drop-down a:hover {
  background: none;
}

.menu  {    
  background: none;  
  width: 70%;
  position: relative;
  left: 15%;
}

.menu3  {  
  background: none;  
  width: 70%;
  position: relative;
  left: 15%;
}

.menu2  {    
  float: left;    
  background: none;  
  width: 100%;    
  margin-left:2%;  
}

.menu4  {   
  background: none;  
  width: 70%;
  position: relative;
  left: 15%; 
}

.menu5  {   
  background: none;  
  width: 70%;
  position: relative;
  left: 15%;
}

.menu6  {   
background: none;  
  width: 70%;
  position: relative;
  left: 15%; 
}

:checked ~ .menu-title {
  background: none;
}

.drop-down {
  max-height: 0;
  overflow: hidden;  
}

.drop-down a {
  background: none;
}

.activate:checked ~ .drop-down {
  max-height: 400px;        
}

.last {
  border-style:hidden;    
}    

.drop-down, .menu a, .drop-down-menu {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}


/* texte */

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

.h1-noir {
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 0px;
color: #000000;
text-align: center;    
}

.h2-blanc {
clear:right;
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 30px;
color: #ffffff;
text-align: center;    
}

.h2-noir {
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 30px;
color: #000000;
text-align: center;    
}

.bouton-pdf { 
float:left;
font: 1em 'Roboto', sans-serif;
font-weight: normal;    
color: #000000;
text-align: center; 
margin-top:-20px;
margin-left:46%;
margin-bottom:2em;
width:5%;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
padding: 0.5em 1em 0.5em 1em;
}

p, ul, h1 { 
margin: 0 0 1rem 0;
outline: none;    
}

.grand-texte-blanc {
display:inline-block;
line-height: 1.2;
outline: none;   
font: 2.5em 'Roboto', sans-serif;
font-weight: bold;    
padding: 2em;
color: #ffffff;
text-align: center;      
}

.grand-texte-noir {
line-height: 1.2;
outline: none;   
font: 2em 'Roboto', sans-serif;
font-weight: bold;    
padding: 2em;
color: #000000;
text-align: center;      
}

.petit-texte-noir {
line-height: 1;
outline: none;   
font: 1em 'Roboto', sans-serif;
font-weight: medium;    
color: #000000;
text-align: left;      
}

.petit-texte-noir-gras {
line-height: 1;
outline: none;   
font: 1em 'Roboto', sans-serif;
font-weight: bold;    
color: #000000;
text-align: left;      
}

.petit-texte-noir-mobile {
display:none    
}

.petit-texte-noir-gras-mobile {
display:none    
}

.petit-texte-blanc {
line-height: 1;
outline: none;   
font: 1em 'Roboto', sans-serif;
font-weight: medium;    
color: #ffffff;
text-align: left;      
}

.petit-texte-blanc-legendes {
line-height: 1;
outline: none;   
font: 0.8em 'Roboto', sans-serif;
font-weight: thin;    
color: #ffffff;
text-align: left;      
}

.logopartenaires1 {
 clear:left;
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 width:10%; 
}

.logopartenaires2 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 width:08%;
}

.logopartenaires3 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 width:10%;
}

.logopartenaires4 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 width:15%;
}

.logopartenaires5 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 width:15%;
}

.logo-footer-0 {
 float:left;
 padding: 4rem;
 left:auto;
 right:auto;
 margin-top:-12%;
 width:15%; 
}

.logo-footer-02 {
 float:left;
 padding: 2rem;
 left:auto;
 right:auto;
 margin-top:-5%;
 width:10%; 
}


.logo-footer-1 {
 clear:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:2%; 
}

.logo-footer-2 {
 float:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:5%; 
}

.logo-footer-3 {
 float:left;
 padding: 0.5rem;
 left:auto;
 right:auto;
 margin-top:-3%;
 width:4%; 
}