/* CSS Document */


:root {
  /*--main-color: #76c7e6;
  --blue: #76c7e6;
  --blueCause: #34ade5;*/
  
  
  --main-color: #35b9d1;
  --blue: #35b9d1;
  --blueCause: #35b9d1;
  
  
  
/*  --yellow:#f5de74;*/
  --yellow:#fbde6e;
  --grey:#f2f2f2;
  --pink:#f0b1b1;
  --violet:#8b9ed0;
  --bg-color: #f2f2f2;
  --txt-color: #1d1d1d;
  --light-color: #fff;  
  
  --cinema:#ec6df7;
  --Cinéma:#ec6df7;
  --talk:#90B897;
  --Talk:#90B897;
  --musique:#e5712b;
  --Musique:#e5712b;
  --spectacle:#88cae3;
  --Stand-up:#88cae3;
 
}

::-moz-selection { color: var(--light-color); background: var(--main-color)}
::selection {color: var(--light-color);  background: var(--main-color)}

.forSimpleLogo {display:none !important}

html {scroll-behavior: smooth;}
body, html {margin:0; padding:0;  }
body {color:var(--txt-color);font-family: 'Nunito', sans-serif; font-weight:500; font-size:15px; line-height:20px; background-color: var(--bg-color); height:100%}
strong, b {font-weight:900}

#logo {cursor:pointer}

.black {color:var(--txt-color)}
a, a:visited {color:var(--main-color); text-decoration:none}

section, div {position:relative}
.container { width:1200px;     max-width: 90%; margin:0 auto; padding:30px 0; overflow:hidden}
.containerFull { width:1800px;     max-width: 90%; margin:0 auto; padding:30px 0; overflow:hidden}
.bloc1-3,.blocSpa1-3, .bloc1-2, .bloc1-4 .bloc1-5 {display:inline-block; vertical-align:top; width:29%;}
.blocSpa1-3 {width:6%}
.bloc1-2 { width:50%}
.bloc1-4,.blocSpa1-4 {display:inline-block; vertical-align:top; width:22.5%;}
.bloc1-5 {display:inline-block; vertical-align:top; width:20%;}
.blocSpa1-4 {width:3%}
.floatRight {float:right}
img {max-width:100%}


/* TOP BAR MENU*/

/*h2, h3 { font-size:5vw; font-weight:900; line-height:3.5vw; letter-spacing:-5px; margin:0; padding:0}*/
h2, h3 { font-size:88px; font-weight:900; line-height:75px; letter-spacing:-4px; margin:0; padding:0}
h2 small {font-size:60px; letter-spacing:-3px}
h3 {font-size:25px; line-height:30px; letter-spacing:-0.5px; margin:0 0 20px 0}
h2 img {display:inline-block; margin:20px 0 }
h1 {margin:0; padding:0}
h1 img { display:block; position:absolute;z-index:101; top:0; left:50%; margin: 0 auto 0 -250px; width:500px}

p {font-size:15px; line-height:21px; margin:10px 0 20px 0}
p.big {font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    padding-right: 15px; }
p.small{font-size:12px; line-height:15px}
p.medium {font-size:17px; line-height:24px; font-weight:700}

.linkOver:hover {transform: scale(0.95);}

.blocTitle {display:block; padding:0 0 40px 10px}
.blocTitle * {vertical-align:middle}
/*.blocTitle h2 { font-size:3.8vw; font-weight:900; line-height:3.5vw; letter-spacing:-3px; margin:0; padding:0}*/
.blocTitle .picto {display:inline-block; position:absolute; top:-60px; left:380px; height:100px;}

.tCenter {text-align:center}
.tLeft, .tLeft * {text-align:left}
.tRight {text-align:right}

hr.spacer, hr.spacer20,hr.spacer10 {display:block; padding:40px 0; border:0}
hr.spacer20 { padding:10px 0;}
hr.spacer10 { padding:5px 0;}



.topBar {display:block; position:absolute; z-index:500; left:0; top:0; width:100%; padding:15px 20px 25px 20px; background-color: transparent;
background-image:url(../img/vague_blanc_small_menu.png); background-position:center bottom; background-repeat:repeat-x}

.topBar .socialLinks {float:left}
.topBar .socialLinks img {display:inline-block; width:34px; padding:4px}

.topBar .billetterieBt {float:right}

.topBar nav.left , .topBar nav.right, .topBar .space  { display:inline-block; width:33%}
.topBar nav.left {text-align:right}
.topBar nav.right {text-align:left}
.topBar nav a { display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.01em;
    padding: 10px 20px;}
.topBar nav a:hover{ transform: scale(1.05);}

#topBar.navPersist {position:fixed; top:0; left:0; margin-top:0;z-index:200;  padding:10px 20px 20px 20px;}
#topBar.navPersist h1 img { z-index:500; top:0; left:50%; margin: 0 auto 0 -190px; width:380px}
/*#topBar.navPersist .space  {width:23%}
#topBar.navPersist nav.left , #topBar.navPersist nav.right  { display:inline-block; width:38%}*/
#topBar.navPersist {background-image:url(../img/vague_blanc_small_menu2.png); background-position:center bottom; background-repeat:repeat-x}

nav .socialLinks  a {display:inline-block; font-size:14px; padding:0}
nav .socialLinks  a:hover{ transform: scale(1.15);}


.imgBloc {display:block; margin:15px auto;padding: 4px; width:90%;
    border: 1px solid #ffffff4d; }

/* PROGRAMME*/
/*#programme {background:var(--blue); padding:60px 0}*/
#programme { padding:0 0 60px 0;background: linear-gradient(180deg, rgba(255,255,255,1) 12%, rgba(242,242,242,1) 30%);}
#programme h2 { font-size:60px; font-weight:900; line-height:65px; letter-spacing:-3px; margin:0; padding:0}

#programme.addSpace {padding:90px 0 60px 0;}

#programme.addSpace .blocTitle .picto {  left:85%; height:130px;}



/* LE VILLAGE*/
#village {background:var(--yellow); padding:30px 0;background-image:url(../img/photo_village_3.jpg); background-position:center top; /*background-size:100% auto;*/ background-repeat:no-repeat}
#village .masq {display:block; position:absolute; top:0; left:0; width:100%; height:32px; z-index:105;
background-image:url(../img/vague_grey_small.png); background-size:auto 100%; background-position:left bottom; background-repeat: repeat-x}
/*#village .titleVillage {padding:67px 122px 109px 32px; background:url(../img/nuage_blanc_big.png) left center no-repeat;margin-top: 0; }*/
#village .titleVillage {padding:67px 122px 50px 32px; background:url(../img/nuage_blanc_big.png) left center no-repeat;margin-top: 0; }




/*#village .titleVillage .ball {position:absolute; right:-7px; top:44%}*/
#village .titleVillage .ball {position:absolute; left:80%; top:44%}
#village h2 { font-size:120px; font-weight:900; line-height:90px; letter-spacing:-4px; margin:0; padding:0}
#village h2 small {font-size:60px; letter-spacing:-3px; display:inline-block; width: 130% }

#village h2 .underline { margin:25px 0 0 15%}
#village .bg { left:0; top:0;/* height:100%;*/ background:url(../img/bg_village.png) 1% center no-repeat; background-attachment:fixed}

#village h3 { font-size: 22px;    line-height: 28px;}

#village ::-moz-selection { color: var(--yellow); background: var(--light-color)}
#village ::selection {color: var(--yellow);  background: var(--light-color)}

/*LE TOUQUET*/
#le-touquet {background:var(--grey); padding:95px 0 40px 0}
#le-touquet .masq {display:block; position:absolute; top:0; left:0; width:100%; height:32px; z-index:105;
background-image:url(../img/vague_yellow_small.png); background-size:auto 100%; background-position:left bottom; background-repeat: repeat-x}
#le-touquet h2 {color:var(--blueCause)}
#le-touquet h2 small {color:var(--txt-color)}

/* LA CAUSE*/
#la-cause {background-color:#fff; padding:80px 0 20px 0; background-image:url(../img/photo_la_cause1.jpg); background-position:center top; background-size:cover; background-repeat:no-repeat}
#la-cause .masq {display:block; position:absolute; top:0; left:0; width:100%; height:32px; z-index:105;
background-image:url(../img/vague_grey_small.png); background-size:auto 100%; background-position:left bottom; background-repeat: repeat-x}
#la-cause h2 { font-size:56px; line-height:65px; font-weight:900;  letter-spacing:-2px; color:#34ade5}
#la-cause h3.brush_cause { margin-left:-20px; color: #fff; padding: 10px 10px 10px 30px;background-image: url(../img/brush_cause.png);
background-position: left -2px;  background-repeat: no-repeat; line-height:40px; font-weight:700}
#la-cause-info {background:#fff}


/*PARTE?AIRES*/
#partenaires {background:#fff; padding:60px 0 0 0}
#partenaires h2 { font-size:45px; font-weight:900; line-height:50px; letter-spacing:-2px; text-align:center }
#partenaires h3  {  text-align:center; margin:25px auto 0 auto; text-transform: uppercase;    font-size: 15px;}
/*#partenaires h3 {
    text-align: center;
    margin: 25px auto 0 auto;
    text-transform: uppercase;
    font-size: 15px;
    background: #82c7e5;
    padding: 10px 15px;
    display: inline-block;
    color: #fff;
    border-radius: 12px;
    line-height: 15px;
}*/

#partenaires-more {}

.icoUp{position:fixed;width:40px;height:40px;line-height:40px;text-align:center;z-index:500;background:var(--main-color);right:2%;bottom:2%;opacity:.8;cursor:pointer}
.icoUp:hover{opacity:1}

/*FOOTER*/

footer {background:var(--blue); color:var(--txt-color); position:relative; padding-top:62px; padding-bottom:30px}
footer a,footer a:visited{ color:var(--txt-color); font-weight:700; display:inline-block; margin: 0}

.linkFooter { text-align:center; line-height:18px; margin:0; }
.linkFooter a {margin:6px 0 }
.linkFooter a:hover {color:#fff}




footer .masq {display:block; position:absolute; top:0; left:0; width:100%; height:32px; z-index:105;
background-image:url(../img/vague_blanc_small.png); background-size:auto 100%; background-position:left bottom; background-repeat: repeat-x}


/*globalAnim*/
.anim, #topBar a{-webkit-transition: all 0.5s; -moz-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ; }
.anim2{-webkit-transition: all 0.25s; -moz-transition: all 0.25s ; -o-transition: all 0.25s ; transition: all 0.25s ; transition-delay: 100ms;}
.anim3{-webkit-transition: all 0.5s; -moz-transition: all 0.5s ; -o-transition: all 0.5s ; transition: all 0.5s ; transition-delay: 150ms;}



* { box-sizing: border-box; }
.filters {margin: 0 0 20px 0; padding-left:8px;}

a.more {display:block; margin:0 auto 20px auto; width:200px; max-width:90%; text-align:center; font-size:17px; font-weight:900}
a.more .mask  { display:inline-block; background:#000000; width:38px; height:21px}

a.more2 {display:block; margin: 15px 0; width:200px; max-width:90%; text-align:left; font-size:16px; font-weight:900}
a.more3 {display: inline-block; margin: 15px 0; max-width:90%; text-align:left; font-size:19px; letter-spacing:-0.5px; font-weight:900; padding:15px 20px; background:#fff}

	
.tag, .tagjour {display:inline-block; padding:5px; font-size:12px; line-height:11px; color:#fff;letter-spacing: 0.5px;}
.tagjour {background:var(--txt-color)}
.tagUK {height:22px; float:right}

.button .ico { width:25px; height:25px; margin-right:5px; background-position:center center;background-image:url(../img/ico-musique.png)}
.button span { display:inline-block; vertical-align:middle}

#affiche .ico { background-image:url(../img/ico-star.png)}
#affiche.is-checked .ico { background-image:url(../img/ico-star-on.png)}
#affiche.is-checked { background:#2d2d2d; color:#fff}

#Musique .ico { background-image:url(../img/ico-musique-on.png)}
#Musique.is-checked .ico { background-image:url(../img/ico-musique.png)}
#Musique.is-checked {background:#e5712b; color:#fff;}

#Talk .ico { background-image:url(../img/ico-talk-on.png)}
#Talk.is-checked .ico { background-image:url(../img/ico-talk.png)}
#Talk.is-checked { background:#90B897; color:#fff}


#cinema .ico { background-image:url(../img/ico-cinema.png)}
#cinema.is-checked .ico { background-image:url(../img/ico-cinema-on.png)}
#cinema.is-checked { background:var(--cinema); color:#fff}

#Spectacle .ico { background-image:url(../img/ico-standup-on.png)}
#Spectacle.is-checked .ico { background-image:url(../img/ico-standup.png)}
#Spectacle.is-checked { background:#88cae3; color:#fff}

#Samedi .ico, #Dimanche .ico, #Tous .ico { background-image:url(../img/ico-check-on.png)}
#Samedi.is-checked .ico, #Dimanche.is-checked .ico , #Tous.is-checked .ico{ background-image:url(../img/ico-check.png)}
#Samedi.is-checked, #Dimanche.is-checked, #Tous.is-checked {color:var(--txt-color)}

.button-group-date {margin-right:0 !important}


.button-group-date .button {
   padding: 5px 5px 5px 5px;
  font-size: 14px;
  font-weight:900;
  margin-right:0;
 }

/*CART*/
.cart {
  width: 23%;  height: 480px;  margin: 1%;
  float: left;
  background:#f0f0f0;  border:0px solid var(--txt-color);
  padding:20px;  overflow:hidden;
  background-position:center center;
  background-size:cover;  cursor:pointer;
}

.cart.Talk {border:0px solid var(--main-color)}


.details {position:absolute; width:100%; bottom: -280px;   height: 360px; background:#fff; left:0; padding:20px 5px; text-align:center}
.details .cloud {background: url(../img/nuage_flux.png) top center no-repeat; display:block; margin:-45px auto 10px auto}
.details .cloud  img {margin-top:12px}
.details h3 {padding:0; margin:0 0 2px 0; line-height:20px; font-size:20px; font-weight:700; color:#000}
.details .style {text-transform:uppercase; font-size:12px; color:var(--txt-color); font-weight:500}
.cart .details .bio {  padding: 0 10%; margin:25px 0 0 0}

.cart .details .bio .txt { font-size:14px; line-height:19px; display:block; line-height:18px; text-align:left; height:125px; 
   /*  white-space: nowrap;*/    overflow: hidden;  text-overflow: ellipsis;}
.cart .details .bio .date {font-weight:900; text-align:left; margin:15px 0 15px 0;}

.cart:hover .details {bottom:0}
.cart:hover .details .bio { opacity:1}



/*contact*/

.formContainer label small {float:right}
.formContainer input.errorForm {border:1px solid #F00 !important;}

.formContainer label small {font-size:11px; opacity:0.7}
.formContainer input[type="radio"]{padding:10px 0; width:5px; }
.formContainer input.email {background:#fff; padding:10px; display: inline-block; width:86%; margin:5px 0 15px 2%; color:var(--txt-color); font-weight:700; border:2px solid var(--main-color);}

.formContainer div.checkbox input, .formContainer div.radio input { display: inline-block; width:20px; margin-right:5px ;margin-bottom:20px }
.formContainer div.checkbox label , .formContainer div.radio label.labelList {display: inline-block;  width: calc(100% - 40px); cursor:pointer ;margin:0 0 5px 0}

.formContainer div.checkbox input {vertical-align:top; }
.formContainer div.radio input {vertical-align:top; margin-top: 1px;}




.button {
  display: inline-block;
  cursor:pointer;
  padding: 5px 15px 5px 9px;
  background-color:transparent;
  border: none;
 border-radius: 7px;
  font-size: 15px;
  font-weight:900;
  text-transform:uppercase;
  font-family: 'Nunito', sans-serif;

}


.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
  border-radius: 12px;
  margin-right:5px;
}



/* ---- isotope ---- */

.grid {
  /*background: #EEE;*/
  /*max-width: 1200px;*/
  display:block;
  min-height:560px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.ui-group {  display: inline-block;}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

.page header .masq {display:block; position:absolute; bottom:0; left:0; width:100%; height:32px; z-index:105;
background-image:url(../img/vague_blanc_small_inv.png); background-size:auto 100%; background-position:left bottom; background-repeat: repeat-x}


.page header {padding:170px 0 40px 0 ; background:var(--main-color); position:relative}
.breadcrumb {  padding: 0 .5rem;}

.breadcrumb ul {
    display: flex;    flex-wrap: wrap;    list-style: none;    margin: 0;    padding: 0;
	color:#fff; font-weight:900; font-size:16px; letter-spacing:-0.5px; text-transform:capitalize
}
.breadcrumb ul li a {color:var(--txt-color)}
.breadcrumb ul img {display: inline-block;
    height: 14px;
    margin: 2px 7px 0 7px;}
.breadcrumb ul li a:hover {color:#fff}
/*.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 10px;
    content: "→";
	color:#fff;
}*/
.inner { display:block; padding:25px}

#artiste h1 { font-size:46px; line-height:44px; margin:20px 0 15px 0; letter-spacing:-0.5px}
#artiste  .sub {font-size:20px; text-transform:uppercase }
#artiste .recap {font-size:17px; line-height:24px; margin:40px 0 40px 0; width:500px; max-width:90%}
#artiste .recap strong {font-weight:700}
#artiste .date {font-weight:900; text-align:left; margin:15px 0 35px 0; font-size:18px; line-height:24px}
.pictoArt {position:absolute; bottom:-45px; left:-2%}

.mfp-bg {

    background: #0b3a4b !important;
    opacity: 0.95 !important ;
}


@media screen and (min-width: 0px) and (max-width: 1150px) { 
.cart {
  width: 24%;}
}

@media screen and (min-width: 0px) and (max-width: 960px) { 
.cart {
  width: 32%;}
}
@media screen and (min-width: 0px) and (max-width: 700px) { 
.cart {
  width: 48%;}
}