/**
 * makeiteasy.css — thème My Calendar pour Make It Easy
 *
 * Construit sur le modèle de my-calendar.css (thème par défaut du plugin) :
 * mêmes sélecteurs, mêmes zones couvertes, valeurs remplacées par la charte
 * Make It Easy (Blue 500 #2563EB, Plus Jakarta Sans, formes arrondies).
 *
 * INSTALLATION
 * Déposer le fichier dans l'un OU l'autre de ces dossiers :
 *   /wp-content/plugins/my-calendar-custom/styles/   (survit aux mises à jour)
 *   /wp-content/plugins/my-calendar/styles/          (effacé à chaque mise à jour)
 * Puis : My Calendar > Design > Style Editor > sélectionner "makeiteasy.css".
 *
 * Les règles s'accrochent à .mc-main[class*="makeiteasy"], qui reconnaît la
 * classe dans les deux cas : "makeiteasy" comme "mc_custom_makeiteasy".
 * Le nom du fichier doit donc contenir "makeiteasy" — le reste est libre.
 *
 * PALETTE
 *   #2563EB  Blue 500    couleur d'action, dates de formation
 *   #1D4ED8  Blue 600    survol
 *   #BFDBFE  Blue 200    liserés
 *   #F0F5FF  Sky 100     fonds bleutés
 *   #0F172A  Navy 900    titres
 *   #334155  Gray 700    texte courant
 *   #475569  Slate 600   texte secondaire
 *   #94A3B8  Gray 400    texte discret
 *   #E2E8F0  Gray 200    bordures
 *   #F8FAFC  Gray 100    fonds neutres
 */


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

.mc-main[class*="makeiteasy"],
.mc-main[class*="makeiteasy"] .mc-list {
	background: #fff;
	padding: 0;
	border-radius: 16px;
	color: #334155;
	font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	max-width: 920px;
	margin: 0 auto;
}


/* =========================================================================
   TITRES, EN-TÊTE, PIED
   ====================================================================== */

.mc-main[class*="makeiteasy"] .heading,
.mc-main[class*="makeiteasy"] .my-calendar-header,
.mc-main[class*="makeiteasy"] .my-calendar-footer {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 14px;
}

.mc-main[class*="makeiteasy"] .heading,
.mc-main[class*="makeiteasy"] .my-calendar-month {
	font-weight: 700;
	font-size: 1.5rem;
	color: #0F172A;
	letter-spacing: -.01em;
}


/* =========================================================================
   NAVIGATION (mois précédent / suivant)
   ====================================================================== */

.mc-main[class*="makeiteasy"] .my-calendar-navigation {
	margin-bottom: 16px;
}

.mc-main[class*="makeiteasy"] .my-calendar-nav ul {
	column-gap: 8px;
}

.mc-main[class*="makeiteasy"] .my-calendar-nav li a,
.mc-main[class*="makeiteasy"] .my-calendar-navigation a,
.mc-main[class*="makeiteasy"] .my-calendar-navigation button,
.mc-main[class*="makeiteasy"] .my-calendar-navigation input[type=submit],
.mc-main[class*="makeiteasy"] .my-calendar-navigation .mc-button {
	color: #334155;
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	/* Le plugin impose un padding vertical en !important : il faut le battre. */
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	padding-left: 18px;
	padding-right: 18px;
	height: auto;
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(15 23 42 / .04);
}

.mc-main[class*="makeiteasy"] .my-calendar-nav li a:hover,
.mc-main[class*="makeiteasy"] .my-calendar-navigation a:hover,
.mc-main[class*="makeiteasy"] .my-calendar-navigation button:hover,
.mc-main[class*="makeiteasy"] .my-calendar-navigation input[type=submit]:hover,
.mc-main[class*="makeiteasy"] .my-calendar-navigation a:focus-visible,
.mc-main[class*="makeiteasy"] .my-calendar-navigation button:focus-visible,
.mc-main[class*="makeiteasy"] .my-calendar-navigation input[type=submit]:focus-visible {
	color: #fff;
	background: #2563EB;
	border: 1px solid #2563EB;
}

/* Le bouton "Aller" valide le saut vers le mois choisi : on lui donne la
   couleur d'action plutôt que l'apparence neutre des flèches. */
.mc-main[class*="makeiteasy"] .my-calendar-navigation input[type=submit],
.mc-main[class*="makeiteasy"] .my-calendar-navigation .mc-button {
	color: #1D4ED8;
	background: #F0F5FF;
	border-color: #BFDBFE;
	box-shadow: none;
}

/* Le fichier par défaut soude les boutons prev/today/next en un seul bloc.
   On garde des pastilles indépendantes, comme les boutons du site. */
.mc-main[class*="makeiteasy"] .my-calendar-prev a,
.mc-main[class*="makeiteasy"] .my-calendar-today a,
.mc-main[class*="makeiteasy"] .my-calendar-next a {
	border-radius: 999px;
}

.mc-main[class*="makeiteasy"] .my-calendar-next {
	margin-left: 8px;
	text-align: right;
}

.mc-main[class*="makeiteasy"] .my-calendar-navigation select,
.mc-main[class*="makeiteasy"] .my-calendar-navigation input[type=text] {
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	background-color: #fff;
	color: #334155;
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	height: auto;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	padding-left: 16px;
	/* NE PAS réduire : le plugin dessine sa flèche en image de fond calée à
	   droite. Sans cette réserve, elle se superpose au mois ou à l'année. */
	padding-right: 3rem;
	background-position: right 1.1rem top 50%;
	background-size: .7rem auto;
	max-width: 320px;
}

/* Étiquettes "Mois" et "Année" devant les menus */
.mc-main[class*="makeiteasy"] .my-calendar-date-switcher label {
	font-size: .8125rem;
	font-weight: 500;
	color: #475569;
	align-self: center;
}

.mc-main[class*="makeiteasy"] .my-calendar-date-switcher form > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}


/* =========================================================================
   LA GRILLE
   ====================================================================== */

.mc-main[class*="makeiteasy"] .my-calendar-table {
	border-collapse: separate;
	border-spacing: 6px;
	width: 100%;
}

.mc-main[class*="makeiteasy"] .my-calendar-table tbody {
	background: transparent;
}

.mc-main[class*="makeiteasy"] thead {
	border-bottom: 0;
}

.mc-main[class*="makeiteasy"] th {
	text-align: center;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
	color: #94A3B8;
	background: transparent;
	padding: 4px 0 10px !important;
}

.mc-main[class*="makeiteasy"] th.weekend-heading {
	color: #2563EB;
	background: transparent;
}

.mc-main[class*="makeiteasy"] td {
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	background: #fff;
	height: 7.5em;
	vertical-align: top;
	padding: 0 !important;
	overflow: hidden;
}

/* Jours sans cours : en retrait */
.mc-main[class*="makeiteasy"] td.no-events {
	background: #F8FAFC;
	border-color: #EEF2F7;
}

.mc-main[class*="makeiteasy"].mini td {
	height: auto !important;
}


/* =========================================================================
   LE NUMÉRO DU JOUR
   ====================================================================== */

.mc-main[class*="makeiteasy"] .mc-date-container {
	display: flex;
	justify-content: flex-end;
	padding: 8px 8px 0;
}

.mc-main[class*="makeiteasy"] .mc-date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #94A3B8;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-align: center;
}

/* Le thème par défaut colore les week-ends en vert : on neutralise, sinon
   ça entre en concurrence avec les samedis de formation. */
.mc-main[class*="makeiteasy"] .weekend .mc-date {
	background: transparent;
	color: #94A3B8;
}

/* Jours de formation : pastille bleue pleine */
.mc-main[class*="makeiteasy"] .has-events .mc-date,
.mc-main[class*="makeiteasy"] .has-events a.mc-date,
.mc-main[class*="makeiteasy"] .has-events button.mc-date {
	background: #2563EB;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 6px rgb(37 99 235 / .30);
}

.mc-main[class*="makeiteasy"] .has-events a.mc-date:hover,
.mc-main[class*="makeiteasy"] .has-events button.mc-date:hover,
.mc-main[class*="makeiteasy"] .has-events a.mc-date:focus-visible,
.mc-main[class*="makeiteasy"] .has-events button.mc-date:focus-visible {
	background: #0F172A;
	color: #fff;
}


/* =========================================================================
   AUJOURD'HUI
   ====================================================================== */

.mc-main[class*="makeiteasy"] .current-day {
	background: #F0F5FF;
	border-color: #BFDBFE;
	outline: 0;
	box-shadow: inset 0 0 0 1px #BFDBFE;
}

.mc-main[class*="makeiteasy"] .current-day .mc-date {
	color: #0F172A;
	background: transparent;
}

/* Si le jour actuel est aussi un jour de cours, la pastille bleue reprend */
.mc-main[class*="makeiteasy"] .current-day.has-events .mc-date {
	background: #2563EB;
	color: #fff;
}


/* =========================================================================
   LES ÉVÉNEMENTS DANS LES CASES
   ====================================================================== */

.mc-main[class*="makeiteasy"] .calendar-events {
	background: transparent;
	border: 0;
	padding: 2px 6px 8px;
	margin: 0;
	color: #334155;
}

.mc-main[class*="makeiteasy"] .calendar-events .mc-event:nth-of-type(1n+1) {
	border-top: 0;
}

.mc-main[class*="makeiteasy"] .event-title {
	display: block;
	font-family: inherit;
	font-size: .9375rem !important;
	font-weight: 600;
	line-height: 1.3;
	margin: 2px 0 !important;
	padding: 0;
	text-transform: none;
}

.mc-main[class*="makeiteasy"] .event-title a,
.mc-main[class*="makeiteasy"] .event-title button {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 8px;
	background: #F0F5FF;
	color: #1D4ED8;
	padding: 6px 8px;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.mc-main[class*="makeiteasy"] .event-title a > span,
.mc-main[class*="makeiteasy"] .event-title button > span {
	text-decoration: none;
}

.mc-main[class*="makeiteasy"] .event-title a:hover,
.mc-main[class*="makeiteasy"] .event-title button:hover,
.mc-main[class*="makeiteasy"] .event-title a:focus-visible,
.mc-main[class*="makeiteasy"] .event-title button:focus-visible {
	background: #2563EB;
	color: #fff;
}

.mc-main[class*="makeiteasy"] .calendar-event .event-time,
.mc-main[class*="makeiteasy"] .list-event .event-time,
.mc-main[class*="makeiteasy"] .mc-event-date {
	display: block;
	font-size: .75rem;
	font-weight: 500;
	color: #475569;
	margin: 0 0 4px;
	height: auto;
}


/* =========================================================================
   FICHE DÉTAIL (ouverte au clic)
   ====================================================================== */

.mc-main[class*="makeiteasy"] .calendar-event .details,
.mc-main[class*="makeiteasy"] .list-event .details {
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgb(15 23 42 / .10);
	color: #334155;
	padding: 16px;
	margin: 6px 0;
}

.mc-main[class*="makeiteasy"] .details .mc-title,
.mc-main[class*="makeiteasy"] .details h3 {
	color: #0F172A;
	font-weight: 700;
}

.mc-main[class*="makeiteasy"] .details .close,
.mc-main[class*="makeiteasy"] button.close {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 0;
	border-radius: 999px;
	background: #F1F5F9 !important;
	color: #475569 !important;
}

.mc-main[class*="makeiteasy"] .sub-details {
	margin-left: 0;
}

.mc-main[class*="makeiteasy"] .list-event .details img {
	width: auto;
	max-width: 100%;
	border-radius: 10px;
}

.mc-main[class*="makeiteasy"] p {
	line-height: 1.6;
	margin: 0 0 1em;
	padding: 0;
}

dialog.my-calendar-modal .mc-modal-title-container {
	background: #F0F5FF;
	border: 1px solid #BFDBFE;
}


/* =========================================================================
   VUE LISTE
   ====================================================================== */

.mc-main[class*="makeiteasy"] .mc-list li {
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 6px 0;
	text-indent: 0;
}

.mc-main[class*="makeiteasy"] .mc-list .odd {
	background: #F8FAFC;
	border-radius: 12px;
}

.mc-main[class*="makeiteasy"] .odd .list-event .details {
	background: #fff;
	border: 1px solid #E2E8F0;
}

.mc-main[class*="makeiteasy"] .list-event .event-title {
	font-size: 1.1rem !important;
	margin: 0;
}


/* =========================================================================
   MOIS PRÉCÉDENT / SUIVANT
   ====================================================================== */

.mc-main[class*="makeiteasy"] .nextmonth,
.mc-main[class*="makeiteasy"] .lastmonth {
	background: transparent;
	border-color: transparent;
	color: #94A3B8;
}

.mc-main[class*="makeiteasy"] .nextmonth .mc-date,
.mc-main[class*="makeiteasy"] .lastmonth .mc-date {
	background: transparent;
	color: #CBD5E1;
}

.mc-main[class*="makeiteasy"] .nextmonth .event-title,
.mc-main[class*="makeiteasy"] .lastmonth .event-title {
	opacity: .5;
}


/* =========================================================================
   MINI CALENDRIER (widget)
   ====================================================================== */

.mc-main[class*="makeiteasy"].mini td .category-icon {
	display: none;
}

.mc-main[class*="makeiteasy"].mini .event-title {
	font-size: 1rem !important;
}

.mc-main[class*="makeiteasy"].mini .day-with-date span,
.mc-main[class*="makeiteasy"].mini .day-with-date a {
	font-size: .9em;
	padding: 1px;
	text-align: center;
}

.mc-main[class*="makeiteasy"].mini .day-with-date a {
	display: block;
	font-weight: 700;
	text-decoration: none;
}

.mc-main[class*="makeiteasy"] .mini-event .sub-details {
	margin: 0 0 6px;
	border-bottom: 1px solid #E2E8F0;
	padding: 2px 0 0;
}

.mc-main[class*="makeiteasy"] .mini-event .details img {
	width: 100%;
	border-radius: 10px;
}


/* =========================================================================
   ÉVÉNEMENTS À VENIR (widget)
   ====================================================================== */

.upcoming-events .past-event {
	color: #94A3B8;
}

.upcoming-events .today {
	color: #0F172A;
	font-weight: 600;
}

.upcoming-events .future-event {
	color: #475569;
}


/* =========================================================================
   DIVERS
   ====================================================================== */

.mc-main[class*="makeiteasy"] .vcard {
	font-size: .9em;
	background: #F8FAFC;
	border-radius: 10px;
	padding: .75em;
	float: right;
	clear: right;
	width: 140px;
}

.mc-main[class*="makeiteasy"] :focus-visible {
	outline: 2px solid #2563EB;
	outline-offset: 2px;
}

@container mcmain (max-width: 600px) {
	.mc-main[class*="makeiteasy"] td {
		height: auto;
		min-height: 3.5em;
	}

	.mc-main[class*="makeiteasy"] .my-calendar-table {
		border-spacing: 4px;
	}
}