/* Ultra wide screens :2560px+ (1440p) */
@media (min-width: 2560px) {
	html {
		font-size: 20px;
	}

	.container {
		max-width: 2200px;
	}

	.header-area {
		top: 80px;
	}

	.header-wrapper {
		padding-left: 400px;
		gap: 30px;
	}

	.logo img {
		transform: scale(1.3);
		transform-origin: left center;
	}

	.src-block {
		max-width: 700px;
		height: 70px;
	}

	.src-block input {
		font-size: 18px;
	}

	.src-block input::placeholder {
		font-size: 18px;
	}

	.src-block > img {
		width: 28px;
		height: 28px;
	}

	.src-block button {
		font-size: 20px;
		height: 50px;
		padding: 0 30px;
	}

	.discord-btn {
		height: 65px;
		font-size: 20px;
		padding-right: 20px;
	}

	.discord-btn span {
		width: 52px;
		height: 52px;
	}

	.user-btn picture {
		width: 100px;
		height: 100px;
	}

	.user-btn h4 {
		font-size: 28px;
	}

	.user-btn small {
		font-size: 18px;
	}

	.header-wrapper ul {
		gap: 35px;
	}

	.header-wrapper ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
	}

	.header-wrapper ul li a svg {
		width: 38px;
		height: 38px;
	}

	.header-social li:nth-child(1) a svg { width: 40px; height: 40px; }
	.header-social li:nth-child(2) a svg { width: 34px; height: 34px; }
	.header-social li:nth-child(3) a svg { width: 44px; height: 44px; }
	.header-social li:nth-child(4) a svg { width: 36px; height: 36px; }

	.fsc-area {
		padding-top: 200px;
	}

	/* Tickets en 2 par ligne */
	.ticket__block {
		margin-bottom: 40px;
	}

	.ticket-col {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.fsc-side-nav {
		padding-top: 150px;
		gap: 30px;
	}

	.link-home {
		width: 100px;
		height: 100px;
		background-size: 100% 100%;
	}

	.link-home img {
		width: 45px;
		height: 45px;
	}

	/* Whitelist/online icons in list blocks */
	.fsc__list-block-content picture img {
		width: 45px;
		height: 45px;
	}

	.fsc-side-nav ul {
		padding: 14px;
		gap: 25px;
	}

	.fsc-side-nav ul a {
		width: 80px;
		height: 80px;
	}

	.fsc-side-nav img {
		width: 40px;
		height: 40px;
	}

	/* Demandes icons */
	.demandes__card-header picture img {
		width: 80px;
		height: 80px;
	}

	.fsc-banner {
		max-width: 1300px;
	}

	/* Banner boutique */
	.fsc-banner button {
		transform: scale(1.2);
		bottom: 20px;
	}

	.fsc__list-block {
		height: 130px;
		border-radius: 25px;
		padding: 0 30px;
		margin-bottom: 45px;
		gap: 20px;
	}

	.fsc__list-block-content h5 {
		font-size: 26px;
	}

	.fsc__list-block-content small {
		font-size: 18px;
	}

	.fsc__list-block-content picture {
		width: 90px;
		height: 90px;
		border-radius: 25px;
	}

	.fsc__list-block h3 {
		font-size: 32px;
	}

	.fsc__list-icon ul a img {
		width: 85px;
		height: 85px;
	}

	.fsc__list-icon ul {
		gap: 20px;
	}

	.fsc__list-wrapper {
		gap: 40px;
	}

	/* Ticket section spacing */
	.ticket__block-content {
		gap: 20px;
	}

	.ticket__block-content picture {
		min-width: 90px;
	}

	.fsc__list-icon ul a span {
		width: 14px;
		height: 14px;
	}

	.fsc__title h4 {
		font-size: 30px;
	}

	.fsc__title h3 {
		font-size: 38px;
	}

	.fsc__title a {
		font-size: 26px;
	}

	.ticket__block-content picture {
		transform: scale(1.3);
	}

	.ticket__block-content h3 {
		font-size: 34px;
	}

	.ticket__block-content p {
		font-size: 18px;
	}

	.ticket__block a {
		width: 350px;
		height: 60px;
		font-size: 20px;
	}

	/* Lore page */
	.lore__title h4 {
		font-size: 36px;
	}

	.lore__title h3 {
		font-size: 44px;
	}

	.lore__chapter-title {
		font-size: 50px;
	}

	.lore__timeline {
		gap: 30px;
		padding: 30px 0;
	}

	.lore__timeline-line {
		max-width: 600px;
	}

	.lore__timeline-indicator p {
		font-size: 28px;
	}

	.lore__timeline-dot {
		width: 22px;
		height: 22px;
	}

	.lore__content h3 {
		font-size: 36px;
		margin-top: 50px;
	}

	.lore__content p {
		font-size: 20px;
		line-height: 2;
	}

	/* Demandes page */
	.demandes__title h4 {
		font-size: 36px;
	}

	.demandes__title h3 {
		font-size: 44px;
	}

	.demandes__card-header h3 {
		font-size: 32px;
	}

	.demandes__card-header p {
		font-size: 18px;
	}

	.demandes__card-header picture {
		width: 68px;
		height: 68px;
	}

	.demandes__card-btn {
		max-width: 320px;
		height: 52px;
		font-size: 24px;
	}

	.demandes__card {
		margin-bottom: 50px;
	}

	/* Reglements page */
	.reglements__title h4 {
		font-size: 36px;
	}

	.reglements__title h3 {
		font-size: 44px;
	}

	.reglements__card-header h3 {
		font-size: 36px;
	}

	.reglements__card-content p {
		font-size: 22px;
	}

	.reglements__card-icon {
		width: 32px;
		height: 32px;
	}

	.reglements__slider {
		gap: 35px;
	}

	.reglements__card {
		flex: 0 0 calc((100% - 70px) / 3);
		min-width: calc((100% - 70px) / 3);
	}

	.reglements__nav-btn {
		width: 70px;
		height: 70px;
	}

	.reglements__nav-btn svg {
		width: 32px;
		height: 32px;
	}

	.reglements__scrollbar {
		width: 300px;
		height: 6px;
	}
}

/* 4K screens :3840px+ */
@media (min-width: 3840px) {
	html {
		font-size: 28px;
	}

	.container {
		max-width: 3200px;
	}

	.header-area {
		top: 120px;
	}

	.header-wrapper {
		padding-left: 550px;
		gap: 50px;
	}

	.logo img {
		transform: scale(1.8);
	}

	.src-block {
		max-width: 1000px;
		height: 100px;
	}

	.src-block input {
		font-size: 26px;
	}

	.src-block input::placeholder {
		font-size: 26px;
	}

	.src-block > img {
		width: 40px;
		height: 40px;
	}

	.src-block button {
		font-size: 28px;
		height: 70px;
		padding: 0 45px;
	}

	.discord-btn {
		height: 90px;
		font-size: 28px;
		padding-right: 30px;
	}

	.discord-btn span {
		width: 72px;
		height: 72px;
	}

	.user-btn picture {
		width: 140px;
		height: 140px;
	}

	.user-btn h4 {
		font-size: 38px;
	}

	.user-btn small {
		font-size: 24px;
	}

	.header-wrapper ul {
		gap: 50px;
	}

	.header-wrapper ul li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
	}

	.header-wrapper ul li a svg {
		width: 56px;
		height: 56px;
	}

	.header-social li:nth-child(1) a svg { width: 58px; height: 58px; }
	.header-social li:nth-child(2) a svg { width: 48px; height: 48px; }
	.header-social li:nth-child(3) a svg { width: 62px; height: 62px; }
	.header-social li:nth-child(4) a svg { width: 50px; height: 50px; }

	.fsc-area {
		padding-top: 300px;
	}

	/* Tickets en 2 par ligne */
	.ticket__block {
		margin-bottom: 60px;
	}

	.ticket-col {
		width: 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}

	.fsc-side-nav {
		padding-top: 200px;
		gap: 45px;
	}

	.link-home {
		width: 150px;
		height: 150px;
		background-size: 100% 100%;
	}

	.link-home img {
		width: 70px;
		height: 70px;
	}

	/* Whitelist/online icons in list blocks */
	.fsc__list-block-content picture img {
		width: 65px;
		height: 65px;
	}

	.fsc-side-nav ul {
		padding: 20px;
		gap: 40px;
	}

	.fsc-side-nav ul a {
		width: 120px;
		height: 120px;
	}

	.fsc-side-nav img {
		width: 60px;
		height: 60px;
	}

	/* Demandes icons */
	.demandes__card-header picture img {
		width: 100px;
		height: 100px;
	}

	.fsc-banner {
		max-width: 1900px;
	}

	/* Banner boutique */
	.fsc-banner button {
		transform: scale(1.5);
		bottom: 40px;
	}

	.fsc__list-block {
		height: 180px;
		border-radius: 35px;
		padding: 0 45px;
		margin-bottom: 60px;
		gap: 30px;
	}

	.fsc__list-block-content h5 {
		font-size: 36px;
	}

	.fsc__list-block-content small {
		font-size: 24px;
	}

	.fsc__list-block-content picture {
		width: 120px;
		height: 120px;
		border-radius: 35px;
	}

	.fsc__list-block h3 {
		font-size: 44px;
	}

	.fsc__list-icon ul a img {
		width: 120px;
		height: 120px;
	}

	.fsc__list-icon ul {
		gap: 30px;
	}

	.fsc__list-wrapper {
		gap: 60px;
	}

	.fsc__list-icon ul a span {
		width: 24px;
		height: 24px;
	}

	.fsc__title h4 {
		font-size: 42px;
	}

	.fsc__title h3 {
		font-size: 52px;
	}

	.fsc__title a {
		font-size: 36px;
	}

	/* Ticket section spacing */
	.ticket__block-content {
		gap: 30px;
	}

	.ticket__block-content picture {
		transform: scale(1.8);
		min-width: 120px;
	}

	.ticket__block-content h3 {
		font-size: 48px;
	}

	.ticket__block-content p {
		font-size: 26px;
	}

	.ticket__block a {
		width: 480px;
		height: 85px;
		font-size: 28px;
	}

	/* Lore page */
	.lore__title h4 {
		font-size: 50px;
	}

	.lore__title h3 {
		font-size: 60px;
	}

	.lore__chapter-title {
		font-size: 70px;
	}

	.lore__timeline {
		gap: 50px;
		padding: 50px 0;
	}

	.lore__timeline-line {
		max-width: 900px;
	}

	.lore__timeline-indicator p {
		font-size: 40px;
	}

	.lore__timeline-dot {
		width: 30px;
		height: 30px;
	}

	.lore__content h3 {
		font-size: 50px;
		margin-top: 70px;
	}

	.lore__content p {
		font-size: 28px;
		line-height: 2;
	}
}

/* Extra large screens :1920px+ */
@media (min-width: 1920px) and (max-width: 2559px) {
	body {
		background-size: cover;
		background-position: center top;
	}

	.page-bg-bottom {
		width: 100%;
		min-width: 100vw;
	}

	.container {
		max-width: 1800px;
	}
}

/* Big screen :1750px+ */
@media (min-width: 1750px) and (max-width: 1919px) {
	.container {
		min-width: 1700px;
	}
}

@media (min-width: 1440px) and (max-width: 1749px) {
	.header-wrapper {
		padding-left: 280px;
		gap: 25px;
	}
	.container {
		max-width: 100%;
	}
	.src-block {
		max-width: 500px;
	}
}

/* Big screen :1200px. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.container {
		max-width: 1200px;
	}
	.logo {
		scale: 0.8;
		left: -24px;
	}
	.header-wrapper {
		padding-left: 240px;
		gap: 20px;
	}

	.src-block {
		max-width: 420px;
	}
	.user-btn {
		padding-left: 0;
	}

	.user-btn picture {
		width: 60px;
		height: 60px;
	}

	.user-btn h4 {
		font-size: 20px;
		margin: 0;
	}

	.header-wrapper ul {
		gap: 15px;
	}

	.header-wrapper ul li a svg {
		width: 24px;
		height: 24px;
	}

	.header-social li:nth-child(1) a svg { width: 24px; height: 24px; }
	.header-social li:nth-child(2) a svg { width: 20px; height: 20px; }
	.header-social li:nth-child(3) a svg { width: 26px; height: 26px; }
	.header-social li:nth-child(4) a svg { width: 21px; height: 21px; }

	.fsc__list-block {
		padding: 0 10px;
		height: 77px;
		margin-bottom: 20px;
	}

	.fsc__list-block-content h5 {
		font-size: 16px;
	}

	.fsc__list-block-content picture {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		padding: 5px;
	}

	.fsc__list-block h3 {
		font-size: 14px;
	}

	.fsc__list-wrapper {
		margin-top: 35px;
		margin-left: -16px;
	}

	.fsc__list-icon ul a img {
		width: 40px;
		height: 40px;
	}

	.fsc-banner button {
		bottom: 0px;
		z-index: 99;
		left: 5px;
	}
}

/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1200px) {
	.src-block {
		display: none;
	}
	.user-btn picture {
		width: 60px;
		height: 60px;
	}

	.user-btn h4 {
		font-size: 20px;
		margin: 0;
	}
	.fsc__list-block {
		margin-bottom: 20px;
	}

	.fsc__list-wrapper {
		margin-bottom: 50px;
	}

	.fsc-side-nav {
		top: 0;
		padding-top: 50px;
	}

	.fsc-banner button {
		bottom: 0;
	}
}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
	.src-block {
		display: none;
	}
	.user-btn picture {
		width: 52px;
		height: 53px;
	}

	.user-btn h4 {
		font-size: 16px;
		margin: 0;
	}

	.user-btn h4 span img {
		display: inline-block;
		max-width: 10px;
	}

	.user-btn h4 small {
		font-size: 10px;
	}
	.fsc__list-block {
		margin-bottom: 20px;
	}

	.fsc__list-wrapper {
		margin-bottom: 50px;
		margin-left: 0;
	}

	.fsc-side-nav {
		top: 0;
		padding-top: 15px;
	}

	.link-home {
		width: 50px;
		height: 50px;
	}

	.fsc-side-nav ul a {
		width: 40px;
		height: 40px;
	}

	.fsc-side-nav img {
		max-width: 24px;
	}

	.fsc-banner button {
		bottom: -14px;
	}
	.header-wrapper {
		padding-left: 200px;
		gap: 15px;
	}

	.logo {
		max-width: 160px;
	}

	.discord-btn {
		font-size: 14px;
		height: 40px;
	}

	.header-area {
		top: 40px;
	}

	.header-wrapper ul li a svg {
		width: 20px;
		height: 20px;
	}

	.header-social li:nth-child(1) a svg { width: 20px; height: 20px; }
	.header-social li:nth-child(2) a svg { width: 16px; height: 16px; }
	.header-social li:nth-child(3) a svg { width: 22px; height: 22px; }
	.header-social li:nth-child(4) a svg { width: 17px; height: 17px; }

	.discord-btn span {
		width: 30px;
		height: 30px;
		padding: 4px;
	}

	.user-btn {
		gap: 10px;
	}
	.ticket__block-content h3 {
		font-size: 24px;
	}

	.ticket__block a {
		width: 220px;
		font-size: 14px;
	}

	/* Reglements responsive tablet */
	.reglements__slider {
		gap: 20px;
	}

	.reglements__card {
		flex: 0 0 calc((100% - 20px) / 2);
		min-width: calc((100% - 20px) / 2);
	}

	.reglements__card-header h3 {
		font-size: 22px;
	}

	.reglements__card-content p {
		font-size: 15px;
	}

	.reglements__nav-btn {
		width: 40px;
		height: 40px;
	}

	.reglements__nav-btn svg {
		width: 20px;
		height: 20px;
	}
}

/* small screen :320px. */
@media (max-width: 767px) {
	.header-wrapper {
		display: none;
	}
	.logo {
		position: relative;
		display: block;
		max-width: 120px;
	}

	.header-area {
		top: 0;
	}

	.user-btn h4,
	.user-btn small {
		font-size: 0;
		margin: 0;
	}

	.user-btn picture {
		width: 50px;
		height: 50px;
	}
	.fsc-banner button {
		bottom: 0%;
		width: 170px;
		left: -7px;
	}

	.fsc-area {
		padding-top: 110px;
		padding-bottom: 40px;
	}

	.fsc__list-wrapper {
		margin: 30px 0 50px;
	}

	.fsc__list-icon {
		display: none;
	}

	.fsc__list-block {
		margin-bottom: 17px;
		padding: 0 15px;
	}

	.fsc__list-block h3 {
		font-size: 20px;
	}

	.fsc__list-block-content h5 {
		font-size: 16px;
	}

	.fsc__title {
		display: block;
		text-align: center;
		padding: 0;
	}

	.fsc__title a {
		margin-top: 20px;
		display: block;
	}

	.ticket__block-content {
		margin-bottom: 30px;
	}

	.ticket__block {
		margin-bottom: 40px;
	}

	.ticket__block-content h3 {
		font-size: 20px;
	}

	.ticket__block-content picture {
		width: 65px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Reglements responsive mobile */
	.reglements__title {
		text-align: center;
		margin-bottom: 30px;
	}

	.reglements__title h4 {
		font-size: 20px;
	}

	.reglements__title h3 {
		font-size: 26px;
	}

	.reglements__slider {
		gap: 15px;
	}

	.reglements__card {
		flex: 0 0 85%;
		min-width: 85%;
	}

	.reglements__card-header h3 {
		font-size: 20px;
	}

	.reglements__card-content p {
		font-size: 14px;
	}

	.reglements__card-icon {
		width: 20px;
		height: 20px;
	}

	.reglements__nav {
		display: none;
	}

	.reglements__slider-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.reglements__slider-container::-webkit-scrollbar {
		display: none;
	}

	.reglements__slider {
		transform: none !important;
	}

	.reglements__card--faded {
		opacity: 0.6;
		filter: grayscale(30%);
	}

	.reglements__scrollbar {
		width: 100px;
	}
}

@media only screen and (max-width: 768px) {
	.aos-animate {
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;

		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;

		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
}