/* Variables CSS personnalisées basées sur le logo */
:root {
	--rofl-orange: #ff6b35;
	--rofl-yellow: #f7931e;
	--rofl-green: #7cb342;
	--rofl-red: #d23040;
}

/* Body avec dégradé de fond */
body {
	background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
	min-height: 100vh;
}

/* Container principal */
#main {
	background: white;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
	max-width: 1140px;
}

@media (min-width: 768px) {
	#main {
		border-radius: 1.5rem;
		box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.15);
	}
}

/* Titre principal */
h1 {
	background: linear-gradient(135deg, var(--rofl-red) 0%, #e55050 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 2px 10px rgba(210, 48, 64, 0.1);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Cards avec ombres et transitions */
.card {
	border: none;
	border-radius: 1rem !important;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* En-têtes de cards avec dégradés */
.card-header.bg-success {
	background: linear-gradient(135deg, var(--rofl-green), #689f38) !important;
	border: none;
}

.card-header.bg-warning {
	background: linear-gradient(135deg, #fb8c00, #f57c00) !important;
	border: none;
}

.card-header.bg-info {
	background: linear-gradient(135deg, #8e24aa, #7b1fa2) !important;
	border: none;
}

.card-header.bg-primary {
	background: linear-gradient(135deg, #039be5, #0277bd) !important;
	border: none;
}

.card-header h5 {
	font-weight: 600;
}

/* Boutons avec dégradés */
.btn-success {
	background: linear-gradient(135deg, var(--rofl-green), #689f38);
	border: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-success:hover {
	background: linear-gradient(135deg, #689f38, var(--rofl-green));
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.btn-warning {
	background: linear-gradient(135deg, #fb8c00, #f57c00);
	border: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-warning:hover {
	background: linear-gradient(135deg, #f57c00, #fb8c00);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.btn-info {
	background: linear-gradient(135deg, #8e24aa, #7b1fa2);
	border: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-info:hover {
	background: linear-gradient(135deg, #7b1fa2, #8e24aa);
	transform: translateY(-0.125rem);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* Boutons de langue */
.btn-outline-primary {
	color: var(--rofl-red);
	border-color: var(--rofl-red);
	font-weight: 500;
	transition: all 0.3s ease;
}

.btn-outline-primary:hover {
	background-color: var(--rofl-red);
	border-color: var(--rofl-red);
	color: white;
	transform: translateY(-0.125rem);
}

/* Footer et roflcopters */
#footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100px;
	background: transparent;
	pointer-events: none;
	z-index: 1;
}

#roflcopter_l, #roflcopter_r {
	position: absolute;
	bottom: 0;
	z-index: 2;
	cursor: pointer;
	width: 215px;
	pointer-events: none;
}

#toggleRoflcopters {
	pointer-events: auto !important;
}

#roflcopter_l {
	left: -20%;
	bottom: 25px;
}

#roflcopter_r {
	right: -20%;
	bottom: 25px;
}

#roflcopter_l:hover, #roflcopter_r:hover {
	filter: brightness(1.2);
}

/* Liens */
a {
	color: var(--rofl-yellow);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--rofl-orange);
	text-decoration: underline;
}

/* Border bottom du header */
.border-bottom {
	border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Logo arrondi */
.rounded-3 {
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Classes responsive personnalisées */
@media (min-width: 768px) {
	.display-md-5 {
		font-size: calc(1.425rem + 2.1vw) !important;
	}

	.fs-md-5 {
		font-size: 1.25rem !important;
	}
}

/* Taille de police responsive pour petits écrans */
@media (max-width: 767px) {
	body {
		font-size: 0.9rem;
		padding: 0.5rem;
	}

	#main {
		border-radius: 0.75rem;
		margin: 0;
	}

	.card-body {
		font-size: 0.875rem;
		padding: 1rem !important;
	}

	.card-header h5 {
		font-size: 0.95rem !important;
	}

	.small-md-normal {
		font-size: 0.8rem !important;
	}

	/* Améliorer les boutons sur mobile */
	.btn {
		font-size: 0.9rem;
		padding: 0.5rem 1rem;
	}

	/* Réduire l'espacement du header sur mobile */
	header .row {
		gap: 0.75rem !important;
	}

	/* Ajuster la taille du titre sur mobile */
	h1 {
		font-size: 1.5rem !important;
		line-height: 1.3;
	}

	/* Réduire le padding des cards sur mobile */
	.card {
		margin-bottom: 1.5rem !important;
	}
}

@media (min-width: 768px) {
	.small-md-normal {
		font-size: 1rem !important;
	}
}

/* Optimisations pour très petits écrans */
@media (max-width: 375px) {
	body {
		font-size: 0.85rem;
	}

	h1 {
		font-size: 1.3rem !important;
	}

	.card-body {
		padding: 0.875rem !important;
	}

	.btn {
		font-size: 0.85rem;
		padding: 0.45rem 0.875rem;
	}
}