/**
 * « Mes élèves », dans le compte client.
 *
 * Les couleurs viennent de la palette du site (brand.css) : changer la palette
 * dans « Couleurs du site » change aussi cet écran. Les valeurs après la
 * virgule ne servent que si brand.css n'est pas chargé.
 *
 * Écrit pour le téléphone d'abord : c'est là qu'un parent remplit ce formulaire,
 * souvent debout dans un couloir. Les zones à toucher font 44 px de haut au
 * minimum, et rien n'exige deux mains.
 */

.dks-mes-eleves {
	color: var(--dk-ink, #1C1816);
}

.dks-me-intro {
	margin: 0 0 22px;
	color: var(--dk-titre, #928885);
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------
 * Le message qui suit une action
 * ------------------------------------------------------------ */

.dks-me-flash {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 3px solid var(--dk-ink, #1C1816);
	background: var(--dk-light, #F5F5F5);
	font-size: 14.5px;
	font-weight: 600;
}

.dks-me-flash.ko {
	border-left-color: var(--dk-danger, #C4574F);
	color: var(--dk-danger, #C4574F);
}

/* ---------------------------------------------------------------
 * La liste des élèves
 * ------------------------------------------------------------ */

.dks-me-liste {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.dks-me-item {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 10px;
	padding: 16px 18px;
	border: 1px solid rgba(28, 24, 22, .14);
	border-radius: 10px;
	background: var(--dk-white, #FFFFFF);
}

.dks-me-qui {
	flex: 1 1 200px;
	min-width: 0;
}

.dks-me-qui strong {
	display: block;
	font-size: 16.5px;
	line-height: 1.3;
}

.dks-me-detail {
	display: block;
	margin-top: 3px;
	color: var(--dk-titre, #928885);
	font-size: 13.5px;
}

/* Une donnée manquante se signale, sans dramatiser : elle se complétera. */
.dks-me-manque {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dk-yellow, #FFE62B);
	color: var(--dk-ink, #1C1816);
	font-size: 11.5px;
	font-weight: 700;
}

.dks-me-vide {
	padding: 28px 20px;
	border: 1px dashed rgba(28, 24, 22, .2);
	border-radius: 10px;
	text-align: center;
}

.dks-me-vide p {
	margin: 0 0 18px;
	color: var(--dk-titre, #928885);
}

/* ---------------------------------------------------------------
 * Le formulaire
 * ------------------------------------------------------------ */

.dks-me-form {
	margin: 0 0 18px;
	padding: 22px;
	border: 1px solid rgba(28, 24, 22, .14);
	border-radius: 10px;
	background: var(--dk-white, #FFFFFF);
}

.dks-me-titre {
	margin: 0 0 20px;
	font-size: 19px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

/*
 * Deux champs côte à côte sur grand écran, l'un sous l'autre sur téléphone.
 * La bascule se fait toute seule : chaque champ réclame 220 px, et se replie
 * quand il ne les a pas.
 */
.dks-me-duo {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
}

.dks-me-duo > label {
	flex: 1 1 220px;
}

.dks-me-form label {
	display: block;
	margin-bottom: 18px;
}

.dks-me-form label > span {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dk-titre, #928885);
}

.dks-me-form label > em {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-size: 12.5px;
	color: var(--dk-titre, #928885);
}

/*
 * La case « étudiant ».
 *
 * Une case à cocher n'est pas un champ : elle se lit à côté de son intitulé, pas
 * en dessous. On sort donc de la mise en colonne des autres champs — sans quoi
 * la case se retrouvait seule sur sa ligne, loin du texte qu'elle commande.
 *
 * Encadrée, parce qu'elle décide d'un prix : ce n'est pas une préférence
 * d'affichage, et elle ne doit pas se cocher sans qu'on l'ait lue.
 */
.dks-me-form label.dks-me-etudiant {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(28, 24, 22, .16);
	border-radius: 12px;
}

.dks-me-form label.dks-me-etudiant input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--dk-ink, #1C1816);
	cursor: pointer;
}

.dks-me-form label.dks-me-etudiant > span {
	display: block;
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}

.dks-me-form label.dks-me-etudiant strong {
	display: block;
	font-weight: 600;
}

.dks-me-form label.dks-me-etudiant em {
	margin-top: 3px;
}

/*
 * Les champs.
 *
 * « color: inherit » paraissait élégant : le champ prenait la couleur du texte
 * autour. Mais on est dans une page WooCommerce, où le thème habille déjà les
 * formulaires — et il posait un gris clair. Résultat : du gris pâle sur blanc,
 * illisible. On écrit donc la couleur, et on la défend contre le thème.
 */
.dks-mes-eleves .dks-me-form input[type="text"],
.dks-mes-eleves .dks-me-form input[type="date"],
.dks-mes-eleves .dks-me-form select {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid rgba(28, 24, 22, .28);
	border-radius: 10px;
	background: var(--dk-white, #FFFFFF) !important;
	color: var(--dk-ink, #1C1816) !important;
	-webkit-text-fill-color: var(--dk-ink, #1C1816); /* Safari ignore color sur les champs date */
	opacity: 1;
	font: inherit;
	/* 16 px minimum : en dessous, les iPhone zooment tout seuls au premier clic. */
	font-size: 16px;
	box-sizing: border-box;
}

/*
 * Le menu déroulant du genre.
 *
 * C'était le dernier champ illisible du formulaire, et pour une raison à lui :
 * tant qu'un menu déroulant garde son apparence native, Safari le dessine à sa
 * façon et ignore le fond comme la couleur qu'on lui donne. Les autres champs
 * obéissaient, celui-là non — d'où le « tout est visible sauf le genre ».
 *
 * On lui retire donc son apparence système, ce qui oblige à redessiner la
 * flèche nous-mêmes : sans elle, plus rien ne dit qu'on peut dérouler le champ.
 */
.dks-mes-eleves .dks-me-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 38px;
	/* Une flèche dessinée à la couleur du texte, portée par le champ lui-même :
	   pas de fichier à charger, et elle suit la couleur d'encre.
	   Le « !important » n'est pas un caprice : la règle du dessus pose
	   « background » en raccourci et avec la même priorité, ce qui effacerait
	   l'image sans lui. */
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231C1816' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
}

/* Le panneau qui s'ouvre est dessiné par le système, pas par la page : il faut
   lui donner ses couleurs séparément, sinon les choix s'affichent en clair sur
   clair sous Windows et sur les thèmes sombres. */
.dks-mes-eleves .dks-me-form select option {
	background: var(--dk-white, #FFFFFF);
	color: var(--dk-ink, #1C1816);
}

/* Le texte grisé d'un champ vide reste lisible, sans se confondre avec une
   vraie valeur. */
.dks-mes-eleves .dks-me-form input::placeholder {
	color: rgba(28, 24, 22, .45);
	opacity: 1;
}

/* Safari affiche le gabarit « jj.mm.aaaa » d'un champ date vide dans une couleur
   à lui, souvent trop pâle. */
.dks-mes-eleves .dks-me-form input[type="date"]::-webkit-datetime-edit-text,
.dks-mes-eleves .dks-me-form input[type="date"]::-webkit-datetime-edit-day-field,
.dks-mes-eleves .dks-me-form input[type="date"]::-webkit-datetime-edit-month-field,
.dks-mes-eleves .dks-me-form input[type="date"]::-webkit-datetime-edit-year-field {
	color: var(--dk-ink, #1C1816);
}

/* L'icône du calendrier, pour qu'on sache qu'on peut cliquer. */
.dks-mes-eleves .dks-me-form input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: .65;
	cursor: pointer;
}

.dks-me-form input:focus,
.dks-me-form select:focus {
	outline: none;
	border-color: var(--dk-ink, #1C1816);
	box-shadow: 0 0 0 3px rgba(28, 24, 22, .09);
}

/* Ce qu'on fait une fois les élèves déclarés : s'inscrire. Le bouton porte
   l'action principale, le lien secondaire reste discret à côté. */
.dks-me-suite {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}

@media (max-width: 560px) {

	.dks-mes-eleves .dks-me-suite .dks-me-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
 * Boutons et liens
 * ------------------------------------------------------------ */

/*
 * Le bouton.
 *
 * Il est noir sur fond clair, donc impossible à manquer — sauf que le thème
 * habille déjà les boutons de WooCommerce, et le sien passait devant. On force
 * donc fond et texte, et on préfixe par .dks-mes-eleves pour gagner en poids
 * sans dépendre uniquement de !important.
 */
.dks-mes-eleves .dks-me-btn,
.dks-mes-eleves button.dks-me-btn,
.dks-mes-eleves a.dks-me-btn {
	display: inline-block;
	min-height: 46px;
	padding: 13px 26px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--dk-ink, #1C1816) !important;
	background-image: none !important;
	color: var(--dk-white, #FFFFFF) !important;
	-webkit-text-fill-color: var(--dk-white, #FFFFFF);
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: background .15s ease;
}

.dks-mes-eleves .dks-me-btn:hover,
.dks-mes-eleves .dks-me-btn:focus-visible {
	background: var(--dk-grey, #6B6560) !important;
	color: var(--dk-white, #FFFFFF) !important;
}

/* ---------------------------------------------------------------
 * Les cours suivis, sous chaque élève
 * ------------------------------------------------------------ */

/*
 * Une ligne par cours, en retrait sous le nom de l'élève. Le lien du groupe
 * WhatsApp est à droite, en vert : c'est la seule action de la ligne, et le
 * vert dit d'où elle vient sans qu'on ait à l'écrire.
 */
.dks-me-cours {
	list-style: none;
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid rgba(28, 24, 22, .12);
	flex-basis: 100%;
}

.dks-me-cours li {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 5px 0;
}

.dks-me-cours-nom {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
}

.dks-me-cours-nom em {
	display: block;
	font-style: normal;
	font-size: 12.5px;
	color: var(--dk-titre, #928885);
}

.dks-me-wa {
	flex: 0 0 auto;
	padding: 5px 13px;
	border: 1px solid #25D366;
	border-radius: 999px;
	color: #128C4A !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none !important;
	/* Assez haut pour être touché au pouce. */
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	transition: background .15s ease;
}

.dks-me-wa:hover,
.dks-me-wa:focus-visible {
	background: #25D366;
	color: var(--dk-white, #FFFFFF) !important;
}

@media (max-width: 560px) {

	.dks-me-wa {
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
 * La carte blanche contre l'habillage sombre de l'espace client
 * ------------------------------------------------------------ */

/*
 * Le formulaire est une carte blanche posée sur une page noire — et la feuille
 * de l'espace client, elle, habille TOUS les champs pour le fond noir : fond
 * blanc à 9 %, bordure blanche à 18 %, texte blanc cassé. Sur une carte
 * blanche, cela revient à du blanc sur blanc : les champs Prénom, Nom et Genre
 * n'avaient plus ni cadre ni contenu visible.
 *
 * Seule la date y échappait, parce que cette feuille-là ne cite pas
 * `input[type="date"]` — d'où ce formulaire où un champ sur quatre se voyait.
 *
 * On rétablit donc les couleurs de la carte, avec assez de poids pour passer
 * devant : le préfixe `body.woocommerce-account` suffit à dépasser les
 * sélecteurs de l'espace client, et le `!important` tient tête aux siens.
 */
body.woocommerce-account .dks-mes-eleves .dks-me-form input[type="text"],
body.woocommerce-account .dks-mes-eleves .dks-me-form input[type="date"],
body.woocommerce-account .dks-mes-eleves .dks-me-form select {
	background-color: var(--dk-white, #FFFFFF) !important;
	color: var(--dk-ink, #1C1816) !important;
	-webkit-text-fill-color: var(--dk-ink, #1C1816) !important;
	border: 1px solid rgba( 28, 24, 22, .28 ) !important;
	border-radius: 10px !important;
	opacity: 1 !important;
}

/* La flèche du menu déroulant repasse en encre : celle de l'espace client est
   claire, faite pour le fond noir, donc invisible ici. */
body.woocommerce-account .dks-mes-eleves .dks-me-form select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231C1816' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
}

body.woocommerce-account .dks-mes-eleves .dks-me-form select option {
	background-color: var(--dk-white, #FFFFFF);
	color: var(--dk-ink, #1C1816);
}

/* Les intitulés étaient gris clair sur blanc : lisibles de justesse, et
   franchement pâles à côté du reste. On les fonce. */
body.woocommerce-account .dks-mes-eleves .dks-me-form label > span {
	color: var(--dk-ink, #1C1816);
	opacity: .75;
}

body.woocommerce-account .dks-mes-eleves .dks-me-form label > em {
	color: var(--dk-ink, #1C1816);
	opacity: .6;
}

/*
 * Le texte des cartes blanches, pour les mêmes raisons.
 *
 * Ce n'étaient pas que les champs : l'espace client écrit en blanc cassé tout
 * ce qu'il trouve — paragraphes, listes, gras. Sur les cartes, le nom de
 * l'élève devenait gris très pâle, et le bandeau de confirmation paraissait
 * carrément vide : le texte y était bien, en blanc sur gris clair.
 *
 * Plutôt que de rattraper chaque élément un par un à mesure qu'on les
 * découvre, on pose la couleur d'encre sur les blocs blancs eux-mêmes, et on
 * redonne ensuite leur teinte aux quelques nuances voulues.
 */
body.woocommerce-account .dks-mes-eleves .dks-me-flash,
body.woocommerce-account .dks-mes-eleves .dks-me-item,
body.woocommerce-account .dks-mes-eleves .dks-me-item strong,
body.woocommerce-account .dks-mes-eleves .dks-me-item span,
body.woocommerce-account .dks-mes-eleves .dks-me-cours li,
body.woocommerce-account .dks-mes-eleves .dks-me-form,
body.woocommerce-account .dks-mes-eleves .dks-me-form p,
body.woocommerce-account .dks-mes-eleves .dks-me-titre {
	color: var(--dk-ink, #1C1816) !important;
}

/* Les nuances qui, elles, sont voulues. */
body.woocommerce-account .dks-mes-eleves .dks-me-detail {
	color: var(--dk-titre, #928885) !important;
}

body.woocommerce-account .dks-mes-eleves .dks-me-flash.ko {
	color: var(--dk-danger, #C4574F) !important;
}

body.woocommerce-account .dks-mes-eleves .dks-me-manque {
	color: var(--dk-ink, #1C1816) !important;
}

/* ---------------------------------------------------------------
 * Les deux blocs posés à même la page
 * ------------------------------------------------------------ */

/*
 * Ici, le fond n'est pas blanc — c'est celui de l'espace client, qui est noir.
 *
 * Les fiches et le formulaire sont des cartes blanches : tout ce qui est écrit
 * en encre s'y lit très bien. Mais « aucun élève déclaré » et la rangée de
 * boutons du bas ne sont pas des cartes, ils sont posés directement sur la
 * page. L'encre y devient invisible : le bouton principal était noir sur noir,
 * et le contour en pointillés avait disparu de la même façon.
 *
 * On y bascule donc sur le jaune, qui est la couleur d'action du site — celle
 * du bouton « Inscription » du menu et de « Enregistrer les modifications ».
 * Ailleurs, sur les cartes blanches, les boutons gardent leur noir d'origine.
 */
.dks-mes-eleves .dks-me-vide {
	border-color: rgba( 255, 255, 255, .28 );
}

.dks-mes-eleves .dks-me-vide p {
	color: rgba( 255, 255, 255, .72 );
}

.dks-mes-eleves .dks-me-vide .dks-me-btn,
.dks-mes-eleves .dks-me-suite .dks-me-btn {
	background: var(--dk-yellow, #FFE62B) !important;
	color: var(--dk-ink, #1C1816) !important;
	-webkit-text-fill-color: var(--dk-ink, #1C1816);
}

/* On éclaircit au survol plutôt que de changer de teinte : sur un aplat de
   couleur, un changement de luminosité se lit mieux qu'un changement de ton. */
.dks-mes-eleves .dks-me-vide .dks-me-btn:hover,
.dks-mes-eleves .dks-me-vide .dks-me-btn:focus-visible,
.dks-mes-eleves .dks-me-suite .dks-me-btn:hover,
.dks-mes-eleves .dks-me-suite .dks-me-btn:focus-visible {
	background: var(--dk-yellow, #FFE62B) !important;
	color: var(--dk-ink, #1C1816) !important;
	filter: brightness( 1.1 );
}

/*
 * « Ajouter un élève » garde la même apparence d'un écran à l'autre.
 *
 * Il avait pris la forme d'un bouton à contour ici, pour se distinguer de
 * « S'inscrire à l'année » qui est l'action principale. Mais c'est le même
 * bouton, avec le même libellé, que celui de l'écran sans élève : lui donner
 * deux apparences selon la page oblige à le reconnaître deux fois. La
 * cohérence d'un même geste passe avant la hiérarchie entre deux actions.
 */

/* Les actions du formulaire : le bouton d'abord, à gauche, puis le lien
   d'annulation. Sur téléphone, le bouton prend toute la largeur — on ne le
   cherche plus. */
.dks-mes-eleves .dks-me-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 8px;
}

@media (max-width: 560px) {

	.dks-mes-eleves .dks-me-actions {
		gap: 10px;
	}

	.dks-mes-eleves .dks-me-actions .dks-me-btn {
		width: 100%;
	}
}

.dks-me-lien {
	color: var(--dk-ink, #1C1816) !important;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Assez haut pour être touché au pouce, même si le texte est court. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.dks-me-lien:hover,
.dks-me-lien:focus-visible {
	opacity: .7;
}

/*
 * Retirer un élève est discret et séparé du reste.
 *
 * C'est une action qu'on ne fait presque jamais et qu'on ne doit pas déclencher
 * en visant « Enregistrer » : d'où sa place à l'écart, et son absence de fond.
 */
.dks-me-suppr {
	margin: 0;
	padding-top: 4px;
}

.dks-me-suppr-btn {
	min-height: 44px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--dk-danger, #C4574F);
	font: inherit;
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dks-me-suppr-btn:hover,
.dks-me-suppr-btn:focus-visible {
	opacity: .75;
}

/* ---------------------------------------------------------------
 * Téléphone
 * ------------------------------------------------------------ */

@media (max-width: 600px) {
	.dks-me-item {
		padding: 14px 16px;
	}

	/* Le lien « Modifier » passe sous le nom plutôt que de le comprimer. */
	.dks-me-item .dks-me-lien {
		flex: 1 1 100%;
		margin-top: 2px;
	}

	.dks-me-form {
		padding: 18px 16px;
	}

	/* Un bouton pleine largeur se vise sans regarder. */
	.dks-me-actions .dks-me-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dks-me-btn {
		transition: none;
	}
}