/**
 * Subsite Features – Styles front-end
 */

.subsite-features-mobile-menu-item {
	display: none !important;
}

/* Masquer le 3e niveau */
.subsite-features-mobile-menu-item .sub-menu .sub-menu {
	display: none !important;
}

/* =============================================
   Séparateur "Conseil scolaire" (mobile uniquement)
   ============================================= */
.subsite-separator {
	display: none !important;
	pointer-events: none;
}
.subsite-separator-label {
	display: block;
	padding: 10px 15px 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #94A3B8;
	border-top: 1px solid #E2E8F0;
	margin-top: 20px;
}
@media (max-width: 767px) {
	.subsite-separator {
		display: block !important;
	}
}

/* Badge nom d'école (dans « Mon école », sous le libellé) */
.subsite-features-mobile-menu-item > a {
	background: var(--e-global-color-primary, #2563EB);
	color: #FFF;
}
.subsite-features-mobile-menu-item .cef-menu-icon--font {
	background: linear-gradient(180deg, #eaf7ef 0%, #f3f8e9 55%, #fff8c9 100%);
}

/* Surcharge des styles du thème pour l'item "Mon école" injecté */
/* Le thème applique des couleurs primary sur .current-menu-ancestor, */
/* on les écrase pour garder le fond primary + texte blanc + icône en dégradé. */
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item > a,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item > a,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item > a,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a {
	color: #FFF !important;
}

/* Icône : fond en dégradé (tous les états) */
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font {
	background: linear-gradient(180deg, #eaf7ef 0%, #f3f8e9 55%, #fff8c9 100%) !important;
}

/* Icône : couleur du glyphe = --e-global-color-text (tous les états) */
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item > a .cef-menu-icon--font,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.current-menu-ancestor > a .cef-menu-icon--font {
	color: var(--e-global-color-text) !important;
}

/* État déplié (accordéon ouvert) : tout le texte en --e-global-color-text */
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a {
	color: var(--e-global-color-text) !important;
}
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-item-text,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .subsite-school-name,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-arrow,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-item-text,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .subsite-school-name,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-arrow,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-item-text,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .subsite-school-name,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .menu-arrow {
	color: var(--e-global-color-text) !important;
}

/* État déplié : fond de l'icône = #F6EB9B */
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon,
.MainMenuLeftCEF ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-hover ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon--font,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon,
.MainMenuLeftCEF.menu-behavior-click ul.menu > .subsite-features-mobile-menu-item.menu-item--expanded > a .cef-menu-icon--font {
	background: #F6EB9B !important;
}

.subsite-school-name {
	display: block;
	font-size: 11px;
	font-weight: 400;
	opacity: 0.85;
	line-height: 1.3;
}

/* ============================================
   JetTable responsive : 1ere colonne sticky + scroll
   ============================================= */
@media (max-width: 767px) {
	.jet-table-responsive-mobile {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100vw;
	}
	.jet-table-responsive-mobile .jet-table {
		min-width: 420px;
		border-collapse: collapse;
		font-size: 13px;
	}
	/* 1ere colonne (matiere) fixe à gauche avec fond */
	.jet-table-responsive-mobile .jet-table__head-cell:first-child,
	.jet-table-responsive-mobile .jet-table__body-cell:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #fff;
		font-weight: 600;
		box-shadow: 2px 0 4px rgba(0,0,0,0.05);
	}
	.jet-table-responsive-mobile .jet-table__head-cell:first-child {
		background: #F1F5F9;
		z-index: 3;
	}
	/* Cellules plus compactes */
	.jet-table-responsive-mobile .jet-table__head-cell,
	.jet-table-responsive-mobile .jet-table__body-cell {
		padding: 8px 12px;
		white-space: nowrap;
	}
	/* Alternance de lignes pour lisibilité */
	.jet-table-responsive-mobile .jet-table__body-row:nth-child(even) .jet-table__body-cell {
		background: #FAFBFC;
	}
	.jet-table-responsive-mobile .jet-table__body-row:nth-child(even) .jet-table__body-cell:first-child {
		background: #F0F4F8;
	}
}

.subsite-features-template-slot::after {
	content: '';
	display: table;
	clear: both;
}



.toolbarMobileMain{
   display: none !important;
}

/* ============================================
   Tooltip CSS visible — liens externes (niveau 2 après séparateur)
   ============================================ */

/* Forcer overflow:visible sur toute la chaîne pour que le tooltip ne soit pas coupé */
.subsite-separator ~ .menu-item,
.subsite-separator ~ .menu-item > .sub-menu,
.subsite-separator ~ .menu-item > .sub-menu li,
.subsite-features-mobile-menu-item .sub-menu,
.MainMenuLeftCEF .sub-menu,
.MainMenuLeftCEF ul.sub-menu {
	overflow: visible !important;
}

.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip],
.subsite-separator ~ .menu-item > a[data-tooltip] {
	position: relative;
}
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]::after,
.subsite-separator ~ .menu-item > a[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	background: #1E293B;
	color: #FFF;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	padding: 5px 8px;
	border-radius: 4px;
	white-space: normal;
	max-width: 220px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 99999;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
/* Petite flèche centrée sous la bulle */
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]::before,
.subsite-separator ~ .menu-item > a[data-tooltip]::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 1px);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #1E293B;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 99999;
}
/* Visible au survol (desktop), au focus (clavier) et à l'appui (mobile tactile) */
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:hover::after,
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:focus::after,
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:active::after,
.subsite-separator ~ .menu-item > a[data-tooltip]:hover::after,
.subsite-separator ~ .menu-item > a[data-tooltip]:focus::after,
.subsite-separator ~ .menu-item > a[data-tooltip]:active::after,
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:hover::before,
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:focus::before,
.subsite-separator ~ .menu-item > .sub-menu a[data-tooltip]:active::before,
.subsite-separator ~ .menu-item > a[data-tooltip]:hover::before,
.subsite-separator ~ .menu-item > a[data-tooltip]:focus::before,
.subsite-separator ~ .menu-item > a[data-tooltip]:active::before {
	opacity: 1;
	visibility: visible;
}