@charset "utf-8";


/*
  ==============================================================================================
  -------------------------|                                         |--------------------------
  -------------------------|             CSS CGLib 2025              |--------------------------
  -------------------------|               CSS Global                |--------------------------
  -------------------------|                                         |--------------------------
  ==============================================================================================
*/



/*
  ==============================================================================================
  ------------------------------------------ Général -------------------------------------------
  ==============================================================================================
  07/07/2025 21:05:58 Après nouveau design mantis687 DIAL ET AVEC  nouveau design mantis704 BAL
*/

html {
	height: 100%;
}
body {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100%;
}
body::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
}
/* #sa# 07/07/2025 21:51:56 code AvantMantis704  body:not(#mainContainer)::before {
	background: none !important;
}*/
#body {
	min-height: calc(100vh - 114px);
}
@media (min-width: 1921px) {
	body::before {
		background-size: cover !important;
	}
}
@media (max-width: 575px) {
	body.menu-expanded {
		overflow: hidden;
	}
}



/*=========================================== Titres ===========================================*/

h1, .h1 {
	font-size: 2.3rem;
}
h2, .h2 {
	font-size: 1.8rem;
}
h3, .h3 {
	font-size: 1.55rem;
}
h4, .h4 {
	font-size: 1.3rem;
}
h5, .h5 {
	font-size: 1.15rem;
}
h6, .h6 {
	font-size: 1rem;
}



/*=================================== Marqueurs online/occupé ==================================*/

.img {
	position: relative;
	display: inline-block;
}
.img.online::after,
.img.busy::after {
	display: block;
	position: absolute;
	z-index: 2;
	content: '';
	border-radius: 50%;
}
.img.online::after {
	background-color: #27cf1e;
}
.img.busy::after {
	background-color: #ffa024;
}
.img.xsmall::after {
	bottom: 0;
	right: -1px;
	width: 5px;
	height: 5px;
}
.img.small::after {
	bottom: -1px;
	right: 2px;
	width: 8px;
	height: 8px;
}
.img.medium::after {
	bottom: 3px;
	right: 2px;
	width: 10px;
	height: 10px;
}
.img.large::after {
	bottom: 4px;
	right: 5px;
	width: 10px;
	height: 10px;
}
.img.xlarge::after {
	bottom: 5px;
	right: 9px;
	width: 12px;
	height: 12px;
}

.img .badge {
	bottom: 7px;
	left: 6px;
}
.online .badge,
.icon.online {
	color: #fff;
	background-color: #27cf1e;
}
.busy .badge,
.icon.busy {
	color: #fff;
	background-color: #ffa024;
}

.icon.online,
.icon.busy {
	display: inline-block;
	position: relative;
	width: 8px;
	height: 8px;
	overflow: visible;
	border-radius: 100%;
	background-image: none;
}
.icon.online::before,
.icon.busy::before {
	display: block;
	position: absolute;
	content: '';
	top: -6px;
	left: -6px;
	width: 20px;
	height: 20px;
}



/*========================================= Ruban "new" ========================================*/

.new {
	position: absolute;
	z-index: 10;
	width: 60px;
	height: 60px;
	overflow: hidden;
}
.new span {
	display: block;
	position: absolute;
	width: 80px;
	padding: 1px 0;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	background-color: #535353;
}
.new-top-left {
	top: -1px;
	left: -1px;
	transform-origin: 0 0;
}
.new-top-left span {
	right: 2px;
	top: 9px;
	transform: rotate(-45deg);
}
.new-top-right {
	top: -1px;
	right: -1px;
	transform-origin: 100% 0;
}
.new-top-right span {
	left: 2px;
	top: 9px;
	transform: rotate(45deg);
}
.new-bottom-left {
	bottom: -1px;
	left: -1px;
	transform-origin: 0 100%;
}
.new-bottom-left span {
    left: -23px;
    bottom: 9px;
	transform: rotate(45deg);
}
.new-bottom-right {
	bottom: -1px;
	right: -1px;
	transform-origin: 100% 100%;
}
.new-bottom-right span {
    right: -23px;
    bottom: 9px;
	transform: rotate(-45deg);
}



/*============================= Teintes texte "femme/homme/couple" =============================*/

.femme {
	color: #ff3a89;
}
.homme {
	color: #48b8ec;
}
.couple {
	color: #ff0143;
}



/*===================================== Blockquote "quote" =====================================*/

blockquote.quote {
	padding-left: 18px;
	position: relative;
}
blockquote.quote::before, 
blockquote.quote::after {
	width: 21px;
	height: 21px;
    vertical-align: top;
}
blockquote.quote::before {
    position: absolute;
    left: -2px;
    top: -5px;
}
blockquote.quote::after {
	display: inline-block;
    margin-left: -1px;
	line-height: 0;
	transform: rotate(180deg);
}
.subtitle blockquote.quote {
	padding-top: 4px;
	margin-bottom: 0;
}
.subtitle blockquote.quote::after {
	margin-top: 2px;
}



/*================================== SimpleBar (scroll custom) =================================*/

[data-simplebar] {
    position: relative;
    z-index: 0;
    overflow: hidden !important;
	max-height: 100%;
    -webkit-overflow-scrolling: touch;
}
#dial [data-simplebar] {
	max-height: calc(100% - 114px);
}
[data-simplebar="init"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.simplebar-scroll-content {
    overflow-x: hidden !important;
    overflow-y: scroll;
    min-width: 100% !important;
    max-height: inherit !important;
    -webkit-box-sizing: content-box !important;
            box-sizing: content-box !important;
}
.simplebar-content {
    overflow-y: hidden !important;
    overflow-x: scroll;
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    min-height: 100% !important;
}
.simplebar-track {
	z-index: 10;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5px;
}
.simplebar-scrollbar {
    position: absolute;
    right: 2px;
    width: 4px;
    min-height: 10px;
}
.simplebar-scrollbar:before {
    position: absolute;
    content: '';
    background: #777;
    border-radius: 7px;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s linear;
}
#dial .simplebar-scrollbar:before {
    background: #fff;
}
.simplebar-track:hover .simplebar-scrollbar:before,
.simplebar-track .simplebar-scrollbar.visible:before {
    opacity: 0.5;
    transition: opacity 0 linear;
}
.simplebar-track.vertical {
    top: 0;
}
.simplebar-track.vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px;
}
.simplebar-track.horizontal {
    left: 0;
    width: auto;
    height: 5px;
}
.simplebar-track.horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px;
}
.horizontal.simplebar-track .simplebar-scrollbar {
    right: auto;
    top: -1px;
    height: 4px;
    min-height: 0;
    min-width: 10px;
    width: auto;
}



/*========================================== Modales =========================================*/

.modal .modal-header i.femme,
.modal .modal-header i.homme,
.modal .modal-header i.couple {
	top: -2px;
	margin: 0 5px;
}
.modal.movable .modal-body {
	cursor: move;
}
.modal.movable .modal-header {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-shadow: inset 0 3px 0 #f1f1f1;
}
.modal-image .modal-body img {
	max-width: 100%;
	height: auto;
}
.modal-smileys .modal-body ul li {
	display: inline-block;
	padding: 1px;
}
.modal-smileys .modal-body ul li:hover {
	background-color: #eee;
	border-radius: 6px;
}

.modal-promo .modal-dialog {
	width: 100%;
	min-width: 620px;
}
.modal-promo .modal-content {
	background-color: #880c24 !important;
}
.modal-promo .modal-header,
.modal-promo .modal-footer {
	color: #fff;
}
.modal-promo .modal-header h3 {
	position: relative;
    line-height: 1.1;
	padding-left: 50px !important;
}
.modal-promo h4 {
	font-size: 1.4rem;
}
.modal-promo .modal-header h3 i {
	position: absolute;
	top: -2px;
	left: 0;
}
.modal-promo .modal-header a.close {
	padding: 4px;
	opacity: 1 !important;
}
.modal-promo .modal-header .icon.remove {
	width: 50px;
	height: 50px;
	background-size: 666px auto;
    background-position: -400px -866px;
}
.modal-promo .modal-body .d-flex > ul {
	width: 75px;
}
.modal-promo .modal-body .d-flex > div > ul li {
	position: relative;
    padding: 0 0 8px 34px;
    line-height: 1.15rem;
}
.modal-promo .modal-body .d-flex > div > ul .icon.check {
    position: absolute;
    top: -1px;
    left: 5px;
}
.modal-promo .modal-body .d-flex > ul li:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.modal-promo .modal-footer {
	font-size: .9em;
    line-height: 1.1rem;
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.0%22%20id%3D%22Calque_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2210px%22%20height%3D%22400px%22%20viewBox%3D%220%200%2010%20400%22%20enable-background%3D%22new%200%200%2010%20400%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%231E1E1E%22%20d%3D%22M0%2C2.819C2.5%2C2.819%2C3.309%2C0%2C5%2C0H5c1.691%2C0%2C2.5%2C2.819%2C5%2C2.819V400H0V2.819z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') top center repeat-x;
}
.modal-promo .modal-footer .video {
	position: relative;
	width: 106px;
	min-width: 106px;
	height: 80px;
	box-shadow: 0 0 20px 3px rgba(255, 0, 70, .8)
}
.modal-promo .modal-footer .video::before {
	display: block;
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: url(../img/modal-promo_video-mask.png) center center no-repeat;
}
.modal-promo .modal-footer h5 {
    margin-top: 4px;
    margin-bottom: 6px;
	font-size: 1rem;
	font-weight: bold;
}
.modal-promo .modal-footer h5.astuce {
	color: #ffc23e;
}
.modal-promo .modal-footer i.promo-astuce {
	position: relative;
	overflow: visible;
	min-width: 50px;
}
.modal-promo .modal-footer i.promo-astuce::before {
	display: block;
	position: absolute;
	content: '';
    top: -8px;
    left: -8px;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1px solid #5b5b5b;
}
#modal-dial-webcam .modal-header {
	position: relative;
	padding-bottom: 0;
}
#modal-dial-webcam .modal-header .resize {
	display: none;
	z-index: 1;
	cursor: pointer;
}
#modal-dial-webcam.active .modal-header .resize {
	display: block;
}
#modal-dial-webcam .webcam-container {
	opacity: .15;
}
#modal-dial-webcam:not(.hasmessage).active .webcam-container {
	opacity: 1;
}
#modal-dial-webcam .webcam-container > .icon {
	display: none;
}
#modal-dial-webcam.active .webcam-container > .icon {
	display: block;
}
#modal-dial-webcam .modal-body .message {
	display: inline-block;
	position: absolute;
	z-index: 40;
	top: 45%;
	width: calc(100% - 40px);
	padding: 10px 30px;
    font-size: .9em;
    line-height: 1.15rem;
	transform: translateY(-50%);
}
#modal-dial-webcam .modal-draggable-handler {
	position: absolute;
    z-index: 50;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#modal-dial-webcam .modal-header .modal-draggable-handler {
	width: calc(100% - 50px);
}
#modal-dial-webcam.minimized .modal-header .modal-draggable-handler {
    width: calc(100% - 35px);
    height: calc(100% + 15px);
}
#modal-dial-webcam.minimized .modal-body .modal-draggable-handler {
	top: 15px;
	height: calc(100% - 15px);
}
#modal-dial-webcam iframe {
	width: 320px;
}
#modal-dial-webcam.minimized iframe {
	width: 200px;
}
#modal-dial-webcam.minimized .modal-body .message,
#modal-dial-webcam .modal-body .message + .message {
	display: none;
}
#modal-dial-webcam .modal-body .message a.badge {
	margin: .5rem .1rem;
}
#modal-dial-webcam .modal-body .message i.warning,
#modal-dial-webcam .modal-body .message i.webcamok,
#modal-dial-webcam .modal-body .message i.webcamnok,
#modal-dial-webcam .modal-body .message i.webcamreq {
	width: 40px;
	height: 40px;
	background-size: 532px auto;
}
#modal-dial-webcam .modal-body .message i.warning {
	background-position: -440px -813px;
}
#modal-dial-webcam .modal-body .message i.webcamreq {
	background-position: -120px -893px;
}
#modal-dial-webcam .modal-body .message i.webcamok {
	background-position: -160px -893px;
}
#modal-dial-webcam .modal-body .message i.webcamnok {
	background-position: -200px -893px;
}
#modal-dial-webcam .modal-body video {
	position: absolute;
    z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 240px;
}
#modal-dial-webcam.minimized .modal-body video {
	max-height: 112px;
}
#modal-dial-webcam .modal-body #localwebcam:not(.tofront) {
    z-index: 2;
	width: 25%;
	height: auto;
}
#modal-dial-webcam .modal-body .info {
	display: none;
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	color: #fff;
	font-size: .8rem;
	background-color: rgba(0, 0, 0, .4);
}
#modal-dial-webcam:not(.minimized) .modal-body .info.show {
	display: block;
}
#modal-dial-webcam .modal-footer {
	border-top: 0;
    padding-top: 0;
}
#modal-dial-webcam.minimized .modal-header {
	border-bottom: 1px solid transparent;
}
#modal-dial-webcam.minimized .modal-header .modal-title,
#modal-dial-webcam.minimized .modal-header .info {
	display: none;
}
#modal-dial-webcam.minimized .resize {
	top: -12px;
	right: -14px;
}
#modal-dial-webcam.minimized .resize i {
    background-position: -330px -670px;
}
#modal-dial-webcam.minimized .modal-body {
	padding: 1rem .3rem 0 .3rem;
}
#modal-dial-webcam.minimized .modal-body #localwebcam:not(.tofront) {
    display: none;
}
#modal-dial-webcam.minimized .modal-footer {
	padding-bottom: 0;
}
#modal-dial-webcam.minimized .modal-footer .btn {
	padding: .4rem 1rem;
	font-size: 0;
}
#modal-dial-webcam.minimized .modal-footer .btn strong {
	font-size: 12px;
}
#modal-dial-webcam.minimized .webcam-container {
	width: 150px;
}

@media (max-width: 649px) {
	.modal-promo .modal-dialog {
		min-width: auto;
	}
	.modal-promo .modal-body .d-flex > ul {
		display: none;
	}
}



/*======================================== Nota bene =========================================*/

.notabene {
	padding: 1rem 1.2rem;
	margin-bottom: .5rem;
	border-left: .2rem solid #eee;
	font-size: .85rem;
	background-color: #fff;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);
}
.notabene-success {
	border-left-color: #5abc41;
}
.notabene-info {
	border-left-color: #17a2b8;	
}
.notabene-warning {
	border-left-color: #f29024;
}
.notabene-danger {
	border-left-color: #d9534f;
}



/*=========================================== Info ===========================================*/

.info .icon.info {
	position: relative;
	top: -5px;
}
.info > span {
	width: calc(100% - 40px);
	font-size: .8rem;
}

@media (min-width: 576px) and (max-width: 680px),
(max-width: 480px) {
	.collapse .info .icon.info,
	.collapsing .info .icon.info {
		display: none;
	}
	.collapse .collapse .info > span,
	.collapse .collapsing .info > span,
	.collapsing .collapse .info > span,
	.collapsing .collapsing .info > span {
		width: 100%;
		padding-top: 1rem !important;
	}
}



/*================================ Info champs de formulaire =================================*/

.field-info {
	display: inline-block;
    position: relative;
    top: 1px;
    width: 100%;
    content: attr(data-info-text);
    padding: 4px 9px;
    font-size: .8em;
    line-height: .95rem;
    color: #fff;
    background-color: #f4f4f4;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.field-info.warning {
	color: #f29024;
	background-color: #fde9d3;
}
.field-info.danger {
	color: #dc3545;
	background-color: #fde7e8;
}



/*====================================== Threads (forum) =====================================*/

.thread:not(.first):first-child {
	margin-top: 25px;
}
.thread .card {
    -ms-flex-direction: row;
    	flex-direction: row;
	font-size: .85em;
	margin-bottom: 24px;
}
.thread .card a {
	text-decoration: none;
}
.thread .card-img {
	width: 130px;
    height: 115px;
	padding-left: 20px;
	border-left: 4px dotted rgba(0, 0, 0, .1);
}
.thread .card-img .badge {
	position: absolute;
	bottom: 4px;
	left: 1px;
}
.thread .card-img h6 {
	margin-top: 6px;
	font-size: .9em;
}
.thread .card-img h6 strong {
	max-width: calc(100% - 30px);
	margin-left: 4px;
}
.thread .card-img h6 i {
	top: -5px;
	left: 2px;
}
.thread .card-img h6 em {
	position: relative;
	top: -6px;
	margin-left: 4px;
	font-size: .95em;
	font-style: normal;
}
.thread .card-img img {
	display: inline-block;
	width: 80px;
	height: 80px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .2);
}
.thread .card-img .img i.neutral {
	background-color: #ccc;
}
.thread .card-img .img::after {
    box-shadow: 0 0 0 2px #f4f4f4;
}
.thread .card-body {
	width: calc(100% - 140px);
	padding: 0;
}
.thread .card-body em {
	position: absolute;
	top: -20px;
	right: 10px;
	font-size: .95em;
	font-style: normal;
}
.thread .card-body p,
.thread .card-body span.rounded {
	display: block;
	position: relative;
	padding: 18px 28px;
	margin-bottom: 1rem;
}
.thread .card-body p::before,
.thread .card-body span.rounded::before {
	display: block;
	position: absolute;
	content: '';
	top: 23px;
	left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent #fff transparent transparent;
}
@media (max-width: 767px) {
	.thread .card {
		-ms-flex-direction: column;
			flex-direction: column;
	}
	.thread .card-img {
		width: 100%;
		height: 56px;
		padding-left: 0;
	    border: 0 !important;
	}
	.thread .card-img .badge {
		bottom: 1px;
		left: -1px;
		transform: scale(.87);
	}
	.thread .card-img h6 {
		display: inline-block;
		width: calc(100% - 100px);
	    margin-top: 12px;
	}
	.thread .card-img a i + h6 {
		margin-left: -12px;
	}
	.thread .card-img h6 strong {
		margin-left: 0;
	}
	.thread .card-img h6 em {
		display: block !important;
		margin-left: 0;
		clear: both;
	}
	.thread .card-img .img {
		width: 60px;
		height: 60px;
		margin-right: 6px;
	}
	.thread .card-img a > .img > img,
	.thread .card-img a > .img > i {
		transform-origin: 0 0;
		transform: scale(.75);
	}
	.thread .card-body {
		width: 100%;
		padding-top: 10px;
	}
	.thread .card-body em {
		right: 4px;
		bottom: 34px;
	}
	.thread .card-body p,
	.thread .card-body span.rounded {
		margin-top: 6px;
	}
	.thread .card-body p::before,
	.thread .card-body span.rounded::before {
		top: -8px;
		left: 24px;
		border-width: 0 0 8px 8px;
		border-color: transparent transparent #fff transparent;
	}
	.thread .card-body .btn {
		margin-top: 10px;
	}
}



/*========================================= Popovers =========================================*/

.popover {
	z-index: 1000001;
	font-size: .8em;
}
.popover .popover-body {
	min-height: 40px;
}
.popover h5,
.popover h6 {
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
	padding-bottom: 10px;
    font-size: 1.25em;
	letter-spacing: -.02em;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.popover.dark h5,
.popover.dark h6 {
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.popover h6 {
    font-size: 1.15em;
}
.popover .popover-close {
	display: block;
	position: absolute;
	top: 6px;
	right: 6px;
	opacity: .5;
}
.popover:hover .popover-close {
	opacity: 1;
}
.popover.dark .invalid-feedback {
	font-size: 90%;
	color: #fff;
	padding: 3px 10px;
    background-color: #dc3545;
}


/*----------------------------- Notifications -----------------------------*/

#popnotifs .popover {
	min-width: 380px;
	font-size: .85em;
}
html.dial-opened #popnotifs .popover {
	z-index: -1;
}
#popnotifs .popover a.addlink {
	position: absolute;
	bottom: 8px;
	right: 16px;
	font-size: .95em;
}
#popnotifs .popover.visites {
	top: 70px !important;
    left: 18px !important;
}
#popnotifs .popover.visites .arrow {
	display: none;
}
#popnotifs .popover-body a {
	display: block;
	width: calc(100% - 30px);
	max-height: 100%;
    padding: 6px 10px;
	overflow: hidden;
	color: #fff;
	text-decoration: none !important;
}
#popnotifs .popover-body a img,
#popnotifs .popover-body a i {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}
#popnotifs .popover-body a:hover img,
#popnotifs .popover-body a:hover i {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .4);
}
#popnotifs .popover-body a img {
	width: 54px;
	height: 54px;
	background-position: center center;
	background-size: cover;
}
#popnotifs .popover-body a:not(:last-child) {
	border-bottom: 1px dotted rgba(255, 255, 255, .3);
}
#popnotifs .popover-body p {
	display: inline-block;
    width: calc(100% - 70px);
	color: rgba(255, 255, 255, .8);
	margin: 8px 0 0 0;
    line-height: 1.3em;
}
#popnotifs .popover-body p strong {
	text-transform: uppercase;
	color: #fff;
}
#popnotifs .popover-body a:hover p {
	color: #fff;
}
@media (max-width: 767px) {
	#popnotifs .popover.visites {
		top: 20px !important;
	}
}
@media (max-width: 575px) {
	#popnotifs {
		position: fixed;
		z-index: 1060;
		top: 0;
		left: 0;
		width: 100%;
		margin: 10px;
	}
	#popnotifs .popover {
		position: relative !important;
		display: none !important;
		min-width: calc(100% - 20px);
		margin: 0;
		transform: none !important;
	}
	#popnotifs .popover[showonmobile="true"] {
		display: inline-block !important;
	}
	#popnotifs .popover.visites {
		top: inherit !important;
		left: inherit !important;
	}
	#popnotifs .popover .arrow {
		display: none;
	}
	#popnotifs .popover-body {
		padding: .2rem .3rem;
	}
	#popnotifs .popover-body a img {
		width: 44px;
		height: 44px;
	}
	#popnotifs .popover-body p {
		margin: 4px 0 0 0;
	}
}


/*----------------------------- Dial > Statut -----------------------------*/

.popover #dialstatus ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.popover #dialstatus ul li a {
	display: inline-block;
	width: 100%;
	margin: 1px 0;
    padding: 5px 14px 6px 14px;
    border-radius: 3px;
    line-height: 1.25em;
    color: #212529;
}
.popover #dialstatus ul li a.active {
	color: #fff;
	background-color: #555;
	text-decoration: none;
}
.popover #dialstatus ul li a::before {
	display: inline-block;
	position: relative;
	content: '';
	left: -5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.popover #dialstatus ul li a[data-status="available"]::before {
	background-color: #27cf1e;	
}
.popover #dialstatus ul li a[data-status="busy"]::before {
	background-color: #ffa024;
}


/*------------------------- Dial > Filtres > Tri --------------------------*/

.popover #filtre-tri ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.popover #filtre-tri ul li a {
	display: inline-block;
	width: 100%;
	margin: 1px 0;
    padding: 5px 14px 6px 14px;
    border-radius: 3px;
    line-height: 1.25em;
    color: #212529;
}
.popover #filtre-tri ul li a.active {
	text-decoration: none;
}


/*---------------------------- Fichier protégé ----------------------------*/

.popover .media-id {
    display: none;
    position: absolute;
    bottom: 14px;
    left: 15px;
    padding: 2px 5px;
    margin-top: 6px;
    color: #fff;
    font-size: .85em;
    line-height: .8rem;
    border-radius: 4px;
    background-color: #9e9e9e;
    box-shadow: 0 1px 0 #616161;
}
.popover .media-id.show {
    display: inline-block;
}


/*======================================== Infopanel =========================================*/

#infopanel {
	position: fixed;
	z-index: 1000010;
	width: 100%;
}
#infopanel.top {
	top: 0;
}
#infopanel.bottom {
	bottom: 0;
}
#infopanel .infoitem {
	position: relative;
	overflow: hidden;
}
#infopanel.top .infoitem {
	box-shadow: inset 0 -1px 0 0px rgba(255, 255, 255, .2);
	animation:         Hideinfo-top .6s forwards;
}
#infopanel.top .infoitem.light {
	box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, .1);
}
#infopanel.top .infoitem.show {
	animation:         Showinfo-top .4s;
}
#infopanel.bottom .infoitem {
	box-shadow: inset 0 1px 0 0px rgba(255, 255, 255, .2);
	animation:         Hideinfo-bottom .6s forwards;
}
#infopanel.bottom .infoitem.light {
	box-shadow: inset 0 1px 0 0px rgba(0, 0, 0, .1);
}
#infopanel.bottom .infoitem.show {
	animation:         Showinfo-bottom .4s;
}
#infopanel .infoitem > i {
	position: absolute;
	top: 50%;
	width: 45px;
	height: 45px;
	margin-top: -25px;
	border-radius: 50%;
	opacity: .5;
	background-size: 602px auto;
}
#infopanel .infoitem > i.remove {
	background-position: -360px -781px;
}
#infopanel .infoitem > i.warning {
	background-position: -495px -872px;
}
#infopanel .infoitem > i.info {
	background-position: -225px -872px;
}
#infopanel .infoitem > i.check {
	background-position: -315px -781px;
}
#infopanel .infoitem .content {
	padding: 14px 40px 14px 14px;
	text-align: center;
}
#infopanel .infoitem .content img {
	max-width: 100%;
	height: auto;
}
#infopanel .infoitem .content.small {
	font-size: .8rem;
}
#infopanel .infoitem .content.medium {
	font-size: .95rem;
}
#infopanel .infoitem .content.large {
	font-size: 1.05rem;
}
#infopanel .infoitem .close {
	position: absolute;
	z-index: 1;
	top: 6px;
	right: 6px;
	opacity: 1;
}
#infopanel .infoitem .content > span {
	display: inline-block;
    vertical-align: middle;
}
#infopanel .infoitem .content .text {
	margin-right: 20px;
	text-align: left;
}
#infopanel .infoitem .content .text.hasicon {
	margin-left: 36px;
}
#infopanel .infoitem .content .text h5 {
	margin-bottom: 3px;
}
#infopanel .infoitem .content.small .text h5 {
	font-size: 15px;
}
#infopanel .infoitem .content.medium .text h5 {
	font-size: 17px;
}
#infopanel .infoitem .content.large .text h5 {
	font-size: 21px;
}
#infopanel .infoitem .content .btn {
	margin: 0 4px;
}
#infopanel .infoitem .content.small .btn {
	font-size: 12px;
	padding: .25rem .9rem;
}
#infopanel .infoitem .content.medium .btn {
	font-size: 13px;
	padding: .3rem 1rem;
}
#infopanel .infoitem .content.large .btn {
	font-size: 15px;
	padding: .45rem 1.15rem;
}
#infopanel .infoitem .content .btn * {
	font-size: 1em;
}
@media (max-width: 575px) {
	#infopanel .infoitem .content {
		padding: 8px 14px;
	}
	#infopanel .infoitem .content .text {
		max-width: calc(100% - 30px) !important;
		text-align: center;
	}
	#infopanel .infoitem .content .buttons {
		margin-top: 6px;
		margin-bottom: 6px;
	}
}


/*------------------------------ Dark ------------------------------*/

#infopanel .infoitem.dark {
	color: #fff;
	background-color: rgba(30, 30, 30, .97);
}


/*----------------------------- Light ------------------------------*/

#infopanel .infoitem.light {
	color: #333;
	background-color: rgba(245, 245, 245, .97);
}


/*----------------------------- Erreur -----------------------------*/

#infopanel .infoitem.error {
	color: #fff;
	background-color: rgba(235, 45, 62, .97);
}


/*-------------------------- Avertissement -------------------------*/

#infopanel .infoitem.warning {
	color: #fff;
	background-color: rgba(227, 152, 70, .97);
}


/*------------------------------ Info ------------------------------*/

#infopanel .infoitem.info {
	color: #fff;
	background-color: rgba(59, 178, 227, .97);
}


/*----------------------------- Succès -----------------------------*/

#infopanel .infoitem.success {
	color: #fff;
	background-color: rgba(90, 188, 65, .97);
}




/*=========================================== Loader ===========================================*/

.loader {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	text-align: left;
}
.spin {
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -11px;	
	margin-left: -11px;
	border-radius: 50%;
}
.spin::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: spin .6s infinite linear;
}
.spin:after {
	content: '';
	position: absolute;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
	top: 6%;
	left: 6%;
	background-color: #fff;
	border-radius: 50%;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.popover .spin:after {
	background-color: #f0f0f0;
}



/*======================================== RangeSlider =========================================*/

.irs {
	display: block;
    position: relative;
    height: 80px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.irs-line {
	display: block;
	position: relative;
	overflow: hidden;
	outline: none !important;
    height: 5px;
	top: 47px;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
.irs-line-left,
.irs-line-mid,
.irs-line-right {
	display: block;
	position: absolute;
	top: 0;
	height: 8px;
}
.irs-line-left {
	left: 0;
	width: 11%;
}
.irs-line-mid {
	left: 9%;
	width: 82%;
}
.irs-line-right {
	right: 0;
	width: 11%;
}
.irs-bar {
	display: block;
	position: absolute;
	left: 0;
	width: 0;
    height: 5px;
	top: 47px;
}
.irs-slider {
	display: block;
	position: absolute;
	cursor: default;
	z-index: 1;
    top: 41px;
    width: 17px;
	height: 17px;
    border-radius: 27px;
    cursor: pointer;
	box-shadow: 1px 2px 0 rgba(0, 0, 0, .1);
}
.irs-slider.type_last {
	z-index: 2;
}
.irs-min,
.irs-max {
	display: block;
	position: absolute;
    bottom: 6px;
	left: 0;
	cursor: default;
    color: #a1a1a1;
    font-size: 11px; 
    text-shadow: none;
}
.irs-max {
    right: 0;
    left: inherit;
}
.lt-ie9 .irs-min,
.lt-ie9 .irs-max {
    background: #ccc;
}
.irs-from,
.irs-to,
.irs-single {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	white-space: nowrap;
    color: #fff;
    font-size: 12px;
	line-height: 1.333;
    text-shadow: none;
	border-radius: .4rem;
	padding: .5rem .7rem;
	background-color: #2f2f2f;
}
.irs-from::before,
.irs-to::before,
.irs-single::before {
	display: block;
	position: absolute;
	content: '';
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #2f2f2f transparent transparent transparent;
}
.lt-ie9 .irs-from,
.lt-ie9 .irs-to,
.lt-ie9 .irs-single {
    background: #999;
}
.irs-grid {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 27px;
}
.irs-with-grid {
    height: 75px;
}
.irs-with-grid .irs-grid {
	display: block;
}
.irs-grid-pol {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 8px;
    opacity: 0.5;
    background: #428bca;
}
.irs-grid-pol.small {
	height: 4px;
    background: #999;
}
.irs-grid-text {
	position: absolute;
    bottom: 5px;
	left: 0;
	white-space: nowrap;
	text-align: center;
	font-size: 9px;
	line-height: 9px;
	padding: 0 3px;
	color: #99a4ac;
}
.irs-disable-mask {
	display: block;
	position: absolute;
	top: 0;
	left: -1%;
	width: 102%;
	height: 100%;
	cursor: default;
	background: rgba(0,0,0,0.0);
	z-index: 2;
}
.lt-ie9 .irs-disable-mask {
	background: #000;
	filter: alpha(opacity=0);
	cursor: not-allowed;
}
.irs-disabled {
	opacity: 0.4;
}
.irs-hidden-input {
	position: absolute !important;
	display: block !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	outline: none !important;
	z-index: -9999 !important;
	background: none !important;
	border-style: solid !important;
	border-color: transparent !important;
}



/*=========================== AdvTabs (menus "profil" / "courrier") ============================*/

.advtabs {
	position: relative;
	max-height: 0;
	margin: 10px 0 25px 0;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.06) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.06) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.06) 100%);
	visibility: hidden;
}
.advtabs.centered ul {
    align-items: center;
    justify-content: center;
}
.advtabs li {
	position: relative;
	text-align: center;
	font-size: .8em;
	line-height: 1.2em;
	vertical-align: top;
}
.advtabs li .warning {
	display: block;
	position: absolute;
	z-index: 10;
	top: 8px;
	left: calc(50% + 6px);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #fff;
	font-size: .75rem;
	font-weight: bold;
	line-height: 1.6;
	background-color: #f29024;
}
.advtabs li a {
	max-width: 130px;
	height: 100%;
	padding: 6px 20px 10px 20px;
}
.advtabs li a i.black {
	opacity: .4;
}
.advtabs li a span {
	display: block;
	position: relative;
	width: 100%;
}
.advtabs .dropdown-toggle {
	display: none;
	height: 100%;
	padding: 10px 0 0 0;
}
.advtabs .dropdown-toggle::after {
	display: none;
}
.advtabs .dropdown-menu {
    z-index: 1200;
	width: 260px;
	transform: translate3d(-170px, 50px, 0px) !important;
}
.advtabs .dropdown-toggle i {
	opacity: .4;
}
.advtabs .dropdown-toggle:hover i {
	opacity: .6;
}
.advtabs .dropdown-menu li {
	display: inline-block;
	width: 120px;
}



/*========================================== Galeries ==========================================*/

ul.grid-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
ul.grid-gallery:not(.sample) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.thread ul.grid-gallery:not(.sample) {
	margin-top: 10px;
}
.thread.first ul.grid-gallery:not(.sample) {
	margin: 20px 0 10px 0;
}
ul.grid-gallery:not(.sample) li {
	position: relative;
    -webkit-box-flex: 0;
	-ms-flex: 0 0 20%;
	flex: 0 0 20%;
	max-width: 20%;
	height: auto;
    padding-right: 8px;
    margin-bottom: 8px;
	font-size: 0;
	overflow: hidden;
}
.thread ul.grid-gallery:not(.sample) li {
	max-width: 80px;
}
ul.grid-gallery li > a {
	display: block;
	position: relative;
	font-size: 0;
	text-decoration: none;
}
ul.grid-gallery li a.delete {
	position: absolute;
    z-index: 8;
    bottom: -35px;
    right: 0;
    width: 35px;
    height: 35px;
    background-color: #f3f3f3 !important;
}
ul.grid-gallery li a.delete i {
    width: 30px;
    height: 30px;
	margin-top: 3px;
    background-size: 324px auto;
	background-position: -97px -325px;
}
html.touch ul.grid-gallery li a.delete,
ul.grid-gallery li:hover a.delete {
    bottom: 0;
}
ul.grid-gallery li a:hover.delete {
	background-color: rgba(229, 2, 63, 1) !important;
}
ul.grid-gallery li a:hover.delete i {
    background-position: -97px -292px;
}
ul.grid-gallery li .img,
ul.grid-gallery li img {
    width: 100%;
	height: auto;
    margin: 0;
	overflow: hidden;
	background-position: center center;
	background-size: contain !important;
	background-repeat: no-repeat;
	border-radius: 0 !important;
}
ul.grid-gallery li img {
	transition-delay: .2s !important;
}
ul.grid-gallery li .img {
	border: 1px solid #ddd;
    background-color: #f2f2f2;
}
ul.grid-gallery li img,
ul.grid-gallery li video {
    margin: 4px;
    width: calc(100% - 8px);
}
.thread ul.grid-gallery li img {
    margin: 0;
    width: 100%;
	background-size: cover !important;
}
ul.grid-gallery li img[style] {
	opacity: 1;
}
ul.grid-gallery li img:not([style]) {
	opacity: 0;
}
ul.grid-gallery li video {
    position: absolute;
    z-index: 7;
	top: 0;
	left: 0;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}
ul.grid-gallery li small {
	display: block;
	position: relative;
	z-index: 6;
	padding: 4px 10px 6px 10px;
	font-size: 11px;
	color: #212529;
	line-height: 1.25em;
	text-align: center;
	font-style: italic;
	background-color: #e3e3e3;
}
ul.grid-gallery li small a {
	font-style: normal;
}
ul.grid-gallery li span.name,
ul.grid-gallery li a.pseudo {
    display: inline-block;
    z-index: 2;
    width: calc(100% - 20px);
	padding: 8px 0 12px 0;
    font-size: .85rem;
	line-height: 1.3em;
    color: #555;
	text-align: center;
	word-wrap: break-word;
}
ul.grid-gallery li a.pseudo {
	overflow: hidden;
	white-space: nowrap;
	overflow: hidden;
    color: #212529;
	text-overflow: ellipsis;
}
ul.grid-gallery li a.pseudo i {
	margin-top: -3px;
	margin-left: 2px;
}
ul.grid-gallery li:not(.mediatype) > i {
	position: absolute;
	z-index: 9;
    top: 0;
    left: 0;
}
ul.grid-gallery li:not(.mediatype) i.lock,
ul.grid-gallery li:not(.mediatype) i.image {
	z-index: 4;
    top: 4px;
    left: 4px;
    border-radius: 50%;
}
ul.grid-gallery li:not(.mediatype) i.lock {
	position: absolute;
    width: 22px;
    height: 22px;
	background-size: 252px auto;
	background-position: -169px -364px;
	background-color: #fff;
}
ul.grid-gallery li:not(.mediatype) i.image {
    width: 23px;
    height: 23px;
	background-size: 315px auto;
	background-position: -95px -481px;
	background-color: #fff;
}
ul.grid-gallery.denied li .img::before,
ul.grid-gallery.denied li .img::after {
	position: absolute;
	content: '';
	z-index: 9;
	top: 49%;
	left: -10%;
	width: 120%;
	height: 6px;
	border-radius: 3px;
	background-color: #d9534f;
}	
ul.grid-gallery.denied li .img::before {
	transform: rotate(45deg);
}
ul.grid-gallery.denied li .img::after {
	transform: rotate(-45deg);
}
@media (max-width: 1439px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
}
@media (max-width: 991px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}
@media (max-width: 767px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 620px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (max-width: 575px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 425px) {
	ul.grid-gallery:not(.sample) li {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}


/*---------------------------- Vidéos / webcams ---------------------------*/

.videos ul.grid-gallery li .img i.play,
.webcams ul.grid-gallery li .img i.play,
#webcams-home .card .img i.play {
    position: absolute;
	z-index: 7;
	top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
	cursor: pointer;
}



/*================================= Slider vignettes horizontal ================================*/

.imgslider {
	position: relative;
	height: 102px;
	overflow-y: hidden;
}
.imgslider ul {
	display: inline-block;
	position: relative;
	min-height: 120px;
	list-style: none;
	padding: 0;
	width: calc(100% - 92px);
	margin: 0 46px;
	overflow-y: hidden;
	overflow-x: scroll;
	font-size: 0;
	-webkit-overflow-scrolling: touch;
}
.imgslider ul li {
	display: inline-block;
}
.imgslider ul li.active a {
	background-color: #333;
	box-shadow: 0 0 12px rgba(0, 0, 0, .4);
}
.imgslider.dynamic ul li:last-child {
	margin-right: 50px;
}
.imgslider ul li a {
	display: block;
	position: relative;
	width: 102px;
	height: 102px;
	margin: 0 5px;
	border-radius: 4px;
	background-color: #e0e0e0;
}
.imgslider ul li a,
.imgslider ul li a img[style*="background-image"] {
	animation:         Show-scale-opacity .3s forwards;
}
.imgslider ul li a img {
	display: inline-block;
    position: relative;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: auto;
    margin: 0 auto;
    border: 0;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
.imgslider ul li a img.img-full {
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent !important;
}
.imgslider a.prev,
.imgslider a.next {
	position: absolute;
	top: 50%;
	width: 33px;
	height: 33px;
	padding: 0;
	margin-top: -16px;
}
.imgslider a.prev {
	left: 5px;
}
.imgslider a.next {
	right: 5px;
}
.imgslider.beginreached a.prev,
.imgslider.endreached a.next {
	opacity: .3;
	cursor: default;
}
.imgslider a.prev i,
.imgslider a.next i {
	position: absolute;
	top: 2px;
	left: 1px;
    transform: none;
}


/*------------------------------- Zoom "over" -----------------------------*/

#carousel-zoomover {
	display: block;
	position: absolute;
	z-index: 1100;
	cursor: pointer;
	top: -520px;
	left: 520;
	width: 260px;
	height: 260px;
	opacity: 0;
	border: 3px solid #dfdfdf;
	border-radius: 2px;
	background-position: center center;
	background-size: contain !important;
	background-repeat: no-repeat;
	background-color: #999;
	transform: scale(.5);
}
#carousel-zoomover::before {
    display: block;
    position: absolute;
	z-index: 1;
    content: '';
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
}
#carousel-zoomover.show {
	opacity: 1;
	transform: scale(1);
}
#carousel-zoomover .sensi {
	position: absolute;
	display: block;
	z-index: 3;
	top: 71px;
    left: 71px;
	width: 110px;
	height: 110px;
}
#carousel-zoomover a {
	display: block;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none !important;
}
#carousel-zoomover h5 {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0 8px 4px 8px;
	font-size: 1em;
}
#carousel-zoomover strong {
    max-width: calc(100% - 22px);
}
#carousel-zoomover i {
	top: -1px;
	left: 3px;
}
#carousel-zoomover h5 em {
	position: relative;
	top: -3px;
	clear: both;
	font-size: .8em;
	font-style: normal;
}
#carousel-zoomover em span {
	color: #b6b6b6;
}



/*=============================== Block d'information (accordéon) ==============================*/

.moreinfo a[data-toggle="collapse"] {
	position: relative;
	left: -4px;
	padding-left: 34px;
	padding-right: 28px;
    border-bottom: 1px solid transparent;
	line-height: 1.1rem;
	text-decoration: none !important;
}
.moreinfo a[data-toggle="collapse"][aria-expanded="true"] {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.moreinfo a[data-toggle="collapse"] i:not(.more) {
	position: absolute;
	top: 2px;
	left: 4px;
}
.moreinfo a[data-toggle="collapse"] i.more {
	position: absolute;
	top: calc(50% - 15px);
	right: -2px;
	opacity: .4;
}
.moreinfo.bg-gray a[data-toggle="collapse"] i.more {
	opacity: .8;
}
.moreinfo a[data-toggle="collapse"][aria-expanded="true"] i.more {
	background-position: -30px -610px;
}
.moreinfo.bg-gray a[data-toggle="collapse"][aria-expanded="true"] i.more {
	background-position: -30px -580px;
}
a[data-toggle="collapse"] i.moreinfo.active {
	background-position: -300px -670px;
}
.moreinfo a[data-toggle="collapse"] i.error-round {
	width: 30px;
	height: 30px;
	background-position: -120px -180px;
	background-size: 300px auto;
}
.moreinfo .collapse ul,
.moreinfo .collapsing ul {
	padding-left: 30px;
	padding-right: 10px;
}
.moreinfo .collapse ul li,
.moreinfo .collapsing ul li {
	margin-bottom: 6px;
}
.moreinfo .collapse > span,
.moreinfo .collapsing > span {
	display: block;
	padding: 10px;
}
a.moreinfo {
	position: absolute;
	z-index: 3;
	top: 0;
    right: 24px;
}
fieldset.collapse a.moreinfo,
fieldset.collapsing a.moreinfo {
    right: 8px;
}

@media (min-width: 481px) and (max-width: 575px),
(min-width: 681px) {
	.moreinfo a[data-toggle="collapse"] {
		padding-left: 14px;
		padding-bottom: 0 !important;
		border-bottom: 0 !important;
	}
	.moreinfo a[data-toggle="collapse"].hide {
		display: none !important;
	}
	.moreinfo a[data-toggle="collapse"] i:not(.more) {
		display: none;
	}
	.moreinfo a[data-toggle="collapse"] i.more {
		display: none;
	}
	.moreinfo .collapse,
	.moreinfo .collapsing {
		display: block;
		height: auto !important;
		visibility: visible;
	}
	.moreinfo a[data-toggle="collapse"]:not(.hide) + .collapse ul,
	.moreinfo a[data-toggle="collapse"]:not(.hide) + .collapsing ul {
		margin-top: .5rem !important;
	}
	.moreinfo a[data-toggle="collapse"]:not(.hide) + .collapse span,
	.moreinfo a[data-toggle="collapse"]:not(.hide) + .collapsing span {
		padding-top: 0;
	}
	a.moreinfo {
		display: none !important;
	}
}



/*=========================================== Divers ===========================================*/

body.frame {
	height: auto;
	background: none;
}
img.img-full {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-color: #ccc !important;
}
img {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
ul.smileys {
	list-style: none;
	padding: 0;
	margin: -8px 0 0 0;
	float: right;
}
ul.smileys.disabled {
	opacity: .6;
	filter: grayscale(1);
}
ul.smileys.disabled a {
	cursor: default;
}
ul.smileys li {
	display: inline-block;
	margin: 0 2px;
}
p.customtextarea.disabled {
	background-color: #dedede !important;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .03) !important;
}
p.customtextarea.disabled .actions a {
	opacity: .2 !important;
	cursor: default;
}
span.textarea {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 102px;
	font-size: .9rem;
	color: #212529;
	line-height: 1.5em;
	outline: 0;
	background-color: transparent;
    overflow-x: hidden;
	overflow-y: auto;
	white-space: pre-wrap;
}
.carousel-info {
	position: absolute;
	z-index: 1000001;
	width: calc(100% - 40px);
	top: 30px;
	left: 20px;
	text-align: center;
}




/*
  ==============================================================================================
  ------------------------------------------- Header -------------------------------------------
  ==============================================================================================
*/

/*======================================== Généralités =========================================*/

header {
	position: absolute;
	z-index: 801;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	max-height: 132px;
    padding: 22px 0 18px 250px;
}
body.menu-expanded header {
	z-index: 1230;
	max-height: 100%;
	overflow-y: auto;
	background-color: #323232;
}
header > div {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	max-width: calc(1140px + 250px);
	margin: 0 auto;
}
header h1 {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 300px;
	text-align: left;
}
header h1 a {
	display: inline-block;
	position: relative;
	margin-top: 10px;
	vertical-align: top;
	font-size: 0;
	transform-origin: 0 50%;
}
header h1 a::before {
	position: absolute;
	content: '';
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
header h1 a::after {
	display: block;
	position: absolute;
	content: '';
	background-size: 100% auto !important;
}
header h1.addon-noel a::after {
	z-index: 3;
	width: 151px;
	height: 100px;
	background: url(../img/addon-logo-noel.png) 0 0 no-repeat;
}
header h1.addon-nouvelle_annee a::after {
	z-index: 3;
	width: 151px;
	height: 100px;
	background: url(../img/addon-logo-nouvelle_annee.png) 0 0 no-repeat;
}
header h1.addon-stvalentin a::after {
	z-index: 1;
	width: 77px;
	height: 72px;
	background: url(../img/addon-logo-stvalentin.png) 0 0 no-repeat;
}
header h1.addon-ete a::after {
	z-index: 3;
	width: 69px;
	height: 79px;
	background: url(../img/addon-logo-ete.png) 0 0 no-repeat;
}
header h1.addon-new a::after {
	z-index: 1;
	width: 81px;
	height: 50px;
	background: url(../img/addon-logo-new.png) 0 0 no-repeat;
}
@media (min-width: 1600px) {
	header > div {
		max-width: calc(1540px + 250px);
	}
}
@media (min-width: 1440px) {
	header h1 {
		margin-right: 0;
	}
}
@media (min-width: 1200px) {
	body.menu-expanded header h1 a::before {
		background-position: bottom left !important;
	}
}
@media (max-width: 1199px) {
	header h1 {
		display: none;
		position: absolute;
		top: 50%;
		left: 16px;
		width: 210px;
		-ms-flex-item-align: center;
		align-self: center;
	}
	body.menu-expanded header h1 {
		display: inline-block;
	}
	header h1 a {
		margin-top: 0;
		transform-origin: 0 50%;
		transform: scale(.8077);
	}
	header h1 a::before {
		background-position: bottom left !important;
	}
}
@media (min-width: 576px) {
	header.full {
		position: fixed;
		padding-bottom: 40px;
	}
	header.full a#menu-closer {
		position: fixed;
	}
}
@media (max-width: 575px) {
	header {
		padding: 16px 10px 0 10px;
		max-height: 86px;
	}
	header > div {
		flex-direction: row;
	}
	body.menu-expanded header {
		position: fixed;
		height: 100%;
		overflow-y: auto;
	}
	header h1 {
		display: block;
		width: calc(100% - 28px) !important;
		top: 0;
		left: 14px !important;
		margin: 0 !important;
		padding: 10px 0;
		text-align: center;
		border-bottom: 1px solid #585858;
	}
	header h1 a {
		left: 0 !important;
		margin-left: 60px;
	}
	header h1 {
		opacity: 0;
	}
	header #optionsmenu,
	header #clonednotifs,
	header #enligne {
		opacity: 0;
		transform: translateY(50px);
	}
	body.menu-expanded header h1,
	body.menu-expanded header #optionsmenu,
	body.menu-expanded header #clonednotifs,
	body.menu-expanded header #enligne {
		opacity: 1;
		transform: translateY(0);
	}
}



/*=========================================== Menus ===========================================*/


/*------------------------------ Généralités ------------------------------*/

header nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
header nav ul li {
	display: inline-block;
	text-align: center;

}
header nav ul li a:not(#menu-closer) {
	display: inline-block;
	font-size: .9rem;
	font-weight: 400;
	text-align: center;
}
header a#menu-closer {
	position: absolute;
	display: none;
	bottom: 20px;
	right: 20px;
	text-align: center;
	color: #fff;
}
header a#menu-closer i {
	width: 50px;
	height: 50px;
	background-size: 640px auto;
    background-position: -384px -830px;
}
body.menu-expanded header a#menu-closer {
	display: block;
}
body.menu-expanded header .embedtoggler::after {
	display: none !important;
}
@media (min-width: 576px) {
	header nav ul li:not(.son) a:not(#menu-closer) {
		box-shadow: none;
		background: none;
	}
}
@media (max-width: 575px) {
	body.menu-expanded header a#menu-closer {
		top: 18px !important;
		left: 10px !important;
		height: 50px;
		right: auto;
	}
}


/*---------------------------- Menu principal -----------------------------*/

#mainmenu {
	-webkit-box-flex: 1; 
	-moz-box-flex: 1;
	width: 20%;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding-right: 50px;
}
#mainmenu ul {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}
#mainmenu ul li:not(.toggler) {
	margin-bottom: 18px;
}
#mainmenu ul li:not(.toggler) a {
	position: relative;
	width: 100px;
	height: 100px;
	color: #fff;
	letter-spacing: -.02em;
}
#mainmenu ul li:not(.toggler) a i {
	position: absolute;
	top: 17px;
	left: 27px;
}
#mainmenu ul li:not(.toggler) a span {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mainmenu ul li:not(.toggler) a::before {
	display: block;
	position: relative;
	content: '';
	top: 4px;
	left: 14px;
	width: 76px;
	height: 76px;
	margin-bottom: 8px;
	border-radius: 50%;
}
#mainmenu ul li.toggler {
	display: none;
	position: relative;
	width: 0;
	height: 0;
}
#mainmenu ul li.toggler a {
	text-indent: -10000em;
}
#mainmenu ul li.toggler::after {
	display: block;
	position: absolute;
	content: '';
	top: 16px;
	left: 5px;
	width: 40px;
	height: 50px;
	cursor: pointer;
	background-position: -355px 0;
}
@media (max-width: 575px) {
	#mainmenu {
		padding-right: 0;
	}
	#mainmenu ul {
		top: 0;
		justify-content: center;
	}
	body.menu-expanded #mainmenu ul {
		top: 98px;
		border-bottom: 1px solid #585858;
	}
	#mainmenu li {
		width: 16.6666667%;
	}
	#mainmenu ul li:not(.toggler) {
		margin-bottom: 12px;
	}
	#mainmenu ul li:not(.toggler) a {
		width: 100%;
		height: auto;
		font-size: .8em;
		line-height: 1.2em;
	}
	#mainmenu ul li:not(.toggler) a::before {
		top: 0;
		left: 50%;
		margin-left: -24px;
		margin-bottom: 4px !important;
		width: 50px;
		height: 50px;
	}
	#mainmenu ul li:not(.toggler) a i {
		top: 0;
		left: 50%;
		margin-left: -24px;
		width: 48px;
		height: 48px;
		transform: scale(.75);
	}
}
@media (max-width: 425px) {
	#mainmenu li {
		width: 20%;
	}
	#mainmenu ul li:not(.toggler) a {
		font-size: .75em;
	}
}


/*---------------------------- Menu secondaire ----------------------------*/

#optionsmenu {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 230px;
}
#optionsmenu ul {
	margin: 24px 0;
}
#optionsmenu ul li.accescomplet {
	display: none;
}
#optionsmenu ul li {
	margin-left: 6px;
}
#optionsmenu ul li a {
	position: relative;
	width: 38px;
	height: 38px;
	font-size: 0;
}
#optionsmenu ul li a i {
	top: 0;
	left: 0;
}
@media (max-width: 1199px) {
	#optionsmenu {
		display: none;
		position: absolute;
		top: calc(50% + 10px);
		left: 0;
		width: 100%;
		max-width: 230px;
		text-align: center;
	}
	body.menu-expanded #optionsmenu {
		display: inline-block;
	}
	#optionsmenu ul {
		margin-top: 0;
	}
	body.menu-expanded #optionsmenu ul li {
		width: 40px;
		margin: 0;
	}
}
@media (min-width: 576px) {
	#optionsmenu ul li a {
		padding: 0;
		border: 0;
		background-color: transparent;
	}
	#optionsmenu ul li a strong {
		font-size: 0 !important;
	}
	#optionsmenu ul li:not(.son) a {
		opacity: .6;
	}
	#optionsmenu ul li:not(.son) a:hover {
		opacity: 1;
	}
}
@media (max-width: 575px) {
	#optionsmenu {
		display: block;
		top: 510px;
		width: 100%;
		max-width: 100% !important;
	}
	body.menu-expanded #optionsmenu ul li:not(.son) {
		width: 100%;
		margin: 4px 0;
	}
	#optionsmenu ul li.accescomplet {
		display: inline-block;
	}
	#optionsmenu ul li:not(.son) a {
		width: 100%;
		max-width: 250px;
		height: auto;
		font-size: .9rem !important;
		color: #fff;
	}
	#optionsmenu ul li:not(.son) a i {
		top: -2px;
		left: 6px;
		opacity: .65;
		transform: scale(.85);
	}
	#optionsmenu ul li:not(.son) a:hover i {
		opacity: 1;
	}
}


/*----------------------------- Menu en ligne -----------------------------*/

#enligne {
	display: none;
	position: absolute;
	top: 390px;
	left: 14px;
	width: calc(100% - 28px);
	height: 85px;
	text-align: center;
}
#enligne h4 {
	color: #fff;
	font-size: 1em;
	margin-bottom: 8px;
}
#enligne h4 strong {
	font-weight: 700;
}
#enligne ul {
	display: inline-block;
	width: 100%;
	max-width: 280px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#enligne ul li {
	display: inline-block;
	width: 48%;
	height: 60px;
}
#enligne ul li:first-child {
	padding-right: 10px;
	border-right: 1px solid rgba(255, 255, 255, .14);
}
#enligne ul li a {
	position: relative;
	font-size: .8rem !important;
	color: #ccc;
}
#enligne ul li a strong {
	font-weight: 600;
	color: #fff;
}
#enligne ul li a i {
	display: block;
	left: 50%;
	margin-left: -20px;
}
@media (max-width: 575px) {
	#enligne {
		display: block;
	}
}


/*------------------------------ Bouton "son" -----------------------------*/

#btn-son {
	position: fixed;
	z-index: 1230;
	top: 0;
	right: 0;
    width: 60px;
    height: 40px;
}
#btn-son::before {
	display: block;
    position: absolute;
	z-index: 1;
    content: '';
    top: -182px;
    right: -182px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .8);
}
#btn-son i {
	z-index: 2;
	top: -1px;
    left: 21px;
}
#btn-son.off i {
	background-position: -160px -200px;
}
#btn-son .popover {
	margin-top: 0;
}
#btn-son .popover .arrow {
	left: auto !important;
	right: 4px;
}
@media (min-width: 576px) {
	html.dial-opened #btn-son {
		width: 40px;
		height: 40px;
	}
	html.dial-opened #btn-son::before {
		display: none;
	}
	html.dial-opened #btn-son i {
		left: 1px;
	}
}
@media (max-width: 575px) {
	#btn-son {
		top: auto;
		bottom: 0;
	}
	#btn-son::before {
		top: auto;
		right: -182px;
		bottom: -182px;
		left: auto;
	}
	#btn-son i {
		top: auto;
		bottom: -3px;
	}
}




/*====================================== Notitications =======================================*/


/*------------------------------ Généralités ------------------------------*/

.notifications {
	display: inline-block;
	width: 100%;
	margin: 0;
	list-style: none;
}
.notifications li {
	display: inline-block;
	position: relative;
}
.notifications li.visites {
	position: absolute;
	right: 0;
}
.notifications li a {
	display: inline-block;
	position: relative;
	margin-right: 30px;
	color: #fff;
	font-size: .82em;
	text-decoration: none;
	line-height: 1.2em;
}
.notifications li a i {
	top: -3px;
}
.notifications li a .count {
	display: block;
	position: absolute;
	z-index: 1;
	top: 14px;
	min-width: 21px;
	padding: 0 3px;
	height: 21px;
	font-size: .8rem;
	text-align: center;
	line-height: 1.67em;
	border-radius: 10px;
	color: #fff;
}
.notifications li.dials a .count,
.notifications li.contacts a .count {
	right: calc(100% - 48px);
}
.notifications li.courriers a .count {
	right: calc(100% - 50px);
}


/*------------------------- Original (barre fixe) -------------------------*/

#notifications {
	display: none;
	position: absolute;
	z-index: 800 !important;
	width: 100% !important;
	height: 45px;
	text-align: center;
	padding-left: 270px;
	background-color: rgba(50, 50, 50, .4);
}
.is-sticky #notifications {
	background-color: rgba(50, 50, 50, .85);
}
#notifications[ready] {
	display: inline-block;
}
#notifications ul {
	max-width: calc(1140px + 250px);
	padding: 3px 0 0 0;
	text-align: left;
	white-space: nowrap;
}
#notifications ul li:not(:first-child):not(:nth-child(2))::before {
	display: block;
	position: absolute;
	content: '';
	top: 10px;
	left: -15px;
	width: 1px;
	height: 18px;
	background-color: rgba(255, 255, 255, .16);
}
#notifications ul li.toggler,
#notifications ul li.vuecompacte,
#notifications ul li.vuephotos {
	display: none;
}
#notifications ul li a i {
	margin-right: 20px;
}
#notifications-sticky-wrapper {
	position: absolute;
	width: 100%;
	top: 146px;
}
@media (min-width: 1600px) {
	#notifications ul {
		max-width: calc(1540px + 250px);
	}
}
@media (max-width: 767px) {
	#notifications ul li a {
		margin-right: 20px;
		font-size: 0;
	}
}
@media (max-width: 575px) {
	#notifications {
		width: 50px !important;
		height: 100%;
		padding: 8px 0 0 1px;
		font-size: 0;
		background-color: rgba(0, 0, 0, 0);
	}
	#notifications ul {
		white-space: normal;
	}
	#notifications ul li {
		margin-bottom: 8px;
	}
	#notifications ul li a {
		margin: 0;
	}
	.notifications li:not(:first-child)::before {
		display: none;
	}
	#notifications ul li.toggler,
	#notifications ul li.vuecompacte,
	#notifications ul li.vuephotos {
		display: inline-block;
		left: 3px;
	}
	#notifications ul li.toggler {
		margin-bottom: 4px;
	}
	#notifications ul li.vuecompacte,
	#notifications ul li.vuephotos {
		opacity: .4;
	}
	#notifications ul li.vuecompacte:hover,
	#notifications ul li.vuephotos:hover,
	#notifications ul li.vuecompacte.active,
	#notifications ul li.vuephotos.active {
		opacity: 1;
	}
	#notifications ul li.vuecompacte {
		margin-top: 20px;
	}
	#notifications ul li a i {
		margin-right: 0;
	}
	#notifications ul li a .count {
		top: 15px;
		left: 26px;
		right: inherit;
		min-width: 18px;
		height: 18px;
		font-size: .7rem;
	}
	.notifications:not(#clonednotifs) li.contacts a .count {
		background-color: #fff !important;
	}
	#notifications-sticky-wrapper {
		top: 120px;
	}
	#notifications-sticky-wrapper.is-sticky #notifications {
		background-color: rgba(50, 50, 50, .85);
	}
}


/*----------------------- Clone (menu mobile ouvert) ----------------------*/

ul#clonednotifs {
	display: none;
	position: absolute;
	top: 300px;
	left: 14px;
	width: calc(100% - 28px);
	height: 85px;
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
}
ul#clonednotifs li {
	display: inline-block;
	vertical-align: top;
	width: 25%;
}
ul#clonednotifs li.visites {
	display: none;
}
ul#clonednotifs li a i {
	display: block;
	left: 50%;
	margin: 0 0 0 -26px;
}
ul#clonednotifs li.toggler {
	display: none !important;
}
@media (max-width: 575px) {
	ul#clonednotifs {
		display: block;
	}
	ul#clonednotifs li a {
		margin-right: 0;
	}
	ul#clonednotifs li a .count {
		top: 14px;
		left: 50%;
		margin-left: 2px;
		right: inherit;
	}
	body.menu-expanded header #clonednotifs {
		display: block;
	}
}




/*
  ==============================================================================================
  -------------------------------------------- Dial --------------------------------------------
  ==============================================================================================
*/

/*================================ Dial (tablette & desktop) =================================*/

aside#dial {
	position: fixed;
	display: none;
	z-index: 1220;
	top: 0;
	left: 0;
	width: 230px;
	height: 100%;
	padding: 22px 0 0 0;
	background-color: #212121;
}
@media (max-width: 1023px) {
	aside#dial {
		z-index: 880;
	}
}


/*------------------------------- Zone titre ------------------------------*/

aside#dial h4 {
	line-height: 1.05em;
	padding-left: 4px;
}
aside#dial h4 a i.arrow-bottom {
	position: absolute;
	bottom: -12px;
	right: -20px;
	transform: scale(.54);
}
aside#dial h4 .img {
	margin: -3px 16px 0 10px;
}
aside#dial h4 .img::after {
	box-shadow: 0 0 0 2px #212121;
}
aside#dial h4 small {
	color: #cacaca;
	font-size: .8em;
}
aside#dial #dial-closer {
	display: none;
}


/*-------------------------------- Filtres --------------------------------*/

aside#dial ul.filtres {
	width: calc(100% - 8px);
	list-style: none;
	margin: 14px 4px 12px 4px;
	padding: 4px 5px 9px 12px;
	border-radius: 2px;
	font-size: 0;
	background-color: #414141;
}
aside#dial ul.filtres a {
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
}
aside#dial ul.filtres li {
	display: inline-block;
	vertical-align: middle;
}
aside#dial ul.filtres li.tri {
	position: relative;
	height: 100%;
}
aside#dial ul.filtres li.tri a[dialtri] {
	position: absolute;
	top: 9px;
}
aside#dial ul.filtres li.tri a .selected {
	display: block;
	color: #a4a4a4;
	font-size: .85em;
	line-height: .9em;
}
aside#dial ul.filtres li.tri a:hover,
aside#dial ul.filtres li.tri a:hover .selected {
	color: #fff;
	text-decoration: none;
}
aside#dial ul.filtres li.tri a i {
	transform: scale(.72);
}
aside#dial ul.filtres li.zone a,
aside#dial ul.filtres li.genre a,
aside#dial ul.filtres li.plus a {
	display: inline-block;
	position: relative;
	top: 2px;
	font-size: 0;
	opacity: .5;
}
aside#dial ul.filtres li a.filtered,
aside#dial ul.filtres li.zone a:hover,
aside#dial ul.filtres li.genre a:hover,
aside#dial ul.filtres li.plus a:hover {
	opacity: 1;
}
aside#dial ul.filtres li a.filtered::before {
	position: absolute;
	content: '';
	top: 4px;
	right: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #fff;
}


/*--------------------------------- Liste ---------------------------------*/

aside#dial ul.list {
	display: inline-block;
	position: relative;
	width: calc(100% - 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}
aside#dial ul.list li {
	height: 26px;
}
aside#dial ul.list li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.6rem;
}
aside#dial ul.list li a.hover,
aside#dial ul.list li a.hover .genre i {
	text-decoration: none;
	background-color: #494949;
}
html.no-touchevents aside#dial ul.list li a.hover,
html.touchevents aside#dial ul.list li a.selected {
	z-index: 5;
}
aside#dial ul.list li a span {
	display: block;
	height: 100%;
	padding: 0;
	float: left;
	border-top: 1px solid #2e2e2e;
}
aside#dial ul.list li a.hover span {
	border-top: 1px solid transparent;
}
aside#dial ul.list li a .img,
aside#dial ul.list li a .pseudo,
aside#dial ul.list li a .dept,
aside#dial ul.list li a .genre,
aside#dial ul.list a ul.actions,
aside#dial ul.list li a ul.actions li {
	transition: all .15s ease-out;
	transition-delay: 0;
}
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .img, 
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .img img, 
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .img i, 
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .pseudo, 
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .dept, 
html.no-touchevents aside#dial ul.list li a:not(.selected).hover .genre, 
html.no-touchevents aside#dial ul.list a:not(.selected).hover ul.actions {
	transition-delay: .5s;
}
aside#dial ul.list li a .img {
	left: 0;
	width: 21px;
	height: 21px;
	padding: 0;
	margin: 2px 8px 0 7px;
	border-top: 1px solid transparent;
	z-index: 3;
	transform-origin: 28% 55%;
}
html.no-touchevents aside#dial ul.list li a.hover .img, 
aside#dial ul.list li a.selected .img {
	transform: scale(3.2);
}
aside#dial ul.list li a .img img, 
aside#dial ul.list li a .img i {
	transition: all .15s ease-out;
	box-shadow: 2px 0 3px rgba(0, 0, 0, 0);
}
html.no-touchevents aside#dial ul.list li a.hover .img img, 
html.no-touchevents aside#dial ul.list li a.hover .img i, 
aside#dial ul.list li a.selected .img img, 
aside#dial ul.list li a.selected .img i {
	box-shadow: 2px 0 3px rgba(0, 0, 0, .2);
}
html.no-touchevents aside#dial ul.list li a.selected.hover .img,
html.touchevents aside#dial ul.list li a.selected .img {
    left: -10px;
}
aside#dial ul.list li a .img.busy img,
aside#dial ul.list li a .img.busy .icon {
	opacity: .7;
	filter: grayscale(1);
}
aside#dial ul.list li a .img::after {
	box-shadow: 0 0 0 1px #212121;
}
aside#dial ul.list li a.hover .img::after {
	box-shadow: 0 0 0 1px #494949;
}
aside#dial ul.list li a img {
	display: inline-block;
	width: 21px;
	height: 21px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
}
aside#dial ul.list li a .img .icon,
aside#dial ul.list li a .img img {
	vertical-align: top;
}
aside#dial ul.list li a .img .icon {
	padding-bottom: 100%;
}
aside#dial ul.list li a .img .icon.femme {
	background-color: #af5177;
}
aside#dial ul.list li a .img .icon.homme {
	background-color: #16668b;
}
aside#dial ul.list li a .img .icon.couple::before {
	background: #c189ff;
	background: -moz-radial-gradient(bottom left, ellipse cover, #cd5a89 0%, #1f88b8 85%);
	background: -webkit-radial-gradient(bottom left, ellipse cover, #cd5a89 0%, #1f88b8 85%);
	background: radial-gradient(ellipse at bottom left, #cd5a89 0%, #1f88b8 85%);
}
aside#dial ul.list li a .pseudo {
	position: relative;
	z-index: 2;
	width: 118px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
html.no-touchevents aside#dial ul.list li a.hover .pseudo, 
html.no-touchevents aside#dial ul.list li a.selected .pseudo {
	color: #fff !important;
	font-size: 1.2em;
	transform: translateX(40px);
}
html.touchevents aside#dial ul.list li a.hover .pseudo, 
html.touchevents aside#dial ul.list li a.selected .pseudo {
	z-index: 1;
}
html.no-touchevents aside#dial ul.list li a.selected.hover .pseudo {	
	transform: translateX(-100%) !important;
	opacity: 0;
}
aside#dial ul.list li a .age {
	display: none;
}
aside#dial ul.list li a .dept {
	color: #979797;
	padding: 0 12px;
	font-size: .9em;
	font-weight: 400;
}
aside#dial ul.list li a.hover .dept {
	color: #fff;
}
aside#dial ul.list li a .genre {
	right: 0;
	height: 21px;
}
aside#dial ul.list li a .genre i {
	top: -1px;
	background-color: #222;
}
aside#dial ul.list li.busy a .genre .icon {
	opacity: .4;
}
aside#dial ul.list a ul.actions {
    display: block;
    position: absolute;
    z-index: 1;
    top: -7px;
    left: -4px;
    width: calc(100% + 12px);
    height: calc(100% + 14px);
	padding: 0;
	opacity: 0;
	overflow: hidden;
	transform: scaleY(0);
    background-color: rgba(0, 0, 0, .92);
	transition: all .15s ease-out;
}
aside#dial ul.list a.homme ul.actions {
    background-color: rgba(72, 184, 236, .92);
}
aside#dial ul.list a.femme ul.actions {
    background-color: rgba(255, 58, 137, .92);
}
aside#dial ul.list a.couple ul.actions {
	background: -moz-linear-gradient(45deg, rgba(255, 58, 137, .92) 0%, rgba(72, 184, 236, .92) 100%);
	background: -webkit-linear-gradient(45deg, rgba(255, 58, 137, .92) 0%, rgba(72, 184, 236, .92) 100%);
	background: linear-gradient(45deg, rgba(255, 58, 137, .92) 0%, rgba(72, 184, 236, .92) 100%);
}
html.no-touchevents aside#dial ul.list a.hover ul.actions, 
aside#dial ul.list a.selected ul.actions {
    opacity: 1;
	transform: scaleY(1);
}
aside#dial ul.list ul.actions li {
    display: block;
    position: absolute;
    width: calc(50% - 38px);
    height: calc(100% - 12px);
    top: 6px;
    left: 60px;
    padding-top: .08em;
	color: #fff !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 1.1em;
    border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0);
	opacity: 0;
	transform: translateX(100%);
}
aside#dial ul.list li a ul.actions li:hover {
	border: 1px solid rgba(255, 255, 255, 1);
}
aside#dial ul.list li a ul.actions li.dial {
	left: calc(50% + 27px);
}
aside#dial ul.list li a ul.actions li.dial::before {
	display: block;
	position: absolute;
	content: '';
	top: 0;
	left: -4px;
	width: 1px;
	height: 100%;
	background-color: rgba(255, 255, 255, .2);
}
aside#dial ul.list li a.selected ul.actions li {
    opacity: 1;
	transform: translateX(0);
}

aside#dial #dial-conv-btn {
	position: absolute;
	display: none;
	z-index: 1;
	bottom: 10px;
	right: -6px;
    padding: 7px 10px 7px 14px;
	font-size: .85em;
	font-weight: bold;
	border-radius: .4rem;
	color: #fff;
}
aside#dial #dial-conv-btn.hover,
html.dial-opened aside#dial #dial-conv-btn {
	bottom: 15px;
}
html.dial-opened aside#dial #dial-conv-btn {
	color: #212529;
	background-color: #fff;
}
aside#dial #dial-conv-btn::after {
	position: absolute;
	content: '';
    top: 0;
    right: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #fff transparent transparent transparent;
	transform-origin: 6px 0;
	transform: scale(0);
}
html.dial-opened aside#dial #dial-conv-btn::after {
	transform: scale(1);
}
aside#dial #dial-conv-btn .count {
	display: inline-block;
	min-width: 24px;
	height: 24px;
	text-align: center;
	line-height: 1.5rem;
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 12px;
	background-color: #fff;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
}
html.dial-opened aside#dial #dial-conv-btn .count {
	color: #fff;
}
aside#dial #dial-conv-btn + [data-simplebar] {
    max-height: calc(100% - 166px);
	min-height: 50px;
}
aside#dial #dial-conv-btn + [data-simplebar] .loader {
	z-index: 3;
}
aside#dial #dial-conv-btn + [data-simplebar] .loader .spin:after {
	background-color: #212121;
}
aside#dial #dial-conv-btn + [data-simplebar]::after {
	position: absolute;
	content: '';
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	content: '';
	background: -moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 100%);
	background: -webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 100%);
	background: linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 100%);
}
aside#dial #dial-conv-btn + [data-simplebar] ul.list {
	padding: 20px 0 30px 4px;
}

@media (max-width: 575px) {
	aside#dial #dial-conv-btn,
	aside#dial #dial-conv-btn + [data-simplebar]::after {
		display: none !important;
	}
}



/*================================ Dial (mobile) / Mode liste ================================*/

#online {
	padding: 0;
}
#online aside#dial {
	position: relative;
	width: 100%;
	background-color: transparent;
}
#online aside#dial ul.list li a .img img, 
#online aside#dial ul.list li a .img i {
	box-shadow: 6px 5px 8px rgba(0, 0, 0, 0);
}
html.no-touchevents #online aside#dial ul.list li a.hover .img img, 
html.no-touchevents #online aside#dial ul.list li a.hover .img i, 
#online aside#dial ul.list li a.selected .img img, 
#online aside#dial ul.list li a.selected .img i {
	box-shadow: 6px 5px 8px rgba(0, 0, 0, .2);
}
#online aside#dial ul.list li a .img {
	transform-origin: 0 50%;
}
html.no-touchevents #online aside#dial ul.list li a.hover .img, 
#online aside#dial ul.list li a.selected .img {
	transform: scale(2.2);
	left: 0;
}
html.no-touchevents #online aside#dial ul.list li a.hover .pseudo, 
html.no-touchevents #online aside#dial ul.list li a.selected .pseudo {
	border-top-color: transparent;
	transform: translateX(60px);
}
#online aside#dial ul.list a ul.actions li {
    left: 102px;
    width: calc(50% - 60px);
	height: 50px;
	border-radius: 6px;
	font-size: 1em;
    padding-top: .7em;
}
#online aside#dial ul.list a ul.actions li.dial {
    left: calc(50% + 49px);
}
#online aside#dial ul.list li a.selected ul.actions li.dial::before {
    left: -5px;
}


/*------------------------------- Zone titre ------------------------------*/

#membres-home #online aside#dial {
    border-top: 4px dotted rgba(0, 0, 0, .1);
	margin-top: 15px;
}
#online aside#dial h4 {
	font-size: 1.4em;
	text-align: center;
}
#online aside#dial h4 small {
	color: #8a8a8a;
}


/*-------------------------------- Filtres --------------------------------*/

#online aside#dial ul.filtres {
	position: relative;
	background-color: #f1f1f1;
    padding: 6px 15px 11px 15px;
}
#online aside#dial ul.filtres li.tri {
	margin: 4px 0 0 0;
	float: left;
}
#online aside#dial ul.filtres li.tri a {
	font-size: .9rem;
    color: inherit !important;
}
#online aside#dial ul.filtres li.tri a .selected {
	color: #5e5e5e;
}
#online aside#dial ul.filtres li.zone a i,
#online aside#dial ul.filtres li.genre a i,
#online aside#dial ul.filtres li.plus a i {
	width: 40px;
	height: 40px;
	background-size: 533px auto;
}
#online aside#dial ul.filtres li a i.arrow-bottom {
	background-position: -180px -546px;
}
#online aside#dial ul.filtres li a i.arrow-top {
	background-position: -120px -546px;
}
#online aside#dial ul.filtres li a i.dialfilter-zone {
	background-position: 0 -733px;
}
#online aside#dial ul.filtres li a i.dialfilter-genre {
	background-position: -40px -733px;
}
#online aside#dial ul.filtres li a i.dialfilter-plus {
	background-position: -80px -733px;
}
@media (max-width: 359px) {
	#online aside#dial ul.filtres {
		text-align: center !important;
	}
	#online aside#dial ul.filtres li.tri {
		width: 100%;
		clear: both;
		margin-bottom: 4px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ddd;
		text-align: center;
	}
}


/*--------------------------------- Liste ---------------------------------*/

#online aside#dial ul.list {
    height: auto;
	overflow-y: visible;
	padding-bottom: 0;
}
#online aside#dial ul.list li {
	height: 48px;
}
#online aside#dial ul.list li a {
	color: #212529;
	font-size: .95em;
}
#online aside#dial ul.list li a .dept {
	font-size: .95em;
}
#online aside#dial ul.list li a.hover {
	color: #212529;
	background-color: #f9f9f9;
}
#online aside#dial ul.list li a.hover .dept {
	color: #212529;
}
#online aside#dial ul.list li a .pseudo {
	width: calc(100% - 120px);
}
#online aside#dial ul.list li a span {
    border-top: 1px solid rgba(0, 0, 0, .08);
	padding-top: 10px;
}
#online aside#dial ul.list li a .img {
	width: 40px;
	height: 40px;
	border: 0;
	margin: 4px 8px 0 2px;
	padding: 0;
}
#online aside#dial ul.list li a .img::after {
	bottom: -1px;
	right: 2px;
	width: 8px;
	height: 8px;
	box-shadow: 0 0 0 2px #fff;
}
#online aside#dial ul.list li a img,
#online aside#dial ul.list li a .img .icon {
	width: 40px;
	height: 40px;
}
#online aside#dial ul.list li a .img .icon,
#online aside#dial ul.list li a .img .icon::after {
	background-size: 1950% auto;
}
#online aside#dial ul.list li a .img .icon.femme {
	background-color: #f35f9a;
}
#online aside#dial ul.list li a .img .icon.homme {
	background-color: #87d5f9;
}
#online aside#dial ul.list li a .img .icon.couple::before {
	background: #c189ff;
	background: -moz-radial-gradient(bottom left, ellipse cover, #f35f9a 0%, #87d5f9 75%);
	background: -webkit-radial-gradient(bottom left, ellipse cover, #f35f9a 0%, #87d5f9 75%);
	background: radial-gradient(ellipse at bottom left, #f35f9a 0%, #87d5f9 75%);
}
#online aside#dial ul.list li a .genre i {
	background-color: transparent !important;
}
#online aside#dial ul.list li a.hover .genre i {
	background-color: #f9f9f9;
}



/*=============================== Dial (mobile) / Mode grille ================================*/

/*--------------------------------- Liste ---------------------------------*/

#online.grid aside#dial ul.list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#online.grid aside#dial ul.list li {
    -webkit-box-flex: 0;
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
	height: auto;
    padding-right: 5px;
    margin-bottom: 5px;
}
#online.grid aside#dial ul.list li a .img,
#online.grid aside#dial ul.list li a img, 
#online.grid aside#dial ul.list li a .img .icon {
	z-index: 1;
    width: 100%;
	height: 100%;
    margin: 0;
	border-radius: 0 !important;
}
#online.grid aside#dial ul.list li .img {
	transform: unset !important;
}
#online.grid aside#dial ul.list li a.hover .img img,
#online.grid aside#dial ul.list li a.hover .img i {
	box-shadow: none !important;
}
#online.grid aside#dial ul.list li a .img::before {
    display: block;
    position: absolute;
	z-index: 2;
    content: '';
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
}
#online.grid aside#dial ul.list li a .img::after {
	top: 5px;
	left: 5px;
}
#online.grid aside#dial ul.list li a span.pseudo,
#online.grid aside#dial ul.list li a span.dept,
#online.grid aside#dial ul.list li a span.genre {
	position: absolute;
	display: inline-block;
	z-index: 2;
	top: inherit;
	bottom: 20px;
	left: 0;
	height: auto;
	padding: 0;
	border: 0;
	font-size: .9em;
	color: #fff;
}
#online.grid aside#dial ul.list li a.hover span.pseudo,
#online.grid aside#dial ul.list li a.hover span.dept,
#online.grid aside#dial ul.list li a.selected span.dept,
#online.grid aside#dial ul.list li a.hover span.genre {
	opacity: 0 !important;
}
#online.grid aside#dial ul.list li a span.pseudo {
	bottom: -1px;
	width: calc(100% - 20px);
	padding: 0 6px;
	transform: translateX(0) !important;
}
#online.grid aside#dial ul.list li a span.dept {
	bottom: 15px;
	left: 6px;
	font-size: .85em;
}
#online.grid aside#dial ul.list li a span.genre {
	bottom: 0;
	left: auto;
	right: 3px;
}
#online.grid aside#dial ul.list li.busy a .genre {
	opacity: 1;
}
#online.grid aside#dial ul.list a ul.actions {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#online.grid aside#dial ul.list a.hover ul.actions {
	opacity: 1;
}
#online.grid aside#dial ul.list li a ul.actions li {
    top: calc(50% - 37px);
    left: 10px;
    width: calc(100% - 20px);
    max-width: 100%;
    height: 34px;
    padding: .22em 0 0 0;
	transform: translateX(100%);
}
#online.grid aside#dial ul.list li a ul.actions li.dial {
    top: calc(50% + 2px);
}
#online.grid aside#dial ul.list li a ul.actions li.dial::before {
    top: -4px;
    left: 10px;
    width: calc(100% - 20px);
    height: 1px;
}
#online.grid aside#dial ul.list li a.hover ul.actions li {
    opacity: 1;
	transform: translateX(0);
}
@media (max-width: 575px) {
	aside#dial [data-simplebar] {
		max-height: inherit !important;
	}
}
@media (max-width: 419px) {
	#online.grid aside#dial ul.list li {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 299px) {
	#online.grid aside#dial ul.list li {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}



/*=================================== Dial / Module de chat ==================================*/

html.dial-opened, 
html.dial-opened body {
	position: fixed;
	width: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
}

#dial-container {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	padding: 30px 30px 30px 260px;
	overflow: hidden;
	opacity: 0;
	background-color: rgba(0, 0, 0, .8);
}

/*
@media (max-height: 500px) {
	#dial-container:not(.typein) {
		background-color: rgba(0, 0, 0, .80);
	}
}
*/
/* #VINCENT 20210201: désactivation temporaire */
/*
@media (max-height: 450px) {
	html:not(.xs-device):not(.forcedial) #dial-container:not(.typein) {
		background-color: rgba(0, 0, 0, .80);
	}
}
*/

/*
#dial-container .orientation-info {
	display: none;
	position: absolute;
	top: calc(50% - 35px);
	left: 0;
	width: 100%;
	font-size: .9em;
}
*/

#dial-container .orientation-info {
	display: none;
	position: relative;
	padding-top: calc(50vh - 60px);
	width: 100%;
	height: 100vh;
	font-size: .9em;
}
#dial-container .orientation-info::before {
	display: block;
	position: absolute;
	content: '';
	top: 15px;
	right: -10px;
	width: 40px;
	height: 40px;
	background-image:url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%23FFF' stroke-width='1.61' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='M10 10l20 20M10 30l20-20'/%3E%3C/svg%3E");
}

/*
@media (max-height: 450px) {
	#dial-container:not(.typein) .orientation-info {
		display: block;
	}
}
*/
/* #VINCENT 20210201: désactivation temporaire */

@media (max-height: 450px) {
	html:not(.xs-device):not(.forcedial) #dial-container:not(.typein) .orientation-info {
		display: block;
	}
}

#dial-window,
#dial-window-content {
    position: relative;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    border-radius: .7rem;
	background-color: #f3f3f3;
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
#dial-window-header, 
#dial-window-content,
#dial-window-footer {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	width: 100%;
	min-height: 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#dial-window {
	transform-origin: -130px 100%;
	transform: scale(0);
}
html.dial-opened #dial-window { 
	transform: scale(1);
}

/*
@media (max-height: 450px) {
	#dial-container:not(.typein) #dial-window,
	#dial-container:not(.typein) #dial-window .simplebar-scrollbar {
		display: none !important;
	}
}
*/
/* #VINCENT 20210201: désactivation temporaire */

@media (max-height: 450px) {
	html:not(.xs-device):not(.forcedial) #dial-container:not(.typein) #dial-window,
	html:not(.xs-device):not(.forcedial) #dial-container:not(.typein) #dial-window .simplebar-scrollbar {
		display: none !important;
	}
}

#dial-window-content .messages,
#dial-window-content .list {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	width: 100%;
	min-height: 0;
}

#dial-window-header {
	position: relative;
	min-height: 100px;
	padding: 18px 28px 10px 28px;
    border-top-left-radius: .7rem;
    border-top-right-radius: .7rem;
}
#dial-window-header img {
	display: inline-block;
	width: 64px;
	height: 64px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
}
#dial-window-header .img::after {
	box-shadow: 0 0 0 2px #f7f7f5;	
}
#dial-window-header img,
#dial-window-header .img > i {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
}
#dial-window-header .img.busy img, 
#dial-window-header .img.busy > i,
#dial-window-header .img.offline img, 
#dial-window-header .img.offline > i {
    opacity: .7;
    filter: grayscale(1);
}
#dial-window-header a.pseudo {
	width: calc(100% - 540px);
	margin-right: 40px;
}
#dial-window-header h4 {
	position: relative;
    width: calc(100% - 80px);
	margin: 14px 0 0 14px;
	font-size: 1em;
	color: #212529;
}
#dial-window-header h4 strong {
	max-width: calc(100% - 30px);
}
#dial-window-header h4 i {
	margin: -1px 0 0 3px;
}
#dial-window-header h4 em {
	position: relative;
	top: -1px;
	font-style: normal;
	font-size: .8em;
	clear: both;
	color: #808080;
}
#dial-window-header .options.plus > a {
	display: none;
	opacity: .6;
}
#dial-window-header .options.plus ul {
	width: 160px;
}
#dial-window-header .options.plus ul li {
	display: inline-block;
	position: relative;
	width: 140px;
	padding: 2px 0;
	font-size: .85em;
	line-height: 1.2em;
}
#dial-window-header .options.plus ul li a {
	text-decoration: none;
    padding: .2rem 1rem .2rem 0;
}
#dial-window-header .options.plus ul li a:hover span {
	text-decoration: underline;
}
#dial-window-header .options.plus ul li a i {
    opacity: .3;
}
#dial-window-header .options.plus ul li a:hover i {
    opacity: .6;
}
#dial-window-header .options.plus ul li span {
	display: inline-block;
	width: calc(100% - 50px);
	vertical-align: middle;
}
#dial-window-header > ul {
	padding: 0;
	margin: -6px 0 0 0;
	list-style: none;
}
#dial-window-header.busy > ul,
#dial-window-header.busy > .dropdown {
	display: none;
}
#dial-window-header > ul li {
	display: inline-block;
	margin: 0 5px;
	vertical-align: top;
}
#dial-window-header > ul li::before {
	display: block;
	position: absolute;
	content: '';
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .1);
}
#dial-window-header > ul li:hover::before {
	border: 1px solid rgba(0, 0, 0, 0);
}
#dial-window-header > ul li a {
	display: block;
	width: 52px;
	font-size: .7em;
	line-height: 1.15em;
	text-align: center;
	color: inherit;
}
#dial-window-header > ul li:hover a {
	text-decoration: none;
}
#dial-window-header > ul li a i {
	top: 6px;
	margin-bottom: 14px;
	opacity: .4;
}
#dial-window-header > ul li:hover a i {
	opacity: 1;
}
#dial-window-header > ul li.upload:hover a i {
	background-position: 0px -440px;
}
#dial-window-header > ul li.webcam:hover a i {
	background-position: -80px -280px;
}
#dial-window-header > ul li.block:hover a i {
	background-position: -200px -280px;
}
#dial-window-header > ul li.report:hover a i {
    background-position: -320px -360px;
}
#dial-window-header a.hide {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #fff;
	padding: 2px 14px 0 6px;
    border-radius: 15px;
    font-size: .75em;
    text-decoration: none;
    text-transform: uppercase;
}

#dial-window-content {
	flex: 1;
    border-radius: 0;
	border-left: 4px solid #f3f3f3;
	border-right: 4px solid #f3f3f3;
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
	align-items: stretch;
}
#dial-window-content .simplebar-content {
	overflow-x: hidden;
}

#dial-window-content .messages {
	width: 100%;
	max-width: calc(100% - 250px);
    min-height: 0;
	padding: 0 36px;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-size: .9em;
	background-color: #fff;
}
#dial-window-content .messages .simplebar-scroll-content {
    padding-right: 57px !important;
}
#dial-window-content .messages ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#dial-window-content .messages ul.offline {
	opacity: .6;
}
#dial-window-content .messages ul li {
	display: inline-block;
	width: calc(100% - 90px);
	margin: 4px 0 4px 10px;
}
#dial-window-content .messages ul lh {
	display: inline-block;
	width: 100%;
    margin-top: 14px;
	text-align: center;
}
#dial-window-content .messages ul li:first-child {
	margin-top: 30px;
}
#dial-window-content .messages ul li:last-child {
	margin-bottom: 30px;
}
#dial-window-content .messages ul li.me {
	margin-left: 80px;
}
#dial-window-content .messages ul li.webcamtxt .text {
	min-height: 34px;
    padding: 12px 20px;
    font-size: .9em;
	line-height: 1.15rem;
	color: #777 !important;
    background-color: #f3f3f3 !important;
}
#dial-window-content .messages ul li.webcamtxt.hasicon .text {
    padding: 12px 20px 12px 44px;
}
#dial-window-content .messages ul li.webcamtxt .text i {
	position: absolute;
    top: 6px;
    left: 14px;
}
#dial-window-content .messages ul li.me + li:not(.me),
#dial-window-content .messages ul li:not(.me) + li.me {
	margin-top: 10px;
}
#dial-window-content .messages ul li.fresh,
#dial-window-content .messages .webcam.fresh {
	transform-origin: top left;
	animation: Showmessage .3s;
}
#dial-window-content .messages .webcam.fresh {
	transform-origin: bottom center;
}
#dial-window-content .messages ul li.me.fresh {
	transform-origin: top right;
}





/* 29/06/2025 16:26:44 mantis687 DEBUT nouveau pour dial selon mail jerome 17/06/2025  */
#dial-window-content .messages ul li.bot .text {
    background-color: transparent !important;
    border: 2px dashed #aaa !important;
	padding: 24px 40px;
	font-style: italic;
}
#dial-window-content .messages ul li.bot .text h6 strong {
	color: #ff9561;
}
#dial-window-content .messages ul li.bot .text .btn {
	font-style: normal;
}
#dial-window-content .messages ul li.bot i.zapping {
	filter: invert(30%) sepia(100%) hue-rotate(1deg) saturate(37);
}
#dial-window-content .messages ul li.bot i.aide, 
#dial-window-content .messages ul li.bot i.valid-round {
    position: absolute;
    top: 7px;
    left: 19px;
	transform: scale(.6);
}
#dial-window-content .messages ul li.bot i.aide {
	transform: scale(.8);
	filter: invert(30%) sepia(100%) hue-rotate(192deg) saturate(20) brightness(.8);
}
#dial-window-content .messages ul li.bot:has(.valid-round) i.zapping {
	filter: invert(30%) sepia(100%) hue-rotate(83deg) saturate(1.5) brightness(.8);
	opacity: .8;
}
/* 29/06/2025 16:26:44 mantis687 FIN   nouveau pour dial selon mail jerome 17/06/2025  */
















#dial-window-content .messages ul li span {
	display: inline-block;
}
#dial-window-content .messages ul li .text {
	position: relative;
	min-width: 70px;
	min-height: 54px;
	background-color: #dfdfdf;
	padding: 18px 26px;
	margin: 0 0 2px 0;
	border-radius: .7rem;
	float: left;
}
#dial-window-content .messages ul li span span {
	color: #fff !important;
	background-color: transparent !important;
}
#dial-window-content .messages ul li span .text-secondary span {
	color:  #36c2e0 !important;
}
#dial-window-content .messages ul li.me .text {
	color: #fff;
	float: right;
}
#dial-window-content .messages ul li .text a.img {
	display: block;
	margin: 6px 0;
    text-align: center;
}
#dial-window-content .messages ul li .text img:not(.smiley) {
	width: 200px;
	height: auto;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#dial-window-content .messages ul .date {
	display: block;
	clear: both;
}
#dial-window-content .messages ul li.me .date {
	text-align: right;
}
#dial-window-content .messages ul li i.smiley,
#dial-window-footer #dialmessage i.smiley {
    margin-top: -2px;
}
/* old 29/06/2025 16:34:22 mantis687 dial #dial-window-content .messages ul li:not(.me) .text::before {   */
#dial-window-content .messages ul li:not(.me):not(.bot) .text::before {
	position: absolute;
	content: '';
	top: 23px;
	left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 0;
	border-color: transparent #dedede transparent transparent;
}
#dial-window-content .messages ul li.webcamtxt .text::before {
	top: 17px;
	border-color: transparent #f2f2f2 transparent transparent;
}
#dial-window-content .messages ul li.me.error .text {
	background-color: #fd5050;
	font-style: italic !important;
	
}
#dial-window-content .messages ul .date {
	color: #a4a4a4;
	font-size: .8em;
}
#dial-window-content .messages .webcam {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 100px 20px 20px 20px;
	color: #fff;
	text-align: center;
    background: -moz-linear-gradient(top, rgba(50,50,50,0) 0%, rgba(50,50,50,.9) 50%, rgba(50,50,50,.9) 100%);
    background: -webkit-linear-gradient(top, rgba(50,50,50,0) 0%, rgba(50,50,50,.9) 50%, rgba(50,50,50,.9) 100%);
    background: linear-gradient(to bottom, rgba(50,50,50,0) 0%, rgba(50,50,50,.9) 50%, rgba(50,50,50,.9) 100%);
}
#dial-window-content .messages .webcam i.webcamreq {
	top: -2px;
    left: -2px;
}
#dial-window-content .messages .webcam ul li {
	display: inline-block;
	width: auto;
	margin: 4px 5px;
}
#dial-window-content .messages .webcam ul li .badge {
	font-weight: normal;
}
#dial-window-content .messages .webcam ul li .badge span {
	display: block;
}
	
#dial-window-content .list {
	position: relative;
	max-width: 250px;
	box-shadow: inset 3px 0 0 0 rgba(0, 0, 0, .05);
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	background-color: #e6e6e6;
	overflow-x: hidden;
}
#dial-window-content .list .loader .spin:after {
	background-color: #e6e6e6;
}
#dial-window-content .list h5 {
	font-size: 1em;
	margin: 34px 10px 14px 20px;
	overflow: hidden;
}
#dial-window-content .list a.toggle {
	position: absolute;
	display: inline-block;
	z-index: 9;
	width: 100%;
	padding-top: 6px;
	padding-bottom: 4px;
	box-shadow: inset 3px 0 0 0 rgba(0, 0, 0, .05);
	background-color: #e6e6e6;
}
#dial-window-content .list a.toggle i {
	margin-left: 8px;
	opacity: .5;
}
#dial-window-content .list ul {
	width: 250px;
	list-style: none;
	margin: 0;
	padding: 0 6px 15px 0;
}
#dial-window-content .list ul li {
	position: relative;
	height: 38px;
	overflow: hidden;
}
#dial-window-content .list ul li.active {
    width: calc(100% + 3px);
	left: -3px;
	padding-left: 3px;
	background-color: #fff;
	box-shadow: 1px 2px 0 rgba(0, 0, 0, .1);
}
#dial-window-content .list ul li.hidden {
	height: 0;
}
#dial-window-content .list ul li.webcam::after {
	position: absolute;
	top: 10px;
	right: 33px;
	content: '';
	width: 17px;
	height: 17px;
	border-radius: 50%;
	cursor: pointer;
	background-position: -33px -33px;
	background-size: 133px auto;
	box-shadow: 0 0 0 3px #aaa;
	background-color: #aaa;
	transform: scale(.75);
}
#dial-window-content .list ul li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: #6e6e6e;
	font-size: .8em;
	font-weight: 600;
	line-height: 1.6rem;
}
#dial-window-content .list ul li.unread a,
#dial-window-content .list ul li.active a {
	color: inherit;
}
#dial-window-content .list ul li:not(.active) a:hover {
	text-decoration: none;
	color: inherit;
	background-color: #dadada;
}
#dial-window-content .list ul li.offline a {
    opacity: .6;
}
#dial-window-content .list ul li:not(.active).offline a {
    background-color: rgba(0, 0, 0, .1);
}
#dial-window-content .list ul li a span {
	display: block;
	height: 100%;
	padding: 0;
	float: left;
	border-top: 1px solid rgba(0, 0, 0, .06);
}
#dial-window-content .list ul li:not(.unread):first-child a span {
	border: 0;
}
#dial-window-content .list ul li.active a span,
#dial-window-content .list ul li.active + li a span {
	border-top: 1px solid transparent;
}
#dial-window-content .list ul li.active.offline a span {
	opacity: .7;
}
#dial-window-content .list ul li a .img {
	width: 27px;
	height: 27px;
	padding: 0;
	margin: 5px 12px 0 20px;
	border-top: 1px solid transparent;
}
#dial-window-content .list ul li.busy .img img,
#dial-window-content .list ul li.busy .img .icon,
#dial-window-content .list ul li.offline .img img,
#dial-window-content .list ul li.offline .img .icon {
	opacity: .7;
	filter: grayscale(1);
}
#dial-window-content .list ul li.offline .img img,
#dial-window-content .list ul li.offline .img .icon {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
}
#dial-window-content .list ul li a .img::after {
    right: 0;
    width: 6px;
    height: 6px;
	box-shadow: 0 0 0 1px #fff;
}
#dial-window-content .list ul li a img {
	display: inline-block;
	width: 27px;
	height: 27px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
}
#dial-window-content .list ul li a .img .icon,
#dial-window-content .list ul li a .img img {
	width: 27px;
	height: 27px;
	box-shadow: 0 0 0 2px #fff;
}
#dial-window-content .list ul li.active a .img .icon,
#dial-window-content .list ul li.active a .img img {
	box-shadow: 0 0 0 2px #e8e8e8;
}
#dial-window-content .list ul li a .img .icon,
#dial-window-content .list ul li a .img .icon.couple::after {
	padding-bottom: 100%;
	background-size: 520px auto;
}
#dial-window-content .list ul li a .pseudo {
	width: calc(100% - 66px);
	padding: 6px 30px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#dial-window-content .list ul li.webcam a .pseudo {
	padding-right: 50px;
}
#dial-window-content .list ul li a .genre,
#dial-window-content .list ul li a .age,
#dial-window-content .list ul li a .dept {
	display: none;
}
#dial-window-content .list ul li a .count {
	display: inline-block;
	position: absolute;
    top: 4px;
    right: 191px;
	min-width: 13px;
	height: 13px;
	padding: 1px 2px;
	font-size: .8em;
	line-height: .95em;
	color: #fff;
	text-align: center;
	border-radius: 8px;
}
#dial-window-content .list ul li a.remove {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
	float: right;
	text-align: center;
	background-color: transparent !important;
}
#dial-window-content .list ul li a.remove i {
	width: 20px;
	height: 20px;
	margin-top: 9px;
	background-size: 200px auto;
    background-position: -120px -120px;
}

#dial-window-footer {
	min-height: 180px;
	padding: 24px 0 16px 32px;
    border-bottom-left-radius: .7rem;
    border-bottom-right-radius: .7rem;
	background-color: #f3f3f3;
}
#dial-window-footer .card {
    -ms-flex-direction: row;
    flex-direction: row;
}
#dial-window-footer .card-body {
	max-width: calc(100% - 180px);
}
#dial-window-footer .card-img img {
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
}
#dial-window-footer .card-img img,
#dial-window-footer .card-img i {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
}
#dial-window-footer h5 {
	font-size: 1.1em;
	margin-bottom: .5em;
	float: left;
}
#dial-window-footer h5.text-truncate {
    max-width: calc(100% - 120px);
	height: 20px;
    margin-top: 4px;
}
#dial-window-footer form {
	width: 100%;
}
#dial-window-footer p {
	position: relative;
	max-width: 100%;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
	padding: 16px 18px 12px 18px;
	clear: both;
	float: none;
    line-height: 0;
}
#dial-window-footer span.textarea {
	width: calc(100% - 30px);
	min-height: 24px;
}
#dial-window-footer p strong.info {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: .8em;
}
#dial-window-footer p strong.info i {
	margin-top: -2px;
}
#dial-window-footer p span.actions {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -15px;
}
#dial-window-footer p span.actions a {
	opacity: .4;
}
#dial-window-footer p span.actions a:hover {
	opacity: 1;
}
#dial-window-footer fieldset label {
	font-size: .9em;
}
#dial-window-footer fieldset .btn i.remove {
	opacity: .6;
}
#dial-window-footer .card-img {
    width: 200px;
    border: 0;
}
#dial-window-footer .card-img h5 {
	font-size: 1em;
}

@media (max-width: 1439px) {
	#dial-window-header a.pseudo {
		width: calc(100% - 510px);
	}
	#dial-window-content .messages {
		max-width: calc(100% - 220px);
	}
	#dial-window-content .list {
		max-width: 220px;
	}
	#dial-window-content .list ul {
		width: 220px;
	}
	#dial-window-content .list ul li a .count {
		right: 161px;
	}
}
@media (max-width: 1199px) {
	#dial-window-header a.pseudo {
		width: calc(100% - 400px);
	}
}
@media (max-width: 1023px) {
	#dial-container {
		padding-left: 30px;
	}
	#dial-window {
		transform-origin: 80px 100%;
	}
	#dial-window-content {
		border-right: 0;
	}
	#dial-window-content .messages {
	    padding: 0 20px;
	}
	#dial-window-footer .card-img {
		width: 170px;
	}
}
@media (max-width: 767px) {
	#dial-window-header a.pseudo {
		width: calc(100% - 320px);
	}
	#dial-window-header a.hide {
		font-size: 0;
		padding: 0 0 0 0;
	}
	#dial-window-content {
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	#dial-window-content .messages {
		position: absolute;
		left: 0;
		max-width: calc(100% - 46px);
		height: 100%;
	}
	#dial-window-content .list ul li.webcam::after {
		top: 20px;
		left: 6px;		
		transform: scale(.65);
	}
	#dial-window-content.list-expanded .list ul li.webcam::after {
		left: 18px;
	}
	#dial-window-content.list-expanded .messages {
		opacity: .2;
	}
	#dial-window-content:not(.list-expanded) .list {
		max-width: 46px;
		padding-top: 0;
	}
	#dial-window-content .list [data-simplebar] {
		margin-top: 40px;
		height: calc(100% - 40px);
	}
	#dial-window-content .list .simplebar-content {
		padding-bottom: 0 !important;
	}
	#dial-window-content .list h5 {
		margin-top: 0;
	}
	#dial-window-content .list h5 strong {
		display: block;
	}
	#dial-window-content .list h5 {
		display: none;
	}
	#dial-window-content:not(.list-expanded) .list ul {
		width: 46px;
		padding-right: 0;
	}
	#dial-window-content:not(.list-expanded) .list ul li a .img {
		margin-left: 8px;
	}
	#dial-window-content:not(.list-expanded) .list ul li a .pseudo,
	#dial-window-content:not(.list-expanded) .list ul li a.remove {
		display: none;
	}
	#dial-window-content:not(.list-expanded) .list ul li a .count {
		top: 3px;
		right: 2px;
	}
	#dial-window-footer {
		padding: 24px 16px 16px 16px;
	}
	#dial-window-footer .card-body {
		max-width: 100%;
	}
}
@media (max-width: 649px) {
	#dial-window-header a.pseudo {
		width: calc(100% - 230px);
	}
	#dial-window-header .options.plus > a {
		display: inline-block;
		position: absolute;
	}
	#dial-window-header > ul li.block,
	#dial-window-header > ul li.report {
		display: none;
	}
}
@media (max-width: 575px) {
	#dial-container {
		padding: 10px;
	}
	#dial-window {
		transform-origin: 10px 180px;
	}
	#dial-window-header {
	    min-height: 64px;
		padding: 12px 16px 10px 16px;
	}
	#dial-window-header a.pseudo {
		width: calc(100% - 130px);
		margin-right: 20px;
	}
	#dial-window-header img {
		width: 42px;
		height: 42px;
	}
	#dial-window-header .img > i,
	#dial-window-header .img > i::after {
		width: 42px;
		height: 42px;
		background-size: 800px auto;
	}
	#dial-window-header img, 
	#dial-window-header .img > i {
		box-shadow: 0 0 0 3px rgba(0, 0, 0, .1);
	}
	#dial-window-header .img::after {
		bottom: 0;
		right: 0;
		width: 9px;
		height: 9px;
	}
	#dial-window-header h4 {
		width: calc(100% - 60px);
		margin: 5px 0 0 12px;
		font-size: .95em;
	}
	#dial-window-header h4 strong {
    	max-width: 100%;
	}
	#dial-window-header h4 i {
		display: none !important;
	}
	#dial-window-header h4 em {
		top: 2px;
	}
	#dial-window-header > ul li {
		margin: 0;
		font-size: 0;
	}
	#dial-window-header > ul li::before {
		display: none;
	}
	#dial-window-header > ul li.upload:hover a i {
		background-position: 0 -480px;
	}
	#dial-window-header > ul li.webcam,
	#dial-window-header > ul li.block,
	#dial-window-header > ul li.report {
		display: none;
	}
	#dial-window-header > ul li a {
		width: auto;
	}
	#dial-window-content .messages {
	    padding: 0 10px;
	}
	#dial-window-content .messages ul li {
		width: calc(100% - 40px);
	}
	#dial-window-content .messages ul li .text .sexy {
		width: 125px;
		height: 125px;
		background-size: auto 500px;
	}
	#dial-window-content .messages ul li.me {
		margin-left: 30px;
	}
	#dial-window-content .messages ul li .text {
		min-width: 58px;
		min-height: 44px;
	    padding: 10px 18px;
	}
	#dial-window-content .messages ul li .text img:not(.smiley) {
		width: 160px;
	}
	#dial-window-content .messages .webcam {
		padding-top: 140px;
	}
	#dial-window-content .messages .webcam ul li {
		width: 100%;
	}
	#dial-window-content .messages .webcam ul li .badge span {
		display: inline-block;
	}
	#dial-window-footer {
		min-height: 104px;
		padding: 14px 16px 12px 16px;
	}
	#dial-window-footer h5 {
		font-size: .95em;
	}
	#dial-window-footer p {
		max-width: calc(100% - 6px);
		padding: 8px 12px 4px 12px;
		margin-bottom: 12px !important;
	}
	#dial-window-footer p strong.info {
		top: 5px;
		left: 14px;
	}
	#dial-window-footer #btn-skip {
		display: none;
	}
}




/*
  ==============================================================================================
  ---------------------------------------- Volet droite ----------------------------------------
  ==============================================================================================
*/

.container.hassearchpanel {
	padding-right: 10px;
}
#searchsidebar {
	display: none;
	position: relative;
	z-index: 20;
	padding: 0;
	margin: -26px 5px 0 30px;
	max-width: 0;
	flex: 0;
	background-color: #eaeaea;
	box-shadow: 0 52px 0 #eaeaea;
	transition: max-width .3s, flex .3s;
}
#searchsidebar.overlay {
	z-index: 99999;
	position: absolute;
	right: -16px;
	height: 100%;
    background-clip: content-box;
}
body.sidebar-expanded #searchsidebar {
	max-width: calc(100% + 22px);
	flex: 0 0 280px;
}
#searchsidebar > div {
	position: relative;
	top: 0;
	display: block;
	width: 270px;
	overflow: hidden;
	padding: 40px 25px 0 25px;
}
#searchsidebar.overlay.fixed > div {
	min-height: 100px;
}
body.sidebar-expanded #searchsidebar > div {
	overflow-y: auto;
}
#searchsidebar > div a.toggle {
	position: relative;
	left: -8px;
	opacity: .4;
}
#searchsidebar > div a.toggle:hover {
	opacity: .8;
}
#searchsidebar a#embedtoggle,
#searchsidebar a#embedtoggle::before,
#searchsidebar a#embedtoggle i {
	display: block;
	position: absolute;
	content: '';
	width: 38px;
	height: 38px;
}
#searchsidebar a#embedtoggle {
	height: 100%;
	z-index: 1;
	top: 107px;
	left: -39px;
	overflow: hidden;
	transition: left .3s .3s;
}
body.sidebar-expanded #searchsidebar a#embedtoggle {
	left: -20px;
	transition: left .3s;
}
body:not(.sidebar-expanded) #searchsidebar a#embedtoggle.hide::before,
body:not(.sidebar-expanded) #searchsidebar a#embedtoggle.hide i {
	transform: scale(0);
}
#searchsidebar a#embedtoggle::before {
	border-radius: 50%;
	border: 2px solid #eaeaea;
	background-color: #aaa;
	width: 37px;
	height: 37px;
}
#searchsidebar a#embedtoggle i {
    left: 2px;
	width: 30px;
	height: 30px;
	margin-top: 3px;
	border-radius: 50%;
}
body.sidebar-expanded #searchsidebar a#embedtoggle i {
	margin-top: 4px;
    background-position: -330px -520px;
}

#searchsidebar h5 {
	margin-top: 2em;
    margin-bottom: .8rem;
	line-height: 1.3em;
	font-size: 1.1em;
}
#searchsidebar form {
	font-size: .9em;
}
#searchsidebar .form-control {
	margin-bottom: 10px;
}
#searchsidebar #search-pseudo input {
	width: calc(100% - 46px);
}
#searchsidebar #search-pseudo button {
	width: 34px;
	height: 34px;
	padding: 0;
}
#searchsidebar #search-pseudo button .icon {
	top: 2px;
	left: 1px;
	transform: none;
}
#searchsidebar #search-filter fieldset {
	font-size: .95em;
}
#searchsidebar #search-filter fieldset .form-check {
	padding-left: 0;
}
#searchsidebar #search-filter fieldset select {
	width: 120px;
	margin-left: 26px;
}
@media (max-width: 1024px) {
	.container.hassearchpanel {
		padding-right: 26px;
	}
	#searchsidebar {
		position: absolute;
		right: -16px;
		max-width: 100%;
		flex: 280px;
		height: 100%;
		transform: translateX(100%);
		transition: transform .3s;
	}
	body.sidebar-expanded #searchsidebar {
		transform: translateX(0);
	}
	.touch #searchsidebar > div,
	.touch #searchsidebar a#embedtoggle,
	.touch body.sidebar-expanded #searchsidebar a#embedtoggle {
		transition: transform .3s;
	}
	#searchsidebar a#embedtoggle {
		left: -40px;
	}
}
@media (max-width: 575px) {
	#searchsidebar > div {
		width: 100%;
		max-width: 280px;
	}
}




/*
  ==============================================================================================
  -------------------------------------------- Page --------------------------------------------
  ==============================================================================================
*/

/*------------------------------ Généralités ------------------------------*/

#page {
	position: relative;
	z-index: 100;
	padding-top: 234px;
	width: 100%;
	overflow-x: hidden;
	min-height: calc(100% - 114px);
}
#page.hasdropdown {
	z-index: 910;
}
#page .block-full {
	overflow: visible !important;
}
#page.hasdropdown .block-full {
    padding-bottom: 200px;
}
#page.hasdropdown .block-full .container {
	overflow: visible;
}
#page .block-full h2, 
#page .block-full h3 {
	color: #7b7b7b;
}
#page .block-full h2 strong,
#page .block-full h3 strong {
	font-weight: 700;
	color: #212121;
}
#page .subtitle {
	font-size: 1.3em;
	line-height: 1em;
	letter-spacing: -.02em;
	color: #7b7b7b !important;
}
@media (max-width: 649px) {
	#page .subtitle {
		font-size: 1.1em;
	}
}
@media (max-width: 575px) {
	#page {
		padding-top: 130px;
	}
}


/*-------------------- Liste des connectés (mode slide) -------------------*/

@media (max-width: 575px) {
	#page {
		overflow-x: hidden;
	}
	#page.showonline {
		overflow-x: visible;
		transform: translateX(-100%);
	}
	#page .hassearchpanel {
		height: auto;
	}
	#page.showonline .hassearchpanel {
		height: 0;
	}
	#page #online-sidepanel {
		position: absolute;
		top: 130px;
		width: 100%;
		transform: translateX(100%);
	}
	#page.showonline #online-sidepanel {
		position: absolute;
		top: 130px;
		width: 100%;
	}
	#page #online-sidepanel #online aside#dial {
		padding-top: 0;
		height: 0;
	}
	#page.showonline #online-sidepanel #online aside#dial {
		height: auto;
	}
	#page #online-sidepanel #online aside#dial #dial-closer {
		display: block;
		position: absolute;
		top: -10px;
		right: 0;
		clear: both;
	}
	#page.showonline + footer {
		display: none;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Homepage ------------------------------------------
  ==============================================================================================
*/

/*------------------------------ Généralités ------------------------------*/

#membres-home .container,
#annonces-home .container {
	box-shadow: 1px 3px 0 rgba(0, 0, 0, .08);
	overflow: visible;
}
#membres-home {
	overflow: visible !important;
}


/*-------------------------------- Profil ---------------------------------*/

#profil-home {
	margin-top: -46px;
}
#profil-home .card a {
	color: #212529;
	text-decoration: none;
}
#profil-home .card-title,
#profil-home .card-body {
	padding: 0;
	margin: 0;
}
#profil-home .card-title img,
#profil-home .card-title i {
	width: 140px;
	height: 140px;
	margin-bottom: 16px;
	border: 0;
	overflow: hidden;
	box-shadow: 0 0 0 5px #ececec,
				0 2px 0 5px rgba(0, 0, 0, .14);
}
#profil-home .card i.neutral {
	box-shadow: 0 0 0 5px #eee,
				0 2px 0 5px rgba(0, 0, 0, .08);
}
#profil-home .card img {
	background-position: center center;
	background-size: cover;
}
#profil-home h5 {
	font-size: 1.15em;
	width: 100%;
}
#profil-home h5 em {
	font-size: .8em;
	font-style: normal;
}
#profil-home .alert {
	font-size: .7em;
	line-height: 1.3em;
}
#profil-home .alert::before {
	display: block;
	position: absolute;
	content: '';
	top: -5px;
	left: 50%;
	margin-left: -2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 5px 5px;
}
#profil-home .alert a:not(.btn) {
	color: #fff;
}
#profil-home p a:not(.btn) {
	text-decoration: underline;
}
#profil-home p a.btn {
	line-height: 1.2;
	white-space: normal;
}
#profil-home .card-body p {
	font-size: .8em;
}
#profil-home .card-body .btn {
	display: block;
}
#profil-home .card-body .alert .btn {
	width: auto;
}
#profil-home .card-body .alert-danger i {
	top: -1px;
}
@media (max-width: 991px) {
	#profil-home .card {
		-ms-flex-direction: row;
			flex-direction: row;
	}
	#profil-home .alert::before {
		display: none;
	}
	#profil-home h5 {
		display: inline-block;
	}
	#profil-home .card-body {
		padding: 60px 20px 0 40px;
	}
	#profil-home .card-body .btn {
		display: inline-block;
		width: 240px;
	}
}
@media (max-width: 767px) {
	#profil-home .card {
		-ms-flex-direction: column;
			flex-direction: column;
	}
	#profil-home .card img,
	#profil-home .card-title i,
	#profil-home .card-title i::after {
		display: inline-block;
		width: 100px;
		height: 100px;
	}
	#profil-home .card-title i,
	#profil-home .card-title i::after {
		left: 0;
		background-size: 1910px auto;
	}
	#profil-home .card-title {
		width: 100%;
	}
	#profil-home h5 {
		display: block;
	}
	#profil-home .card-body {
		padding: 0;
	}
}
@media (max-width: 575px) {
	#profil-home .card-body .btn {
		width: 100%;
		font-size: 0;
	}
	#profil-home .card-body .btn strong {
		font-size: 14px;
	}
}


/*------------------------- Membres sélectionnés --------------------------*/

#selection-home {
    padding-left: 40px;
	border-left: 4px dotted rgba(0, 0, 0, .1);
}
#selection-home div[class*="col-6"] {
	padding-right: 10px;
	margin-bottom: 10px;
}
#selection-home .card {
	height: 100%;
	overflow: hidden;
}
#selection-home .card::before {
    display: block;
    position: absolute;
	z-index: 1;
    content: '';
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
}
#selection-home img {
	display: inline-block;
	position: relative;
	width: 100%;
	height: auto;
	max-height: 200px;
    margin: 0 auto;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
	transform: scale(1);
}
#selection-home a:hover img {
	transform: scale(1.1);
}
#selection-home .card-title {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	margin: 0;
}
#selection-home .card-title h5 {
	width: 100%;
	font-size: 1em;
	margin: 0;
	padding: 0 8px 4px 8px;
}
#selection-home .card-title h5 strong {
    max-width: calc(100% - 22px);
}
#selection-home .card-title h5 i {
	top: -1px;
	left: 3px;
}
#selection-home .card-title h5 em {
	position: relative;
	top: -3px;
	clear: both;
	font-size: .8em;
	font-style: normal;
}
#selection-home .card-title h5 em span {
	color: #b6b6b6;
}
@media (max-width: 991px) {
	#selection-home {
		margin-top: 16px;
		padding-top: 20px;
		padding-left: 26px;
		border-top: 4px dotted rgba(0, 0, 0, .1);
		border-left: 0;
	}
}
@media (max-width: 349px) {
	#selection-home div[class*="col-6"] {
		flex: 0 0 100%;
	    max-width: 100%;
	}
}


/*----------------------------- Autres membres ----------------------------*/

#trombi-home {
	position: relative;
}

@media (max-width: 767px) {
	#trombi-home .col-12.text-right {
		text-align: center !important;
	}
	#trombi-home .col-12.text-right a {
		margin-left: 0 !important;
	}	
}


/*-------------------------------- Webcams --------------------------------*/

#webcams-home .card .img,
#webcams-home .card img {
    width: 100%;
	height: auto;
    max-height: 238px;
    margin: 0;
	overflow: hidden;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 0 !important;
}
#webcams-home .card .img {
	outline: 3px solid rgba(255, 255, 255, .5);
	background-color: rgba(255, 255, 255, .5);

}
#webcams-home .card .img video {
    position: absolute;
    z-index: 7;
	top: 0;
	left: 0;
    width: 100%;
    height: 100%;
}
#webcams-home h5 {
    position: relative;
    width: 100%;
    margin-top: 14px;
    font-size: .8em;
    text-align: center;
    line-height: 1.2em;
}
#webcams-home h5::before {
	display: block;
	position: absolute;
	content: '';
	z-index: 8;
	top: -5px;
	left: calc(50% - 5px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 5px 5px;
}
#webcams-home h5 > span {
	position: relative;
	z-index: 8;
	padding-left: 54px !important;
	max-width: 100%;
	border-radius: .5rem;
}
#webcams-home h5 i {
	position: absolute;
	top: 3px;
	left: 4px;
}
#webcams-home h5 i::after {
	display: block;
	position: absolute;
	content: '';
	top: 4px;
	right: 0;
	width: 1px;
	height: calc(100% - 8px);
	opacity: .08;
	background-color: #000;
}
#webcams-home h5 .text-truncate {
	max-width: 100%;
}
#webcams-home h5 strong {
	font-size: 1.2em;
}
#webcams-home h5 em {
	font-style: normal;
}
@media (max-width: 767px) {
	#webcams-home h5 > span {
		padding: 4px 8px !important;
		text-align: center !important;
	}
	#webcams-home h5 i {
		display: none;
	}
	#webcams-home .col-12.text-right {
		text-align: center !important;
	}
}



/*------------------------------- Annonces --------------------------------*/

#annonces-home .card {
	height: 100%;
}
#annonces-home img:not(.smiley) {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 200px;
    margin: 0 auto;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
	box-shadow: 0 0 0 8px rgba(180, 180, 180, .12),
				inset 0 0 0 8px rgba(255, 255, 255, .2);
	transform: scale(1);
}
#annonces-home a:hover img:not(.smiley) {
	transform: scale(1.05);
}
#annonces-home h5 {
	font-size: 1.2em;
}
#annonces-home h5 i {
	margin-top: -2px;
}
#annonces-home h5 em {
	width: 100%;
	font-size: .8em;
	font-style: normal;
}
#annonces-home h5 span {
	display: inline-block;
	max-width: calc(100% - 45px);
	height: 20px;
	vertical-align: bottom;
}
#annonces-home .card-body {
	margin-top: -25px;
	padding-top: 40px;
	border-radius: .45rem;
	font-size: .85em;
}
#annonces-home .card-body > span {
	position: relative;
	font-size: .95em;
	padding: 7px 14px;
	margin: -2px 0 16px 0;
	border-radius: .4rem;
}
#annonces-home .card-body > span::before {
	display: block;
	position: absolute;
	content: '';
	top: -5px;
	left: calc(50% - 5px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 5px 5px;
}
#annonces-home .card-body > em {
	position: relative;
	font-style: normal;
	font-size: .95em;
}
#annonces-home .card-body > em::before {
	display: block;
	position: absolute;
	content: '';
	top: -8px;
	left: calc(50% - 37px);
	width: 74px;
	height: 1px;
	opacity: .16;
	background-color: #fff;
}
@media (max-width: 767px) {
	#annonces-home .col-12.text-right {
		text-align: center !important;
	}
}
@media (max-width: 425px) {
	#annonces-home img:not(.smiley) {
		width: 140px;
		height: 140px;
	}
}


/*-------------------------------- Forums ---------------------------------*/

#forums-home h5 {
	font-size: .95em;
	margin-bottom: 1rem;
}
#forums-home .thread .card {
	margin-bottom: 30px;
}
#forums-home .thread .card-img {
	border-left: 4px dotted rgba(255, 255, 255, .2);
}
#forums-home .thread .card-img h6 i {
	top: -4px;
}
#forums-home .thread .card-body em {
	top: -23px;
}

@media (max-width: 767px) {
	#forums-home .container {
		padding: 26px 10px;
	}
	#forums-home h5 {
		margin-bottom: .6rem;
	}
	#forums-home .thread .card-body em {
		top: inherit;
	}
	#forums-home .col-12.text-right {
		text-align: center !important;
	}
}


/*-------------------------------- Profils --------------------------------*/

#profils-home {
	border-top: 3px solid rgba(0, 0, 0, .08);
}
#profils-home a.card {
	color: #212529;
	text-decoration: none;
}
#profils-home [class*='col-12']:not(:nth-last-of-type(2)) .card {
	height: 100%;
	border-right: 4px dotted rgba(0, 0, 0, .1);
}
#profils-home .card-title img {
	display: inline-block;
	width: 64px;
	height: 64px;
	border: 0;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
}
#profils-home .card-title img,
#profils-home .card-title > .img > i {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}
#profils-home .card-title h5 {
	position: relative;
	width: calc(100% - 80px);
	margin: 14px 0 0 14px;
	font-size: 1em;
}
#profils-home .card-title h5 strong {
	max-width: calc(100% - 30px);
}
#profils-home .card-title h5 i {
	margin: -1px 0 0 3px;
}
#profils-home .card-title h5 em {
	position: relative;
	top: -1px;
	font-style: normal;
	font-size: .8em;
	clear: both;
}
#profils-home .card-body {
	padding-left: 12px;
}
#profils-home .card-body,
#profils-home .card-body blockquote {
	padding-bottom: 0;
	margin-bottom: 0;
}
@media (max-width: 991px) {
	#profils-home [class*='col-12']:nth-last-of-type(3) .card {
		border: 0 !important;
	}
}
@media (max-width: 767px) {
	#profils-home .container {
		padding: 26px 10px;
	}
	#profils-home [class*='col-12']:not(:nth-last-of-type(2)) .card {
		height: auto;
		border-right: 0;
		border-bottom: 4px dotted rgba(0, 0, 0, .1);
	}
	#profils-home .card-body {
		padding-top: 0;
		padding-bottom: 1.25em;
	}
	#profils-home .col-12.text-right {
		text-align: center !important;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Annuaire ------------------------------------------
  ==============================================================================================
*/

/*----------------------------- Tête de liste -----------------------------*/

.listhead .numresults {
	font-size: .95em;
	line-height: 1.1rem;
	overflow: hidden;
	min-height: 49px;
}
.listhead .numresults a.exttoggle {
	position: absolute;
	top: 15px;
	right: 35px;
	padding-left: 29px;
	text-align: left;
	font-size: .9em;
}
.listhead .numresults a:hover.exttoggle {
	color: inherit;
}
.listhead .numresults a.exttoggle i {
	position: absolute;
	top: -5px;
	left: 0;
	opacity: .4;
}
.listhead .numresults a:hover.exttoggle i {
	opacity: .8;
}
.listhead .numresults a.exttoggle.hide {
	transform: translateX(150%);
}
.listhead .filters:not(.float-right) {
	padding-bottom: 10px;
}
.listhead .filters h5 {
	position: relative;
	margin-bottom: 6px;
	font-size: .9em;
	font-weight: bold;
}
.listhead .filters h5 a {
	display: inline-block;
	width: 100%;
	text-decoration: none !important;
}
.listhead .filters h5 .count {
	position: relative;
	top: -1px;
	min-width: 15px;
	padding: 2px 4px;
	margin-left: 2px;
	font-size: .75em;
	border-radius: 7px;
}
.listhead .filters h5 i {
	position: absolute;
	top: -7px; 
	right: -10px;
	opacity: .4;
}
.listhead .filters h5:hover i {
	opacity: 1;
}
.listhead .filters h5 a[aria-expanded="true"] i {
	background-position: -30px -610px;
}
.listhead .filters ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: .8em;
	line-height: 1.2em;
}
.listhead .filters ul li:not(.reset) {
	display: inline-block;
	position: relative;
	padding: 4px 22px 3px 8px;
	margin: 0 1px 5px 0;
	border-radius: 5px;
	background-color: #eee;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.listhead .filters.bg-light ul li:not(.reset) {
	background-color: #fff;
}
.listhead .filters ul li:not(.reset) strong {
	font-size: .9em;
	color: #999;
}
.listhead .filters ul li:not(.reset) a {
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	width: 23px;
	height: 23px;
	opacity: .4;
	text-align: center;
	line-height: 0;
}
.listhead .filters ul li:not(.reset) a:hover {
	opacity: 1;
}
.listhead .filters ul li:not(.reset) a i {
	top: 7px;
	width: 9px;
	height: 9px;
	background-position: -251px -560px;
}
.listhead .filters ul li.reset i {
	top: -2px;
	width: 20px;
	height: 20px;
	background-size: 200px auto;
	background-position: -120px -120px;
}
.listnav {
	font-size: .9em;
}
.listnav span {
	margin-top: 6px;
	color: #b5b5b5;
}
.listnav span strong {
	font-weight: 400;
	color: #212529;
}
.listnav select {
	width: 60%;
	min-width: 110px;
}
.listnav .pagination {
	left: 6px;
}
@media (max-width: 767px) {
	.listhead .numresults a.exttoggle {
		display: inline-block;
		position: relative;
		right: auto;
		padding-top: 10px;
		margin: 0 0 12px 0;
		border-top: 1px solid #e2e2e2;
	}
	.listhead .numresults a.exttoggle.border-0 {
		top: 0;
	}
	.listhead .numresults a.exttoggle i {
		top: 4px;
	}
	.listnav .tri label {
		width: auto;
		margin-right: 4px;
	}
	.listhead select {
		float: none !important;
	}
	.listnav .pagination {
		margin-bottom: 0;
	}
	.listnav span {
		width: 100%;
		text-align: center;
	}
}


/*--------------------------------- Liste ---------------------------------*/

#annuaire .list .card,
#annuaire .list .card-footer {
	text-decoration: none !important;
	color: #212529;
	background-color: #fff;
}
#annuaire .list .card {
	height: 100%;
	box-shadow: 0 3px 0 rgba(0, 0, 0, .06);
}
#annuaire .list .card:hover {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
}
#annuaire .list .card-body {position: relative;
    flex: 0 1 auto;
	padding: 1px 10px 0 1px;
	font-size: .8em;
}
#annuaire .list > div {
	transition-delay: .2s !important;
}
#annuaire .list .card-body img,
#annuaire .list .card-body .img .icon {
	display: inline-block;
	position: relative;
	width: 100%;
	height: auto;
	border: 0;
	overflow: hidden;
	transform: scale(1);
}
#annuaire .list .card-body img {
	background-position: center center;
	background-size: cover;
	background-color: #eee !important;
}
#annuaire .list a:hover .card-body img,
#annuaire .list a:hover .card-body .img .icon {
	transform: scale(1.1);
}
#annuaire .list .card-body .img {
	position: relative;
	display: inline-block;
	width: 45%;
	height: auto;
	min-width: 100px;
	min-height: 100px;
	max-width: 200px;
	max-height: 200px;
	margin: 0 14px 0 0;
	float: left;
	overflow: hidden;
}
#annuaire .list .card-body .img .icon {
    padding-bottom: 100%;
	border-radius: 0 !important;
}
#annuaire .list .card-body .img .icon,
#annuaire .list .card-body .img .icon::after {
	background-size: 1950% auto;
}
#annuaire .list .card-body .img .badge {
	position: absolute;
}
#annuaire .list .card-body h4 {
	margin-top: 14px;
	margin-bottom: 0;
	font-size: 1.25em;
}
#annuaire .list .card-body h4 strong {
	max-width: calc(46% - 30px);
}
#annuaire .list .card-body h4 i {
    margin: -2px 0 0 3px;
}
#annuaire .list .card-body em {
	display: block;
	color: #949494;
	line-height: 1em;
	font-style: normal;
}
#annuaire .list .card-body em strong {
	display: inline-block;
	margin: 8px 0 14px 0;
	color: #212529;
	font-weight: 400;
}
#annuaire .list .card-body ul {
	display: inline-block;
	max-width: calc(45% - 15px);
	padding: 0;
	margin-bottom: 8px;
}
#annuaire .list .card-body ul lh {
	display: block;
}
#annuaire .list .card-body ul li {
	margin: 2px 2px 0 -2px;
}
#annuaire .list .card-footer {
	padding: .35rem .4rem 0 1.15rem;
    border-top: 1px solid #eaeaea;
}
#annuaire .list .card-footer ul {
	padding: 0;
	margin: 0;
}
#annuaire .list .card-footer ul li {
	display: inline-block;
	list-style: none;
}
#annuaire .list .card-footer ul.count {
	padding: 0 0 5px 0;
}
#annuaire .list .card-footer ul.count li {
	margin-right: 8px;
	color: #838383;
	font-size: .78em;
}
#annuaire .list .card-footer ul.count li strong {
	display: inline-block;
	position: relative;
	top: 2px;
	font-weight: 600;
	font-size: 1.2em;
}
#annuaire .list .card-footer ul.samples {
	max-height: 54px;
	overflow: hidden;
}
#annuaire .list .card-footer ul.samples li {
	position: relative;
    width: 50px;
    height: 50px;
	margin: 3px 4px 0 0;
	vertical-align: top;
	background-color: #f0f0f0;
	border-radius: 50%;
}
#annuaire .list .card-footer ul.samples li.lock::after {
	position: absolute;
	content: 'Protégé';
	bottom: 5px;
	right: -1px;
	width: 52px;
	height: 12px;
	padding-top: 1px;
	text-align: center;
	font-weight: bold;
	font-size: 10px;
	line-height: 10px;
	border-radius: 4px;
	text-transform: uppercase;
	color: #fff;
	background-color: #888;
    transform: scale(.8);
}
#annuaire .list .card-footer ul.samples img {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
	vertical-align: top;
    background-position: center center;
    background-size: cover;
}
#annuaire .list .card-footer ul.samples i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    margin-left: -23px;
    opacity: .3;
    background-size: 600px auto;
    background-position: -45px -826px;
}

@media (min-width: 1440px) {
	#annuaire .list .card-body .img {
		min-width: 140px;
		min-height: 140px;
	}
}
@media (min-width: 1301px) {
	body #annuaire .list > div {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Annonces ------------------------------------------
  ==============================================================================================
*/

/*--------------------------- Info annonce perso --------------------------*/

#annonces .alert a {
	color: inherit;
	text-decoration: none;
}
#annonces .alert.custom::before {
	display: block;
	position: absolute;
	content: '';
	top: -8px;
	left: 16px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 8px 8px;
	border-color: transparent transparent #f4f4f4 transparent;
}
#annonces .alert strong {
	width: calc(100% - 60px);
}
#annonces .alert .btn .icon {
	opacity: .6;
}
#annonces .alert .btn strong {
	width: auto;
}
#annonces .alert .btn:hover .icon {
	opacity: 1;
}
#annonces .alert .img img,
#annonces .alert .img .icon {
	display: inline-block;
	width: 36px;
	height: 36px;
	border: 0;
	margin-right: 12px;
	overflow: hidden;
}
#annonces .alert .img img {
	background-position: center center;
	background-size: cover;	
}
#annonces .alert .img .icon,
#annonces .alert .img .icon::after {
	background-size: 1950% auto;
}
#annonces .alert img,
#annonces .alert .img > i {
	box-shadow: 0 0 0 3px #fff;
}
#annonces .alert .annonce {
	display: inline-block;
	position: relative;
	width: calc(100% - 64px);
}
#annonces .alert .annonce blockquote {
	margin: 6px 0 1px 0;
	font-weight: bold;
	font-size: 1.25em;
}
@media (max-width: 991px) {
	#annonces .alert .text-right {
		text-align: center !important;
	}
}
@media (max-width: 425px) {
	#annonces .row:not(.detail) .btn strong {
		font-size: 14px;
	}
}
@media (max-width: 379px) {
	#annonces .alert.custom {
		text-align: center;
	}
	#annonces .alert .img {
		float: none !important;
	}
	#annonces .alert .img img,
	#annonces .alert .img .icon {
		margin: 0 0 10px 0;
	}
	#annonces .alert .annonce {
		width: 100%;
	}
}


/*--------------------------------- Liste ---------------------------------*/

#annonces .list a {
	color: inherit;
	text-decoration: none;
}
#annonces .list thead th:first-child {
	padding-left: 1.2rem !important;
}
#annonces .list thead th.pseudo {
	width: 190px;
	overflow: visible;
}
#annonces .list thead th.cherche {
	width: 110px;
}
#annonces .list thead th.departement {
	width: 90px;
}
#annonces .list tbody tr {
	cursor: pointer;
}
#annonces .list tbody td.titre .icon.image {
	top: -1px;
	margin-left: 4px;
	opacity: .4;
}
#annonces .list thead th.date {
	width: 100px;
}
#annonces .list thead th:not(.text-center) a {
	margin-left: 0;
}
#annonces .list tbody .pseudo .new {
    transform: scale(.8);
}
#annonces .list tbody .pseudo img,
#annonces .list tbody .pseudo .icon {
	display: inline-block;
	width: 42px;
	height: 42px;
	border: 0;
	margin-right: 10px;
	overflow: hidden;
}
#annonces .list tbody .pseudo img {
	background-position: center center;
	background-size: cover;	
}
#annonces .list tbody .pseudo .icon,
#annonces .list tbody .pseudo .icon::after {
	background-size: 1950% auto;
}
#annonces .list tbody .img::before {
	box-shadow: 0 0 0 2px #f7f7f5;	
}
#annonces .list tbody .img::after {
	bottom: 1px;
	right: 10px;
    box-shadow: 0 0 0 2px #f7f7f5;
}
#annonces .list tbody img,
#annonces .list tbody .img > i {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
#annonces .list tbody h4 {
	position: relative;
	width: calc(100% - 60px);
	margin-bottom: 0;
}
#annonces .list tbody h4 strong {
	font-size: .96rem;
}
#annonces .list tbody h4 em {
	font-size: .78rem;
	font-style: normal;
	color: #888;
}
#annonces .list tbody td.cherche .icon {
	width: 42px;
    height: 42px;
	border-radius: 0 !important;
	background-size: 800px auto;
}
#annonces .list tbody td.cherche .icon.femme {
    background-position: 0 -1400px !important;
}
#annonces .list tbody td.cherche .icon.homme {
    background-position: -42px -1400px !important;
}
#annonces .list tbody td.cherche .icon.couple {
    background-position: -84px -1400px !important;
}

@media (max-width: 1023px) {
	#annonces .list thead th.pseudo {
		width: auto;
	}
	#annonces .list thead th.titre,
	#annonces .list tbody td.titre {
		display: none;
	}
	#annonces .list tbody th,
	#annonces .list tbody td {
		padding-bottom: 60px;
	}
	#annonces .list tbody th.pseudo::before {
		display: block;
		position: absolute;
		content: attr(data-title);
		bottom: 20px;
		left: 14px;
		padding: .3rem .7rem;
		border-radius: .3rem;
		font-weight: 400;
		font-size: .95em;
		background-color: #e9e9e9;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#annonces .list tbody th.pseudo::after {
		display: block;
		position: absolute;
		content: '';
		bottom: 48px;
		left: 34px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 5px 5px 5px;
		border-color: transparent transparent #e9e9e9 transparent;
	}
	#annonces .list tbody th.pseudo::after {
		display: block;
		position: absolute;
		content: '';
		bottom: 48px;
		left: 33px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 7px 7px;
		border-color: transparent transparent #e9e9e9 transparent;
	}
	#annonces .list tbody tr:hover th.pseudo::before {
		background-color: #fff;
	}
	#annonces .list tbody tr:hover th.pseudo::after {
		border-color: transparent transparent #fff transparent;
	}
	#annonces .list tbody tr[hasimage] td.date::after {
		display: block;
		position: absolute;
		content: '';
		bottom: 4px;
		right: 4px;
		width: 30px;
		height: 30px;
		opacity: .4;
		background-position: -120px -610px;
	}
}
@media (max-width: 830px) {
	#annonces .list tbody h4 {
		width: 100%;
	}
}
@media (max-width: 767px) {
	#annonces .list tbody th,
	#annonces .list tbody td {
		padding-top: 16px;
		padding-bottom: 80px;
	}
	#annonces .list tbody th,
	#annonces .list tbody td.cherche {
		background-color: #fff;
		box-shadow: inset 0 -5px 0 #f4f4f4;
	}
	#annonces .list tbody th.pseudo::before {
	    z-index: 1;
		bottom: 38px;
	}
	#annonces .list tbody th.pseudo::after {
		bottom: 66px;
	}
	#annonces .list tbody tr:hover th.pseudo::before {
		background-color: #e9e9e9;
	}
	#annonces .list tbody tr:hover th.pseudo::after {
		border-color: transparent transparent #e9e9e9 transparent;
	}
	#annonces .list table {
	    table-layout: inherit;
	}
	#annonces .list td,
	#annonces .list th {
		vertical-align: top;
	}
	#annonces .list tbody h4 {
	    width: calc(100% - 100px);
	}
	#annonces .list thead {
		position: absolute; 
		top: -9999px; 
		left: -9999px; 
	}
	#annonces .list tbody th.pseudo::before {
		max-width: calc(100% - 10px);
	}
	#annonces .list tbody td.cherche {
		width: 40px;
	}
	#annonces .list tbody td.cherche .icon {
		top: -4px;
		width: 21px;
		height: 21px;
		background-size: 400px auto;
	}
	#annonces .list tbody td.cherche .icon.femme {
		background-position: 0 -700px !important;
	}
	#annonces .list tbody td.cherche .icon.homme {
		background-position: -21px -700px !important;
	}
	#annonces .list tbody td.cherche .icon.couple {
		background-position: -42px -700px !important;
	}
	#annonces .list tbody td.cherche::before,
	#annonces .list tbody td.departement::before {
		display: block;
		position: absolute;
		content: attr(data-label);
		top: 15px;
		right: 35px;
		width: 100px;
		font-size: .9em;
		color: #717171;
		text-align: right;
	}
	#annonces .list tbody td.departement {
		display: block;
		position: absolute;
		margin-top: 20px;
		right: 17px;
		border: 0;
	}
	#annonces .list tbody td.departement::before {
		top: 18px;
		right: 33px;
	}
	#annonces .list tbody td.date {
		display: block;
		position: absolute;
		left: 37px;
		width: 100px;
		height: 18px;
		padding: 0;
		margin-top: 105px;
		border: 0;
		font-size: .85em;
		color: #888;
	}
	#annonces .list tbody tr[hasimage] td.date::after {
		display: none;
	}
	#annonces .list tbody tr[hasimage] td.departement::after {
		display: block;
		position: absolute;
		content: '';
		bottom: 48px;
		right: 4px;
		width: 30px;
		height: 30px;
		opacity: .4;
		background-position: -120px -610px;
	}
}


/*-------------------------- Détail d'une annonce -------------------------*/

#annonces .detail .card {
    -ms-flex-direction: row;
    	flex-direction: row;
}
#annonces .detail .card-img {
	width: 200px;
}
#annonces .detail .card-img img {
    display: inline-block;
    width: 180px;
    height: 180px;
    border: 0;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
#annonces .detail .card-img i {
	border-radius: 0 !important;
}
#annonces .detail .card-img h6 {
	padding-right: 20px;
	font-size: 1em;
}
#annonces .detail .card-img h6 strong {
	max-width: calc(100% - 30px);
	margin-left: 4px;
}
#annonces .detail .card-img h6 i {
	top: -4px;
	left: 2px;
	border-radius: 0 !important;
}
#annonces .detail .card-img h6 em {
	position: relative;
	top: -3px;
	margin-left: 4px;
	font-size: .85em;
	font-style: normal;
}
#annonces .detail .card-img .badge {
	position: absolute;
    bottom: 7px;
    left: 6px;
}
#annonces .detail .card-body {
	width: calc(100% - 200px);
	padding: 0;
	border-left: 2px dotted rgba(0, 0, 0, .1);
}
#annonces .detail .card-body h3 {
	font-size: 1.3em;
}
#annonces .detail .card-body p,
#annonces .detail .card-body em,
#annonces .detail .card-body .img.sample {
	margin-left: 18px;
}
#annonces .detail .card-body em {
	display: inline-block;
	color: #999;
	font-style: normal;
	font-size: .8em;
}
#annonces .detail .card-body .img.sample {
	width: 240px;
	height: 240px;
	max-width: 100%;
	max-height: 100%;
}
#annonces .detail .card-body .img.sample img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width: 1023px) {
	#annonces .detail .card {
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#annonces .detail .card-img {
		width: auto;
	    max-width: 100%;
    	overflow: hidden;
		text-align: center;
	}
	#annonces .detail .card-img .btn {
	    float: none !important;
	}
	#annonces .detail .card-body {
		width: 100%;
		padding: 0 !important;
		border: 0;
		border-top: 2px dotted rgba(0, 0, 0, .1);
	}
}


/*-------------------------------- Edition --------------------------------*/

#annonces .edit table .icon.femme,
#annonces .edit table .icon.homme,
#annonces .edit table .icon.couple {
	margin-top: -2px;
}
#annonces .edit ul.smileys {
    position: absolute;
    right: 15px;
    top: 5px;
}
#annonces .edit table th {
	width: 20%;
}
#annonces .edit .img.sample {
	width: 400px;
	height: 250px;
	max-width: 100%;
	max-height: 100%;
}
#annonces .edit table .img.sample {
	width: 180px;
	height: 180px;
	max-width: 100%;
	max-height: 100%;
}
#annonces .edit .img.sample a.badge {
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: inherit;
}
#annonces .edit .img.sample img {
	width: 100%;
	height: 100%;
	vertical-align: top;
	background-size: contain;
	background-repeat: no-repeat;
}
@media (max-width: 767px) {
	#annonces .edit table th {
		display: none;
	}
	#annonces .edit table td::before {
		display: block;
		content: attr(data-label);
		font-weight: 600;
		color: #999;
		margin-bottom: 4px;
	}
}




/*
  ==============================================================================================
  ------------------------------------------- Forums -------------------------------------------
  ==============================================================================================
*/

#forums .theme-selection label {
	width: auto;
}
#forums .theme-selection select {
	width: 300px;
	max-width: calc(100% - 80px);
}
#forums .list thead a {
	display: inline;
	position: relative;
	border-bottom: 1px dashed rgba(255, 255, 255, .4);
}
#forums .list thead th:not(.text-center) a {
	margin-left: 0;
}
#forums .list thead .icon {
	position: absolute;
	top: -4px;
	right: -28px;
	transform: scale(.72);
}

#forums .list tbody h4 {
	position: relative;
	margin: .6rem 0 .1rem 0;
	font-size: 1rem;
}
#forums .list tbody a.quote {
	display: inline-block;
	position: relative;
	max-width: 100%;
	padding: .3rem .7rem .1rem .7rem;
	margin-bottom: 11px;
	border-radius: .4rem;
	font-size: .8rem;
	color: inherit;
	background-color: #e9e9e9;
}
#forums .list tbody a.quote span {
	display: inline-block;
	width: 100%;
}
#forums .list tbody a.quote::after {
	display: block;
	position: absolute;
	content: '';
	left: 14px;
	bottom: -7px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 7px 0;
	border-color: transparent #e9e9e9 transparent transparent;
}
#forums .list tbody tr:hover a.quote {
	background-color: #fff;
}
#forums .list tbody tr:hover a.quote::after {
	border-color: transparent #fff transparent transparent;
}
#forums .list tbody a.user {
	display: block;
	font-size: .8rem;
}
#forums .list tbody a.user .img img,
#forums .list tbody a.user .img .icon {
	width: 32px;
	height: 32px;
	margin: 0 .4rem 0 .3rem;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .08); 
}
#forums .list tbody a.user .img img {
    background-position: center center;
    background-size: cover;
}
#forums .list tbody a.user .img .icon,
#forums .list tbody a.user .img .icon::after {
    background-size: 600px auto;
}
#forums .list tbody a.user span {
	display: block;
}
#forums .list tbody a.user strong {
	position: relative;
	top: -1px;
	font-size: .98em;	
}
#forums .list tbody a.user em {
	position: relative;
	display: block;
	top: -4px;
	font-style: normal;
	font-size: .85em;
	color: #888;
}

#forums + #searchsidebar #search-keyword {
	position: relative;
	top: 0;
	height: 0;
	opacity: 0;
}
#forums + #searchsidebar #search-keyword.active {
	top: 0;
	height: 37px;
	opacity: 1;
}

@media (max-width: 767px) {
	#forums .theme-selection {
		text-align: center;
	}
	#forums .theme-selection label {
		display: block;
	}
	#forums .theme-selection select {
		width: 100%;
		max-width: 100%;
	}
}


/*------------------------ Résultats de recherche -------------------------*/

#forums .list.results h3 {
	margin-bottom: .85em;
	font-size: 1em;
}
#forums .list.results tr.empty {
	opacity: .5;
}
#forums .list.results td.resultats {
	padding-top: 1.1rem;
	font-size: .95em;
	font-weight: bold;
	line-height: 1rem;
}
#forums .list.results tr.empty td.resultats {
	font-weight: normal;
}
#forums .list.results td.resultats .count {
	display: inline-block;
	margin-bottom: 8px;
}
#forums .list.results td.resultats .count span,
#forums .list.results th::before {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	color: #fff;
	padding: 2px 5px;
	margin: -2px 4px 0 0;
	float: left;
	text-align: center;
	font-weight: bold;
}
#forums .list.results td.resultats .badge {
	top: -5px;
	margin-right: 6px;
}
#forums .list.results tr.empty a {
	cursor: default;
}

@media (max-width: 1023px) {
	#forums .list.results .resultats {
		width: 30%;
	}
	#forums .list.results td.resultats .count span {
		margin-bottom: 25px;
	}
	#forums .list.results td.resultats a {
		float: none !important;
	}
}
@media (max-width: 767px) {
	#forums .list.forums thead th.forum {
		border-top-right-radius: .5rem !important;
	}
	#forums .list.results tbody tr th a:not(.user) {
		position: relative;
		z-index: 2;
		padding-bottom: 30px;
	}
	#forums .list.results tbody tr th::before {
		display: inline-block;
		position: absolute;
		z-index: 1;
		bottom: 37px;
		right: calc(100% - 54px);
		content: attr(data-results);
		font-size: .9em;
		background-color: #999;
	}
	#forums .list.results tbody tr.empty th::before {
		content: '0';
	}
	#forums .list.results tbody tr th.forum::before {
		bottom: 17px;
		right: calc(100% - 74px);
	}
	#forums .list.results tbody tr th::after {
		display:flex;
		position: absolute;
		z-index: 1;
		content: 'message(s) répond(ent) à votre recherche';
		bottom: 35px;
		left: 56px;
		height: 26px;
		margin-right: 10px;
		font-size: .85em;
		line-height: .85rem;
		flex-direction:row;
		align-items: center;
		justify-content: center;
	}
	#forums .list.results tbody tr th.forum::after {
		font-size: .85em;
		bottom: 14px;
		left: 76px;
		content: 'sujet(s) correspondant(s)';
		font-size: .85em;
	}
	#forums .list.results .resultats {
		display: none;
	}
}


/*----------------------------- Liste (forums) ----------------------------*/

#forums .list.forums tbody a {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}
#forums .list.forums table {
	table-layout: fixed;
	overflow: hidden;
}
#forums .list.forums td,
#forums .list.forums th {
	position: relative;
}
#forums .list.forums thead th.forum {
	width: 47%;
}
#forums .list.forums thead th.sujets,
#forums .list.forums thead th.messages {
	width: 90px;
}
#forums .list.forums tbody .forum .icon {
	margin: -4px 8px 0 0;
}
#forums .list.forums tbody .forum a {
	display: inline-block;
	width: calc(100% - 70px);
}
#forums .list.forums tbody .forum a em {
	margin-bottom: 8px;
	font-style: normal;
	font-weight: 400;
	color: #888;
}
@media (max-width: 1023px) {
	#forums .list.forums:not(.results) thead th.forum {
		border-top-right-radius: .5rem !important;
	}
	#forums .list.forums .sujets,
	#forums .list.forums .messages,
	#forums .list.forums .dernier {
		display: none;
	}
}


/*----------------------------- Liste (sujets) ----------------------------*/

#forums .list.topics a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}
#forums .list.topics td,
#forums .list.topics th {
	position: relative;
}
#forums .list.topics thead th.sujet {
	width: 54%;
}
#forums .list.topics thead th.messages {
	width: 100px;
}
#forums .list.topics tbody th.sujet blockquote {
	margin-bottom: 0;

}
#forums .list.topics tbody th.sujet blockquote h4 {
	display: inline;
	font-size: .95rem;
}
#forums .list.topics tbody th.sujet blockquote::before {
	transform-origin: 100% 50%;
	transform: scale(.8);
}
#forums .list.topics tbody th.sujet blockquote::after {
	transform: scale(.8) rotate(180deg);
}
@media (max-width: 1023px) {
	#forums .list.topics thead th.sujet {
		width: 58%;
	}
	#forums .list.topics .messages {
		display: none;
	}
	#forums .list.topics tbody .dernier a.user .img {
		display: none;
	}
}
@media (max-width: 767px) {
	#forums .list.topics tbody th.sujet {
		padding-left: .7rem;
	}
	#forums .list.topics tbody a.user {
		text-align: right;
	}
	#forums .list.topics tbody a.user span {
		float: none !important;
	}
	#forums .list.topics tbody a.user .img img,
	#forums .list.topics tbody a.user .img .icon,
	#forums .list.topics .dernier {
		display: none;
	}
}


/*---------------------------- Liste (threads) ----------------------------*/

#forums .thread h3 {
	font-size: 1.15em;
}
#forums .thread.first .bg-white {
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);
}
#forums .thread.first .card {
	margin-top: 36px;
	font-size: .95em;
}
#forums .thread.first .card-img {
	padding-left: 0;
	border: 0;
}
#forums .thread.first .card-img .img::after {
    box-shadow: 0 0 0 3px #fff;
}
#forums .thread.first .card-img img {
	width: 100px;
	height: 100px;
}
#forums .thread.first .card-img h6 em {
	font-size: .9em;
}
#forums .thread.first .card-body p {
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);
}
#forums .thread.first .card-body p::before {
	border-color: transparent #f4f4f4 transparent transparent;
}
#forums .thread.first .card-body em {
	top: -17px;
	font-size: .9em;
}
#forums .threadlist {
    overflow: auto;
    max-height: 500px;
}
#forums .thread .card-img h6 {
	font-size: .95em;
}
#forums .thread .card-img h6 strong {
	line-height: 1.15rem;
}
#forums .thread.first i.smiley,
#forums .threadlist i.smiley {
	margin-top: -2px !important;
}
@media (max-width: 767px) {
	#forums .thread.first .card {
		margin-top: 36px;
	}
	#forums .thread.first .card-img .img {
		width: 80px;
		height: 80px;
	}
	#forums .thread.first .card-body p::before {
		border-color: transparent transparent #f4f4f4 transparent;
	}
	#forums .threadlisthead > div:first-child {
		text-align: center;
	}
	#forums .thread .card-body em {
		top: inherit !important;
		bottom: -8px;
	}
	#forums .thread.first .card-body em {
		bottom: -12px;
	}
}
@media (max-width: 575px) {
	#forums .threadlist {
		overflow: visible;
		max-height: 100%;
	}
	#forums .threadlist .simplebar-track {
		display: none;
	}
}


/*-------------------------------- Répondre -------------------------------*/

#forums .thread.answer .card-img {
    width: 110px;
    border: 0;
	padding-left: 0;
}
#forums .thread.answer .card-body ul.smileys {
	position: relative;
	top: -26px;
}
#forums .thread.answer .card-body p {
	min-height: 130px;
    padding: 18px;
}
#forums .thread.answer .card-body p.is-invalid {
	background-color: #ffcfd3 !important;
}
#forums .thread.answer .card-body p::before {
	border-color: transparent #f4f4f4 transparent transparent;
}
#forums .thread.answer .card-body p.is-invalid::before {
	border-color: transparent #ffcfd3 transparent transparent;
}
#forums .thread.answer .card-body p textarea {
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}
#forums .thread.answer .invalid-feedback {
	display: block;
	color: #ffa4ab;
}
#forums .thread.answer .card-body .custom-file {
	width: calc(100% - 64px);
}
@media (max-width: 767px) {
	#forums .thread.answer h3 {
		margin-bottom: .4rem !important;
	}
	#forums .thread.answer .card-img {
		display: none !important;
	}
	#forums .thread.answer .card-body a.smiley {
		top: 6px;
	}
	#forums .thread.answer .card-body p {
		min-height: 180px;
	}
	#forums .thread.answer .card-body p::before {
		border-color: transparent transparent #f4f4f4 transparent;
	}
	#forums .thread.answer .card-body p.is-invalid::before {
		border-color: transparent transparent #ffcfd3 transparent;
	}
}


/*----------------------------- Créer un sujet ----------------------------*/

#forums .create .theme h4 {
	position: relative;
	margin: .9rem 0 .1rem 0;
	font-size: 1.1rem;
}
#forums .create .theme em {
    margin-bottom: 8px;
    font-style: normal;
    font-size: .85em;
    color: #888;
}
#forums .create .custom-file {
	width: calc(100% - 64px);
}
#forums .create ul.smileys {
	position: absolute;
    right: 15px;
    top: 5px;
}




/*
  ==============================================================================================
  ------------------------------------------- Profil -------------------------------------------
  ==============================================================================================
*/


/*--------------------------------- Profil --------------------------------*/

#profil .infos #profil-ville-wait {
	display: inline-block;
	width: calc(100% - 50px);
	padding: 3px 0 1px 10px;
    margin-right: 4px;
	border: 1px dashed #ccc;
	vertical-align: top;
}
#profil .infos #profil-ville-wait > span {
	display: inline-block;
	width: calc(100% - 100px);
}
#profil .infos #profil-ville-group .loader {
	display: inline-block;
	position: relative;
	float: right;
    top: 6px;
    left: -10px;
	width: 30px;
    height: 30px;
}
#profil .infos #profil-ville-group .status {
	position: relative;
	top: -2px;
}
#profil .infos .irs {
	margin-top: 6px;
}
#profil .infos .irs-line {
    background: #eee;
}
#profil .infos .irs-from, 
#profil .infos .irs-to, 
#profil .infos .irs-single {
    background-color: #777;
}
#profil .infos .irs-from::before, 
#profil .infos .irs-to::before, 
#profil .infos .irs-single::before {
    border-color: #777 transparent transparent transparent;
}
@media (max-width: 767px) {
	#profil .infos #profil-ville-group > span {
		width: 100% !important;
	}
	#profil .infos #profil-ville,
	#profil .infos #profil-ville-wait {
		width: calc(100% - 50px) !important;
	}
	#profil .infos #profil-ville-wait .btn {
		display: block;
		width: 100px;
	}
}


/*----------------------- Photos / Webcams / Vidéos -----------------------*/

.photos h3,
.videos h3,
.webcams h3 {
	position: relative;
	padding-left: 40px;
}
.photos h3 i,
.videos h3 i,
.webcams h3 i {
	position: absolute;
	z-index: 2;
	top: -1px;
	left: 0;
	width: 30px !important;
	height: 30px !important;
	margin: 0 8px 2px 4px;
	border-radius: 50%;
}
.photos h3 i.profil {
	background-position: -44px 0 !important;
    background-size: 320px auto !important;
}
.photos h3 i.sexy,
.webcams h3 i.sexy {
    background-position: -85px -439px !important;
}
.webcams:not(.sexy) h3 i {
    background-size: 305px auto !important;
    background-position: -275px -151px !important;
}
.videos h3 i,
.sextapes h3 i {
	background-size: 267px auto !important;
    background-position: -211px -131px !important;
}
#profil ul.grid-gallery li.lock .img {
    border: 1px solid #ffc172;
    background-color: #ffd196;
}
#profil ul.grid-gallery li.lock small {
    background-color: #ffc172;
}
#profil ul.grid-gallery li.pending .img {
	color: #fff;
	border: 0;
}
#profil ul.grid-gallery li.pending .img::after {
	display: block;
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .15;
	background-size: auto 3600%;
	background-position: 7.6% 73.9%;
}
#profil ul.grid-gallery li.pending .img > span {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 10px;
	font-size: .8rem;
	line-height: 1rem;
	transform: translateY(-50%);
}
#profil ul.grid-gallery li.pending .img > span em {
	display: inline-block;
	width: 100%;
	font-style: normal;
}
#profil ul.grid-gallery li.pending .img > span i {
	animation: Blink-zoom 1s infinite;
}
#profil ul.grid-gallery li span.name .media-id {
	display: inline-block;
	padding: 2px 5px;
	margin-top: 6px;
    color: #999;
	font-size: .8em;
	line-height: .8rem;
	border-radius: 4px;
	background-color: #f3f3f3;
	box-shadow: 0 1px 0 #e6e6e6;
}
@media (max-width: 680px) {
	#profil ul.grid-gallery li.pending .img > span {
		font-size: .7rem;
		line-height: .85rem;
	}
}
@media (max-width: 389px) {
	#profil .photos h3,
	#profil .videos h3,
	#profil .webcams h3 {
		font-size: 1.3em;
	}
}


/*--------------------------------- Photos --------------------------------*/

#profil .photos ul.grid-gallery li.selected .img {
	border: 1px solid #aae5f3;
	background-color: #bbf1fd;
}
#profil .photos ul.grid-gallery li.selected small {
	padding-bottom: 10px !important;
}


/*--------------------------------- Webcams -------------------------------*/

.webcam-default {
	position: relative;
	width: 320px;
	height: auto;
	max-width: 100%;
}
.webcam-default::before {
	display: block;
	content: '';
	max-width: 100%;
	padding-top: 75%;
	background: #ddd;
	background: -moz-radial-gradient(center, ellipse cover, #ddd 0%, #bbb 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #ddd 0%, #bbb 100%);
	background: radial-gradient(ellipse at center, #ddd 0%, #bbb 100%);
}
.webcam-default .icon.webcam {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -35px;
	margin-left: -35px;
	width: 70px;
	height: 70px;
	padding: 10px;
    background-size: 600px auto !important;
	background-position: -537px -295px !important;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
}
#profil .btn .icon.webcam {
	width: 30px;
	height: 30px;
    background-size: 300px auto !important;
	background-position: -271px -150px !important;
}


/*--------------------------------- Vidéos --------------------------------*/

#profil ul.grid-gallery li {
	display: inline-block;
	position: relative;
	width: 320px;
	height: auto;
	max-width: 100%;
    padding-right: 8px;
    margin-bottom: 8px;
	overflow: hidden;
}


/*---------------------- Contacts / Profils bloqués -----------------------*/

#profil .list a:not(.btn) {
	color: inherit;
}
#profil .list thead th.pseudo {
	width: 240px;
}
#profil .list tbody th,
#profil .list tbody td {
	vertical-align: top;
}
#profil .list.contacts tbody td {
	padding-top: 1rem;
}
#profil .list.bloques tbody td {
	padding-top: 1.6rem;
}
#profil .list tbody th.pseudo {
	padding-right: 0;
}
#profil .list tbody th.pseudo::before,
#profil .list tbody th.pseudo::after {
	display: none;
	position: absolute;
	left: 16px;
	font-size: .95em;
	line-height: 1.25em;
	font-weight: 400;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#profil .list thead th.action {
	width: 130px;
}
#profil .list tbody .pseudo img,
#profil .list tbody .pseudo .img .icon {
	display: inline-block;
	width: 76px;
	height: 76px;
	border: 0;
	margin-right: 16px;
	overflow: hidden;
}
#profil .list tbody .pseudo img {
	background-position: center center;
	background-size: cover;	
}
#profil .list tbody .pseudo .img .icon,
#profil .list tbody .pseudo .img .icon::after {
	background-size: 1950% auto;
}
#profil .list tbody .pseudo .icon.godial,
#profil .list tbody .pseudo .icon.gocourrier {
	margin-top: 6px;
	border-radius: 50%;
}
#profil .list tbody .pseudo .icon.godial.disabled {
	background-color: #999;
}
#profil .list tbody .img::before {
	box-shadow: 0 0 0 2px #f7f7f7;	
}
#profil .list tbody .img::after {
	display: none;
}
#profil .list tbody .img .badge {
	position: absolute;
    bottom: 2px;
    left: 2px;
}
#profil .list tbody img,
#profil .list tbody .img > i {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}
#profil .list tbody h4 {
	position: relative;
	width: calc(100% - 96px);
	margin-bottom: 0;
}
#profil .list.bloques tbody h4 {
	margin-top: 12px;
}
#profil .list tbody h4 strong {
	font-size: .96rem;
}
#profil .list tbody h4 em {
	font-size: .78rem;
	font-style: normal;
	color: #888;
}
@media (max-width: 1023px) {
	#profil .list thead th.dateblocage,
	#profil .list tbody td.dateblocage {
		display: none;
	}
	#profil .list.bloques tbody th.pseudo {
	    padding-bottom: 50px;
	}
	#profil .list.bloques tbody th.pseudo::after {
		display: block;
		content: "Date du blocage\A" attr(data-dateblocage);
		top: 94px;
		white-space: pre;
	}
}
@media (max-width: 991px) {
	#profil .list thead th.dateajout,
	#profil .list tbody td.dateajout,
	#profil .list thead th.datepassage,
	#profil .list tbody td.datepassage,
	#profil .list thead th.commentaire,
	#profil .list tbody td.commentaire {
		display: none;
	}
	#profil .list.contacts thead th.pseudo,
	#profil .list.bloques thead th.pseudo {
		width: inherit !important;
	}
	#profil .list.bloques tbody h4 {
		margin-top: 6px;
	}
	#profil .list.contacts tbody th.pseudo {
	    padding-bottom: 50px;
	}
	#profil .list tbody th.pseudo::before,
	#profil .list tbody th.pseudo::after {
		display: block;
	}
	#profil .list.contacts tbody th.pseudo::before {
		content: "Date d'ajout : " attr(data-dateajout); 
		top: 96px;
	}
	#profil .list.contacts tbody th.pseudo::after {
		content: "Dernier passage : " attr(data-datepassage); 
		top: 112px;
	}
}
@media (max-width: 767px) {
	#profil .list thead th.pseudo {
		border-top-right-radius: .5rem;
	}
	#profil .list thead th.action,
	#profil .list tbody td.action {
		width: 0;
	}
	#profil .list tbody td.action {
		position: absolute;
		right: 0;
		margin: 78px 120px 0 0;
		border: 0 !important;
	}
	#profil .list.bloques tbody td.action {
		padding-top: 1rem;
	}
}
@media (max-width: 727px) {
	#profil .list thead th.commentaire,
	#profil .list tbody td.commentaire {
		display: none;
	}
	#profil .list.contacts tbody th.pseudo::before {
		content: "Date d'ajout\A" attr(data-dateajout); 
		bottom: 10px;
		white-space: pre;
	}
	#profil .list.contacts tbody th.pseudo::after {
		display: none;
	}
}
@media (max-width: 649px) {
	#profil .list tbody th.pseudo {
	    padding-bottom: 90px !important;
	}
	#profil .list tbody td.action {
		margin-top: 118px;
	}
}


/*----------------------------- Mes forfaits ------------------------------*/

#profil .forfaits .alert .alert {
	line-height: 1.3rem;
}
#profil .forfaits a[href="#suspension"] {
	display: inline-block;
	position: relative;
	width: 100%;
	text-decoration: none !important;
}
#profil .forfaits a[href="#suspension"] h3 {
	margin-right: 30px;
}
#profil .forfaits a[href="#suspension"] > i {
    position: absolute;
	top: 12px;
	right: 0;
	opacity: .5;
}
#profil .forfaits a[href="#suspension"][aria-expanded="false"] > i {
	background-position: -60px -609px;
}
#profil .forfaits a[href="#suspension"][aria-expanded="true"] > i {
	background-position: -90px -609px;
}
@media (max-width: 991px) {
	#profil .forfaits .text-right {
		text-align: center !important;
	}
}
@media (max-width: 767px) {
	#profil .forfaits table tr th {
		display: none;
	}
	#profil .forfaits table tr td {
		display: block;
		clear: both;
		text-align: left !important;
	}
	#profil .forfaits table tr td:first-child,
	#profil .forfaits table tr td:first-child::before {
		color: #fff;
		border-top-left-radius: .5rem;
		border-top-right-radius: .5rem;
	}
	#profil .forfaits table tr td::before {
		display: inline-block;
		content: attr(data-th);
		vertical-align: top;
		width: 100%;
		color: #717171;
		font-weight: 400;
	}
	#profil .forfaits a.btn {
		font-size: 0;
	}
	#profil .forfaits a.btn strong {
		font-size: 14px;
	}
}


/*---------------------------- Identification -----------------------------*/

#profil .identification .form-group {
	position: relative;
}
#profil .identification .form-group.editing {
	background-color: #777;
}
#profil .identification .form-group.editing .invalid-feedback {
	color: #ffa5ae;
}
#profil .identification .form-group .btn-close {
	display: none;
	position: absolute;
	top: 4px;
	right: 4px;
}
#profil .identification .form-group.editing .btn-close {
	display: block;
}
#profil .identification .form-group.editing label,
#profil .identification .form-group.editing p {
	color: #fff !important;
}
#profil .identification .form-group.editing a[id*="modify"],
#profil .identification .form-group a[id*="validate"] {
	display: none;
}
#profil .identification .form-group a[id*="modify"],
#profil .identification .form-group.editing a[id*="validate"] {
	display: inline-block;
}
@media (max-width: 767px) {
	#profil .identification input {
		width: 100% !important;
	}
}


/*----------------------------- Notifications -----------------------------*/

#profil .notification h3 {
	font-size: 1.3em;
    padding-left: 28px;
	padding-bottom: 6px;
}
#profil .notification h3 i {
    position: absolute;
    top: -2px;
    left: 10px;
    margin-right: 4px;
}
#profil .notification label:not(.switch) {
	margin-left: 26px;
}
#profil .notification label i {
	position: absolute;
	top: -1px;
	left: 8px;
	opacity: .3;
}
#profil div:not(.collapse) .notification label:not(.switch),
#profil .notification a.badge {
    margin-left: 26px;
}
#profil .notification a.badge {
    margin-bottom: 10px;
}
#profil .notification fieldset label {
	margin-left: 0;
}
#profil .notification fieldset input[type="tel"],
#profil .notification fieldset input[type="text"] {
	min-width: 100%;
}
#profil .notification .row.disabled {
	opacity: .5;
}
#profil .notification .row.disabled a.badge {
	display: none;
}
#profil .notification .row.bg-secondary.rounded label,
#profil .notification .row.bg-secondary.rounded p {
	color: #fff !important;
}
#profil .notification .row.bg-secondary.rounded label i {
	opacity: 1;
}
#profil .notification .collapse.no-anim {
	opacity: 0;
}
@media (max-width: 767px) {
	#profil .notification label.switch {
		margin-left: 26px;
	}
}


/*------------------------------ Mes données ------------------------------*/

#profil .donnees #profil-data-display-1 + label {
	color: #28a745;
}
#profil .donnees #profil-data-display-1:checked + label::before {
	border-color: #28a745;
    background-color: #28a745;
}
#profil .donnees #profil-data-display-2 + label {
	color: #f29024;
}
#profil .donnees #profil-data-display-2:checked + label::before {
	border-color: #f29024;
    background-color: #f29024;
}
#profil .donnees #profil-data-display-3 + label {
	color: #dc3545;
}
#profil .donnees #profil-data-display-3:checked + label::before {
	border-color: #dc3545;
    background-color: #dc3545;
}
#profil .donnees.control .form-group {
	padding-left: 48px;
}
#profil .donnees.control .form-group i {
	position: absolute;
	top: -11px;
	left: 0;
	opacity: .15;
}
#profil .donnees .form-group [type=radio]:checked + label + i {
	opacity: .5;
}

@media (max-width: 767px) {
	#profil .donnees input[type="text"] {
	    width: 100% !important;
	}
	#profil .donnees.control .form-group {
	    padding-left: 22px;
	}
	#profil .donnees.control .form-group i {
		top: -22px;
		left: -5px;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Courrier ------------------------------------------
  ==============================================================================================
*/

#courrier .detail.bg-white,
#courrier .answer.bg-white {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .1);
}


/*--------------------------------- Liste ---------------------------------*/

#courrier .advtabs {
	margin-bottom: 2px;
}
#courrier .advtabs li a span.count {
	position: absolute;
	top: 24px;
	left: 50%;
	width: auto;
	min-width: 1.5em;
	margin-left: 8px;
	padding: .1em .42em;
	border-radius: 10px;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	font-size: .85em;
}
#courrier .advtabs li a.active span.count {
	background-color: #333;
}
#courrier .list {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
#courrier .list .alert {
	padding-left: 42px;
}
#courrier .list .alert i {
	position: absolute;
	top: 7px;
	left: 10px;
}
#courrier .numresults {
    padding-top: .3em !important;
    padding-bottom: .3em !important;
    min-height: 49px;
}
#courrier + #searchsidebar a#embedtoggle {
    top: 215px;
}
#courrier .list thead th.select {
	width: 40px;
}
#courrier .list thead th.select .form-check {
	top: -8px;
}
#courrier .list thead th.expediteur {
	width: 22%;
}
#courrier .list thead th.messages {
	width: 50px;
    text-align: center;
}
#courrier .list thead th.messages i {
    width: 18px;
    height: 14px;
    background-position: -216px -588px;
}
#courrier .list thead th.recu {
	width: 85px;
}
#courrier .list thead th.pj {
	width: 40px;
}
#courrier .list tbody tr {
	cursor: pointer;
}
#courrier .list tbody th.select .form-check {
	top: -13px;
}
#courrier .list tbody td {
	vertical-align: top;
}
#courrier .list tbody td.expediteur span {
	display: inline-block;
	max-width: calc(100% - 36px);
	vertical-align: top;
}
#courrier .list tbody td.expediteur .count {
	display: inline-block;
    width: auto;
    min-width: 1.65em;
    margin-left: 8px;
    padding: .1em .42em;
    border-radius: 10px;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: .85em;
	text-align: center;
	background-color: #c33f98;
}
#courrier .list tbody td.messages {
	text-align: center;
}
#courrier .list tbody td.pj i {
	position: absolute;
	top: 0;
	left: 5px;
    opacity: .4;
}
#courrier .list .listnav i.arrow-angle {
	margin-top: 2px;
	margin-left: 10px;
	opacity: .4;
	vertical-align: top;
}
@media (max-width: 991px) {
	#courrier .list thead th.expediteur {
		width: auto;
	}
	#courrier .list .listnav i.arrow-angle {
		display: none;
	}
}

/* #sa# 26/05/2025 18:03:40  ANCIEN qui était retiré par moi */ /*  #sa# 07/07/2025 21:51:56  Pour Mantis704 je remet selon mail 17/06/2025 Jerome */
@media (max-width: 799px) {
	#courrier .list .objet {
		display: none;
	}
}
/**/
/* 805 pour afficher objet sur Ipad  origine = 850
@media (max-width: 805px) { 
	#courrier .list .objet {
		display: none;
	}
}
*/


/* ===============26/05/2025 17:44:34 ancien ===================  #sa# 07/07/2025 22:05:07 je remet */
@media (min-width: 576px) and (max-width: 680px),
(max-width: 460px) {
	#courrier .list tbody th.select .form-check {
		top: -23px;
	}
	#courrier .list tbody .expediteur::after {
		display: inline-block;
		position: relative;
		content: attr(data-date);
		width: 100%;
		top: -4px;
		font-size: .85em;
		opacity: .7;
	}
	#courrier .list .messages,
	#courrier .list .recu {
		display: none;
	}
}
@media (max-width: 440px) {
	#courrier .list .recu {
		display: none;
	}
}	
@media (max-width: 359px) {
	#courrier .list thead th.expediteur {
		border-top-right-radius: 10px;
	}
	#courrier .list .pj {
		display: none;
	}
}	
	/* #sa# 26/05/2025 15:21:37  #courrier .list .recu {
		display: none;       #sa# 07/07/2025 22:06:32 retiré 
	} #sa# 07/07/2025 22:05:07 remis */
/* ===============26/05/2025 17:44:34 NOUVEAU  =================== */
/* #sa# 07/07/2025 22:18:31 retrait debut
@media (max-width: 380px) {
	#courrier .list tbody th.select .form-check {
		top: -23px;
	}
	#courrier .list tbody .expediteur::after {
		display: inline-block;
		position: relative;
		content: attr(data-date);
		width: 100%;
		top: -4px;
		font-size: .85em;
		opacity: .7;
	}
	#courrier .list .messages
	{
		display: none;
	}
}



@media (max-width: 640px) {
	#courrier .list .recu {
		display: none;
	}
}






@media (max-width: 359px) {
	#courrier .list thead th.expediteur {
		border-top-right-radius: 10px;
	}
	#courrier .list .pj {
		display: none;
	}
}
 #sa# 07/07/2025 22:18:31 retrait fin */


/*-------------------------- Lecture d'un mesage --------------------------*/

#courrier .detail h3 {
	font-size: 1.3em;
}
#courrier .detail hr {
	text-align: center;
	margin: 30px 0;
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 1) 50%, rgba(150, 150, 150, 0) 100%);
}
#courrier .detail hr::after {
	display: inline-block;
	position: relative;
	top: -8px;  /* #sa# 07/07/2025 22:20:17 était à 8  et pas 14 selon jerome*/
 	content: attr(data-label);
	padding: 0 8px;
	border-radius: 10px;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	background-color: #888;
}
#courrier .detail .card {
    -ms-flex-direction: row;
    	flex-direction: row;
    	width: 90%; /* #Vincent 2025-07-15: Les bulles de dialogues sont rétrécies pour un effet 'WhatsApp'. */ 
}
#courrier .detail.unread .card {
	border-left: 4px solid #c33f98;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	box-shadow: 2px 6px 0 rgba(0, 0, 0, .04);
}
#courrier .detail .card:has(i.icon.femme) {
	background: linear-gradient(150deg, rgba(255, 58, 137, .12) 0%, rgba(255, 58, 137, .02) 80%);
}
#courrier .detail.me .card:has(i.icon.femme) {
	background: linear-gradient(210deg, rgba(255, 58, 137, .12) 0%, rgba(255, 58, 137, .05) 80%);
	margin-left: auto; /* #Vincent 2025-07-15: Les bulles de dialogues du client courant sont dorénavant alignées à droite. */ 
}
#courrier .detail .card:has(i.icon.homme) {
	background: linear-gradient(150deg, rgba(40, 172, 233, .15) 0%, rgba(40, 172, 233, .02) 80%);
}
#courrier .detail.me .card:has(i.icon.homme) {
	background: linear-gradient(210deg, rgba(40, 172, 233, .15) 0%, rgba(40, 172, 233, .05) 80%);
	margin-left: auto; /* #Vincent 2025-07-15: Les bulles de dialogues du client courant sont dorénavant alignées à droite. */ 
}
#courrier .detail .card:has(i.icon.couple) {
	background: linear-gradient(150deg, rgba(255, 58, 137, .15) 0%, rgba(40, 172, 233, .1) 50%, rgba(40, 172, 233, .02) 80%);
}
#courrier .detail.me .card:has(i.icon.couple) {
	background: linear-gradient(210deg, rgba(40, 172, 233, .15) 0%, rgba(255, 58, 137, .1) 50%, rgba(255, 58, 137, .05) 80%);
	margin-left: auto; /* #Vincent 2025-07-15: Les bulles de dialogues du client courant sont dorénavant alignées à droite. */ 
}
#courrier .detail .card-img {
	width: 92px;
}
#courrier .detail a {
	color: inherit;
	text-decoration: none !important;
}
#courrier .detail .card-img img, 
#courrier .detail .card-img i {
	border-radius: 50%;	
}
#courrier .detail .card-img img {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 0;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
}
#courrier .detail .card-img h6 {
	padding-right: 20px;
	font-size: .95em;
}
#courrier .detail.me .card-img {
	text-align: right;
}
#courrier .detail.me .card-img h6 {
	padding-right: 0;
}
#courrier .detail .card-img .badge {
	position: absolute;
    bottom: 7px;
    left: 6px;
}
#courrier .detail .card-body {
	width: calc(100% - 200px);
	padding: 0;
}
#courrier .detail.unread .card-body .badge {
	top: 6px;
	right: 6px;
}
#courrier .detail .card-body h6 strong {
	max-width: calc(100% - 30px);
}
#courrier .detail .card-body h6 i {
	top: -4px;
	left: 2px;
	border-radius: 0 !important;
}
#courrier .detail .card-body h6 em {
	position: relative;
	top: -3px;
	margin-left: 4px;
	font-size: .85em;
	font-style: normal;
	overflow: visible;
}

#courrier .detail.me .card-body h3 blockquote {
	display: inline-block;
}
#courrier .detail.me .card-body h3 blockquote::before {
    position: relative;
    left: -4px;
}
#courrier .detail.me .card-body h3 blockquote::after {
	text-align: justify;
}
#courrier .detail.me .card-body > em {
	display: inline-block;
	width: 100%;
}
#courrier .detail.unread .card-body em span,
#courrier .detail.me:not(.read) .card-body em span {
	color: #c33f98;
}
#courrier .detail .card-body em span {
	display: inline-block;
	position: relative;
	color: #777;
	font-style: normal;
	font-size: .85em;
	padding-left: 25px;
}
#courrier .detail .card-body em span i {
	position: absolute;
	top: -5px;
	left: -5px;
}
#courrier .detail .card-body em span i.read {
	filter: grayscale(1);
	opacity: .5;
}
#courrier .detail .card-body em span i.valid {
    transform: scale(.6);
    transform-origin: 25% 25%;
}
#courrier .detail .card-body i.smiley {
    margin-top: -2px !important;
}

@media (max-width: 767px) {
	#courrier .detail .card {
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#courrier .detail .card-img {
		order: 1;
	    width: 100%;
		padding-bottom: 16px;
    	overflow: hidden;
		
	}
	#courrier .detail .card-img img {
		display: inline-block;
		width: 80px;
	}
	#courrier .detail .card-img h6 {
		display: inline-block;
		width: calc(100% - 100px);
		padding-left: 6px;
		margin: 0;
		text-align: left !important;
		vertical-align: middle;
	}
	#courrier .detail .card-body {
		order: 2;
	}
	#courrier .detail.me .card-body em {
		text-align: left;
	}
	#courrier .detail .card-img .btn {
	    float: none !important;
	}
	#courrier .detail .card-body {
		width: 100%;
		padding: 16px 0 0 0 !important;
		border: 0;
		border-top: 2px dotted rgba(0, 0, 0, .1);
	}
}


/*-------------------------- Répondre à un mesage -------------------------*/

#courrier .answer .img img,
#courrier .answer .img i {
    display: inline-block;
    width: 30px;
    height: 30px;
	margin-right: 2px;
    border: 0;
    overflow: hidden;
}
#courrier .answer .img img {
    background-position: center center;
    background-size: cover;
}
#courrier .answer ul.smileys {
    position: absolute;
    right: 0;
    top: 5px;
}
#courrier .answer .custom-file {
    width: calc(100% - 64px);
}




/*
  ==============================================================================================
  ------------------------------------------- Fiche --------------------------------------------
  ==============================================================================================
*/

/*--------------------------------- Header --------------------------------*/

#fiche .fiche-head {
	min-height: 280px;
}
#fiche .fiche-head .bg-blur {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: #eee;
}
#fiche .fiche-head .bg-blur.homme {
	background-color: #4cb1e0;
}
#fiche .fiche-head .bg-blur.femme {
	background-color: #ec5993;
}
#fiche .fiche-head .bg-blur.neutral {
	background-color: #bbb;
}
#fiche .fiche-head .bg-blur.couple {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #4cb1e0;
	background: -moz-linear-gradient(45deg, #4cb1e0 20%, #ec5993 100%);
	background: -webkit-linear-gradient(45deg, #4cb1e0 20%, #ec5993 100%);
	background: linear-gradient(45deg, #4cb1e0 20%, #ec5993 100%);
}
#fiche .fiche-head .bg-blur.show {
	opacity: .9;
}
#fiche .fiche-head .bg-blur::before,
#fiche .fiche-head .bg-blur::after {
	position: absolute;
	z-index: 2;
	content: '';
	top: -4px;
	left: 0;
	width: 100%;
	height: calc(100% + 5px);
}
#fiche .fiche-head .bg-blur::before {
	background-color: rgba(0, 0, 0, .25);
}
#fiche .fiche-head .bg-blur::after {
	background: -moz-linear-gradient(top, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, .013) 10.8%, rgba(244, 244, 244, .049) 20.9%, rgba(244, 244, 244, .104) 30.4%, rgba(244, 244, 244, .175) 39.1%, rgba(244, 244, 244, .259) 47.3%, rgba(244, 244, 244, .352) 54.8%, rgba(244, 244, 244, .45)  61.7%, rgba(244, 244, 244, .55) 68.1%, rgba(244, 244, 244, .648) 74%, rgba(244, 244, 244, .741) 79.4%, rgba(244, 244, 244, .825) 84.3%, rgba(244, 244, 244, .896) 88.8%, rgba(244, 244, 244, .951) 92.9%, rgba(244, 244, 244, .987) 96.6%, rgba(244, 244, 244, 1) 100%);
	background: -webkit-linear-gradient(top, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, .013) 10.8%, rgba(244, 244, 244, .049) 20.9%, rgba(244, 244, 244, .104) 30.4%, rgba(244, 244, 244, .175) 39.1%, rgba(244, 244, 244, .259) 47.3%, rgba(244, 244, 244, .352) 54.8%, rgba(244, 244, 244, .45)  61.7%, rgba(244, 244, 244, .55) 68.1%, rgba(244, 244, 244, .648) 74%, rgba(244, 244, 244, .741) 79.4%, rgba(244, 244, 244, .825) 84.3%, rgba(244, 244, 244, .896) 88.8%, rgba(244, 244, 244, .951) 92.9%, rgba(244, 244, 244, .987) 96.6%, rgba(244, 244, 244, 1) 100%);
	background: linear-gradient(to bottom, rgba(244, 244, 244, 0) 0%, rgba(244, 244, 244, .013) 10.8%, rgba(244, 244, 244, .049) 20.9%, rgba(244, 244, 244, .104) 30.4%, rgba(244, 244, 244, .175) 39.1%, rgba(244, 244, 244, .259) 47.3%, rgba(244, 244, 244, .352) 54.8%, rgba(244, 244, 244, .45)  61.7%, rgba(244, 244, 244, .55) 68.1%, rgba(244, 244, 244, .648) 74%, rgba(244, 244, 244, .741) 79.4%, rgba(244, 244, 244, .825) 84.3%, rgba(244, 244, 244, .896) 88.8%, rgba(244, 244, 244, .951) 92.9%, rgba(244, 244, 244, .987) 96.6%, rgba(244, 244, 244, 1) 100%);
}

#fiche .fiche-head .new-top-left {
	top: 0;
	left: 15px;
}
#fiche .fiche-head .new-top-right {
	top: 0;
	right: 15px;
}
#fiche .fiche-head .new-bottom-left {
	bottom: 0;
	left: 15px;
}
#fiche .fiche-head .new-bottom-right {
	bottom: 0;
	right: 15px;
}

#fiche .fiche-head > *:not(.bg-blur) {
	z-index: 4;
}
#fiche .fiche-head .card {
    -ms-flex-direction: row;
    	flex-direction: row;
	color: #fff;
	box-shadow: inset 0 4px 0 0 rgba(255, 255, 255, .15);
}
#fiche .fiche-head .card-img {
	width: 180px;
	margin-left: 36px;
    margin-right: 10px;
}
#fiche .fiche-head .card-img img,
#fiche .fiche-head .card-img .img > a > i {
	position: relative;
    top: 40px;
	width: 180px;
	border: 0;
	overflow: hidden;
	box-shadow: 0 0 0 6px #ececec,
				0 2px 0 6px rgba(0, 0, 0, .14);
}
#fiche .fiche-head .card-img img {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #ececec;
}

#fiche .fiche-head .card-img span {
	position: absolute;
    z-index: 2;
    bottom: -46px;
    width: 100%;
    height: 34px;
    border-radius: 100%;
    overflow: hidden;
}
#fiche .fiche-head .card-img span::before {
	display: block;
	position: absolute;
	content: '';
	bottom: 0;
    left: -6px;
	width: 192px;
	height: 192px;
	border-radius: 50%;
	background-color: rgba(50, 50, 50, .9);
}

#fiche .fiche-head .card-body {
    max-width: calc(100% - 220px);
    min-height: 184px;
    padding-top: 46px;
	padding-bottom: .4rem;
}
#fiche .fiche-head .card-body h2 {
	display: inline-block;
    max-width: calc(100% - 48px);
	margin-bottom: 0;
}
#fiche .fiche-head .card-body h2 span {
	border: 1px solid transparent;
}
#fiche .fiche-head .card-body h2 strong {
    max-width: calc(100% - 42px);
	color: #fff;
	font-size: 1.6rem;
}
#fiche .fiche-head .card-body h2 em {
	margin-top: -4px;
	font-size: .9rem;
    line-height: 1.4em;
	font-style: normal;
}
#fiche .fiche-head .card-body i.homme,
#fiche .fiche-head .card-body i.femme,
#fiche .fiche-head .card-body i.couple {
	top: -1px;
	width: 34px;
	height: 34px;
	background-size: 640px auto;
    vertical-align: top;
}
#fiche .fiche-head .card-body i.femme {
	background-position: 0 -2274px;
}
#fiche .fiche-head .card-body i.homme {
	background-position: -33px -2274px;
}
#fiche .fiche-head .card-body i.couple {
	background-position: -67px -2274px;
}
#fiche .fiche-head .card-body hr {
	margin: .7rem 0 .8rem 0;
    border-top: 1px solid #fff;
	opacity: .2;
}
#fiche .fiche-head .card-body blockquote {
	margin-bottom: .2rem;
	font-size: .9em;
    line-height: 1.35rem;
}
#fiche .fiche-head .card-body p {
	margin-bottom: 0;
	opacity: .8;
	line-height: .95em;
}
#fiche .fiche-head .options {
	z-index: 3;
}
#fiche .fiche-head ul {
	list-style: none;
}
#fiche .fiche-head .options.plus {
	display: inline-block;
	vertical-align: top;
}
@media all and (-ms-high-contrast:none) {
     #fiche .fiche-head .options.plus {
		 height: 0;
	 }
}
#fiche .fiche-head .options.plus a[data-toggle="dropdown"] i {
	top: -4px;
}
#fiche .fiche-head .options.plus ul {
    z-index: 1200;
	width: 200px;
}
#fiche .fiche-head .options.plus ul li {
	display: inline-block;
	position: relative;
	width: 180px;
	padding: 2px 0;
	font-size: .85em;
	line-height: 1.2em;
	vertical-align: top;
}
#fiche .fiche-head .options.plus ul li a {
	text-decoration: none;
	padding: .2rem 1rem .2rem 0;
}
#fiche .fiche-head .options.plus ul li a:hover span {
	text-decoration: underline;
}
#fiche .fiche-head .options.plus ul li a i {
    opacity: .3;
}
#fiche .fiche-head .options.plus ul li a:hover i {
    opacity: .6;
}
#fiche .fiche-head .options.plus ul li .badge {
	top: -3px;
    padding: 2px 6px 3px 17px;
	margin-left: 40px;
	text-decoration: none !important;
}
#fiche .fiche-head .options.plus ul li .badge .icon.check {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 9px;
    height: 9px;
    opacity: .75;
    background-position: -220px -532px;
}
#fiche .fiche-head .options.plus ul li span:not(.badge) {
	display: inline-block;
	vertical-align: middle;
}
#fiche .fiche-head .options.contact ul {
	width: 100%;
	padding: 9px 0 9px 235px;
	margin: 0;
}
#fiche .fiche-head .options.contact li,
#fiche .fiche-head .options.contact li a,
#fiche .fiche-head .options.contact li a > span {
	display: inline-block;
}
#fiche .fiche-head .options.contact li a.inactive {
	cursor: default;
	opacity: .4;
}
#fiche .fiche-head .options.contact li a.inactive span,
#fiche .fiche-head .options.contact li a.inactive strong {
	color: #888 !important;
}
#fiche .fiche-head .options.contact li {
	margin-right: 10px;
	vertical-align: top;
}
#fiche .fiche-head .options.contact li a {
	position: relative;
	padding: 4px 0;
	margin-right: 10px;
}
#fiche .fiche-head .options.contact li a > i {
	position: absolute;
	top: 0;
	left: 0;
}
#fiche .fiche-head .options.contact li a > i.godial.color {
	width: 40px;
	height: 40px;
	background-size: 523px auto;
	background-position: -235px -801px;
}
#fiche .fiche-head .options.contact li a > i.gocourrier.color {
	width: 40px;
	height: 40px;
	background-size: 532px auto;
	background-position: -279px -815px;
}
#fiche .fiche-head .options.contact li a > i.user-add {
    background-position: -280px -244px;
}
#fiche .fiche-head .options.contact li a > i.user-added {
    background-position: -320px -244px;
}
#fiche .fiche-head .options.contact li a > i.note.black {
	opacity: .5;
    background-position: -360px -403px;
}
#fiche .fiche-head .options.contact li a > span {
	padding-left: 42px;
	font-size: .85em;
	line-height: .95rem;
	color: #a2a2a2;
}
#fiche .fiche-head .options.contact li strong {
	display: block;
}
#fiche .fiche-head .options.contact li .badge {
	padding-left: 17px;
}
#fiche .fiche-head .options.contact li .badge .icon.remove {
	position: absolute;
    top: 5px;
    left: 6px;
    width: 7px;
    height: 7px;
	opacity: .75;
    background-position: -252px -531px;
}

#fiche .fiche-head .notes {
	background-color: rgba(0, 0, 0, .5);
}
#fiche .fiche-head .notes a[data-toggle="collapse"] {
	display: inline-block;
	width: 100%;
	margin-bottom: 6px;
	border-bottom: 1px solid transparent;
}
#fiche .fiche-head .notes a[data-toggle="collapse"][aria-expanded="true"] {
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
#fiche .fiche-head .notes h3 {
	position: relative;
	font-size: 1.2em;
}
#fiche .fiche-head .notes a h3 + small {
	display: inline-block;
	position: relative;
	width: 100%;
	top: -5px;
	opacity: .7;
}
#fiche .fiche-head .notes a:hover {
	text-decoration: none;
}
#fiche .fiche-head .notes a h3 i {
	position: absolute;
	top: 7px;
	right: -20px;
}
#fiche .fiche-head .notes a[aria-expanded="true"] h3 i {
	background-position: -90px -580px;
	opacity: 1;
}
#fiche .fiche-head .notes blockquote {
	display: inline-block;
	width: 100%;
	color: #fff;
	font-size: .8em;
	font-style: italic;
	vertical-align: top;
}
#fiche .fiche-head .notes blockquote:first-child {
	border-top: 10px solid transparent;
}

@media (min-width: 1250px) {
	#fiche .fiche-head .options.plus {
		position: absolute;
		top: -5px;
		right: 14px;
	}
	#fiche .fiche-head .options.plus > a {
		display: none;
	}
	#fiche .fiche-head .options.plus ul {
		display: inline-block;
		position: relative !important;
		width: auto;
		border: 0;
		background-color: transparent;
		box-shadow: none;
		transform: none !important;
	}
	#fiche .fiche-head .options.plus ul li {
		width: auto;
		font-size: .75em;
		border: 0 !important;
	}
	#fiche .fiche-head .options.plus ul li a {
		padding-right: .5rem;
		color: #fff;
	}
	#fiche .fiche-head .options.plus ul li a i {
		opacity: .5;
	}
	#fiche .fiche-head .options.plus ul li a .icon.profil-bloques.black {
    	background-position: -200px -280px;
	}
	#fiche .fiche-head .options.plus ul li a .icon.admin.black {
    	background-position: -320px -360px;
	}
	#fiche .fiche-head .options.plus ul li a span {
		width: auto;
		opacity: .7;
	}
	#fiche .fiche-head .options.plus ul li:hover a > span,
	#fiche .fiche-head .options.plus ul li:hover a i,
	#fiche .fiche-head .options.plus ul li.active a > span,
	#fiche .fiche-head .options.plus ul li.active a i {
		opacity: 1 !important;
	}
	#fiche .fiche-head .options.plus ul li a strong {
		display: block;
	}
}
@media (max-width: 1249px) {
	#fiche .fiche-head .options.plus ul li span:not(.badge) {
		width: calc(100% - 50px);
	}
	#fiche .fiche-head .card-body h2 em span:not(.badge) {
		display: block;
		line-height: 1.25em;
		margin-top: 5px;
	}
	#fiche .fiche-head .options.plus {
		position: absolute;
		top: 30px;
		right: 30px;
	}
}
@media (max-width: 991px) {
	#fiche .fiche-head .card-img {
	    width: 180px;
	}
	#fiche .fiche-head .card-img img, 
	#fiche .fiche-head .card-img .img > a > i,
	#fiche .fiche-head .card-img .img > a > i::after {
		width: 140px;
		height: 140px;
		box-shadow: 0 0 0 5px #ececec, 
					0 2px 0 6px rgba(0, 0, 0, .14);
	}
	#fiche .fiche-head .card-img .img > a > i,
	#fiche .fiche-head .card-img .img > a > i::after {
		background-size: 2674px auto;
	}
	#fiche:not(.galerie) .fiche-head .card-img span {
		width: 150px;
		height: 150px;
		bottom: -45px;
		height: 30px;
	}
	#fiche .fiche-head .card-img span::before {
		width: 150px;
		height: 150px;
		left: -5px;
	}
	#fiche .fiche-head .card-body {
		min-width: calc(100% - 180px);
	}
	#fiche .fiche-head .options.contact ul {
		width: 100%;
		padding: 9px 30px;
	}
	#fiche .fiche-head .options.contact li {
		width: calc(24% - 10px);
		text-align: center;
	}
	#fiche .fiche-head .options.contact li a {
		margin-right: 0;
		vertical-align: top;
	}
	#fiche .fiche-head .options.contact li a > i {
		position: relative;
		display: block;
		left: calc(50% - 20px);
	}
	#fiche .fiche-head .options.contact li a > span {
		padding-left: 0;
	}
}
@media (max-width: 768px) {
	#fiche .fiche-head .card {
		-ms-flex-direction: column;
			flex-direction: column;
		text-align: center;
	}
	#fiche .fiche-head .card-img {
		width: 100% !important;
		margin: 0;
		text-align: center;
	}
	#fiche .fiche-head .card-img img,
	#fiche .fiche-head .card-img .img > a > i {
		top: 18px;
	}
	#fiche:not(.galerie) .fiche-head .card-img span {
		bottom: -23px !important;
	}
	#fiche .fiche-head .card-body {
	    max-width: 100%;
	    min-height: auto;
		padding-top: 26px;
	}
	#fiche .fiche-head .card-body p,
	#fiche .fiche-head .notes h3,
	#fiche .fiche-head .notes h3 + small,
	#fiche .fiche-head .notes .text-right {
		text-align: center !important;
	}
	#fiche .fiche-head .options.contact ul {
		padding: 9px 30px;
	}
	#fiche .fiche-head .options.contact li {
		width: 48%;
		margin-right: 0;
		text-align: center;
	}
}


/*---------------------------------- Body ---------------------------------*/

#fiche .fiche-body {
	padding: 0 40px;
	margin-bottom: 10px;
}
#fiche .fiche-body:last-child {
	margin-bottom: 30px;
}
#fiche .fiche-body h3 {
	display: block;
	margin-bottom: .8rem;
    font-size: 1.25rem;
}
#fiche:not(.link) .fiche-body h3 {
	position: relative;
	padding-left: 0;
}
#fiche:not(.link) .fiche-body h3 i {
	position: relative;
}
#fiche .fiche-body a {
	text-decoration: none;
}
#fiche .fiche-body .link a {
	position: relative;
	min-height: 100px;
}
#fiche .fiche-body .link.inactive a {
	opacity: .5;
	cursor: default;
	background-color: #aaa !important;
}
#fiche .fiche-body .link i {
	display: block;
	left: 50%;
	margin-left: -20px;
}
#fiche .fiche-body .row {
    align-items: center;
    justify-content: center;
}
#fiche .fiche-body .photos ul.grid-gallery li {
	-ms-flex: 0 0 16.666666%;
	flex: 0 0 16.666666%;
	max-width: 16.666666%;
}
#fiche .fiche-body .lastvisible .img {
	border: 0;
}
#fiche .fiche-body .lastvisible .img::before {
	position: absolute;
	z-index: 12;
	content: '+' attr(data-before);
	width: 100%;
	height: 100%;
	padding-top: calc(50% - 24px);
	color: #fff;
	font-size: 2rem;
}
#fiche .fiche-body ul.grid-gallery li.lock .img::after {
	display: inline-block;
    position: absolute;
    z-index: 10;
    top: calc(50% + 19px);
    left: calc(50% - 48px);
    width: 96px;
    padding: 2px 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.05;
    color: #fff;
    border-radius: 3px;
    background-color: #888;
}
#fiche .fiche-body .photos ul.grid-gallery li.lock .img::after {
	content: 'Photo protégée';
}
#fiche .fiche-body .webcams ul.grid-gallery li.lock .img::after,
#fiche .fiche-body .videos ul.grid-gallery li.lock .img::after {
	content: 'Vidéo protégée';
}
#fiche .fiche-body ul.grid-gallery li i.lock,
#baguetteBox-slider i.lock {
	position: absolute;
	z-index: 10;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    width: 50px;
    height: 50px;
	margin: 0;
	border-radius: 50%;
	background-size: 607px auto;
	background-position: -408px -879px;
    background-color: #fff;
}
#fiche .fiche-body ul.grid-gallery li.unlock i.lock {
	top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background-size: 260px auto;
    background-position: -174px -376px;
}
#fiche .fiche-body .photos ul.grid-gallery li span.name {
	padding-bottom: 0;
}
@media (min-width: 1440px) {
	#fiche:not(.galerie) .fiche-body .photos ul.grid-gallery li:nth-child(n+7) {
		display: none;
	}
}
@media (max-width: 1439px) {
	#fiche .fiche-body .photos ul.grid-gallery li {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
	}
	#fiche:not(.galerie) .fiche-body .photos ul.grid-gallery li:nth-child(n+6) {
		display: none;
	}
}
@media (max-width: 1023px) {
	#fiche .fiche-body .photos ul.grid-gallery li {
		display: block;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
	}
	#fiche:not(.galerie) .fiche-body .photos ul.grid-gallery li:nth-child(n+5) {
		display: none;
	}
}
@media (max-width: 879px) {
	#fiche .fiche-body .photos ul.grid-gallery li {
		display: block !important;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	#fiche:not(.galerie) .fiche-body .photos ul.grid-gallery li:nth-child(n+7) {
		display: none !important;
	}
}
@media (max-width: 767px) {
	#fiche .fiche-head .card-body blockquote::before {
		position: relative;
		left: -5px;
	}
	#fiche .fiche-body .photos ul.grid-gallery li {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	#fiche:not(.galerie) .fiche-body .photos ul.grid-gallery li:nth-child(n+5) {
		display: none !important;
	}
	#fiche .fiche-body .link a {
		min-height: auto;
	}
}
@media (max-width: 389px) {
	#fiche .fiche-body h3 {
		width: 100%;
		text-align: center;
	}
	#fiche .fiche-body .photos ul.grid-gallery li {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}


/*-------------------------------- Galerie --------------------------------*/

#fiche.galerie .fiche-head {
	min-height: 190px;
}
#fiche.galerie .fiche-head .card-img {
	width: 160px;
}
#fiche.galerie .fiche-head .card-img img, 
#fiche.galerie .fiche-head .card-img .img a > i,
#fiche.galerie .fiche-head .card-img .img a > i::after {
	width: 120px !important;
	height: 120px !important;
	box-shadow: 0 0 0 5px #ececec, 
				0 2px 0 6px rgba(0, 0, 0, .14);
}
#fiche.galerie .fiche-head .card-img img, 
#fiche.galerie .fiche-head .card-img .img a > i {
	top: 20px;
}
#fiche.galerie .fiche-head .card-img span {
	bottom: -25px;
    height: 30px;
}
#fiche.galerie .fiche-head .card-img span::before {
	left: -5px;
	width: 130px;
	height: 130px;
}
#fiche.galerie .fiche-head .card-body {
	min-width: calc(100% - 160px);
	min-height: auto;
}
#fiche.galerie .fiche-head .options.contact ul {
    padding-left: 180px;
}
#fiche.galerie .fiche-head #notes {
	display: none !important;
}
#fiche.galerie .fiche-body ul.grid-gallery li {
	display: inline-block !important;
}
@media (max-width: 1023px) {
	#fiche.galerie .fiche-head .options.contact ul {
		padding-left: 30px;
	}
}
@media (max-width: 767px) {
	#fiche.galerie .fiche-head .card-body p {
		margin-top: 0 !important;
	}
	#fiche.galerie .fiche-body .listnav > .col-12:first-child {
		padding-top: 10px;
		padding-bottom: 16px;
		text-align: center;
	}
}


/*------------------------- Galerie vidéos/webcams ------------------------*/

#fiche .fiche-body .videos ul.grid-gallery li,
#fiche .fiche-body .webcams ul.grid-gallery li {
    -ms-flex: 0 0 33.333333%;
   		flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
@media (max-width: 1439px) {
	#fiche .fiche-body .videos ul.grid-gallery li,
	#fiche .fiche-body .webcams ul.grid-gallery li {
		-ms-flex: 0 0 50%;
			flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 879px) {
	#fiche .fiche-body .videos ul.grid-gallery li,
	#fiche .fiche-body .webcams ul.grid-gallery li {
		-ms-flex: 0 0 100%;
			flex: 0 0 100%;
		max-width: 100%;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Webcams -------------------------------------------
  ==============================================================================================
*/

#webcams .advtabs {
	margin-bottom: 2px;
}
#webcams .list {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}


/*--------------------------------- Liste ---------------------------------*/

#webcams ul.grid-gallery li {
    -ms-flex: 0 0 25%;
   		flex: 0 0 25%;
    max-width: 25%;
}
@media (max-width: 1439px) {
	#webcams ul.grid-gallery li {
		-ms-flex: 0 0 33.333333%;
			flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}
@media (max-width: 879px) {
	#webcams ul.grid-gallery li {
		-ms-flex: 0 0 50%;
			flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (min-width: 576px) and (max-width: 699px),
(max-width: 460px) {
	#webcams ul.grid-gallery li {
		-ms-flex: 0 0 100%;
			flex: 0 0 100%;
		max-width: 100%;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Zapping -------------------------------------------
  ==============================================================================================
*/

#zapping .advtabs {
	margin-bottom: 2px;
}


/*---------------------------------- Zoom ---------------------------------*/

#zapping #carousel-zoom {
	height: 600px;
	background: #bbb;
	background: -moz-radial-gradient(center, ellipse cover, #ddd 0%, #aaa 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #ddd 0%, #aaa 100%);
	background: radial-gradient(ellipse at center, #ddd 0%, #aaa 100%);
}
#zapping #carousel-zoom #baguetteBox-overlay {
	position: relative;
	background-color: transparent !important;
}
#zapping #carousel-zoom #baguetteBox-overlay .full-image {
	padding: 10px 0;
}
#zapping #carousel-zoom figcaption {
	height: 140px;
	padding: 108px 6px 6px 6px;
	color: #fff;
    background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgba(80,80,80,.9) 100%);
    background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgba(80,80,80,.9) 100%);
    background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgba(80,80,80,.9) 100%);
}
#zapping #carousel-zoom figcaption i {
	margin-top: -3px;
	margin-left: 3px;
}
#zapping #carousel-zoom figcaption .badge {
	top: -2px;
	margin-left: 4px;
}
#zapping[nonsubscriber] #carousel-zoom #baguetteBox-overlay .full-image figure,
#zapping[nonsubscriber] #carousel-zoom #baguetteBox-overlay .full-image figure > span {
	width: 100%;
	height: 100%;
}
#zapping[nonsubscriber] #carousel-zoom img {
	opacity: 0;
	width: 100%;
	height: 100%;
	background-size: inherit !important;
}
#zapping[nonsubscriber] #carousel-zoom img.show {
	opacity: 1;
}
@media (max-width: 649px) {
	#zapping #carousel-zoom figcaption {
		padding-top: 88px;
	}
	#zapping #carousel-zoom figcaption .badge {
	    display: block;
	}
}
@media (min-width: 576px) and (max-width: 680px),
(max-width: 460px) {
	#zapping #carousel-zoom {
		height: 400px;
	}
}
@media (max-width: 359px) {
	#zapping #carousel-zoom {
		height: 350px;
	}
}


/*------------------------------- Miniatures ------------------------------*/

#zapping .imgslider ul li.loader {
    position: relative;
    width: 102px;
    height: 102px;
    vertical-align: top;
}
#zapping .imgslider ul li.loader .spin:after {
    background-color: #f4f4f4;
}




/*
  ==============================================================================================
  ------------------------------------------ Support -------------------------------------------
  ==============================================================================================
*/


#support {
	position: relative;
	background-color: rgba(30, 30, 30, .7) !important;
}
#support::before,
#support::after {
	display: block;
	position: absolute;
	width: 116px;
	height: 36px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
	transform: rotate(45deg);
}
#support::before {
	content: 'Support';
    top: 10px;
    right: -30px;
	padding: 4px 0;
	font-size: .75em;
	font-weight: bold;
	background-color: #17a2b8;
}
#support::after {
	content: 'Technique';
    top: 22px;
    right: -18px;
	font-size: .6em;
}
#support .subtitle {
	color: #fff !important;
}
#support a.moreinfo {
	top: -15px;
}


/*-------------------------------- Onglets --------------------------------*/

#support .nav-pills .nav-link:not(.active), 
#support .nav-pills .show > .nav-link:not(.active) {
    color: #ccc;
}
#support .nav-pills .nav-link:not(.active):hover, 
#support  .nav-pills .show > .nav-link:not(.active):hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .15);
}


/*------------------------------ Champ "file" -----------------------------*/

#support .custom-file-input {
	z-index: 1;
	width: 160px;
}
#support .custom-file-label {
	z-index: 2;
	right: auto;
	width: 160px;
	height: 35px;
	padding: 0;
	border: 0 !important;
	box-shadow: none;
	font-size: 0;
}
#support .custom-file-label::after {
	position: relative;
    content: attr(data-label) !important;
	width: auto;
	border: 0;
	border-radius: 1.5rem;
	font-size: .9rem;
	letter-spacing: -.02em;
	padding: 0.45rem 1.3rem;
	box-shadow: inset 1px 1px 0 1px rgba(255, 255, 255, .35),
				inset -1px -1px 0 1px rgba(0, 0, 0, .11),
				0 -1px 0 1px rgba(0, 0, 0, .08),
				0 1px 0 1px rgba(255, 255, 255, .2);
	color: #fff !important;
    font-size: 0.8rem;
    padding: 0.4rem 1.1rem;
    letter-spacing: 0;
	cursor: pointer;
	background: -moz-linear-gradient(top, #424242 20%, #6e6e6e 100%);
	background: -webkit-linear-gradient(top, #424242 20%, #6e6e6e 100%);
	background: linear-gradient(to bottom, #424242 20%, #6e6e6e 100%);
}


/*---------------------------- Galerie d'images ---------------------------*/

#support ul.grid-gallery li {
    max-width: 140px;
}
#support ul.grid-gallery li span.name {
    padding: 4px 0 8px 0;
    font-size: .8rem;
}


/*-------------------------------- Captcha --------------------------------*/

@media (max-width: 689px) {
	#support iframe {
		transform-origin: 0 0;
		transform: scale(.65);
	}
}


/*----------------------------- Alerte message ----------------------------*/

#support .notabene-danger .collapse a {
	color: white !important;
}


/*--------------------------- Liste des tickets ---------------------------*/

#support .list thead th.ticket {
	width: 80px;
}
#support .list thead th.date-create {
	width: 22%;
}
#support .list thead th.date-answer {
	width: 160px;
}
#support .list:not(.detail) tbody tr {
	cursor: pointer;
}
#support .list:not(.detail) tbody tr:hover {
	background-color: rgba(0, 0, 0, .085);
}
#support .list tbody th,
#support .list tbody td {
	vertical-align: top;
}

@media (max-width: 991px) {
	#support .list thead th.date-create {
		width: auto;
	}
}
@media (max-width: 940px) {
	#support .list .email {
		display: none;
	}
}
@media (max-width: 767px) {
	#support .list.detail tbody th {
		display: none;
	}
	#support .list.detail tbody td::before {
		display: block;
		content: attr(data-title);
		width: 100%;
		color: #999;
	}
	#support .list.thread .card-body {
	    margin-top: 20px !important;
	}
	#support .list.thread .card-body em {
		top: 65px;
		bottom: auto;
	}
}
@media (min-width: 576px) and (max-width: 715px),
(max-width: 505px) {
	#support .list thead th.date-create {
		width: auto;
		border-top-right-radius: 10px;
	}
	#support .list .date-answer {
		display: none;
	}
	#support .list tbody th {
		padding-bottom: 30px;
	}
	#support .list tbody .ticket[data-answer]::before {
		display: inline-block;
		position: absolute;
		z-index: 1;
		content: 'Réponse le ' attr(data-answer);
		bottom: 11px;
		left: 10px;
		width: 186px;
		padding: 0 5px;
		text-align: center;
		border-radius: 4px;
		color: #fff;
		font-size: .9em;
		background-color: #999;
	}
}
@media (max-width: 350px) {
	#support .list thead th.ticket {
		width: 60px;
	}
}


/*--------------------------- Détail d'un ticket --------------------------*/

#support .list.detail tbody th,
#support .list.detail tbody td {
	border-top: 1px solid rgba(0, 0, 0, .05);
}
#support .list.detail tbody th {
	width: 130px;
}
#support .list.detail tbody tr:first-child th,
#support .list.detail tbody tr:first-child td {
	border-top: 0;
}

#support .list.detail ul.grid-gallery li {
    max-width: 110px;
	margin-bottom: 0;
}
#support .list.detail ul.grid-gallery li span.name {
    font-size: .65rem;
	color: #999;
}
#support .card-img {
    border-left: 4px dotted rgba(255, 255, 255, .2);
}
#support .thread .answer .card-body span.rounded::before {
    border-color: transparent #17a2b8 transparent transparent;
}
#support .list.thread .card-body em {
    color: #ddd !important;
}

@media (max-width: 767px) {
	#support .thread .answer .card-body span.rounded::before {
		border-color: transparent transparent #17a2b8 transparent;
	}
}




/*
  ==============================================================================================
  ------------------------------------------ Bannière ------------------------------------------
  ==============================================================================================
*/

#skyc {
	position: absolute;
	display: none;
	z-index: 101;
	top: 234px;
	left: calc(100% - 210px);
}
@media (min-width: 2060px) {
	#skyc {
	    left: calc(50% + 810px);
	}
}
@media (min-width: 1200px) {
	#skyc {
		display: block;
	}
}
@media (min-height: 834px) {
	#skyc {
		position: fixed;
	}
}




/*
  ==============================================================================================
  ------------------------------------------- Footer -------------------------------------------
  ==============================================================================================
*/

footer {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
footer .container {
	padding: 30px 0;
}
footer ul {
	margin-top: 14px;
}
footer ul li a {
	display: inline-block;
	line-height: 1em;
	padding-left: .5rem;
}
footer ul li a small {
	font-size: .8em;
}
footer ul li:not(:first-child) a {
	border-left: 1px solid #666;
}
footer h6 {
	margin: 0;
	padding: 0;
}
footer h6 a {
	display: inline-block;
	vertical-align: top;
	font-size: 0;
}




/*
  ==============================================================================================
  --------------------------------------- Animations CSS ---------------------------------------
  ==============================================================================================
*/

html:not(.dial-opened) body:not(.baguetteBox-open) #notifications .blink i {
	animation: Blink-shake 2s infinite;
}
html:not(.dial-opened) body:not(.baguetteBox-open) #notifications .blink .count,
.blink:not(:hover) {
	animation: Blink-zoom 1s infinite;
}

@-webkit-keyframes Blink-zoom {
	0% 		{ opacity: 1; }
	50% 	{ opacity: .5; }
	100% 	{ opacity: 1; }
}
@-moz-keyframes Blink-zoom {
	0% 		{ opacity: 1; }
	50% 	{ opacity: .5; }
	100% 	{ opacity: 1; }
}
@-o-keyframes Blink-zoom {
	0% 		{ opacity: 1; }
	50% 	{ opacity: .5; }
	100% 	{ opacity: 1; }
}
@keyframes Blink-zoom {
	0% 		{ opacity: 1; }
	50% 	{ opacity: .5; }
	100% 	{ opacity: 1; }
}

@-webkit-keyframes Showinfo-top {
	0% 		{ opacity: 0; top: -100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@-moz-keyframes Showinfo-top {
	0% 		{ opacity: 0; top: -100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@-o-keyframes Showinfo-top {
	0% 		{ opacity: 0; top: -100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@keyframes Showinfo-top {
	0% 		{ opacity: 0; top: -100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}

@-webkit-keyframes Hideinfo-top {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: -100px; max-height: 0; }
}
@-moz-keyframes Hideinfo-top {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: -100px; max-height: 0; }
}
@-o-keyframes Hideinfo-top {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: -100px; max-height: 0; }
}
@keyframes Hideinfo-top {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: -100px; max-height: 0; }
}

@-webkit-keyframes Showinfo-bottom {
	0% 		{ opacity: 0; top: 100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@-moz-keyframes Showinfo-bottom {
	0% 		{ opacity: 0; top: 100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@-o-keyframes Showinfo-bottom {
	0% 		{ opacity: 0; top: 100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}
@keyframes Showinfo-bottom {
	0% 		{ opacity: 0; top: 100px; max-height: 0; }
	100% 	{ opacity: 1; top: 0; max-height: 200px; }
}

@-webkit-keyframes Hideinfo-bottom {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: 100px; max-height: 0; }
}
@-moz-keyframes Hideinfo-bottom {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: 100px; max-height: 0; }
}
@-o-keyframes Hideinfo-bottom {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: 100px; max-height: 0; }
}
@keyframes Hideinfo-bottom {
	0% 		{ opacity: 1; top: 0; max-height: 200px; }
	100% 	{ opacity: 0; top: 100px; max-height: 0; }
}

@-webkit-keyframes Show-scale-opacity {
	0% 		{ -webkit-transform: scale(.2); opacity: 0; }
	100% 	{ -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes Show-scale-opacity {
	0% 		{ -moz-transform: scale(.2); opacity: 0; }
	100% 	{ -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes Show-scale-opacity {
	0% 		{ -o-transform: scale(.2); opacity: 0; }
	100% 	{ -o-transform: scale(1); opacity: 1; }
}
@keyframes Show-scale-opacity {
	0% 		{ transform: scale(.2); opacity: 0; }
	100% 	{ transform: scale(1); opacity: 1; }
}

@-webkit-keyframes Blink-shake {
	0% 	{ -webkit-transform: translateX(2px) rotate(2deg) scale(1); }
	3% 	{ -webkit-transform: translateX(-2px) rotate(-2deg) scale(1.04); }
	6% 	{ -webkit-transform: translateX(2px) rotate(2deg) scale(1.08); }
	9% 	{ -webkit-transform: translateX(-2px) rotate(-2deg) scale(1.11); }
	12% { -webkit-transform: translateX(1px) rotate(1deg) scale(1.13); }
	15% { -webkit-transform: translateX(-1px) rotate(-1deg) scale(1.11); }
	18% { -webkit-transform: translateX(1px) rotate(1deg) scale(1.08); }
	21% { -webkit-transform: translateX(-1px) rotate(-1deg) scale(1.04); }
	24% { -webkit-transform: translateX(.5px) rotate(0) scale(1); }
	27% { -webkit-transform: translateX(-.5px) rotate(0) scale(1); }
	30% { -webkit-transform: translateX(0) rotate(0) scale(1); }
}
@-moz-keyframes Blink-shake {
	0%  { -moz-transform: translateX(2px) rotate(2deg) scale(1); }
	3%  { -moz-transform: translateX(-2px) rotate(-2deg) scale(1.04); }
	6%  { -moz-transform: translateX(2px) rotate(2deg) scale(1.08); }
	9% 	{ -moz-transform: translateX(-2px) rotate(-2deg) scale(1.11); }
	12% { -moz-transform: translateX(1px) rotate(1deg) scale(1.13); }
	15% { -moz-transform: translateX(-1px) rotate(-1deg) scale(1.11); }
	18% { -moz-transform: translateX(1px) rotate(1deg) scale(1.08); }
	21% { -moz-transform: translateX(-1px) rotate(-1deg) scale(1.04); }
	24% { -moz-transform: translateX(.5px) rotate(0) scale(1); }
	27% { -moz-transform: translateX(-.5px) rotate(0) scale(1); }
	30% { -moz-transform: translateX(0) rotate(0) scale(1); }
}
@-o-keyframes Blink-shake {
	0% 	{ -o-transform: translateX(2px) rotate(2deg) scale(1); }
	3% 	{ -o-transform: translateX(-2px) rotate(-2deg) scale(1.04); }
	6% 	{ -o-transform: translateX(2px) rotate(2deg) scale(1.08); }
	9% 	{ -o-transform: translateX(-2px) rotate(-2deg) scale(1.11); }
	12% { -o-transform: translateX(1px) rotate(1deg) scale(1.13); }
	15% { -o-transform: translateX(-1px) rotate(-1deg) scale(1.11); }
	18% { -o-transform: translateX(1px) rotate(1deg) scale(1.08); }
	21% { -o-transform: translateX(-1px) rotate(-1deg) scale(1.04); }
	24% { -o-transform: translateX(.5px) rotate(0) scale(1); }
	27% { -o-transform: translateX(-.5px) rotate(0) scale(1); }
	30% { -o-transform: translateX(0) rotate(0) scale(1); }
}
@keyframes Blink-shake {
	0% 	{ transform: translateX(2px) rotate(2deg) scale(1); }
	3% 	{ transform: translateX(-2px) rotate(-2deg) scale(1.04); }
	6% 	{ transform: translateX(2px) rotate(2deg) scale(1.08); }
	9% 	{ transform: translateX(-2px) rotate(-2deg) scale(1.11); }
	12% { transform: translateX(1px) rotate(1deg) scale(1.13); }
	15% { transform: translateX(-1px) rotate(-1deg) scale(1.11); }
	18% { transform: translateX(1px) rotate(1deg) scale(1.08); }
	21% { transform: translateX(-1px) rotate(-1deg) scale(1.04); }
	24% { transform: translateX(.5px) rotate(1); }
	27% { transform: translateX(-.5px) rotate(1); }
	30% { transform: translateX(0) rotate(0) scale(1); }
}

@-webkit-keyframes Show-height {
	0% 		{ -webkit-transform: scaleY(.4); opacity: 0; }
	100% 	{ -webkit-transform: scaleY(1); opacity: 1; }
}
@-moz-keyframes Show-height {
	0% 		{ -moz-transform: scaleY(.4); opacity: 0; }
	100% 	{ -moz-transform: scaleY(1); opacity: 1; }
}
@-o-keyframes Show-height {
	0% 		{ -o-transform: scaleY(.4); opacity: 0; }
	100% 	{ -o-transform: scaleY(1);	opacity: 1; }
}
@keyframes Show-height {
	0% 		{ transform: scaleY(.4); opacity: 0; }
	100% 	{ transform: scaleY(1); opacity: 1; }
}

@-webkit-keyframes Highlight {
	0% 		{ background-color: rgba(255,0,0,0); }
	50% 	{ background-color: rgba(255,0,0,.5); }
	100% 	{ background-color: rgba(255,0,0,0); }
}
@-moz-keyframes Highlight {
	0% 		{ background-color: rgba(255,0,0,0); }
	50% 	{ background-color: rgba(255,0,0,.5); }
	100% 	{ background-color: rgba(255,0,0,0); }
}
@-o-keyframes Highlight {
	0% 		{ background-color: rgba(255,0,0,0); }
	50% 	{ background-color: rgba(255,0,0,.5); }
	100% 	{ background-color: rgba(255,0,0,0); }
}
@keyframes Highlight {
	0% 		{ background-color: rgba(255,0,0,0); }
	50% 	{ background-color: rgba(255,0,0,.5); }
	100% 	{ background-color: rgba(255,0,0,0); }
}

@-webkit-keyframes Showmessage {
	0% 		{ -webkit-transform: scale(0, 0); }
	100% 	{ -webkit-transform: scale(1, 1); }
}
@-moz-keyframes Showmessage {
	0% 		{ -moz-transform: scale(0, 0); }
	100% 	{ -moz-transform: scale(1, 1); }
}
@-o-keyframes Showmessage {
	0% 		{ -o-transform: scale(0, 0); }
	100% 	{ -o-transform: scale(1, 1); }
}
@keyframes Showmessage {
	0% 		{ transform: scale(0, 0); }
	100% 	{ transform: scale(1, 1); }
}




/*
  ==============================================================================================
  -------------------------------------- Transitions CSS ---------------------------------------
  ==============================================================================================
*/

#mainmenu ul,
#mainmenu ul li a::before,
#searchtoggle,
#annuaire .list .card,
#modal-smileys .modal-body ul li,
.advtabs .nav-pills li a,
#fiche .fiche-body .photos ul.grid-gallery i.lock,
#btn-son i,
ul.grid-gallery li a.delete,
aside#dial #dial-conv-btn,
aside#dial #dial-conv-btn::after,
#dial-window-header ul li::before,
#dial-window-content .list,
#dial-window-content .list ul li,
.modal.movable .modal-header,
.anim-200ms {
	transition: all .2s;
}
header,
#webcams-home h5 > span,
#notifications,
#annonces-home .card-body,
.table-hover tbody tr,
#profil .identification .form-group,
#profil .notification .row,
.anim-bgcolor-200ms {
	transition: background-color .2s;
}
#selection-home img,
#annonces-home img:not(.smiley),
#annuaire .list .card-body img,
#annuaire .list .card-body .img i,
#page,
#page .container,
.isIE #searchsidebar > div,
#searchsidebar a#embedtoggle::before,
#searchsidebar a#embedtoggle i,
.anim-transform-200ms {
	transition: transform .2s ease-out;
}
#carousel-zoomover,
.anim-opacity-transform-200ms {
	transition: transform .2s ease-out, opacity .2s;
}
#searchsidebar form,
#dial-window-content .messages,
#dial-container,
.anim-opacity-200ms {
	transition: opacity .2s;
}
#annuaire .list > div,
ul.grid-gallery li img,
.anim-300ms {
	transition: all .3s;
}
#dial-window,
.anim-transform-400ms {
	transition: all .4s;
}
#fiche .fiche-head .bg-blur,
#zapping #carousel-zoom img,
.anim-opacity-300ms {
	transition: opacity .3s;
}
.no-anim {
	transition: none !important;
}

@media (max-width: 575px) {
	header h1 {
		transition: transform .2s, opacity .2s;
	}
	header #clonednotifs {
		transition: transform .2s .3s, opacity .2s .3s;
	}
	header #enligne {
		transition: transform .2s .4s, opacity .2s .4s;
	}
	header #optionsmenu {
		transition: transform .2s .5s, opacity .2s .5s;
	}
}