/* ==========================================================================
   BLOC CALENDRIER
   ========================================================================== */

.bloc-calendrier{
	width:100%;
	margin:0;
	padding:0;
}

/* ==========================================================================
   STRUCTURE GÉNÉRALE : 3 MOIS CÔTE À CÔTE
   ========================================================================== */

.calendrier-weekends{
	width:100%;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:24px;
	margin:30px 0 0 0;
}

.calendrier-weekends__mois{
	background-color:#f7f7f7;
	border-radius:24px;
	padding:20px;
	box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);
	min-width:0;
	overflow:visible;
}

.calendrier-weekends__mois h3{
	margin:0 0 18px 0;
	padding:0;
	color:#2b2b5c;
	text-align:center;
	font-size:20px;
	line-height:1.2;
	text-shadow:none;
}

/* ==========================================================================
   ENTÊTE DES COLONNES : VENDREDI / SAMEDI / DIMANCHE
   ========================================================================== */

.calendrier-weekends__entete{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:10px;
	margin:0 0 12px 0;
	padding:0;
}

.calendrier-weekends__entete span{
	background:#ececec;
	color:#2b2b5c;
	border-radius:10px;
	padding:8px 10px;
	font-size:12px;
	font-weight:700;
	text-align:center;
}

/* ==========================================================================
   LISTE DES WEEK-ENDS DU MOIS
   ========================================================================== */

.calendrier-weekends__lignes{
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* Chaque ligne = 1 week-end */
.calendrier-weekend{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:10px;
	padding-bottom:12px;
	border-bottom:3px solid #d881c7;
}

/* On évite un trait rose inutile après le dernier week-end */
.calendrier-weekends__lignes .calendrier-weekend:last-child{
	border-bottom:none;
	padding-bottom:0;
}

/* ==========================================================================
   CASE D’UN JOUR DE WEEK-END
   ========================================================================== */

.calendrier-weekend__jour{
	background-color:#ececec;
	color:#2b2b5c;
	border-radius:12px;
	font-size:12px;
	line-height:1.2;
	padding:8px 10px;
	min-height:90px;
	position:relative;
	overflow:visible;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.calendrier-weekend__jour--actif{
	background-color:#ececec;
}

.calendrier-weekend__jour--vacances{
	background-color:#d6cff6;
	color:#6e67a6;
}

.calendrier-weekend__jour--vide{
	background-color:#ececec;
	color:#8a8a8a;
}

/* Cas où le jour n’appartient pas au mois affiché */
.calendrier-weekend__jour--hors-mois{
	background:transparent;
	min-height:90px;
}

/* Numéro du jour */
.calendrier-weekend__numero{
	font-size:13px;
	font-weight:700;
	color:#2b2b5c;
	text-align:left;
}

/* Petit texte discret pour vacances si aucun événement */
.calendrier-weekend__info-mini{
	font-size:10px;
	color:inherit;
	text-align:center;
	margin-top:auto;
	margin-bottom:auto;
	opacity:0.9;
}

/* ==========================================================================
   LISTE DES ACTIVITÉS DANS UNE CASE
   ========================================================================== */

.calendrier-weekend__activites{
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0;
	overflow:visible;
}

.calendrier-activite-wrap{
	position:relative;
	overflow:visible;
}

.calendrier-activite{
	border-radius:8px;
	padding:6px 10px;
	font-size:12px;
	font-weight:600;
	text-align:center;
	min-height:26px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	z-index:2;
	cursor:default;
}

/* ==========================================================================
   INFOBULLE AU SURVOL
   ========================================================================== */

.calendrier-activite-detail{
	position:absolute;
	left:-15px;
	top:50%;
	transform:translate(-100%, -50%);
	width:260px;
	background-color:#2b2b5c;
	color:#ffffff;
	border:2px solid #1d1d43;
	border-radius:8px;
	padding:12px;
	box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity 0.2s ease, visibility 0.2s ease;
	z-index:20;
	text-align:left;
	font-size:12px;
	line-height:1.45;
}

.calendrier-activite-detail::after{
	content:"";
	position:absolute;
	top:50%;
	right:-8px;
	transform:translateY(-50%);
	border-width:8px 0 8px 8px;
	border-style:solid;
	border-color:transparent transparent transparent #2b2b5c;
}

.calendrier-activite-wrap:hover .calendrier-activite-detail{
	opacity:1;
	visibility:visible;
}

/* ==========================================================================
   COULEURS DES TYPES D’ACTIVITÉS
   ========================================================================== */

.calendrier-activite--famille{
	background-color:#6a8f19;
	color:#ffffff;
}

.calendrier-activite--inities{
	background-color:#a31300;
	color:#ffffff;
}

.calendrier-activite--jdr{
	background-color:#f0b208;
	color:#ffffff;
}

.calendrier-activite--evenement{
	background-color:#1147b3;
	color:#ffffff;
}

/* ==========================================================================
   LÉGENDE
   ========================================================================== */

.calendrier-legende{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	justify-content:center;
	margin-top:30px;
}

.calendrier-pastille{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:190px;
	padding:12px 20px;
	border-radius:999px;
	font-size:12px;
	font-weight:600;
	text-align:center;
}

.calendrier-pastille--famille{
	background-color:#6a8f19;
	color:#ffffff;
}

.calendrier-pastille--inities{
	background-color:#a31300;
	color:#ffffff;
}

.calendrier-pastille--jdr{
	background-color:#f0b208;
	color:#ffffff;
}

.calendrier-pastille--evenement{
	background-color:#1147b3;
	color:#ffffff;
}

.calendrier-pastille--vacances{
	background-color:#d6cff6;
	color:#4b4385;
}

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

/* Tablette / petit écran large : on passe les mois les uns sous les autres */
@media (max-width: 1100px){
	.calendrier-weekends{
		grid-template-columns:1fr;
	}
}

@media (max-width: 768px){
	.calendrier-weekends__mois{
		padding:15px;
		border-radius:18px;
		overflow:visible;
	}

	.calendrier-weekends__mois h3{
		font-size:20px;
	}

	.calendrier-weekends__entete{
		gap:8px;
	}

	.calendrier-weekends__entete span{
		font-size:11px;
		padding:7px 6px;
	}

	.calendrier-weekend{
		gap:8px;
		padding-bottom:10px;
	}

	.calendrier-weekend__jour{
		padding:8px 6px;
		min-height:82px;
	}

	.calendrier-weekend__numero,
	.calendrier-activite{
		font-size:12px;
	}

	.calendrier-weekend__info-mini{
		font-size:10px;
	}

	/* Sur mobile, l’infobulle passe sous la case au lieu de partir sur la gauche */
	.calendrier-activite-detail{
		left:0;
		top:calc(100% + 6px);
		transform:none;
		width:min(260px, 80vw);
	}

	.calendrier-activite-detail::after{
		top:-8px;
		left:22px;
		right:auto;
		transform:none;
		border-width:0 8px 8px 8px;
		border-color:transparent transparent #2b2b5c transparent;
	}

	.calendrier-pastille{
		width:100%;
		min-width:0;
		font-size:12px;
	}
}