/**
 * Espace parents — modal à pile de vues et sous-modal.
 * Reprend les variables de couleur définies par le plugin.
 */

body.school-mod-actif {
	overflow: hidden;
}

.school-mod {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.school-mod[hidden] {
	display: none;
}

.school-mod-voile {
	position: absolute;
	inset: 0;
	background: rgba(var(--school-fonce-rgb), .72);
	backdrop-filter: blur(3px);
	animation: school-mod-fondu .22s ease;
}

@keyframes school-mod-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.school-mod-boite {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: min(88vh, 780px);
	overflow: hidden;
	border-radius: var(--school-rayon);
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
	animation: school-mod-monte .26s cubic-bezier(.2, .8, .3, 1);
}

@keyframes school-mod-monte {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */

.school-mod-tete {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(var(--school-fonce-rgb), .1);
	background: #fff;
}

.school-mod-tete h2,
.school-mod-tete h3 {
	flex: 1;
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.3;
	color: #1b2a20;
	letter-spacing: -.01em;
}

.school-mod-retour,
.school-mod-sous-retour {
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 1px solid rgba(var(--school-fonce-rgb), .14);
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
	cursor: pointer;
}

.school-mod-retour:hover,
.school-mod-sous-retour:hover {
	background: rgba(var(--school-primaire-rgb), .08);
}

.school-mod-fermer {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--school-fonce-rgb), .07);
	font-size: 1.5rem;
	line-height: 1;
	color: #4a5a50;
	cursor: pointer;
}

.school-mod-fermer:hover {
	background: rgba(var(--school-fonce-rgb), .14);
}

/* ------------------------------------------------------------------ */
/* Corps                                                               */
/* ------------------------------------------------------------------ */

.school-mod-corps,
.school-mod-sous-corps {
	flex: 1;
	overflow-y: auto;
	padding: 24px 22px 26px;
	color: #1b2a20;
	font-size: .96rem;
	line-height: 1.6;
}

.school-mod-intro {
	margin: 0 0 18px;
	color: #5d6b62;
}

.school-mod-aide {
	margin: 16px 0 0;
	font-size: .84rem;
	color: #7a877f;
}

.school-mod-note {
	margin: 16px 0 0;
	font-size: .82rem;
	color: #7a877f;
}

.school-mod-vide {
	margin: 0;
	padding: 26px 0;
	text-align: center;
	color: #7a877f;
}

.school-mod-alerte {
	margin: 0 0 16px;
	padding: 12px 15px;
	border-left: 3px solid #b3261e;
	border-radius: 8px;
	background: rgba(179, 38, 30, .08);
	font-size: .9rem;
	color: #8c1d18;
}


.school-mod-attente {
	display: grid;
	place-items: center;
	gap: 14px;
	padding: 46px 0;
	color: #7a877f;
}

.school-mod-attente p {
	margin: 0;
	font-size: .9rem;
}

.school-mod-rond {
	width: 30px;
	height: 30px;
	border: 3px solid rgba(var(--school-primaire-rgb), .2);
	border-top-color: var(--school-primaire);
	border-radius: 50%;
	animation: school-mod-tourne .8s linear infinite;
}

@keyframes school-mod-tourne {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/* Formulaire de connexion                                             */
/* ------------------------------------------------------------------ */

.school-mod-form label {
	display: block;
	margin: 14px 0 6px;
	font-size: .86rem;
	font-weight: 600;
	color: #3c4b42;
}

.school-mod-form input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(var(--school-fonce-rgb), .18);
	border-radius: calc(var(--school-rayon) * .45);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: #1b2a20;
}

.school-mod-form input:focus {
	outline: none;
	border-color: var(--school-primaire);
	box-shadow: 0 0 0 3px rgba(var(--school-primaire-rgb), .16);
}

.school-mod-form .school-btn {
	width: 100%;
	margin-top: 22px;
}

.school-mod-form .school-btn[disabled] {
	opacity: .65;
	cursor: wait;
}

/* ------------------------------------------------------------------ */
/* Listes d’enfants et tuiles                                          */
/* ------------------------------------------------------------------ */

.school-mod-enfants,
.school-mod-tuiles {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.school-mod-enfants button,
.school-mod-tuile {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 15px 17px;
	border: 1px solid rgba(var(--school-fonce-rgb), .12);
	border-radius: calc(var(--school-rayon) * .6);
	background: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.school-mod-enfants button:hover,
.school-mod-tuile:hover {
	border-color: var(--school-primaire);
	background: rgba(var(--school-primaire-rgb), .05);
	transform: translateX(2px);
}

.school-mod-tuile {
	flex-wrap: wrap;
}

.school-mod-tuile-nom {
	flex: 1 0 auto;
	font-size: .99rem;
	font-weight: 600;
	color: #1b2a20;
}

.school-mod-tuile-sous {
	flex: 1 0 100%;
	order: 3;
	font-size: .83rem;
	color: #7a877f;
}

.school-mod-initiale {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(var(--school-primaire-rgb), .14);
	color: var(--school-primaire-sombre);
	font-size: 1.1rem;
	font-weight: 800;
	text-transform: uppercase;
}

.school-mod-initiale-grand {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
	font-size: 1.4rem;
}

.school-mod-ident {
	flex: 1;
	min-width: 0;
}

.school-mod-ident strong {
	display: block;
	font-size: 1rem;
	color: #1b2a20;
}

.school-mod-ident em {
	display: block;
	font-size: .84rem;
	font-style: normal;
	color: #7a877f;
}

.school-mod-chevron {
	flex: 0 0 auto;
	color: var(--school-primaire);
	font-size: 1.1rem;
}

.school-mod-eleve {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(var(--school-fonce-rgb), .1);
}

.school-mod-deconnexion {
	display: block;
	margin: 26px auto 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: .85rem;
	color: #7a877f;
	text-decoration: underline;
	cursor: pointer;
}

.school-mod-deconnexion:hover {
	color: #b3261e;
}

/* ------------------------------------------------------------------ */
/* Sous-modal                                                          */
/* ------------------------------------------------------------------ */

.school-mod-sous {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(100%);
	transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

.school-mod-sous[hidden] {
	display: none;
}

.school-mod-sous-ouvert {
	transform: none;
}

.school-mod-sous-titre-bloc {
	margin: 24px 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--school-primaire);
}

.school-mod-sous-titre-bloc:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Fiche                                                               */
/* ------------------------------------------------------------------ */

.school-mod-photo {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto 20px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(var(--school-primaire-rgb), .2);
}

.school-mod-lignes {
	display: grid;
	gap: 1px;
	background: rgba(var(--school-fonce-rgb), .09);
	border-radius: calc(var(--school-rayon) * .5);
	overflow: hidden;
}

.school-mod-ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 13px 16px;
	background: #fff;
}

.school-mod-ligne span {
	font-size: .87rem;
	color: #7a877f;
}

.school-mod-ligne strong {
	text-align: right;
	color: #1b2a20;
}

/* ------------------------------------------------------------------ */
/* Notes                                                               */
/* ------------------------------------------------------------------ */







.school-mod-tableau {
	overflow-x: auto;
	border: 1px solid rgba(var(--school-fonce-rgb), .1);
	border-radius: calc(var(--school-rayon) * .5);
}

.school-mod-tableau table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.school-mod-tableau th,
.school-mod-tableau td {
	padding: 10px 12px;
	text-align: center;
	border-bottom: 1px solid rgba(var(--school-fonce-rgb), .08);
	white-space: nowrap;
}

.school-mod-tableau th:first-child,
.school-mod-tableau td:first-child {
	text-align: left;
	white-space: normal;
	min-width: 130px;
}

.school-mod-tableau thead th small {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	opacity: .7;
	text-transform: none;
	letter-spacing: 0;
}

.school-mod-tableau thead th {
	background: rgba(var(--school-primaire-rgb), .07);
	font-size: .8rem;
	font-weight: 700;
	color: var(--school-primaire-sombre);
}

.school-mod-tableau tbody tr:last-child td {
	border-bottom: 0;
}

.school-mod-nonsaisi {
	color: #b6bfb9;
	cursor: help;
}

.school-mod-coef {
	color: #7a877f;
	font-size: .84rem;
}

.school-mod-appreciation {
	padding: 14px 16px;
	margin-bottom: 8px;
	border-radius: calc(var(--school-rayon) * .5);
	background: rgba(var(--school-primaire-rgb), .05);
}

.school-mod-appreciation strong {
	display: block;
	color: #1b2a20;
}

.school-mod-niveau {
	display: inline-block;
	margin-top: 5px;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(var(--school-primaire-rgb), .16);
	font-size: .78rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
}

.school-mod-appreciation p {
	margin: 8px 0 0;
	font-size: .89rem;
	color: #5d6b62;
}

/* ------------------------------------------------------------------ */
/* Discipline                                                          */
/* ------------------------------------------------------------------ */

.school-mod-jauge {
	margin-bottom: 20px;
}

.school-mod-jauge-barre {
	height: 10px;
	border-radius: 999px;
	background: rgba(var(--school-fonce-rgb), .1);
	overflow: hidden;
}

.school-mod-jauge-barre span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--school-accent), var(--school-primaire));
}

.school-mod-jauge p {
	margin: 9px 0 0;
	font-size: .88rem;
	color: #5d6b62;
}

.school-mod-jauge strong {
	font-size: 1.05rem;
	color: #1b2a20;
}

.school-mod-mesure {
	padding: 13px 16px;
	margin-bottom: 18px;
	border-left: 3px solid var(--school-accent);
	border-radius: 8px;
	background: rgba(var(--school-accent-rgb), .12);
}

.school-mod-mesure strong {
	display: block;
	color: #1b2a20;
}

.school-mod-mesure span {
	font-size: .87rem;
	color: #5d6b62;
}

.school-mod-compteurs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.school-mod-compteurs div {
	padding: 15px;
	border-radius: calc(var(--school-rayon) * .5);
	background: rgba(var(--school-primaire-rgb), .07);
	text-align: center;
}

.school-mod-compteurs strong {
	display: block;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--school-primaire-sombre);
}

.school-mod-compteurs span {
	font-size: .82rem;
	color: #5d6b62;
}

/* ------------------------------------------------------------------ */
/* Paiements                                                           */
/* ------------------------------------------------------------------ */

.school-mod-solde {
	padding: 22px;
	border-radius: calc(var(--school-rayon) * .6);
	text-align: center;
}

.school-mod-solde-du {
	background: rgba(var(--school-accent-rgb), .18);
}

.school-mod-solde-ok {
	background: rgba(var(--school-primaire-rgb), .1);
}

.school-mod-solde-lib {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #5d6b62;
}

.school-mod-solde-val {
	display: block;
	margin: 6px 0 4px;
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--school-primaire-sombre);
}

.school-mod-solde-detail {
	display: block;
	font-size: .84rem;
	color: #5d6b62;
}

.school-mod-services {
	list-style: none;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.school-mod-services li {
	padding: 13px 16px;
	border: 1px solid rgba(var(--school-fonce-rgb), .1);
	border-radius: calc(var(--school-rayon) * .5);
}

.school-mod-service-tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.school-mod-service-detail {
	display: block;
	margin-top: 4px;
	font-size: .83rem;
	color: #7a877f;
}

.school-mod-du {
	font-weight: 700;
	color: #a4650c;
}

.school-mod-ok {
	font-weight: 700;
	color: var(--school-primaire);
}

.school-mod-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(var(--school-fonce-rgb), .1);
	border-radius: calc(var(--school-rayon) * .5);
	overflow: hidden;
}

.school-mod-liste li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(var(--school-fonce-rgb), .07);
	font-size: .9rem;
}

.school-mod-liste li:last-child {
	border-bottom: 0;
}

.school-mod-liste em {
	display: block;
	font-size: .8rem;
	font-style: normal;
	color: #7a877f;
}

/* ------------------------------------------------------------------ */
/* Écrans étroits                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {

	.school-mod {
		padding: 0;
		align-items: flex-end;
	}

	.school-mod-boite {
		max-width: none;
		max-height: 94vh;
		border-radius: var(--school-rayon) var(--school-rayon) 0 0;
	}

	.school-mod-corps,
	.school-mod-sous-corps {
		padding: 20px 17px 24px;
	}

	.school-mod-compteurs {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {

	.school-mod *,
	.school-mod-boite,
	.school-mod-voile,
	.school-mod-sous {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Tableau de bord : panneaux à code couleur                           */
/* ------------------------------------------------------------------ */

.school-mod-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.school-mod-panneau {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 16px 17px;
	border: 1px solid rgba(var(--school-fonce-rgb), .12);
	border-left: 4px solid rgba(var(--school-fonce-rgb), .2);
	border-radius: calc(var(--school-rayon) * .55);
	background: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: box-shadow .18s ease, transform .18s ease;
}

.school-mod-panneau:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -18px rgba(var(--school-fonce-rgb), .7);
}

.school-mod-panneau-large {
	margin-bottom: 10px;
}

.school-mod-p-tete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.school-mod-p-titre {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #5d6b62;
}

.school-mod-pastille {
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: right;
}

/* Les quatre états. La couleur est décidée par le serveur. */
.school-mod-p-vert     { border-left-color: #1e8e3e; }
.school-mod-p-orange   { border-left-color: #e08600; }
.school-mod-p-rouge    { border-left-color: #c5221f; }
.school-mod-p-neutre   { border-left-color: #9aa5a0; }

.school-mod-p-vert   .school-mod-pastille { background: #e6f4ea; color: #146c2e; }
.school-mod-p-orange .school-mod-pastille { background: #fef3e0; color: #8a5300; }
.school-mod-p-rouge  .school-mod-pastille { background: #fce8e6; color: #a50e0e; }
.school-mod-p-neutre .school-mod-pastille { background: #eef1ef; color: #5d6b62; }

.school-mod-p-vert   .school-mod-p-chiffre strong { color: #146c2e; }
.school-mod-p-orange .school-mod-p-chiffre strong { color: #8a5300; }
.school-mod-p-rouge  .school-mod-p-chiffre strong { color: #a50e0e; }

.school-mod-p-chiffre {
	display: block;
}

.school-mod-p-chiffre strong {
	display: block;
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #1b2a20;
}

.school-mod-p-chiffre strong small {
	font-size: .8rem;
	font-weight: 600;
	opacity: .55;
}

.school-mod-p-chiffre small {
	display: block;
	margin-top: 2px;
	font-size: .78rem;
	color: #7a877f;
}

.school-mod-p-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin-top: 4px;
}

.school-mod-p-menu span {
	display: block;
}

.school-mod-p-menu strong {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1b2a20;
}

.school-mod-p-menu small {
	font-size: .74rem;
	color: #7a877f;
}

.school-mod-p-note {
	display: block;
	font-size: .84rem;
	color: #7a877f;
}

.school-mod-p-erreur {
	display: block;
	font-size: .84rem;
	color: #a50e0e;
}

.school-mod-p-squelette {
	display: block;
	height: 44px;
	border-radius: 6px;
	background: linear-gradient(90deg, #f1f3f2 25%, #e6e9e7 37%, #f1f3f2 63%);
	background-size: 400% 100%;
	animation: school-mod-glisse 1.3s ease infinite;
}

@keyframes school-mod-glisse {
	from { background-position: 100% 50%; }
	to   { background-position: 0 50%; }
}

.school-mod-fiche-lien,
.school-mod-lien-secondaire {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(var(--school-fonce-rgb), .12);
	border-radius: calc(var(--school-rayon) * .55);
	background: #fff;
	font-family: inherit;
	font-size: .93rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
	text-align: left;
	cursor: pointer;
}

.school-mod-fiche-lien:hover,
.school-mod-lien-secondaire:hover {
	background: rgba(var(--school-primaire-rgb), .06);
	border-color: var(--school-primaire);
}

.school-mod-lien-secondaire {
	margin-top: 18px;
	text-align: center;
}

.school-mod-compte-lien {
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 1px solid rgba(var(--school-fonce-rgb), .16);
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
	cursor: pointer;
}

.school-mod-compte-lien:hover {
	background: rgba(var(--school-primaire-rgb), .08);
}

/* ------------------------------------------------------------------ */
/* Mon compte                                                          */
/* ------------------------------------------------------------------ */

.school-mod-avatar-bloc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.school-mod-photo-vide {
	display: grid;
	place-items: center;
	background: rgba(var(--school-primaire-rgb), .14);
	color: var(--school-primaire-sombre);
	font-size: 2.4rem;
	font-weight: 800;
	text-transform: uppercase;
}

.school-mod-photo-btn {
	padding: 8px 16px;
	border: 1px solid rgba(var(--school-fonce-rgb), .16);
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
	cursor: pointer;
}

.school-mod-photo-btn:hover {
	background: rgba(var(--school-primaire-rgb), .08);
}

.school-mod-succes {
	margin: 0 0 16px;
	padding: 12px 15px;
	border-left: 3px solid #1e8e3e;
	border-radius: 8px;
	background: #e6f4ea;
	font-size: .89rem;
	color: #146c2e;
}

@media (max-width: 560px) {

	.school-mod-duo {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Emploi du temps                                                     */
/* ------------------------------------------------------------------ */

.school-mod-jour-actuel::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--school-accent);
	vertical-align: middle;
}

.school-mod-creneaux {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.school-mod-creneaux li {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 11px 14px;
	border: 1px solid rgba(var(--school-fonce-rgb), .1);
	border-radius: calc(var(--school-rayon) * .45);
	background: #fff;
}

.school-mod-heure {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--school-primaire-sombre);
}

.school-mod-heure small {
	display: block;
	font-size: .74rem;
	font-weight: 500;
	color: #9aa5a0;
}

.school-mod-cours strong {
	display: block;
	font-size: .96rem;
	color: #1b2a20;
}

.school-mod-cours em {
	display: block;
	font-size: .8rem;
	font-style: normal;
	color: #7a877f;
}

.school-mod-salle {
	flex: 0 0 auto;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(var(--school-primaire-rgb), .09);
	font-size: .76rem;
	font-weight: 600;
	color: var(--school-primaire-sombre);
	white-space: nowrap;
}

@media (max-width: 480px) {

	.school-mod-creneaux li {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.school-mod-salle {
		grid-column: 2;
		justify-self: start;
	}
}

/* ------------------------------------------------------------------ */
/* Champ mot de passe avec œil                                         */
/* ------------------------------------------------------------------ */

.school-mod-mdp {
	position: relative;
	display: block;
}

.school-mod-mdp input {
	/* De la place pour l’œil, sans que le texte passe dessous. */
	padding-right: 52px;
}

/* Edge affiche son propre œil : un seul suffit. */
.school-mod-mdp input::-ms-reveal,
.school-mod-mdp input::-ms-clear {
	display: none;
}

.school-mod-oeil {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #7a877f;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.school-mod-oeil:hover {
	background: rgba(var(--school-primaire-rgb), .1);
	color: var(--school-primaire-sombre);
}

.school-mod-oeil:focus-visible {
	outline: 2px solid var(--school-primaire);
	outline-offset: 2px;
}

.school-mod-oeil[aria-pressed="true"] {
	color: var(--school-primaire);
}

.school-mod-oeil svg {
	width: 21px;
	height: 21px;
}

/* ------------------------------------------------------------------ */
/* Survols neutres                                                     */
/* ------------------------------------------------------------------ */

/*
 * Les thèmes repeignent les boutons et les liens au survol avec leur
 * couleur principale — celle de Kadence est un bleu. On reprend la main :
 * gris neutre partout, et la couleur du texte ne bouge pas.
 */
.school-mod {
	--school-mod-survol: rgba(0, 0, 0, .055);
	--school-mod-survol-fort: rgba(0, 0, 0, .09);
	--school-mod-bord-survol: rgba(0, 0, 0, .22);
}

.school-mod button,
.school-mod a,
.school-mod label {
	-webkit-tap-highlight-color: transparent;
}

.school-mod button:hover,
.school-mod button:focus,
.school-mod a:hover,
.school-mod a:focus,
.school-mod label:hover {
	/* Aucune teinte imposée par le thème. */
	color: inherit;
	text-decoration: none;
}

.school-mod .school-mod-retour:hover,
.school-mod .school-mod-sous-retour:hover,
.school-mod .school-mod-compte-lien:hover,
.school-mod .school-mod-photo-btn:hover,
.school-mod .school-mod-oeil:hover {
	background: var(--school-mod-survol);
	border-color: var(--school-mod-bord-survol);
	color: #3c4b42;
}

.school-mod .school-mod-fermer:hover {
	background: var(--school-mod-survol-fort);
	color: #3c4b42;
}

.school-mod .school-mod-enfants button:hover,
.school-mod .school-mod-tuile:hover,
.school-mod .school-mod-fiche-lien:hover,
.school-mod .school-mod-lien-secondaire:hover {
	background: var(--school-mod-survol);
	border-color: var(--school-mod-bord-survol);
	color: inherit;
}

/* Le panneau garde son liseré d’état : seul le fond bouge. */
.school-mod .school-mod-panneau:hover {
	background: var(--school-mod-survol);
}

/* La déconnexion reste le seul survol coloré, en rouge : c’est une sortie. */
.school-mod .school-mod-deconnexion:hover {
	background: transparent;
	color: #b3261e;
}

/* Le focus clavier doit rester visible, mais sobre. */
.school-mod button:focus-visible,
.school-mod input:focus-visible,
.school-mod label:focus-visible {
	outline: 2px solid rgba(0, 0, 0, .45);
	outline-offset: 2px;
}

/* Les champs de saisie : bordure grise à la sélection, pas la teinte du thème. */
.school-mod .school-mod-form input:focus {
	border-color: rgba(0, 0, 0, .45);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
	outline: none;
}

/* ------------------------------------------------------------------ */
/* Case « rester connecté »                                            */
/* ------------------------------------------------------------------ */

.school-mod-case {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 18px;
	cursor: pointer;
}

.school-mod-case input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--school-primaire);
	cursor: pointer;
}

.school-mod-case span {
	font-size: .9rem;
	font-weight: 600;
	color: #3c4b42;
	line-height: 1.35;
}

.school-mod-case small {
	display: block;
	margin-top: 2px;
	font-size: .8rem;
	font-weight: 400;
	color: #7a877f;
}

/* Deux boutons dans l’en-tête de l’élève : ils doivent tenir côte à côte. */
.school-mod-eleve {
	flex-wrap: wrap;
	gap: 10px 15px;
}

.school-mod-eleve .school-mod-ident {
	flex: 1 1 140px;
}

@media (max-width: 460px) {

	.school-mod-eleve .school-mod-compte-lien {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* Photo de l’élève dans l’en-tête du dossier, à la place de l’initiale. */
.school-mod-avatar-grand {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(var(--school-primaire-rgb), .25);
}