body { padding:0; margin:0; background:rgba(13,150,149,3%); font-family:Helvetica, Arial, sans-serif; }

header { background:url('images/background-header.jpg'); background-position:center; background-size:cover; overflow:hidden; width:100%; padding-bottom:90px; }
header .logos { display:flex; align-items:center; justify-content:center; padding:30px 0; }
header .logos .emploi img { width:250px; transition:200ms; }
header .logos .croix { width:28px; padding:16px 20px 0; opacity:0.5; }
header .logos .partenaire img { width:190px; padding-top:18px; transition:200ms; }
header .accroche { color:#FFF; margin:0; padding:15px 30px; box-sizing:border-box; text-align:center; font-size:17px; line-height:21px; font-weight:lighter; background:rgba(0,0,0,25%); }
header .accroche b { display:block; color:#0d9695; text-transform:uppercase; font-size:19px; font-weight:normal; }

.player_programme { max-width:1000px; box-sizing:border-box; background:#FFF; border-radius:10px; box-shadow:0 0 3px rgb(0, 0, 0, 20%); margin:-60px auto 0; /*padding-bottom:25px;*/ }

.player_programme .player_direct { padding-bottom:5px; }
.player_programme .player_direct .player_container { padding:0 7%; background:#000; height:400px; border-top:5px solid #0d9695; border-bottom:5px solid #0d9695; transition:200ms; }
.player_programme .player_direct .player_container #player_direct { width:100%; height:100%; }
.player_programme .player_direct h2 { margin:0; padding:15px 20px; font-weight:100; font-size:22px; line-height:28px; color:#0d9695; transition:200ms; }
.player_programme .player_direct h2 span { display:block; font-size:14px; font-weight:bold; text-transform:uppercase; transition:200ms; }
.player_programme .player_direct h2 span::before { content:''; display:inline-block; vertical-align:middle; width:26px; height:26px; background:url('images/youtube.png'); background-size:26px; margin-top:-4px; margin-right:8px; transition:200ms; }

.player_programme .programme .jours { display:flex; justify-content:space-between; padding:15px 15px 4px; border-top-left-radius:10px; border-top-right-radius:10px; transition:100ms; }
.player_programme .programme .jours .jour { display:flex; position:relative; width:49.5%; align-items:center; box-sizing:border-box; padding:16px 15px 10px; text-align:center; box-sizing:border-box; border-radius:5px; background:#E8E8E8; cursor:pointer; transition:100ms; }
.player_programme .programme .jours .jour::after { content:''; position:absolute; width:0; height:0; border-right:6px solid transparent; border-left:6px solid transparent; border-top:8px solid #FFF; top:-1px; left:30px; opacity:0; border-radius:3px; transition:100ms; }
.player_programme .programme .jours .jour .chiffre { font-size:23px; line-height:21px; font-weight:lighter; color:#888; transition:100ms; }
.player_programme .programme .jours .jour .mois,
.player_programme .programme .jours .jour .annee { color:#989898; font-size:15.5px; line-height:19px; font-weight:lighter; padding-left:6px; overflow:hidden; text-overflow:ellipsis; transition:100ms; }
.player_programme .programme .jours .selected,
.player_programme .programme .jours .jour:hover { background:#0d9695; }
.player_programme .programme .jours .selected::before,
.player_programme .programme .jours .jour:hover::before { left:25%; width:50%; opacity:1; }
.player_programme .programme .jours .selected::after,
.player_programme .programme .jours .jour:hover::after { left:20px; opacity:1; }
.player_programme .programme .jours .selected .chiffre,
.player_programme .programme .jours .jour:hover .chiffre,
.player_programme .programme .jours .selected .mois,
.player_programme .programme .jours .jour:hover .mois,
.player_programme .programme .jours .selected .annee,
.player_programme .programme .jours .jour:hover .annee { color:#FFF; }

.player_programme .programme .liste { display:none; padding:0 25px 10px; box-sizing:border-box; opacity:0; overflow:hidden; transition:100ms; }
.player_programme .programme .liste_affichee { display:block; opacity:1; }
.player_programme .programme .liste .aucune_video { color:#686868; font-size:15.5px; padding:30px 20px 20px; text-align:center; }

.player_programme .programme .evenement { border-bottom:1px dotted #C0C0C0; }
.player_programme .programme .evenement:last-child { border-bottom:0; }
.player_programme .programme .evenement .titre { position:relative; font-size:15.5px; color:#0d9695; padding:15px 40px 15px 0px; cursor:pointer; transition:100ms; }
.player_programme .programme .evenement_replay .titre::before { content:''; display:inline-block; vertical-align:bottom; width:20px; height:20px; background:url('images/youtube.png'); background-size:20px; margin:-1px 6px -2px 0; }
.player_programme .programme .evenement_avenir .titre::before { content:''; display:inline-block; vertical-align:middle; width:16px; height:16px; background:url('images/horloge.svg'); background-size:16px; margin-right:5px; }
.player_programme .programme .evenement .titre::after { opacity:0; content:''; position:absolute; width:10px; height:10px; padding:5px; border-radius:20px; background-image:url('images/plus.svg'); background-color:#0d9695; background-size:10px; background-position:center; background-repeat:no-repeat; right:0px; top:calc(50% - 10px); transition:100ms; }
.player_programme .programme .evenement .titre:hover::after { opacity:1; right:10px; }
.player_programme .programme .evenement_affiche .titre { font-weight:bold; }
.player_programme .programme .evenement_affiche .titre:hover::after { opacity:0; right:0px; }
.player_programme .programme .evenement .titre .infos { font-size:11.5px; font-weight:normal; color:rgba(0,74,104,60%); }
.player_programme .programme .evenement .titre .infos b { font-size:12px; font-weight:normal; text-transform:uppercase; }
.player_programme .programme .evenement .titre .texte { display:block; padding-top:6px; }
.player_programme .programme .evenement .detail { display:flex; position:relative; border-left:2px solid #F0F0F0; margin:-5px 0px 20px 1px; padding-left:15px; font-size:15px; line-height:19px; color:#686868; }
.player_programme .programme .evenement .detail .player { width:100%; height:250px; background:#000; align-self:flex-start; border-bottom:4px solid #0d9695; }
.player_programme .programme .evenement .detail .player iframe { width:100%; height:100%; }

.partage { position:fixed; display:flex; justify-content:flex-end; bottom:20px; right:20px; z-index:10; background:#FFF; border-radius:100px; cursor:pointer; box-shadow:0 0 3px rgb(0, 0, 0, 20%); width:46px; height:46px; padding:3px; overflow:hidden; transition:200ms; }
.partage a,
.partage span { display:inline-block; flex-shrink:0; flex-grow:0; width:36px; height:36px; margin:2px; background-size:100%; background-position:center; background-color:#FFF; border:3px solid #FFF; border-radius:50px; white-space:nowrap; font-size:1px; color:transparent; text-indent:51px; overflow:hidden; }
.partage span.general { order:4; background-image:url('images/partage.png'); background-color:#0d9695; }
.partage a.linkedin { order:1; background-image:url('images/partage-linkedin.png'); }
.partage a.twitter { order:2; background-image:url('images/partage-twitter.png'); }
.partage a.facebook { order:3; background-image:url('images/partage-facebook.png'); }
.partage:hover { width:184px; }
.partage a:hover { margin:0; width:40px; height:40px; }

footer { text-align:center; margin:0 auto; max-width:1000px; box-sizing:border-box; padding:40px 30px 90px; font-size:12px; line-height:15px; color:#A8A8A8; }
footer a { color:#A8A8A8; text-decoration:none; }
footer a:hover { text-decoration:underline; }

@media screen and (max-width:1020px) {
	.player_programme { margin-left:10px; margin-right:10px; }
}

@media screen and (max-width:920px) {
	.player_programme .player_direct .player_container { padding:0; }
}

@media screen and (max-width:730px) {
	
	.player_programme .programme .jours .jour { width:49%; padding:14px 10px 8px; flex-wrap:wrap; }
	.player_programme .programme .jours .selected::after,
	.player_programme .programme .jours .jour:hover::after { left:16px; }
	
	.player_programme .player_direct .player_container { height:300px; }
}

@media screen and (max-width:700px) {
	.player_programme .player_direct { padding-bottom:15px; }
	.player_programme .programme .evenement .detail { flex-direction:column; }
	.player_programme .programme .evenement .detail .player { margin-bottom:15px; height:200px; }
}

@media screen and (max-width:600px) {
	header .logos .emploi img { width:180px; }
	header .logos .croix { width:22px; }
	header .logos .partenaire img { width:120px; }
}

@media screen and (max-width:500px) {
	.player_programme .player_direct .player_container { height:240px; }
	.player_programme .player_direct h2 { font-size:20px; line-height:25px; }
	.player_programme .player_direct h2 span { font-size:13px; }
	.player_programme .player_direct h2 span::before { width:20px; height:20px; background-size:20px; margin-top:-2px; }
}

@media screen and (max-width:450px) {
	
	header .logos { flex-direction:column; padding:20px 0; }
	header .logos .croix { padding-top:0; }
	header .logos .partenaire img { padding-top:10px; }
	
	.player_programme .programme .jours { padding:12px 12px 0px; }
	.player_programme .programme .jours .jour { width:48%; padding:12px 8px 6px; }
	.player_programme .programme .jours .jour .annee { display:none; }
	
	.player_programme .programme .liste { padding-left:15px; padding-right:15px; }
	.player_programme .programme .evenement .titre { font-size:14.5px; }
	.player_programme .programme .evenement .detail { padding-left:10px; font-size:14px; }
}

@media screen and (max-width:390px) {
	.player_programme .player_direct .player_container { height:180px; }
	.player_programme .programme .evenement .detail .player { height:160px; }
}