/**
 * Parcours d'inscription à l'année.
 *
 * Tout part des variables --dk-* de brand.css : si Katia change les couleurs du
 * site depuis l'écran « Couleurs », cet écran suit sans qu'on y retouche.
 *
 * Le choix des cours est une liste de cases à cocher, pas une grille de cartes.
 * Un parent qui inscrit trois enfants lit vingt lignes : il lui faut une
 * colonne qu'on parcourt du regard, pas des blocs à balayer en zigzag.
 */

.dks-ins {
	--dks-ins-bord: color-mix( in srgb, var(--dk-ink) 12%, transparent );
	--dks-ins-fond: color-mix( in srgb, var(--dk-ink) 3%, transparent );

	max-width: 780px;
	margin: 0 auto;
	/*
	 * De l'air en haut : la barre de menu se pose PAR-DESSUS la page, et sans
	 * cet écart le titre se retrouvait caché dessous.
	 *
	 * La hauteur est mesurée à l'affichage, parce qu'elle change avec la
	 * largeur de l'écran. Le bandeau d'annonce est compté dedans : il se glisse
	 * dans la barre et en fait partie.
	 */
	padding: calc( var( --dks-menu-h, 0px ) + 40px ) 16px 48px;
	color: var(--dk-ink);
}

@media ( max-width: 782px ) {

	.dks-ins {
		padding-top: calc( var( --dks-menu-h, 0px ) + 28px );
	}
}

.dks-ins-titre {
	margin: 0 0 8px;
	font-size: clamp( 1.6rem, 4vw, 2.2rem );
	line-height: 1.15;
	text-wrap: balance;
}

.dks-ins-intro {
	margin: 0 0 28px;
	opacity: .75;
	line-height: 1.55;
}

/* --- Un élève, ses cours ------------------------------------------------ */

.dks-ins-eleve {
	margin: 0 0 28px;
	border: 1px solid var( --dks-ins-bord );
	border-radius: 14px;
	overflow: hidden;
}

.dks-ins-eleve > h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	padding: 14px 18px;
	background: var( --dks-ins-fond );
	border-bottom: 1px solid var( --dks-ins-bord );
	font-size: 1.05rem;
	line-height: 1.3;
}

.dks-ins-eleve > h3 span {
	font-size: .8rem;
	font-weight: 400;
	opacity: .6;
	text-transform: lowercase;
}

/* Le jour, en intertitre : c'est par là qu'on cherche un cours. */
.dks-ins-jour {
	margin: 0;
	padding: 11px 18px 5px;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .55;
}

.dks-ins-cours + .dks-ins-jour {
	border-top: 1px solid var( --dks-ins-bord );
	padding-top: 14px;
}

.dks-ins-cours {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* L'heure ressort du reste de la ligne : c'est elle qui décide si le cours
   entre dans une semaine déjà chargée. */
.dks-ins-heure {
	font-weight: 700;
	font-size: .88rem;
	opacity: .85;
}

/* --- Les cours d'une autre tranche d'âge -------------------------------- */

/*
 * Repliés, et volontairement plus discrets que les autres : la liste ouverte
 * reste celle de son âge. Il faut un geste pour voir le reste, et ce geste est
 * ce qui évite de s'inscrire au mauvais cours sans y penser.
 */
.dks-ins-autres {
	border-top: 1px solid var( --dks-ins-bord );
}

.dks-ins-autres > summary {
	/*
	 * Une cible franche. À 13 pixels de haut de part et d'autre du texte, on
	 * visait ce dépliant au pouce et l'on touchait la ligne du dessus — celle
	 * qui porte le bouton de liste d'attente. Katia s'est ainsi signalée sur un
	 * cours sans le vouloir. La zone fait maintenant la hauteur d'usage d'un
	 * bouton, ce qui règle la cause plutôt que sa conséquence.
	 */
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 13px 18px;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	opacity: .7;
	list-style: none;
}

.dks-ins-autres > summary::-webkit-details-marker {
	display: none;
}

/* Un chevron dessiné à la main : il tourne à l'ouverture, ce qui dit d'un coup
   d'œil si le repli est ouvert ou fermé. */
.dks-ins-autres > summary::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( -45deg ) translate( -2px, -2px );
	transition: transform .15s ease;
}

.dks-ins-autres[open] > summary::before {
	transform: rotate( 45deg ) translate( -1px, -1px );
}

.dks-ins-autres > summary:hover {
	opacity: 1;
}

/* Ce qui est retenu sous un repli doit se voir même replié. */
.dks-ins-autres-pris {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	font-size: .72rem;
	font-weight: 700;
}

.dks-ins-autres-note {
	margin: 0 18px 6px;
	padding: 10px 13px;
	background: var( --dks-ins-fond );
	border-left: 3px solid var(--dk-yellow);
	border-radius: 0 8px 8px 0;
	font-size: .84rem;
	line-height: 1.5;
}

.dks-ins-cours li + li {
	border-top: 1px solid var( --dks-ins-bord );
}

/*
 * Où le regard doit se poser en revenant.
 *
 * Se mettre en liste d'attente recharge la page, qui revient sur la ligne
 * concernée. Sans cette réserve, le navigateur la cale pile en haut de la
 * fenêtre — c'est-à-dire SOUS la barre de menu, qui se pose par-dessus : on
 * revenait au bon endroit sans rien voir. On dégage donc la hauteur du menu,
 * plus un peu d'air pour que la ligne ne soit pas collée dessous.
 */
.dks-ins-cours li {
	scroll-margin-top: calc( var( --dks-menu-h, 0px ) + 16px );
}

/* La ligne entière est cliquable : sur un téléphone, viser une case de 14 px
   avec le pouce est une épreuve qu'on peut éviter. */
.dks-ins-cours label {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 18px;
	margin: 0;
	cursor: pointer;
	transition: background .15s ease;
}

.dks-ins-cours label:hover {
	background: var( --dks-ins-fond );
}

.dks-ins-cours input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--dk-ink);
	cursor: pointer;
}

.dks-ins-c {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dks-ins-c strong {
	font-weight: 600;
	line-height: 1.25;
}

.dks-ins-c em {
	font-style: normal;
	font-size: .82rem;
	opacity: .62;
	line-height: 1.3;
}

.dks-ins-places {
	flex: 0 0 auto;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.dks-ins-reste {
	color: var(--dk-warning);
	font-weight: 600;
}

/* « Complet » se lit franchement : c'est la raison pour laquelle la ligne est
   barrée, pas un détail. */
.dks-ins-plein {
	color: var(--dk-danger);
	font-weight: 600;
}

/*
 * Se mettre en liste d'attente.
 *
 * Volontairement discret : ce n'est pas une inscription, rien n'est réservé.
 * Mais c'est un bouton, pas un lien souligné — sur un téléphone, il n'y a pas
 * de survol pour découvrir qu'on peut cliquer.
 */
.dks-ins-attente {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 11px;
	border: 1px solid var( --dks-ins-bord );
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .72rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.dks-ins-attente:hover,
.dks-ins-attente:focus-visible {
	border-color: var(--dk-ink);
	background: var( --dks-ins-fond );
}

/* Déjà dans la file : le vert dit que c'est acquis, comme « déjà inscrit ». */
.dks-ins-attente.est-inscrit {
	color: var(--dk-success);
	border-color: var(--dk-success);
}

/*
 * « Tu avais commencé une sélection. »
 *
 * En tête de page, avant la liste : c'est une explication, pas une alerte. Le
 * filet jaune de la maison plutôt que le rouge — rien n'est cassé, on rappelle
 * seulement d'où viennent les cases déjà cochées.
 */
.dks-ins-reprise {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 22px;
	padding: 13px 16px;
	background: var( --dks-ins-fond );
	border-left: 3px solid var(--dk-yellow);
	border-radius: 0 8px 8px 0;
}

.dks-ins-reprise p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
}

.dks-ins-reprise form {
	margin: 0;
}

.dks-ins-reprise-btn {
	padding: 7px 15px;
	border: 1px solid var( --dks-ins-bord );
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}

.dks-ins-reprise-btn:hover,
.dks-ins-reprise-btn:focus-visible {
	border-color: var(--dk-ink);
	background: var( --dks-ins-fond );
}

/* Le message qui suit un passage par la liste d'attente. */
.dks-ins-flash {
	margin: 0 0 18px;
	padding: 11px 15px;
	background: var( --dks-ins-fond );
	border-left: 3px solid var(--dk-success);
	border-radius: 0 8px 8px 0;
	font-size: .9rem;
	line-height: 1.5;
}

/* Un cours déjà suivi : ce n'est pas un refus, c'est un rappel. D'où le vert
   plutôt que le rouge de « complet ». */
.dks-ins-pris {
	color: var(--dk-success);
	font-weight: 600;
}

/*
 * Un cours complet s'efface — mais pas ce qu'on peut encore y faire.
 *
 * Toute la ligne passait à 45 % d'opacité pour dire « on ne coche pas ici ».
 * Sauf que l'estompage emportait aussi la mention COMPLET et le bouton de
 * liste d'attente, qui se cumulaient avec leur propre transparence : on
 * arrivait à 36 %, à la limite du lisible. Or ces deux-là sont justement ce
 * qu'il faut lire — l'un explique la situation, l'autre reste cliquable.
 *
 * On n'efface donc que ce qui est réellement hors service : la case et le nom
 * du cours.
 */
.dks-ins-cours li.est-complet label {
	cursor: not-allowed;
}

.dks-ins-cours li.est-complet .dks-ins-c,
.dks-ins-cours li.est-complet input[type="checkbox"] {
	opacity: .5;
}

.dks-ins-cours li.est-complet .dks-ins-places {
	opacity: 1;
}

.dks-ins-cours li.est-complet label:hover {
	background: none;
}

.dks-ins-vide {
	margin: 0;
	padding: 16px 18px;
	font-size: .9rem;
	opacity: .7;
}

/* --- Récapitulatif ------------------------------------------------------ */

.dks-ins-bloc {
	margin: 0 0 22px;
}

.dks-ins-bloc > h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.dks-ins-recap {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dks-ins-recap li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var( --dks-ins-bord );
}

.dks-ins-recap li span {
	flex: 1 1 auto;
}

.dks-ins-recap li strong {
	flex: 0 0 auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.dks-ins-conseil {
	margin: 10px 0 0;
	padding: 11px 14px;
	background: var( --dks-ins-fond );
	border-left: 3px solid var(--dk-yellow);
	border-radius: 0 8px 8px 0;
	font-size: .88rem;
	line-height: 1.5;
}

.dks-ins-conseil strong {
	display: block;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .6;
	margin-bottom: 2px;
}

/* Ce qui a coincé en validant. Signalé sans dramatiser : la famille n'y est
   pour rien, c'est un tarif qui manque de notre côté. */
.dks-ins-alerte {
	margin: 0 0 22px;
	padding: 13px 16px;
	border: 1px solid var(--dk-danger);
	border-radius: 10px;
	font-size: .9rem;
	line-height: 1.5;
}

.dks-ins-alerte strong {
	display: block;
	color: var(--dk-danger);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 5px;
}

.dks-ins-alerte ul {
	margin: 0 0 6px;
	padding-left: 18px;
}

.dks-ins-alerte span {
	opacity: .7;
	font-size: .85rem;
}

/* --- Le total ----------------------------------------------------------- */

.dks-ins-total {
	margin: 26px 0 18px;
	padding: 16px 18px;
	background: var( --dks-ins-fond );
	border-radius: 14px;
}

.dks-ins-total .l {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
}

.dks-ins-total .l strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dks-ins-total .l span em {
	display: block;
	font-style: normal;
	font-size: .74rem;
	opacity: .6;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.dks-ins-total .rabais {
	opacity: .8;
}

.dks-ins-total .final {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var( --dks-ins-bord );
	font-size: 1.12rem;
}

.dks-ins-total .final strong {
	font-size: 1.3rem;
}

/* --- Le rythme de paiement ---------------------------------------------- */

.dks-ins-rythme {
	margin: 22px 0 0;
	padding: 14px 16px;
	border: 1px solid var( --dks-ins-bord );
	border-radius: 14px;
}

.dks-ins-rythme legend {
	padding: 0 6px;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .65;
}

.dks-ins-rythme label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 4px;
	cursor: pointer;
}

.dks-ins-rythme label + label {
	border-top: 1px solid var( --dks-ins-bord );
}

.dks-ins-rythme input[type="radio"] {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 0;
	accent-color: var(--dk-ink);
	cursor: pointer;
}

.dks-ins-rythme label > span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.dks-ins-rythme em {
	font-style: normal;
	font-size: .84rem;
	opacity: .62;
}

/* --- Boutons et mentions ------------------------------------------------ */

.dks-ins-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.dks-ins-btn {
	display: inline-block;
	padding: 13px 26px;
	background: var(--dk-yellow);
	color: var(--dk-ink);
	border: 0;
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.dks-ins-btn:hover {
	filter: brightness( 1.08 );
	transform: translateY( -1px );
	color: var(--dk-ink);
}

.dks-ins-lien {
	color: inherit;
	opacity: .7;
	text-decoration: underline;
	font-size: .9rem;
}

/*
 * L'avertissement qui précède la validation.
 *
 * Assez visible pour être lu, assez sobre pour ne pas ressembler à une erreur :
 * le rouge du danger dirait « quelque chose cloche », alors qu'il s'agit
 * seulement de relire. D'où le jaune de la maison, et un fond très léger.
 */
.dks-ins-avertit {
	margin: 22px 0 0;
	padding: 13px 16px;
	background: var( --dks-ins-fond );
	border-left: 3px solid var(--dk-yellow);
	border-radius: 0 8px 8px 0;
	font-size: .88rem;
	line-height: 1.55;
}

.dks-ins-avertit strong {
	display: block;
	margin-bottom: 2px;
}

.dks-ins-note {
	margin: 14px 0 0;
	font-size: .84rem;
	line-height: 1.55;
	opacity: .62;
}

/*
 * Pas de padding-top ici : il écraserait celui de .dks-ins, qui dégage la place
 * du menu. C'est ce qui est arrivé — la porte d'entrée du parcours passait
 * entièrement sous la barre, texte et bouton compris.
 */
.dks-ins-porte {
	text-align: center;
}

.dks-ins-porte p {
	line-height: 1.6;
}

/* Le focus clavier doit rester visible : certains parents remplissent ça au
   clavier, et Blocksy retire l'anneau par défaut sur les boutons. */
.dks-ins :is( a, button, input ):focus-visible {
	outline: 2px solid var(--dk-ink);
	outline-offset: 3px;
}

@media ( max-width: 560px ) {

	.dks-ins-cours label {
		flex-wrap: wrap;
		padding: 12px 14px;
	}

	.dks-ins-places {
		flex-basis: 100%;
		padding-left: 34px;
	}

	.dks-ins-eleve > h3 {
		padding: 12px 14px;
	}

	.dks-ins-btn {
		width: 100%;
		text-align: center;
	}
}

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

	.dks-ins * {
		transition: none !important;
	}
}