/**
 * Deekay School — planning [dance_timetable]
 * Thème sombre Deekay. Tokens repris du CSS existant du site (horaires-test).
 * Desktop : grille alignée par bande horaire. Mobile : liste par jour.
 * La police n'est PAS forcée → hérite du thème (cohérence auto).
 */

.dks-tt {
	--dks-accent: var(--dk-yellow, #FFE62B);                       /* heures + boutons */
	--dks-text: #F3F4F6;
	--dks-muted: var(--dk-muted, #A3A3A3);
	--dks-divider: rgba(255, 255, 255, .18);
	--dks-card-bg: rgba(255, 255, 255, .06);
	--dks-card-strong: rgba(255, 255, 255, .10);
	--dks-r: 14px;
	--dks-shadow: 0 8px 20px rgba(0, 0, 0, .28);
	color: var(--dks-text);
	/* fond sombre avec légère profondeur (la page peut mettre une photo derrière) */
	/* Pleine largeur, sans arrondi : le planning est une section du site, pas un
	   encadré posé au milieu d'une page blanche. Même traitement que les pages
	   Profs, Styles et Salles. */
	background: var(--dk-ink, #1C1816);
	/* Haut calé sur la page Conditions, qui sert de mètre-étalon : le titre
	   tombe à 150 px du haut sur grand écran, partout pareil.
	   Bas à zéro : la section suivante (« Follow us ») s'y accole, sinon une
	   bande claire s'intercale entre deux blocs pleine largeur. */
	padding: clamp(70px, 10.7vw, 150px) clamp(16px, 5vw, 60px) clamp(60px, 7vw, 110px);
	/*
	 * ... sauf si la barre de menu en recouvre plus que ça.
	 *
	 * Sur téléphone, l'écart d'origine valait 70 pixels quand le menu et son
	 * annonce en occupaient 152 : les boutons « Filtrer » et « Télécharger le
	 * PDF » arrivaient à moitié cachés dessous. On garde donc le plus grand des
	 * deux écarts. Sans annonce affichée, le menu tient dans les 150 pixels du
	 * mètre-étalon et rien ne bouge sur grand écran.
	 */
	padding-top: max( clamp(70px, 10.7vw, 150px), calc( var( --dks-menu-h, 0px ) + 24px ) );
	margin-bottom: 0 !important;
	border-radius: 0;
	-webkit-font-smoothing: antialiased;
}

/* ============ Boutons globaux (haut / bas) ============ */
.dks-hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 0 0 28px;
}
.dks-hero-bottom { margin: 30px 0 0; }
.dks-cta {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font: inherit;
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.dks-cta-light  { background: #fff; color: var(--dk-ink, #1c1816); }
.dks-cta-accent { background: var(--dks-accent); color: var(--dk-ink, #1c1816); }
.dks-cta:hover  { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }

/* ============ Barre de commandes : Filtrer · PDF · Choisir une salle ============
   Trois outils de même nature, donc un seul gabarit : même hauteur, même
   graisse, même arrondi. Aucun ne crie plus fort que les autres, et l'ensemble
   passe à la ligne tout seul sur écran étroit. */
.dks-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.dks-tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	/* Le PDF est un lien : sans « !important », le style de lien du thème le
	   souligne et le repeint, et il ne ressemble plus aux deux boutons voisins. */
	text-decoration: none !important;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--dks-divider);
	background: transparent;
	color: var(--dks-text) !important;
	line-height: 1.2;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dks-tool:hover { background: var(--dks-card-strong); border-color: rgba(255, 255, 255, .35); }
.dks-tool:focus-visible { outline: 2px solid var(--dks-accent); outline-offset: 2px; }

/* La salle consultée est la seule information d'état de la barre : elle seule
   prend l'accent. */
.dks-room-tab.is-active {
	background: var(--dks-accent);
	border-color: var(--dks-accent);
	color: var(--dk-ink, #1c1816) !important;
}

/* Séparateur discret entre les outils et le choix de la salle. */
.dks-tool-sep {
	width: 1px;
	height: 20px;
	background: var(--dks-divider);
	margin: 0 4px;
}

.dks-room-tabs-label {
	font-size: 12px;
	color: var(--dks-muted);
	align-self: center;
}

/* Trois barres décroissantes : le symbole du filtre, dessiné plutôt qu'importé. */
.dks-filter-ico {
	display: inline-block;
	width: 12px;
	height: 9px;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	position: relative;
	flex: none;
}
.dks-filter-ico::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	border-top: 1.5px solid currentColor;
}
/* Compte des filtres actifs, ajouté par le script quand il y en a. */
.dks-filter-count {
	background: var(--dks-accent);
	color: var(--dk-ink, #1c1816);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
}

/* Sur mobile, le label disparaît : les deux boutons de salle se comprennent
   seuls, et chaque ligne gagnée compte sur un petit écran. */
@media (max-width: 620px) {
	.dks-toolbar { gap: 6px; }
	.dks-tool { font-size: 11.5px; padding: 7px 14px; }
	.dks-tool-sep,
	.dks-room-tabs-label { display: none; }
}

/* ============ Barre de filtres ============ */
/* L'attribut « hidden » ne suffit pas : le display:flex ci-dessous l'emporte
   sur le display:none que le navigateur y attache. Sans cette règle, les
   filtres restent affichés alors que le bouton les croit repliés. */
.dks-bar[hidden] { display: none; }

/* Barre de filtres — discrète */
.dks-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 auto 26px;
	max-width: 920px;
}
.dks-filter,
.dks-searchbox {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: rgba(255, 255, 255, .85);
	border-radius: 999px;
	padding: 8px 14px;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.dks-filter {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23bbbbbb' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}
.dks-filter:hover,
.dks-searchbox:hover { border-color: rgba(255, 255, 255, .32); color: #fff; }
.dks-filter:focus,
.dks-searchbox:focus { outline: none; border-color: var(--dks-accent); color: #fff; }
.dks-filter option { color: var(--dk-ink, #1c1816); }
.dks-searchbox {
	cursor: text;
	min-width: 170px;
	flex: 0 1 200px;
}
.dks-searchbox::placeholder { color: rgba(255, 255, 255, .45); }
.dks-reset {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .5);
	font: inherit;
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 6px 4px;
}
.dks-reset:hover { color: #fff; }

/* ============ En-tête de jour (pastille) ============ */
.dks-day-head {
	background: var(--dks-card-strong);
	border: 1px solid var(--dks-divider);
	border-radius: 999px;
	text-align: center;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 12px 12px;
	font-size: 16px;
	color: var(--dks-text);
}

/* ============ Vue desktop : grille alignée par horaire ============ */
.dks-grid-view {
	display: grid;
	gap: 16px;
	/* « stretch » et non « start » : toutes les cartes d'une même bande horaire
	   prennent la hauteur de la plus haute, même quand un cours a moins
	   d'informations qu'un autre. Une rangée irrégulière se lit mal. */
	align-items: stretch;
}
/* Une case = un créneau (jour + heure) ; plusieurs cours simultanés s'y empilent. */
.dks-cell {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}
/* La carte occupe toute la hauteur de sa case ; quand deux cours partagent le
   même créneau, ils se la partagent à parts égales. */
.dks-cell .dks-event { flex: 1 1 auto; }
.dks-list-view { display: none; }

/* ============ Carte de cours ============ */
.dks-event {
	position: relative;
	background: var(--dks-card-bg);
	border: 1px solid var(--dks-divider);
	border-radius: var(--dks-r);
	box-shadow: var(--dks-shadow);
	padding: 16px 16px 14px;
	text-align: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color .15s ease, transform .15s ease;
}
.dks-event:hover {
	border-color: rgba(255, 255, 255, .3);
	transform: translateY(-2px);
}
.dks-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.2;
	color: var(--dks-text);
	overflow-wrap: anywhere;
	hyphens: auto;
}
.dks-time {
	color: var(--dks-accent);
	font-weight: 800;
	font-size: 13px;
	margin-top: 6px;
}
.dks-room {
	display: inline-block;
	max-width: 100%;
	margin-top: 12px;
	padding: 6px 15px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	font-size: 12.5px;
	line-height: 1.2;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Axes de travail (« Bases | Choreo ») — ce qu'on travaille dans le cours. */
.dks-focus {
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--dks-muted);
}

/* Coordonnées : uniquement sur le PDF. */
.dks-print-foot { display: none; }

.dks-info {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.35;
	color: #fff;
	opacity: .92;
}
.dks-levelprof {
	margin-top: 6px;
	font-size: 13px;
	color: #fff;
	opacity: .9;
}
.dks-prof { font-weight: 800; }
.dks-sep { opacity: .5; margin: 0 2px; }
.dks-age {
	margin-top: 6px;
	font-size: 13px;
	color: #fff;
	opacity: .9;
}
.dks-cat {
	/* Le filet a besoin d'air AU-DESSUS : collé à la dernière information, il
	   ressemblait à un soulignement plutôt qu'à une séparation. */
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--dks-divider);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dks-muted);
}

/* État « complet » — pastille centrée en haut, pas de chevauchement */
.dks-badge {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	background: var(--dk-danger, #E11D2E);
	color: #fff;
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 700;
	white-space: nowrap;
}
.dks-event.is-full { opacity: .6; }
.dks-event.is-full { padding-top: 30px; }

/* États vides */
.dks-empty,
.dks-warning {
	text-align: center;
	color: var(--dks-muted);
	padding: 26px;
}

/* Titre affiché uniquement à l'impression / export PDF */
.dks-print-head { display: none; }

/* ============ Mobile : liste par jour ============ */
@media (max-width: 860px) {
	.dks-grid-view { display: none; }
	.dks-list-view { display: block; }
	.dks-day { margin-bottom: 22px; }
	.dks-day .dks-day-head { margin-bottom: 14px; }
	.dks-day .dks-event { margin-bottom: 14px; }
	.dks-searchbox { flex-basis: auto; width: 100%; }
}

/* ============ Impression / export PDF ============ */
/* Les deux plannings restent sur la page, l'un sous l'autre : les boutons ne
   masquent rien, ils amènent au bon planning. */
.dks-room-panel { display: block; scroll-margin-top: 90px; }
.dks-room-panel + .dks-room-panel { margin-top: 54px; }

/* Titre de salle : sépare clairement les deux plannings. */
.dks-room-panel-title {
	display: block;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dks-divider);
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dks-accent);
}

/* Adresse de la salle, sous son nom : discrète à l'écran, elle prend toute sa
   valeur sur le PDF où elle sert de repère pour venir. */
.dks-room-panel-addr {
	margin: -12px 0 18px;
	font-size: 13.5px;
	color: var(--dks-muted);
}

/* Repère visuel quand on vient d'arriver sur ce planning via le bouton. */
.dks-room-panel.is-active .dks-room-panel-title { color: var(--dks-accent); }

/* La salle est déjà nommée par le titre du bloc : pastille redondante. */
.dks-room-panel .dks-room { display: none; }

/* Petits écrans : boutons d'appel à l'action pleine largeur, empilés. */
@media (max-width: 600px) {
	.dks-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.dks-cta {
		width: 100%;
		text-align: center;
		padding: 14px 16px;
		font-size: 13px;
	}
	.dks-room-panel-title { font-size: 18px; }
}

/* ============ Impression / export PDF ============
   La mise en page papier vit dans son propre fichier : assets/css/print.css.
   Il est chargé en media="print" pour l'imprimante, et en media="all" pour
   l'aperçu (?dks_print=1) — mêmes règles, aucune duplication. */


/* Titre du planning, aligné sur les autres sections du site. */
.dks-tt .dks-heading-title {
	font-size: clamp(30px, 4.4vw, 52px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--dks-accent);
	margin: 0 0 clamp(30px, 4vw, 60px);
}
.dks-tt .dks-heading-sub {
	text-align: center;
	color: #fff;
	font-weight: 700;
	margin: 14px auto 0;
	max-width: 760px;
}


/* ============ Alignement des informations d'une carte ============
   Les cartes ont déjà la même hauteur, mais leur contenu flottait : un cours
   sans prof remontait sa catégorie, un cours sans âge décalait tout le reste.
   On empile donc les informations du haut, et on POUSSE le pied (catégorie et
   boutons) contre le bas de la carte — d'une carte à l'autre, ils se
   retrouvent à la même hauteur, quelle que soit la quantité d'informations. */
.dks-event {
	display: flex;
	flex-direction: column;
}
/* La catégorie est poussée contre le bas : d'une carte à l'autre elle se
   retrouve à la même hauteur, quelle que soit la quantité d'informations. */
.dks-event .dks-cat { margin-top: auto; }

/* Le titre occupe deux lignes partout : « HEELS » et « AFRO KIDS / ADOS » ne
   doivent pas décaler l'horaire de l'un par rapport à l'autre. */
.dks-grid-view .dks-title {
	min-height: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 860px) {
	/* En liste, chaque carte se lit seule : plus rien à aligner. */
	.dks-list-view .dks-title { min-height: 0; display: block; }
}


/* Barre de fin de planning : l'inscription à l'année, une fois les cours vus. */
.dks-toolbar-end {
	margin: clamp(34px, 4vw, 56px) 0 0;
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--dks-divider);
}
/* Le seul bouton de cette barre porte l'accent : c'est une action, pas un outil. */
.dks-tool-strong {
	background: var(--dks-accent);
	border-color: var(--dks-accent);
	color: var(--dk-ink, #1c1816) !important;
	/* Même gabarit que ses voisins : c'est la couleur qui le met en avant,
	   pas la taille — trois boutons côte à côte doivent s'aligner. */
}
.dks-tool-strong:hover { background: #ffef70; border-color: #ffef70; }

/*
 * Le bouton des portes ouvertes : blanc plein.
 *
 * Ses voisins sont des contours sur fond sombre ; celui-ci est le seul aplat
 * clair de la rangée, ce qui suffit à le faire passer devant sans le grossir.
 * Le gabarit reste le même — quatre boutons côte à côte doivent s'aligner.
 *
 * Il n'est là que pendant la période des portes ouvertes : c'est le PHP qui
 * décide, pas cette feuille.
 */
.dks-tool-white {
	background: var(--dk-white, #ffffff);
	border-color: var(--dk-white, #ffffff);
	color: var(--dk-ink, #1c1816) !important;
	font-weight: 700;
}

.dks-tool-white:hover,
.dks-tool-white:focus-visible {
	background: var(--dk-yellow, #FFE62B);
	border-color: var(--dk-yellow, #FFE62B);
	color: var(--dk-ink, #1c1816) !important;
}