/* CSS Document */
/* Elements de base */
html { width: 100%; height: 100%; }
body { margin: 0px; padding: 0px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; font-size: 16px; line-height: normal; color: #4c4c4e; background: #fff;
height: 100%; width: 100%; overflow-x: hidden; }
table { margin: 0px; padding: 0px; }
tr, thead, tbody { margin: 0px; padding: 0px; }
td { margin: 0px; padding: 0px; vertical-align: top; }
th { margin: 0px; padding: 0px; vertical-align: top; }
p { margin: 0px; padding: 0px; margin-bottom: 8px; height: auto; }
ul, ol { margin: 12px 0px; padding: 0; padding-left: 40px; }
li { margin-top: 0px; margin-bottom: 0px; list-style-image: url(/img/front/bull-li.png); line-height: 1.2em; }
img { border: none; vertical-align: top; }
input { vertical-align: middle; margin: 0px; border: 1px solid #888; padding: 3px 6px; font-size: 14px; line-height: normal; color: #000; font-family: 'Roboto Condensed', sans-serif; box-sizing: border-box; }
input[type=file] { border: none; }
input[type=checkbox] { margin-top: -2px; border: none; }
input[type=radio] { margin-top: -3px; border: none; }
input[type=submit] { background: #eee; padding: 3px 8px; border: 1px solid #888; color: #666; cursor: pointer; }
input.date { width: 90px; }
textarea { margin: 0px; border: 1px solid #888; padding: 3px 6px; font-size: 14px; color: #000; resize: none; font-family: Arial, sans-serif; box-sizing: border-box; }
select { margin: 0px; border: 1px solid #888; padding: 3px 6px; font-size: 14px; color: #000; font-family: Arial, sans-serif; }
select option { background: #fff !important; color: #4c4c4e !important; padding: 3px 5px; }
div { position: relative; }
hr { color: #999; background-color: #999; height: 1px; border: none; }
strong { font-weight: 700; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; }
b { font-weight: 700; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; }
iframe, object { max-width: 100%; }
*:focus { outline: none; }
/* Liens et classes associées */
a, a:link, a:visited { text-decoration: none; color: #00afcc; }
a:hover { text-decoration: none; }
a.actif { font-weight: bold; }
li a { text-decoration: none; color: #00afcc; }
a.ficpdf { display: inline-block; background: url(/img/admin/pdf.png) no-repeat left center; padding-left: 24px; }
a.bouton { display: block; width: 400px; max-width: 100%; padding: 12px 24px; border-radius: 8px; margin: 8px auto; text-align: center; background: #888; color: #fff !important; font-weight: 700;
opacity: 0.7; transition: all .3s ease-in-out; box-sizing: border-box; }
a.bouton:hover { opacity: 1; }
h3 > a.bouton { color: #fff; }
.btnpdf { display: inline-block; padding: 4px 4px 4px 30px; margin: 0 24px; background: url(/img/front/picto-download.png) no-repeat left top; min-height: 24px; }
/* Titres */
h1 { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 42px; line-height: 42px; margin: 5px 0; padding: 0px; text-align: center; letter-spacing: 3px; }
h2 { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 32px; line-height: 32px; margin: 5px 0; padding: 0px; }
h2.souligne { margin: 0 0 20px 0; padding: 0 0 12px 0; border-bottom: 1px dotted #999; }
h2 > .trait { display: inline-block; width: 240px; height: 0px; overflow: hidden; border: 2px solid #666; border-radius: 2px; margin: 16px 24px 0 24px; vertical-align: top; }
h3 { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 26px; line-height: 26px; margin: 5px 0; padding: 0px; letter-spacing: 2px; color: #303b46; }
h3 > .trait { display: inline-block; width: 240px; height: 0px; overflow: hidden; border: 1px solid #303b46; border-radius: 1px; margin: 14px 20px 0 20px; vertical-align: top; }
h4 { position: relative; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; line-height: 18px; margin: 12px 0 8px 0; padding: 4px 8px; text-transform: uppercase;
letter-spacing: 2px; background: #666; color: #fff; }
/* Classes de style */
body .erreur { font-size: 13px; font-style: italic; color: #F00; background: url(/img/front/erreur.png) no-repeat left; padding-left: 22px; font-weight: 500; }
.content { position: relative; width: 1280px; margin: 0 auto; box-sizing: border-box; }
.nodisp { display: none; }
.clear { display: block; clear: both; }
.alerte { display: inline-block; font-size: 11px; font-style: normal; color: #ffae00; background: url(/img/front/erreur.png) no-repeat left top; padding-left: 20px; font-weight: normal; }
.info { font-size: 11px; font-style: italic; font-weight: 400; color: #369; }
.gros { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 8px; }
.petit { font-size: 12px; font-style: normal; font-weight: 300; }
.surligne { background: #FF0; color: #036; font-style: normal; font-weight: bold; }
.hr { border-top: 1px solid #777; height: 1px; font-size: 0px; }
.ombre { -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
.tombre { text-shadow: 0px 0px 4px #000; -moz-text-shadow: 0px 0px 4px #000; -webkit-text-shadow: 0px 0px 4px #000; }
.outline { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; color: #fff; }
.espace { height: 5px; font-size: 0px; overflow: hidden; }
.icone { width: 16px; height: 16px; }
.contenu { left: 50%; width: 1280px; margin-left: -640px; } .contenu > .padding { padding: 0px; }
.cntcol { display: table; width: 100%; }
.cntcol > .col2 { display: table-cell; width: 50%; }
.cntcol > .col2 > .padding { padding: 0 12px; }
.cntcol > .col3 { display: table-cell; width: 33%; border-left: 1px solid #c7c7c7; } .cntcol > .col3:first-child { border-left: none; }
.cntcol > .col3 > .padding { padding: 0 12px; }
.inline { display: inline-block; }
.w100pct { width: 100%; }
.fright { float: right; }
.aright { text-align: right !important; } .aleft { text-align: left !important; } .acenter { text-align: center !important; }
.vacenter { vertical-align: middle; } .vatop { vertical-align: top; }
.disabled { color: #d7d7d7; }
.br { height: 0; overflow: hidden; }
.big { font-size: 50px; }
.vbig { font-size: 60px; }
.vvbig { font-size: 66px; font-weight: 700; vertical-align: top; }
.rond-coul { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-color: #aaa; }
.marge-fmax { margin: 0 6px; }
.marge2-fmax { display: inline-block; margin: 8px 55px 0 38px; width: 4px; height: 46px; line-height: 64px; background: rgba(255,255,255,0.4); vertical-align: middle; }
.nopadding { padding: 0 !important; }
.noborder { border: none !important; }
.cnt-centre { width: 800px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.cnt-centre.padhor { padding: 0 20px; }
.fleft { float: left; }
.fright { float: right; }
/* Couleurs */
.blanc { color: #fff; }
.gris { color: #666; }
.grisc { color: #aaa !important; }
.grisc a { color: #aaa !important; border-color: #aaa !important; }
a .grisc { color: #aaa !important; border-color: #aaa !important; }
.bg-gris { background-color: #eee; color: #666; }
.css-bgc { padding: 12px 16px; margin: 12px 0; background-color: #999; color: #fff; }
.css-bgc a, .cnt-bgcoul a:link, .cnt-bgcoul a:visited { color: #fff; }
.crouge, .cnt-popmen > a.crouge { color: #933 !important; }
/* Effet d'affichage */
.twist { -webkit-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); transition: all 0.3s ease-in-out; }
.twist.avant { -webkit-transform: rotateZ(35deg); -ms-transform: rotateZ(35deg); transform: rotateZ(35deg); }
.twist.arriere { -webkit-transform: rotateZ(-25deg); -ms-transform: rotateZ(-25deg); transform: rotateZ(-25deg); }
.affconten { perspective: 1200px; perspective-origin: center; }
.affscroll { -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; transition: all 1s ease-in-out; }
.affscroll.affvisible { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
/* Fond de page */
#bg-body { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
#bg-opac { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.85); }
/* Entête de page */
#entete { position: relative; height: 100px; color: #fff; padding: 0; z-index: 6; text-align: center; }
#entete #bg-entete { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #303b46; box-shadow: 0 0 12px #000, 0 0 8px #000;
background-position: center; background-repeat: no-repeat; background-size: cover; }
#entete #txt-entete { padding: 10px 0; z-index: 2; font-size: 16px; font-weight: 700; text-align: center; text-shadow: 0 0 2px #000, -1px -1px 2px #000, 1px 1px 2px #000; }
#txt-entete > .content { display: inline-block; padding: 4px 0 0 0; width: auto; vertical-align: top; }
#entete.pmusic #txt-entete > .content { padding: 4px 0 0 96px; text-align: left; max-width: calc(100% - 64px); }
#entete #txt-entete h1 { height: 34px; color: #000; font-size: 32px; line-height: 34px; font-weight: 600; letter-spacing: 1px; margin: 0; padding: 5px 4px;
text-shadow: 1px 1px 1px #eee, -1px -1px 1px #eee, -1px 1px 1px #eee, 1px -1px 1px #eee; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#entete #txt-entete .content > div { height: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 1px 4px; }
#entete.pmusic #txt-entete h1 { text-align: left; }
#entete #txt-entete #img-logo { position: absolute; left: 0; top: 0; height: 80px; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
/* Menu principal */
#cnt-menu { height: 40px; padding: 0; text-align: right; background: #fff; z-index: 9; box-shadow: 0 0 8px #000; }
#cnt-menu a { display: inline-block; height: 40px; line-height: 40px; padding: 0 16px; text-align: center; font-size: 16px; color: #333; letter-spacing: 1px;
transition: all 0.3s ease-in-out; text-decoration: none; box-sizing: border-box; vertical-align: middle; }
#cnt-menu a:hover { text-decoration: none; background-color: #e7e7e7; }
#cnt-menu a.actif { text-decoration: none; background-color: #333; color: #fff; }
#cnt-menu a:nth-of-type(n+2) > img { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin: -2px 2px 0 0; -webkit-filter: none; -ms-filter: none; filter: none; }
#cnt-menu a.actif > img { -webkit-filter: contrast(0) brightness(100); -ms-filter: contrast(0) brightness(100); filter: contrast(0) brightness(100); }
#cnt-menu a.btn-popmen { padding: 0 8px; }
#cnt-menu #btn-logo { float: left; margin: 4px 0; height: 32px; }
#cnt-menu a#btn-logo:hover { background-color: transparent; }
#cnt-menu #cnt-rech { float: left; margin: 7px 0 0 0; background: #e7e7e7; }
#cnt-menu #cnt-rech > input { width: 150px; border: none; background: none; padding: 4px 6px; line-height: 18px; }
#cnt-menu #cnt-rech > input:focus { outline: none; box-shadow: none; }
#cnt-menu #cnt-rech > img { padding: 5px 4px 4px 4px; }
/* Sous-menu pages music */
#menu { height: 40px; text-align: left; font-size: 0; background: #333; z-index: 7; box-shadow: 0 0 8px #000; }
#menu > .content > a { display: inline-block; line-height: 28px; padding: 6px 12px; text-align: center; font-size: 0px; color: #fff; letter-spacing: 0px;
transition: all 0.3s ease-in-out; text-decoration: none; box-sizing: border-box; vertical-align: middle; }
#menu > .content > a:hover { /* background-color: #ececec; border-color: #ececec; color: #333; */ text-decoration: none; background-color: rgba(255,255,255,0.3); }
#menu > .content > a.actif { background-color: #fff !important; color: #333; font-weight: 700; text-decoration: none; box-shadow: none !important; font-size: 16px; padding: 6px 16px 6px 12px; }
#menu > .content > a > img { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin: -2px 0 0 0;
-webkit-filter: contrast(0) brightness(100); -ms-filter: contrast(0) brightness(100); filter: contrast(0) brightness(100); }
#menu > .content > a.actif > img { -webkit-filter: none; -ms-filter: none; filter: none; margin: -2px 2px 0 0; }
#menu > .content > a.nocap > img { margin: -2px 0 0 0; }
#menu > .content > a.titre { padding: 0 20px 0 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 27px; line-height: 32px; font-weight: 300; }
#menu > .content > a.titre:hover { background-color: transparent; }
#menu > .content > a.titre.actif { padding: 0 16px 0 16px; }
#menu #btn-recherche { float: right; margin: 0 0 0 24px; }
#menu #btn-recherche.ouvert { background-color: #fff; }
#menu #btn-recherche.ouvert > img { -webkit-filter: none; -ms-filter: none; filter: none; }
#menu #btn-recherche.actif { padding: 6px 12px; }
#cnt-recherche { position: absolute; display: none; background: #fff; padding: 4px 6px; box-shadow: 2px 2px 2px rgba(0,0,0,0.1); z-index: 8; }
#cnt-recherche.ouvert { display: block; }
body.scrolled #cnt-recherche.ouvert { position: fixed; top: 40px !important; z-index: 11; }
body.home.noscroll #cnt-recherche.ouvert { position: fixed; top: auto !important; bottom: 40px; z-index: 11; box-shadow: 2px -2px 2px rgba(0,0,0,0.1); }
#frm-recherche { position: relative; width: 150px; text-align: left; background: #fff; padding: 2px 0; }
#frm-recherche > em { font-size: 9px; display: inline-block; margin: 0 4px; }
#frm-recherche > input { border: none; background: #e7e7e7; }
#frm-recherche > input.date { width: 80px; float: right; }
#frm-recherche > input:focus { border: none; outline: none; }
#frm-recherche > #crech { width: 100%; padding: 4px 6px 2px 6px; line-height: 17px; }
#frm-recherche > #vrech { color: #fff; display: block; height: 28px; width: 100%;
background: url(/img/front/picto-loupe-small.png) no-repeat 5px 2px; box-shadow: 0 0 8px rgba(255,255,255,0.3) inset; }
/* Menu popup */
.cnt-popmen { position: absolute; display: none; padding: 8px 0; border-radius: 0 0 8px 8px; opacity: 0; background: #fff; color: #333;
box-shadow: 0 0 6px rgba(0,0,0,0.5); font-size: 14px; overflow: hidden; max-width: 360px; z-index: 8; }
.cnt-popmen > a { display: block; padding: 4px 12px; transition: all 0.3s ease-in-out; color: #333 !important; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; height: 16px; overflow: hidden; }
.cnt-popmen > a:hover { background: #333; color: #fff !important; overflow: hidden; }
.cnt-popmen > a.actif { font-weight: 700; }
.cnt-popmen > a > img { transition: all 0.3s ease-in-out; display: inline-block; margin: 0 4px 0 0; }
.cnt-popmen > a:hover > img { -webkit-filter: contrast(0) brightness(100); -ms-filter: contrast(0) brightness(100); filter: contrast(0) brightness(100); }
.cnt-popmen > .espace { height: 0; border-bottom: 1px dotted #aaa; margin: 6px 0; }
.cnt-popmen > em { display: block; padding: 4px 12px; color: #333; line-height: 16px; font-size: 12px; }
.cnt-popmen .sephor { display: block; font-size: 0; height: 0; margin: 4px 0; border-bottom: 1px dotted #aaa; }
/* Contenus de la page */
#contenu { z-index: 2; padding: 16px 0 0 0; }
/* Page d'accueil */
.fade { opacity: 0; -webkit-transform: translateX(-400px); -ms-transform: translateX(-400px); transform: translateX(-400px); transition: all 0.3 ease-in-out; perspective: 1200px; }
.fade > * { opacity: 0; transition: none; }
.fade span, .fade a { display: inline-block; -webkit-transform: translateX(400px); -ms-transform: translateX(400px); transform: translateX(400px); }
#bg-accueil { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }
#bg-accueil > video { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#bg-recherche { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: url(/img/front/search-results.jpg) no-repeat center; background-size: cover; opacity: 0.3; }
#txt-accueil { position: relative; padding: 20px 32px 0 32px; font-size: 24px; line-height: 32px; text-align: center; z-index: 2; }
#txt-accueil > h2 { text-align: center; color: #000; font-size: 42px; line-height: 50px; font-weight: 700; text-shadow: 1px 1px 1px #eee, -1px -1px 1px #eee, -1px 1px 1px #eee, 1px -1px 1px #eee; }
#txt-accueil > span { color: #fff; text-shadow: 0 0 2px #000, -1px -1px 2px #000, 1px 1px 2px #000; }
#txt-accueil > * { font-weight: 700; }
.lst-comptes { margin: 48px 32px 0 32px; z-index: 2; text-align: center; }
.lst-comptes > h2 { text-align: left; color: #000; font-size: 32px; line-height: 40px; font-weight: 700; margin: 5px 0 12px 0;
text-shadow: 1px 1px 1px #eee, -1px -1px 1px #eee, -1px 1px 1px #eee, 1px -1px 1px #eee; }
.lst-comptes > .compte { display: inline-block; width: 236px; height: 256px; background: rgba(255,255,255,0.75); padding: 30px 8px 6px 8px; margin: 0 6px 6px 0; box-sizing: border-box;
overflow: hidden; text-align: center; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.lst-comptes > .compte.nohead { padding: 6px 8px; height: 232px; }
.lst-comptes > .compte .datcpt { position: absolute; left: 0; right: 0; top: 0; height: 18px; font-size: 12px; line-height: 18px; padding: 3px 6px; color: #fff; font-weight: 700; background: #800; }
.lst-comptes > .compte .avatar { display: inline-block; width: 96px; height: 96px; border-radius: 50%; margin: 8px 0;
background-position: center; background-size: contain; background-repeat: no-repeat; }
.lst-comptes > .compte .centrer { position: relative; height: 100px; }
.lst-comptes > .compte .textes { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-height: 100px; color: #333; }
.lst-comptes > .compte .textes strong { display: block; font-size: 18px; line-height: 20px; margin-bottom: 4px; }
.lst-comptes > .compte .textes div { font-size: 13px; }
.lst-comptes > .event { display: inline-block; width: 236px; margin: 0 6px 6px 0; background: rgba(255,255,255,0.75); padding: 30px 8px 6px 8px; box-shadow: 0 0 4px rgba(0,0,0,0.3);
box-sizing: border-box; vertical-align: top; text-align: center; }
.lst-comptes > .event .datevt { position: absolute; top: 0; left: 0; right: 0; height: 18px; padding: 3px 6px; background: #800; color: #fff; font-weight: 700; font-size: 12px; line-height: 18px; }
.lst-comptes > .event .titevt { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; line-height: 16px; font-weight: 600; text-transform: uppercase; color: #333;
margin: 0 0 8px 0; height: 32px; overflow: hidden; }
.lst-comptes > .event img { display: inline-block; max-width: 200px; max-height: 200px; margin: 0 0 8px 0; }
.lst-comptes > .event .autevt { display: block; font-size: 11px; font-weight: 700; color: #333; }
/* Pied de page */
#pied { position: relative; padding: 0 20px; height: 40px; line-height: 40px; text-align: center; color: #fff; z-index: 3; margin: 20px 0 0 0;
text-shadow: 0 0 2px #000, -1px -1px 2px #000, 1px 1px 2px #000; background: #303b46; box-shadow: 0 0 12px rgba(0,0,0,0.7); }
#pied.bstick { position: fixed; bottom: 0; left: 0; right: 0; }
#pied > a { color: #fff; font-weight: 700; text-decoration: none; margin-left: 20px; }
#pied > a:hover { text-decoration: underline; }
#pied > a.nolmarg { margin-left: 0; }
/* Membres */
.membre { font-weight: 700; color: #444; display: inline-block; }
/* Boite de dialogue */
#bg-alert { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6) url(/img/front/bg-fader.png) no-repeat center; background-size: cover; z-index: 1601;
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#bg-alert #cnt-alert { position: absolute; left: 50%; top: 50%; padding: 12px 16px; font-size: 14px;
-webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
background: #fff; color: #333; border: 1px solid #aaa; border-radius: 8px; max-width: 90%; width: 320px; box-shadow: 0 0 4px rgba(0,0,0,0.3); box-sizing: border-box; }
#bg-alert #btn-alert { background: #f4f4f4; color: #666; padding: 8px 16px; margin-top: 24px; border-radius: 16px; width: 80px; display: inline-block;
box-shadow: 0 0 3px rgba(0,0,0,0.5); }
#fadmsg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6) url(/img/front/bg-fader.png) no-repeat center; background-size: cover; z-index: 1001;
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#fadmsg .cnt-fenetre { position: absolute; left: 50%; top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
background: #fff; color: #333; border: 1px solid #aaa; border-radius: 8px; max-width: 90%; width: 320px; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
#fadmsg .cnt-form.cnt-fenetre { padding: 0; margin: 0; }
#fadmsg .cnt-fenetre #fermsg { background: #e7e7e7; color: #666; padding: 8px 16px; margin-top: 24px; border-radius: 16px; /* display: inline-block; */ display: none; }
#fadmsg .cnt-fenetre #fermer { position: absolute; top: 10px; right: 12px; color: #666; height: 16px; width: 16px; opacity: 0.5; transition: all .3s ease-in-out; }
#fadmsg .cnt-fenetre #fermer:hover { opacity: 1; }
#fadmsg .cnt-fenetre > h2 { margin: 0 0 8px 0; }
#fadmsg .cnt-fenetre > div { margin: 0 0 12px 0; padding-right: 16px; margin-right: -16px; width: 320px; max-height: calc(100vh - 118px); /* max-height: 80vh; */ overflow: auto; }
/* ------------------------------------------------------------------------------------------------------
ESPACE MEMBRE
------------------------------------------------------------------------------------------------------ */
/* Menu général paramétrage user / compte */
#cnt-pmenug h2 { margin-bottom: 4px; }
#cnt-pmenug .btn-pmenug { display: block; vertical-align: middle; margin-bottom: 4px; color: #333; padding: 4px 40px 6px 16px; border-bottom: 1px dotted #999;
background: url(/img/front/btn-pmenu.png) no-repeat right 8px top 1px; }
#cnt-pmenug .btn-pmenug.actif { background: url(/img/front/bull-li.png) no-repeat right top 6px; }
#cnt-pmenug .btn-pmenug > img { display: inline-block; margin: 1px 4px 0 0; }
#btn-amenug { display: inline-block; margin: 0 6px 0 0; background: url(/img/front/btn-back.png) no-repeat center; height: 24px; width: 24px; vertical-align: top; }
/* Boutons accès pages artistes */
#cnt-comptes { display: block; padding-bottom: 16px; }
.no-compte { display: block; text-align: center; font-size: 12px; font-style: italic; line-height: 18px; }
.lnk-compte { position: relative; display: block; vertical-align: middle; padding: 8px 0 8px 48px; border-radius: 4px; background: #e7e7e7; margin: 4px 0 0 0; }
.lnk-compte > .avatar { position: absolute; left: 8px; top: 9px; width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; background-size: contain; border-radius: 50%; }
.lnk-compte > .textes { color: #333; font-size: 12px; font-weight: 400; line-height: 15px; }
.lnk-compte > .textes > strong { display: block; font-size: 18px; font-weight: 700; line-height: 20px; height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.lnk-compte > .textes > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 15px; }
.lnk-compte:hover { background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.1) inset; }
.lnk-compte:hover > .textes { color: #00afcc; }
#pop-selcpt { position: absolute; background: #fff; color: #333; box-shadow: 0 0 4px rgba(0,0,0,0.5); z-index: 101; }
#pop-selcpt .lnk-compte { border-radius: 0; margin: 0; }
#pop-selcpt .lnk-compte > .textes { padding-right: 12px; max-width: 240px; }
#pop-selcpt .lnk-compte.select, #pop-selcpt .lnk-compte:hover { background: #00afcc; box-shadow: none; }
#pop-selcpt .lnk-compte.select > .textes, #pop-selcpt .lnk-compte:hover > .textes { color: #fff; }
/* Forms espace membre */
.cnt-form { width: 420px; max-width: 100%; margin: 24px auto 0 auto; background: #fff; color: #333; box-shadow: 0 0 8px rgba(0,0,0,0.3);
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.cnt-form.inactif { display: none; }
.cnt-form > h2 { font-size: 20px; line-height: 24px; letter-spacing: 1px; margin: 0 0 16px 0; text-align: center; padding: 5px 16px 7px 16px; background: #303b46; color: #fff; font-weight: 600; }
.cnt-form > h2.nombot { margin-bottom: 0; }
.cnt-form > form { margin: 0; padding: 8px 16px 12px 16px; width: 100%; overflow: auto; box-sizing: border-box; }
.cnt-form > form.noptop { padding-top: 0; }
.cnt-form > form > h3 { font-size: 20px; line-height: 24px; margin: 5px 0; letter-spacing: 1px; text-align: center; color: #666; }
.cnt-form > form > input { border: none; width: 100%; background: #f4f4f4; box-sizing: border-box; margin-bottom: 4px; }
.cnt-form > form > input[type=password] { }
.cnt-form > form > input[type=submit] { background: #333; color: #fff; font-weight: 700; padding: 6px 8px 4px 8px; margin: 4px 0 12px 0; }
.cnt-form > form > input[type=checkbox] { display: inline-block; width: auto; vertical-align: top; margin-top: 1px; }
.cnt-form > form > select { border: none; width: 100%; background: #f4f4f4; box-sizing: border-box; margin-bottom: 4px; }
.cnt-form > form > textarea { border: none; width: 100%; height: 80px; background: #f4f4f4; box-sizing: border-box; margin-bottom: 4px; }
.cnt-form > form > .cnt-check { margin: 4px 0; line-height: 19px; }
.cnt-form > form span.etichk { display: inline-block; font-size: 12px; width: auto; max-width: 290px; max-width: calc(100% - 25px); vertical-align: top; }
.cnt-form > form > a { display: block; cursor: pointer; margin: 0 0 4px 0; padding: 0 0 0 20px; background: url(/img/front/bull-li.png) no-repeat;
background-position: 4px center; transition: all 0.3s ease-in-out; }
.cnt-form > form > a:hover { background-position: 8px center; }
.cnt-form > form > a.cancel { background: #333; color: #fff; padding: 5px 8px; text-align: center; font-size: 14px; font-weight: 700; margin: -8px 0 12px 0; }
.cnt-form > form .label { font-size: 13px; line-height: 16px; margin: 6px 0 3px 0; }
.cnt-form #cnt-images { height: 280px; margin: 0 0 12px 0; }
.cnt-form #cnt-images #img-avatar { position: absolute; left: 50%; top: 8px; height: 64px; width: 64px; margin-left: -32px; border-radius: 50%;
background-position: center; background-repeat: no-repeat; background-size: contain; }
.cnt-form #cnt-images #img-entete { position: absolute; left: 0; right: 0; top: 0; height: 80px; background-position: center; background-repeat: repeat; background-size: cover; }
.cnt-form #cnt-images #img-bgpage { position: absolute; left: 0; right: 0; top: 80px; height: 200px; background-position: center; background-repeat: repeat; background-size: cover; }
.cnt-form #cnt-images #opa-bgpage { position: absolute; left: 0; right: 0; top: 80px; height: 200px; background: #fff; opacity: 0; }
.cnt-form #cnt-images #lnk-images { position: absolute; left: 50%; transform: translateX(-50%); width: 160px; top: 112px; height: auto; padding: 8px 16px; background: rgba(255,255,255,0.7); }
.cnt-form #cnt-images #lnk-images > a { display: block; cursor: pointer; margin: 0 0 4px 0; padding: 0 0 0 20px; background: url(/img/front/bull-li.png) no-repeat;
background-position: 4px center; transition: all 0.3s ease-in-out; }
.cnt-form #cnt-images #lnk-images > a:hover { background-position: 8px center; }
.cnt-form #cnt-image { height: 200px; margin: 0 0 12px 0; background-position: center; background-repeat: repeat; background-size: cover; }
.cnt-form #cnt-image #lnk-image { position: absolute; left: 50%; transform: translateX(-50%); width: 160px; top: 66px; height: auto; padding: 8px 16px; background: rgba(255,255,255,0.7); }
.cnt-form #cnt-image #lnk-image > a { display: block; cursor: pointer; margin: 0 0 4px 0; padding: 0 0 0 20px; background: url(/img/front/bull-li.png) no-repeat;
background-position: 4px center; transition: all 0.3s ease-in-out; }
.cnt-form #cnt-image #lnk-image > a:hover { background-position: 8px center; }
.cnt-form .cf-turnstile { display: block; text-align: center; }
.cnt-form .cf-turnstile > div { display: inline-block; }
#cnt-centre { position: fixed; display: inline-block; width: auto; height: auto; left: 50%; top: 50%; max-width: 90%;
-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#cnt-centre > .cnt-form { margin: 0; padding: 0; }
/* Choix couleur */
input.couleur { width: 0px !important; opacity: 0.1; border: none; padding: 0; margin: 0; }
div.chx_couleur { display: inline-block !important; border: 1px solid #333; height: 19px; width: 38px; cursor: pointer; vertical-align: top; }
/* Tableaux de lignes */
.tab-enregs { font-size: 11px; line-height: 16px; border-collapse: collapse; width: 100%; background: #fff; }
.tab-enregs tbody { border: 1px solid #888; }
.tab-enregs tr { background: #fff; }
.tab-enregs tr:nth-child(2n + 1) { background: #eee; }
.tab-enregs tr.total { background: #333; color: #fff; line-height: 21px; }
.tab-enregs tr.total .espace { height: 3px; }
.tab-enregs th { padding: 2px 3px; border: 1px solid #888; vertical-align: center; font-size: 9px; box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; pointer-events: none; }
.tab-enregs td { padding: 3px 4px; border: 1px dotted #aaa; vertical-align: top; }
.tab-enregs td.noresult { font-size: 11px; font-style: italic; background-color: #fff !important; border: none !important; padding: 6px 6px 10px 6px !important; }
.tab-enregs td.montant, .tab-enregs td.entier { text-align: right; }
.tab-enregs td.date, .tab-enregs td.outils { text-align: center; }
.tab-enregs td.small { font-size: 11px; }
.tab-enregs td.nopadd { padding: 0; }
.tab-enregs td.nopadd input, .tab-enregs td.nopadd select { margin: 0; padding-bottom: 4px; border: none; box-shadow: none; background-color: transparent; }
.tab-enregs td.nopadd textarea { height: 22px; width: 100%; margin: 0; padding: 2px 6px; line-height: 18px; border: none; box-shadow: none; background-color: transparent; }
.tab-enregs td.nopadd input[type=checkbox] { padding: 0; margin: 4px 0 0 0; }
.tab-enregs td > * { vertical-align: middle; }
.tab-enregs td .lien { cursor: pointer; }
.tab-enregs td.ligform { font-size: 11px; background-color: #fff !important; border: none !important; padding: 4px 0 0 0 !important; }
.tab-enregs td.ligform input[type=submit] { float: right; vertical-align: top; }
.tab-enregs.nopadd tr { background: #fff; }
.tab-enregs.nopadd td { padding: 0 2px; border: none; }
.tab-enregs.nopadd input[type=button] { width: 100%; padding: 3px 0; }
/* stats du membre */
#cnt-stats { display: inline-block; text-align: center; background: #fff; color: #333; padding: 24px 32px; box-shadow: 0 0 3px rgba(0,0,0,0.3); }
#cnt-stats .elt-stat { display: inline-block; margin: 0 8px; font-size: 24px; font-weight: 700; text-align: center; vertical-align: top; width: 140px; line-height: 24px; }
#cnt-stats .elt-stat > em { display: block; margin: 0 0 6px 0; font-size: 12px; font-weight: 300; line-height: 12px; }
#cnt-stats .elt-stat > img { vertical-align: middle; }
#cnt-stats .elt-stat > * { vertical-align: middle; }
/* Boutons de navigation */
.cnt-navig { padding: 24px 0; text-align: center; }
.cnt-navig .lnk-page { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; color: #666; border: 1px solid #666; margin: 0 4px; vertical-align: middle; }
.cnt-navig .lnk-page.actif { font-weight: 400; background: #ccc; }
/* Erreurs */
#bigErreur { color: #f7f7f7; font-size: 300px; font-weight: bold; text-align: center; text-shadow: 0px 0px 32px rgba(0,0,0,0.17); }
#cnt-avertie { display: none; }
/* =======================================================
Media queries
======================================================= */
#irmax { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: block; z-index: 1000; height: 16px; font-size: 12px; }
#ir1400 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
#ir1200 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
#ir900 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
#ir600 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
#ir400 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
#ir320 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #333; color: #fff; font-weight: 700; display: none; z-index: 1000; height: 16px; font-size: 12px; }
/* ------------------------------------------------ */
/* Format PC/tablettes < 1400px */
@media handheld, only screen and (max-width: 1400px), only screen and (max-device-width: 1400px) {
#irmax { display: none; }
#ir1400 { display: block; }
h1 { font-size: 38px; line-height: 38px; letter-spacing: 2px; }
.content { width: auto; margin: 0 32px; }
#entete.pmusic #txt-entete > .content { margin: 0; }
}
/* ------------------------------------------------ */
/* Format PC/tablettes < 1200px */
@media handheld, only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) {
#ir1400 { display: none; }
#ir1200 { display: block; }
body { font-size: 15px; }
h1 { font-size: 34px; line-height: 34px; letter-spacing: 1px; }
h2 { font-size: 28px; line-height: 28px; }
h2 > .trait { width: 150px; }
h3 { font-size: 24px; line-height: 24px; }
h3 > .trait { width: 150px; }
h4 { margin: 10px 0 6px 0; letter-spacing: 1px; }
select { font-size: 12px; }
#entete #txt-entete h1 { font-size: 30px; }
#cnt-menu { padding-right: 0; }
#cnt-menu a:nth-of-type(n+2) > img { margin: -1px 2px 0 0; }
#menu > a { font-size: 14px; padding: 0 8px 0 6px; }
#menu > a > img { height: 18px; width: 18px; }
#menu #btn-recherche { margin: 0 0 0 12px; }
.cnt-popmen { font-size: 13px; }
#txt-accueil { font-size: 20px; line-height: 26px; }
#txt-accueil > h2 { font-size: 36px; line-height: 42px; }
.lst-comptes > h2 { font-size: 28px; line-height: 34px; }
#cnt-pmenug .btn-pmenug > img { margin: 0 4px 0 0; }
}
/* ------------------------------------------------ */
/* Format < 900px */
@media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
#ir1200 { display: none; }
#ir900 { display: block; }
body { font-size: 14px; }
h1 { font-size: 28px; line-height: 28px; letter-spacing: 1px; }
h2 { font-size: 24px; line-height: 24px; }
h2 > .trait { width: 80px; }
h3 { font-size: 22px; line-height: 22px; }
h3 > .trait { width: 80px; }
h4 { font-size: 11px; line-height: 16px; margin: 8px 0 4px 0; padding: 3px 6px; letter-spacing: 1px; }
.petit { font-size: 11px; }
.content { margin: 0 16px; }
.cnt-form { margin: 16px auto 0 auto; }
#entete #img-entete { left: 8px; }
#entete #txt-entete { font-size: 15px; }
#entete #txt-entete h1 { font-size: 30px; line-height: 30px; letter-spacing: 0px; }
#entete #txt-entete { font-size: 15px; }
#cnt-menu { padding: 0 8px 0 0; }
#cnt-menu .content { margin: 0; }
#cnt-menu a { font-size: 0; width: 40px; padding: 0 8px 0 8px; }
#cnt-menu a:nth-of-type(n+2) > img { margin: 0 2px 0 0; }
#cnt-menu #btn-logo { width: auto; }
#menu { padding: 0 8px; }
#menu .content { margin: 0; }
#menu > a { font-size: 0; padding: 0 6px; }
#menu > a > img { margin: -2px 0 0 0; }
.contenu.accueil > .padding { padding: 12px 0 12px 0; }
#txt-accueil { font-size: 18px; line-height: 24px; }
#txt-accueil > h2 { font-size: 32px; line-height: 38px; }
.lst-comptes > h2 { font-size: 26px; line-height: 32px; }
.lnk-compte > .cnttxt { font-size: 14px; line-height: 18px; }
.lnk-compte > .cnttxt strong { font-size: 28px; line-height: 32px; margin: 3px 0; }
.lnk-compte > .cnttxt > .masque { height: 20px; }
#fadmsg .cnt-fenetre > div > form > input[type="checkbox"] { margin: 0; }
#fadmsg .cnt-fenetre > div > form > span.etichk { vertical-align: top; }
#cnt-pmenug .btn-pmenug { background-position: right 8px top; }
#cnt-statgen > .cnt_progress { font-size: 13px; width: 48%; margin: 24px 0; }
}
/* ------------------------------------------------ */
/* Format mobiles < 660px */
@media handheld, only screen and (max-width: 660px), only screen and (max-device-width: 660px) {
#ir900 { display: none; }
#ir600 { display: block; }
h1 { font-size: 24px; line-height: 24px; letter-spacing: 1px; }
h2 { font-size: 20px; line-height: 20px; }
h2 > .trait { display: none; }
h3 { font-size: 18px; line-height: 18px; letter-spacing: 1px; }
h3 > .trait { display: none; }
h4 { letter-spacing: 0px; }
input { font-size: 13px; }
.petit { font-size: 10px; }
.contenu > .padding { padding: 0 8px; }
.content { margin: 0 12px; }
.cnt-form { margin: 12px auto 0 auto; }
.cnt-form > h2 { font-size: 16px; line-height: 22px; letter-spacing: 0; }
#entete #txt-entete { font-size: 14px; }
#entete #txt-entete h1 { font-size: 24px; line-height: 28px; height: 28px; }
#entete #txt-entete > .content { padding: 8px 0 0 0; }
#entete.pmusic #txt-entete > .content { padding: 8px 0 0 76px; max-width: calc(100% - 48px); }
#entete #txt-entete #img-logo { height: 64px; top: 8px; }
#cnt-menu a { }
#cnt-menu .content { margin: 0; }
#menu > .content > a { padding: 6px 8px; }
#menu > .content > a.actif { padding: 6px 8px; font-size: 0; }
#menu > .content > a > img { width: 20px; height: 20px; margin: 0; }
#menu > .content > a.actif > img { margin: 0; }
#txt-accueil { font-size: 15px; line-height: 20px; padding: 16px 16px 0 16px; }
#txt-accueil > h2 { font-size: 28px; line-height: 34px; }
.lst-comptes { margin: 32px 16px 0 16px; }
.lst-comptes > h2 { font-size: 24px; line-height: 30px; }
#cnt-comptes { padding: 0 12px 12px 12px; }
#cnt-stats { padding: 16px 12px; }
#cnt-stats .elt-stat { font-size: 20px; width: 120px; }
#cnt-stats .elt-stat > em { font-size: 10px; }
}
/* ------------------------------------------------ */
/* Format mobiles < 480px */
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
#ir600 { display: none; }
#ir400 { display: block; }
body { font-size: 13px; }
ul, ol { padding-left: 20px; }
h1 { font-size: 20px; line-height: 20px; letter-spacing: 1px; }
h2 { font-size: 18px; line-height: 18px; }
h3 { font-size: 16px; line-height: 16px; letter-spacing: 1px; }
h4 { font-size: 10px; line-height: 15px; margin: 6px 0 4px 0; }
input { font-size: 12px; }
.petit { font-size: 9px; }
.contenu > .padding { padding: 0 0px; }
.content { margin: 0 8px; }
#entete #txt-entete { font-size: 13px; }
#entete #txt-entete h1 { font-size: 20px; line-height: 24px; height: 24px; }
#entete #txt-entete > .content { padding: 12px 0 0 0; max-width: calc(100% - 24px); }
#entete.pmusic #txt-entete > .content { padding: 12px 0 0 54px; max-width: calc(100% - 24px); }
#entete #txt-entete #img-logo { height: 48px; top: 16px; }
#entete #txt-entete .content > div { height: 16px; }
#cnt-menu #btn-logo { width: 42px; padding: 0 4px; overflow: hidden; }
#cnt-menu #cnt-rech > input { width: 126px; }
#txt-accueil { padding: 16px 0px 0 0; font-size: 14px; line-height: 18px; }
#txt-accueil > h2 { font-size: 24px; line-height: 30px; }
.lst-comptes { margin: 24px 0 0 0; }
.lst-comptes > h2 { font-size: 18px; line-height: 24px; }
.lst-comptes > span { width: 48.3%; height: 46vw; margin: 1px 0.66%; }
#fadmsg .cnt-fenetre { padding: 12px 16px; border-radius: 16px; width: 96%; box-sizing: border-box; }
#fadmsg .cnt-fenetre > div > form { width: 100%; padding-right: 12px; margin-right: -12px; }
#fadmsg .cnt-fenetre > div > form > span.etichk { width: calc(100% - 24px); max-width: calc(100% - 24px); }
#fadmsg .cnt-fenetre > div > form > input[type="checkbox"] { margin: 0; }
#fadmsg .cnt-fenetre #fermer { top: 8px; right: 9px; }
.cnt-form > form > input#ofond { max-width: 100px; }
#cnt-stats { width: auto; display: block; margin: 0 0 12px 0; }
#cnt-stats .elt-stat { display: block; margin: 16px auto; }
#pied { padding: 0 8px; }
#pied > a { margin-left: 8px; }
}
/* ------------------------------------------------ */
/* Format mobiles < 320px */
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
#ir400 { display: none; }
#ir320 { display: block; }
}