@charset "UTF-8";
/* UTF-8 déclaré avant toute chose */

/******************************************************************
 * ROCSSTI : une base CSS par Nicolas Hoffmann http://rocssti.nicolas-hoffmann.net/
 * inspiré par http://www.knacss.com/
 *
 * ROCSSTI est sous licence CC-BY : http://creativecommons.org/licenses/by/3.0/fr/
 * 
 * cette CSS est fournie telle quelle, sans aucune garantie d'aucun type, 
 * l'auteur ne saurait être tenu responsable de quoi que ce soit pour 
 * l'utilisation de RÖCSSTI.
 *
 * 
 * résumé
 * 01 -- reset
 * 02 -- ainsi font font font + structure Hx
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 * 04 -- liens + icônes
 * 05 -- layout et modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- dans le contenu
 * 09 -- breakpoints mineurs entre desktop et tablettes
 * 10 -- homo tablettes - breakpoint majeur
 * 11 -- breakpoints mineurs entre tablettes et mobile
 * 12 -- mobile - breakpoint majeur
 * 13 -- breakpoints mineurs tout petit mobile
 * 14 -- print
 * 15 -- fix viewport 
 * 16 -- règles d'état
 * 17 -- bonus : Fixes IE
 */



/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* spécial HTML 5 */
article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section, video { display: block; }
abbr, eventsource, mark, meter, time, progress, output, bb { display: inline; }

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em; /* equiv 14px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* fix display img */
img { vertical-align: middle; }

ul, ol { padding-left: 2em; }


/* la base correspond à 10px */
html { font-size: 62.5%; }
body {
  background: #000 url(../images/bg.jpg) no-repeat center top;
  color: #000;
  font-family: 'open_sans', Arial, sans-serif;
  font-size: 1.4em; /* taille de base équiv à 14px */
  line-height: 1.5; /* à corriger si besoin est */
}




/*
 *****************************************************************
 * 02 -- ainsi font font font + structure Hx
 *****************************************************************
 */ 

@font-face {
  /*font-family: 'open_sansregular';*/
  font-family: 'open_sans';
  src: url('webfonts/OpenSans-Regular-webfont.eot');
  src: url('webfonts/OpenSans-Regular-webfont.eot#iefix') format('embedded-opentype'),
       url('webfonts/OpenSans-Regular-webfont.woff') format('woff'),
       url('webfonts/OpenSans-Regular-webfont.ttf') format('truetype'),
       url('webfonts/OpenSans-Regular-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  /*font-family: 'open_sansitalic';*/
  font-family: 'open_sans';
  src: url('webfonts/OpenSans-Italic-webfont.eot');
  src: url('webfonts/OpenSans-Italic-webfont.eot#iefix') format('embedded-opentype'),
       url('webfonts/OpenSans-Italic-webfont.woff') format('woff'),
       url('webfonts/OpenSans-Italic-webfont.ttf') format('truetype'),
       url('webfonts/OpenSans-Italic-webfont.svg') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  /*font-family: 'open_sansbold';*/
  font-family: 'open_sans';
  src: url('webfonts/OpenSans-Bold-webfont.eot');
  src: url('webfonts/OpenSans-Bold-webfont.eot#iefix') format('embedded-opentype'),
       url('webfonts/OpenSans-Bold-webfont.woff') format('woff'),
       url('webfonts/OpenSans-Bold-webfont.ttf') format('truetype'),
       url('webfonts/OpenSans-Bold-webfont.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}

/* calculées via http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size:  1.2857em; /* equiv 18px */
  line-height:  1.1667em;
  margin: 0 0  1.1667em 0;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1em;
}
.evidence {
  color: #999;
}

h2,
.h2 {
  display: block;
  font-size:  1.1429em; /* equiv 16px */
  line-height:  1.3125em;
  margin: 0 0  1.3125em 0;
  color: #b700c6;
  font-weight: bold;
  text-transform: uppercase;
}
h3,
.h3 {
  display: block;
  font-size:  1em; /* equiv 14px */
  line-height:  1.5em;
  margin: 0 0  1.5em 0;
  font-weight: bold;
  text-transform: uppercase;
}
h4,
.h4 {
  display: block;
  font-size:  1em; /* equiv 14px */
  line-height:  1.5em;
  margin: 0 0  1.5em 0;
  font-weight: bold;
}


.uppercase {
  text-transform: uppercase;
}

/* autres classes utiles */
.smaller {
  font-size: .7857em; /* equiv 11px */
  line-height:  1.9091em;
  margin:  1.9091em 0 ;
}
.small {
  font-size: .8571em; /* equiv 12px */
  line-height:  1.75em;
  margin:  1.75em 0 ;
}
.big{
  font-size:  1.1429em; /* equiv 16px */
  line-height:  1.3125em;
  margin:  1.3125em 0 ;
}
.bigger{
  font-size:  1.2857em; /* equiv 18px */
  line-height:  1.1667em;
  margin:  1.1667em 0 ;
}
.biggest{
  font-size:  1.4286em; /* equiv 20px */
  line-height:  1.05em;
  margin:  1.05em 0 ;
}




/*
 *****************************************************************
 * 03 -- classes utilitaires + fix typos + styles "balises fixes"
 *****************************************************************
 */

.noborder,
iframe { border: 0; }

table {
  table-layout: fixed;
}

/*
 * repris de http://tinytypo.tetue.net/ de @tetue
 * tuné avec l'aide de http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * voir http://en.wikipedia.org/wiki/International_variation_in_quotation_marks pour les références
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* éviter interlignage disgracieux */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}

/* éviter problèmes de margin */
/*h1:first-child,.h1:first-child,
h2:first-child,.h2:first-child,
h3:first-child,.h3:first-child,
h4:first-child,.h4:first-child,
h5:first-child,.h5:first-child,
h6:first-child,.h6:first-child {
  margin-top: 0;
}*/
/* virer marge basse sur dernier enfant */
/*p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
blockquote:last-child,
pre:last-child,
table:last-child {
  margin-bottom: 0;
}*/

/* éviter marges supplémentaires sur éléments imbriqués */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Vous ne passerez PAS (Gandalf) */
/*textarea,
table,
td,
th,
code,
pre,
samp,
div,
p,*/
.cut {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
/* pour supprimer la césure si besoin */
/*.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}*/

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* j'y tiens, les abbr c'est bon pour la planète */
/* seuls ceux ayant un title sont signalés */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  /* couleur héritée du texte */
} 

/* alignements de textes */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }





/*
 *****************************************************************
 * 04 -- liens + icônes
 *****************************************************************
 */

/* Liens */
a {
  color: #6f00aa;
  cursor: pointer;
 	-moz-transition: color 1s ease;
	-webkit-transition: color 1s ease;
	-o-transition: color 1s ease;
	-ms-transition: color 1s ease;
	-khtml-transition: color 1s ease;
	transition: color 1s ease;
}
/* penser au focus */
a:focus,
a:hover,
a:active {
  color: #53008e;
}

.white-link,
.white-link:focus,
.white-link:hover,
.white-link:active {
  color: #fff;
}

/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

.nodecoration {
  text-decoration: none;
}

/* liens avec icônes, on peut utiliser les DATA-URI */

/* icônes 32 */
[class*=icon-32] {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-32-timer {
  background: url(../images/icons/sablier_32x32.png) 0 0 no-repeat;
}

/* icônes 16 */
[class*=icon-16] {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.icon-16-hour {
  background: url(../images/icons/hour_16x16.png) 0 0 no-repeat;
  top: 2px;
}

/*[class*=icon-12] {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}*/





/* pour signaler liens externes */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* si URL complète sur un lien interne, virer signalement liens externes */
/*a[href^="http://www.mondomaine.com"] {

}*/
/* contact, liens mailto */
.mail,
a[href^="mailto:"] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBQTFRFz1PZ45vp2XbhxzbS/vz+/PT90VraykLVzErW3ovl+er6wSbO7sPy02PcuATH/fn9tgDGuxHJ24Hivx7NuAbGswDD13Hf12/ftgDFxDHRsQDBtQDErwDAwy7Q2Xrh+uz75KLq1mze++/8/fr+347m8s/1uw7K+/P9yT/U4ZTowjDPzE3W7sXy6rPuuQjHtQPF8Mnz9uH589X12n3i0V/b7cHx7sLx2nvi/fb92HngwynQtQDFtADEtADDtwDG////k9OW7wAAALpJREFUeNpsj+kSgjAMhKOAiiKXVlAub/G+8Wibvv9bWVEZx/H7ldnNJLsgfoBiGk1cGBaClpWVTbjQXkKybt63hPOWXpJCvVRpBSRApM48agwF6L2Q4BPfXXI7kxt6U5lSzrh3IsjKAlSodsaXSjTwKCLrWiBuYWA2avGx7SPa9hnECn2knEofbRq6ILSI5UeRMfM+MGSOjvzic9ZW4t01D2YEhDvp+GB9uiRprb9Xv8vN1L9t3zwEGACWMi3RsM287QAAAABJRU5ErkJggg==) 0 2px no-repeat;
  padding-left: 1.5em;

}
/* dont l'URL se termine par .pdf ou ce que vous voulez comme extension */
a[href$=".pdf"] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAwFBMVEX////////+///09PSYGRn7nZ329vb8/f3b29v819f4+vrn6Ojr7Oz78vL9+fr1//+bCAi8AgLVCwvPT0/7jIz7wMDU0dH84+P06+vw8PD09/f4+PiFAgKqRUXzNzfhY2Pub2/ld3f3cXHugID/fHztlJS3uLi8vb3Hx8f+tLTW1tb5yMjk5eXt8PD29fW7Ojq3ZWXiWFjPYmL9YWHdd3f6goLvi4vzioqxsbH7lJT0oaHYvb3VzMzp3d3f4uL5/v75tn5hAAAAAXRSTlMAQObYZgAAALRJREFUeNplzEUSgzAAQNGUCEkIUtwLpe7ucv9bFUgXnelfvsUHAAB9KYS2eNEENN36RdHrOY6zziakgTLPMXark91F45moYWfbw201LLsNTCIANpaFrAyhNEX+6DKqj2H4pA/fP9yptqC0/SoQwtgN40hoWgtqDeZ5HkMYLSUQsjKP2FwRQiQkCQ/wlZmccwkGf+O5t+9jT5VTVWEuCww29fQWOsZ0oCtthoRgwDrfJPz0Dx/QRw6HG3BtPgAAAABJRU5ErkJggg==) 0 0 no-repeat;
  padding-left: 1.5em;
}

.noicon {
	padding: 0 !important;
	background: none;
}


/*
 *****************************************************************
 * 05 -- layout et modules
 *****************************************************************
 */

/* ça dépend, ça dépasse */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input {
  height: auto;
  max-width: 100%;
}
/* pas de reset sur embed, object et video, ça fait foirer certains players */

/* utile pour gérer les floattants */
/* contient des floats */
.mod { 
  overflow: auto;
}

/* quelques floattants */
.left {
  float: left;
}
.right {
  float: right;
}


/* clearer les floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}



/* gouttière */
.gut {
  height: 1px;
}

/* gestion du table-design en CSS */
.row {
  display: table;
  table-layout: fixed;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}


/* inline-block, utile pour les grilles et pas seulement */
.inbl {
  display: inline-block;
}

/* pour relativiser */
.relative {
  position: relative;
}

/* bloc centré */
.center {
  margin-left: auto;
  margin-right: auto;
}


/* largeurs de blocks */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w4   { width: 4%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33%; }
.w35  { width: 35%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w46  { width: 46%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* ici ajouter les largeurs en em */
/*.w960e { width: 60em; }*/

/* ici ajouter les largeurs en pixels */
/*.w500p { width: 500px; }*/

/* ici ajouter les largeurs max en em */
/*.mw960e { max-width: 60em; }*/

/* ici ajouter les largeurs max en pixels */
/*.mw960p { max-width: 960px; }*/

/* margins */
.mt0 { margin-top: 0; }
.mt0-5 { margin-top: .5em; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mr0 { margin-right: 0; }
.mr0-5 { margin-right: .5em; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }


/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }


/* spécial hr de 1px de haut */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* pour cacher du texte de manière accessible… toussââââ */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* caché partout */
.nodesktop { display: none; } /* caché sur desktop */
.noprint   {} /* caché sur print */
.notablet  {} /* caché sur tablettes */
.nomobile  {} /* caché sur mobile */




/*
 *****************************************************************
 * 06 -- structure globale 
 *      (page / skip links / header / contenu principal / footer)
 *****************************************************************
 */

.launch {
  position: absolute;
  z-index: 13; /* ça porte bonheur */
  top: 6em;
  right: 0;
  font-size:  1.1429em; /* equiv 16px */
  padding: 1.5em;
  line-height: 1.1;
  background: #b700c6;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: none;
}

/* === page === */
#page {
  margin: 0 auto;
  position: relative;
  max-width: 1100px;
}

/* === skip-links = liens d'évitement === */
#skip-links {
  position: absolute;
  z-index: 5;
  left: 40%;
}
/* skip-link = un lien d'évitement  */
/* idéalement mettez-les visibles pas uniquement au focus */
.skip-link {
  color: transparent;
}
/* sinon pensez à les rendre visibles au focus */
.skip-link:focus,
.skip-link:hover,
.skip-link:active {
  color: #53008e;
  font-weight: bold;
}



/* === header === */
.header {
	height: 340px;
}
.imaginelogo {
  position: absolute;
  top: 0;
  left: 0;
}

.lang {
  position: absolute;
  top: 0;
  right: 2em;
  z-index: 11;
}

.lang--link {
	background: #000;
	color: #fff;
	font-size:  1.1429em; /* equiv 16px */
  line-height: 3.125em; /* pour faire equiv 50 px de haut */
	display: inline-block;
  text-decoration: none;
  font-weight: bold;
  padding: 0 .5em;
}
.lang--link:hover {
	background: #000;
	color: #df00ff;
}
.lang--link.active {
	background: #b700c6;
	color: #fff;
}

.logoback {
  position: absolute;
  top: 35px;
  height: 270px;
  left: 20%;
  right: 20%; 
}

/*.logo {

}*/


.navigation-container {
	background: #000;
  padding: 0 6%;
  border-bottom: 6px solid #b700c6;
}
.navigation {
  margin: 0;
  padding: 0;
  background: #000;
  /*transition: all .5s ease;*/
}

.navigation--item {
  text-align: center;
}
.navigation--item__home {
  width: 52px; /* padding 10*2 + 32 image */
}
.navigation--item__home .navigation--link {
  padding: 0 10px;
}

.navigation--link,
.displaymenu,
.displaymenu:focus,
.displaymenu:hover,
.displaymenu:active {
  display: block;
	font-size:  1.4286em; /* equiv 20px */
  line-height: 3.125;   /* pour faire 70px de haut */
	color: #fff;
	text-transform: uppercase;
  text-decoration: none;

}
.navigation--link:focus,
.navigation--link:hover,
.navigation--link:active {
  color: #df00ff;
}

.displaymenu {
  text-align: center;
  display: none;
}

.active .navigation--link/*,
.active .navigation--link:focus,
.active .navigation--link:hover,
.active .navigation--link:active*/ {
  background: #b700c6;
  color: #fff;
}

/* === sous navigation === */
.subnav {
  padding-left: 0;
  list-style-type: none;
  padding-right: 2em;
  margin-top: 0;
}
.subnav--item {
  display: block;
  padding-top: .8em;
  padding-bottom: .8em;
  border-bottom: 1px solid #ccc;
}

.subnav--subnav {
  padding-left: 0;
  padding-top: .5em;
}

.subnav--link {
  display: block;
  font-size:  1.1429em; /* equiv 16px */
  text-transform: uppercase;
  text-decoration: none;
  color: #999;
  line-height: 1.1;
}
.subnav--link:focus,
.subnav--link:hover,
.subnav--link:active {
  color: #000;
}
.active > .subnav--link{
  color: #b700c6;
}

/* sous-sous-nav */
.subnav--subnav .subnav--link {
  font-size: .95em;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAOUlEQVR42mNgoATMnDlTgVQN74E4gRQN/6F4PRALkKIBhO8DsQEpGmC4gWYaSHIS0Z4mOVgVGKgNALYnW/M84CjDAAAAAElFTkSuQmCC) 0 1px no-repeat;
  padding-left: 1.2em;
}
.subnav--subnav .subnav--item {
  border-bottom: 0;
  padding: .25em 0;
}



/* === contenu principal === */
.main {
	background: #fff;
  padding: 1.5em 6%;
  border-bottom: 6px solid #b700c6;
  min-height: 640px;
}

.social {
  width: 260px;
  overflow: hidden;
  margin-bottom: 1em;
}
.hachetague {
  position: relative;
  top: -0.25em;
}



/* système bordure de couleurs */
.color--poprock {
  border-left: 6px solid #91d327;
}
.color--funksoul {
  border-left: 6px solid #e74b9e;
}
.color--electro {
  border-left: 6px solid #f2cf00;
}
.color--francaise {
  border-left: 6px solid #00d4bc;
}
.color--worldreggae, .color-- {
  border-left: 6px solid #ce0036;
}
.color--jazz {
  border-left: 6px solid #73358c;
}
.color--bluesfolk {
  /* ON L'A PAS J'AI IMPROVISE :) */
  border-left: 6px solid #1377F1;
}
.color--salsa {
  /* ON L'A PAS J'AI IMPROVISE :) */
  border-left: 6px solid #f28c11;
}


/* banners artistes */
.banner {
  /*height: 100%;*/
}
.banner--background {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff; 
  background: rgba( 255, 255, 255, 0.8);
  padding: .5em 1em;
  min-height: 5em;
}
.banner--title {
  display: inline-block;
  line-height: 1.1;
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
}
.banner--date {
  display: inline-block;
  color: #717171;
  text-transform: uppercase;
  font-weight: bold;
}
.banner--offer {
  position: absolute;
  top: -5px;
  right: 2em;
 
}



/* === programme (va être utilisé sur plusieurs pages) === */
.program-item {
  margin: 1em 0;
  border: 1px solid #ececec;
}

.program-item__back {
  background: #ececec;
}

.program-item--imagecontainer {
  width: 27%;
  padding-right: 1em;
}

.program-item--info {
  font-weight: bold;
  font-size: 1.1429em;
  color: #5d5d5d;
  line-height: 1;
}
.program-item--infos-container {
  min-height: 130px;
  margin-right: 1em;
}
.program-item--titre {
  display: block;
  font-weight: bold;
  font-size: 1.5625em;
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  line-height: .9;
}
.program-item--social {
  display: block;
  margin-top: 1em;
  /*position: absolute;
  bottom: 0;
  left: 0;*/
}

.program-item--status {
  width: 25%;
  padding-right: 1em;
}
.program-item--time, 
.program-item--time__filter {
  display: block;
  margin-bottom: 2em;
  font-size: .75em;
  color: #5d5d5d;
  text-transform: uppercase;
}
.program-item--time__filter {
  margin: 0 0 .25em 0;
}

.program-item--tag {
  display: block;
  padding: .5em .6em;
  font-size: .75em;
  text-decoration: none;
  background: #ececec;
  line-height: 1.1;
}
.program-item--tag__filter {
  margin-bottom: .25em; 
}

.program-item--scene {
  margin-top: .5em;
  display: block;
  padding: .5em .1em;
  font-size: .75em;
  text-decoration: none;
}
.program-item__back .program-item--tag,
.program-item__back .program-item--scene {
  background-color: #fff;
}
.program-item--scene__icon-12-bains {
  background: #ececec url(../images/icons/espace_bains_12x12.png) 0 5px no-repeat;
  padding-left: 1.3em;
}
.program-item--scene__icon-12-clubs {
  background: #ececec url(../images/icons/scene_des_clubs_12x12.png) 0 5px no-repeat;
  padding-left: 1.3em;
}
.program-item--scene__icon-12-1815 {
  background: #ececec url(../images/icons/espace1815_12x12.png) 0 5px no-repeat;
  padding-left: 1.3em;
}
.program-item--scene__icon-12-aubes {
  background: #ececec url(../images/icons/aubes-musicales_12x12.png) 0 5px no-repeat;
  padding-left: 1.3em;
}
.program-item--scene__icon-12-latino {
  background: #ececec url(../images/icons/png-1.png) 0 5px no-repeat;
  padding-left: 1.3em;
}



/* === footer === */
.footer {
  padding: 1.5em 6%;
  color: #fff;
}
.coucoucestnous {
  background: #ebebed;
  font-size: .7857em; /* equiv 11px */
  font-family: Arial, sans-serif; 
}
.coucoucestnous--content {
  max-width: 1100px;
  margin: 0 auto;
}
.coucoucestnous--web {
  color: #000;
}
.coucoucestnous--prz {
  color: #1073b9;
}




/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* donne envie de cliquer sur un bouton */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* évite un resize potentiellement foireux */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

/* à adapter selon le design voulu */
input,
select,
textarea,
button {
  border: 1px solid #B700C6;
  padding: .25em;
  width: 250px;
  max-width: 90%;
  /** fix typo inputs **/
  font-family: 'open_sans', Arial, sans-serif;
  font-size: 1em;
}

/* pour les textes des champs */
.label {
  display: inline-block;
  width: 7em;
}

/* à adapter selon le design voulu */
.button {
  display: block;
  background: #b700c6;
  color: #fff;
  text-transform: uppercase;
  max-width: 150px;
  text-align: center;
  padding: .7em 1.4em;
  text-decoration: none;
  
 	-moz-transition: background-color 1s ease;
	-webkit-transition: background-color 1s ease;
	-o-transition: background-color 1s ease;
	-ms-transition: background-color 1s ease;
	-khtml-transition: background-color 1s ease;
	transition: background-color 1s ease;
  
}
.button:focus,
.button:hover,
.button:active {
  background: #53008e;
  color: #fff;
}

/* 
 * évite dimensionnement des radios, checkboxes et images
 * et un affichage différent sous IE 
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* pour annuler la taille des inputs ou autres */
.auto {
  width: auto;
}

/* messages d'erreur ou de confirmation */
.alert,
.alert input,
.alert textarea,
.alert select {
  color: #bf0000;
  font-weight: bold;
}
/* .redborder sert à débugger uniquement */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #bf0000;
}
.alert img {
  border: 0;
}
.ok {

}

/* 
 * peut être complété par les attributs HTML5 required
 * exemple avec une couleur, penser à ne pas uniquement transmettre l'info ainsi
 */
select:required:focus:invalid,
input:required:focus:invalid,
textarea:required:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}




/*
 *****************************************************************
 * 08 -- dans le contenu (contenus spécifiques aux pages)
 *****************************************************************
 */

/* home */
.grey-box {
  background: #ececec;
  padding: 1em;
  margin-bottom: 1em;
}
.grey-box__calendrier {
  background: #ececec url(../images/bg-leftbox-calendar.png) 100% 0 no-repeat;
}
.grey-box__map {
  background: #ececec url(../images/bg-leftbox-map.png) 100% 0 no-repeat;
}
.grey-box__newsletter {
  background: #ececec url(../images/bg-leftbox-newsletter.png) 100% 0 no-repeat;
}
.grey-box__star {
  background: #ececec url(../images/bg-leftbox-star.png) 100% 0 no-repeat;
}
.grey-box__video {
  background: #ececec url(../images/bg-leftbox-video.png) 100% 0 no-repeat;
}
.grey-box__win {
  background: #ececec url(../images/bg-leftbox-win.png) 100% 0 no-repeat;
}
.grey-box__vip {
  background: #ececec url(../images/bg-leftbox-vip.png) 100% 0 no-repeat;
}



.grey-box--title {
  font-size:  1.1429em; /* equiv 16px */
  color: #000;
  padding-top: 1em;
}

.tablo-calendrier {
  width: 100%;
}
.tablo-calendrier--cel {
  background: #ddd;
  text-align: center;
}
.tablo-calendrier--cel__something {
  background: #d8bfff;
  color: #6b0077;
  text-align: center;
}


.cycle-slideshow {
	height: 360px;
}
.cycle-pager { text-align: center; width: 100%; }
.cycle-pager span { width:20px; height:20px; color: #ddd; font-size: 50px; line-height: 30px; }
.cycle-pager span.cycle-pager-active { color: #B700C6;}
.cycle-pager > * { cursor: pointer;}

/*
 *****************************************************************
 * 09 -- breakpoints mineurs entre desktop et tablettes
 *****************************************************************
 */





/*
 *****************************************************************
 * 10 -- homo tablettes - breakpoint majeur
 *****************************************************************
 */ 

/*@media (max-width: 900px) {*/
@media (max-width: 56.25em) {
   
  /* affichage des éléments */
  .nodesktop { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .notablet { display: none; }
  
  /* linéarisation contenus flottants/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  .navigation-container {
    padding: 0 1%;
  }
  .main, 
  .footer {
    padding-left: 1%;
    padding-right: 1%;
  }
  
  .main {
    min-height: 0;
  }
  
  
  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */

}




/*
 *****************************************************************
 * 11 -- breakpoints mineurs entre tablettes et mobile
 *****************************************************************
 */






/*
 *****************************************************************
 * 12 -- mobile - breakpoint majeur
 *****************************************************************
 */

/*@media (max-width: 767px) {*/
@media (max-width: 47em) {

  /* affichage des éléments */
  .notablet { display: block; }

  /* cachage des éléments inutiles, chabitte ! */
  .nomobile { display: none; }

  /* linéarisation contenus flottants/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }

  /**
   * adaptation structure globale (page / skip links / header / contenu principal / footer)
   */
  body {
    background-image: none;
  }
  
  .header {
	  height: auto;
  }
  
  .navigation--link,
  .displaymenu,
  .displaymenu:focus,
  .displaymenu:hover,
  .displaymenu:active {
  	font-size:  1.4286em; /* equiv 20px */
    line-height: 2.125;   /* pour faire 70px de haut */
  }
  
  .lang {
    right: .25em;
  }
  .lang--link {
  	font-size:  1em; /* equiv 16px */
    line-height: 2em; /* pour faire equiv 50 px de haut */
    padding: 0 .25em;
  }
  
  .main {
    padding: 1em;
  }
  
  .footer--block {
    text-align: center;
  } 
  

  
  /**
   * dans le contenu (contenus spécifiques aux pages)
   */
  input,
  select,
  textarea,
  button {
    width: 200px;
  }

  .program-item--imagecontainer {
    width: 140px;
  }


}




/*
 *****************************************************************
 * 13 -- breakpoints mineurs tout petit mobile
 *****************************************************************
 */

/*@media (max-width: 500px) {*/
@media (max-width: 31.25em) {

  .banner--background,
  .banner--date {
    position: static;
    display: block;
    padding: 2px;
  }
  
  .program-item--imagecontainer {
    width: 25%;
  }
  
  
}


/*@media (max-width: 400px) {*/
@media (max-width: 25em) {

  .banner--background,
  .banner--date {
    position: absolute;
    display: inline-block;
  }

  .banner--background {
    /*max-width: 200px;*/
    padding: 0.5em 1em;
  }
  .banner--background__full {
    max-width: 100%;
  }
  .banner--img {
    width: 100%;
  }


  .banner--offer {
    width: 85px;
  }
  
  .banner-container {
    float: none;
    display: block;
    width: auto;
    margin-bottom: 1em;
  }
  .banner-gut {
    display: block;
  }
  
  .program-item--imagecontainer {
    display: none;
  }
  .program-item--status {
    width: 40%;
  }

}

/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {
  /* ajouter là-dedans les éléments qui ont besoin d'être
   * resetés de manière très bourrine pour le print
   */
  body,
  html,
  #page,
  .header,
  .main,
  .reset4print,
  .footer {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: auto;
    padding: 0;
    display: block;
    position: static;
    width: auto;
  }

  body {
    padding: .5em;
  }

  /* cachage des éléments inutiles, chabitte ! */
  .noprint {
    display: none;
  }
  
  /* affichage éléments spécifiques au print */
  .onprint {
    display: block;
  }
  

  
  /* éviter saut de page hasardeux */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  /* affichage des liens, sauf pour image contenue */
  /* attention, penser à vérifier le résultat et penser 
   * à limiter cette possibilité aux liens dans le contenu */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* ici fix propriétés particulières */
  .footer--block {
    text-align: left;
  }
  .logo-img,
  .logo {
    display: block;
  }
  .logo-img {
    margin-bottom: 2em;
  }


} /* end print */




/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport pour Win8 (snap mode) et préparer le jour 
 * où le viewport sera supporté par tous les moteurs 
 *  
 * Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width   => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2      => zoom: 2;
 * maximum-scale=2      => max-zoom: 2;
 * minimum-scale=0.5    => min-zoom: 0.5;
 * user-scalable=no     => user-zoom: fixed;
 * 
 * pour le snap mode de Win8 => seul width: device-width; fonctionne pour l'instant  
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}




/*
 *****************************************************************
 * 16 -- règles d'état
 *****************************************************************
 */

/*
 * Règles d'état = mises en bas pour être prioritaires
 *
 */

/*.displaymenu-is-activated {
  position: absolute;
  margin-top: -5em;
}*/

.navigation-is-hidden {
  display: none;
}
.navigation-is-shown {
  display: block;
}





/*
 *****************************************************************
 * 17 -- bonus : Fixes IE
 *****************************************************************
 */

/*  
 * basé sur les classes conditionnelles sur l'élément HTML
 *  
 * à utiliser seulement si peu de corrections et 
 * pas d'impact sur les perfs sur les autres navigateurs
 *       
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}

.oldies .banner--title {
  border: 1px solid #fff; /* WTF but it works */
}

/*.ie7 .navigation--link {
  border: 1px solid red;
  padding: 0 1em;
}*/







/* -------------------------------- */
/* JQUERY TIPSY					 -- */
/* -------------------------------- */


.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

  /* Rounded corners */
  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  
  /* Uncomment for shadow */
  /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
  
  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  
  /* Rules to colour arrows */
  .tipsy-arrow-n { border-bottom-color: #000; }
  .tipsy-arrow-s { border-top-color: #000; }
  .tipsy-arrow-e { border-left-color: #000; }
  .tipsy-arrow-w { border-right-color: #000; }
  
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }







/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px; border:0;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px; border:0;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px; border:0;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}



.fb-like {display:inline !important;}
15	#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget {    border-radius:5px;color: #ffffff !important;    display: inline-block;    line-height: 22px;    text-align: center;    text-decoration: none;width: 55px;}
16	#facebook-widget, .facebook-widget { background: #3b5b99; }
17	#linkedin-widget { background: #069; }
18	#digg-widget {background:#FDFFB0;color:#716803 !important;}
19	#stumble-widget {background:red;}
20	#google-widget, .google-widget   { background: #dd4b39; }
21	#twitter-widget ,.twitter-widget {background: #33ccff;}