/*
======================================================
ALC ENTRAÎNEMENTS
Version 1.0.0
======================================================
*/

:root{

	--alc-orange:#f85903;
	--alc-black:#222222;
	--alc-white:#ffffff;
	--alc-grey:#f5f5f5;
	--alc-border:#e4e4e4;

	--alc-radius:10px;
	--alc-shadow:0 4px 12px rgba(0,0,0,.08);

}

/* ======================================================
   WRAPPER
====================================================== */

.alc-trainings-wrapper{

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

}

/* ======================================================
   GÉNÉRATIONS
====================================================== */

.alc-generations{

	background:var(--alc-white);
	border-radius:var(--alc-radius);
	box-shadow:var(--alc-shadow);
	overflow:hidden;

}

.alc-generations-header{

	background:var(--alc-orange);
	color:var(--alc-white);

	padding:14px 18px;

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

}

.alc-generations-body{

	display:grid;

	grid-template-columns:repeat(14,minmax(70px,1fr));

	gap:10px;

	padding:18px;

	align-items:stretch;

}

.alc-generation{

	background:#f7f7f7;

	border-top:4px solid var(--alc-orange);

	border-radius:8px;

	padding:10px 6px;

	min-height:70px;

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

	text-align:center;

	transition:.2s ease;

}

.alc-generation:hover{

	transform:translateY(-2px);

	box-shadow:0 4px 10px rgba(0,0,0,.10);

}

.alc-generation-category{

	display:block;

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

	color:var(--alc-black);

	margin-bottom:4px;

}

.alc-generation-separator{

	display:none;

}

.alc-generation-years{

	display:block;

	font-size:12px;

	color:#666;

	line-height:1.2;

}

/* ======================================================
   PLANNING
====================================================== */

.alc-trainings{

	display:grid;

	grid-template-columns:repeat(5,minmax(220px,1fr));

	gap:24px;

	align-items:start;

}

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

.alc-day{

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

}

.alc-day-header{

	background:var(--alc-orange);

	color:#fff;

	padding:14px;

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

	text-align:center;

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

	text-transform:uppercase;

}

.alc-day-body{

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

}

/* ======================================================
   CRÉNEAU
====================================================== */

.alc-slot{

	background:#fff;

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

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

	overflow:hidden;

}

.alc-slot-header{

	background:#222;

	color:#fff;

	padding:12px;

	text-align:center;

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

}

.alc-slot-body{

	padding:14px;

	display:flex;
	flex-direction:column;

	gap:14px;

}

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

.alc-pole{

	background:var(--alc-grey);

	border-radius:8px;

	padding:12px;

}

.alc-pole-header{

	padding-left:10px;

	margin-bottom:10px;

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

	text-transform:uppercase;

}

.alc-pole-body{

	display:flex;
	flex-direction:column;

	gap:8px;

}

/* ======================================================
   CATÉGORIE
====================================================== */

.alc-category{

	background:#fff;

	border-radius:6px;

	padding:10px 12px;

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

	font-size:14px;

	line-height:1.4;

}

.alc-category-name{

	font-weight:700;

	color:var(--alc-black);

}

.alc-category-group{

	color:var(--alc-orange);

	font-weight:600;

	margin-left:4px;

}

/* ======================================================
   EMPTY
====================================================== */

.alc-empty{

	background:#fff;

	border-radius:10px;

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

	padding:40px;

	text-align:center;

}

.alc-empty-title{

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

	margin-bottom:10px;

}

.alc-empty-text{

	color:#777;

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:1400px){

	.alc-generations-body{

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

	}

	.alc-trainings{

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

	}

}

@media(max-width:900px){

	.alc-generations-body{

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

	}

	.alc-trainings{

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

	}

}

@media(max-width:640px){

	.alc-generations-body{

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

	}

	.alc-trainings{

		grid-template-columns:1fr;

	}

}