/**  -----------------------------------------------------------------
	CUSTOM CSS MODERNE - SPORTPOURTOUS
	VERSION FORCE 980PX - Écrase TOUT
	À charger EN DERNIER dans overall_header.html
-----------------------------------------------------------------  **/

/* FORCE MAXIMALE SUR TOUS LES CONTENEURS (sauf mChat) */

:root {
	--content-width: 980px !important;
}

html,
#page-header,
#page-body,
.page-body,
.headerbar,
.navbar,
#page-footer {
	max-width: 980px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

#wrap,
.wrap {
	max-width: 980px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

#page-body,
.page-body {
	background: transparent !important;
	max-width: 980px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 15px !important;
}

#page-header {
	background: #1a1a1a !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 999 !important;
	max-width: 100% !important;
	width: 100% !important;
}

.headerbar {
	background: linear-gradient(to bottom, rgba(26, 26, 26, 0.95) 0%, rgba(13, 13, 13, 0.95) 100%) !important;
	backdrop-filter: blur(10px) !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
	padding: 15px 20px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	max-width: 100% !important;
	width: 100% !important;
}

.headerbar .inner {
	max-width: 980px !important;
	width: 100% !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 30px !important;
	flex-wrap: wrap !important;
	box-sizing: border-box !important;
}

.navbar .inner,
#page-footer .inner,
#page-header .inner {
	max-width: 980px !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

/* LOGO */
.site_logo {
	width: 235px !important;
	height: 52px !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	overflow: hidden !important;
	background-image: none !important;
}

.site_logo .sports-bg {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
	font-size: 26px !important;
}

.site_logo .sports-bg span {
	animation: fadeInOut 3s ease-in-out infinite !important;
}

@keyframes fadeInOut {
	0%, 100% { opacity: 0.1; }
	50% { opacity: 0.4; }
}

.site_logo .text {
	position: relative !important;
	z-index: 2 !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	background: linear-gradient(135deg, #fff 0%, #888 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	letter-spacing: 2px !important;
	font-family: 'Impact', 'Arial Black', sans-serif !important;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9)) !important;
}

/* SITE DESCRIPTION */
#site-description {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
	flex: 1 !important;
}

#site-description h1 {
	color: #ffffff !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	margin: 0 !important;
}

#site-description p {
	color: #999999 !important;
	font-size: 13px !important;
	margin: 0 !important;
}

/* BODY ET BACKGROUND */
body {
	background: #0a0a0a !important;
	color: #ffffff !important;
	font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif !important;
	max-width: 100% !important;
}

html {
	background: #0a0a0a !important;
}

/* WRAPPER */
#wrap,
.wrap {
	background: #0a0a0a !important;
	border: none !important;
	max-width: 980px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* Variables CSS couleurs */
:root {
	--bg-primary: #0a0a0a !important;
	--bg-secondary: #1a1a1a !important;
	--bg-card: rgba(26, 26, 26, 0.8) !important;
	--bg-hover: rgba(74, 144, 226, 0.1) !important;
	--border-color: rgba(255, 255, 255, 0.1) !important;
	--text-primary: #ffffff !important;
	--text-secondary: #cccccc !important;
	--text-muted: #999999 !important;
	--accent-blue: #4a90e2 !important;
	--accent-blue-dark: #357abd !important;
	--neon-cyan: #00FFFF !important;
}

/* EXCEPTION: mChat reste FULL WIDTH */
html body #mchat,
html body #mchat-input-panel,
html body #mchat-panel,
html body #mchat-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ================================================================
   Correctif fonds blancs - forums/rubriques + mChat
   Ajout cible: ne touche pas au HTML et evite les selecteurs globaux.
   ================================================================ */

/* Rubriques / listes de forums phpBB */
html body .forabg,
html body .forumbg,
html body ul.topiclist,
html body ul.topiclist li.header,
html body ul.topiclist li.row,
html body .panel,
html body .post,
html body .bg1,
html body .bg2 {
	background-color: rgba(10, 14, 26, 0.92) !important;
	background-image: none !important;
	color: #dbeafe !important;
	border-color: rgba(0, 212, 255, 0.22) !important;
}

html body ul.topiclist li.header {
	background: linear-gradient(90deg, rgba(0, 212, 255, 0.14), rgba(10, 14, 26, 0.95)) !important;
	color: #00ffff !important;
}

html body ul.topiclist li.row:hover,
html body .bg1:hover,
html body .bg2:hover {
	background-color: rgba(0, 212, 255, 0.08) !important;
}

html body ul.topiclist a,
html body .forabg a,
html body .forumbg a,
html body .panel a,
html body .post a {
	color: #00d4ff !important;
}

html body ul.topiclist dfn,
html body ul.topiclist dt,
html body ul.topiclist dd,
html body .forabg,
html body .forumbg,
html body .panel,
html body .post,
html body .content {
	color: #dbeafe !important;
}

/* mChat / zone de chambrage */
html body #mchat,
html body #mchat-panel,
html body #mchat-container,
html body #mchat-body,
html body #mchat-messages,
html body #mchat-input-panel,
html body .mchat-panel,
html body .mchat-wrapper,
html body .mchat-messages,
html body .mchat-message,
html body .mchat-row {
	background-color: rgba(4, 8, 16, 0.96) !important;
	background-image: none !important;
	color: #dbeafe !important;
	border-color: rgba(0, 212, 255, 0.25) !important;
}

html body #mchat textarea,
html body #mchat input,
html body #mchat-input-panel textarea,
html body #mchat-input-panel input,
html body .mchat-panel textarea,
html body .mchat-panel input {
	background-color: #000000 !important;
	background: #000000 !important;
	color: #ffffff !important;
	border: 1px solid rgba(0, 212, 255, 0.35) !important;
}

html body #mchat a,
html body .mchat-panel a {
	color: #00d4ff !important;
}

/* Zone de saisie mChat : fond NOIR + texte blanc */
html body #mchat .sceditor-container,
html body #mchat-input-panel .sceditor-container,
html body .mchat-panel .sceditor-container {
	background: #000000 !important;
	border: 1px solid rgba(0, 212, 255, 0.65) !important;
	box-shadow: none !important;
}

html body #mchat .sceditor-container iframe,
html body #mchat .sceditor-container textarea,
html body #mchat .sceditor-wysiwyg,
html body #mchat-input-panel .sceditor-container iframe,
html body #mchat-input-panel .sceditor-container textarea,
html body #mchat-input-panel .sceditor-wysiwyg,
html body .mchat-panel .sceditor-container iframe,
html body .mchat-panel .sceditor-container textarea,
html body .mchat-panel .sceditor-wysiwyg {
	background: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}

/* Ajustements demandes : pas de flou tchat, header/logo non fixe */
html body #mchat,
html body #mchat-panel,
html body #mchat-container,
html body #mchat-body,
html body #mchat-messages,
html body #mchat-input-panel,
html body .mchat-panel,
html body .mchat-wrapper,
html body .mchat-messages,
html body .mchat-message,
html body .mchat-row,
html body #mchat .sceditor-container,
html body #mchat-input-panel .sceditor-container,
html body .mchat-panel .sceditor-container {
	backdrop-filter: none !important;
	filter: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html body #mchat .sceditor-container,
html body #mchat .sceditor-container iframe,
html body #mchat .sceditor-container textarea,
html body #mchat-input-panel .sceditor-container,
html body #mchat-input-panel .sceditor-container iframe,
html body #mchat-input-panel .sceditor-container textarea,
html body .mchat-panel .sceditor-container,
html body .mchat-panel .sceditor-container iframe,
html body .mchat-panel .sceditor-container textarea {
	background-color: #061a2e !important;
	color: #ffffff !important;
}

html body #page-header,
html body .headerbar {
	position: static !important;
	top: auto !important;
	backdrop-filter: none !important;
}

/* Retour visuel tchat : aucun effet, aucune mise en avant au survol */
html body #mchat,
html body #mchat *,
html body #mchat-panel,
html body #mchat-panel *,
html body #mchat-container,
html body #mchat-container *,
html body #mchat-input-panel,
html body #mchat-input-panel *,
html body .mchat-panel,
html body .mchat-panel *,
html body .mchat-wrapper,
html body .mchat-wrapper *,
html body .mchat-messages,
html body .mchat-messages * {
	transform: none !important;
	transition: none !important;
	animation: none !important;
	filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html body #mchat:hover,
html body #mchat *:hover,
html body #mchat-panel:hover,
html body #mchat-panel *:hover,
html body #mchat-container:hover,
html body #mchat-container *:hover,
html body #mchat-input-panel:hover,
html body #mchat-input-panel *:hover,
html body .mchat-panel:hover,
html body .mchat-panel *:hover,
html body .mchat-wrapper:hover,
html body .mchat-wrapper *:hover,
html body .mchat-messages:hover,
html body .mchat-messages *:hover {
	transform: none !important;
	scale: 1 !important;
	filter: none !important;
	box-shadow: none !important;
}

html body #mchat .sceditor-container,
html body #mchat .sceditor-container iframe,
html body #mchat .sceditor-container textarea,
html body #mchat-input-panel .sceditor-container,
html body #mchat-input-panel .sceditor-container iframe,
html body #mchat-input-panel .sceditor-container textarea,
html body .mchat-panel .sceditor-container,
html body .mchat-panel .sceditor-container iframe,
html body .mchat-panel .sceditor-container textarea,
html body #mchat textarea,
html body #mchat input,
html body #mchat-input-panel textarea,
html body #mchat-input-panel input {
	background: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}

/* Cadre principal de rédaction mChat en noir */
html body #mchat iframe,
html body #mchat-input-panel iframe,
html body .mchat-panel iframe,
html body #mchat .sceditor-wysiwyg,
html body #mchat-input-panel .sceditor-wysiwyg,
html body .mchat-panel .sceditor-wysiwyg,
html body #mchat .sceditor-container body,
html body #mchat-input-panel .sceditor-container body,
html body .mchat-panel .sceditor-container body {
	background: #000000 !important;
	background-color: #000000 !important;
	color: #ffffff !important;
}

/* Le logo/header doit rester dans le flux normal et partir au scroll */
html body #page-header,
html body .headerbar,
html body #site-description,
html body #site-description.logo,
html body #logo,
html body .site_logo,
html body .spt-mega-logo {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
}
/* =========================================================
   FIX ÉDITEUR PHPBB / BBCODES / SMILEYS
   ========================================================= */

/* Conteneur principal */
#message-box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Toolbar BBCodes */
#message-box .bbcode-status,
#format-buttons,
#message-box .abbc3_buttons,
#message-box .abbc3_buttons_row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;
    width: 100% !important;

    margin: 10px 0 !important;
    padding: 0 !important;
}

/* Boutons BBCodes */
#message-box input.button2,
#message-box .button2,
#message-box .abbc3_buttons button,
#message-box .abbc3_buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: auto !important;
    height: 34px !important;

    padding: 4px 10px !important;
    margin: 0 !important;

    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Zone textarea */
#message {
    width: 100% !important;
    min-height: 260px !important;

    display: block !important;
    box-sizing: border-box !important;

    margin-bottom: 10px !important;
}

/* Smiley box */
#smiley-box,
#smilies {
    width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    margin-top: 10px !important;
    padding-top: 10px !important;

    overflow: hidden !important;
}

/* Smiley images */
#smilies img {
    width: 24px !important;
    height: 24px !important;

    display: inline-block !important;

    margin: 2px !important;
    vertical-align: middle !important;

    transition: transform 0.15s ease !important;
}

#smilies img:hover {
    transform: scale(1.15) !important;
}

/* Empêche les boutons géants */
#message-box .button2,
#message-box button,
#message-box select {
    max-width: 100% !important;
}

/* Dropdown style */
#message-box select {
    height: 36px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* Responsive mobile */
@media screen and (max-width: 768px) {

    #format-buttons,
    #message-box .abbc3_buttons {
        gap: 4px !important;
    }

    #message-box input.button2,
    #message-box .button2 {
        height: 30px !important;
        padding: 3px 8px !important;
        font-size: 12px !important;
    }

    #smilies img {
        width: 20px !important;
        height: 20px !important;
    }
}
/* =========================================================
   FIX ALIGNEMENT BBCODES
   ========================================================= */

/* Barre bbcodes */
#format-buttons,
.abbc3_buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    width: auto !important;
    max-width: 100% !important;
}

/* Boutons bbcodes */
#format-buttons input,
#format-buttons button,
#format-buttons a,
.abbc3_buttons input,
.abbc3_buttons button,
.abbc3_buttons a {
    display: inline-flex !important;

    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;

    flex: 0 0 auto !important;

    white-space: nowrap !important;

    padding: 4px 10px !important;
    margin: 0 !important;
}

/* Bouton TABLE spécialement */
input[name="addbbcode20"],
button[title*="table"],
button[onclick*="table"] {
    width: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

/* Ligne TD TH TR */
#message-box .abbc3_buttons_row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;

    width: auto !important;
}

/* Empêche les éléments de prendre toute la ligne */
#message-box * {
    box-sizing: border-box !important;
}
/* =========================================================
   TOOLBAR BBCODES SUR UNE SEULE LIGNE
   ========================================================= */

/* Conteneur principal de la toolbar */
#message-box .abbc3_buttons,
#format-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    width: 100% !important;
}

/* Le select "Normale" */
#bbcode_font,
select[name="addbbcode20"],
#message-box select {
    width: auto !important;
    min-width: 140px !important;
    max-width: 180px !important;

    display: inline-flex !important;
    vertical-align: middle !important;

    margin: 0 !important;
}

/* Les boutons du bas */
#message-box .abbc3_buttons_row {
    display: contents !important;
}

/* Tous les boutons sur la même ligne */
#message-box .button2,
#message-box input.button2,
#message-box button,
#message-box a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
}

/* Supprime les retours à la ligne parasites */
#message-box br {
    display: none !important;
}