/* ==========================================================
   CHAPITRE 1 — VARIABLES
========================================================== */

:root {

	/* ------------------------------------------------------
	   COULEURS
	------------------------------------------------------ */

	--alc-orange: #f85903;
	--alc-orange-light: #ff6b00;
	--alc-orange-dark: #d94b00;

	--alc-black: #1c1c1c;
	--alc-black-light: #2a2a2a;

	--alc-white: #ffffff;

	--alc-text: #333333;
	--alc-text-light: #666666;

	--alc-border: #e6e6e6;
	--alc-background: #f7f7f7;

	/* ------------------------------------------------------
	   DÉGRADÉS
	------------------------------------------------------ */

	--alc-gradient-orange: linear-gradient(
		90deg,
		var(--alc-orange),
		var(--alc-orange-light)
	);

	--alc-gradient-header: linear-gradient(
		135deg,
		#171717,
		#292929
	);

	/* ------------------------------------------------------
	   OMBRES
	------------------------------------------------------ */

	--alc-shadow: 0 10px 30px rgba(0, 0, 0, .08);

	--alc-shadow-hover: 0 18px 45px rgba(0, 0, 0, .16);

	--alc-shadow-orange: 0 6px 18px rgba(248, 89, 3, .28);

	/* ------------------------------------------------------
	   RAYONS
	------------------------------------------------------ */

	--alc-radius: 18px;
	--alc-radius-small: 8px;
	--alc-radius-pill: 999px;

	/* ------------------------------------------------------
	   ESPACEMENTS
	------------------------------------------------------ */

	--alc-space-xs: 6px;
	--alc-space-sm: 10px;
	--alc-space-md: 16px;
	--alc-space-lg: 24px;
	--alc-space-xl: 36px;

	/* ------------------------------------------------------
	   TRANSITIONS
	------------------------------------------------------ */

	--alc-transition: .20s ease;

}

/* ==========================================================
   CHAPITRE 2 — STRUCTURE GÉNÉRALE
========================================================== */

/* ==========================================================
   CONTENEUR PRINCIPAL
========================================================== */

.alc-week {

	width: 100%;
	max-width: 1600px;
	margin: 40px auto;
	padding: 0 20px;
	box-sizing: border-box;

}

/* ==========================================================
   EN-TÊTE DU PLANNING
========================================================== */

.alc-week-header {

	position: relative;
	margin: 15px 0 40px;
	padding: 26px 35px;

	background: var(--alc-white);

	border-left: 8px solid var(--alc-orange);
	border-radius: 22px;

	box-shadow: var(--alc-shadow);

	text-align: center;

}

.alc-week-title {

	margin: 0;

	font-size: 18px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: 2px;

	color: var(--alc-text-light);

}

.alc-week-period {

	margin-top: 10px;

	font-size: 44px;
	font-weight: 900;
	line-height: 1;

	text-transform: uppercase;

	color: var(--alc-orange);

}

/* ==========================================================
   FILTRES
========================================================== */

.alc-filters {

	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin: 0 0 30px;
	padding: 18px;

	background: var(--alc-white);

	border: 1px solid var(--alc-border);
	border-radius: var(--alc-radius);

	box-shadow: var(--alc-shadow);

}

.alc-filter {

	padding: 10px 18px;

	background: var(--alc-white);

	border: 1px solid var(--alc-border);
	border-radius: var(--alc-radius-pill);

	color: var(--alc-black);

	font-size: 14px;
	font-weight: 600;

	cursor: pointer;

	transition:
		background var(--alc-transition),
		color var(--alc-transition),
		border-color var(--alc-transition),
		transform var(--alc-transition);

}

.alc-filter:hover {

	background: #f5f5f5;

	border-color: var(--alc-orange);

	transform: translateY(-2px);

}

.alc-filter.active {

	background: var(--alc-orange);

	border-color: var(--alc-orange);

	color: var(--alc-white);

	box-shadow: 0 4px 12px rgba(248, 89, 3, .25);

}

/* ==========================================================
   FILTRE MOBILE
========================================================== */

.alc-filter-mobile {

	display: none;

	margin-bottom: 30px;

}

.alc-filter-select {

	width: 100%;

	padding: 14px 18px;

	background: var(--alc-white);

	border: 1px solid var(--alc-border);
	border-radius: var(--alc-radius);

	color: var(--alc-text);

	font-size: 15px;
	font-weight: 600;

	cursor: pointer;

	box-shadow: var(--alc-shadow);

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

}

/* ==========================================================
   CHAPITRE 3 — JOURNÉES
========================================================== */

/* ==========================================================
   BLOC JOUR
========================================================== */

.alc-day {

	margin-bottom: 50px;

}

/* ==========================================================
   TITRE DU JOUR
========================================================== */

.alc-day-title {

	display: flex;
	align-items: center;
	gap: 16px;

	margin: 0 0 28px;
	padding: 16px 24px;

	background: var(--alc-gradient-orange);

	border-radius: 10px;

	color: var(--alc-white);

	font-size: 32px;
	font-weight: 800;

	text-transform: uppercase;
	letter-spacing: .5px;

	box-shadow: var(--alc-shadow-orange);

}

.alc-day-title::before {

	content: "📅";

	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	font-size: 26px;
	line-height: 1;

	flex-shrink: 0;

}
/* ==========================================================
   GRILLE DES CARTES
========================================================== */

.alc-day-grid {

	display: grid;

	grid-template-columns: repeat(
		auto-fit,
		minmax(330px, 1fr)
	);

	gap: 20px;

	align-items: start;

	margin-bottom: 40px;

}

/* ==========================================================
   CHAPITRE 4 — CARTE
========================================================== */

.alc-card {

	position: relative;

	display: flex;
	flex-direction: column;

	height: 100%;

	background: var(--alc-white);

	border: 1px solid var(--alc-border);
	border-radius: var(--alc-radius);

	overflow: hidden;

	box-shadow: var(--alc-shadow);

	transition:
		transform var(--alc-transition),
		box-shadow var(--alc-transition),
		border-color var(--alc-transition);

}

/* ==========================================================
   SIGNATURE TANGO
========================================================== */

.alc-card::before {

	content: "";

	position: absolute;

	top: 0;
	left: 0;
	bottom: 0;

	width: 5px;

	background: var(--alc-gradient-orange);

	z-index: 2;

}

/* ==========================================================
   SURVOL
========================================================== */

.alc-card:hover {

	transform: translateY(-6px);

	border-color: var(--alc-orange);

	box-shadow: var(--alc-shadow-hover);

}

.alc-card:hover .alc-team {

	color: var(--alc-white);

}

.alc-card:hover .alc-opponent {

	transform: scale(1.01);

}

/* ==========================================================
   CHAPITRE 5 — EN-TÊTE DE LA CARTE
========================================================== */

/* ==========================================================
   HEADER
========================================================== */

.alc-card-header {

	position: relative;

	display: flex;
	flex-direction: column;
	gap: 8px;

	padding: 14px 16px;

	background: var(--alc-gradient-header);

	color: var(--alc-white);

	overflow: hidden;

}

.alc-card-header::after {

	content: "";

	position: absolute;

	top: 0;
	right: -60px;

	width: 120px;
	height: 120px;

	border-radius: 50%;

	background: rgba(255, 255, 255, .04);

}

/* ==========================================================
   PÔLE
========================================================== */

.alc-pole {

	font-size: 11px;
	font-weight: 700;

	text-transform: uppercase;
	letter-spacing: 1.8px;

	color: rgba(255, 255, 255, .72);

}

/* ==========================================================
   TITRE
========================================================== */

.alc-card-title {

	display: grid;

	grid-template-columns: 1fr auto;

	align-items: center;

	column-gap: 12px;

}

/* ==========================================================
   ÉQUIPE
========================================================== */

.alc-team {

	font-size: 21px;
	font-weight: 800;
	line-height: 1.15;

	color: var(--alc-white);

	word-break: break-word;

}

/* ==========================================================
   BADGE HEURE
========================================================== */

.alc-time {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 60px;

	padding: 5px 10px;

	border-radius: var(--alc-radius-pill);

	background: var(--alc-gradient-orange);

	color: var(--alc-white);

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	white-space: nowrap;

	box-shadow: var(--alc-shadow-orange);

}

.alc-time-rest {

	background: #666666;

	box-shadow: none;

}

/* ==========================================================
   CHAPITRE 6 — CORPS DE LA CARTE
========================================================== */

/* ==========================================================
   CONTENU
========================================================== */

.alc-card-body {

	display: flex;
	flex-direction: column;
	gap: 8px;

	padding: 14px 16px;

	background: var(--alc-white);

}

.alc-card-body > *:first-child {

	margin-top: 0;

}

.alc-card-body > *:last-child {

	margin-bottom: 0;

}

/* ==========================================================
   LIGNES D'INFORMATION
========================================================== */

.alc-line {

	display: flex;

	align-items: center;
	flex-wrap: wrap;

	gap: 6px;

	font-size: 14px;
	line-height: 1.35;

	color: var(--alc-text);

	word-break: break-word;

}

.alc-separator {

	margin: 0 2px;

	font-weight: 700;

	color: #bbbbbb;

}

/* ==========================================================
   TYPE DE RENCONTRE
========================================================== */

.alc-type {

	margin-bottom: 2px;
	padding-bottom: 10px;

	border-bottom: 1px solid var(--alc-border);

	font-size: 15px;
	font-weight: 700;

	color: var(--alc-orange);

}

/* ==========================================================
   CHAPITRE 7 — ADVERSAIRE
========================================================== */

/* ==========================================================
   BLOC ADVERSAIRE
========================================================== */

.alc-opponent {

	position: relative;

	display: flex;

	align-items: center;
	gap: 12px;

	padding: 10px 14px;

	background: var(--alc-gradient-orange);

	border-radius: 8px;

	color: var(--alc-white);

	font-size: 16px;
	font-weight: 700;

	box-shadow: var(--alc-shadow-orange);

	overflow: hidden;

	transition:
		transform var(--alc-transition),
		box-shadow var(--alc-transition);

}

.alc-opponent * {

	color: var(--alc-white);

}

/* ==========================================================
   BADGE VS
========================================================== */

.alc-opponent::before {

	content: "VS";

	display: flex;

	align-items: center;
	justify-content: center;

	width: 30px;
	height: 28px;

	flex-shrink: 0;

	background: var(--alc-white);

	border-radius: 5px;

	color: var(--alc-orange);

	font-size: 13px;
	font-weight: 800;

	transition: var(--alc-transition);

}

/* ==========================================================
   EFFET DÉCORATIF
========================================================== */

.alc-opponent::after {

	content: "";

	position: absolute;

	top: -18px;
	right: -35px;

	width: 70px;
	height: 70px;

	border-radius: 50%;

	background: rgba(255, 255, 255, .10);

}

/* ==========================================================
   DOMICILE / EXTÉRIEUR
========================================================== */

.alc-home {

	background: var(--alc-gradient-orange);

}

.alc-away {

	background: linear-gradient(
		90deg,
		#6b7280,
		#8b949e
	);

}

.alc-away::before {

	color: #6b7280;

}

/* ==========================================================
   CHAPITRE 8 — ÉTAT VIDE
========================================================== */

.alc-empty {

	padding: 60px 30px;

	background: #fafafa;

	border: 2px dashed var(--alc-border);
	border-radius: var(--alc-radius);

	text-align: center;

	font-size: 18px;

	color: var(--alc-text-light);

}

/* ==========================================================
   CHAPITRE 9 — RESPONSIVE
========================================================== */

/* ==========================================================
   ÉCRANS XXL
========================================================== */

@media (min-width: 1500px) {

	.alc-day-grid {

		grid-template-columns: repeat(4, 1fr);

	}

}

/* ==========================================================
   ÉCRANS LARGES
========================================================== */

@media (min-width: 1024px) and (max-width: 1499px) {

	.alc-day-grid {

		grid-template-columns: repeat(3, 1fr);

	}

}

/* ==========================================================
   TABLETTES
========================================================== */

@media (min-width: 700px) and (max-width: 1023px) {

	.alc-day-grid {

		grid-template-columns: repeat(2, 1fr);

	}

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

	.alc-filters {

		display: none;

	}

	.alc-filter-mobile {

		display: block;

	}

}

@media (max-width: 699px) {

	.alc-week {

		padding: 0 12px;

	}

	.alc-day-grid {

		grid-template-columns: 1fr;

	}

	.alc-day-title {

		padding: 14px 18px;

		font-size: 24px;

	}

	.alc-day-title::before {

		font-size: 24px;

	}

	.alc-card-header {

		padding: 12px 14px;

	}

	.alc-team {

		font-size: 18px;

	}

	.alc-card-body {

		padding: 12px 14px;

	}

}
/* ==========================================================
   CHAPITRE 10 — FINITIONS
========================================================== */

/* ==========================================================
   MODÈLE DE BOÎTE
========================================================== */

* {

	box-sizing: border-box;

}

.alc-card * {

	box-sizing: border-box;

}

/* ==========================================================
   IMAGES
========================================================== */

.alc-card img {

	max-width: 100%;
	height: auto;

}

/* ==========================================================
   LIENS
========================================================== */

.alc-card a {

	color: inherit;
	text-decoration: none;

}

/* ==========================================================
   ANIMATIONS
========================================================== */

.alc-opponent {

	transition:
		transform var(--alc-transition),
		box-shadow var(--alc-transition);

}

/* ==========================================================
   CHAPITRE 11 — ALC SCORE
========================================================== */

/*
 * Score
 */

.alc-time{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	min-width:84px;

	padding:8px 14px;

	border-radius:999px;

	background:#ffffff;

	border:2px solid var(--alc-orange);

	color:var(--alc-orange);

	font-size:22px;

	font-weight:900;

	line-height:1;

}

/*
 * Résultat
 */

.alc-result{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	align-self:flex-start;

	margin-top:14px;

	padding:10px 18px;

	border-radius:999px;

	font-size:15px;

	font-weight:800;

	text-transform:uppercase;

	letter-spacing:.5px;

}

/*
 * Victoire
 */

.alc-result-win{

	background:#dff6df;

	color:#0b7d2b;

}

/*
 * Match nul
 */

.alc-result-draw{

	background:#fff4d6;

	color:#b87400;

}

/*
 * Défaite
 */

.alc-result-loss{

	background:#fde2e2;

	color:#c62828;

}