@font-face {
	font-family: "Sora-Variable";
	src: url("/fonts/sora-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

#livesList *, #live * {
	font-family: "Sora-Variable", Roboto, Verdana, "Noto Sans", sans-serif
}
body {
	font-size:15px;
	margin:0
}

header {
	background: #1A1A26;
	position: sticky;
	top: 0;
	z-index: 99;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, .25);
}

#container, header .content {
	margin:auto;
	max-width:1280px;
	width:auto;
	min-height:100%;
}
header .content {
	padding: 8px 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .content .title {
	font-size: 1.8rem;
	font-weight: normal;
	color: #FFF;
	text-transform: none;
	flex-grow:1;
	text-align: center;
}



#live #container {
	margin: 1em auto;
	padding: 1em;
	background:#FFF;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}



#container .card {
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-width: 1px;
	border-radius: 5px;
	position: relative;
}

#container .card h1 {
	position: relative;
	font-weight: 300;
	line-height: 100%;
	font-size: 1.3rem;
	letter-spacing: 0px;
	text-align: center;
	color: #021438;
	padding-bottom: 15px;
	margin: 20px 0;
}


#container .card h1::before {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translate(-50%);
    background: linear-gradient(to right, #021438 0%, #021438 calc(50% - 35px), transparent calc(50% - 35px), transparent calc(50% + 35px), #021438 calc(50% + 35px), #021438 100%);
    width: 90%;
    max-width: 240px;
    height: 1px;
    content: "";	
}
#container .card h1::after {
	position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: -18px 0 0 #021438, 18px 0 0 #021438;
    background: #021438;
    width: 4px;
    height: 4px;
    content: "";
}

#container .card .dates {
	text-align: center;
}

.button.button-register {
	font-size: 1.15em;
	padding: .8em 6em;
	border-radius: 5px;
	color: #FFF;
	background: #2F4091;
	transition: all .1s ease-in-out;
}

.button.button-register:hover {
	transform: translateY(-2px);
    box-shadow: 0 4px 8px #00000026;
    background: #3b51b5;
    text-decoration: none;
}

.sticky_button {
	text-align: center;
	padding: 1em;
	background: #FFF;
	transition: all .1s ease-in-out;
}


@media (min-width: 1280px) {
	#live #container {
		flex-direction: row-reverse;
		align-items: flex-start;
	}
	#container .card {
		border: 1px solid #D7D7D7;
		width: 406px;
		position: sticky;
		top: 7.7em;
	}
	.card .price {
		font-size: 1.2em;
		font-weight: 300;
	}

}
@media (max-width: 1279px) {
	#container .card {
		padding-bottom: 0;
	}
	.sticky_button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 98;
		box-shadow: 0 -2px 8px #0000001f;
	}

	.footer {
		padding-bottom: 8em !important;
	}

}


@media (max-width: 800px) {
	#live #container {
		margin: 0;
		padding: 0;
		margin-bottom: 1em;
	}

	#live #container .card {
		padding-left: 1em;
		padding-right: 1em;
	}

	#live header .content {
		height:53px;
		box-sizing: border-box;
	}

	#live header .content .logo {
		max-height: 100%;
	}

	#live header .content .title {
		font-size: 1.5rem;
	}

}

@media (max-width: 400px) {
	.button.button-register {
		padding: .8em 25%;
	}
	header .content .title {
		font-size: 1.2rem;
	}

}



.logo	{
	display: block;
	padding: 5px 0;
	max-height:60px;
}
img {
	max-width:100%;
}


#live header .logo {
	padding: 5px;
}


button, .button {
	background: #EEE;
	padding:7px 15px;
	text-decoration: none;
	color: #000000;
	display: inline-block;
	vertical-align: middle;
}

button:hover, .button:hover {
	background: #CCC;
}

button + button, .button + .button, button + .button, .button + button {
	margin-right:.5em;
}

form.login {
	text-align:center;
	padding:2em;
	/* border:1px solid #DDD; */
	/* background:#EEE; */
	line-height:1.6em;
	font-weight:normal;
}
form.login input {
	font-size:.8em;
	padding:.5em .8em;
}

h1{
	color:#999;
	font-size:2.3em;
	margin:0;
}

h2{
	color:#000;
	font-size:1.6em;
	margin-top: .2em;
	margin-bottom:1.8em;
}

/* h2.dates span {
	white-space: nowrap;
} */
/*
.dates span.from, .dates span.to {
	font-size: .8em;
}
*/
#bloc_container {
	/* background:url(img/bg.jpg) top center #FFF; */
	margin:auto;
}

#bloc_container > div, #bloc_container > table {
	max-width:710px;
	padding:3%;
	margin:auto;
	background:#FFF;
}

.bloc_inverse {
	color:#FFF;
}
.bloc_inverse a {
	color:#F00;
}

.bloc .img {
	width:30%;
	margin-right:4%;
}
.bloc .img img {
	max-width:100%;
	display:block;
}
.bloc div {
	display:inline-block;
	vertical-align:middle;
	width:66%;
}


.playlist {
	text-align:center;
	padding:5px;
	background:#000;
}
.playlist_item {
	border:4px solid #666;
	display:inline-block;
	width:220px;
	height:122px;
	margin:5px;
	background-size:cover;
	background-position:center;
	opacity:.7;
	position:relative;
}
.playlist_item > div {
	position:absolute;
	left:0;
	right:0;
	top:0;
	padding:5px;
	background:rgba(0,0,0,0.7);
	color:#FFF;
}
.playlist_item:hover, .playlist_item.active {
	border-color:#B00;
	opacity:1;
}

.playlist_item img {
	max-width:100%;
}



.auths:after {
	content:' ';
	display:block;
	clear:both;
}
.auths > div {
	float:left;
	width:49%;
	font-size:.7em;
	line-height:1.3em;
}
.auths > div img {
	float:left;
	margin-bottom:.5em;
	margin-right:1.5em;
}
.auths > div p {
	font-size:1.3em;
	margin:0;
	margin-bottom:5px;
}
.auths > div:first-child {
	margin-right:2%;
}
.auths > div:last-child {
	float:right;
}





@media (max-width:700px) {
	/*
	h1 {
		font-size: 1.2em;
	}
	h2.dates {
		font-size: 1.3em;
	}
	.auths > div {
		clear:both;
		float:none !important;
		width:100%;
		margin-bottom:1.5em;
	}
	*/
	#bloc_container > table td {
		display:block;
	}
	#bloc_container > table td img {
		max-width:100%;
	}

	#live header .logo {
		max-width: 40%;
	}
	
	#live header .logo.websurg {
		display: none;
	}
	


	.bloc div {
		display:block;
		width:100%;
	}
	.bloc .img {
		width:100%;
		margin-bottom:.5em;
	}
	.bloc .img img {
		margin:auto;
	}


}

#livesList h1 {
	margin-top: 2em;
	font-size: 2em;
	margin-bottom: 1em;
}

.livePreview {
	padding: 20px;
	border: 1px solid #DDD;
	margin-bottom: 20px;
	display: flex;
	text-decoration: none;
	background: #FAFAFA;
}
.livePreview:hover {
	background: #EEE;
}
.livePreview .img {
	width: 38%;
	margin-right: 4%;
	flex: none;
}
.livePreview .img img {
	margin: auto;
	max-height: 400px;
	max-width: 100%;
	display: block;
}

.livePreview .content {
	flex: 1 1 auto;
	color: #444;
}
.livePreview .content .title {
	flex: 1 1 auto;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: .5em;
}
/*
.livePreview .content .dates {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: .5em;
	color: #A00;
}
.livePreview .content .dates > span {
	display: block;
}
*/
.livePreview.banner {
	display: block;
	text-align: center;
}


.livePreview.banner .img {
	width: 100%;
	margin-right: 0;
	margin-bottom: 10px;
}


@media (max-width:600px) {

	.livePreview {
		display: block;
		text-align: center;
	}
	.livePreview .img {
		width: 100%;
		margin-bottom: 1em;
	}
	

}






.imt-footer__bottom {
    background-color: #f2f2f2;
    padding: 12px 1rem
}

.imt-footer__bottom-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center
}

.imt-footer__branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem
}

.imt-footer__logo svg {
    display: block;
    width: 140px;
    height: auto
}

.imt-footer__copyright {
    margin: auto;
	text-align: center;
}
.imt-footer__copyright a {
    margin: 0;
    font-size: .9rem;
    color: inherit;
    line-height: 1.6;
	text-decoration: none;
	text-align: center;
}

.imt-footer__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 1.5rem
}

.imt-footer__legal-item {
    margin: 0;
    padding: 0
}

.imt-footer__bottom a {
    color: #021438;
}
.imt-footer__bottom a:hover {
    color: #2F4091;
    text-decoration: underline
}

.imt-footer__legal-link {
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease
}

.icon-logo_IRCAD_France {
    color: #282828;
}


@media(min-width: 1024px) {

    .imt-footer__bottom {
        padding: 12px
    }

    .imt-footer__bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left
    }

    .imt-footer__branding {
        flex-direction: column;
        gap: 12px
    }

    .imt-footer__copyright br {
        display: none
    }

    .imt-footer__legal-list {
        flex-direction: row;
        gap: 4rem
    }
}