/* la VAD v3 */
/*---------------------------------
	générique
---------------------------------*/
/* blocs et conteneurs */
#masthead.vad2012 {
  background: none;
  padding: 0;
  box-sizing: border-box !important;
  max-width: 980px;
  font-size: 13px !important;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
}

#masthead.vad2012 .cadre,
#masthead.vad2012 .cadre-in,
#masthead.vad2012 .cadre-out {
  margin: 0 !important;
  padding: 0 !important;
  background: none;
}

#masthead.vad2012 #maincontent-resa {
  background: none;
}

/* texte et divers */
hr {
  border: none;
  border-top: solid 2px #000;
}

.vad2012 p {
}

.tag {
  border-radius: 4px;
  border: solid 1px #929292;
  background: rgb(255, 255, 255); /* Old browsers */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(237, 237, 237, 1) 50%,
    rgba(229, 229, 229, 1) 51%,
    rgba(211, 211, 211, 1) 100%
  ); /* W3C */
}

/*on vire les boutons auto de webkit sur les input number */
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* pareil sur firefox 29+ */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: 4px;
  padding: 0.5em;
  height: auto;
  vertical-align: top;
  margin: 0 0 0.5em 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  border: solid 1px #666;
}
#paiement input[type="number"],
#paiement input[type="tel"] {
  width: auto;
}
/*input validé ou erroné*/
input[type="text"].valid,
input[type="email"].valid,
select.valid,
input[type="number"].valid,
input[type="tel"].valid {
  border-color: #abc217;
}
input[type="text"].error-input,
input[type="tel"].error-input {
  border-color: #e80404;
  color: #f40101;
}
::-webkit-input-placeholder {
  font-style: italic;
}
:-moz-placeholder {
  font-style: italic;
}
::-moz-placeholder {
  font-style: italic;
}
:-ms-input-placeholder {
  font-style: italic;
}
::placeholder {
  font-style: italic;
}

/*---------------------------------
	conteneurs spécifiques
---------------------------------*/
.bloc,
.nbloc,
.message-exploitant {
  margin: 0 auto 15px auto;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  padding: 20px;
  background: #fff;
  color: #000;
  position: relative;
  box-sizing: border-box;
  clear: both;
}
.bloc.sanspad,
.nbloc.sanspad {
  padding: 0;
}
.bloc h2,
.bloc h3,
.bloc h4,
.nbloc h2,
.nbloc h3,
.nbloc h4 {
  color: #000;
  padding: 5px 5px 8px 0;
  font-size: 17px;
}
.bloc strong.grey {
  color: #313131;
}
.bloc p.attention,
#attention-3d {
  padding-left: 60px;
  padding: 1em 1em 1em 3.75em;
  color: #e00;
  background: url(/shared/vad2012/attention.png) 0.5em center no-repeat;
}

/* bloc fermé */
.bloc.closed {
  background: #fff;
  padding: 0;
}
.bloc.closed .visuel-rubrique,
.bloc.closed .bloc-content {
  display: none;
}
.bloc.closed .contenu-rubrique {
  padding: 0;
}
.bloc.closed h2,
.bloc.closed h3,
.bloc.closed h4 {
  padding: 15px;
  color: #646a6d;
}

/* blocs ouverts/fermés */
a.reduc,
a.reduc:visited,
a.reduc:link {
  position: absolute;
  top: 0;
  right: 10px;
  border-radius: 0 0 5px 5px;
  display: block;
  padding: 0.5em;
  vertical-align: top;
  z-index: 200;
}
a.reduc:before {
  content: "Fermer";
  width: auto;
  height: 21px;
  line-height: 21px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
a.reduc:after {
  background: url(/shared/vad2012/b_btnmoins.png) top center no-repeat;
  content: "";
  width: 21px;
  height: 21px;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px;
}
.closed a.reduc:after {
  background: url(/shared/vad2012/btnplus.png) top center no-repeat;
}
.closed a.reduc:before {
  content: "Ouvrir";
}

a.reduc,
a.reduc:visited,
a.reduc:link {
  background: #ddd;
  color: #000;
}
a.reduc:hover,
a.reduc:visited:hover,
a.reduc:focus {
  background: #efefef;
}

.closed a.reduc,
.closed a.reduc:visited,
.closed a.reduc:link {
  background: #1673ae;
  color: #fff;
}
.closed a.reduc:hover,
.closed a.reduc:visited:hover,
.closed a.reduc:focus {
  background: #000;
  color: #fff;
}

/* ajustements */
.bloc.closed {
  display: none;
} /* complètement masqués par défaut */
a.reduc,
a.reduc:visited,
a.reduc:link {
  font-size: 11px;
  padding: 3px 6px;
}
#bloc-tarifs .reduc {
  display: none;
}

/* message de l'exploitant */
.message-exploitant:before {
  content: "Informations"; /* définit en css afin de pouvoir le changer facilement d'un site à l'autre sans modifier le composant résa*/
  font-size: 16px; /*on lui donne une allure de titre*/
  font-weight: bold;
  display: block;
  margin: 0 0 20px 0;
}
.message-exploitant {
  margin: 20px auto;
  position: relative; /* en position relative pour pouvoir définir un top*/
  top: 0; /* valeur suffisante pour le sortir du maincontent*/
  background: #fff;
  color: #000;
  max-width: 980px; /* si pas de width, dépend du contenu et donc inesthétique*/
  padding: 20px;
  box-sizing: border-box;
}

/*---------------------------------
	modale CGV
---------------------------------*/
.pop-up-overlay {
  position: fixed;
  opacity: 0.5;
  height: 120%;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9998;
  cursor: pointer;
}
.super-modale {
  position: fixed;
  z-index: 9999;
  width: 650px;
  height: 420px;
  padding: 3em 0 0 0;
  border: 0;
  background: #f2f2f2;
  box-sizing: border-box;
  display: none;
}
.super-modale h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.5em 3em 0.5em 0.5em;
  text-transform: uppercase;
  font-size: 15px;
  color: #222;
  background: #fff;
  z-index: 1001;
  text-align: left;
}
.super-modale #super-modale-content {
  height: auto;
  max-height: 100%;
  overflow: auto;
  text-align: left;
  margin: 0;
  box-sizing: border-box;
  padding: 1em;
  font-size: 14px;
  color: #000;
}
.super-modale .close-modale {
  position: absolute;
  width: auto;
  top: 0.25em;
  right: 0;
  z-index: 1005;
  text-align: right;
  color: #000;
  font-weight: bold;
  display: block;
  padding: 0.5em;
}
.super-modale .close-modale:before {
  content: "X";
  color: #c00;
  font-weight: bold;
  display: inline-block;
  padding-right: 0.5em;
}

/*---------------------------------
	erreurs
---------------------------------*/
#resa-erreur {
  clear: both;
  float: none;
  display: block;
  margin: auto;
  position: relative;
  top: auto;
  left: auto;
  color: #c00;
  padding: 0.75em 0;
}
#resa-erreur p {
  display: block;
  padding: 0;
  margin: 0.25em;
  position: relative;
  top: auto;
  left: auto;
  clear: both;
  float: none;
  color: #c00;
  padding: 0.5em;
  background: #fdd;
}

/*---------------------------------
	header
---------------------------------*/
body.resa #header {
  position: relative;
  height: auto;
  color: #000;
  padding: 0;
  margin: 0;
}
body.resa #header .vadwrap {
  padding: 10px;
}
/* logo et titre côte à côte */
body.resa #logo,
body.resa #titre_cinema {
  position: relative;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}
body.resa #logo {
  max-width: 200px;
}
body.resa #titre_cinema {
  width: 720px;
}
body.resa #logo img {
  max-width: 100%;
  margin: 0;
}
body.resa #titre_cinema h1 {
  margin: 0 !important;
  font-size: 24px;
  font-weight: 400;
  text-align: left;
}

#accountButton {
  position: absolute;
  top: 10px;
  right: 85px;
  display: block;
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background: #000;
  color: #fff;
  border: none;
}
#accountButton:hover,
#accountButton:focus {
  opacity: 0.7;
}

.back-to-home {
  position: absolute;
  top: 0;
  right: 10px;
  display: block;
  padding: 7px 10px 10px 50px;
  color: #fff;
  background: #222 url(/shared/vad2012/maison.png) 5px 7px no-repeat;
  border-radius: 0 0 5px 5px;
}
.new-home {
  display: block;
  color: #fff;
  border-radius: 50% !important;
  top: 10px !important;
  padding: 6px 8px !important;
  background-image: none !important;
}

/*Modale de connexion*/
#modale_compte_client {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
#accountModal {
  width: 290px;
  height: auto;
  padding: 15px;
  background-color: rgba(41, 40, 40, 0.95);
  color: #fff;
  z-index: 999;
  position: absolute;
  right: 10px;
  top: 66px;
  text-align: center;
  border-radius: 10px;
  margin-top: 10px;
}
.modal-title {
  display: block;
  font-size: 24px;
  font-weight: bold;
}
.modal-buttons {
  display: block;
  color: #fff;
  background: #181717;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0;
  width: 290px;
  font-size: 16px;
  margin: 10px auto 0 auto;
  text-decoration: none;
}
.mbutton-inscription {
  background: #928f8f;
  color: #000;
}
.modal-buttons:hover,
.modal-buttons:focus {
  background: #3e3c3c;
  text-decoration: none;
  color: #fff;
}

@media screen and (max-width: 360px) {
  #accountModal {
    position: relative;
    right: inherit;
    margin: 10px auto 0 auto;
  }
}

/*---------------------------------
	étapes
---------------------------------*/
#etapes_resa {
  display: none;
}

/*---------------------------------
	sélection de film
---------------------------------*/
#resa-champs {
  display: flex;
}
#le-film,
#le-jour,
#la-salle,
#la-seance {
  flex: 1 1 25%;
  padding: 0 10px 0 0;
}
#le-film {
  flex: 1 1 50%;
}

#le-film span:first-child,
#le-jour span:first-child,
#la-salle span:first-child,
#la-seance span:first-child {
  display: block;
  text-transform: uppercase;
  color: #666;
  font-size: 11px;
  padding: 0 0 1px 5px;
}
#le-film select,
#le-jour select,
#la-salle select,
#la-seance select {
  display: block;
  width: 100%;
  height: auto;
}

/* pas de bouton valider vu qu'on le fait en js */
#resa-selection #resa-bt-line {
  display: none;
}

#lien-vers-recharge-seule {
  color: #000;
  background: url(sidebar_recharge.png) center right no-repeat;
  padding: 0.5em 105px 0.5em 0;
  display: inline-block;
  vertical-align: top;
}

/*---------------------------------
	sélection de places
---------------------------------*/
/*gestion des rubriques et visuels*/
.brown-bg {
  display: flex;
}

.visuel-rubrique,
.contenu-rubrique {
  flex: 1 1 17%;
  box-sizing: border-box;
  padding: 20px;
  margin: 0;
}
.contenu-rubrique {
  flex: 1 1 83%;
  text-align: left;
}

.recap .visuel-rubrique {
  padding-top: 10px;
}

.visuel-rubrique {
  background: #eee;
  color: #000;
}
.visuel-rubrique > span,
#visuels-cb > span {
  display: block;
  width: 100%;
  height: 85px;
  margin: 0 0 0.5em 0;
  background: top center no-repeat;
  background-size: contain;
}
/* on en masque certains */
#bloc-compte-client .visuel-rubrique {
  display: none;
}
/* titres moins grand dans moyens de paiement */
#bloc-autresmoyens .visuel-rubrique > span.moyp_titre {
  height: auto;
}

.visuel-rubrique .visuel-affiche img {
  max-width: 100% !important;
  width: 100% !important;
  border: solid 2px #aaa;
  box-sizing: border-box;
}

.visuel-rubrique .visuel-promo {
  background-image: url(/shared/img/vad2016/visuel_promo.png);
}
.visuel-rubrique .canal {
  background-image: url(/shared/img/vad2016/visuel_canal.png);
}
.visuel-rubrique .cineday {
  background-image: url(/shared/img/vad2016/visuel_cineday.png);
}
.visuel-rubrique .cheque-ce {
  background-image: url(/shared/img/vad2016/visuel_cheque.png);
}
.visuel-rubrique .cartes-abo,
.visuel-rubrique .cartevip {
  background-image: url(/shared/img/vad2016/visuel_abo.png);
}
.visuel-rubrique .achat-de-carte {
  background-image: url(/shared/img/vad2016/visuel_abo.png);
}
.visuel-rubrique .cb {
  background-image: url(/shared/img/vad2016/visuel_cb.png);
}
.visuel-rubrique .visuel-3D {
  background-image: url(/shared/img/vad2016/visuel_3D.png);
}
.visuel-rubrique .visuel-coordonnees {
  background-image: url(/shared/img/vadv3/vad_coords.png);
}
.visuel-rubrique .visuel-carte-fid {
  background-image: url(/shared/img/vad2016/visuel_fid.png);
}
.visuel-rubrique .visuel-cgv {
  background-image: url(/shared/img/vadv3/vad_cgv.png);
}
.visuel-rubrique .cinecheque {
  background-image: url(/shared/img/vad2016/visuel_cinecheque.png);
}
.visuel-rubrique .osc {
  background-image: url(/shared/img/vad2016/visuel_osc.png);
}
.visuel-rubrique .cartes-ugc {
  background-image: url(/shared/img/vad2016/visuel_carte_ugc.png);
}
.visuel-rubrique .cartes-pass-integral {
  background-image: url(/shared/img/vad2016/visuel_carte_pass_integral.png);
}
.visuel-rubrique .groupon {
  background-image: url(/shared/img/vad2016/visuel_groupon.png);
}
.visuel-rubrique .confiserie {
  background-image: url(/shared/img/vad2016/visuel_confiserie.png);
}
.visuel-rubrique .venteprivee {
  background-image: url(/shared/img/vad2016/visuel_venteprivee.png);
}
.visuel-rubrique .cinecardz {
  background-image: url(/shared/img/vad2016/visuel_cinecardz.png);
}
.visuel-rubrique .op-cdiscount {
  background-image: url(/shared/img/vad2016/visuel_cdiscount.png);
}
.visuel-rubrique .visuel-film {
  background-image: url(/shared/img/vad2016/visuel_film.png);
}
.visuel-rubrique .visuel-recap-film {
  background-image: url(/shared/img/vad2016/visuel_recap_film.png);
}
.visuel-rubrique .visuel-recap-places {
  background-image: url(/shared/img/vad2016/visuel_recap_places.png);
}
.visuel-rubrique .visu-valid-cine {
  background-image: url(/shared/img/vad2016/visuel_cine.png);
}
.visuel-rubrique .cartes_cip {
  background-image: url(/shared/img/vad2016/visuel_cip.png);
}
.visuel-rubrique .pass_culture {
  background-image: url(/shared/img/vad2016/visuel_pass_culture.png);
}
.visuel-rubrique .showroom {
  background-image: url(/shared/img/vad2016/visuel_showroomprive.png);
}
.visuel-rubrique .fever {
  background-image: url(/shared/img/vad2016/visuel_fever.png);
}
.visuel-rubrique .sortir {
  background-image: url(/shared/img/vad2016/visuel_sortir.png);
}
.visuel-rubrique .cheque-cinewest {
  background-image: url(/shared/img/vad2016/visuel_cinewest.png);
}
.visuel-rubrique .cheque-ticketpartner {
  background-image: url(/shared/img/vad2016/visuel_ticketpartner.png);
}


.visuel-rubrique .visuel-offres-couples {
  height: 90px;
}

.visuel-rubrique .visuel-paybox {
  position: relative;
  bottom: 0;
  vertical-align: bottom;
}

/* le lien 3d secure*/
#plus_info_3ds {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/* changement des visuels */
.visuel-rubrique .cb {
  background-image: url(/shared/img/vadv3/vad_ticket.png);
}
.visuel-rubrique .visuel-3D {
  background-image: url(/shared/img/vadv3/vad_lunettes.png);
}
.visuel-rubrique .visuel-promo {
  background-image: url(/shared/img/vadv3/vad_promo.png);
}
.visuel-rubrique .confiserie {
  background-image: url(/shared/img/vadv3/vad_confiserie.png);
}
.visuel-rubrique #visuels-cb .cb {
  background-image: url(/shared/img/vadv3/vad_cb.png);
}

/* titres dans les blocs de gauche */
.visuel-rubrique > span:after,
#visuels-cb > span:after {
  content: "";
  text-align: center;
  font-size: 18px;
  position: relative;
  top: 82px;
  display: block;
  width: 100%;
  left: 0px;
} /*look du faux titre*/
/* on définit des faux titres */
.visuel-rubrique .cb:after {
  content: "Tarifs";
}
.visuel-rubrique .visuel-3D:after {
  content: "Lunettes 3D";
}
.visuel-rubrique .visuel-promo:after {
  content: "Code promo";
}
.visuel-rubrique .confiserie:after {
  content: "Confiserie";
}
.visuel-rubrique .visuel-coordonnees:after {
  content: "Coordonnées";
}
.visuel-rubrique #visuels-cb .cb:after {
  content: "Carte bancaire";
}
#visuels-cb:after {
  display: none;
}
/* et on masque les vrais titres correspondants */
#bloc-tarifs .contenu-rubrique h3,
#bloc-promo .contenu-rubrique h3,
#bloc-lunettes .contenu-rubrique h3,
#resa-saisie-infoperso h4 {
  display: none;
}

/*la phrase du haut*/
#film-choisi {
  padding: 1em 0;
}
#film-choisi-titre,
#film-choisi-jour,
#film-choisi-heure {
  color: #e68700;
  font-weight: bold;
}

.film_aff {
  position: absolute;
  top: 24px;
  left: 17%;
  width: 80px;
}
.film_aff img {
  max-width: 100% !important;
}

#bloc-film {
  padding-bottom: 15px;
} /* on ajoute du padding pour le bouton de modif séance */
#bloc-film .titre_du_film,
#bloc-film .comment,
#bloc-film .date-resa {
  padding-left: 95px;
}

#bloc-film {
  text-align: left;
  overflow: hidden;
  min-height: 170px;
  padding-bottom: 0;
}
#bloc-film .contenu-rubrique {
  padding-top: 15px;
}
#bloc-film .visuel-rubrique {
  display: none;
}
#bloc-film .film_aff {
  top: 15px;
  left: 15px;
  border: solid 1px #c4c4c4;
  width: 102px;
  max-height: 140px;
  box-sizing: border-box;
}
#bloc-film .film_aff img {
  display: block;
}
#bloc-film .titre_du_film,
#bloc-film .comment,
#bloc-film .date-resa {
  padding-left: 113px;
}
#bloc-film .comment {
  margin: 13px auto;
}
#bloc-film .titre_du_film {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 24px;
  font-weight: 400;
}
.nom_cinema {
  display: block;
  font-style: italic;
  font-size: 16px;
}
.date-resa:before {
  content: "";
  display: block;
  border-top: 1px solid #c4c4c4;
  height: 1px;
  overflow: hidden;
  margin: 15px 0;
}
.date_seance {
  background: #828282;
  border-radius: 5px;
  color: #fff;
  padding: 8px 20px;
  font-size: 18px;
  display: inline-block;
}
.date_seance strong {
  font-size: 18px;
  font-weight: 400;
}

.date_seance .s_heure {
  font-size: 20px;
  font-weight: 600;
}
.date_seance .s_fin {
  font-size: 16px;
  font-weight: 400;
}

.tag {
  background: none;
  border: 0;
  width: 30px;
}

#bloc-film .superbillet-infos {
  padding-left: 115px;
} /*Pour éviter que le texte se retrouve en desous de l'affiche*/

.s_modif {
  position: absolute;
  bottom: 15px;
  right: 20px;
  text-align: right;
  display: none;
}

.ligne-de-bloc {
  display: block;
  padding: 0;
}

/*cartes abonnement*/
.carte-choix-nb-places {
  display: block;
}

/* carte ciné rataché au compte */
#box-saisie-cartecine div.ligne-de-bloc.ma-carte p.legende {
  display: none;
}
#box-saisie-cartecine div.ligne-de-bloc.ma-carte p.carte-choix-recharge {
  display: none;
}
#box-saisie-cartecine div.ligne-de-bloc.ma-carte p.carte-bt-rechargement-seul {
  display: none;
}

/*bouton info pour infobulle*/
a.exampleTip {
  background: #75beed !important;
  color: #fff !important;
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 1rem;
  font-weight: bold;
  font-family: Times New Roman, Times, serif;
  margin: -4px 10px 0 0;
  border-radius: 11px;
  text-align: center;
  float: left;
}
a.exampleTip:hover,
a.exampleTip:visited:hover,
a.exampleTip:focus {
  color: #fff !important;
  background: #1673ae !important;
  text-decoration: none;
}

/*pictos validé ou erroné*/
.picto-valid {
  width: 22px;
  height: 22px;
  vertical-align: top;
  margin: 3px 5px 0 5px;
  display: none;
}
.picto-valid.ok {
  background: url(/shared/vad2012/form_valid.png);
  display: inline-block;
}
.picto-valid.error {
  background: url(/shared/vad2012/form_error.png);
  display: inline-block;
}

/* sélection confort */
#liste-confort .typefauteuil img {
  max-height: 150px;
  max-width: 150px;
}
#liste-confort .typefauteuil.disabled img {
  opacity: 0.4;
}
#liste-confort .typefauteuil {
  display: inline-block;
}

#liste-confort .typefauteuil {
  position: relative;
  float: left;
  margin: 10px 2% 10px 0;
  width: 32%;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  background: #e93;
  cursor: pointer;
  overflow: hidden;
}

#liste-confort .typefauteuil label {
  opacity: 0.5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  display: block;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  text-align: left;
  padding: 0.5em 0 0 2.5em;
  box-sizing: border-box;
}

#liste-confort .typefauteuil input[type="checkbox"] {
  position: absolute;
  z-index: 150;
  left: 0.5em;
  top: 0.5em;
}
#liste-confort .typefauteuil input[type="checkbox"]:checked + label,
#liste-confort .typefauteuil input[type="checkbox"]:checked + span + label {
  opacity: 1;
}

#liste-confort .typefauteuil.disabled {
  background-color: #ddd;
}
#liste-confort .typefauteuil.disabled,
#liste-confort .typefauteuil.disabled label,
#liste-confort .typefauteuil.disabled input {
  cursor: not-allowed;
}

.infos-fauteuils {
  clear: both;
}

/* confirmation du choix du ciné */
#bloc-validation-cine h4 {
  font-size: 16px;
}
#bloc-validation-cine .contenu-rubrique {
  padding-top: 20px;
  padding-bottom: 50px;
}
#bloc-validation-cine .vc_nom_cine {
  font-size: 24px;
}
#bloc-validation-cine .vc_nom_cine,
#bloc-validation-cine .vc_adresse {
  display: block;
  line-height: 1.2;
  font-weight: bold;
}
#bloc-validation-cine p {
  max-width: 100%;
}
#bloc-validation-cine #vc_stop_demander {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 240px;
  text-align: left;
  font-size: 11px;
  line-height: 1.2;
}
#bloc-validation-cine #vc_stop_demander input {
  float: left;
  margin: 5px 10px;
}

@media screen and (max-width: 360px) {
  #bloc-film .date-resa {
    padding-left: 0;
  }
  .infos-film {
    min-height: 140px;
  }
}

/*---------------------------------
	coords et paiement
---------------------------------*/

.rappel-justificatifs {
  color: #e00 !important;
}

#resa-saisie-infoperso-nom,
#resa-saisie-infoperso-prenom,
#resa-saisie-infoperso-email,
#resa-saisie-infoperso-email-confirm,
#resa-saisie-cb-typecarte,
#resa-saisie-cb-porteur,
#resa-saisie-cb-no,
#resa-saisie-cb-dt,
#resa-saisie-cb-control,
#resa-saisie-cb-memorise,
#checkbox-cgv,
#msghotmail {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin: 0;
  padding: 0 0 10px 0;
  box-sizing: border-box;
}
#resa-saisie-infoperso-nom span,
#resa-saisie-infoperso-prenom span,
#resa-saisie-infoperso-email span,
#resa-saisie-infoperso-email-confirm span,
#paiement label span {
  font-weight: bold;
  display: block;
  padding: 0 0 0.5em 0;
}
#paiement label span.fchkbx {
  display: none;
}

.cadenas-titre {
  display: inline-block;
  width: 30px;
  height: 25px;
  vertical-align: top;
  background: url(/shared/img/vadv3/cadenas.png) top center no-repeat;
  position: relative;
  top: -5px;
}

#date-exp-mois {
  width: 60%;
}
#date-exp-annee {
  width: 35%;
}
#paiement label .label-se-souvenir {
  display: inline-block;
}
#resa-saisie-souviens-toi,
#resa-saisie-newsletter,
#infos-clients-vie-privee {
  padding: 0.5em 0;
}
#infos-clients-vie-privee {
  margin-top: 0;
}
#masthead.vad2012 #mentions_cnil p {
  font-size: 10px;
  color: #949494;
}
#resa-saisie-souviens-toi input {
  margin: 8px 6px 0 0;
}

label.error {
  color: #c00;
  display: block;
  padding: 0 0.45em;
}
p.erreur {
  /*utilisé pour les erreurs de transactions bancaires*/
  border: dashed 2px #c00;
  background: #fdd;
  color: #c00 !important;
  font-size: 1.5em !important;
  padding: 1em;
}
#checkbox-cgv,
#msghotmail {
  width: 100%;
  padding-bottom: 3.25em;
} /* on diminue car moins grand*/
.info-crypto {
  margin-top: -0.5em;
}

#ffpaiement input.error {
  border: 1px solid #ff0000 !important;
  background: #fce8e8;
}

/*choix du paiement*/
#paiement-par-cb,
#paiement-par-buyster,
#paiement-par-masterpass {
  font-size: 1.15em;
  margin-right: 2em;
  padding: 0.5em;
}
#paiement-par-cb input,
#paiement-par-buyster input,
#paiement-par-masterpass input {
  position: relative;
  top: 3px;
}
#paiement-par-cb.choisi,
#paiement-par-buyster.choisi,
#paiement-par-masterpass.choisi {
  background: #fff;
  border-radius: 5px;
}
#paiement-par-cb strong,
#paiement-par-buyster strong,
#paiement-par-masterpass strong {
  color: #000;
  font-weight: normal;
}
#paiement-par-cb:after,
#paiement-par-buyster:after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 90px;
  height: 50px;
  background: url(/shared/vad2012/visuel_buyster.png) top center no-repeat;
  background-size: contain;
}
#paiement-par-cb:after {
  background-image: url(/shared/vad2012/visuel_cb.png);
  width: 50px;
}

#recap-commande-choix-paiement.avec-cb-et-masterpass #paiement-par-cb,
#recap-commande-choix-paiement.avec-cb-et-masterpass #paiement-par-masterpass {
  display: block;
}

#titre-masterpass img {
  max-width: 240px;
}

#paiement-par-masterpass span.legend {
  display: block;
  padding: 1em 1em 0 2em;
  font-size: 0.85em;
  font-weight: normal;
}
#paiement-par-masterpass span.legend strong {
  font-weight: bold;
}

/*saisie cb*/
#resa-saisie-cb-control input {
  max-width: 25%;
  min-width: 50px;
  vertical-align: middle;
}
#paiement .info-crypto {
  width: 70%;
  display: inline-block;
  vertical-align: middle;
  padding: 0.5em 0.25em;
}
#texte_securisation_visa p {
  font-size: 0.85em !important;
  display: none; /*ce message est-il vraiment important ?*/
}
#resa-saisie-cb-memorise .info-cb-memorise {
  width: 90%;
  display: inline-block;
  padding: 0.5em 0.25em;
}

/* waiting gif after clicking on submit purchase */
.waiting_gif {
  display: block;
  text-align: center;
  padding: 0 1em 1em;
  font-size: 1.5em;
  color: #fff;
}
.waiting_gif:after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 20px auto 0;
  background: url(/shared/loading.gif) center center no-repeat;
}
/* on masque le gif tout le temps */
.waiting_gif {
  display: none;
}

/*---------------------------------
	commande validée / annulée
---------------------------------*/
p.last-step {
  font-weight: bold;
}

#merci-cinecardz {
  min-height: 100px;
}

#le_billet_print a:before {
  content: "";
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  background: url(/shared/img/vad2016/ic_pdf_dl.png) center center no-repeat;
  background-size: contain !important;
  margin: 0 10px 0 0;
}
#le_billet_print a {
  margin: 0 22% !important;
  padding: 0.35em !important;
  text-align: center;
  width: 56%;
  box-sizing: border-box;
  position: relative;
  font-size: 15px;
}
#billet_wallet {
  order: 3;
  margin: 0;
  padding: 0;
  background: #fff;
}

#billet_wallet a.add_to_wallet {
  background: none !important;
  width: 240px;
  margin: 0 !important;
}
#billet_wallet a.add_to_wallet img {
  width: 200px;
  margin: 0 15px;
}
#billet_wallet a.add_to_wallet:before {
  display: none;
}

#commande-validee-mobile .nbloc {
  padding-left: 180px;
  overflow: hidden;
}
#commande-validee-mobile .nbloc h3,
#commande-validee-mobile .nbloc h5 {
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 0;
}

.bloc_picto,
.le_picto3D {
  margin: 0;
  padding: 0;
  width: 180px;
  background: top center no-repeat;
  background-size: contain !important;
  position: absolute;
  top: 20px;
  left: 0;
}

.picto_cmdvalid.bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/ic_cmd_valid.png);
}
#le_billet_print .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/ic_billet_print.png);
}
#le_billet_mail .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/ic_billet_mail.png);
  top: 14px;
}
#le_billet_smartphone .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/ic_billet_mobile.png);
  top: 6px;
}
#ticket_mail_to_print .bloc_picto {
  height: 85px;
  background-image: url(/shared/vad2012/pic-mailtoprint.png);
}
#le_billet_annulation .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/ic_billet_annul.png);
  top: 8px;
}
#les_lunettes_3D .le_picto3D {
  height: 85px;
  background-image: url(/shared/img/vad2016/visuel_3D.png);
  top: 6px;
}
#merci-cinecardz .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/visuel_cinecardz.png);
}
#merci-cinecardz .demo_cinecardz {
  height: 85px;
  background-image: url(/shared/img/vad2016/demo_cinecardz.png);
}
#incitation-nl .bloc_picto {
  height: 85px;
  background-image: url(/shared/img/vad2016/visuel_newsletter.png);
  top: 6px;
}

#cadeau-buyster {
  float: left;
  margin-top: 10px;
}

@media screen and (max-width: 640px) {
  #commande-validee-mobile .nbloc {
    padding-left: 20px;
  }
  .bloc_picto,
  .le_picto3D {
    display: block;
    position: static;
    width: 100%;
  }
}

/*---------------------------------
	blocs spéciaux
---------------------------------*/

/*bandeau mon compte*/
#bandeau-fid {
  padding: 5px;
}
#bandeau-fid p,
#bandeau-fid .boutons {
  float: left;
  width: 50%;
}
#bandeau-fid .boutons {
  text-align: right;
}
#bandeau-fid strong {
  color: #e68700;
}
.btn-compte,
.btn-compte:visited,
.btn-compte:link {
  background: #d80b19;
  color: #fff;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
  margin: 3px 10px 0 0;
}

/*bandeau film*/
.les-tags {
  display: block;
  margin: 10px 0 0 0;
}
#votre-film,
#vos-places {
  display: inline-block;
  margin: 0 0 0 5px;
  padding: 0;
  vertical-align: top;
  display: block;
  width: auto;
  margin: 0;
}
#vos-places-reduites {
  display: none;
}

/*---------------------------------
	tarifs
---------------------------------*/
#liste-tarifs-cb {
}
.un-tarif {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
  border-bottom: solid 1px #c4c4c4;
  font-weight: 700;
}
.un-tarif:last-child {
  border: 0;
}
.un-tarif p,
.un-tarif input {
  flex: 1 1 90%;
  position: relative;
  align-self: center;
}
.place-nb,
.un-tarif input[type="number"] {
  flex: 0 0 60px;
  max-width: 60px;
  margin: 0;
  cursor: default;
}
.place-moins,
.place-plus {
  flex: 0 0 34px;
}

.un-tarif p {
  margin: 0;
  padding: 12px 60px 0 0;
  font-size: 18px;
  padding: 0 30% 0 0;
}

.un-tarif:hover,
.un-tarif:nth-child(even):hover {
  font-weight: bold;
}

.tarif-color {
  position: absolute;
  top: 2px;
  right: 15px;
  color: #828282;
  font-weight: 400;
  font-size: 14px;
}
.un-tarif input[type="number"],
.un-tarif input[type="number"].vide,
#box-saisie-cartecine input[type="number"],
#box-saisie-cartecine input[type="number"].vide {
  height: auto;
  font-size: 24px;
  color: #000;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  border: 0;
  background: none;
}

.un-tarif .place-moins,
.un-tarif .place-plus,
#box-saisie-cartecine .place-moins,
#box-saisie-cartecine .place-plus {
  background: #fff url(/shared/img/vadv3/plus_moins.png) 0 0 no-repeat;
  background-size: 50px 75px;
  border: solid 1px #2f80ed;
  color: #fff;

  font-size: 0;
  font-weight: bold;

  display: inline-block;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  margin: 2px 3px;
  height: 27px;
  width: 27px;
  max-width: 27px;
  vertical-align: top;

  -webkit-appearance: normal;
}
.un-tarif .place-plus,
#box-saisie-cartecine .place-plus {
  background-position: -25px 0;
}

.un-tarif .place-plus:hover,
.un-tarif .place-plus:focus,
#box-saisie-cartecine .place-plus:hover,
#box-saisie-cartecine .place-plus:focus {
  background-color: #2f80ed;
  background-position: -25px -50px;
  outline: none !important; /* autorisé car on change le BG au focus */
}
.un-tarif .place-moins:hover,
.un-tarif .place-moins:focus,
#box-saisie-cartecine .place-moins:hover,
#box-saisie-cartecine .place-moins:focus {
  background-color: #2f80ed;
  background-position: 0 -50px;
  outline: none !important; /* autorisé car on change le BG au focus */
}
.non-log,
.non-log .tarif-color {
  color: #bababa;
}

.non-log .place-moins,
.non-log .place-plus,
.place-moins:disabled,
.place-plus:disabled {
  opacity: 0.1;
  cursor: pointer;
}
.non-log .place-moins:hover,
.non-log .place-plus:hover {
  cursor: default;
  border: 1px solid #044c67;
  background: #fff url(/shared/img/vad2021/plus_moins.png) 0 0 no-repeat !important;
  background-size: 50px 75px !important;
}

/*cartes d'abonnement*/
.bloc.carteabo {
  min-height: 300px;
}
.bloc.carteabo.closed {
  min-height: 0;
}
label.select-places {
  margin: 15px 0 0 0;
  display: block;
  clear: both;
}
label.numerocarte,
label.codesecu {
  display: inline-block;
  margin: 0 10px 0 0;
  vertical-align: top;
}
.lelabel {
  display: block;
  margin: 0 0 5px 0;
}
.button.validcarte {
  display: inline-block;
  vertical-align: bottom;
}
#nb-place-restantes {
  display: none;
}
.bulle-infos {
  position: absolute;
  top: 40px;
  right: 5px;
  width: 320px;
  height: 246px;
  background: url(/shared/vad2012/bulle_temporaire.png) 0 0 no-repeat;
}
.legende {
  margin: 0.75em 0 0 1em;
  position: relative;
}
.legende:before {
  background: url(/shared/vad2012/fleche-legende.png) 0 0 no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  content: "";
}
.carte-choix-nb-places {
  padding: 0 0 1.5em 0 !important;
  display: flex;
}
.carte-choix-nb-places .carte-places-label {
  flex: 1 1 70%;
}

/*recharge de carte*/
#espace-recharge {
  display: none;
  margin: 10px;
}

#rechargement-lien-vers-achat-de-carte {
  text-align: right;
}

/*rechargements plus lisibles*/
.recharge {
  display: block;
  padding: 5px;
}
.recharge input[type="radio"] {
  margin-right: 5px;
}

/* bloc 3D*/
.select-paires,
.lunettes_tarif {
  display: block;
  padding: 0 10px;
  height: auto;
  line-height: 44px;
}
.lunettes_tarif label {
  font-size: 1rem;
  display: block;
}

/*les frais de gestion*/
.frais-gestion {
  font-size: 0.85em !important;
}

#formboxcgr textarea[name="adresse"],
#formboxcgr textarea[name="adressefacturation"] {
  width: 100%;
  height: 5em;
}

a.exampleTip {
  margin: 0 10px 0 0;
}

@media screen and (max-width: 500px) {
  /* les boutons+/- passent à la ligne */
  .un-tarif {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* on change les marges pour éviter des lignes trop hautes */
  .un-tarif p {
    flex: 1 1 100%;
    width: 100%;
    padding: 0 60px 5px 0;
  }
  .tarif-color {
    top: 0;
  }
  /* le tooltip passe en dessous car on à la place en bas */
  a.exampleTip {
    float: none;
    position: absolute;
    top: auto;
    bottom: -28px;
    left: 0;
  }
}

/*---------------------------------
 Choix de la cinecardz
---------------------------------*/
#cinecardz-ligne-chargement {
  background: url(/shared/loading.gif) #fff left center no-repeat;
  padding-top: 16px;
  padding-left: 38px;
  height: 38px;
  margin-left: 12px;
}
#cinecardz-ligne-nondispo {
  color: #c00;
}
#cinecardz-ligne-dispo {
  color: #008000;
}

/*---------------------------------
 Choix de la confiserie 
---------------------------------*/
#box-choix-confiserie {
  position: relative;
}

/* CATÉGORIES */
body.resa .conf-categ {
  margin: 20px 0 0;
  padding: 10px 10px 10px 0;
  background: url(/shared/vad2012/b_btnplus.png) 98% center no-repeat;
  color: #000;
  user-select: none;
  cursor: pointer;
}
body.resa .conf-categ:hover,
body.resa .conf-categ:focus {
  opacity: 0.7;
}

/* SOUS-CATÉGORIES */
body.resa .conf-subcateg {
  padding: 10px;
  margin-top: 1px;
  background: url(/shared/vad2012/b_btnplus.png) 98% center no-repeat;
  color: #000;
  cursor: pointer;
  font-weight: normal;
  user-select: none;
}

/* TOGGLE */
/* masquées par défaut */
.cont-conf-categ,
.cont-conf-subcateg {
  display: none;
} /*DEV : supprimer les __ avant de push*/
/* ouvertes */
.cont-conf-categ.expanded,
.cont-conf-subcateg.expanded {
  display: block;
}
/* catégorie ouverte */
body.resa .conf-categ.expanded {
  background-image: url(/shared/vad2012/b_btnmoins.png);
}
/* on masque le texte d'aide une fois ouvert */
body.resa .conf-categ.expanded .aide {
  display: none;
}
/* sous catégorie ouverte */
body.resa .conf-subcateg.expanded {
  color: #e9940e;
  background-image: url(/shared/vad2012/b_btnmoins.png);
}

/* TARIFS - MODIFS CONFISERIE */
.cont-conf-categ .un-tarif {
  padding: 8px 10px;
}
/* texte réduit (moins important que tarifs) */
.cont-conf-categ .un-tarif p {
  font-size: 15px;
}
/* du coup on remonte le tarif */
.cont-conf-categ .un-tarif .tarif-color {
  top: -1px;
}
/* taille mini pour le choix de qté */
.cont-conf-categ .un-tarif .input_conf {
  flex: 0 0 126px;
  text-align: right;
}
/* images avec une taille fixe et de l'espace */
.cont-conf-categ .conf-img {
  flex: 0 0 32px;
  margin-right: 10px;
}

/* on recentre le i d'info */
.un-tarif.article-conf p a.exampleTip {
  text-align: center;
}
#masthead.vad2012 .un-tarif.article-conf .place-nb {
  height: 30px;
}

/* MENUS - PRODUITS GROUPÉS */
/* on supprime la border du menu sélectionné */
.cont-conf-categ .un-tarif.expanded {
  border: 0;
}
/* on ajoute une border et un padding sous les enfants pour bien séparer */
.cont-conf-menu {
  border-bottom: solid 1px #ccc;
  padding: 10px 20px;
}
/* on met en avant les différents éléments qui composent le menu */
.cont-conf-menu .menu_elem {
  margin: 0 0 4px;
}
/* on met les enfants dans un cadre */
.cont-conf-menugrp {
  border: solid 1px #ccc;
  margin: 0 20px 20px;
}
.cont-conf-menugrp:last-child {
  margin-bottom: 10px;
}
/* on réduit un peu la taille des enfants */
.cont-conf-menugrp .un-tarif p {
  font-size: 13px;
  font-weight: 400;
}

/*---------------------------------
 Recapitulatif et total de la commande
---------------------------------*/

#bot_cont {
  height: auto;
  overflow: hidden;
}

/* affichage forcé et couleurs de base */
.bloc.recap,
.nbloc.recap {
  background: none;
  color: #222;
  margin-bottom: 0;
  display: block !important;
}
.bloc.recap h2,
.bloc.recap h3,
.nbloc.recap h2,
.nbloc.recap h3 {
  color: #222;
}

/* on masque les éléments superflus */
.recap h2,
.recap .visuel_nb_places,
.recap .secure,
#recap-total {
  display: none;
}

/* la liste des places/frais */
#recap {
  margin: 0;
  list-style: none;
}
#recap li {
  /* color:#fff; */
}
#recap li.total {
  margin: 0 15px;
  font-size: 18px;
  padding: 5px 0;
  line-height: 1;
}
/* on masque tout, et on affiche uniquement le total */
#recap li,
#recap li span {
  display: none;
}
#recap li.total,
#recap li.total .montant {
  display: inline-block;
  border: 0;
}

#paiement #recap li:last-child,
#vos-places #recap li:nth-last-child(2),
#recap li.total {
  border-bottom: 0;
}

#recap .label-place {
  max-width: 70%;
  display: inline-block;
  vertical-align: top;
}
#recap-commande .label-place {
  flex: 0 1 70%;
}
#recap-commande-mobile #recap .montant {
  max-width: 30%;
}
.le-prix,
.montant {
  float: right; /* color:#fff; */
  min-width: 90px;
  width: 30%;
  text-align: right;
}

/* recap des places choisies sur page paiement */
.nbloc.recap .visuel-rubrique {
  background: #676e73;
}
.nbloc.recap a {
  color: #fff;
}
.recap .r_desc_seance strong {
  font-size: 17px;
}
.recap .r_film,
.recap .r_s_le {
  display: block;
}
.recap .r_point_sep,
.recap .r_detail,
.recap .r_excl {
  display: none;
}

.recap .r_seance .contenu-rubrique {
  padding-left: 95px;
}
.recap .r_places .contenu-rubrique {
  padding: 20px 20px 30px 0;
}
.recap .r_places #recap {
  padding-left: 0;
  padding-top: 0;
}
.recap .r_places #recap li {
  margin: 0 0 5px 0;
}
.recap .r_places .legend {
  font-style: italic;
  opacity: 0.8;
  margin-top: 20px;
}

/* on met le récap et les boutons côte à côte */
#resa-etape-2 .bloc.recap,
#resa-etape-2 #resa-bt-line {
  float: left;
  width: 50%;
  box-sizing: border-box;
  clear: none;
  height: 90px;
  padding: 20px;
  text-align: right;
  margin: 0;
}
/* on masque le bouton retour */
.recap + #resa-bt-line input[type="button"] {
  display: none;
}
/* on aligne tout correctement */
#resa-etape-2 #resa-bt-line {
  display: flex;
  align-items: center;
  text-align: left;
  padding-left: 0;
}
#bandeau-recap #recap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  height: 50px;
}
#recap li.total {
  display: flex;
  font-weight: 400;
  justify-content: flex-end;
  width: 100%;
}
/* on change l'ordre des éléments */
#vos-places li.total .montant {
  order: 1;
  min-width: 0;
  width: auto;
}
#vos-places li.total .label-place {
  order: 2;
}
#bandeau-recap .frais {
  order: 3;
  width: 100%;
  margin-right: 15px;
}
#bandeau-recap .frais,
#bandeau-recap .frais .titre {
  display: block;
}
/* séparation entre le total et les places */
#recap li.total .label-place:before {
  content: "|";
  display: inline-block;
  vertical-align: top;
  padding: 0 10px;
}
#recap li.total .qte,
#recap li.total .place {
  display: inline;
}

/*---------------------------------
	autres moyens de paiement
---------------------------------*/
/* boutons coupons */
#bloc-autresmoyens {
  display: block;
  background: none;
  margin-bottom: 0;
}
#bloc-autresmoyens .brown-bg {
  display: flex;
  flex-wrap: wrap;
}
#bloc-autresmoyens h3 {
  color: #000;
  font-size: 18px;
  flex: 0 0 100%;
  margin: 0 0 10px 0;
  box-sizing: border-box;
}
#bloc-autresmoyens a {
  background: #fff;
  border-radius: 4px;
  margin: 0 0.5% 15px 0.5%;
  flex: 0 0 19%;
  text-align: center;
}
#bloc-autresmoyens a:before {
  content: "";
  border: solid 1px #2f80ed;
  background: url(/shared/img/vadv3/plus_moins.png) -25px -0px no-repeat;
  background-size: 50px 75px;
  width: 27px;
  height: 27px;
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
  flex-basis: 27px;
  border-radius: 50%;
  max-width: 27px;
}
#bloc-autresmoyens a:hover,
#bloc-autresmoyens a:visited:hover,
#bloc-autresmoyens a:focus {
  /* background:#cbd7e0; */
  opacity: 0.8;
  text-decoration: none;
  /*outline:none!important; non autorisé car changement trop léger au focus */
}
/* on masque les boutons si on les a sélectionnés */
#bloc-autresmoyens a.amp_sel {
  display: none;
}
.aucun_mp_supp {
  text-align: center;
  flex: 0 0 100%;
  padding: 0 20px 30px;
}

/* on met une taille par défaut au cas où on a pas de visuel */
.visuel-rubrique .moyp_visu {
  display: block;
  height: 85px;
  margin: 0;
}
/* on fait gaffe à ne pas avoir un double titre dans les moyens de paiement */
.visuel-rubrique .moyp_visu:after {
  display: none;
}

/*
autres moyens de paiement TODO :
	ajouter un état pas_a_cette_seance pour éviter la déception de cliquer sur un MP et d'avoir "MP pas dispo pour cette séance"
	*/

/* divers TODO :
	changer la couleur de fond du message exploitant << risqué si mutualisé
	ajout d'un span autour du nom du ciné dans le header ? << gadget
	changer le look des boutons de vérif des cartes << need un cas pour check
	activer des vraies cartes abo dans le BO ? << à voir avec élise/thomas
	ajouter les infos films manquantes dans bloc film (durée/public)
	*/

/* placement TODO :
	changer les points en carrés arrondis
	icones handi pas bleues
	changer couleur active
	mettre la légende en bas
	courber l'écran
	*/

/*---------------------------------
	Achat de carte
---------------------------------*/
/* boutons coupons */
#achat-de-carte {
  display: flex;
  flex-wrap: wrap;
}
.visuel-rubrique .achat-de-carte {
  display: none;
}

.une-carte-achat {
  position: relative;
  background: #eee;
  width: 100%;
  height: 355px;
  flex: 0 0 28%;
  margin: 10px;
  box-sizing: content-box;
  padding: 10px;
}
.une-carte-achat .visuel {
  display: block;
}
.une-carte-achat .visuel img {
  width: 100%;
  max-width: unset;
  max-height: 160px;
  float: none;
  margin-right: 0;
}

.une-carte-achat .titre {
  text-align: left;
  color: #000;
  font-size: 18px;
  flex: 0 0 100%;
  margin: 0;
  box-sizing: border-box;
}
.une-carte-achat p {
  clear: none;
  margin-top: 5px;
  height: 4em;
}
.une-carte-achat a.en-savoir-plus {
  position: initial;
  top: 175px;
  left: 10px;
}
.une-carte-achat .montant {
  text-align: right;
  width: 100%;
  display: block;
  color: #000;
  font-size: 18px;
  flex: 0 0 100%;
  margin: 0 0 10px 0;
  box-sizing: border-box;
  font-weight: bold;
}
.levallois-showroom.resa a.exampleTip {
  float: right;
}
#bloc-input-acheter {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
.une-carte-achat input {
  position: initial;
}

@media screen and (max-width: 980px) {
  .resa #recharge-carte,
  .resa #achat-carte {
    width: 100%;
    display: block;
  }
  .resa #achat-carte {
    border-right: none;
  }
  .une-carte-achat {
    flex: 0 0 26%;
  }
}

@media screen and (max-width: 800px) {
  .une-carte-achat p {
    height: 6em;
  }
  .une-carte-achat {
    height: 363px;
  }
}
@media screen and (max-width: 640px) {
  .une-carte-achat {
    flex: 0 0 100%;
    margin: 10px 0;
    box-sizing: border-box;
  }
  .une-carte-achat .visuel img {
    width: 250px;
  }
  a.exampleTip {
    position: initial;
  }
  #aToolTip {
    left: unset !important;
    right: 20px !important;
  }
}

@media screen and (max-width: 460px) {
  #lien-vers-achat-de-carte,
  #lien-vers-recharge-seule {
    display: block;
    margin: 10px auto;
  }
}

/*---------------------------------
	page paiement récap
---------------------------------*/

/* récap des places */
#recap-commande-mobile .recap {
  background: none;
}
#recap-commande-mobile .r_seance {
  background: #fff;
  color: #000;
}
#recap-commande-mobile .recap h3 {
  color: #000;
  font-size: 24px;
  font-weight: 400;
  padding-top: 0;
  padding-bottom: 0;
}
#recap-commande-mobile .visuel-rubrique {
  display: none;
}
#recap-commande-mobile .film_aff {
  top: 20px;
  left: 20px;
  width: 102px;
}
.recap .r_seance .contenu-rubrique {
  padding-left: 140px;
  min-height: 180px;
}
.r_desc_seance {
  display: none;
}

#recap-commande-mobile #recap li {
  border: 0;
}
#recap-commande-mobile #recap li.total {
  border-top: solid 1px #828282;
  margin-top: 15px;
  padding-top: 15px;
}
#recap-commande-mobile .r_places {
  margin: 20px 0;
  background: #1c1c1c;
  color: #fff;
}
#recap-commande-mobile .r_places h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding-top: 0;
  padding-bottom: 20px;
  border-bottom: solid 1px #828282;
  margin-bottom: 20px;
}
#recap-commande-mobile .r_places .contenu-rubrique {
  padding: 20px;
}
#recap-commande-mobile .r_places #recap li {
  display: flex;
  font-size: 14px;
}
#recap-commande-mobile .r_places #recap li span {
  display: inline;
}

#recap-commande-mobile #recap li.total {
  font-weight: bold;
}
#recap-commande-mobile #recap li.total .label-place:before {
  display: none;
}
#recap-commande-mobile .r_places #recap li .txt_soit {
  display: none;
}
#recap-commande-mobile .r_places #recap li .txt_dont,
#recap-commande-mobile .r_places #recap li .txt_cred {
  display: block;
}

.recap .r_places .legend {
  margin-bottom: 0;
}

/* on modifie le look du form */
#cardType,
#resa-saisie-cb-porteur input,
#resa-saisie-cb-no input[type="tel"],
#resa-saisie-infoperso-nom input,
#resa-saisie-infoperso-prenom input,
#resa-saisie-infoperso-email input,
#resa-saisie-infoperso-email-confirm input {
  width: 100%;
  max-width: 300px;
}
#date-exp-mois {
  max-width: 150px;
}
#date-exp-annee {
  max-width: 90px;
}

.info-crypto {
  color: #949494;
  font-size: 12px;
}

.cadenas-titre {
  float: right;
  background: url(/shared/img/vadv3/cadenas.png) center center no-repeat;
  background-size: 18px 26px;
} /**/

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

					Gestion des boutons

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

input[type="submit"],
input.bouton,
#le_billet_print a,
#go-site {
  padding: 0.25em 0.5em;
  height: auto;
  margin: 0 0 0.5em 0;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  border-bottom: solid 3px #969289;
  color: #000;
  background: #f5f5f5;
  text-decoration: none;
  -webkit-appearance: none;
}
#le_billet_print a {
  /* changement de couleur du bouton pour mettre en évidence*/
  color: #fff;
  font-weight: bold;
  border-color: #b11811;
  background: #e0352d;
  background: linear-gradient(
    to bottom,
    #f3564f 0%,
    #f2554e 50%,
    #e0352d 51%,
    #de362d 100%
  );
}
input[type="submit"]:hover,
input.bouton:hover,
#go-site:hover {
  background: #e8e8e8;
  cursor: pointer;
}

#le_billet_print a:hover {
  background: #b11811;
}

input.bouton,
#go-site {
  border-color: #212121;
  color: #fff;
  background: #333333;
}
input.bouton:hover,
#go-site:hover {
  background: #000;
}

#resa-bt-line {
  text-align: right;
  padding: 1em 0;
  clear: both;
}

#resa-bt-line input[type="button"],
#resa-bt-line input[type="submit"],
#go-site {
  font-size: 14px;
  font-weight: bold;
  border: 0;
  border-bottom: solid 3px #222;
  height: auto;
  padding: 9px 16px;
  color: #fff;
}
#resa-bt-line input[type="submit"],
#le_billet_print a {
  border-color: #be610e;
  background: #e5720d;
  color: #fff;
}
#resa-bt-line input[type="submit"]:hover,
#resa-bt-line input[type="submit"]:focus,
#le_billet_print a:hover,
#le_billet_print a:focus {
  background: #ff7800;
  border-color: #e5720d;
}

#go-site {
  box-sizing: border-box;
  line-height: 24px;
  margin: 0 1em;
}

/* nouveau look boutons valid/retour */
#resa-bt-line {
  padding: 0 20px 20px;
  text-align: center;
}
#resa-bt-line input[type="button"],
#resa-bt-line input[type="submit"],
#go-site {
  border: 0;
  font-size: 18px;
  margin: 0 8px;
  font-weight: 400;
  white-space: normal;
  vertical-align: middle;
}

/* on décolle les boutons */
#paiement #resa-bt-line {
  padding: 20px;
  box-sizing: border-box;
}
#resa-bt-line input[type="button"] {
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}

/*---------------------------------
	barre de checkout fixe
---------------------------------*/
/* on ajoute du padding au body pour overscroll */
body.resa.w_stik {
  padding-bottom: 100px;
}
/* on fixe la barre avec un gros zindex*/
.stik {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
}
/* on ajoute un fond à la barre pour la lisibilité et on change les couleurs + suppression des marges par défaut */
.stik #resa-bt-line {
  margin: 0;
  background: #676e73;
  color: #fff;
}
.stik .bloc.recap,
.stik .nbloc.recap {
  background: #676e73;
  color: #fff;
}
.stik .bloc.recap h2,
.stik .bloc.recap h3,
.stik .nbloc.recap h2,
.stik .nbloc.recap h3 {
  color: #fff;
}

/*---------------------------------
	modifs page confirmation
---------------------------------*/
#commande-validee-mobile #le_billet_print {
  padding: 20px;
  font-size: 14px;
}
#le_billet_print .bloc_picto {
  position: static;
  display: block;
  width: 100%;
  background: url(/shared/img/vadv3/vad_printer.png) top center no-repeat;
  background-size: 58px 54px !important;
  height: 74px;
  border-bottom: solid 1px #c4c4c4;
  padding: 0 0 20px 0;
  margin-bottom: 20px;
  box-sizing: border-box;
}
#le_billet_print #billet_wallet {
  background: none;
}
#le_billet_print #billet_wallet:before {
  display: none;
}

/* décalage du bouton */
#resa-telecharger-pdf br {
  display: none;
}
#le_billet_print a:before {
  margin-top: -4px;
}
#commande-validee-mobile #le_billet_print {
  padding: 20px 20px 70px 20px;
}
#le_billet_print #billet-simple {
  position: absolute;
  bottom: 20px;
  left: 40px;
  right: 40px;
  margin: 0 auto !important;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  padding: 0 1em !important;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 979px) {
  #le_billet_print #billet-simple {
    top: auto;
  }
  #le_billet_print a:before {
    margin-top: 7px;
  }
}
@media screen and (max-width: 640px) {
  #le_billet_print #billet-simple {
    width: auto;
    margin: 0 auto;
  }
}
@media screen and (max-width: 520px) {
  #le_billet_print #billet-simple {
    font-size: 14px;
  }
}
@media screen and (max-width: 420px) {
  #le_billet_print #billet-simple {
    font-size: 13px;
    left: 20px;
    right: 20px;
  }
}
@media screen and (max-width: 360px) {
  #le_billet_print #billet-simple {
    text-transform: none;
  }
}
/* fin du décalage du bouton */

p.last-step {
  font-weight: 400;
}
.bonne-seance {
  display: none;
}

#commande-validee-mobile #le_billet_annulation {
  padding: 20px;
  font-size: 14px;
}
#commande-validee-mobile #resa-page-merci {
  padding: 20px;
}
#commande-validee-mobile #le_billet_annulation h5 {
  font-size: 14px;
}
#le_billet_annulation .bloc_picto {
  display: none;
}

#le_billet_print a {
  border-radius: 0;
  background: #db0303;
  color: #fff;
  border: 0;
}
#le_billet_print a:hover,
#le_billet_print a:visited:hover,
#le_billet_print a:focus {
  background: #f33349;
  outline: none !important; /* autorisé car on change le BG au focus */
}

#commande-validee-mobile > p {
  text-align: center;
}

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

					Les MEDIA QUERIES

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

/*on commence par la version tablette avec un breakpoint fixé à 979px, soit juste en dessous de la largeur minimale de fonctionnement desktop*/
@media screen and (max-width: 979px) {
  /*
	déclarations un peu génériques
	--------------------------------------------------*/
  /* passer tous les éléments de largeur fixe en largeur automatique */
  body,
  header,
  #main-content,
  #masthead.vad2012,
  #masthead.vad2012 #header,
  .wrap,
  .onecol,
  .twocol,
  .message-exploitant {
    width: auto;
    height: auto;
    margin: auto;
    padding: auto;
    float: none;
    min-width: 0;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
  }
  .message-exploitant {
    max-width: 100% !important;
  }

  /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
  img,
  table,
  td,
  blockquote,
  code,
  pre,
  textarea,
  input,
  select,
  iframe,
  object,
  embed,
  video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  /* conserver le ratio des images et empêcher les débordements de boites dus aux border ou padding */
  img {
    height: auto;
    width: auto;
    box-sizing: border-box;
  }

  /*les modifs sur les blocs particuliers*/

  /*on agrandit les input*/
  input[type="text"],
  input[type="password"],
  input[type="email"],
  #paiement input[type="number"],
  #paiement input[type="tel"],
  select,
  textarea {
    height: 36px;
  }

  body.resa #titre_cinema,
  body.resa #titre_cinema h1,
  .vad2012 #logo {
    float: none !important;
    display: inline-block !important;
    position: relative !important;
    margin: 0 !important;
    clear: both;
    top: auto !important;
    height: auto !important;
    overflow: visible;
    left: auto !important;
    width: auto !important;
    box-sizing: border-box;
    background-position: 0 center !important;
    vertical-align: middle;
  }
  .vad2012 #logo img {
    margin: 0;
  }
  .vad2012 #logo {
    max-width: 200px;
  }
  body.resa #titre_cinema h1 {
    padding: 0.5em;
  }
  .vadwrap {
    text-align: left;
  }
  #masthead.vad2012 #header #logo {
    padding-left: 0;
  }

  .select-paires,
  .lunettes_tarif {
    display: block;
    padding: 0 10px;
    height: auto;
    line-height: auto;
  }
  .lunettes_tarif label {
    display: block;
  }

  #votre-film,
  #vos-places {
    display: block;
    width: auto;
    margin: 0;
  }

  #bloc-autresmoyens {
    padding: 0 15px;
  }

  .visuel-rubrique .canal,
  .visuel-rubrique .visuel-affiche,
  .visuel-rubrique .cineday,
  .visuel-rubrique .buyster,
  .visuel-rubrique .cheque-ce,
  .visuel-rubrique .cartes-abo,
  .visuel-rubrique .cartevip,
  .visuel-rubrique .cb,
  .visuel-rubrique .visuel-3D,
  .visuel-rubrique .visuel-paybox,
  .visuel-rubrique .visuel-coordonnees,
  .visuel-rubrique .visuel-carte-fid,
  .visuel-rubrique .visuel-cgv,
  .visuel-rubrique .confiserie,
  .visuel-rubrique .visuel-3ds,
  .visuel-rubrique .visuel-offres-couples {
    background-size: contain;
  }

  /*page fin, modif de l'icone telechargement pdf*/
  #le_billet_print a:before {
    width: 34px;
    height: 34px;
    float: left;
  }
  #le_billet_print a {
    margin: 0 10% !important;
    text-align: center;
    width: 80%;
    top: 0;
    font-size: 14px;
    padding: 0 0.5em;
    line-height: 34px;
    overflow: hidden;
  }
}

@media screen and (max-width: 830px) {
  /* on réajuste les moyens de paiement */
  /* sur 3 colonnes */
  #bloc-autresmoyens a {
    flex: 0 0 31%;
    margin: 0 1% 10px;
  }
}
@media screen and (max-width: 700px) {
  /* pas de marge */
  #recap {
    padding: 0;
  }
  #bandeau-recap #recap {
    height: auto;
    text-align: left;
  }
  /* on réduit la police */
  #recap li.total,
  #resa-bt-line input[type="submit"] {
    font-size: 14px;
  }
  /* et les marges */
  #resa-bt-line input[type="submit"] {
    margin: 0 auto;
    padding: 0 6px;
    width: auto;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
  }
  #resa-bt-line input[type="submit"] {
    margin: 0;
  }
  /* on fixe une hauteur moindre */
  #resa-etape-2 .bloc.recap,
  #resa-etape-2 #resa-bt-line {
    height: 70px;
    padding: 8px;
  }
  /* on change l'espace dispo */
  #resa-etape-2 .bloc.recap {
    width: 60%;
  }
  /* et on aligne différement */
  #recap li.total {
    justify-content: flex-start;
    margin: auto;
    padding: 0;
    line-height: 32px;
  }
  #resa-etape-2 #resa-bt-line {
    width: 40%;
    display: flex;
    justify-content: end;
  }
  #bandeau-recap .frais {
    margin-right: 0;
  }
  #bandeau-recap #recap .frais .label-place {
    text-align: left;
    font-size: 12px;
    max-width: 100%;
  }
}

/*mobiles*/
@media screen and (max-width: 980px) {
  /* Bypass l'existant */
  .new-home span {
    display: block !important;
  }
}
@media screen and (max-width: 640px) {
  .resa .back-to-home{
    height: 2.5em;
    padding: 7px 10px 10px 40px !important;
  }
  .resa .back-to-home.new-home{
    height: unset;
    padding: 6px 8px !important;
  }
  .resa .back-to-home span {
    display: none;
}
  /* sélection verticale */
  #le-film,
  #le-jour,
  #la-seance {
    width: 100%;
    float: none;
    display: block;
  }

  /* sélection de film pleine largeur */
  #resa-champs {
    flex-wrap: wrap;
  }
  #le-film,
  #le-jour,
  #la-seance {
    flex: 1 1 100%;
  }

  /* titre plus petit et full width */
  body.resa #titre_cinema h1 {
    font-size: 12px;
    padding: 0;
  }
  body.resa #titre_cinema {
    display: block !important;
    text-align: center;
  }

  /* modif des conteneurs */
  .brown-bg,
  .visuel-rubrique,
  .contenu-rubrique {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* visuels full width */
  .visuel-rubrique,
  #visuels-cb {
    margin: 0;
    text-align: left;
    width: 100% !important;
    padding: 0 0 0 10px;
  }
  #visuels-cb {
    padding-left: 0;
  }
  .visuel-rubrique > span,
  #visuels-cb > span {
    background-size: contain;
    display: inline-block;
    vertical-align: top;
    margin: 0 auto;
    min-height: 50px;
    padding: 0;
    height: auto;
    width: 60px;
  }
  #bloc-autresmoyens .visuel-rubrique > span.moyp_visu {
    width: 100%;
    height: 85px;
  }
  #bloc-autresmoyens .visuel-rubrique > span.moyp_titre {
    width: 100%;
    min-height: 0;
  }
  .visuel-rubrique span:after,
  #visuels-cb span:after {
    top: 14px;
    left: 58px;
    white-space: nowrap;
  }

  /* les autres mp restent en block */
  #bloc-autresmoyens .visuel-rubrique {
    padding: 15px;
  }
  .visuel-rubrique .moyp_visu {
    display: block;
  }

  #resa-etape-2 input[type="text"],
  #resa-etape-2 input[type="password"],
  #resa-etape-2 input[type="email"],
  #resa-etape-2 select,
  #resa-etape-2 textarea {
    max-width: 65%;
  }

  /* bloc 3D*/
  .select-paires,
  .lunettes_tarif {
    display: block;
    padding: 0.5em;
    height: auto;
    line-height: normal;
  }
  .lunettes_tarif label {
    margin: 0.5em;
  }

  /* bloc film */
  .film_aff {
    left: 20px;
    top: 90px;
    width: 50px;
  }
  .titre_du_film {
    font-size: 16px;
  }
  .date_seance,
  .date_seance strong {
    font-size: 12px;
  }

  .visuel_nb_places {
    left: auto;
    right: 30px;
    top: 11px;
    width: 50px;
    font-size: 20px;
    padding: 4px 0 0 22px;
  }

  /* boutons de paiement sans flex */
  #paiement #resa-bt-line {
    display: block;
    padding: 8px;
  }
  #resa-bt-line input[type="button"],
  #resa-bt-line input[type="submit"] {
    width: auto;
    padding: 0 5px;
    height: 32px;
    line-height: 32px;
  }

  /* titre plus petit */
  #recap-commande-mobile .recap h3 {
    font-size: 16px;
  }

  /* label.error { left:0; } */
  #paiement .info-crypto {
    padding: 0 0.25em;
  }
  /* #resa-saisie-infoperso-email-confirm { padding-bottom:4em; } */

  /* pas de marge inutile sous les cgv */
  #checkbox-cgv {
    padding-bottom: 0;
  }

  #le_billet_print a {
    margin: 0 5% !important;
    width: 90%;
  }
  /* pas de print sur mobile */
  #le_billet_print .bloc_picto {
    display: none;
  }

  #masthead {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  #liste-confort .typefauteuil {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  #liste-confort .typefauteuil label {
    padding: 0.5em 0.5em 0.5em 2.5em;
  }
}

/* petits écrans */
@media screen and (max-width: 500px) {
  /* meilleur affichage des tarifs */
  .un-tarif .tarif-color {
    font-size: 12px;
  }
  .un-tarif {
    flex-wrap: nowrap;
  }
  .un-tarif input[type="number"] {
    flex: 0 0 40px;
    max-width: 40px;
  }
  .un-tarif p {
    flex: 1 1 50%;
    width: auto;
    box-sizing: border-box;
  }
  #maincontent-resa .un-tarif p {
    padding: 0;
    font-size: 14px;
  }
  a.exampleTip {
    top: -2px;
    left: -28px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #acacac !important;
  }
  .tarif-color {
    display: block;
    position: static;
  }
  #bloc-autresmoyens a {
    flex: 0 0 48%;
  }
}

/*ajouts pour applis*/
body.resa-app-mobile #logo,
body.resa-app-mobile #masthead.vad2012 #titre_cinema,
body.resa-app-mobile .back-to-home,
body.resa-app-mobile #div-back-to-home {
  display: none !important;
}
body.resa-app-mobile .message-exploitant {
  /* display:none; */
}

/* champs de saisie double pour chèque CE */
input.ems-chq-ce {
  width: 200px;
}
input.ems-chq-ce-cle {
  width: 80px;
}

input.cartecine-saisie {
  width: 200px;
}
input.cartecine-saisie-cle {
  width: 80px;
}

.hide {
  display: none;
}

/* carte abo / mon compte */
span.carte-abo-login,
span.carte-abo-pass {
  display: inline-block;
}

/* placement */
#liste-confort .typefauteuil img {
  max-height: 150px;
  max-width: 150px;
}
#liste-confort .typefauteuil.disabled img {
  opacity: 0.4;
}
#liste-confort .typefauteuil {
  display: inline-block; /* width: 160px; */
}
span.FauteuilIndisponible {
  background-color: #bfbfbf;
}
/* #plan-de-salle */
#plan-de-salle fieldset.fszone {
  border: none;
  position: relative;
}
#plan-de-salle fieldset.fssouszone {
  height: 150px;
  position: relative;
  overflow: auto;
}
#ecran-sur-plan {
  border: black 1px solid;
  text-align: center;
  margin: 15px;
  padding: 15px 0 15px 0;
}

h4.conf-categ span.aide {
  font-size: 0.7em;
  line-height: 0.8em;
  font-weight: none;
  position: relative;
  top: -1px;
}
h4.conf-categ {
  cursor: pointer;
}

/* compte client */
#bloc-compte-client {
  padding: 0;
}
#bloc-compte-client .visuel-rubrique {
  background: none;
}
#bloc-compte-client h3 {
  font-size: 17px;
  padding: 0;
}
#bloc-compte-client .contenu-rubrique {
  text-align: right;
}
#bloc-compte-client .contenu-rubrique p:last-child {
  margin-bottom: 0;
}

#bloc-compte-client button {
  padding: 0.25em 0.5em;
  height: 28px;
  margin: 0 0 0.5em 0;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  border: solid 1px #969289;
  color: #fff;
  color: #000;
  background: #f5f5f5;
  background: linear-gradient(
    to bottom,
    #f5f5f5 0%,
    #f5f5f5 50%,
    #e8e8e8 51%,
    #e8e8e8 100%
  );

  text-decoration: none;

  -webkit-appearance: none;

  margin-right: 1em;
}
#compte-cine,
#div-cnx-fb {
  display: inline-block;
}
#bloc-compte-client button#cnx-facebook {
  background: #3b5998 url(/shared/vad2012/FB-f-Logo__blue_29.png) top left
    no-repeat;
  padding-left: 29px;
  color: white;
}
#compte-client-au-choix label {
  display: block;
}
#label-email {
  display: inline-block;
  width: 270px;
  vertical-align: top;
  text-align: left;
}
#ligne-motdepasse {
  display: inline-block;
  width: 110px;
  vertical-align: top;
}
#oubli-mdp {
  display: inline-block;
  width: 130px;
  vertical-align: top;
}
#label-email span,
#label-motdepasse span {
  display: block;
}
#bt-verif-emailpass {
  display: inline-block;
  width: 110px;
  padding-top: 14px;
}
#ligne-email-motdepasse input[type="email"] {
  width: 260px;
}
#ligne-email-motdepasse input[type="password"] {
  width: 100px;
}
#ligne-email-motdepasse {
  display: none;
}
#box-saisie-compte-client.box-oubli-mdp {
  text-align: left;
}

/* sélection de places numérotées */
.placement {
  padding: 40px;
  overflow: auto;
}
.placement p {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  color: #2ac2e1;
}

#plan-de-salle,
#ecran-sur-plan {
  margin-left: auto;
  margin-right: auto;
}
#plan-de-salle label {
  position: relative;
  padding: 5px 0;
  border: 1px solid #444;
}
#plan-de-salle label input,
#plan-de-salle label span {
  position: absolute;
  display: block;
  margin: -5px;
  width: 100%;
  height: 100%;
}
#plan-de-salle label input {
  background: #fff;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#plan-de-salle label input:disabled {
  background: #bbb;
}
#plan-de-salle label input:disabled + span {
  cursor: not-allowed;
}
#plan-de-salle label input:checked {
  background: #2ac2e1;
}
#plan-de-salle label input:checked + span {
  color: #fff;
}
#plan-de-salle label span {
  z-index: 1;
  line-height: 3em;
  cursor: pointer;
  font-size: 0.7em;
  font-weight: normal;
  box-sizing: border-box;
}
#plan-de-salle label span:hover {
  border-bottom: 2px solid #2ac2e1;
}

#plan-de-salle input[type="checkbox"] {
  position: absolute;
  z-index: -1;
}
#plan-de-salle label {
  font-size: 10px;
  height: 30px;
  display: block;
  width: 24px;
  border: solid 1px #333;
  cursor: pointer;
  box-sizing: border-box;
}
#plan-de-salle input[type="checkbox"]:disabled + label {
  background: #eee;
  color: #999;
  border-color: #999;
  cursor: not-allowed;
}
#plan-de-salle input[type="checkbox"]:checked + label {
  background: #2ac2e1;
  color: #fff;
}

#msg-selection-siege,
.placement label.error {
  text-align: center;
}

#plan-de-salle .gamme1 {
  background: #ffeeee;
}
#plan-de-salle .gamme2 {
  background: #eeeeff;
}
#plan-de-salle .gamme3 {
  background: #eeffff;
}
#plan-de-salle .gamme4 {
  background: #ddffee;
}

/* placement v2 */
#les_places {
  height: 500px;
  width: auto;
  border: solid 2px #ccc;
  background: #fff;
  position: relative;
  margin: 0 0 1em 0; /* ajustement suite à légende en haut */
}
#les_places .picto_pmr,
#les_places text {
  pointer-events: none; /* on permet le clickthroug à traver les formes (pictos handi, labels, etc.) */
}
#plan_controles {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #848484;
  border-radius: 4px;
  width: 36px;
  height: 108px;
}
#plan_controles:before,
#plan_controles:after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 28px;
  top: 35px;
  left: 4px;
  height: 2px;
  background: #717171;
}
#plan_controles:after {
  top: 71px;
}
#plan_controles button {
  -webkit-appearance: none;
  background: transparent url(/shared/vad2012/sprite_zoom_plan.png) 0 -36px no-repeat;
  color: #fff;
  padding: 0;
  width: 36px;
  height: 36px;
  line-height: 20px;
  vertical-align: top;
  margin: 0;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 4;
  text-indent: -1000px;
  overflow: hidden;
}
#plan_controles #zoom_moins {
  top: 72px;
  background-position: 0 -72px;
}
#plan_controles #zoom_plus {
  top: 0;
  background-position: 0 0;
}
#plan_controles button:hover {
  background-position: -40px -36px;
}
#plan_controles #zoom_moins:hover {
  background-position: -40px -72px;
}
#plan_controles #zoom_plus:hover {
  background-position: -40px 0;
}

#plan_places_choisies {
  margin: 0;
  padding: 0.5em;
  border: solid 1px #ccc;
  border-left: 0;
  border-bottom: 0;
  background: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  font-size: 13px;
}

#plan_legende {
  text-align: left;
  font-size: 13px;
  padding: 0.5em 0 1em;
  padding: 0 0 0.5em 0; /* ajustement suite à légende en haut */
}
#plan_legende p {
  margin: 0;
  padding: 0 0 0.25em 0;
  line-height: 20px;
}
.leg_color,
.detail_leg {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  border: solid 1px #000;
  box-sizing: border-box;
  background: #ccc;
  border-radius: 50%;
}
.leg_color.forme_carre {
  border-radius: 0;
}
.leg_color.forme_fauteuil {
  border-radius: 0;
  border: none;
  background: none;
}

/* bloc erreur */
div.cadre div.plan_places {
  color: #c00;
  padding: 1em;
  margin: 0 0 0.5em 0;
  text-align: center;
}
div.cadre div.plan_places.places_erreur {
  border: solid 2px #c00;
  background: #f5d2d2;
}
div.cadre div.plan_places.places_succes {
  border: solid 2px #5ea30c;
  background: #d9f0be;
  color: #5ea30c;
}
/* on masque le détail des places */
.detail_places {
  display: none;
}

/* le tooltip bas de gamme */
#box-shadow-div {
  position: fixed;
  width: auto;
  height: auto;
  padding: 0.33em 0.5em;
  font-size: 13px;
  background-color: #333;
  top: 100%;
  left: 100%;
  color: #fff;
  display: none;
}

/* opti mobile */
@media screen and (max-width: 640px) {
  #les_places {
    height: 300px;
  }
}

/* fin du placement v2 */

/*---------------------------------
	Page confirmation carte demat
---------------------------------*/

#commande-validee-carte-demat .nbloc {
  padding-left: 20px;
  margin-bottom: 0;
}
#commande-validee-mobile .nbloc h3 {
  text-align: center;
  font-size: 20px;
}
#commande-validee-mobile .nbloc #cmd-validee-fid {
  text-align: center;
  font-size: 20px !important;
  font-weight: 400;
}
#commande-validee-mobile .recap-une-phrase {
  text-align: center;
}
#commande-validee-mobile .recap-une-phrase .visuel img {
  width: 300px;
}
#commande-validee-mobile .recap-fid {
  font-size: 18px;
}
#commande-validee-mobile #instructions-activation {
  font-size: 22px;
  text-align: center;
}
#commande-validee-carte-demat .cmd-dans-mail {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
#commande-validee-carte-demat #commande-validee-mobile #le_billet_print {
  padding: 20px;
}

/*---------------------------------
	Page confirmation confiserie
---------------------------------*/

#commande-validee-confiserie .nbloc {
  padding-left: 20px;
  margin-bottom: 0;
}
#commande-validee-mobile .nbloc h3 {
  text-align: center;
  font-size: 26px;
}
#commande-validee-mobile .recap-une-phrase {
  text-align: center;
}
#commande-validee-mobile .recap-une-phrase .visuel img {
  width: 300px;
}
#commande-validee-confiserie .cmd-dans-mail {
  text-align: center;

  font-size: 16px;
}

/*---------------------------------
	divers
---------------------------------*/
/* on masque 3D secure car les utilisateurs savent ce que c'est à présent */
.visuel-rubrique .visuel-3ds {
  display: none;
}

/* pas de gif special vista */
.waiting_gif.nope {
  display: none;
}

/* texte inutile */
#resa-saisie-legende-champs {
  display: none;
}

/* blocs à masquer */
#le_billet_mail,
#le_billet_smartphone,
#msghotmail {
  display: none;
}

/*On n'affiche pas le tag pour les avants premières en festival*/
.tag-AVANTPFEST {
  display: none;
}

/* bouton wallet à la bonne taille */
.add_to_wallet img {
  width: 110px;
  height: auto;
}

/* pas de tuto */
#comment-reserver {
  display: none;
}

/* résa portail */
#resa-selection ul,
#resa-selection li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#resa-selection a {
  display: block;
  padding: 0.25em;
  margin: 0.25em 0;
  border-bottom: solid 1px #ccc;
}
#resa-selection li:last-child a {
  border: 0;
}

/*Bloc Pass sanitaire */
#attention-pass-sanitaire {
  border: solid 1px #c00;
}
#attention-pass-sanitaire .visuel-rubrique {
  background-color: #c00;
  padding: 5px 20px;
}
#attention-pass-sanitaire hr {
  border: solid 1px #ccc;
  height: 0;
  border-bottom: 0;
  margin-bottom: 15px;
}
.visuel-rubrique .attention-pass {
  background: url(/shared/img/vad2021/icone-qrcode.png) no-repeat center;
  background-size: contain;
  height: 75px;
}
.visuel-rubrique .attention-pass:after {
  content: "Pass sanitaire";
  color: #fff;
  top: 67px;
}
#attention-pass-sanitaire .contenu-rubrique::before {
  content: "Pass sanitaire";
  display: block;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

@media screen and (max-width: 640px) {
  .visuel-rubrique .attention-pass {
    height: 50px;
  }
  .visuel-rubrique .attention-pass:after {
    top: 14px;
  }
}

#paiement-payline #recap-commande-mobile-cb {
  padding: 20px;
}

/*On masque le tag NUM*/
.tag-NUM {
  display: none;
}

/*Lien Achat confiserie*/
#lien-vers-achat-de-confiserie {
  color: #fff;
  background: #000;
  padding: 6px 10px;
  display: inline-block;
  width: 70px;
  margin-left: 10px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}

@media screen and (max-width: 640px) {
  #copyright span {
    display: block;
  }
}