@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/*******************/
/*  GLOBAL
/*******************/

:root {
  --color-primary: #d12f2f;
  --color-secondary: #0aa537;
  --color-danger: #d12f2f;
  --color-info: #f1b10f;
  --color-success: #0aa537;
  --color-dark: #333;
}

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
	width: 100%;
	font-weight: 300;
	background-color: #eee;
	color: #222;
}

*, ::before, ::after {
	box-sizing: border-box;
}

p {
	margin: 1em 0;
}

a {
	color: var(--color-primary);
}

/***** PAGE *****/

.page_center {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2em;
}

.page_top {
	min-height: 100vh;
	padding: 2em;
}

/***** ALERTES *****/

.alert {
	color: #fff;
	text-align: center;
	font-size: 1.1rem;
	padding: 10px;
	border-radius: 5px;
	margin: 1em 0;
	font-weight: 400;
}

.alert_danger {
	background-color: var(--color-danger);
}

.alert_info {
	background-color: var(--color-info);
}

.alert_success {
	background-color: var(--color-success);
}

/***** BOUTONS *****/

.btn1 {
	text-align: center;
}

.btn1 a, a.btn1 {
	display: inline-block;
	border: solid 1px #222;
	padding: 10px 20px;
	font-size: 1.1rem;
	font-weight: 500;
	text-decoration: none;
	color: #222;
	border-radius: 5px;
}

.btn1 a:hover, a.btn1:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/***** FORM *****/

.forumlaire_content {
	background-color: #f9f9f9;
	padding: 2em;
	border-radius: 5px;
}

form label {
	font-size: 1rem;
	font-weight: 600;
	display: block;
}

form input,
form select,
form textarea {
	width: 100%;
	font-size: 1.1rem;
	margin: 0.5em 0;
	padding: 10px 15px;
	border: solid 1px #ccc;
	border-radius: 5px;
	font-family: inherit;
}

form input::placeholder {
	color: #333;
}

form input:disabled,
form select:disabled {
	color: #111;
	background-color: #eee;
}

form button,
form input[type="submit"] {
	width: auto;
	font-size: 1.1rem;
	margin: 0.5em 0;
	padding: 10px 20px;
	border: solid 1px #ccc;
	background-color: var(--color-primary);
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}

form button:hover,
form input[type="submit"]:hover {
	background-color: #333;
}

.form_group {
	margin-bottom: 1em;
}

.forgot_link {
	text-align: center;
	margin-top: 1em;
	font-size: 1em;
}

.forgot_link a {
	color: #000;
}

.forgot_link a:hover {
	color: var(--color-primary);
}

.titre_form_upload {
	font-size: 1.1rem;
	text-align: center;
	font-weight: 500;
}

/***** TABLEAUX *****/

.table_wrap {
	overflow-x: auto;
}

table.datatable {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
}

table.datatable th,
table.datatable td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid #eee;
	font-size: 0.95rem;
}

table.datatable th {
	background-color: var(--color-dark);
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

table.datatable tbody tr:hover {
	background-color: #fafafa;
}

table.datatable td.actions {
	white-space: nowrap;
}

table.datatable td.actions a,
table.datatable td.actions button {
	margin-right: 0.5em;
}

.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
}

.badge_ok { background-color: var(--color-success); }
.badge_pending { background-color: var(--color-danger); }
.badge_neutral { background-color: #999; }

.btn_action {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 5px;
	text-decoration: none;
	border: solid 1px #ccc;
	background-color: #fff;
	color: #222;
	cursor: pointer;
}

.btn_action:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn_action.danger:hover {
	border-color: var(--color-danger);
	color: var(--color-danger);
}

.checkbox_list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.3em 1em;
	background-color: #fff;
	border: solid 1px #ddd;
	border-radius: 5px;
	padding: 0.8em 1em;
	max-height: 260px;
	overflow-y: auto;
}

.checkbox_list label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.checkbox_list input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.joueur_select_row {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin-bottom: 0.5em;
}

.joueur_select_row select {
	flex: 1;
	margin: 0;
}

.joueur_select_row .btn_action {
	flex-shrink: 0;
}