/* ==========================================================================
   Systeme visuel des tuiles de tableau de bord.

   Avant, chacun des onze composants de tuile portait son propre bloc <style>
   avec la meme regle .card-hover-effect, et chaque libelle etait style en ligne
   (18px gras khaki, centre ici, a gauche la). Resultat : une grille ou deux
   tuiles voisines ne suivaient pas les memes regles. Tout est regroupe ici pour
   que la grille se lise comme un seul systeme.

   Charge apres bootstrap et theme/main.css : les classes .dash-* doivent gagner
   sur .card de Bootstrap a specificite egale.
   ========================================================================== */

:root {
	/* Echelle typographique fixe (rapport ~1.2). Rien sous 12px : les tableaux de
	   bord sont montres au projecteur. */
	--dash-text-meta: 0.75rem;
	--dash-text-body: 0.8125rem;
	--dash-text-title: 0.9375rem;
	--dash-text-lead: 1.125rem;
	--dash-text-page: 1.75rem;
	--dash-text-value: 2rem;

	/* Rythme d'espacement, base 4px. */
	--dash-space-1: 0.25rem;
	--dash-space-2: 0.5rem;
	--dash-space-3: 0.75rem;
	--dash-space-4: 1rem;
	--dash-space-5: 1.5rem;
	--dash-space-6: 2rem;

	--dash-radius: 6px;
	--dash-border-hover: #C9C3B2;

	/* Encre secondaire des tuiles. Plus sombre que --main-font-secondary-color (#8C8674),
	   qui ne tient que 3,6:1 sur blanc : sous le seuil AA de 4,5:1 pour du texte de 13px.
	   Celle-ci donne 5,4:1. */
	--dash-ink-muted: #6F6A5A;

	/* Sortie exponentielle, sous 200ms : le mouvement signale l'etat, il ne se
	   fait pas remarquer. */
	--dash-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   La tuile
   -------------------------------------------------------------------------- */

/* Grille dense des tuiles : remplace le flux flex de .row, qui laissait un trou permanent des
   qu'une tuile ne tenait pas dans le reste de la rangee (deux tiers + une demie = la demie passe
   a la ligne, le tiers restant reste vide). En dense, une tuile plus etroite venue apres remonte
   combler le trou ; l'ordre des positions reste respecte partout ailleurs. */
/* Double classe : a specificite egale, display: grid perdait contre le display: flex de .row et
   la grille restait un flux flex — ou un seul col-4 au contenu large (« Clients diplômés ») debordait
   de son tiers et rejetait la tuile suivante a la ligne, trou a l'appui. */
.row.dash-tile-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-flow: dense;
}

/* Neutralise le dimensionnement flex des .col-* de Bootstrap : en grille, seule l'etendue
   (grid-column) doit decider de la largeur, sinon max-width retrecit la tuile dans sa plage. */
.dash-tile-grid > [class*="col-"] {
	width: auto;
	max-width: none;
}

.dash-tile-grid > .col-4 {
	grid-column: span 4;
}

.dash-tile-grid > .col-6 {
	grid-column: span 6;
}

.dash-tile-grid > .col-8 {
	grid-column: span 8;
}

.dash-tile {
	background-color: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--dash-radius);
	box-shadow: 0 1px 2px rgba(74, 69, 52, 0.04);
	transition: transform 0.18s var(--dash-ease),
	            box-shadow 0.18s var(--dash-ease),
	            border-color 0.18s var(--dash-ease);

	/* Toutes les cartes d'une rangee finissent a la meme hauteur : la colonne Bootstrap est etiree
	   par sa rangee, la carte prend cette hauteur moins les 30px de gouttiere que chaque tuile
	   porte en marge basse en ligne.

	   Cette regle avait ete retiree une premiere fois : les rangees mariaient alors un anneau de
	   250px a une liste classee de 550px, et la carte courte se retrouvait etiree de 300px de vide.
	   Elle revient maintenant que les rangees de la page « General » sont appariees par nature —
	   les trois indicateurs, puis les tuiles courtes, puis les tuiles hautes : le reste absorbe se
	   compte en dizaines de pixels et non en centaines.

	   Hors grille (apercu de la page d'options des tuiles, ou la carte est enveloppee dans un div
	   de hauteur automatique), le pourcentage n'a pas de reference et la regle retombe sur auto. */
	height: calc(100% - 30px);
}

/* Un souleve d'un pixel remplace l'ancien scale(1.02) : agrandir une carte qui
   contient un canvas reechantillonne le graphique et rend son texte flou. */
.dash-tile:hover {
	transform: translateY(-1px);
	border-color: var(--dash-border-hover);
	box-shadow: 0 4px 12px rgba(74, 69, 52, 0.10);

	/* Le transform ci-dessus cree un contexte d'empilement, qui enferme le menu deroulant du « ⋮ » :
	   la tuile voisine, peinte plus tard dans l'ordre du DOM, passait par-dessus le menu ouvert —
	   et le menu ne reapparaissait qu'une fois la souris sortie de la tuile. Le z-index rend la
	   tuile survolee prioritaire sur ses voisines. .card de Bootstrap est deja position: relative. */
	z-index: 2;
}

/* Le contenu suit la carte etiree. Sans cela, .card est bien un conteneur flex en colonne mais ses
   enfants ne grandissent pas : le reste absorbe par la rangee s'accumulait en une bande vide sous
   le dernier element. */
.dash-tile > .col,
.dash-tile > .card-body,
.dash-tile > .card-body > .col {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* A poser sur la zone qui doit absorber le reste — le graphique, jamais l'en-tete. Sur une tuile
   d'anneau, l'anneau se recentre alors dans la hauteur disponible (.dash-chart-split centre deja
   ses enfants) au lieu de laisser le vide en bas. */
.dash-tile-fill {
	flex: 1 1 auto;
	min-height: 0;
}

/* Les tuiles a onglets (PMO/IMT) intercalent tab-content/tab-pane entre la colonne et la zone de
   graphique : sans ce relais flex, .dash-tile-fill ne recoit aucune hauteur et l'anneau reste
   colle en haut d'une carte etiree par sa rangee. Seul le panneau actif est relaye — les panneaux
   inactifs restent masques par Bootstrap. */
.dash-tile .tab-content,
.dash-tile .tab-content > .tab-pane.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* S'applique a la rangee qui porte le titre et le menu de la tuile. Elle fournit le retrait :
   .row de Bootstrap a des marges negatives de 15px qui annulent le padding de .col, si bien qu'un
   titre sans retrait vient coller le bord de la carte. */
.dash-tile-head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dash-space-3);
	padding: var(--dash-space-4) var(--dash-space-3) 0 var(--dash-space-5);
}

/* Typographie seulement : les tuiles de comptage placent leur titre dans une colonne qui gere deja
   son espacement, et le nombre juste dessous doit rester aligne avec le titre. */
.dash-tile-title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: var(--dash-text-title);
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	color: var(--main-font-color);
}

/* Le khaki reste l'accent des actions : quand chaque libelle de carte le porte,
   il ne signale plus rien. L'icone d'aide recule d'un cran. */
.dash-tile-title .dash-tile-info {
	margin-left: var(--dash-space-2);
	color: var(--main-font-secondary-color);
}

.dash-tile-body {
	padding: var(--dash-space-3) var(--dash-space-5) var(--dash-space-5);
}

.dash-tile-plot {
	padding: var(--dash-space-2) 0 0;
}

/* --------------------------------------------------------------------------
   Chiffres
   -------------------------------------------------------------------------- */

/* tabular-nums : sans chiffres a largeur fixe, les compteurs animes
   (kpiCountUp.js) font sautiller la ligne a chaque increment. */
.dash-tile-value {
	margin: 0;
	font-size: var(--dash-text-value);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--main-font-color);
	font-variant-numeric: tabular-nums;
}

/* Les tuiles de comptage detaille centrent leur chiffre : l'intention est conservee, la taille et la
   graisse sont ramenees sur l'echelle commune (avant : 32, 34 et 36px selon la tuile). */
.dash-tile-value--center {
	text-align: center;
	margin-top: var(--dash-space-1);
}

.dash-tile-unit {
	margin-left: var(--dash-space-1);
	font-size: var(--dash-text-meta);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--main-font-secondary-color);
}

/* Le denominateur d'un « 412 / 1 260 » : meme ligne, poids reduit. */
.dash-tile-value-of {
	font-size: var(--dash-text-lead);
	font-weight: 400;
	color: var(--main-font-secondary-color);
}

.dash-tile-meta {
	margin: 0;
	font-size: var(--dash-text-meta);
	color: var(--main-font-secondary-color);
}

/* Corps d'une tuile d'indicateur : nombre, variation, ligne de comparaison. Le retrait gauche est
   celui de .dash-tile-head, pour que le nombre tombe sur la meme verticale que le titre. */
.dash-kpi-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--dash-space-2);
	padding: var(--dash-space-2) var(--dash-space-5) var(--dash-space-4);
}

/* Pastille de variation. Le fond teinte remplace le Badge « Light » de Blazorise : sur fond blanc,
   un badge gris pale ne se distinguait pas du corps de la tuile, et sa couleur de texte dependait
   d'une classe declaree dans le <style> d'un autre composant. */
.dash-tile-delta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--dash-space-1);
	margin: 0;
	padding: 0.125rem var(--dash-space-2);
	border-radius: 999px;
	font-size: var(--dash-text-meta);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Rangs sombres de colors.css et non les rangs 400/500 utilises avant : --G500 sur fond pale ne
   donne que 3,1:1, sous le seuil AA de 4,5:1 pour du texte de 12px. --G600 sur --G100 donne 5,3:1,
   --R600 sur --R50 8,8:1. */
.dash-tile-delta.is-up {
	background-color: var(--G100);
	color: var(--G600);
}

.dash-tile-delta.is-down {
	background-color: var(--R50);
	color: var(--R600);
}

/* Courbe de tendance. Elle se pose bord a bord au bas de la carte : la marge negative annule le
   padding de .col — 10px ici, pas les 15px de Bootstrap 4 : theme/css/main.css est un build
   personnalise a gouttieres de 10px et il est charge apres le bootstrap du CDN, donc il gagne.
   margin-top: auto la maintient collee au bas quand la rangee etire la tuile.

   La couleur est portee par le conteneur et reprise par currentColor dans le trace comme dans les
   arrets du degrade : le trait et l'aire ne peuvent pas diverger. Memes rangs que la pastille. */
.dash-tile-spark {
	margin: auto -10px 0;
	height: 56px;
	border-bottom-left-radius: var(--dash-radius);
	border-bottom-right-radius: var(--dash-radius);
	overflow: hidden;
}

.dash-tile-spark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dash-tile-spark.is-up {
	color: var(--G600);
}

.dash-tile-spark.is-down {
	color: var(--R600);
}

/* Repere de survol de la courbe (chart-plugin.js). Ces deux elements sont crees une seule fois sous
   <body>, hors de l'arbre rendu par Blazor : la pastille doit pouvoir deborder de la tuile, qui est
   en overflow: hidden, et le script n'a ainsi rien a inserer dans un DOM dont Blazor tient le diff.

   pointer-events: none, sinon la pastille passe sous le pointeur et vole le survol a la courbe.
   visibility plutot que display: none : le script mesure la bulle avant de la placer. */
.dash-spark-cursor,
.dash-spark-tip {
	position: fixed;
	z-index: 1080;
	visibility: hidden;
	pointer-events: none;
}

.dash-spark-cursor.is-visible,
.dash-spark-tip.is-visible {
	visibility: visible;
}

/* La marge negative recentre la pastille sur le point : left/top donnent son coin. */
.dash-spark-cursor {
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(74, 69, 52, 0.35);
}

/* Meme chip que les infobulles de Chart.js (chartDefaults.js) : un seul objet visuel pour toutes les
   valeurs survolees du tableau de bord. */
.dash-spark-tip {
	padding: 6px 10px;
	border-radius: 6px;
	background-color: #3A362A;
	color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   En-tete de page
   -------------------------------------------------------------------------- */

.dash-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dash-space-4);
	padding: var(--dash-space-2) var(--dash-space-3) var(--dash-space-5);
}

.dash-header-title {
	margin: 0;
	font-size: var(--dash-text-page);
	font-weight: 700;
	line-height: 1.2;
	color: var(--main-font-color);
}

/* Le nom de la page, subordonne au centre administratif : meme ligne, taille et
   graisse en retrait, separe par un point median. Le centre est ce qui donne son
   sens aux chiffres et ce qui change ; le nom de la page est deja porte par trois
   autres elements de l'ecran. */
.dash-header-page {
	font-size: var(--dash-text-title);
	font-weight: 500;
	color: var(--dash-ink-muted);
}

/* Le point garde la couleur du texte qu'il separe : en --main-border-color, pense
   pour des filets d'un pixel, le glyphe etait invisible et ne laissait qu'un blanc
   inexplique entre les deux mots. */
.dash-header-page::before {
	content: "·";
	margin: 0 var(--dash-space-2);
	color: var(--dash-ink-muted);
}

/* Titre et etat de la page, groupes serre : les pastilles qualifient le titre. */
.dash-header-lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dash-space-3);
	min-width: 0;
}

/* Les actions etaient empilees en float: right, ce qui inversait leur ordre par
   rapport au balisage et les faisait passer a la ligne n'importe comment. */
.dash-header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dash-space-4);
}

/* --------------------------------------------------------------------------
   Pastilles d'etat de page
   --------------------------------------------------------------------------
   « Vue par defaut » ne se lisait que dans le libelle d'une entree de menu, et
   rien n'annoncait qu'une tuile avait ete masquee : elle disparaissait. Deux
   etats que la page portait sans jamais les dire. */

.dash-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--dash-space-1);
	padding: 0.1875rem var(--dash-space-3);
	border: 1px solid var(--main-border-color);
	border-radius: 999px;
	background-color: var(--side-bg-color);
	font-size: var(--dash-text-meta);
	font-weight: 500;
	/* --dash-ink-muted et non --main-font-secondary-color : 5,4:1 contre 3,6:1.
	   A 12px, le second echoue au niveau AA — et ces pastilles sont lues au
	   projecteur. */
	color: var(--dash-ink-muted);
	white-space: nowrap;
}

.dash-chip-button {
	cursor: pointer;
	transition: background-color 0.15s var(--dash-ease), border-color 0.15s var(--dash-ease);
}

.dash-chip-button:hover {
	background-color: var(--main-card-color);
	border-color: var(--dash-border-hover);
}

.dash-chip-button:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Periode de la page
   -------------------------------------------------------------------------- */

.dash-period {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dash-space-2);
}

/* Un intitule, parce que deux controles segmentes voisins — Global/Communaute et
   la periode — se liraient autrement comme un seul. */
.dash-period-label {
	font-size: var(--dash-text-meta);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dash-ink-muted);
}

/* En surimpression sous le controle, et non en ligne dans l'en-tete : les deux
   champs poussaient la rangee du titre a la ligne a chaque ouverture. */
.dash-period-custom {
	position: absolute;
	top: calc(100% + var(--dash-space-2));
	right: 0;
	z-index: 30;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--dash-space-2);
	padding: var(--dash-space-3);
	border: 1px solid var(--main-border-color);
	border-radius: var(--dash-radius);
	background-color: var(--main-bg-color);
	box-shadow: 0 8px 24px rgba(74, 69, 52, 0.14);
	font-size: var(--dash-text-body);
}

/* Voile plein ecran sous le panneau : un clic a cote le referme. Transparent, mais
   il doit couvrir la page entiere pour intercepter le clic. */
.dash-period-backdrop {
	position: fixed;
	inset: 0;
	z-index: 25;
	background: transparent;
}

/* MaskedNullableDatePicker rend un .input-group Bootstrap, qui prend toute la
   largeur offerte : mesure a 500px chacun, les deux champs passaient a la ligne et
   l'ensemble s'etalait sur trois rangees. Une base fixe les remet cote a cote.
   Meme regle pour l'editeur d'une tuile, qui monte les memes composants. */
.dash-period-custom .input-group,
.tile-period-editor .input-group {
	flex: 0 0 11rem;
	width: 11rem;
	border-radius: var(--dash-radius);
}

/* Une seule hauteur pour tout ce qui est sur la rangee. Chacun calculait la sienne :
   le champ depuis le line-height de .form-control, le bouton du calendrier depuis le
   padding de .btn, le bouton de validation depuis le sien — trois hauteurs voisines
   et differentes, ce qui se voit immediatement sur une rangee courte. Padding
   vertical a zero et line-height explicite : la hauteur ne depend plus de la police. */
.dash-period-custom,
.tile-period-editor {
	--period-control-height: 30px;
}

.dash-period-custom .form-control,
.tile-period-editor .form-control,
.dash-period-custom .input-group-append .btn,
.tile-period-editor .input-group-append .btn,
.dash-period-apply {
	height: var(--period-control-height);
	min-height: var(--period-control-height);
	padding-top: 0;
	padding-bottom: 0;
	line-height: calc(var(--period-control-height) - 2px);
	font-size: var(--dash-text-body);
}

/* Champ et bouton du calendrier se lisent comme un seul controle : filet continu,
   coins ronds aux seuls angles externes, pas de couture interne. Les !important
   repondent au style en ligne du composant (fond blanc, filet #DDE2EC hors
   palette), qui gagnerait autrement sur la feuille. */
.dash-period-custom .input-group .form-control,
.tile-period-editor .input-group .form-control {
	min-width: 0;
	border: 1px solid var(--main-border-color);
	border-right: 0;
	border-radius: var(--dash-radius) 0 0 var(--dash-radius);
}

.dash-period-custom .input-group .form-control:focus,
.tile-period-editor .input-group .form-control:focus {
	border-color: var(--main-border-color);
	box-shadow: none;
}

.dash-period-custom .input-group-append .btn,
.tile-period-editor .input-group-append .btn {
	padding-left: var(--dash-space-2);
	padding-right: var(--dash-space-2);
	border: 1px solid var(--main-border-color) !important;
	border-left: 0 !important;
	border-radius: 0 var(--dash-radius) var(--dash-radius) 0;
	background-color: var(--main-bg-color) !important;
	box-shadow: none;
	color: var(--dash-ink-muted);
	transition: color 0.15s var(--dash-ease), border-color 0.15s var(--dash-ease);
}

.dash-period-custom .input-group:hover .form-control,
.tile-period-editor .input-group:hover .form-control,
.dash-period-custom .input-group:hover .input-group-append .btn,
.tile-period-editor .input-group:hover .input-group-append .btn {
	border-color: var(--dash-border-hover) !important;
}

.dash-period-custom .input-group-append .btn:hover,
.tile-period-editor .input-group-append .btn:hover {
	color: var(--main-font-color);
}

/* L'anneau de focus entoure le groupe entier : le champ n'a plus de bord droit, un
   anneau au champ seul s'ouvrirait sur le bouton. */
.dash-period-custom .input-group:focus-within,
.tile-period-editor .input-group:focus-within {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* Meme langage que les boutons d'outils de l'en-tete : fond clair, khaki en encre
   et en filet, remplissage a l'interaction. Le bloc plein khaki pesait plus lourd
   que les deux champs qu'il valide. */
.dash-period-apply {
	padding: 0 var(--dash-space-3);
	border: 1px solid var(--main-bg-active-color);
	border-radius: var(--dash-radius);
	background-color: var(--main-bg-color);
	font-size: var(--dash-text-body);
	font-weight: 500;
	color: var(--main-bg-active-color);
	cursor: pointer;
	transition: background-color 0.15s var(--dash-ease), color 0.15s var(--dash-ease),
	            border-color 0.15s var(--dash-ease);
}

.dash-period-apply:hover {
	background-color: var(--main-bg-active-color);
	color: var(--main-bg-color);
}

.dash-period-apply:active {
	background-color: var(--main-card-active-color);
	border-color: var(--main-card-active-color);
	color: var(--main-bg-color);
}

.dash-period-apply:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Periode d'une tuile
   --------------------------------------------------------------------------
   Une tuile suit la periode de la page ou porte la sienne, et doit toujours dire
   laquelle : deux sources de verite ne sont lisibles que si chaque chiffre
   annonce la fenetre qu'il couvre. D'ou deux apparences franchement differentes.
   Remplace la rangee de deux dates et d'un bouton qui prenait environ 120px dans
   le corps de chaque tuile concernee. */

.tile-period {
	position: relative;
	margin-left: auto;
}

.tile-period-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--dash-space-1);
	padding: 0.125rem var(--dash-space-2);
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font-size: var(--dash-text-meta);
	font-weight: 500;
	color: var(--dash-ink-muted);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s var(--dash-ease), border-color 0.15s var(--dash-ease);
}

button.tile-period-chip:hover {
	background-color: var(--side-bg-color);
	border-color: var(--main-border-color);
}

button.tile-period-chip:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* La tuile derive : le khaki dit que ce chiffre ne repond plus a la commande du
   haut de page. */
.tile-period-chip.is-own {
	border-color: rgba(108, 100, 68, 0.35);
	background-color: rgba(108, 100, 68, 0.10);
	color: var(--main-font-color);
	cursor: default;
}

.tile-period-clear {
	padding: 0 0 0 var(--dash-space-1);
	border: 0;
	background: none;
	font-size: 0.875rem;
	line-height: 1;
	color: var(--dash-ink-muted);
	cursor: pointer;
}

.tile-period-clear:hover {
	color: var(--main-font-color);
}

.tile-period-clear:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* En surimpression : le corps de la tuile est occupe par un graphique, l'editeur
   ne doit pas le pousser vers le bas a chaque ouverture. */
.tile-period-editor {
	position: absolute;
	top: calc(100% + var(--dash-space-2));
	right: 0;
	z-index: 20;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--dash-space-2);
	padding: var(--dash-space-3);
	border: 1px solid var(--main-border-color);
	border-radius: var(--dash-radius);
	background-color: var(--main-bg-color);
	box-shadow: 0 8px 24px rgba(74, 69, 52, 0.14);
	font-size: var(--dash-text-body);
}

/* --------------------------------------------------------------------------
   Controle segmente (filtre Global / Communaute)
   -------------------------------------------------------------------------- */

/* Remplace un Switch Blazorise imbrique dans un .btn : un interrupteur deguise
   en bouton n'annonce ni son etat ni son role. */
.dash-segmented {
	display: inline-flex;
	padding: 2px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--dash-radius);
	background-color: var(--side-bg-color);
}

.dash-segmented button {
	padding: 0.3125rem var(--dash-space-3);
	border: 0;
	border-radius: 4px;
	background-color: transparent;
	font-size: var(--dash-text-body);
	font-weight: 500;
	color: var(--main-font-secondary-color);
	cursor: pointer;
	transition: background-color 0.15s var(--dash-ease), color 0.15s var(--dash-ease);
}

.dash-segmented button.is-active {
	background-color: var(--main-bg-color);
	color: var(--main-font-color);
	box-shadow: 0 1px 2px rgba(74, 69, 52, 0.10);
}

.dash-segmented button:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* Bouton Copilote IA : seule action remplie de la rangee d'en-tete. Il portait btn-primary et une
   icone PNG etiree — un pave sombre plus haut que ses voisins, aux coins carres. Memes metriques
   que les autres boutons de la rangee (le .btn du theme), accent kaki pour le distinguer comme
   l'action de la page. */
.btn.dash-copilot-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #6c6444;
	border-color: #6c6444;
	color: #fff;
}

.btn.dash-copilot-btn:hover,
.btn.dash-copilot-btn:focus {
	background-color: #5a533a;
	border-color: #5a533a;
	color: #fff;
}

.btn.dash-copilot-btn .fa-wand-magic-sparkles {
	font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Rangee de periode (deux dates et un bouton, sous le titre)
   -------------------------------------------------------------------------- */

/* Elle etait posee en padding: 8px en ligne, donc collee au titre : .dash-tile-head ne porte aucun
   espacement bas. Meme retrait et meme espacement de tete que .dash-tile-body et
   .dash-chart-split — la rangee est un controle du corps de la tuile, pas un prolongement de
   l'en-tete. */
.dash-tile-period {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dash-space-2);
	padding: var(--dash-space-4) var(--dash-space-5) 0;
	font-size: var(--dash-text-body);
}

.dash-tile-period-label {
	font-weight: 600;
	color: var(--main-font-color);
}

/* --------------------------------------------------------------------------
   Anneau et sa legende, cote a cote
   -------------------------------------------------------------------------- */

/* Empiles, l'anneau et sa legende faisaient une tuile de 950px de haut pour sept valeurs :
   l'anneau prenait toute la largeur de la tuile, donc 350px de diametre, et la legende sous lui
   etirait chaque ligne sur la pleine largeur — un nom a gauche, son montant 800px plus loin.
   Cote a cote, la tuile tient dans ~300px et chaque nom touche son montant. */
.dash-chart-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* N'agit que si la legende est passee sous l'anneau : l'anneau, seul sur sa rangee, se centre
	   au lieu de rester colle a gauche. Cote a cote, la legende absorbe l'espace libre et rien ne
	   bouge. Le total reste centre : il est dessine dans le canvas, il suit l'anneau. */
	justify-content: center;
	gap: var(--dash-space-5);
	width: 100%;
	padding: var(--dash-space-3) var(--dash-space-5) var(--dash-space-5);
}

/* Taille fixe : l'anneau ne suit plus la largeur de la tuile. 240px laissent de quoi lire les parts
   et loger le total au centre sans descendre sous le plancher de 12px du plugin. */
.dash-chart-ring {
	position: relative;
	flex: 0 0 240px;
	height: 240px;
}

.dash-chart-ring > canvas {
	width: 100%;
	height: 100%;
}

/* La legende occupe la place liberee a droite. Base compressible : sous ~560px de tuile, elle
   repasse sous l'anneau plutot que de se tasser en colonnes illisibles. */
.dash-chart-key {
	flex: 1 1 280px;
	min-width: 0;
}

/* Boite de hauteur fixe pour les graphiques a barres des tuiles (maintainAspectRatio: false,
   Chart.js dimensionne le canvas sur son conteneur). Sans elle, la hauteur suit la largeur de la
   tuile au ratio 2:1 : sur un ecran large, une tuile a mi-ecran donnait un graphique de 850px qui
   depassait le pli. */
.dash-chart-bars {
	position: relative;
	width: 100%;
	/* Plafond de largeur : dans une tuile large sur grand ecran, quatre categories s'etiraient
	   sur toute la tuile en dalles demesurees. Centre, le trace garde les proportions du tableau
	   de bord principal quelle que soit la largeur de la tuile. */
	max-width: 800px;
	margin: 0 auto;
	height: 300px;
	padding: 0 20px;
}

.dash-chart-bars > canvas {
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Page de details d'une tuile
   -------------------------------------------------------------------------- */

/* L'ancien en-tete posait boutons et titre au float, avec tailles et marges en ligne : chaque
   alignement etait un accident. Une rangee flex — identite a gauche, actions a droite, calees sur
   la meme ligne de base — et le flex neutralise les float des enfants. */
.dash-details-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--dash-space-4);
	padding: var(--dash-space-4) var(--dash-space-5);
	background-color: var(--main-bg-color);
	border-bottom: 1px solid var(--main-border-color);
}

.dash-details-lead {
	min-width: 0;
}

/* Retour = navigation, pas action : un lien discret au-dessus du titre plutot qu'un bouton plein
   dans la rangee des actions, ou il rivalisait visuellement avec « Exporter ». */
.dash-details-back {
	display: inline-flex;
	align-items: center;
	gap: var(--dash-space-1);
	font-size: var(--dash-text-body);
	color: var(--dash-ink-muted);
	text-decoration: none;
}

.dash-details-back:hover {
	color: var(--main-font-color);
	text-decoration: underline;
}

/* Meme echelle que le titre de page du tableau de bord : 34px en ligne ici criait plus fort que
   la page d'ou l'on vient. */
.dash-details-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--dash-space-3);
	margin: var(--dash-space-1) 0 0;
	font-size: var(--dash-text-page);
	font-weight: 700;
	line-height: 1.2;
	color: var(--main-font-color);
}

.dash-details-count {
	font-size: var(--dash-text-body);
	font-weight: 600;
	color: var(--main-bg-active-color);
	background-color: #F1EDE4;
	padding: 2px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* La fenetre de la liste, sous le titre : « 7 resultats » ne se comprend qu'avec ses dates. */
.dash-details-period {
	margin: var(--dash-space-1) 0 0;
	font-size: var(--dash-text-body);
	color: var(--dash-ink-muted);
}

.dash-details-actions {
	display: flex;
	align-items: center;
	gap: var(--dash-space-2);
}

/* Une seule action primaire par page : « Exporter » garde le khaki plein, les reglages passent en
   contour. */
.btn.dash-details-primary {
	padding: 6px 12px;
	background-color: var(--main-bg-active-color);
	border: 1px solid var(--main-bg-active-color);
	color: var(--main-color-active-color);
}

.btn.dash-details-primary:hover {
	background-color: var(--main-card-active-color);
	border-color: var(--main-card-active-color);
	color: var(--main-color-active-color);
}

.btn.dash-details-secondary {
	padding: 6px 12px;
	margin: 0;
	background-color: transparent;
	border: 1px solid var(--main-input-border-color);
	color: var(--main-input-border-color);
}

.btn.dash-details-secondary:hover {
	background-color: var(--main-card-color);
	color: var(--main-card-active-color);
}

/* Le bleu Bootstrap (#0288D1) de l'ancien en-tete de tableau jurait avec le reste de la page :
   l'en-tete passe sur les jetons de l'application, avec le khaki en filet d'appui. */
.tabledata th.dash-details-th {
	background-color: var(--main-card-color);
	color: var(--main-font-color);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	min-width: 120px;
	border-bottom: 2px solid var(--main-bg-active-color);
}

/* Rangee de groupe (pages a plusieurs series seulement). */
.tabledata tr.dash-details-group {
	background-color: var(--main-card-color);
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Etats vides et attente
   -------------------------------------------------------------------------- */

/* L'ancien etat vide etait un « Aucune donnee » gris de 1.5rem positionne en
   absolu par-dessus le graphique : il disait qu'il n'y avait rien, jamais
   pourquoi ni quoi faire. */
.dash-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--dash-space-1);
	min-height: 180px;
	padding: var(--dash-space-5);
	text-align: center;
}

.dash-empty-title {
	font-size: var(--dash-text-title);
	font-weight: 600;
	color: var(--main-font-color);
}

.dash-empty-hint {
	max-width: 34ch;
	font-size: var(--dash-text-body);
	line-height: 1.5;
	color: var(--main-font-secondary-color);
}

/* En surimpression sur la zone du graphique : le composant Chart reste monte, on ne peut pas le
   retirer de l'arbre sans invalider le @ref utilise pour le redessiner. */
.dash-empty--overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	min-height: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Listes de barres (repartitions dans une tuile de comptage)
   --------------------------------------------------------------------------
   Remplace des barres de progression Bootstrap rayees et animees : le gris du
   rail et le remplissage pale les rendaient peu lisibles, les rayures animees
   tournaient en boucle sans rien signifier, et le classement alphabetique
   empechait de lire un ordre de grandeur. */

.dash-bar-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dash-space-3);
	font-size: var(--dash-text-body);
}

.dash-bar-label {
	min-width: 0;
	font-weight: 500;
	color: var(--main-font-color);
	overflow-wrap: anywhere;
}

.dash-bar-value {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--main-font-color);
}

/* La part est subordonnee au compte : meme ligne, mais graisse et couleur en retrait, et un ecart
   franc. Collees et de meme graisse, « 287 » et « 14,9 % » se lisaient comme un seul nombre.

   La classe vit ici et non dans TileChartLegend.razor.css : ce dernier est un style scope
   (isolation CSS Blazor), il ne s'applique donc jamais aux barres classees d'un autre composant. */
.dash-bar-share {
	margin-left: var(--dash-space-3);
	font-weight: 400;
	color: var(--dash-ink-muted);
	font-variant-numeric: tabular-nums;
}

.dash-bar-track {
	height: 10px;
	margin: var(--dash-space-1) 0 var(--dash-space-4);
	border-radius: 5px;
	background-color: #EFEDE4;
	overflow: hidden;
}

.dash-bar-fill {
	height: 100%;
	border-radius: 5px;
	/* Une categorie a zero reste visible comme un trait : une barre absente se confond avec un
	   libelle sans donnee. */
	min-width: 2px;
}

/* --------------------------------------------------------------------------
   Tuile « Clients diplomes »
   --------------------------------------------------------------------------
   Deux chiffres de tete, puis deux graphiques et une phrase de concentration.
   Elle n'affichait qu'un « 0 » solitaire au milieu de 200px de blanc : le
   chiffre de la periode ne dit rien sans l'annee qui l'entoure. */

.dash-grad-body {
	position: relative;
	padding: var(--dash-space-2) var(--dash-space-5) var(--dash-space-5);
}

.dash-grad-stats {
	display: flex;
	gap: var(--dash-space-6);
	margin-bottom: var(--dash-space-2);
}

.dash-grad-stat {
	min-width: 0;
}

/* Le chiffre de l'annee prend l'accent de la marque : les deux nombres ont la meme taille, la
   couleur seule dit lequel sert de reference aux graphiques dessous. */
.dash-grad-value-year {
	color: #6C6444;
}

.dash-grad-stat-label {
	margin: var(--dash-space-1) 0 0;
	font-size: var(--dash-text-meta);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--main-font-secondary-color);
}

/* Intertitre de section a l'interieur de la tuile. Plus discret que .dash-tile-title : la tuile ne
   doit pas paraitre porter trois titres de meme rang. */
.dash-grad-sub {
	margin: var(--dash-space-4) 0 var(--dash-space-1);
	font-size: var(--dash-text-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dash-ink-muted);
}

/* Selecteur de millesime (tuile Clients diplomes) : l'apparence de la pastille de periode propre,
   le comportement d'un menu. Neutralise le costume .btn que Blazorise met sur sa bascule. */
.dash-grad-year .dash-grad-year-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--dash-space-1);
	padding: 0.125rem var(--dash-space-2);
	border: 1px solid rgba(108, 100, 68, 0.35);
	border-radius: 999px;
	background-color: rgba(108, 100, 68, 0.10);
	font-size: var(--dash-text-meta);
	font-weight: 500;
	line-height: 1.4;
	color: var(--main-font-color);
	white-space: nowrap;
	cursor: pointer;
}

.dash-grad-year .dash-grad-year-toggle:hover {
	border-color: var(--main-bg-active-color);
	background-color: rgba(108, 100, 68, 0.16);
	color: var(--main-font-color);
}

.dash-grad-year .dash-grad-year-toggle:focus-visible {
	outline: 2px solid var(--main-bg-active-color);
	outline-offset: 1px;
}

/* Hauteur fixe sur le conteneur : Chart.js dimensionne le canvas sur lui (maintainAspectRatio est
   a false). Avec un ratio, la hauteur suivrait la largeur de la tuile et les douze mois se
   tasseraient jusqu'a perdre leurs libelles. */
.dash-grad-chart {
	position: relative;
	height: 150px;
}

/* Cinq tranches d'age nommees en toutes lettres : sous ~150px, Chart.js n'aurait pas la place
   d'une ligne d'etiquette par barre. */
.dash-grad-chart--age {
	height: 156px;
}

/* Seul le graphique mensuel mene quelque part : chaque colonne ouvre la liste des diplomes du mois.
   Les tranches d'age n'ont aucune vue de details, leur curseur ne doit donc rien promettre. */
.dash-grad-chart--months {
	cursor: pointer;
}

/* L'etat vide est en surimpression (.dash-empty--overlay) : il lui faut un bloc positionne et une
   hauteur, sinon il se centre sur un conteneur plat et sort de la tuile. */
.dash-grad-empty {
	position: relative;
	min-height: 200px;
}

.dash-grad-callout {
	margin: var(--dash-space-4) 0 0;
	padding: var(--dash-space-2) var(--dash-space-3);
	border: 1px solid var(--main-border-color);
	border-radius: var(--dash-radius);
	background-color: var(--main-card-color);
	font-size: var(--dash-text-body);
	line-height: 1.5;
	color: var(--main-font-color);
}

.dash-grad-exporting {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	pointer-events: none;
	text-align: center;
}

.dash-grad-exporting p {
	margin-top: var(--dash-space-2);
	font-weight: 700;
	color: #6C6444;
}

.dash-slow-note {
	font-size: var(--dash-text-meta);
	line-height: 1.5;
	color: var(--main-font-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
	.dash-tile,
	.dash-segmented button {
		transition: none;
	}

	.dash-tile:hover {
		transform: none;
	}
}