@import url('https://fonts.googleapis.com/css?family=Ubuntu');
/* général */

h1, h2, h3, h4, h5, p, br, body, html, ul, li, em, img, iframe{ margin:0; padding:0; font-weight:normal; list-style:none; border:none;}
li{float:left; }
p{font-size:11px;}
a{	color:#000; text-decoration:none;  cursor:pointer;  }
body{font-family:"OpenSansRegular", Arial, Helvetica, sans-serif;  text-align: center;  width:100%;}
img{max-width:100%;}
br{margin-bottom:6px;}

/* couleur des rubriques */

.page, .page a:hover{	border-color:#ccc;  }
.page .active strong, .page a:hover strong,.page-back{	background-color:#b4bebe;  }

.actu, .actu a:hover{	border-color:#ccc;  }
.actu .active strong, .actu a:hover strong,.actu-back{	background-color:#b4bebe;  }

.profil, .profil a:hover{	border-color:#ccc;  }
.profil .active strong, .profil a:hover strong,.profil-back{	background-color:#b4bebe;  }

.livre, .livre a:hover, .livre h6.active{	border-color:#E0BF00;  }
.livre-titre, .livre p a{color:#E0BF00; }
.livre .active strong, .livre a:hover strong, .livre-back{background-color:#E0BF00;}

.anim, .anim a:hover , .anim h6.active{	border-color:#E84B0F; }
.anim-titre, .anim p a{ color:#E84B0F;  }
.anim .active strong, .anim a:hover strong, .anim-back {background-color:#E84B0F;}

.web, .web a:hover, .web h6.active{	border-color:#85A629;  }
.web-titre, .web p a{	color:#85A629;  }
.web .active strong, .web a:hover strong, .web-back{background-color:#85A629;}

.jeu, .jeu a:hover, .jeu h6.active{	border-color:#DC9888;  }
.jeu-titre,.jeu p a{	color:#DC9888;  }
.jeu .active strong,.jeu a:hover strong, .jeu-back{background-color:#DC9888;}

.graphic, .graphic a:hover, .graphic h6.active{	border-color:#006699;  }
.graphic-titre,.graphic p a{	color:#006699;  }
.graphic .active strong,.graphic a:hover strong, .graphic-back{background-color:#006699;}

.atelier, .atelier a:hover, .atelier h6.active{	border-color:#E84B0F;  }
.atelier-titre,.atelier p a{	color:#E84B0F;  }
.atelier .active strong,.atelier a:hover strong, .atelier-back{background-color:#E84B0F;}

.expo, .expo a:hover, .expo h6.active{	border-color:#E0BF00;  }
.expo-titre, .expo p a{color:#E0BF00; }
.expo .active strong, .expo a:hover strong, .expo-back{background-color:#E0BF00;}

/* tailles */
body{max-width:1110px; margin:0 auto 0;}
.global { width:100%; margin:0 auto; text-align: left; padding:0;}
#nav { width:45%; margin:0; padding:0; float:left; margin-top: 23px;}/*max-width:444px;*/
#image{width:60%; float:left;}/*max-width:630px; */
#navLeft{clear:both; float:left; overflow:hidden;width:35%; margin: 22px 0 0 0; }
#navRight-scroll{float: left; overflow: hidden; padding:0; width: 58%; margin:13px 0 0 0; }


/* toolbar (langues, facebook...) */
.toolbar{position:relative; float:right; margin-right:12px;height:40px;position:relative;}
#nav .toolbar a img {padding:1px;}
.toolbar a img {opacity:0.5; margin:0;width:18px;height:18px;}
.toolbar a {position:relative;}
.toolbar a:hover img{opacity:1;}
.toolbar a p{position: absolute;
display: none;
color: #b4bebe;
font-size: 11px;
top: -23px;
left: -200%;
background: white;
padding: 2px 0;
border-radius: 3px;
text-transform:uppercase;}
.toolbar a:hover p{position:absolute; display:block; width: 110px; text-align: center; }


.toolbar a.flag{opacity:0.6;}/* border-right:solid 1px #b4bebe; */
.toolbar a.flag img{float:left;margin-right:4px;}/* border-right:solid 1px #b4bebe; */
.toolbar a.flag{border-right: solid 1px #b4bebe;
width: 50px;
padding-right: 5px;
margin-right: 3px;}
.toolbar a.flag .txt{color: #b4bebe; text-transform:uppercase;font-size: 12px; float:left; padding:3px 0;}
.toolbar a.flag .mainFlag{display:inline-block;}
.toolbar a.flag .nextFlag{display:none;}
.toolbar a.flag:hover .mainFlag{display:none;}
.toolbar a.flag:hover .nextFlag{display:inline-block;}
.toolbar a.flag:hover {opacity:1;}

/*.toolbar img{ height:20px;}*/

/* header et nav portfolio */
header{ color:#b4bebe; width:100%; line-height: 15px;}
header a:hover img{ opacity:1;}
header a img{ opacity:0.7;}
header p a, #nav li a strong, footer p a {color:#b4bebe; width:100%;}
header img{float:left; margin: 5px 20px 5px 22px; width: 50px; height: 50px;}
header h1{ /*font-family:"OpenSansSemibold", Arial, Helvetica, sans-serif;*/ text-transform: uppercase; font-size:13px; }
header em{ font-size:11px; font-style:normal; }
header p a:hover, footer p a:hover{text-decoration:underline; color:#b4bebe; }
#headerLeft{float:left;width: 230px;height: 83px;}

/* barre des catégories */
#nav{float:left; clear:both; }
#nav li h2{float: left; font-size: 11px; text-align: center; text-transform: uppercase; width: 100%; }/*margin: -5px 0;*/
#nav li strong{font-weight:normal;  width: 100%;/*margin:0 0 0 2px;*/}


#menu{clear:both;}
#menu li.actu a strong, #menu li.profil a strong{opacity:1; width:100%; font-family:"OpenSansRegular", Arial, Helvetica, sans-serif;} /* 0.5 */ 
#menu li.actu a:hover strong, #menu li.profil a:hover strong, #menu li .active a strong{opacity:1;}
#nav li .active strong, #nav li a:hover strong{padding:2px 4px; border-radius:3px; margin:0 0 0 0; color:#fff;}

#nav li .active img, #nav li a:hover img{opacity:1;}
#menu li a img{opacity:0.7;}

/*#menu li.actu img, #menu li.atelier img{border-right:solid 1px #b4bebe;}*/
/*#menu li.livre img, #menu li.profil img{margin-left:2px;}*/
#menu li{width:12.5%; margin:0; }
#menu li br {line-height: 0;}
#menu img{width:100%; max-width:35px; }
#menu a{opacity:1; clear:both; width:100%;}
#menu a:hover {opacity:1; -webkit-transition: opacity 0.2s ease; 
-moz-transition: opacity 0.2s ease; 
-ms-transition: opacity 0.2s ease; 
-o-transition: opacity 0.2s ease; 
transition: opacity 0.2s ease; }
/*
#menu li a strong,#menu li .active strong{opacity:0;}*/

/* menu de gauche */
#navLeft h3{display:none; font-size: 13px; text-transform: uppercase; clear:both; margin:-5px; padding: 15px 5px 5px 15px;}/*border-bottom:solid 1px #ebebeb;*/
#navLeft ul{clear:both; float:left; width:100%;}
#navLeft li{clear:both; width:100%;
-webkit-transition: padding 0.2s ease; 
-moz-transition: padding 0.2s ease; 
-ms-transition: padding 0.2s ease; 
-o-transition: padding 0.2s ease; 
transition: padding 0.2s ease;
  } /*border-bottom:solid 1px #ebebeb;*/
#navLeft li a{clear:both;color:#b4bebe;width:100%;

  } /*border-bottom:solid 1px #ebebeb;*/
#navLeft li h4{ padding:3px; width:100%;}
#navLeft li h4.-all{ padding:0px 3px;}
#navLeft .active{border-right-width:1px; background:#f7f9f9; padding:10px 0;} 

#navLeft li img{
float: left;
border: medium none;
height: 26px;
width: 26px;
border-radius:99px;

}


#navLeft li .pparent{
	  display: flex; /* contexte sur le parent */
  flex-direction: column; /* direction d'affichage verticale */
  justify-content: center; /* alignement vertical */
  height:30px;
  padding: 0 0 0 11px;
}
#navLeft li p{ font-size:12px;color:#b4bebe; /*padding:5px 0 0 34px; */

-webkit-transition: padding color 0.2s ease, color 0.2s; 
-moz-transition: padding 0.2s ease, color 0.2s;  
-ms-transition: padding 0.2s ease, color 0.2s; 
-o-transition: padding 0.2s ease, color 0.2s; 
transition: padding 0.2s ease, color 0.2s; }/* margin: 9px 0 0;*/
#navLeft li em{ display:none;font-size: 11px;font-style:normal;color:#64646E;}
#navLeft li a:hover p,#navLeft li a:hover em,#navLeft .active p,#navLeft .active em{color:#333; }/*font-family:"OpenSansSemibold", Arial, Helvetica, sans-serif;*/
#navLeft  li p.plus{font-size: 12px;
font-style: normal;
color: #b4bebe;
text-transform: uppercase;
margin-top: 7px;
opacity: 0.6;}
#navLeft  li p a:hover p.plus{color:#64646E;}
#navLeft  li.page{border:none;}



/* menu de droite */
.rub.active{opacity:1;}
.rub{ opacity:0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease; }/* margin: 9px 0 0;*/
.rub h3, #actu h3{font-size:13px; margin:0;}
.rub h3{display:none;}
.rub h4, #actu h4{font-size: 12px; padding:0 5px 0 0; text-transform: uppercase;}
.rub h4{float:left; display:none; }
.rubTab{ clear:both;margin: 10px 0 15px; min-height:55px;}

.rub h6, #actu h5{text-transform:uppercase; margin:0; font-size:10px;}

/*.rub h5 a {letter-spacing:1px ;color:#fff; width:150px; padding: 2px 5px 1px 20px; background-image:url(../elt/img_lien.png);background-repeat:no-repeat; background-position:5px center; opacity:.8;font-size:10px; }*/
.rub h6 .lien {padding: 28px 6px; margin: 0 0 0 -3px; color:#fff; background-image:url(../elt/img_image.png);background-repeat:no-repeat; background-position:center center; font-size:10px; text-align:center; height:35px; width:35px;}

.rub .bouton .texte{color:white; font-weight:normal;text-align:center;margin-top: -10px;}

.rub li h6, .rub h5{height:35px; width:35px;}

.rub li a {opacity:0.7;}
.rub li a:hover,#actu a:hover {opacity:1;}

.rub p{font-size:11px; color:#333;  padding: 4px 0; clear:both;} /*text-align: justify;}*/
.rub p.float{clear:none;}
.rub p.espace{width:5px;clear:none;}
.rub p a:hover, #profil a:hover, #actu p a:hover{text-decoration:underline; }
/*.rub img{height: 150px; margin:-35px 0 0 -35px; width: 150px; }*/
.rub .vignette{ /*clear:both; */}
.rub img{height:auto;padding:0;margin:0;}

.rub ul{float:left; margin:0 5px 0 0; }
.rub li{margin: 3px;clear:both;}
.rub p{clear:none;padding-left: 48px;}
.rub li h6{float:none; overflow: hidden;}
.rub li a h6{opacity:.7;}
.rub li h6{opacity:.5;}
.rub li a h6.active,.rub li a:hover h6, .rub li h6.active{opacity:1; }
.rub:last-child{height:1000px;}

/* boutons des store */
.rub a.storeButton{float:left;opacity:0.8}
.rub a:hover.storeButton{float:left;opacity:1}
.rub a.storeButton img{width: 100%; max-width: 110px; margin: 5px 15px 5px 0;}


#navRight-scroll{
height: 600px;
margin: 10px 0 0 0;
}
#navRight{
   width: 100%;
    height: 100%;
    padding-bottom: 15px;
    overflow: hidden; 
}

/* image */
#image img{width:100%; max-width:630px; padding: 0;}
#image2{position:relative; width:100%; max-width:630px; max-height:630px;}
#image-scroll{
height: 100%;
/*border: 1px solid #ccc;*/
overflow: hidden;
}

#image{
    width: 103%;
    height: 100%;
    padding-bottom: 15px;
    overflow: scroll; 
    -webkit-overflow-scrolling: touch;
}

#image iframe { display:none; background:#000;}
#image li{width:100%;}
#image h4 { background: #f7f9f9; text-align:center; color:#f7f9f9;text-transform:uppercase;font-size:16px; height:60px; margin:60px 0 200px 0; }
#image a .pcontainer p{margin:0 0 0 -50%; width:100%; background: white; text-align:center; color:#333; font-size:11px; padding:4px 6px; border-radius:5px; overflow:hidden;}
#image a .pcontainer p strong{font-weight:normal; font-family:"OpenSansSemibold", Arial, Helvetica, sans-serif;}
#image a .pcontainer{display:none;}
#image a:hover .pcontainer{display:block; position:fixed; }

#loading img{position:absolute;width:40px;margin:20%;}
#loading{display:none;width:100%;}

/* partie actualité */
#actu{clear:both;}
#actu img{}
#actu h4{}

.actu-margin{padding-top: 20px;position: relative;clear: both;}
.gutter-sizer { width: 1.5%; }
#actu  .grid-sizer, #actu .grid-item{width:31.5%; margin-bottom:15px;}
#actu  .grid-item-2{width:65.5%;}
#actu  .grid-item-3{width:97.5%;}

/*#actu img {border-radius:5px;}*/

#actu .article{position:relative;}

#actu .grid-item .article{width:100%;}
#actu .grid-item-2 .article{width:100%;}
#actu .grid-item-3 .article{width:100%;}

#actu .fond_blanc{
background-image:url(../elt/white-transparent-85.png);
position: absolute;
top: 0;
height: 100%;
width:100%;
opacity:0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#actu .colonne{
position: absolute;
max-width: 290px;
width:90%;
top: 10px;
left:30px;
opacity:0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#actu .colonne p{font-size:12px;}
#actu .colonne h3{font-size:15px;font-color:black; font-family: 'OpenSansSemibold';}
#actu .profil .colonne {display:block;}
#actu_profil{margin:10px;background:#F4F8F9;border-radius:7px;}
#actu .profil{background:#f0f4f4;border-radius:18px;}


#actu strong{ font-weight:normal;color:#fff;text-transform:uppercase;}/* font-family:"OpenSansSemibold"; letter-spacing:1px;font-size:10px;*/
#actu strong::after { content: " • "; color:#fff;}
#actu em{ font-weight:normal; font-family:"OpenSansSemibold"; color:#fff; font-style: normal; display:block;}
#actu em::after {  }
#actu .agenda a{text-decoration:underline;}
#actu .agenda{background:#E0BF00; border-radius:5px;/*18*/ padding:20px 30px;}


/* boutons des store */
#actu .storeButton{float:left; margin-top:3px;}
#actu .storeButton a{opacity:0.8;float:left;}
#actu .grid-item-2 .storeButton a{float:none;}
#actu .storeButton a:hover{opacity:1}
#actu .storeButton img{width: 100%; max-width: 120px; margin: 7px 10px 0 0; border-radius: 0px;}

/*
#actu{clear:both;}
#actu img{border-radius:20px;width:100%;}
#actu li{list-style:none;float:none;clear:both; padding:10px;}
#actu h4{}
#actu .suite{width:100px; padding:45px 0 0;}
#actu .colonne{padding: 0 10px;}
#actu .colonne0{float:left; width:66%; padding: 0 0 0 0;}
#actu .colonne1{float:right; width:33%; padding: 0 0 0 0;}
#actu_profil{margin:10px;background:#F4F8F9;border-radius:10px;}

*/
#book{clear:both;padding:20px 0 0 0;}
#book .quart{float:left;clear:none;width:100%;}
#book .quart ul{float:left; }
#book .quart h3{padding: 5px; border-radius:5px; text-transform:uppercase;margin:5px 0; font-size:14px;}
#book img{width:100%;height:auto; }
#book .quart li{ width:18%; padding: 0 2% 0 0;}
#book .quart li h4{}
#book .quart li p{ overflow:visible;}
#book .quart li em{display:block; font-size: 11px;font-style:normal;color:#64646E;}
/* partie contact */

#profil{clear:both; max-width:750px;}
#profil li{float: left; list-style: none outside none; }
#profil li .article{padding:20px;}

#profil h5{font-size: 15px; color:#666;text-transform:uppercase; padding: 3px 2px 0; font-size:11px; }
#profil .picto img{float:left; padding:0 6px 0 0; width:20px; height:20px;}
#profil li .picto-big img{ width:33px; height:33px;}

#profil h4,.liens h4{font-size: 13px; text-transform: uppercase;}
#profil p{ padding:5px 0 10px 0; clear:both;}
#profil .image_portrait, #actu .image_portrait{width:100px; height:auto; border-radius:10px 10px 10px 10px;} 
#profil br{padding:0;margin:.0;line-height:0;}
#profil li .gris{background:#f7f9f9;padding:20px; border-radius:7px;}
#profil li center{max-width:120px;}

#profil p strong{text-transform:uppercase; font-weight:normal;}

#profil .toolbar{float:none;}
#profil .newsletter, #profil .cv, #profil #flag{display:none;}

#profil .grid-sizer, #profil .grid-item{width:20%;}
#profil .grid-item-2{width:35%;}
#profil .grid-item-3{width:100%;}

.bordure{border-top: 1px solid #B4BEBE;}


.game{clear:both;}
.game h2{ font-family:"OpenSansSemibold", Arial, Helvetica, sans-serif; padding-top: 10px; text-transform: uppercase; font-size:18px; margin-bottom: -5px;color:#b4bebe;}


.liens{margin-left:150px; clear:both; }
.liens li#petit{width:110px;}
.liens a {float:none; font-size:11px; clear:both; float:none;}
.liens a:hover{text-decoration:underline;}


footer{    border-top: 1px solid #B4BEBE;
    clear: both;
    color: #B4BEBE;
    float: right;
    font-size: 9px;
    padding: 5px 3px 5px;
   
	position:fixed;
	bottom:0;
	right:0;
	background:white;
	}//position:fixed;
	footer p{margin:0;}
#plusone{float:right;padding:0;margin:0 5px;font-size:13px;}

#plusone.vimeo{margin-right:-20px;}

.upload{clear:both;width:400px;color:#bbb;}
.upload h3{font-size:25px;text-transform:uppercase; padding: 9px;}
.upload form{clear:both;}
.upload h4{font-size:18px;padding:5px 10px;background:#b4bebe;color:#FFFFFF;border-radius:4px;text-align:center;margin:13px;}
.envoyer{width:150px;height:30px;margin:5px auto;background:#bbb;color:#fff;border:none;border-radius:4px;margin:10px 13px;}

/*
::-webkit-scrollbar {
    width: 30px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
*/
/*
@media (max-width: 900px){
#nav { width:45%; }
#image-scroll{ width:55%; margin: 0;  }
#navRight-scroll{margin:0; }
}
*/
@media (max-width: 800px){
#nav { width:55%; }
#image-scroll{ width:45%; }
}

@media (max-width: 600px){
#nav{width:100%; margin-top: 5px;}
#headerLeft {height: 73px;}
#image-scroll{ display:none; margin: 0; width:100%; max-width:630px;clear:both; }
#navRight{overflow:scroll; height:auto;}
#navRight ul {margin:0;}
#navLeft{clear:both; float:left; overflow:hidden;width:22%;/* margin:0 4px 0 1px; */}
#navLeft li p{ font-size:11px;}
#navRight-scroll{float: left; overflow: hidden; padding:0; width: 75%;margin:0; height:auto; }
#navRight-scroll h6 img{width:100%; height:auto; opacity:1; }
#navRight-scroll .vignette, #navRight-scroll .vignette li.image, #navRight-scroll .vignette li.image h6{width:100%; height:auto;}
#navRight-scroll .rub li.lien{clear:none;}
.rub{ display:none;}
.rub.active{ display:block;}
.rub li h6{ opacity:1;}
.rub:last-child{height:auto;}

#navLeft li img{padding: 2px 5px 2px 2px;}
#navLeft li p {padding: 5px 0 0 0px;}
.rub p {padding-left: 0;}

#actu  .grid-sizer, #actu .grid-item{width:50%;}
#actu  .grid-item-2{width:100%;}
#actu  .grid-item-3{width:100%;}

#profil .grid-sizer, #profil .grid-item{width:50%;}
#profil .grid-item-2{width:100%;}
#profil .grid-item-3{width:100%;}
}

@media (max-width: 400px /*320px*/){
	
/*#menu li{width:24%;}*/
#nav li h2 {font-size: 9px;}
#navLeft li p{ font-size:9px;}
/*
#image-scroll{ padding:0 2px; width:100%; max-width:630px; }
#navLeft{clear:both; float:left; overflow:hidden;width:100%; margin: 0; }
#navRight-scroll{float: left; overflow: hidden; padding:0; width: 100%;margin:0; }
#navRight  h3{display:block;}
.effaceSurPetitEcran{display:none;}
.nav li#actu,.nav li.atelier{padding:0;border:none;}
.nav li.livre,.nav li.profil{padding:0;}
*/
#actu  .grid-sizer, #actu .grid-item{width:100%;}
#actu  .grid-item-2{width:100%;}
#actu  .grid-item-3{width:100%;}

#profil .grid-sizer, #profil .grid-item{width:100%;}
#profil .grid-item-2{width:100%;}
#profil .grid-item-3{width:100%;}

}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../typo/Ubuntu-R-webfont.eot');
    src: url('../typo/Ubuntu-R-webfont.eot?#iefix') format('embedded-opentype'),
         url('../typo/Ubuntu-R-webfont.woff') format('woff'),
         url('../typo/Ubuntu-R-webfont.ttf') format('truetype'),
         url('../typo/Ubuntu-R-webfont.svg#UbuntuRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../typo/Ubuntu-M-webfont.eot');
    src: url('../typo/Ubuntu-M-webfont.eot?#iefix') format('embedded-opentype'),
         url('../typo/Ubuntu-M-webfont.woff') format('woff'),
         url('../typo/Ubuntu-M-webfont.ttf') format('truetype'),
         url('../typo/Ubuntu-M-webfont.svg#UbuntuMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}