/*
#@squelettes/css/grille.less
*/
/* Style par defaut grille du jour page d'accueil */
.grille-jour {
  margin-left: 0;
}
.grille-jour > li {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
}
.prog-grille .prog-liste-jours {
  list-style-type: none;
  margin-left: 0;
}
/* masque les petits pointillées autours des heures */
.grille-jour abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}
.grille-jour .horaires {
  width: 20%;
  margin-right: 2rem;
  text-align: right;
  font-family: "espa";
  font-size: 1.2rem;
  color: #000;
  text-transform: uppercase;
  flex: 0 0 auto;
}
/* masque l'heure de fin du dernier element si c'est une bande continue */
.grille-jour li.bandes-continues:last-of-type .horaires .sep,
.grille-jour li.bandes-continues:last-of-type .horaires .fin {
  display: none;
}
.grille-jour .description .soustitre {
  font-size: 0.85rem;
  text-transform: capitalize;
}
/* element en cours */
.grille-jour .en-cours,
.grille-jour .en-cours .horaires {
  color: #F21237;
}
.grille-jour .en-cours .description .h3-like {
  font-family: 'espa', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 1.4rem;
}
/*
Vue simple en une ligne
cf : inclure/resume/programme-ligne
*/
.item-programme-liste .description .h3-like {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  text-transform: none;
  font-size: 1rem;
  display: inline;
}
/*
Vue complète avec logo et liens
cf : inclure/resume/programme-grille
*/
.grille-jour > li.item-programme-grille {
  margin-bottom: 2rem;
}
.item-programme-grille .horaires {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 32px;
  font-size: 1.6rem;
  background: #000;
  color: #FFF;
  text-align: center;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.item-programme-grille .horaires {
  position: relative;
}
.item-programme-grille .horaires:after {
  position: absolute;
  margin-left: -100%;
  right: -100%;
  width: 100%;
  top: 32px;
  content: "";
  display: block;
  height: 2px;
  background: #333;
}
.item-programme-grille .infos {
  padding-left: 100px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item-programme-grille .infos .titre {
  width: 100%;
}
.item-programme-grille .description {
  flex: 1 1 60%;
}
.item-programme-grille .h3-like {
  font-size: 1.8rem;
}
.item-programme-grille .soustitre {
  font-size: 1.4rem;
  color: #666;
}
.item-programme-grille .extra {
  flex: 1 1 40%;
}
.item-programme-grille .extra ul {
  list-style-type: none;
}
.item-programme-grille .extra li {
  position: relative;
}
.item-programme-grille .extra li:before {
  font-family: "canut-icones";
  content: "\e807";
  /* icone flèche droite */
  margin-right: .5em;
}
/*	
GRILLES
=======
Elements communs a l'affichage des programmes en liste ou grille
*/
.grille_boutons {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -40px;
  right: 30px;
}
.grille_boutons > li {
  display: inline-block;
}
.grille_boutons > li > a {
  padding: 5px 10px;
}
.grille_bt,
.grille_bt_on {
  background: #000;
  color: #FFF;
}
.grille_bt_on {
  background: #FFF;
  color: #000;
}
.bt_precedent,
.bt_suivant {
  font-size: 2rem;
  line-height: 0;
}
/*	
SURCHARGES PROPRES A LA VUE "ONGLETS"
====================================
*/
/* navigation */
.grille_nav_semaine {
  list-style-type: none;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 30px;
  border-bottom: solid 4px black;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: center;
}
.grille_nav_semaine li {
  margin-top: 1rem;
  margin-bottom: -4px;
  border-bottom: solid 4px black;
  flex: auto;
  overflow: hidden;
}
.grille_nav_semaine li:first-child,
.grille_nav_semaine li:last-child {
  width: 64px;
  flex: none;
}
.grille_nav_semaine li:first-child a,
.grille_nav_semaine li:last-child a {
  width: 64px;
  height: 32px;
  padding-top: 32px;
}
.grille_nav_semaine li:first-child a:after {
  font-family: "canut-icones";
  content: "\e808";
  /* icone flèche gauche */
}
.grille_nav_semaine li:last-child a:after {
  font-family: "canut-icones";
  content: "\e807";
  /* icone flèche droite */
}
.grille_nav_semaine li.on {
  border-bottom: solid 4px white;
}
.grille_nav_semaine li a {
  display: flex;
  flex-direction: column;
  padding-bottom: .5rem;
}
#content .grille_nav_semaine h2.h2 {
  line-height: 100%;
  padding: 0;
  margin: 0;
  margin-top: .5rem;
}
#content .grille_nav_semaine h2.h2:before {
  background: none;
}
.grille_nav_semaine .h2 .jour-nom,
.grille_nav_semaine .h2 .jour-abbr,
.grille_nav_semaine .h2 .jour-initiale {
  display: none;
}
@media screen and (max-width: 640px) {
  .grille_nav_semaine h2.h2 .jour-initiale {
    display: block;
  }
}
@media screen and (min-width: 640px) and (max-width: 980px) {
  .grille_nav_semaine h2.h2 .jour-abbr {
    display: block;
  }
}
@media screen and (min-width: 980px) {
  .grille_nav_semaine h2.h2 .jour-nom {
    display: block;
  }
}
.grille_nav_semaine span.date {
  display: inline-block;
  font-size: 0.85rem;
  line-height: 100%;
  margin-top: -0.5rem;
}
/* contenu des onglets */
.grille-vue-onglets header {
  display: none;
}
/*	
SURCHARGES PROPRES A LA VUE "GRILLE"
====================================
*/
#content .grille-vue-grille {
  /* Passe en pleine largeur */
  /* retouche nav pour passer les entête des jours en largeur fixe */
  /* contenu et légende verticale*/
  /* legende des heures */
  /* Largeur des jours */
  /* style */
  /* style element emission */
  /* couleurs des blocs d'emissions */
}
#content .grille-vue-grille .prog-wrap-grille {
  margin-left: -30px;
  margin-right: -30px;
}
#content .grille-vue-grille .grille_nav_semaine {
  margin-bottom: 1rem;
}
#content .grille-vue-grille .grille_nav_semaine li {
  flex: 1;
  /* pour une largeur de colonne constante */
}
#content .grille-vue-grille .grille_nav_semaine li:first-child,
#content .grille-vue-grille .grille_nav_semaine li:last-child {
  width: 64px;
  flex: none;
}
#content .grille-vue-grille .prog-wrap-grille {
  display: flex;
}
#content .grille-vue-grille .prog-legende-heures {
  list-style-type: none;
  margin: 0;
  width: 64px;
  flex: none;
}
#content .grille-vue-grille .prog-legende-heures li {
  /* 1.2px par minute = 72px */
  height: 71px;
  border-top: solid 1px #666;
  /* total = 64px = largeur des fleches du header */
  width: 34px;
  margin-left: 30px;
  color: #333;
  text-align: center;
  font-size: 0.70rem;
}
#content .grille-vue-grille .prog-liste-jours {
  margin-right: 64px;
  display: flex;
}
#content .grille-vue-grille .prog-liste-jours .prog-item-jour {
  flex-grow: 0;
  flex-basis: 25%;
  margin-left: 2px;
  margin-right: 2px;
}
#content .grille-vue-grille header {
  display: none;
}
#content .grille-vue-grille .horaires .sep,
#content .grille-vue-grille .horaires .fin {
  display: none;
}
#content .grille-vue-grille .emission {
  position: relative;
  margin-bottom: 0;
}
#content .grille-vue-grille .emission .horaires {
  position: absolute;
  display: block;
  top: -10px;
  width: 100%;
  font-size: 1rem;
  line-height: 100%;
  text-align: center;
}
#content .grille-vue-grille .emission .horaires .debut {
  background: #FFF;
  color: #000;
  line-height: 100%;
  padding: 0px 5px;
  padding-top: 2px;
  border-radius: 99px;
  display: inline-block;
}
#content .grille-vue-grille .emission .description {
  width: 100%;
  line-height: 80%;
  margin: 1px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
#content .grille-vue-grille .emission .description a {
  max-height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
}
#content .grille-vue-grille .emission .description a strong,
#content .grille-vue-grille .emission .description a span {
  line-height: 80%;
}
#content .grille-vue-grille .emission:nth-child(odd) .description {
  background: #EFEFEF;
}
#content .grille-vue-grille .emission:nth-child(even) .description {
  background: #E6E6E6;
}
#content .grille-vue-grille .prog-item-jour:nth-child(even) .emission:nth-child(even) .description {
  background: #D6D6D6;
}
#content .grille-vue-grille .prog-item-jour:nth-child(even) .emission:nth-child(odd) .description {
  background: #DEDEDE;
}
.grille-vue > .grille {
  padding: 0;
}