@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');

.nav-next
{
	text-align:center;
}

.error-page-nofound-title
{
	font-size: 123px;
	margin-top: 150px;
}

.error-page-subtitle
{
	font-size: 49px;
	font-weight: bold;
}

.pourcentage-profil
{
	width: 100%;
	text-align: center;
	border: 1px solid #000;
	box-sizing: border-box;
	border-radius: 6px;
	margin-bottom: 15px;
	margin-top: 15px;
}

.englobe-galerry
{
	overflow:auto;
}

.photo-galerie
{
	width: 140px;
	height: 140px;
	float: left;
	margin-right: 5px;
}

.photo-galerie img
{
	width:100%;
	height:auto;
}

.englobe-galerie-profil
{
	overflow:auto;
	overflow-y:hidden;
}

.btn-delete-galerry
{
	position: absolute;
	width: 20px;
	height: 25px;
	background-color: #f00;
	padding-left: 9px;
	padding-top: 5px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.pourcentage-rempli
{
	width:0%;
	background-color:#e74c3c;
}

.selected
{
	background-color:#9b9b9b !important;
}

.textaddprofil
{
	position: absolute;
	font-size: 12px;
	width: 135px;
	text-align: center;
	padding-top: 54px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 2px 2px #514e4e;
}

.search-mobile
{
	display:none;
}

.fullinput
{
	width: 95%;
	margin-left: 11px;
	margin-right: 11px;
	box-sizing: border-box;
	height: 35px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.fulllabel
{
	margin-left: 10px;
	font-weight: bold;
}

.btn-black
{
	background-color: #000;
	padding: 10px;
	border-radius: 16px;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

/* Switch */

.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider_switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider_switch:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  top: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider_switch {
  background-color: #E74C3C;
}

input:focus + .slider_switch {
  box-shadow: 0 0 1px #E74C3C;
}

input:checked + .slider_switch:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

.slider_switch.round {
  border-radius: 34px;
}

.slider_switch.round:before {
  border-radius: 50%;
}

body
{
	margin:0;
	padding:0;
	font-family: 'Ubuntu', sans-serif;
	overflow-x: hidden;
}

img
{
	max-width: 100%;
}

table 
{
	border-collapse: collapse;
	width: 100%;
}

th, td
{
	text-align: left;
	padding: 8px;
	height: 30px;
}

tr:nth-child(even)
{
	background-color: #f2f2f2
}

th
{
	background-color: #07A4BD;
	color: white;
}

.item-btn-paid
{
	text-align: center;
	margin-top: 20px;
}

.infogeo
{
	background-color:#07a4bd;
	padding:15px;
	font-size:14px;
	margin-bottom:10px;
	border-radius:5px;
	color:#ffffff;
}

.inputsearchgeo
{
	width: 19%;
	float: left;
	margin-right: 1%;
	height: 35px;
	box-sizing: border-box;
	padding-left: 5px;
}

.searchitemgeo
{
	float: left;
	width: 19%;
	margin-right: 1%;
	box-sizing: border-box;
	padding-left: 5px;
	font-weight: bold;
	margin-bottom: 8px;
}

.result-item-link
{
	text-decoration: none;
	color:#000;
}

#result-ville
{
	margin-top: -11px;
	margin-bottom: 10px;
}

.result-item
{
	width: 100%;
	border: 1px solid #868585;
	padding: 5px;
	box-sizing: border-box;
	background-color:#d0d0d0;
	font-size: 13px;
}

.result-item:hover
{
	background-color:#e1e1e1;
}

.invoice-title
{
	background-color:#eef2f5;
	padding: 50px;
	box-sizing: border-box;
	text-align: center;
	font-size: 33px;
	font-weight: bold;
}

.invoice
{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #c2bfbf;
	padding-bottom: 20px;
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 4px 4px 4px #dfdcdc;
}

.invoice-content
{
	padding: 25px;
}

.invoice-total
{
	font-size: 23px;
	font-weight: bold;
	margin-bottom: 20px;
}

.minimun-space
{
	min-height: 100vh;
}

.searchitem
{
	float: left;
	width: 16%;
	margin-right: 0.66%;
	box-sizing: border-box;
	padding-left: 5px;
	font-weight: bold;
	margin-bottom: 8px;
}

.inputsearch
{
	width: 16%;
	float: left;
	margin-right: 0.66%;
	height: 35px;
	box-sizing: border-box;
	padding-left: 5px;
}

.no-result
{
	width: 100%;
	padding-top: 150px;
	padding-bottom: 150px;
	text-align: center;
	font-size: 26px;
	font-weight: bold;
}

.rtn-space
{
	margin-top: 20px;
}

.gray
{
	background-color: #aaa !important;
}

.gray:hover
{
	background-color: #6f6e6e !important;
}

/* Colonne Footer #3 */

.col3
{
	float: left;
	width: 32%;
	margin-right: 1.11%;
	box-sizing: border-box;
	text-align: center;
}

.col3 h3
{
	text-align:center;
	font-color:#ffffff !important;
}

.col3 ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.col3 ul a
{
	text-decoration:none;
	color:#ffffff;
	font-size: 13px;
}

.col3 a:hover
{
	border-bottom:1px solid #000000;
}

/* Colonne Footer #4 */
.col4
{
	float: left;
	width: 24%;
	margin-right: 1%;
	box-sizing: border-box;
	text-align: center;
}

.col4 h3
{
	text-align:center;
	font-color:#ffffff !important;
}

.col4 ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.col4 ul a
{
	text-decoration:none;
	color:#ffffff;
	font-size: 13px;
}

.col4 a:hover
{
	border-bottom:1px solid #000000;
}

/* Colonne Footer #5 */
.col5
{
	float: left;
	width: 19%;
	margin-right: 1%;
	box-sizing: border-box;
	text-align: center;
}

.col5 h3
{
	text-align:center;
	font-color:#ffffff !important;
}

.col5 ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.col5 ul a
{
	text-decoration:none;
	color:#ffffff;
	font-size: 13px;
}

.col5 a:hover
{
	border-bottom:1px solid #000000;
}

/* Colonne Footer #6 */
.col6
{
	float: left;
	width: 15%;
	margin-right: 1.6666%;
	box-sizing: border-box;
	text-align: center;
}

.col6 h3
{
	text-align:center;
	font-color:#ffffff !important;
}

.col6 ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.col6 ul a
{
	text-decoration:none;
	color:#ffffff;
	font-size: 13px;
}

.col6 a:hover
{
	border-bottom:1px solid #000000;
}

.user-connected-item
{
	position:absolute;
	margin-left: 2px;
	argin-top: 2px;
}

.user-connected-item img
{
	width:13px;
	height:13px;
}

.full
{
	width:100% !important;
}

.triangle-user
{
	display : inline-block;
	height : 0;
	width : 0;
	border-top: 9px solid transparent;
	border-right: 13px solid #f0f0f0;
	border-bottom: 9px solid transparent;
}

.user
{
	float:left !important;
}

.menu
{
	float: right;
	margin-top: 47px;
	margin-right: 30px;
}

.menu ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu ul a
{
	color: #fff;
	text-decoration: none;
}

.menu ul li:hover
{
	border-bottom: 3px solid #e74c3c;
	padding-bottom: 9px;
}

.menu ul li
{
	float:left;
	padding-left: 20px;
	padding-right: 20px;
	transition-duration: 0.5s;
	border-bottom: 3px none;
	padding-bottom: 9px;
}

.roundphotouser
{
	width: 20px;
	position: absolute;
	margin-top: -1px;
	margin-left: -8px;
}

.roundphotouser img
{
	width:100%;
	height:auto;
	border-radius:10px;
}

.emoji
{
	position: relative;
}

.emoji img
{
	width:20px;
}

.new-msg
{
	background-color: #e74c3c;
	padding-left: 4px;
	padding-right: 5px;
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
}

.prefooter
{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: auto;
	background-color: #000;
}

.titleboximg
{
	float: left;
	width: 60px;
	height: 60px;
	margin-right: 10px;
	overflow: hidden;
}

.titleboximg img
{
	width:100%;
	height:100%;
}

.titleboxmsg
{
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.titlebox
{
	float:left;
}

.titlebox h1
{
	line-height:13px;
}

.top-profil-box
{
	overflow: auto;
	margin-top: 31px;
}

.last-connexion
{
	font-size: 11px;
	margin-top: 6px;
	color: #828282;
}

.info-profil
{
	float:left;
}

.communication-box
{
	float:right;
	margin-top: 11px;
}

.line-detail
{
	border-bottom: 1px solid #b9b9b9;
	overflow: auto;
	padding-bottom: 8px;
	padding-top: 8px;
}

.line-title
{
	float: left;
	margin-left: 12px;
	font-size: 13px;
	color: #939393;
}

.line-result
{
	float: right;
	font-size: 11px;
	font-weight: bold;
	margin-right: 16px;
}

.photo-file
{
	width: 140px;
	height: 140px;
	position: absolute;
	opacity: 0;
}

.bas-profil-box
{
	margin-bottom: 31px;
}

.titleBorder
{
	border-bottom: 1px solid #acacac;
	padding-bottom: 10px;
}

.bigphoto
{
	width:210px !important;
	height:210px !important;
}

.pseudo-profil
{
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
}

.connected-info
{
	position: absolute;
	margin-left: 3px;
	margin-top: 0px;
}

.connected-info img
{
	width: 13px !important;
	height: 13px !important;
}

.photo-profil img
{
	width:140px;
	height:140px;
}

.footer
{
	width: 100%;
	text-align: center;
	background-color: #525252;
	padding: 10px;
	box-sizing: border-box;
	font-size: 11px;
	color: #fff;
}

.footer-dark
{
	background-color: #fff;
	padding: 24px 0;
	text-align: left;
}

.footer-links-row
{
	font-size: 13px;
	margin-bottom: 16px;
}

.footer-links-row a
{
	color: #000;
	text-decoration: none;
}

.footer-links-row a:hover
{
	text-decoration: underline;
}

.footer-sep
{
	color: rgba(0,0,0,0.3);
	margin: 0 6px;
}

.footer-legal
{
	font-size: 11px;
	color: rgba(0,0,0,0.6);
	line-height: 1.6;
	margin-bottom: 10px;
}

.footer-copyright
{
	font-size: 11px;
	color: rgba(0,0,0,0.5);
}

.photo-profil
{
	float: left;
	width: 210px;
	margin-right: 16px;
}

.btn-upload
{
	margin-top:20px;
}

header
{
	height: 90px;
	background-color: #1e1e1e;
	border-bottom: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
	position: relative;
}

header .container
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	height: 100%;
	margin-bottom: 0;
	overflow: visible;
}

header .logo
{
	float: none;
	width: auto;
	height: auto;
	margin-top: 0;
	display: flex;
	align-items: center;
	order: 1;
}

header .connectbox
{
	float: none;
	padding-top: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	order: 3;
}

header .menu
{
	float: none;
	margin-top: 0;
	margin-right: 0;
	order: 2;
}

header .logo img
{
	height: 52px;
	width: auto;
}

header .menu ul li
{
	transition: color 0.2s ease;
}

header .menu ul a
{
	font-weight: 500;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 6px;
}

header .connectbox .btn
{
	background-color: #fff;
	color: #e74c3c;
	border-radius: 6px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

header .connectbox .btn:hover
{
	background-color: #f0f0f0;
	color: #c83e30;
	transform: none;
	box-shadow: none;
}

.empty-result
{
	text-align: center;
	margin-top: 150px;
	margin-bottom: 150px;
	font-size: 26px;
	font-weight: bold;
}

.areabox
{
	width: 100%;
	margin-top: 10px;
	height: 117px;
	box-sizing: border-box;
	margin-bottom: 10px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px;
	padding-left: 10px;
	padding-top: 10px;
}

.side-photo
{
	float: left;
	width: 14%;
	margin-right: 6%;
}

.side-param
{
	float:left;
	width: 80%;
}

.itemmenu:first
{
	border-bottom: 1px solid #ddd;
	padding-bottom: 8px;
}

.itemmenu
{
	border-bottom: 1px solid #ddd;
	padding-bottom: 8px;
	padding-top: 8px;
}

.itemmenu a
{
	text-decoration:none;
	color:#000000;
	font-size: 14px;
}

.usermenu
{
	position: absolute;
	top: 70px;
	right: 16px;
	margin-top: 0;
	background-color: #fff;
	width: 220px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
	display: none;
	transition-duration: 0.5s;
	z-index: 1000;
}

.usermenu.usermenu-open
{
	display: block;
}

.form-connect
{
	width: 450px;
	background-color: #080808fc;
	padding: 18px;
	border-radius: 8px;
	color: #fff;
	margin-top: 20px;
}

.container
{
	width:1024px;
	margin-left:auto;
	margin-right:auto;
	overflow: auto;
	margin-bottom: 20px;
}

.logo
{
	float: left;
	width: 208px;
	height: 80px;
	margin-top: 24px;
}

.logo img
{
	width: auto;
	height: 70px;
}

.connectbox
{
	float: right;
	padding-top: 39px;
}

.btn
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #121c23;
	padding-top: 9px;
	padding-bottom: 9px;
	border-radius: 17px;
	text-decoration: none;
	color: #fff;
	border:none;
	font-family: 'Ubuntu', sans-serif;
	cursor:pointer;
	font-size: 15px;
	transition-duration: 0.5s;
}

.separator-subscribe
{
	width:100%;
	height:13px;
}

.white
{
	background-color:#ffffff;
	color:#e74c3c;
}

.unknow-result
{
	text-align: center;
	font-size: 25px;
	padding-top: 140px;
	padding-bottom: 140px;
}

.white:hover
{
	background-color:#e74c3c;
	color:#ffffff;
}

.btn:hover
{
	background-color:#c83e30;
}

.title-center
{
	text-align:center;
}

.fullsize
{
	min-height: 100vh;
}


/* ==========================================================
   HERO / HOMEPAGE (homepage.tpl)
   ========================================================== */

.slider
{
	position: relative;
	width: 100%;
	min-height: 560px;
	overflow: hidden;
}

.images-slider
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.images-slider img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slider-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(13,13,13,0.88) 0%, rgba(13,13,13,0.55) 55%, rgba(13,13,13,0.2) 100%);
}

.slider-content
{
	position: relative;
	width: 100%;
	padding: 70px 0;
	box-sizing: border-box;
}

.slider-grid
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.slogan-block
{
	max-width: 560px;
}

.slogan-block h1
{
	color: #fff;
	font-size: 2.4rem;
	line-height: 1.25;
	font-weight: 700;
	text-shadow: 2px 3px 6px rgba(0,0,0,0.5);
	margin: 0;
}

.form-subscribe-card
{
	width: 340px;
	flex-shrink: 0;
	background-color: #161616;
	padding: 24px;
	border-radius: 10px;
	color: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	box-sizing: border-box;
}

.form-subscribe-card h2
{
	font-size: 1.2rem;
	margin: 0 0 18px 0;
	text-align: center;
	color: #fff;
}

.subscribe-form .field
{
	margin-bottom: 12px;
}

.subscribe-form .field-row
{
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.btn-primary
{
	display: inline-block;
	background-color: #e74c3c;
	color: #fff;
	padding: 14px 28px;
	border-radius: 24px;
	font-weight: bold;
	font-size: 15px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-primary:hover
{
	background-color: #c83e30;
}

.btn-full
{
	width: 100%;
	margin-top: 6px;
	text-align: center;
	box-sizing: border-box;
}

.subscribe-mobile
{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	background-color: #e74c3c;
	display: none;
}

/* ----- SECTION AVANTAGES ----- */

.benefits-section
{
	background-color: #e74c3c;
	padding: 40px 0;
	color: #fff;
}

.benefits-title
{
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px 0;
}

.benefits-text
{
	font-size: 14px;
	line-height: 1.7;
	max-width: 720px;
	margin: 0;
	color: #fff;
	opacity: 0.95;
}

/* ----- DERNIERS MEMBRES ----- */

.last-member-section,
.last-member
{
	padding: 40px 0;
}

.title-separator
{
	display: inline-block;
	width: 60px;
	height: 3px;
	background-color: #e74c3c;
	border-radius: 3px;
	margin-top: 8px;
}

.hero-photo-credit
{
	position: absolute;
	bottom: 6px;
	right: 10px;
	font-size: 10px;
	color: rgba(255,255,255,0.6);
	z-index: 3;
}

.hero-photo-credit a
{
	color: rgba(255,255,255,0.8);
}


/* ==========================================================
   CARROUSEL PHOTO HERO (fondu toutes les 2 secondes)
   ========================================================== */

.hero-carousel
{
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-carousel-slide
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease;
}

.hero-carousel-slide-active
{
	opacity: 1;
}


/* ==========================================================
   HERO CENTRE MINIMALISTE + PANNEAU D'INSCRIPTION DEROULANT
   ========================================================== */

.slider-content-centered
{
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.slider-title-centered
{
	color: #fff;
	font-size: 2.6rem;
	font-weight: 700;
	text-shadow: 3px 4px 3px #000;
	margin-bottom: 28px;
	transition: opacity 0.5s ease;
	min-height: 1.3em;
}

.hero-cta-btn
{
	padding: 16px 36px;
	font-size: 16px;
	border-radius: 8px;
}

.subscribe-panel
{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	background-color: #0d0d0d;
}

.subscribe-panel-open
{
	max-height: 700px;
	padding: 40px 0;
}

.form-subscribe-card-centered
{
	max-width: 420px;
	margin: 0 auto;
}


/* ==========================================================
   POPUP MODAL D'INSCRIPTION
   ========================================================== */

.subscribe-modal-overlay
{
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 20000;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
}

.subscribe-modal-overlay.subscribe-modal-open
{
	display: flex;
}

.subscribe-modal
{
	background-color: #0d0d0d;
	border-radius: 16px;
	border: 2px solid #e74c3c;
	overflow: hidden;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.subscribe-modal-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background-color: #0d0d0d;
}

.subscribe-modal-header span:first-child
{
	color: #e74c3c;
	font-size: 20px;
	font-weight: 700;
}

.subscribe-modal-close
{
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.subscribe-modal-close:hover
{
	opacity: 1;
}

.subscribe-modal-banner
{
	position: relative;
	height: 140px;
	overflow: hidden;
}

.subscribe-modal-banner img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.subscribe-modal-banner-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(35,17,30,0.6) 0%, rgba(35,17,30,0.3) 100%);
}

.subscribe-modal-body
{
	padding: 24px 20px;
}

.modal-field-label
{
	display: block;
	color: #cfcfcf;
	font-size: 13px;
	margin-bottom: 6px;
}

.subscribe-modal-body .field
{
	margin-bottom: 16px;
}

.subscribe-modal-body .inputbox
{
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #222;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.subscribe-modal-body .field select
{
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #222;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
}

.subscribe-modal-body .inputbox:focus,
.subscribe-modal-body .field select:focus
{
	border-color: #e74c3c;
	outline: none;
}

.modal-captcha
{
	color: #fff;
	font-size: 13px;
	margin-bottom: 16px;
}

.modal-captcha b,
.modal-captcha strong
{
	color: #fff;
}

.modal-captcha input
{
	background-color: #fff;
	color: #222;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
}

.modal-captcha input:focus
{
	border-color: #e74c3c;
	outline: none;
}


/* ==========================================================
   PAGE CONNEXION (connexion.tpl) - carte sombre style modal
   ========================================================== */

.login-page
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px;
	box-sizing: border-box;
}

.login-card
{
	background-color: #0d0d0d;
	border-radius: 16px;
	border: 2px solid #e74c3c;
	overflow: hidden;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.login-card-header
{
	padding: 18px 20px;
	text-align: center;
}

.login-card-header span
{
	color: #e74c3c;
	font-size: 22px;
	font-weight: 700;
}

.login-card-banner
{
	position: relative;
	height: 140px;
	overflow: hidden;
}

.login-card-banner img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.login-card-banner-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(35,17,30,0.6) 0%, rgba(35,17,30,0.3) 100%);
}

.login-card-body
{
	padding: 24px 20px;
}

.login-warning
{
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
	padding: 12px;
	border-radius: 6px;
	margin-bottom: 18px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
}

.login-card-body .field
{
	margin-bottom: 16px;
}

.login-forgot-link
{
	text-align: right;
	margin-bottom: 18px;
}

.login-forgot-link a
{
	color: #cfcfcf;
	font-size: 13px;
	text-decoration: underline;
}

.login-signup-link
{
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: #cfcfcf;
}

.login-signup-link a
{
	color: #e74c3c;
	text-decoration: underline;
}

.login-card-body .field .inputbox
{
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #222;
	border: 2px solid #333;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	transition: border-color 0.2s ease;
}

.login-card-body .field .inputbox:focus
{
	border-color: #e74c3c;
	outline: none;
}


/* ==========================================================
   MAQUETTE STATISTIQUES (statistiques-MAQUETTE.tpl)
   Visuel uniquement, pas de donnees reelles connectees
   ========================================================== */

.stats-page
{
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	max-width: 600px;
}

.stats-title
{
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 16px;
}

.stats-tabs
{
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.stats-tab
{
	background-color: #161616;
	color: #cfcfcf;
	border: none;
	padding: 10px 18px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	letter-spacing: 0.5px;
}

.stats-tab-active
{
	background-color: #2a1a3a;
	color: #b98cf0;
}

.stats-subtitle
{
	color: #9a9a9a;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 24px;
}

.stats-sortby
{
	margin-bottom: 20px;
}

.stats-sortby label
{
	display: block;
	color: #9a9a9a;
	font-size: 13px;
	margin-bottom: 8px;
}

.stats-sortby-select
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #161616;
	border-radius: 20px;
	padding: 12px 18px;
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid #2a2a2a;
}

.stats-table
{
	border-top: 1px solid #232323;
}

.stats-row
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 4px;
	border-bottom: 1px solid #1c1c1c;
}

.stats-label
{
	color: #cfcfcf;
	font-weight: 600;
	font-size: 15px;
}

.stats-value
{
	color: #fff;
	font-size: 16px;
}

.stats-pagination
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 20px 0;
	color: #9a9a9a;
	font-size: 13px;
}

.stats-pagination-rows
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.stats-pagination-select
{
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid #2a2a2a;
	padding: 2px 4px;
	color: #fff;
}

.stats-pagination-arrow
{
	color: #555;
}


/* ==========================================================
   SECTION AVANTAGES (fond noir, titre rouge)
   ========================================================== */

.advantages-section
{
	background-color: #000;
	padding: 50px 0;
}

.advantages-title
{
	color: #e74c3c;
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 18px;
}

.advantages-text
{
	color: #e6e6e6;
	font-size: 15px;
	line-height: 1.7;
	max-width: 720px;
}


/* ==========================================================
   BANDEAU DIAGONAL "DERNIERS MEMBRES" (homepage.tpl)
   ========================================================== */

.diagonal-banner
{
	position: relative;
	background-color: #000;
	padding: 35px 40px 45px 40px;
	clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%);
	margin: 40px 0;
}

.diagonal-banner-title
{
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 24px;
}

.diagonal-banner-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.diagonal-banner-grid .members:nth-child(n+4)
{
	display: none;
}

.diagonal-banner-grid .members
{
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.diagonal-banner-grid .members > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.diagonal-banner-grid .members .connected-info
{
	position: absolute;
	top: 6px;
	left: 6px;
	margin: 0;
	z-index: 2;
}

.diagonal-banner-grid .members .connected-info img
{
	width: 13px;
	height: 13px;
}

.diagonal-banner-grid .members-info
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 8px 10px;
	box-sizing: border-box;
	background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

.diagonal-banner-grid .members-info a
{
	color: #fff;
	text-decoration: none;
}


/* ==========================================================
   SECTION CTA FINALE (homepage.tpl)
   ========================================================== */

.homepage-cta
{
	background-color: #000;
	padding: 50px 0 60px 0;
	text-align: center;
}

.homepage-cta-inner h2
{
	font-size: 26px;
	font-weight: 600;
	color: #e74c3c;
	margin-bottom: 12px;
}

.homepage-cta-inner p
{
	font-size: 15px;
	color: #cfcfcf;
	max-width: 480px;
	margin: 0 auto 24px auto;
	line-height: 1.6;
}

.homepage-cta-btn
{
	display: inline-block;
	padding: 14px 32px;
	font-size: 15px;
}

.members-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}

.members-grid .members
{
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	float: none;
	margin-right: 0;
	border-radius: 10px;
	overflow: hidden;
}

.members-grid .members img
{
	border-radius: 10px;
}

/* ----- SECTION CTA SECONDAIRE ----- */

.cta-section
{
	background-color: #111111;
	padding: 50px 0;
	text-align: left;
	color: #fff;
}

.cta-title
{
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: #fff;
}

.cta-text
{
	font-size: 14px;
	line-height: 1.7;
	max-width: 680px;
	color: #cfcfcf;
	margin: 0 0 20px 0;
}

@media (max-width: 768px)
{
	.slider-grid { flex-direction: column; text-align: center; }
	.form-subscribe-card { width: 100%; max-width: 400px; }
	.slogan-block h1 { font-size: 1.8rem; }
	.benefits-title, .cta-title { font-size: 1.3rem; }
}


/* ==========================================================
   MESSAGERIE (item-msg) - carte de conversation, theme sombre
   ========================================================== */

.item-msg
{
	float: right;
	width: 89%;
	border: 1px solid #b7b3b3;
	padding: 11px;
	box-sizing: border-box;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow:auto;
	border-radius: 5px;
	background-color: #f0f0f0;
}

.item-msg-info
{
	float:left;
	width: 59%;
}

.item-msg-btn
{
	float: right;
	padding-top: 20px;
}

.item-msg-big-pseudo
{
	color: #000;
	font-size: 18px;
	font-weight: bold;
	margin-right: 3px;
}

.item-msg-date
{
	color: #8f8f8f;
	font-size: 12px;
}

.item-msg-pseudo
{
	font-weight: bold;
	font-size: 18px;
}

.item-msg-photo
{
	float: left;
	width: 60px;
	height: 60px;
	margin-right: 10px;
}

.item-msg-photo img
{
	width:100%;
	height:100%;
}

.valid-msg
{
	background-color: #2ad700;
	padding-top: 7px;
	padding-bottom: 7px;
	border-radius: 5px;
	text-align: center;
	margin-bottom: 5px;
	margin-top: 5px;
	font-size: 14px;
	color: #fff;
}

.error-msg
{
	background-color: #ff0000;
	padding-top: 7px;
	padding-bottom: 7px;
	border-radius: 5px;
	text-align: center;
	margin-bottom: 5px;
	margin-top: 5px;
	font-size: 14px;
	color: #fff;
}


/* ==========================================================
   CARTES "MAGAZINE" MEMBRES (result-user-big-FINAL.tpl)
   Grille auto-adaptative ~150px, fond sombre, Favoris / Tchat
   Variables confirmees uniquement (pas de bio/statut/avatar)
   ========================================================== */

.result-box
{
	overflow: visible;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	background-color: #111111;
	padding: 24px;
	box-sizing: border-box;
	border-radius: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.card-user-big
{
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	font-size: 12px;
	min-width: 0;
}

.card-user-big-header
{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

.card-user-big-headinfo-link
{
	text-decoration: none;
}

.card-user-big-headinfo
{
	line-height: 1.3;
}

.card-user-big-name
{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
}

.card-user-big-age
{
	color: #e74c3c;
	font-weight: normal;
	font-size: 12px;
}

.card-user-big-location
{
	font-size: 11px;
	color: #cfcfcf;
	margin-bottom: 8px;
}

.card-user-big-photo
{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1.05;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}

.card-user-big-photo img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.card-user-big-photo:hover img
{
	transform: scale(1.04);
}

.card-user-big-actions
{
	display: flex;
	gap: 6px;
}

.btn-action
{
	flex: 1;
	text-align: center;
	background-color: #e74c3c;
	color: #fff;
	padding: 7px 0;
	border-radius: 6px;
	font-weight: bold;
	font-size: 11px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.btn-action:hover
{
	background-color: #c83e30;
}


/* ==========================================================
   PAGE PROFIL (profile.tpl) - theme sombre
   ========================================================== */

.profile-page
{
	background-color: #0d0d0d;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	padding: 24px;
	box-sizing: border-box;
	border-radius: 10px;
}

.profile-header
{
	display: flex;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #232323;
	margin-bottom: 24px;
}

.profile-photo-block
{
	position: relative;
	flex-shrink: 0;
	width: 220px;
}

.profile-photo-block img
{
	width: 220px;
	height: 220px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.profile-info-block
{
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.profile-pseudo
{
	font-size: 28px;
	font-weight: bold;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-pseudo-icons
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.profile-meta
{
	margin-top: 8px;
	font-size: 14px;
	color: #cfcfcf;
}

.profile-meta .dot
{
	color: #e74c3c;
	margin: 0 4px;
}

.profile-lastconnect
{
	margin-top: 6px;
	font-size: 12px;
	color: #8f8f8f;
}

.profile-message-btn
{
	margin-top: 20px;
}

.profile-message-btn .btn
{
	background-color: #e74c3c;
}

.profile-message-btn .btn:hover
{
	background-color: #c83e30;
}

.profile-body
{
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.profile-section
{
	background-color: #161616;
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
}

.profile-section-title
{
	font-size: 15px;
	color: #e74c3c;
	margin: 0 0 14px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.profile-text,
.profile-detail
{
	font-size: 14px;
	line-height: 1.6;
	color: #e6e6e6;
}

.profile-search-list
{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #e6e6e6;
	line-height: 1.8;
}

.profile-search-list li::before
{
	content: "•";
	color: #e74c3c;
	margin-right: 8px;
}

.profile-gallery
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}

.profile-gallery img
{
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.profile-gallery img:hover
{
	opacity: 0.85;
}


/* ==========================================================
   MON PROFIL (monprofil.tpl) - theme sombre
   ========================================================== */

.myprofile-page
{
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
}

.myprofile-title
{
	color: #fff;
	font-size: 26px;
	font-weight: 500;
	margin-bottom: 16px;
}

.myprofile-info
{
	margin-bottom: 24px;
}

.myprofile-grid
{
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	align-items: start;
}

.myprofile-side,
.myprofile-main
{
	min-width: 0;
}

.myprofile-card
{
	background-color: #161616;
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.myprofile-photo-upload
{
	width: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}

.myprofile-photo-upload img
{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.myprofile-photo-upload .textaddprofil
{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: 10px;
}

.myprofile-photo-upload:hover .textaddprofil
{
	opacity: 1;
}

.btn-upload .btn
{
	background-color: #e74c3c;
}

.btn-upload .btn:hover
{
	background-color: #c83e30;
}

.myprofile-danger-card
{
	background-color: #1c1212;
	border: 1px solid #4a1f1a;
}

.btn-danger-outline
{
	background-color: transparent;
	border: 1px solid #e74c3c;
	color: #e74c3c;
}

.btn-danger-outline:hover
{
	background-color: #e74c3c;
	color: #fff;
}

.myprofile-params label,
.myprofile-notif label
{
	color: #cfcfcf;
	display: block;
	margin-top: 14px;
	margin-bottom: 4px;
	font-size: 13px;
}

.myprofile-params input[type="text"],
.myprofile-params input[type="number"],
.myprofile-params input[type="email"],
.myprofile-params select,
.myprofile-params textarea
{
	width: 100%;
	box-sizing: border-box;
	background-color: #0d0d0d;
	border: 1px solid #2e2e2e;
	border-radius: 6px;
	color: #fff;
	padding: 10px 12px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
}

.myprofile-params input:focus,
.myprofile-params select:focus,
.myprofile-params textarea:focus
{
	outline: none;
	border-color: #e74c3c;
}

.myprofile-params hr
{
	border: none;
	border-top: 1px solid #232323;
	margin: 20px 0;
}

.myprofile-save-btn
{
	margin-top: 20px;
	background-color: #e74c3c;
}

.myprofile-save-btn:hover
{
	background-color: #c83e30;
}


/* ==========================================================
   PAGE RECHERCHE (search.tpl) - theme sombre
   ========================================================== */

.search-page
{
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
}

.search-title
{
	color: #fff;
	font-size: 26px;
	font-weight: 500;
	margin-bottom: 16px;
}

.search-card
{
	background-color: #161616;
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 24px;
}

.search-grid
{
	display: flex;
	align-items: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}

.search-field
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 130px;
}

.search-label
{
	font-size: 12px;
	color: #9a9a9a;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.search-page .inputsearch
{
	width: 100%;
	float: none;
	margin-right: 0;
	background-color: #0d0d0d;
	border: 1px solid #2e2e2e;
	border-radius: 6px;
	color: #fff;
	padding-left: 10px;
	font-family: 'Ubuntu', sans-serif;
}

.search-page .inputsearch:focus
{
	outline: none;
	border-color: #e74c3c;
}

.search-page .inputsearchgeo
{
	width: 100%;
	float: none;
	margin-right: 0;
	background-color: #0d0d0d;
	border: 1px solid #2e2e2e;
	border-radius: 6px;
	color: #fff;
	padding-left: 10px;
	font-family: 'Ubuntu', sans-serif;
}

.search-page .inputsearchgeo:focus
{
	outline: none;
	border-color: #e74c3c;
}

.search-submit-field
{
	flex: 0 0 auto;
	min-width: auto;
}

.search-submit-btn
{
	height: 35px;
	background-color: #e74c3c;
	white-space: nowrap;
}

.search-submit-btn:hover
{
	background-color: #c83e30;
}

.search-page .search-mobile .fulllabel
{
	color: #cfcfcf;
}

.search-page .search-mobile .fullinput
{
	background-color: #0d0d0d;
	border: 1px solid #2e2e2e;
	border-radius: 6px;
	color: #fff;
}

.search-page .search-mobile .fullinput:focus
{
	outline: none;
	border-color: #e74c3c;
}


/* ==========================================================
   PAGE ABONNEMENT (abonnement.tpl) - theme sombre
   ========================================================== */

.abonnement-page
{
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
}

.abonnement-title
{
	color: #fff;
	font-size: 26px;
	font-weight: 500;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.abonnement-subtitle
{
	font-size: 20px;
	margin-top: 30px;
}

.abonnement-card
{
	background-color: #161616;
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 10px;
	margin-bottom: 20px;
}

/* Overrides generiques pour contenu genere cote serveur
   (tableaux de factures, blocs d'infos abonnement, boutons) */
.abonnement-card table
{
	background-color: transparent;
	color: #fff;
}

.abonnement-card th
{
	background-color: #e74c3c;
	color: #fff;
}

.abonnement-card td
{
	color: #e6e6e6;
	border-bottom: 1px solid #232323;
}

.abonnement-card tr:nth-child(even)
{
	background-color: #1c1c1c;
}

.abonnement-card .invoice,
.abonnement-card .invoice-title
{
	background-color: #0d0d0d;
	color: #fff;
	border-color: #232323;
}

.abonnement-card a
{
	color: #ff8a75;
}

.abonnement-card .btn
{
	background-color: #e74c3c;
}

.abonnement-card .btn:hover
{
	background-color: #c83e30;
}


/* ==========================================================
   CARTES D'OFFRES CREDITS (page paid.php - contenu genere en PHP,
   classes .offeritem existantes, pas de .tpl separe)
   ========================================================== */

.offeritem
{
	background-color: #161616 !important;
	border: 1px solid #232323 !important;
	border-radius: 10px;
	padding: 24px 16px;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 200px;
}

.offeritem-prix
{
	font-size: 28px;
	font-weight: bold;
	color: #fff !important;
	margin-bottom: 10px;
}

.offeritem-title
{
	font-size: 14px;
	color: #e74c3c;
	margin-bottom: 6px;
}

.offeritem-desc
{
	font-size: 13px;
	color: #9a9a9a;
	margin-bottom: 20px;
}

.offercredit-btn-achat
{
	margin-top: auto;
}

.offercredit-btn-achat .btn
{
	background-color: #121c23;
}

.offercredit-btn-achat .btn:hover
{
	background-color: #e74c3c;
}


/* ==========================================================
   RESPONSIVE GENERAL
   ========================================================== */

@media (min-width: 901px)
{
	.search-mobile { display: none; }
}

@media (max-width: 1024px)
{
	.container { width: 100%; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
}

@media (max-width: 900px)
{
	.search-computer { display: none; }
	.search-mobile { display: block; }
}

@media (max-width: 768px)
{
	.slider-grid { flex-direction: column; text-align: center; }
	.form-subscribe-card { width: 100%; max-width: 400px; }
	.slogan-block h1 { font-size: 1.8rem; }

	.diagonal-banner-grid { grid-template-columns: repeat(3, 1fr); }
	.profile-header { flex-direction: column; align-items: center; text-align: center; }
	.profile-photo-block, .profile-photo-block img { width: 180px; height: 180px; }
	.profile-meta .dot { display: none; }
	.profile-meta { display: flex; flex-direction: column; gap: 2px; }

	.myprofile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px)
{
	.result-box { padding: 14px; gap: 10px; }

	.diagonal-banner { clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0% 100%); padding: 25px 20px 35px 20px; margin: 20px 0; }
	.diagonal-banner-grid { grid-template-columns: repeat(2, 1fr); }
	.homepage-cta-inner h2 { font-size: 21px; }
}

@media (max-width: 980px)
{
	.subscribe-mobile
	{
		display: block;
	}

	.usermenu
	{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		box-sizing: border-box;
		max-height: 0;
		overflow: hidden;
		padding: 0 10px;
		border: none;
		box-shadow: 0 10px 20px rgba(0,0,0,0.2);
		border-radius: 0;
		display: block;
		transition: max-height 0.35s ease, padding 0.35s ease;
	}

	.usermenu.usermenu-open
	{
		max-height: 500px;
		padding: 10px;
		border-top: 1px solid #eee;
	}

	header,
	header .container,
	header .connectbox,
	header .logo,
	header .menu
	{
		background: transparent !important;
		background-color: transparent !important;
	}

	header
	{
		background-color: #1e1e1e !important;
		height: auto;
		padding: 12px 0;
	}

	header .container
	{
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		padding-left: 12px;
		padding-right: 12px;
		width: 100%;
		box-sizing: border-box;
		background: transparent;
	}

	header .logo img
	{
		height: 30px;
	}

	header .menu
	{
		display: block;
		order: 2;
	}

	header .menu ul li
	{
		float: none;
		padding: 0;
	}

	header .menu ul a
	{
		font-size: 12px;
		white-space: nowrap;
	}

	header .connectbox
	{
		margin-left: auto;
		order: 3;
	}

	header .connectbox .btn
	{
		padding: 8px 16px;
		font-size: 13px;
		white-space: nowrap;
	}

	.slider-title-centered
	{
		font-size: 1.7rem;
	}

	.hero-cta-btn
	{
		padding: 12px 24px;
		font-size: 14px;
	}
}

/* ==========================================================
   PAGE "CHOISIR UN MOYEN DE PAIEMENT" (paid.php step=2)
   Pas de fichier .tpl dedie - ciblage via .item-btn-paid
   (utilise :has() pour appliquer le theme sombre uniquement
   sur cette page precise, sans affecter les autres pages
   qui utilisent .container)
   ========================================================== */

body:has(.item-btn-paid)
{
	background-color: #0d0d0d;
}

body:has(.item-btn-paid) .container
{
	max-width: 400px;
	margin: 50px auto;
	padding-top: 0;
	text-align: center;
	background-color: #161616;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

body:has(.item-btn-paid) h1
{
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	margin: 40px 20px 0 20px;
}

body:has(.item-btn-paid) h1::after
{
	content: "";
	display: block;
	width: calc(100% + 40px);
	margin: 24px -20px 0 -20px;
	aspect-ratio: 16 / 9;
	background-image: url('https://www.unedoucenuitavectoi.com/images/photo%20pp.jpg');
	background-size: cover;
	background-position: center top;
}

.item-btn-paid
{
	text-align: center;
	margin-top: 20px;
	padding-bottom: 30px;
}

.item-btn-paid .btn
{
	background-color: #ffc439;
	color: transparent;
	font-size: 0;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 14px 32px;
	border-radius: 24px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item-btn-paid .btn:hover
{
	background-color: #f0b429;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}

.item-btn-paid .btn::before
{
	content: "Pay";
	font-family: 'Ubuntu', sans-serif;
	font-size: 19px;
	font-weight: 700;
	font-style: italic;
	color: #003087;
}

.item-btn-paid .btn::after
{
	content: "Pal";
	font-family: 'Ubuntu', sans-serif;
	font-size: 19px;
	font-weight: 700;
	font-style: italic;
	color: #009cde;
}

/* ==========================================================
   PAGE FLASH (flash.tpl) - theme sombre
   ========================================================== */

.flash-page
{
	background-color: #0d0d0d;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	padding: 24px;
	box-sizing: border-box;
	border-radius: 10px;
}

.flash-title
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 16px;
}

.flash-title img
{
	width: 26px;
	height: 26px;
}

.flash-list
{
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.flash-list .members,
.flash-list .item-user
{
	background-color: #161616;
	border-radius: 10px;
	overflow: hidden;
}

/* ==========================================================
   BADGE DE NOTIFICATION PERSISTANT (jusqu'au clic)
   ========================================================== */

#sticky-notif-badge
{
	display: none;
	background-color: #e74c3c;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	border-radius: 8px;
	padding: 0 4px;
	margin-left: 6px;
	box-sizing: border-box;
}

/* ==========================================================
   BOUTON "NOUVEAU MESSAGE" EN VERT (icone enveloppe fermee,
   distincte de fa-envelope-open utilisee par "Lire")
   ========================================================== */

.btn.low:has(i.fa-envelope):not(:has(i.fa-envelope-open))
{
	background-color: #2ecc71;
	color: #fff;
}

.btn.low:has(i.fa-envelope):not(:has(i.fa-envelope-open)):hover
{
	background-color: #27ae60;
}