/* define variables */

:root {
	--main-bg-color: rgba(8, 8, 32, 0.95);
	--main-bg-color-full: rgba(8, 8, 32, 1);
	--second-bg-color: rgba(24, 12, 36, 0.95);
	--font-color: #ebeaff;
	--font-color-1: #9ABDE1;
	--font-color-2: #A4A4A4;
	--border-color-1: #94C3FF;
	--border-color-2: #727272;
	--border-color-3: #1C385B;
	--yellow-color: #EFF459;
	--red-color: #CE2525;
	--green-color: #6AFB29;
	--blue-color: #4EA8FF;
	--purple-color: #A335EE;
	--orange-color: #FF8000;
	--gray-color: #999999;

	/* Liens */
	--link-color: #9ABDE1;
	--link-hover-color: #ebeaff;

	/* Séparateurs */
	--hr-color: #AFFFFF;
	--hr-glow: rgba(117, 167, 225, 0.75);

	/* Rapports de combat */
	--rdc-attacker-color: #ff3333;
	--rdc-attacker-bg: #711e26;
	--rdc-attacker-side-bg: #352028;
	--rdc-defender-color: #3399ff;
	--rdc-defender-bg: #1b397c;
	--rdc-defender-side-bg: #1c2c46;
	--rdc-draw-color: #ffaa00;
	--rdc-draw-bg: #685422;
	--rdc-section-bg: #000;
	--rdc-stats-bg: #131722;

	/* Conteneurs 3D */
	--canvas-bg: #000;

	/* Navigation système */
	--nav-galaxy-bg: #7b1fa2;
	--nav-galaxy-hover-bg: #6a1b9a;

	/* Badges et alertes */
	--badge-alert-bg: #e74c3c;
	--badge-alert-hover-bg: #c0392b;

	/* Flotte - rappel */
	--recall-color: #f44336;
	--recall-bg: rgba(244, 67, 54, 0.15);
	--recall-border: rgba(244, 67, 54, 0.3);
	--recall-hover-bg: rgba(244, 67, 54, 0.25);
	--recall-hover-border: rgba(244, 67, 54, 0.5);

	/* Infobulles planètes */
	--infobulle-planet-l-color: #ff6b6b;

	/* Zone dangereuse */
	--danger-border-color: rgba(206, 37, 37, 0.25);
	--danger-glow: rgba(206, 37, 37, 0.05);
	--danger-header-border: rgba(206, 37, 37, 0.2);

	/* Modal */
	--modal-close-color: #ddd;
	--modal-close-hover: #e74c3c;

	/* Cadre conteneur */
	--container-border-image: url('../assets_v1.10/cadre_classique.png');
	--container-border-color: transparent;

	/* Construction */
	--construction-info-bg: rgba(8, 8, 32, 1);
	--btn-destroy-color: #353535;
	--btn-destroy-hover-color: #ff4444;

	/* Boutons */
	--btn-blue-image: url('../assets_v1.10/bountons/btn_blue_md.png');
	--btn-blue-sm-image: url('../assets_v1.10/bountons/btn_blue_sm.png');
	--btn-red-image: url('../assets_v1.10/bountons/btn_red_md.png');
	--btn-red-sm-image: url('../assets_v1.10/bountons/btn_red_sm.png');
	--btn-blue-text: #ffb86f;
	--btn-blue-sm-text: #e9e6ff;
	--btn-blue-hover-text: #fff;
	--btn-red-text: #ffb86f;
	--btn-red-hover-text: #8bff00;

	/* Panneaux thématiques (production, classement, compte, graveyard) */
	--panel-bg: linear-gradient(135deg, rgba(20, 25, 40, 0.95), rgba(30, 35, 50, 0.95));
	--panel-border: rgba(100, 150, 255, 0.2);
	--panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(100, 150, 255, 0.05);
	--panel-header-border: rgba(100, 150, 255, 0.15);
	--panel-header-color: #7cb3ff;
	--panel-th-border: rgba(100, 150, 255, 0.12);
	--panel-separator: rgba(100, 150, 255, 0.1);
	--panel-row-border: rgba(255, 255, 255, 0.04);
	--panel-hover: rgba(100, 150, 255, 0.04);
	--panel-dark: rgba(20, 25, 40, 0.9);
}

* {
	box-sizing: border-box;
}

html {
	font-size: 12px;
}

body {
	background-image: url("../assets_v1.10/wallpaper.jpg");
	/* background-color: black; */
	background-repeat: no-repeat;
	/* background-size: contain; */
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	font-family: Verdana, sans-serif;
	color: #E6E6E6;
	margin: 0px;
	margin-bottom: 100px;
}

h1 {
	background: var(--main-bg-color);
	text-align: center;
	font-size: 18px;
}

h2 {
	background: var(--main-bg-color);
	text-align: center;
	font-size: 15px;
	margin: 10px auto;
}

h3 {
	background: var(--main-bg-color);
	font-size: 15px;
}

h4 {
	font-size: 15px;
}

h5 {
	text-align: center;
	background: var(--main-bg-color);
	font-size: 15px;
}

h6 {
	background: var(--main-bg-color);
	font-size: 15px;
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border-width: 1px;
	border-color: var(--hr-color);
	box-shadow: 0px 0px 10px 2px var(--hr-glow);
}

input[type="text"],
input[type="submit"],
input[type="password"],
input[type="number"],
input[type="email"] {
	padding: 3px 7px;
	border: 1px solid var(--border-color-1);
	background-color: var(--second-bg-color);
	color: var(--font-color);
	line-height: 1;
	cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
	outline: none;
}

select {
	background-color: var(--second-bg-color);
	color: var(--font-color);
	border: 1px solid var(--border-color-2);
	line-height: 1;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

.color-1 {
	color: var(--font-color-1);
}

.color-2 {
	color: var(--font-color-2);
}

a:hover,
.hover-color:hover {
	color: var(--link-hover-color);
}

strong {
	color: var(--red-color);
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.container {
	max-width: 1240px;
	padding: 15px;
	margin: auto;
	border: 1px solid var(--container-border-color);
	border-image-source: var(--container-border-image);
	border-image-slice: 50;
	border-image-width: auto;
}

.cadre_classique {
	border: 1px solid var(--container-border-color);
	border-image-source: var(--container-border-image);
	border-image-slice: 50;
	border-image-width: auto;
}

.cadre_skill {
	background-color: #000;
	margin: 8px;
	padding: 15px;
	border: 1px solid transparent;
	border-image-source: url('../assets_v1.10/cadre_skill.png');
	border-image-slice: 80;
	border-image-width: auto;
}

.cadre_skill_unaviable {
	background-color: #000;
	margin: 8px;
	padding: 15px;
	border: 1px solid transparent;
	border-image-source: url('../assets_v1.10/cadre_skill_unaviable.png');
	border-image-slice: 80;
	border-image-width: auto;
}

.z-index-1 {
	z-index: 1;
}

.z-index-2 {
	z-index: 2;
}

.z-index-3 {
	z-index: 3;
}

.z-index-4 {
	z-index: 4;
}

.z-index-5 {
	z-index: 5;
}

.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

.d-inline-block {
	display: inline-block !important;
}

.m-auto {
	margin: auto;
}

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

.text-22 {
	font-size: 22px;
}

.text-20 {
	font-size: 20px;
}

.fw-bold {
	font-weight: bold;
}

.mb-5 {
	margin-bottom: 50px;
}

.mb-4 {
	margin-bottom: 40px;
}

.mb-3 {
	margin-bottom: 30px;
}

.mb-2 {
	margin-bottom: 20px;
}

.mb-1 {
	margin-bottom: 10px;
}

.mb-05 {
	margin-bottom: 5px;
}

.mb-0 {
	margin-bottom: 0;
}

.mt-5 {
	margin-top: 50px;
}

.mt-4 {
	margin-top: 40px;
}

.mt-3 {
	margin-top: 30px;
}

.mt-2 {
	margin-top: 20px;
}

.mt-1 {
	margin-top: 10px;
}

.mt-05 {
	margin-top: 5px;
}

.ms-5 {
	margin-left: 50px;
}

.ms-4 {
	margin-left: 40px;
}

.ms-3 {
	margin-left: 30px;
}

.ms-2 {
	margin-left: 20px;
}

.ms-1 {
	margin-left: 10px;
}

.me-5 {
	margin-right: 50px;
}

.me-4 {
	margin-right: 40px;
}

.me-3 {
	margin-right: 30px;
}

.me-2 {
	margin-right: 20px;
}

.me-1 {
	margin-right: 10px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.mx-1 {
	margin-left: 1px;
	margin-right: 1px;
}

.mx-2 {
	margin-left: 2px;
	margin-right: 2px;
}

.mx-3 {
	margin-left: 3px;
	margin-right: 3px;
}

.mx-4 {
	margin-left: 4px;
	margin-right: 4px;
}

.mx-5 {
	margin-left: 5px;
	margin-right: 5px;
}

.mx-15 {
	margin-left: 15px;
	margin-right: 15px;
}

.p-0 {
	padding: 0;
}

.p-1 {
	padding: 10px;
}

.p-2 {
	padding: 20px;
}

.p-3 {
	padding: 30px;
}

.gap-1 {
	gap: 1px;
}

.gap-3 {
	gap: 3px;
}

.gap-5 {
	gap: 5px;
}

.gap-10 {
	gap: 10px;
}

.gap-15 {
	gap: 15px;
}

.gap-20 {
	gap: 20px;
}

.picto_ressource {
	height: 14px;
	margin-right: 4px;
	vertical-align: bottom;
}

/****THEME PRINCIPAL****/
.main-bg-color {
	background-color: var(--main-bg-color);
}

.second-bg-color {
	background-color: var(--second-bg-color);
}

.container {
	background-color: var(--main-bg-color);
}

input,
textarea,
a.info:hover span {
	border: 1px solid var(--border-color-2);
}

.border-1 {
	border: 1px solid var(--border-color-1);
}

.border-2 {
	border: 1px solid var(--border-color-2);
}

.border-3 {
	border: 1px solid var(--border-color-3);
}

.border-width-1 {
	border-width: 1px;
}

.border-width-2 {
	border-width: 2px;
}

.border-width-3 {
	border-width: 3px;
}

.border-color-1 {
	border-color: var(--border-color-1);
}

.border-color-2 {
	border-color: var(--border-color-2);
}

.border-color-3 {
	border-color: var(--border-color-3);
}

.border-solid {
	border-style: solid;
}

/****NAV BAR****/
.navmenu_headmenu {
	position: relative;
	margin: auto;
	margin-top: -5px;
	width: 1250px;
	height: 174px;
	z-index: 1;
}

.navmenu_mobile {
	display: none;
}

.navmenu_menu {
	position: absolute;
	width: 1250px;
	height: 175px;
	background-image: url("../assets_v1.10/navmenu_menu.png");
	background-repeat: no-repeat;
	z-index: 2;
}

.navmenu_sous_menu {
	display: flex;
	justify-content: space-between;
	padding: 23px 0 0 0;
	width: 80%;
	margin: auto;
}

.navmenu_sous_menu_droite {
	position: relative;
	z-index: 2;
	width: 40%;
	display: flex;
	justify-content: space-between;
}

.navmenu_sous_menu_gauche {
	position: relative;
	z-index: 2;
	flex-direction: flex-end;
	width: 40%;
	display: flex;
	justify-content: space-between;
}

.navmenu_sous_menu_droite ul,
.navmenu_sous_menu_gauche ul {
	position: absolute;
	top: 25px;
	display: flex;
	width: 450px;
	justify-content: space-around;
	z-index: 4;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}

.navmenu_sous_menu_droite ul {
	left: 70px;
}

.navmenu_sous_menu_gauche ul {
	left: 740px;
}

.navmenu_sous_menu_droite li,
.navmenu_sous_menu_gauche li {
	text-align: center;
	flex: 1;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.navmenu_sous_menu_droite li a,
.navmenu_sous_menu_gauche li a {
	display: block;
}

.navmenu_fleche_gauche,
.navmenu_fleche_droite,
.navmenu_batiment,
.navmenu_recherche,
.navmenu_armada,
.navmenu_flotte,
.navmenu_galaxie,
.navmenu_alliance,
.navmenu_message {
	position: absolute;
	background-repeat: no-repeat;
	z-index: 4;
}

.PM,
.navmenu_planete,
.navmenu_planete3D {
	position: absolute;
	text-align: center;
	z-index: 4;
}

.navmenu_batiment:hover,
.navmenu_recherche:hover,
.navmenu_armada:hover,
.navmenu_flotte:hover,
.navmenu_galaxie:hover,
.navmenu_alliance:hover {
	background-position: 0px -50px;
}

.navmenu_message:hover {
	background-position: 0px -36px;
}

.navmenu_fleche_gauche {
	top: 30px;
	left: 547px;
	width: 15px;
	height: 15px;
	background-image: url("../assets_v1.10/navmenu_Fleche.png");
	transform: scaleX(-1);
	/*flêche tournée vers la gauche*/
}

.PM {
	top: 0px;
	left: 574px;
	width: 106px;
	font-size: 14px;
	font-weight: bold;
	color: #D0D006;
}

#listeplanet option[selected] {
	background-color: #0090FF;
}

.navmenu_planete {
	top: 32px;
	left: 574px;
	width: 106px;
	height: 15px;
	font-size: 13px;
	color: #FFFFFF;
}

.navmenu_planete select {
	background-color: transparent;
	border-color: transparent;
	width: 100px;
	text-align: center;
}

.navmenu_planete select:hover {
	box-shadow: none;
}

.navmenu_planete option {
	background-color: #000000;
}

.navmenu_planete3D {
	top: 66px;
	left: 574px;
	width: 106px;
	height: 15px;
	font-size: 13px;
	color: #FFFFFF;
}

.navmenu_fleche_droite {
	top: 30px;
	left: 693px;
	width: 15px;
	height: 15px;
	background-image: url("../assets_v1.10/navmenu_Fleche.png");
}

.navmenu_batiment {
	top: 60px;
	left: 40px;
	width: 161px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Batiment.png");
}

.navmenu_recherche {
	top: 60px;
	left: 178px;
	width: 181px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Recherche.png");
}

.navmenu_armada {
	top: 60px;
	left: 336px;
	width: 167px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Armada.png");
}

.navmenu_flotte {
	top: 60px;
	left: 750px;
	width: 182px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Flotte.png");
}

.navmenu_galaxie {
	top: 60px;
	left: 905px;
	width: 169px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Galaxie.png");
}

.navmenu_alliance {
	top: 60px;
	left: 1050px;
	width: 162px;
	height: 50px;
	background-image: url("../assets_v1.10/navmenu_Alliance.png");
}

.navmenu_message {
	top: 89px;
	left: 569px;
	width: 115px;
	height: 36px;
	background-image: url("../assets_v1.10/navmenu_Message.png");
}

.newmessnum {
	position: relative;
	top: 20px;
	left: 64px;
	font-size: 11px;
	color: #DDF0EE;
	z-index: 5;
}

.navmenu_flechegauche {
	position: absolute;
	background-image: url("../assets_v1.10/navmenu_fleche.png");
}

.navmenu_flechedroite {
	position: absolute;
	background-image: url("../assets_v1.10/navmenu_fleche.png");
}

.navmenu_ressources {
	position: absolute;
	display: flex;
	gap: 2px;
	top: 132px;
	left: 77px;
	width: 500px;
	z-index: 4;
}

.navmenu_ressources>div {
	padding: 2px;
}

.navmenu_performances {
	position: absolute;
	top: 132px;
	left: 690px;
	z-index: 4;
	width: 500px;
}

.navmenu_performances>div {
	padding: 2px;
}

/****RESTE****/

.pointer {
	cursor: pointer;
}

.header {
	width: 100%;
}


.fs-9 {
	font-size: 9px;
}

.fs-10 {
	font-size: 10px;
}

.fs-11 {
	font-size: 11px;
}

.fs-12 {
	font-size: 12px;
}

.fs-13 {
	font-size: 13px;
}

.fs-14 {
	font-size: 14px;
}

.fs-15 {
	font-size: 15px;
}

.fs-16 {
	font-size: 16px;
}

.fs-17 {
	font-size: 17px;
}

.fs-18 {
	font-size: 18px;
}

.fs-19 {
	font-size: 19px;
}

.fs-20 {
	font-size: 20px;
}

.metal {
	color: #818191;
}

.cristal {
	color: #225AF3;
}

.gaz {
	color: #4FE572;
}

.uranium {
	color: #E93D3D;
}

.energie {
	color: #FBFB81;
}


.overflow-auto {
	overflow: auto;
}

.message {
	position: relative;
	margin: auto;
	color: #DDF0EE;
	font-size: 12px;
	text-align: center;
	margin-bottom: 40px;
	padding: 10px;
	background-color: var(--main-bg-color);
	border: 1px solid var(--border-color-3);
}

.green {
	color: var(--green-color);
}

.red {
	color: var(--red-color);
}

.jaune {
	color: var(--yellow-color) !important;
}

.blue {
	color: var(--blue-color) !important;
}

.border-jaune {
	border-color: var(--yellow-color) !important;
}

.new {
	color: var(--yellow-color);
	font-size: 10px;
}

/****BOUTONS****/

.btn_max {
	background-color: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	color: var(--font-color);
	padding: 2px;
	cursor: pointer;
}

.btn_clear {
	background-color: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	color: var(--font-color);
	padding: 2px;
	cursor: pointer;
}

.btn_blue,
.btn_red,
.btn_blue_sm,
.btn_red_sm {
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: none;
	cursor: pointer;
	outline: none;
}

.btn_blue {
	background-image: var(--btn-blue-image);
	background-position: top left;
	width: 220px;
	color: var(--btn-blue-text);
}

.btn_blue_sm {
	background-image: var(--btn-blue-sm-image);
	background-position: top left;
	width: 110px;
	color: var(--btn-blue-sm-text);
}

.btn_blue:hover,
.btn_blue_sm:hover {
	background-position-y: 35px;
	color: var(--btn-blue-hover-text);
}

.btn_red {
	background-image: var(--btn-red-image);
	background-position: top left;
	width: 220px;
	color: var(--btn-red-text);
}

.btn_red_sm {
	background-image: var(--btn-red-sm-image);
	background-position: top left;
	width: 110px;
	color: var(--btn-red-text);
}

.btn_red:hover,
.btn_red_sm:hover {
	background-position-y: 35px;
	color: var(--btn-red-hover-text);
}

.btn_upgrade {
	position: absolute;
	color: #fff;
	border: 1px solid #28a745;
	background: linear-gradient(to bottom, rgba(148, 161, 77, 1) 0%, rgba(92, 107, 10, 1) 100%);
	bottom: -2px;
	right: 0px;
	font-size: 16px;
	padding: 1px 5px;
	border-radius: 4px 0 0 0;
}

.btn_upgrade:hover {
	background: linear-gradient(to bottom, rgba(92, 107, 10, 1) 0%, rgba(148, 161, 77, 1) 100%);
}

.unavailable_btn {
	filter: grayscale(100%) brightness(50%);
}

button {
	background: none;
	font-family: Verdana, sans-serif;
	cursor: pointer;
}

input[type="submit"].btn_blue,
input[type="submit"].btn_blue_sm,
input[type="submit"].btn_red,
input[type="submit"].btn_red_sm {
	border: none;
}

.btn-destroy {
	color: var(--btn-destroy-color);
	text-decoration: none;
}

.btn-destroy:hover {
	color: var(--btn-destroy-hover-color);
}

/****MAP****/


.tableauconstruction {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}

.tableauconstruction:hover {
	border-color: var(--border-color-1);
}

.tableauconstruction .image {
	max-width: 100%;
	overflow: hidden;
	flex-shrink: 0;
}

.tableauconstruction .image img {
	max-width: 100%;
	min-width: 100%;
	display: block;
}

.infos_construction>img {
	max-width: 100%;
	display: block;
}

.tableauconstruction .tableauconstruction-sub-1 {
	font-weight: bold;
	font-size: 12px;
	position: absolute;
	width: 100%;
	text-align: right;
	padding-top: 1px;
	padding-right: 3px;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1;
	color: var(--yellow-color);
}

.tableauconstruction.unavailable .image img {
	filter: grayscale(100%) brightness(50%);
}

.tableauconstruction.unavailable .tableauconstruction-sub-1 {
	color: #777;
}

#cntdwn1 {
	cursor: pointer;
}

.tableconstructiontemps {
	position: relative;
	color: #0090FF;
}

.listeconstruction {
	position: absolute;
	top: 32px;
	right: 0px;
	padding: 5px;
	margin: auto;
	background-color: rgba(0, 0, 0, 0.9);
	color: #DDF0EE;
	text-align: center;
	z-index: 2;
	overflow: auto;
	max-height: 85%;
}

.listeconstruction.listeconstruction_defense {
	right: 135px;
}

.listeconstruction tr {
	border: 1px solid var(--border-color-2);
}

.listeconstruction th {
	padding: 2px;
	font-weight: bold;
	border-radius: 5px;
}

.listeconstruction td {
	border-radius: 5px;
	height: 20px;
}

.listeconstruction img {
	width: 40px;
}

.image_rapport_espionnage_img {
	width: 40px;
}

.errors_launch_fleet {
	width: 100%;
	text-align: center;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 0px 0px 1px 1px #5C8BEE;
	color: var(--red-color);
	font-weight: bold;
	background-color: var(--main-bg-color);
	border: 1px solid var(--border-color-2);
}

.lootbox_message {
	background-color: var(--second-bg-color);
	border: 1px solid var(--border-color-3);
}

.rarity1 {
	/* commun */
	color: var(--gray-color);
	stroke: var(--gray-color);
	fill: var(--gray-color);
	/* gris */
}

.rarity2 {
	/* rare */
	color: var(--blue-color);
	stroke: var(--blue-color);
	fill: var(--blue-color);
	/* bleu */
}

.rarity3 {
	/* epic */
	color: var(--purple-color);
	stroke: var(--purple-color);
	fill: var(--purple-color);
	/* violet */
}

.rarity4 {
	/* legendary */
	color: var(--orange-color);
	stroke: var(--orange-color);
	fill: var(--orange-color);
	/* orange doré */
}

/* =============================================== */
/* STYLES POUR LES ARTEFACTS SVG */
/* =============================================== */

/* Container pour les artefacts avec cadre et type superposés */
.artefact-type {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	height: 40%;
}

.artefact-type img {
	display: block;
	filter:
		drop-shadow(0.5px 0 0 currentColor) drop-shadow(-0.5px 0 0 currentColor) drop-shadow(0 0.5px 0 currentColor) drop-shadow(0 -0.5px 0 currentColor);
}

.artefact-frame-svg {
	width: 100%;
	height: 100%;
}


.table {
	width: 100%;
	margin: auto;
	border-collapse: collapse;
	border: 1px solid var(--border-color-2);
}

.table th,
.table td {
	border: 1px solid var(--border-color-2);
	padding: 2px;
}

.table-striped tr:nth-child(odd) {
	background-color: rgba(43, 19, 66, 0.95);
}

.d-flex {
	display: flex;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-around {
	justify-content: space-around !important;
}

.justify-content-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

.flex-direction-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.m-auto {
	margin: auto;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.ms-auto {
	margin-left: auto;
}

.me-auto {
	margin-right: auto;
}

.flex-1 {
	flex: 1;
}

.tabbulle {
	font-size: 12px;
	width: 170px;
	text-align: center;
	border-collapse: collapse;
}

.tabbulle td {
	min-width: 26px;
	border: 1px solid var(--border-color-2);
}

.info {
	position: relative;
	color: #9ABDE1;
}

.info span {
	display: none;
	position: absolute;
	color: #9ABDE1;
	white-space: nowrap;
	font-size: 12px;
	top: 30px;
	left: 20px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 5px;
	padding-left: 5px;
	background: black;
	box-shadow: 0px 0px 8px 1px #5C8BEE;
	border-radius: 5px;
}

.info:hover {
	background: none;
	z-index: 10;
	cursor: help;
}

.info:hover span {
	display: block;
}

.SystemSection {
	display: grid;
	grid-template-columns: 80px 80px 20px 320px 80px;
	gap: 3px 3px;
	width: fit-content;
	margin: auto;
}

.SystemSection>div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid var(--border-color-3);
	overflow: hidden;
}

.SystemSection .img_astre {
	width: 100%;
}

.SystemSection .empty-slot {
	background: #000;
	min-height: 50px;
}

.SystemSection .planet-container-wrapper {
	width: 100%;
	height: 100%;
	min-height: 50px;
}

.SystemSection .planet-3d-container {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Loader planète 3D */
.planet-3d-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.planet-3d-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	animation: planet3d-spin 0.8s linear infinite;
}

@keyframes planet3d-spin {
	to {
		transform: rotate(360deg);
	}
}

.SystemSection .ring {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid #fff;
	position: absolute;
	bottom: 4px;
	right: 4px;
}

div[data-panel] {
	display: none;
}

div[data-panel].active {
	display: block;
}

.center {
	text-align: center;
}


.button_delete_message {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 22px;
}

/* ========================================
   RAPPORTS DE COMBAT
   ======================================== */

.rapport-combat {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 10px;
	box-shadow: var(--panel-shadow);
	padding: 0;
	margin: 16px auto;
	max-width: 800px;
}

/* Bandeau résultat en haut */
.rdc-result-banner {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.rdc-result-attacker {
	background: var(--rdc-attacker-bg);
	color: var(--rdc-attacker-color);
	border-bottom: 6px solid var(--rdc-attacker-color);
}

.rdc-result-defender {
	background: var(--rdc-defender-bg);
	color: var(--rdc-defender-color);
	border-bottom: 6px solid var(--rdc-defender-color);
}

.rdc-result-draw {
	background: var(--rdc-draw-bg);
	color: var(--rdc-draw-color);
	border-bottom: 6px solid var(--rdc-draw-color);
}

/* Titres de section (AVANT/APRES/BILAN) */
.rdc-section-title {
	padding: 8px 16px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--panel-header-color);
	border-top: 1px solid var(--panel-header-border);
	border-bottom: 1px solid var(--panel-header-border);
	background: var(--rdc-section-bg);
}

/* Panneaux attaquant / défenseur */
.rdc-side {
	padding: 10px 12px;
	margin: 0;
}

.rdc-side-attacker {
	background: var(--rdc-attacker-side-bg);
	border-left: 6px solid var(--rdc-attacker-color);
}

.rdc-side-defender {
	background: var(--rdc-defender-side-bg);
	border-left: 6px solid var(--rdc-defender-color);
}

/* Labels (Flotte attaquante, etc.) */
.rdc-side-label {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

.rdc-side-attacker .rdc-side-label {
	color: var(--rdc-attacker-color);
}

.rdc-side-defender .rdc-side-label {
	color: var(--rdc-defender-color);
}

.rdc-side-label-sub {
	margin-top: 8px;
	color: var(--font-color-2);
	font-size: 11px;
}

/* Nom du joueur */
.rdc-container0 {
	font-size: 11px;
	color: var(--font-color-2);
	margin-top: 4px;
}

.rdc-container1 {
	margin: 5px;
}

/* VS séparateur */
.rdc-vs {
	color: var(--red-color);
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
	padding: 4px 0;
	text-shadow: 0 0 8px rgba(206, 37, 37, 0.4);
}

/* Barre de stats (tirs, attaque, PV) */
.rdc-stats-bar {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 6px;
	padding: 5px 10px;
	background: var(--rdc-stats-bg);
	border-radius: 6px;
	font-size: 11px;
}

.rdc-stat {
	color: var(--font-color-2);
	white-space: nowrap;
}

.rdc-stat i {
	margin-right: 3px;
	font-size: 10px;
}

.rdc-stat .bi-bullseye {
	color: var(--orange-color);
}

.rdc-stat .bi-lightning-fill {
	color: var(--yellow-color);
}

.rdc-stat .bi-heart-fill {
	color: var(--red-color);
}

/* Section Bilan */
.rdc-bilan {
	padding: 10px 16px;
}

.rdc-bilan-row {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 0;
	border-bottom: 1px solid var(--panel-row-border);
	font-size: 11px;
	gap: 10px;
}

.rdc-bilan-row:last-child {
	border-bottom: none;
}

.rdc-bilan-label {
	flex-shrink: 0;
	font-weight: bold;
	color: var(--font-color-1);
}

.rdc-bilan-values {
	color: var(--font-color);
}

.rdc-bilan-values img {
	width: 14px;
	height: 14px;
}

.rdc-bilan-total {
	color: var(--font-color-2);
	font-style: italic;
}

.d-grid {
	display: grid;
}

.grid-6-col {
	grid-template-columns: repeat(6, 1fr);
}

.grid-5-col {
	grid-template-columns: repeat(5, 1fr);
}

.grid-4-col {
	grid-template-columns: repeat(4, 1fr);
}

.grid-3-col {
	grid-template-columns: repeat(3, 1fr);
}

.grid-2-col {
	grid-template-columns: repeat(2, 1fr);
}

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

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

.no-mobile {
	display: block;
}

.only-mobile {
	display: none;
}


.container-info {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 10px;
}

.flex-column {
	flex-direction: column;
}

.grid_construction {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
}


.rapport_espionnage {
	display: flex;
	align-items: start;
	margin-top: 10px;
}

.rapport_espionnage table {
	margin: 0;
	flex: 1;
}

.rapport_espionnage table th {
	background-color: var(--second-bg-color);
	color: var(--red-color);
}

.rapport_espionnage table:first-child {
	flex: 3;
}


#online_users_count,
#horloge {
	text-align: center;
	font-size: 10px;
	color: #919191;
	padding: 0 20px;
}

/* Styles pour la page FleetMission */
.fleet-mission-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color-2);
}

.fleet-mission-header h2 {
	margin: 0;
	font-size: 18px;
}

.back-link {
	color: var(--font-color-1);
	text-decoration: none;
	padding: 6px 10px;
	border: 1px solid var(--border-color-2);
	border-radius: 4px;
	transition: all 0.3s ease;
	font-size: 12px;
}

.back-link:hover {
	background: var(--second-bg-color);
	border-color: var(--border-color-1);
}

.fleet-mission-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Section Flotte */
.fleet-section {
	background: var(--main-bg-color);
	padding: 12px;
	border-radius: 6px;
}

.fleet-ships {
	margin-bottom: 12px;
}

.code-mission-container {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
}

.code-mission-status {
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-loading {
	color: var(--font-color-2);
	animation: spin 1s linear infinite;
}

.code-success {
	color: var(--green-color);
}

.code-error {
	color: var(--red-color);
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Flottes à quai - Design moderne */
.fleets-docked-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.fleet-card {
	background: #000;
	border: 1px solid var(--border-color-2);
	border-radius: 8px;
	transition: all 0.3s ease;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

.fleet-card:hover:not(.allied) {
	border-color: var(--yellow-color);
}

.fleet-card.allied {
	cursor: default;
	border-color: var(--blue-color);
}

.fleet-card.selected {
	border-color: var(--yellow-color);
	box-shadow: 0 0 12px rgba(239, 244, 89, 0.4);
}

/* Planet destination cards */
.planet-destination-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 10px 0;
}

.planet-destination-card {
	position: relative;
	overflow: hidden;
	height: 60px;
	background-color: #000;
	border: 1px solid var(--border-color-3);
	border-radius: 8px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.planet-destination-card:hover {
	border-color: var(--font-color-1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

.planet-destination-card.selected {
	border-color: var(--yellow-color);
	box-shadow: 0 0 12px rgba(239, 244, 89, 0.4);
}

.planet-destination-3d {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.planet-destination-3d img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.planet-destination-name {
	position: relative;
	z-index: 1;
	text-align: center;
	font-weight: bold;
	color: var(--font-color);
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 11px;
}

.planet-destination-coords {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--font-color-2);
	font-size: 10px;
	background-color: rgba(0, 0, 0, 0.5);
}

.fleet-card-planet-header {
	position: relative;
	height: 80px;
	/* border-bottom: 1px solid var(--border-color-2); */
	border-radius: 8px 8px 0 0;
	/* overflow: hidden; */
	/* background-color: #000; */
}

.planet-background-3d {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.planet-background-3d img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fleet-type-indicator {
	position: relative;
	z-index: 2;
	font-weight: bold;
	font-size: 11px;
	padding: 4px 8px;
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
}

.fleet-type-indicator.own-fleet {
	background: rgba(0, 112, 221, 0.8);
}

.fleet-type-indicator.allied-reinforcement,
.fleet-type-indicator.reinforcement {
	color: var(--blue-color);
}

.fleet-type-indicator i {
	margin-right: 4px;
	margin-left: 4px;
}

.recall-btn {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.9);
	color: var(--main-bg-color-full);
	padding: 4px 8px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 11px;
	font-weight: bold;
	top: 7px;
	left: 7px;
}

.recall-btn:hover {
	background: rgba(255, 255, 255, 1);
	color: var(--main-bg-color-full);
}

.recall-btn i {
	margin-right: 4px;
}

.fleet-planet-info {
	position: relative;
	z-index: 2;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 4px 8px;
	border-radius: 4px;
	align-self: flex-start;
	margin-top: 0;
}

.fleet-planet-info .planet-name {
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 2px;
}

.fleet-planet-info .planet-name a {
	color: var(--font-color-1);
	text-decoration: none;
}

.fleet-planet-info .planet-name a:hover {
	color: var(--yellow-color);
}

.fleet-planet-info .coordinates {
	color: var(--font-color-2);
	font-size: 10px;
}

.fleet-card-ships {
	padding: 6px;
	position: relative;
	z-index: 1;
}

.table-comptoire-commercial td {
	padding: 8px 10px;
}

/* Pictogrammes des missions */
.picto_mission {
	width: 35px;
	height: 35px;
	filter: brightness(0) saturate(100%) invert(66%) sepia(19%) saturate(1168%) hue-rotate(178deg) brightness(95%) contrast(88%);
	transition: filter 0.3s ease;
}

/* Responsive design */
@media (max-width: 768px) {
	.resource-inputs {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.capacity-info {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}

	.capacity-controls {
		justify-content: center;
	}

	.resource-input-group {
		padding: 8px;
	}

	.input-controls {
		gap: 2px;
	}

	.resource-input {
		min-width: 0;
		flex: 1;
		padding: 2px 4px;
		font-size: 10px;
	}

	.btn_max,
	.btn_clear {
		padding: 4px 6px;
		font-size: 9px;
		min-width: 28px;
		height: 24px;
		flex-shrink: 0;
		cursor: pointer;
	}

	.planet-image {
		width: 50px;
	}

	.fleetmission-planet-3d {
		width: 50px;
		height: 50px;
	}

	.planet-resources {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4px;
	}

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

	.fleets-docked-container {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.fleet-card-ships {
		gap: 4px;
	}

	.fleet-card-planet-header {
		height: 70px;
	}

	.fleet-type-indicator {
		font-size: 11px;
		padding: 3px 6px;
	}

	.fleet-planet-info .planet-name {
		font-size: 12px;
	}

	.ship-icon-lg {
		width: 50px;
		height: 50px;
	}

	.fleet-action-btn {
		justify-content: center;
	}

	.fissure-closure-progress {
		font-size: 11px;
	}

	.progress-bar {
		height: 14px;
	}

	.btn-close-fissure {
		font-size: 11px;
		padding: 6px 10px;
	}

	.destination-section {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.fleets-docked-container {
		gap: 8px;
	}

	.fleet-card-planet-header {
		height: 60px;
	}

	.fleet-type-indicator {
		font-size: 10px;
		padding: 2px 4px;
	}

	.fleet-planet-info .planet-name {
		font-size: 11px;
	}

	.recall-btn {
		font-size: 10px;
		padding: 2px 4px;
	}

	.ship-selection-card {
		padding: 8px;
	}

	.ship-icon-lg {
		width: 45px;
		height: 45px;
	}
}

/* Sélection de flotte - Design moderne */
.fleet-selection-container {
	border-radius: 8px;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

/* Ferrailleur - grille adaptée */
.ferrailleur-container {
	grid-template-columns: repeat(5, 1fr);
}

.ship-selection-card {
	display: flex;
	flex-direction: column;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	border-radius: 6px;
	padding: 12px;
	transition: all 0.3s ease;
}

.ship-selection-card:hover {
	border-color: var(--font-color-1);
	background: rgba(148, 195, 255, 0.05);
}

/* .ship-item et .ship-item-qty sont définis dans infobulle.css */

.ship-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.input-group {
	display: flex;
	align-items: center;
	background: var(--main-bg-color);
	border: 1px solid var(--border-color-2);
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
}

.ship-quantity-input {
	background: var(--main-bg-color);
	border: none;
	color: var(--font-color);
	padding: 8px 12px;
	width: 100%;
	text-align: center;
}

.ship-quantity-input:focus {
	outline: none;
	background: rgba(148, 195, 255, 0.1);
}

.ship-action-buttons {
	display: flex;
	gap: 4px;
}

.btn-set-max {
	background: var(--blue-color);
	color: white;
	border: none;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn-set-max:hover {
	background: rgba(0, 112, 221, 0.8);
}

.btn-set-zero {
	background: var(--red-color);
	color: white;
	border: none;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn-set-zero:hover {
	background: rgba(206, 37, 37, 0.8);
}

.fleet-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.fleet-action-btn {
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.3s ease;
}

.fleet-action-btn.primary {
	background: var(--green-color);
	color: var(--main-bg-color-full);
}

.fleet-action-btn.primary:hover {
	background: rgba(106, 251, 41, 0.8);
	transform: translateY(-1px);
}

.fleet-action-btn.secondary {
	background: var(--red-color);
	color: white;
}

.fleet-action-btn.secondary:hover {
	background: rgba(206, 37, 37, 0.8);
	transform: translateY(-1px);
}

.fleet-cargo h4 {
	margin: 0 0 6px 0;
	color: var(--font-color-2);
	font-size: 12px;
	text-align: center;
}

.cargo-display {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.cargo-item {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	font-size: 11px;
}

/* Section destination */
.destination-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px 0;
}

.destination-card,
.mission-code-card {
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-3);
	border-radius: 8px;
	overflow: hidden;
}

.destination-header,
.mission-code-header {
	background: var(--main-bg-color);
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color-3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.destination-header h3,
.mission-code-header h3 {
	margin: 0;
	font-size: 14px;
	color: var(--font-color-2);
}

.destination-header i,
.mission-code-header i {
	color: var(--font-color-1);
}

.destination-content,
.mission-code-content {
	padding: 10px;
}

.destination-select-group,
.destination-coordinates-group {
	margin-bottom: 16px;
}

.destination-select-group label,
.destination-coordinates-group label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--font-color-2);
	font-weight: 500;
}

.destination-select-group select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	background: var(--main-bg-color);
	color: var(--font-color-1);
	font-size: 12px;
}

.destination-divider {
	text-align: center;
	position: relative;
	margin: 16px 0;
}

.destination-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-color-3);
	z-index: 1;
}

.destination-divider span {
	background: var(--second-bg-color);
	padding: 0 12px;
	color: var(--font-color-2);
	font-size: 11px;
	position: relative;
	z-index: 2;
}

.coordinates-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.coordinates-inputs input {
	flex: 1;
	min-width: 60px;
	padding: 5px;
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	background: var(--main-bg-color);
	color: var(--font-color-1);
	font-size: 12px;
	text-align: center;
}

.code-mission-container {
	position: relative;
	display: flex;
	align-items: center;
}

.code-mission-container input {
	flex: 1;
	padding: 10px 40px 10px 12px;
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	background: var(--main-bg-color);
	color: var(--font-color-1);
	font-size: 12px;
}

.code-mission-status {
	position: absolute;
	right: 12px;
	display: flex;
	align-items: center;
}

/* Section Route */
.route-section {
	background: var(--main-bg-color);
	padding: 12px;
	border-radius: 6px;
}

/* Route Timeline */
.route-timeline {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 4px;
}

.route-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.route-planet {
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	border-radius: 6px;
	padding: 8px;
	width: 100%;
	max-width: 300px;
}

.planet-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
}

.planet-header h4 {
	margin: 0;
	font-size: 12px;
	color: var(--font-color-1);
}

.planet-header i {
	color: var(--font-color-2);
}

.time-info {
	background: var(--main-bg-color);
	border: 1px solid var(--border-color-2);
	border-radius: 6px;
	padding: 6px 12px;
	text-align: center;
}

.time-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 10px;
	color: var(--font-color-2);
	font-weight: bold;
	margin-bottom: 2px;
}

.time-value {
	font-size: 11px;
	color: var(--font-color-1);
	font-weight: bold;
}

.departure-time .time-label i {
	color: var(--green-color);
}

.arrival-time .time-label i {
	color: var(--blue-color);
}

.return-time .time-label i {
	color: var(--font-color-2);
}

.route-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
}

.flight-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	padding: 6px 12px;
}

.distance-info,
.flight-duration {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: var(--font-color-2);
}

.connector-arrow {
	font-size: 16px;
	color: var(--font-color-2);
}

.return-section {
	display: none;
	flex-direction: column;
	gap: 12px;
}

/* Version desktop */
@media screen and (min-width: 801px) {
	.route-timeline {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.route-step {
		flex: 0 0 auto;
		min-width: 160px;
	}

	.route-connector {
		align-items: center;
		margin: 0;
		margin-top: 60px;
		min-width: 120px;
	}

	.flight-info {
		margin-right: 8px;
		min-width: 80px;
	}

	.return-connector {
		margin-top: 60px;
	}

	.return-connector .connector-arrow {
		transform: rotate(180deg);
	}

	.departure-step,
	.arrival-step,
	.return-step {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.return-section {
		flex-direction: row;
		gap: 20px;
	}
}

.route-display {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: center;
}

.route-planet {
	text-align: center;
}

.route-planet h4 {
	margin: 0;
	color: var(--font-color-2);
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.planet-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.planet-image {
	width: 45px;
	height: auto;
}

.fleetmission-planet-3d {
	position: relative;
	width: 45px;
	height: 45px;
}

.fleetmission-planet-3d img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.planet-details {
	text-align: center;
}

.planet-name {
	font-weight: bold;
	color: var(--font-color);
	margin-bottom: 2px;
	font-size: 11px;
}

.planet-owner {
	color: var(--font-color-2);
	font-size: 10px;
	margin-bottom: 4px;
}

.planet-resources {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	justify-content: center;
}

.resource-item {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
}

.route-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.distance-display {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--yellow-color);
	font-weight: bold;
}

.route-arrow {
	font-size: 18px;
	color: var(--font-color-1);
}

/* Section Configuration Mission */
.mission-config-section {
	background: var(--main-bg-color);
	padding: 12px;
	border: 1px solid var(--border-color-2);
	border-radius: 6px;
}

.mission-config-section h3 {
	margin: 0 0 8px 0;
	color: var(--font-color-1);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.flight-config {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	margin-bottom: 8px;
}

.speed-config label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
	color: var(--font-color-2);
	font-size: 12px;
}

.flight-stats {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}

.stat-value {
	color: var(--yellow-color);
	font-weight: bold;
}

.schedule-info {
	display: flex;
	gap: 15px;
	padding: 6px 0;
	border-top: 1px solid var(--border-color-3);
}

.schedule-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
}


/* Section Gestion Fret */
.cargo-management-section {
	background: var(--main-bg-color);
	padding: 12px;
	border-radius: 8px;
}

.fleet-section h3,
.mission-type-section h3,
.route-section h3,
.cargo-management-section h3 {
	color: var(--font-color-1);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Configuration de vitesse */
.speed-config-section {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--border-color-3);
}

.speed-control label {
	color: var(--font-color-1);
	font-size: 12px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.speed-slider-container {
	position: relative;
	margin-bottom: 8px;
}

.speed-graduations {
	position: absolute;
	top: -2px;
	left: 8px;
	right: 8px;
	height: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

.graduation {
	width: 2px;
	height: 10px;
	background: var(--border-color-2);
	border-radius: 1px;
	position: relative;
}

.graduation[data-value="10"],
.graduation[data-value="50"],
.graduation[data-value="100"] {
	height: 12px;
	background: var(--font-color-2);
	width: 3px;
}

.graduation[data-value="50"] {
	background: var(--blue-color);
}

.graduation[data-value="100"] {
	background: var(--green-color);
}

.graduation.active {
	background: var(--yellow-color) !important;
	width: 4px !important;
	height: 14px !important;
	box-shadow: 0 0 4px var(--yellow-color);
	animation: pulse 1s ease-in-out;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}

.speed-slider {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 2;
}

.speed-slider::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--blue-color);
	border: 2px solid var(--font-color-1);
	cursor: pointer;
}

.speed-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--blue-color);
	border: 2px solid var(--font-color-1);
	cursor: pointer;
}

.speed-labels {
	display: flex;
	position: relative;
	font-size: 9px;
	color: var(--font-color-2);
	margin-top: 6px;
	height: 12px;
	padding: 0 8px;
}

.speed-labels span {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

.speed-labels span:nth-child(1) {
	left: 0%;
	color: var(--font-color-2);
	transform: translateX(0);
}

.speed-labels span:nth-child(2) {
	left: 22.22%;
	color: var(--font-color-2);
}

.speed-labels span:nth-child(3) {
	left: 44.44%;
	color: var(--blue-color);
	font-weight: bold;
}

.speed-labels span:nth-child(4) {
	left: 66.67%;
	color: var(--font-color-2);
}

.speed-labels span:nth-child(5) {
	left: 100%;
	color: var(--green-color);
	font-weight: bold;
	transform: translateX(-100%);
}

.speed-value {
	text-align: center;
	margin-top: 8px;
}

#speed-display {
	display: inline-block;
	background: var(--main-bg-color);
	color: var(--font-color-1);
	padding: 4px 12px;
	border-radius: 6px;
	font-weight: bold;
	font-size: 12px;
	border: 2px solid var(--border-color-1);
	transition: all 0.15s ease;
	min-width: 45px;
	text-align: center;
}

#speed-display:hover {
	background: var(--second-bg-color);
	border-color: var(--blue-color);
	color: var(--blue-color);
}

.speed-stats {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.speed-stats .stat-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--font-color-2);
}

.cargo-capacity {
	margin-bottom: 12px;
}

.capacity-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	font-size: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.fret-restant-value {
	font-weight: bold;
	font-size: 14px;
	color: var(--green-color);
	padding: 2px 6px;
	transition: all 0.2s ease;
}

.fret-restant-value.low {
	color: #ff9500;
}

.fret-restant-value.negative {
	color: var(--red-color);
}

.capacity-controls {
	display: flex;
	gap: 6px;
}

.capacity-btn {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 3px 6px;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	border-radius: 4px;
	cursor: pointer;
	font-size: 10px;
	transition: all 0.3s ease;
}

.capacity-btn:hover {
	border-color: var(--border-color-1);
	background: var(--main-bg-color);
}

.capacity-bars {
	margin-bottom: 8px;
}

.capacity-bar {
	height: 25px;
	background: var(--second-bg-color);
	border: 1px solid var(--border-color-3);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	margin-bottom: 6px;
}

.consumption-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #ff6b35, #f7931e);
	transition: width 0.3s ease;
	width: 0%;
	z-index: 1;
}

.metal-fill,
.cristal-fill,
.gaz-fill,
.uranium-fill,
.stardust-fill {
	position: absolute;
	top: 0;
	height: 100%;
	transition: width 0.3s ease, left 0.3s ease;
	width: 0%;
	left: 0%;
}

.metal-fill {
	background: #818191;
	z-index: 2;
}

.cristal-fill {
	background: #225AF3;
	z-index: 3;
}

.gaz-fill {
	background: #4FE572;
	z-index: 4;
}

.uranium-fill {
	background: #E93D3D;
	z-index: 5;
}

.stardust-fill {
	background: #FFD700;
	z-index: 6;
}

.capacity-legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	font-size: 11px;
	flex-wrap: wrap;
}

.legend-item {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 4px;
	color: var(--font-color-2);
}

.legend-picto {
	width: 12px;
	height: 12px;
	filter: brightness(0.8);
}

.legend-value {
	font-weight: bold;
	color: var(--font-color-1);
}

.legend-item-gaz {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.legend-item-gaz .legend-picto {
	margin-bottom: 2px;
}

.gaz-values {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}

.gaz-line {
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--font-color-2);
}

.resource-inputs {
	display: grid;
	grid-template-columns: repeat(2, 49%);
	gap: 10px;
}

.resource-input-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.resource-header {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--font-color-2);
}

.input-controls {
	display: flex;
	align-items: center;
	gap: 3px;
}

.resource-input {
	flex: 1;
	padding: 3px 5px;
	border: 1px solid var(--border-color-2);
	background: var(--second-bg-color);
	color: var(--font-color);
	border-radius: 4px;
	font-size: 11px;
	height: 24px;
	box-sizing: border-box;
}

.btn_max,
.btn_clear {
	padding: 3px 5px;
	border: 1px solid var(--border-color-2);
	background: var(--main-bg-color);
	color: var(--font-color-2);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 10px;
	height: 24px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn_max i,
.btn_clear i {
	pointer-events: none;
}

.btn_max:hover {
	border-color: var(--green-color);
	color: var(--green-color);
}

.btn_clear:hover {
	border-color: var(--red-color);
	color: var(--red-color);
}

/* Section Type de Mission */
.mission-type-section {
	background: var(--main-bg-color);
	padding: 12px;
	border-radius: 8px;
}

.mission-selection {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Messages d'alerte */
.alert-container {
	padding: 8px;
	border-radius: 6px;
	margin: 8px 0;
	display: none;
	font-size: 12px;
}

.alert-container.error {
	background: rgba(206, 37, 37, 0.1);
	border: 1px solid var(--red-color);
	color: var(--red-color);
	display: block;
}

/* Bouton de lancement */
.launch-section {
	text-align: center;
	padding: 12px 0;
}

.launch-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: var(--main-bg-color);
	border: 2px solid var(--border-color-1);
	border-radius: 8px;
	color: var(--font-color-1);
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	margin: 0 auto;
}

.launch-btn:hover {
	background: var(--second-bg-color);
	border-color: var(--blue-color);
	color: var(--blue-color);
}

.launch-btn:active {
	transform: translateY(1px);
}

.main_template {
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	max-width: 1500px;
	margin: auto;
}

.main_template>div {
	min-width: 0;
}

.main_navbar {
	width: 150px;
	margin: auto;
}

.main_navbar .nav_item {
	margin-top: 3px;
	margin-bottom: 3px;
	/* background: var(--border-color-3); */
	border-top: 2px solid var(--border-color-3);
	border-bottom: 2px solid var(--border-color-3);
	border-left: 4px solid var(--border-color-3);
	border-right: 4px solid var(--border-color-3);
	border-radius: 5px;
	font-weight: bold;

	/* background: rgb(79, 93, 108); */
	background: linear-gradient(180deg, rgba(79, 93, 108, 1) 0%, rgba(53, 66, 80, 1) 50%, rgba(22, 27, 32, 1) 51%, rgba(7, 9, 10, 1) 100%);
	color: var(--font-color-2);
	text-decoration: none;
	padding: 5px;
	border-radius: 4px;
}

.main_navbar .nav_item:hover,
.main_navbar .nav_item.active {
	background: var(--border-color-1);
	border-color: var(--border-color-1);
	background: rgb(134, 154, 171);
	background: linear-gradient(180deg, rgba(134, 154, 171, 1) 0%, rgba(96, 122, 139, 1) 50%, rgba(51, 72, 89, 1) 51%, rgba(26, 37, 46, 1) 100%);
	color: #fff;
}

.header_ressources {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-bottom: 25px;
	background-image: url('../assets_v1.10/cadre_header_ressources.png');
	background-size: 100% 100%;
	height: 46px;
}

.header_ressources>div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.header_ressources_item {
	display: flex;
	align-items: center;
	font-size: 11px;
	font-weight: bold;
}

.header_ressources_item .picto_ressource {
	height: 25px;
}


#header_construction h1 {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	margin: 0px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 5px;
	z-index: 2;
}

#header_construction .cadre_image_banner {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

#header_construction .infos_construction {
	position: absolute;
	top: 32px;
	bottom: 0px;
	background-color: var(--construction-info-bg);
	width: 100%;
	z-index: 2;
}

.header_prod_horaire {
	font-size: 9px;
	color: var(--font-color-2);
	margin-top: -5px;
	margin-left: 30px;
}

.list_planet {
	position: relative;
	padding: 0 20px;
}

.crown_planet {
	position: relative;
	display: block;
	text-align: center;
	top: -10px;
	height: 0;
	z-index: 3;
	color: var(--yellow-color);
}

.list_planet .navbar-planet-3d {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.list_planet .navbar-planet-3d img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list_planet .cadre_img_planet {
	position: relative;
	overflow: hidden;
	height: 60px;
	width: 100%;
	border: 1px solid var(--border-color-2);
	cursor: pointer;
	background-color: #000;
}

.list_planet .cadre_img_planet .planet_name {
	text-align: center;
	color: var(--font-color-2);
	background-color: rgba(0, 0, 0, 0.5);
	font-size: 11px;
	position: relative;
	z-index: 1;
}

.list_planet .cadre_img_planet.active_planet .planet_name {
	color: var(--font-color-1);
}

.list_planet .cadre_img_planet.active_planet {
	border: 2px solid var(--border-color-1);
}

.logo-ig {
	display: block;
	width: 70%;
	margin: auto;
}

.navbar_right_planet {
	margin: 59px 20px 10px 20px;
	text-align: center;
	font-size: 11px;
	color: var(--font-color-2);
	background-color: var(--second-bg-color);
	padding: 5px 15px;
	border: 1px solid var(--border-color-2);
	border-radius: 7px;
}

.width-fit-content {
	width: fit-content;
}

/* animation fade in / fade out */
@keyframes fadeinout {
	0% {
		opacity: 0.3;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.3;
	}
}

.fadeinout {
	animation-name: fadeinout;
	animation-duration: 3s;
	/* Durée d'un cycle complet */
	animation-iteration-count: infinite;
	/* Répète indéfiniment */
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fade-in {
	animation-name: fadein;
	animation-duration: 0.3s;
}

/*override animate.js*/
.animate__fadeInUp {
	animation-duration: 0.3s;
}

.animate__fadeOutDown {
	animation-duration: 0.3s;
}

#header_construction .img_banner {
	display: block;
	width: 100%;
}

.class-0001 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.class-0003 {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.class-0003 img {
	width: 120px;
}

.class-0004 {
	display: flex;
	gap: 5px;
}

.class-0005 {
	border: 2px solid var(--border-color-2);
	width: fit-content;
	padding: 5px;
	margin-top: 5px;
}

.class-0006 {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.class-0007 {
	width: 60px;
}

.class-0008 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

/* Style de base pour la modale */
.modal {
	/* La modale est cachée par défaut */
	position: fixed;
	/* Rester en place */
	z-index: 10;
	/* Au-dessus des autres éléments */
	left: 0;
	top: 0;
	width: 100%;
	/* Pleine largeur */
	height: 100%;
	/* Pleine hauteur */
	overflow: auto;
	/* Activer le défilement si nécessaire */
	background-color: rgba(0, 0, 0, 0.5);
	/* Fond semi-transparent */
}

.modal-content {
	position: relative;
	background-color: var(--main-bg-color);
	margin: 5% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}

.modal-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	color: var(--red-color);
	font-size: 28px;
	cursor: pointer;
}

.cancel-modal-content {
	position: relative;
	background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
	margin: 15% auto;
	padding: 25px;
	border: 1px solid var(--border-color-2);
	border-radius: 12px;
	width: 90%;
	max-width: 380px;
}

.btn-cancel-confirm {
	background-color: var(--red-color);
	color: white;
	border: none;
	padding: 8px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
}

.btn-cancel-confirm:hover {
	opacity: 0.85;
}

.btn-cancel-dismiss {
	background-color: transparent;
	color: var(--font-color-2);
	border: 1px solid var(--border-color-2);
	padding: 8px 20px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
}

.btn-cancel-dismiss:hover {
	border-color: var(--font-color);
	color: var(--font-color);
}

.btn_trade_indice_terraformer {
	background-color: var(--second-bg-color);
	border: 1px solid var(--border-color-2);
	color: var(--font-color);
	padding: 6px 15px;
	border-radius: 5px;
	cursor: pointer;
	margin: 15px 0px;
}

/* Burger Menu Styles */
.burger-menu-container {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1000;
	display: none;
	/* Hidden by default */
}

.burger-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: var(--main-bg-color);
	border: 2px solid var(--border-color-1);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.burger-menu:hover {
	background: var(--second-bg-color);
	border-color: var(--font-color-1);
}

.burger-line {
	width: 24px;
	height: 3px;
	background: var(--font-color);
	border-radius: 2px;
	transition: all 0.3s ease;
	margin: 2px 0;
}

.burger-menu.active .burger-line:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.burger-menu.active .burger-line:nth-child(2) {
	opacity: 0;
}

.burger-menu.active .burger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	display: none;
	/* Hidden by default */
}


@media screen and (max-width: 1400px) {
	.fleet-selection-container {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media screen and (max-width: 1000px) {
	.fleet-selection-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 800px) {

	.no-mobile {
		display: none;
	}

	.only-mobile {
		display: block;
	}

	.p-sm-05 {
		padding: 5px !important;
	}

	.gap-sm-5 {
		gap: 5px !important;
	}

	body {
		display: flex;
		margin: 0;
		/* pour compenser la place du tchat fixed en bas */
		margin-bottom: 65px;
	}

	h1 {
		font-size: 14px;
	}

	.fs-sm-9 {
		font-size: 9px;
	}

	.fs-sm-11 {
		font-size: 11px;
	}

	.fs-sm-12 {
		font-size: 12px;
	}

	.container {
		padding: 8px;
	}

	.container-mobile {
		flex: 1;
		/*fix problème de width sur mobile*/
		min-width: 1px;
	}

	.navmenu_headmenu {
		display: none;
	}

	.navmenu_mobile {
		display: none;
		/* Hide old mobile nav since we're using burger menu */
	}

	.main_template {
		grid-template-columns: 0% 100% 0%;
		/* Add padding to compensate for fixed top bar */
		padding-top: 55px;
	}

	.navbar_right_planet {
		margin: 1px;
		font-size: 9px;
		padding: 2px;
	}

	.list_planet img {
		top: -30%;
	}

	.list_planet {
		padding: 0px;
	}

	.header_ressources {
		background-image: none;
		background-color: #000;
		margin-bottom: 0px;
		display: flex;
		justify-content: space-around;
	}

	.header_ressources_item .picto_ressource {
		height: 12px;
	}

	.header_prod_horaire {
		margin-top: 0px;
		margin-left: 5px;
	}

	#online_users_count {
		padding: 11px 0;
	}

	#header_construction {
		overflow: hidden;
		height: 300px;
		background-color: #000;
	}

	#header_construction .img_banner {
		width: auto;
		height: 100%;
		position: relative;
		right: 100%;
	}

	.main_navbar {
		width: 45px;
		margin: auto;
		background-color: #000;
	}

	.main_navbar .nav_item {
		border-width: 2px;
		font-size: 16px;
	}

	.main_navbar .nav_item a {
		border-radius: 0px;
	}

	.main_navbar .nav_item {
		margin-top: 6px;
		margin-bottom: 6px;
	}

	.navmenu_mobile a {
		padding: 4px;
		text-align: center;
	}

	.navmenu_mobile i {
		font-size: 26px;
	}

	body>section.container {
		height: 100vh;
		overflow: auto;
		margin: 0;
		width: 100%;
	}

	.grid_construction {
		grid-template-columns: repeat(3, 1fr);
		gap: 0px;
	}

	.tableauconstruction {
		padding: 0;
		font-weight: normal;
		margin: 3px 0;
		box-shadow: none;
	}

	.SystemSection {
		display: grid;
		grid-template-columns: 1.8fr 2fr 20px 4fr 1.8fr;
		gap: 2px 2px;
		font-size: 11px;
	}

	.infogenerales {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: none;
	}

	canvas#example {
		width: 100%;
	}

	.prodressource {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: none;
	}

	.infoplanete {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: none;
		margin-top: 10px;
	}

	.activiteplanete {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: none;
	}

	.container-info {
		grid-template-columns: 1fr;
	}

	.construction_delimiter_1 {
		display: flex;
	}

	.construction_delimiter_1 .image {
		flex: 3;
	}

	.construction_delimiter_2 {
		flex: 2;
	}

	.construction_delimiter_2>div {
		flex-direction: column;
	}

	.button_delete_message {
		top: -10px;
		right: -10px;
		font-size: 22px;
	}

	.sm-grid-1-col {
		grid-template-columns: 1fr;
	}

	.sm-grid-3-col {
		grid-template-columns: repeat(3, 1fr);
	}

	#human_tree,
	#xorg_tree,
	#origa_tree {
		gap: 5px;
		grid-template-columns: 1fr;
	}

	.sm-flex-direction-column {
		flex-direction: column;
	}

	.rapport_espionnage {
		display: block;
		font-size: 11px;
	}

	#home_page.register_page main {
		width: 100%;
	}

	.construction_delimiter_2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	#home_page main {
		width: 98%;
		margin-bottom: 90px;
		flex-direction: column;
	}

	#home_page .home_page_main_div1 {
		width: 100%;
		padding-right: 0px;
		order: 2;
	}

	#home_page .home_page_main_div2 {
		width: 100%;
		order: 1;
	}

	#home_page.register_page main {
		width: 98%;
	}

	#race_selection {
		width: 90%;
	}

	#online_users_count {
		font-size: 9px;
	}

	.logo-ig {
		width: 100%;
		margin-top: 12px;
		margin-bottom: 11px;
	}

	.classementcorp {
		font-size: 11px;
	}

	.class-0001 {
		flex-direction: column;
	}

	.class-0003 img {
		gap: 10px;
	}

	.class-0004 {
		flex-direction: column;
		gap: 2px;
	}

	.class-0005 * {
		font-size: 12px !important;
	}

	.class-0007 {
		width: 35px;
	}


	.mobile-nav-overlay.active {
		opacity: 1;
		visibility: visible;
	}

	/* New full-width mobile nav content */
	.mobile-nav-content-full {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--main-bg-color);
		transform: translateY(-100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		display: flex;
		flex-direction: row;
	}

	.mobile-nav-overlay.active .mobile-nav-content-full {
		transform: translateY(0);
	}

	.mobile-nav-close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		color: var(--font-color);
		font-size: 24px;
		cursor: pointer;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
		z-index: 1002;
	}

	.mobile-nav-close:hover {
		background: var(--second-bg-color);
		color: var(--font-color-1);
	}

	.mobile-nav-items {
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 3px;
	}

	.mobile-nav-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 8px;
		color: var(--font-color-2);
		text-decoration: none;
		border-radius: 6px;
		transition: all 0.3s ease;
		border: 2px solid transparent;
	}

	.mobile-nav-item:hover {
		background: var(--second-bg-color);
		color: var(--font-color);
		border-color: var(--border-color-3);
	}

	.mobile-nav-item.active {
		background: var(--border-color-1);
		color: #fff;
		border-color: var(--border-color-1);
	}

	.mobile-nav-item.jaune {
		color: var(--yellow-color);
	}

	.mobile-nav-item i {
		font-size: 16px;
		width: 20px;
		text-align: center;
	}

	.mobile-nav-item span {
		font-weight: 500;
		font-size: 12px;
	}

	/* Navigation section (40%) */
	.mobile-nav-navigation {
		flex: 0 0 40%;
		padding: 60px 0% 10px;
		border-right: 1px solid var(--border-color-2);
		overflow-y: auto;
	}

	/* Planets section (60%) */
	.mobile-nav-planets {
		flex: 0 0 60%;
		padding: 60px 0px 10px;
		overflow-y: auto;
	}

	.mobile-nav-section-title {
		color: var(--font-color-1);
		text-align: center;
		margin: 0 0 12px 0;
		padding: 6px;
		border-bottom: 1px solid var(--border-color-2);
		font-size: 14px;
		font-weight: bold;
	}

	/* Utilisation des mêmes styles que desktop pour les planètes mobiles */
	.mobile-nav-planet-list {
		position: relative;
		padding: 0 8px;
	}

	.mobile-nav-planet-list .crown_planet {
		position: relative;
		display: block;
		text-align: center;
		top: -8px;
		height: 0;
		z-index: 3;
		color: var(--yellow-color);
		font-size: 11px;
	}

	.mobile-nav-planet-list .navbar-planet-3d {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.mobile-nav-planet-list .navbar-planet-3d img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mobile-nav-planet-list .cadre_img_planet {
		position: relative;
		overflow: hidden;
		height: 60px;
		width: 100%;
		border: 1px solid var(--border-color-2);
		cursor: pointer;
		background-color: #000;
		margin-bottom: 6px;
	}

	.mobile-nav-planet-list .cadre_img_planet .planet_name {
		text-align: center;
		color: var(--font-color-2);
		background-color: rgba(0, 0, 0, 0.5);
		font-size: 10px;
		position: relative;
		z-index: 1;
		padding: 2px;
	}

	.mobile-nav-planet-list .cadre_img_planet.active_planet .planet_name {
		color: var(--font-color-1);
	}

	.mobile-nav-planet-list .cadre_img_planet.active_planet {
		border: 2px solid var(--border-color-1);
	}

	/* Styles pour les statuts et constructions dans le mobile */
	.mobile-nav-planet-list .cadre_img_planet .planet_status {
		text-align: center;
		font-size: 9px;
		position: relative;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 1px;
	}

	.mobile-nav-planet-list .cadre_img_planet .planet_constructions {
		text-align: center;
		font-size: 9px;
		position: relative;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 1px;
	}

	/* Mobile top bar */
	.mobile-top-bar {
		background: var(--main-bg-color-full);
		padding: 5px 10px;
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--border-color-2);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1001;
		height: 55px;
	}

	.mobile-top-left {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-top-center {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.mobile-top-right {
		display: flex;
		align-items: center;
	}

	.mobile-logo {
		height: 30px;
		width: auto;
	}

	.mobile-top-bar .burger-menu {
		width: 35px;
		height: 35px;
		background: var(--second-bg-color);
		border: 2px solid var(--border-color-1);
		border-radius: 6px;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3px;
		padding: 0;
	}

	.mobile-top-bar .burger-menu:hover {
		background: var(--main-bg-color);
		border-color: var(--font-color-1);
	}

	.mobile-top-bar .burger-line {
		width: 20px;
		height: 2px;
		background: var(--font-color);
		border-radius: 2px;
		transition: all 0.3s ease;
	}

	.mobile-top-bar .burger-menu.active .burger-line:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.mobile-top-bar .burger-menu.active .burger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-top-bar .burger-menu.active .burger-line:nth-child(3) {
		transform: rotate(-45deg) translate(5px, -5px);
	}

	.mobile-top-bar #online_users_count {
		font-size: 11px;
		color: var(--font-color-2);
	}

	.mobile-nav-overlay {
		display: block;
	}

	.burger-menu-container {
		display: block;
	}

	.route-timeline {
		gap: 8px;
		padding: 0 2px;
	}

	.route-planet {
		max-width: 100%;
		padding: 6px;
	}

	.planet-header h4 {
		font-size: 11px;
	}

	.time-info {
		padding: 4px 8px;
		width: 90%;
	}

	.time-label {
		font-size: 9px;
	}

	.time-value {
		font-size: 10px;
	}

	.flight-info {
		padding: 4px 8px;
		width: 90%;
	}

	.distance-info,
	.flight-duration {
		font-size: 9px;
	}

	.return-section {
		gap: 8px;
	}

	.capacity-legend {
		gap: 4px;
		font-size: 8px;
	}

	.legend-item {
		gap: 2px;
	}

	.legend-picto {
		width: 10px;
		height: 10px;
	}

	.fleet-selection-container,
	.ferrailleur-container {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.fleet-section h3,
	.mission-type-section h3,
	.route-section h3,
	.cargo-management-section h3 {
		font-size: 14px;
	}

	.modal-content {
		width: 95%;
	}

	.rapport_espionnage {
		display: flex;
		flex-wrap: wrap;
	}

	.rapport_espionnage table:first-child {
		flex: 0 0 100%;
		/* prend toute la largeur, force les autres à la ligne */
	}

	.rapport_espionnage table:not(:first-child) {
		flex: 1;
		/* les 4 autres se partagent l'espace équitablement */
	}

	.notification {
		right: 10px;
		left: 10px;
		transform: translateY(-100px);
	}

	.notification.show {
		transform: translateY(0);
	}

	.planet-destination-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* =============================================== */
/* STYLES POUR LA FERMETURE DES FISSURES */
/* =============================================== */

.fissure-closure-progress {
	margin: 8px 0;
	padding: 6px;
	border-radius: 2px;
	font-size: 10px;
	width: 100%;
}

.progress-bar-container {
	margin-bottom: 4px;
}

.progress-bar-container label {
	display: none;
}

.progress-bar {
	width: 100%;
	height: 18px;
	background: rgba(20, 20, 30, 0.8);
	border: 1px solid rgba(80, 80, 100, 0.4);
	border-radius: 1px;
	overflow: hidden;
	position: relative;
	font-size: 10px;
	line-height: 18px;
	text-align: center;
	color: #ffffff;
}

.progress-fill {
	height: 100%;
	background: rgba(70, 120, 200, 0.6);
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0;
}

.progress-fill.complete {
	background: rgba(46, 204, 113, 0.8);
}

.btn-close-fissure {
	background: var(--badge-alert-bg);
	color: white;
	border: none;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	margin-top: 8px;
	transition: background 0.3s ease;
}

.btn-close-fissure:hover:not(:disabled) {
	background: var(--badge-alert-hover-bg);
}

.btn-close-fissure:disabled {
	background: #7f8c8d;
	cursor: not-allowed;
}

/* Animation de fermeture */
.fissure-closing {
	animation: fissurePulse 0.5s infinite alternate;
	border: 2px solid var(--badge-alert-bg);
}

@keyframes fissurePulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 1;
		transform: scale(1.02);
	}
}

.fissure-closed {
	text-align: center;
	padding: 15px;
	background: #27ae60;
	color: white;
	border-radius: 5px;
	font-weight: bold;
	animation: fissureSuccess 0.5s ease-in-out;
}

@keyframes fissureSuccess {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==================== NOTIFICATIONS GLOBALES ==================== */
.notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: var(--green-color);
	color: white;
	padding: 15px 20px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	z-index: 1003;
	transform: translateX(400px);
	transition: transform 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	gap: 8px;
}

.notification.notification-success {
	background: var(--green-color);
	color: black;
}

.notification.notification-error {
	background: var(--red-color);
	color: white;
}

.notification.notification-info {
	background: var(--blue-color);
	color: white;
}

.notification.notification-warning {
	background: var(--yellow-color, #f0ad4e);
	color: black;
}

.notification.show {
	transform: translateX(0);
}

/* ==========================================
   Switch toggle réutilisable
   Usage: <label class="switch"><input type="checkbox"><span class="switch-slider"></span></label>
   ========================================== */
.switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex-shrink: 0;
}

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

.switch-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	transition: background 0.25s, border-color 0.25s;
}

.switch-slider::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background: var(--font-color-2);
	border-radius: 50%;
	transition: transform 0.25s, background 0.25s;
}

.switch input:checked+.switch-slider {
	background: rgba(78, 168, 255, 0.3);
	border-color: var(--blue-color);
}

.switch input:checked+.switch-slider::before {
	transform: translateY(-50%) translateX(16px);
	background: var(--blue-color);
}

/* ==========================================
   Tableau de préférences
   ========================================== */
.pref-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border-color-3);
	border-radius: 6px;
	overflow: hidden;
}

.pref-table tr:not(:last-child) {
	border-bottom: 1px solid var(--border-color-3);
}

.pref-table td {
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
}

.pref-table tr:hover td {
	background: rgba(255, 255, 255, 0.06);
}

.pref-table .pref-label {
	color: var(--font-color);
}

.pref-table .pref-switch {
	width: 50px;
	text-align: center;
}

/* Bandeau pause */
.pause-banner {
	background: #f39c12;
	color: #1a1a2e;
	text-align: center;
	padding: 8px 16px;
	font-weight: bold;
	font-size: 0.95rem;
}