@charset "utf-8";
/* ================================================================
   DPSS — Styles metier (planning, grilles admin, hub, pages annexes)
   ================================================================
   Sommaire :
     1. Variables metier planning
     2. Hub / Tableau de bord admin
          2a. En-tete gestion et loading
          2b. Navigation hub (liens admin)
     3. Fiches & formulaires admin
     4. Connexion
     5. Planning
          5a. Structure generale (grille, scroll, table)
          5b. Separateurs de groupe
          5c. Cellules jour et selects
          5d. Codes couleur et badges
          5e. Compactage et navigation
          5f. Export PDF et agenda ICS
          5g. Panneau legende
          5h. Synopsis
          5i. Collab-head et separateurs
          5j. Colonnes sticky
          5k. Selection et filtres
          5l. En-tetes annee (mois, jours, today)
          5m. Cellules annee et commentaires
          5n. Lignes heures
          5o. Bordures et separations visuelles
          5p. Z-index et empilement sticky
          5q. Palette couleurs Syn
     6. Pages annexes
          6a. Gestion planning (codes)
          6b. Effectifs par secteur
          6c. Graphiques (codes absences, courbes)
          6d. Tableaux compacts
          6e. Grille detail effectifs
          6f. Test & feedback
          6g. Annuaire (numéros importants)
          6h. Organisation — libellés organigramme
          6i. Backup BDD — tableaux colonnes ajustees
   - Format : onglets reels, largeur de tabulation 4 (Prettier : --tab-width 4 --use-tabs)
   - Variables --planning-syn-* restent sur .dpss-app pour la retrocompatibilite des pastilles.

   Breakpoints (cf. dpss-shell.css pour la source de verite) :
     480px — Tres petit ecran / telephone
     768px — Tablette / petit ecran
     900px — Breakpoint principal : tablette large / petit desktop
    1100px — Desktop reduit
     901px — Desktop large (complementaire de 900px)
   ================================================================ */

/* ============================================================
   1. VARIABLES METIER PLANNING
   ============================================================ */

.dpss-app {
	/* Variables métier planning conservées ici pour compatibilité descendante. */
	--planning-syn-crj-bg: #bfe2ff;
	--planning-syn-crn-bg: #8fb5de;
	--planning-syn-bij-bg: #d6efb3;
	--planning-syn-bin-bg: #b8e986;
	--planning-syn-avj-bg: #ffe8b3;
	--planning-syn-row-bg: #dce6f0;
	--planning-syn-label-default-bg: var(--dpss-planning-pill-border);
}
/* ============================================================
   2. HUB / TABLEAU DE BORD ADMIN
   ============================================================ */

/* ── 2a. En-tete gestion et loading ── */
#gestion.header {
	text-align: left;
}
a.planning-header-settings-link {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	border: 1px solid var(--dpss-planning-border-accent);
	border-radius: 4px;
	background: var(--dpss-planning-settings-surface);
	color: var(--dpss-planning-heading);
}
a.planning-header-settings-link:hover {
	background: var(--dpss-planning-settings-hover);
}
.planning-page-loading-strip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	vertical-align: middle;
	font-size: 9px;
	font-weight: 600;
	color: var(--dpss-planning-ink);
}
.planning-page-loading-strip[hidden] {
	display: none !important;
}
.planning-page-loading-strip-bar {
	display: inline-block;
	width: 60px;
	height: 4px;
	border-radius: 999px;
	border: 1px solid var(--dpss-planning-muted-blue-border);
	background: linear-gradient(
		90deg,
		var(--dpss-planning-gradient-a) 0%,
		var(--dpss-planning-gradient-b) 35%,
		var(--dpss-planning-ink) 50%,
		var(--dpss-planning-gradient-b) 65%,
		var(--dpss-planning-gradient-a) 100%
	);
	background-size: 180% 100%;
	animation: planning-loading-strip-move 1.05s linear infinite;
}
.planning-page-loading-strip-text {
	white-space: nowrap;
}
@keyframes planning-loading-strip-move {
	0% {
		background-position: 180% 0;
	}
	100% {
		background-position: -80% 0;
	}
}
.admin-links {
	margin: 0;
	padding: 0;
	text-align: left;
}
.admin-links li {
	border: solid 1px var(--dpss-planning-hub-border);
	border-radius: 5px;
	background-color: var(--dpss-planning-hub-bg);
	margin: 6px 0;
	padding: 8px 10px;
}
/* ── 2b. Navigation hub (liens admin) ── */
.admin-links a {
	color: var(--dpss-planning-link);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.45;
	text-decoration: underline;
	text-decoration-color: rgba(6, 48, 88, 0.5);
	text-underline-offset: 3px;
	display: inline-block;
	padding: 2px 0;
}
.admin-links a:hover,
.admin-links a:focus-visible {
	color: var(--dpss-planning-link-hover);
	text-decoration-color: var(--dpss-planning-link-hover);
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: 4px;
	padding: 2px 6px;
	margin: 0 -6px;
	outline: none;
}
.admin-links > li > strong {
	display: block;
	margin: 0 0 6px 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dpss-planning-section-label);
}
.admin-links > li > a > strong {
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	font-weight: 700;
	color: inherit;
}
.admin-links--nested {
	margin-top: 6px;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}
.admin-links--nested > li {
	border: none;
	box-shadow: inset 3px 0 0 var(--dpss-planning-border-accent);
	background-color: rgba(255, 255, 255, 0.45);
	border-radius: 0 5px 5px 0;
	margin: 6px 0;
	padding: 8px 10px 8px 14px;
}
.admin-links--nested > li:first-child {
	margin-top: 4px;
}
.admin-page .admin-note a {
	font-weight: 600;
	color: var(--dpss-planning-note-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.admin-page .admin-note a:hover,
.admin-page .admin-note a:focus-visible {
	color: var(--dpss-planning-note-link-hover);
	text-decoration-thickness: 2px;
	outline: none;
}
.admin-page .admin-note {
	color: var(--dpss-text-muted);
	font-size: 11px;
	line-height: 1.5;
	max-width: 88ch;
}
.admin-message-success {
	color: #0a7a1f;
	font-weight: bold;
}
/* ============================================================
   3. FICHES & FORMULAIRES ADMIN
   ============================================================ */

/* Fiche collaborateur (consultation) : interlignes resserrees */
.admin-page .admin-readonly-fiche--collab {
	display: grid;
	gap: 2px;
	max-width: 42rem;
}
.admin-page .admin-readonly-fiche--collab > p {
	margin: 0;
	line-height: 1.35;
	font-size: 13px;
}
.admin-page .admin-readonly-fiche--collab > p.admin-note {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.3;
}
.admin-toolbar {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 6px;
}
.admin-toolbar form {
	display: inline-block;
	margin-right: 8px;
}
.admin-page label {
	display: inline-block;
	margin: 3px 8px 3px 0;
	font-size: 12px;
}
/* ============================================================
   4. CONNEXION
   ============================================================ */

/* Formulaire compact */
.login-form-compact {
	margin: 2px 0;
}
.login-form-compact__message {
	margin: 2px 0 8px;
	line-height: 1.2;
}
.login-form-compact__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	padding: 15px 0;
}
.login-form-compact__row label {
	margin: 0;
	white-space: nowrap;
}
/* ≤480px : téléphone */
@media (max-width: 480px) {
	.login-form-compact__row {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 10px 0;
	}
	.login-form-compact__row label {
		white-space: normal;
	}
	.admin-page .login-form-compact input[type="text"],
	.admin-page .login-form-compact input[type="password"] {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.login-form-compact__row input.envoyer {
		width: 100%;
		box-sizing: border-box;
		margin-top: 8px;
	}
}
.admin-page .login-form-compact input[type="text"],
.admin-page .login-form-compact input[type="password"] {
	min-width: 96px;
}

/* ── Bouton oeil (mot de passe) ── */
.login-eye-btn {
	width: 34px;
	padding: 0;
	line-height: 0;
}
.login-eye-btn svg {
	pointer-events: none;
}
.dpss-password-field {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
}
.dpss-password-field input[type="password"],
.dpss-password-field input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
}
.profile-password-form {
	display: grid;
	gap: 10px;
	max-width: 420px;
	margin-bottom: 10px;
}
.profile-password-form label {
	display: block;
	font-weight: 600;
	margin: 0 0 2px 0;
}
.admin-page th {
	background-color: #c7d8eb;
	border: solid 1px var(--dpss-planning-pill-border);
	padding: 4px 6px;
}
.admin-page td {
	padding: 4px 6px;
	vertical-align: middle;
}
.admin-page .admin-table--years-publication th {
	font-size: 11px;
	font-weight: 700;
}
.admin-page .admin-table--years-publication td {
	font-size: 11px;
	vertical-align: middle;
}
.admin-page .admin-table--years-publication td form {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 0 0 6px;
}
.admin-page .admin-table--years-publication td form > button,
.admin-page .admin-table--years-publication td form > input[type="submit"] {
	margin-top: 0 !important;
	align-self: center;
}
.admin-page .admin-table--years-publication td .admin-note,
.admin-page .admin-table--years-publication td .admin-message-success {
	font-size: 11px;
	line-height: 1.2;
	vertical-align: middle;
}
.admin-page .admin-table--years-publication td .admin-years-publication-cell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--dpss-form-control-h);
}
.admin-page .admin-table--years-publication td .admin-years-publication-year {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
	vertical-align: middle;
}
.admin-page .admin-table--years-publication tbody td:first-child {
	vertical-align: middle !important;
	padding-top: 0;
	padding-bottom: 0;
}
.admin-table-wrap {
	max-height: 200px;
	overflow: auto;
}
/* ≤900px : breakpoint principal */
@media (max-width: 900px) {
	.admin-table-wrap {
		max-height: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.admin-table--compact {
		font-size: 11px;
	}
	.admin-table--compact th,
	.admin-table--compact td {
		font-size: 11px;
		padding: 4px 6px;
		text-align: left;
	}
}
.admin-table-wrap--expanded {
	max-height: none;
	overflow: visible;
}
/* Tableau collaborateurs (consulter/modifier) : thead sticky dans une zone scrollable.
 * La hauteur max est calculee par JS pour s'ajuster a la fenetre. */
.admin-table-wrap--sticky-head {
	max-height: 50vh;
	overflow-y: auto;
	overflow-x: auto;
}
.admin-table-wrap--sticky-head thead {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #dce4ed;
}
.admin-page .admin-table th,
.admin-page .admin-table td {
	vertical-align: middle;
}
.admin-page .admin-table--sectors th,
.admin-page .admin-table--compact th {
	font-size: 12px;
	vertical-align: middle;
	text-align: left;
}
.admin-page .admin-table--sectors td,
.admin-page .admin-table--compact td {
	padding: 5px 10px;
	font-size: 13px;
	vertical-align: middle;
	text-align: left;
}
.admin-page .admin-table--sectors .sector-label,
.admin-page .admin-table--sectors .sector-count-val {
	display: inline-block;
	vertical-align: middle;
	line-height: var(--dpss-form-control-h);
}
.admin-page .admin-table--codes th,
.admin-page .admin-table--codes td {
	font-size: 11px;
	padding: 3px 6px;
	vertical-align: middle;
}
.admin-page .admin-table--codes thead {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #dce4ed;
}
.admin-page .admin-table--codes thead th {
	background: #dce4ed;
}
.admin-page .admin-table--codes td span[style*="background-color"] {
	width: 1rem !important;
	height: 0.7rem !important;
	vertical-align: middle;
}
.admin-table--compact tr.admin-row-selected td {
	background-color: var(--dpss-surface) !important;
	border-top: 1px solid var(--dpss-planning-border-accent);
	border-bottom: 1px solid var(--dpss-planning-border-accent);
}
.admin-table--compact tr.admin-row-selected td:first-child {
	border-left: 2px solid var(--dpss-planning-border-accent);
}
.admin-table--compact tr.admin-row-selected td:last-child {
	border-right: 2px solid var(--dpss-planning-border-accent);
}
.admin-table--compact tr.admin-row-selected:hover td {
	background-color: var(--dpss-surface) !important;
}
/* ============================================================
   5. PLANNING
   ============================================================ */

/* ── 5a. Structure generale : grille, scroll, table ── */
/* dpss-shell définit html { scroll-behavior: smooth } ; ce comportement est hérité par
 * .dpss-page-shell__scroll. Le focus sur un champ (ligne indications, etc.) déclenche alors
 * un scroll document fluide très long dans Firefox — indépendant de .planning-table-scrollport. */
html:has(#planning_main_scroll) {
	scroll-behavior: auto;
}
.dpss-page-shell__scroll:has(#planning_main_scroll) {
	scroll-behavior: auto;
}
.planning-year-scroll {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: visible;
	padding: 0 0 10px 0;
	margin: 0 0 8px 0;
	border: 1px solid var(--dpss-planning-pill-border);
	border-radius: 4px;
	background: #f6f9fc;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
/* Grille année : scroll interne sur .planning-table-scrollport (sinon sticky s’ancre sur .dpss-page-shell__scroll) */
.admin-card--planning-grid .planning-year-scroll {
	display: block;
	overflow: hidden;
	border-radius: 4px;
}
.admin-card--planning-grid .planning-table-scrollport {
	width: 100%;
	max-width: 100%;
	/* Deux max-height : repli 55vh puis cible viewport (sticky = ancré sur CE bloc, pas sur la page) */
	max-height: 55vh;
	max-height: min(65vh, calc(100dvh - var(--planning-grid-v-offset, 300px)));
	min-height: 120px;
	box-sizing: border-box;
	overflow-x: scroll;
	overflow-y: scroll;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	border-radius: 3px;
	background: var(--dpss-surface);
	position: relative;
	/* will-change: transform retiré : avec une grille très large, promote trop de calques et peut ralentir Firefox. */
	-webkit-overflow-scrolling: touch;
	/* Pas de scroll animé au focus (héritage possible de .planning-year-scroll { scroll-behavior: smooth }) : sinon Firefox met plusieurs secondes à amener la ligne indications au visible. */
	scroll-behavior: auto;
	/* Marge sous la derniere ligne (scroll vertical max + barre horizontale) */
	padding-bottom: 2rem;
}
.admin-card--planning-grid .planning-hscroll-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 4px 6px;
	margin: 0 0 3px 0;
	padding: 0 4px;
	border: 1px solid var(--dpss-planning-pill-border);
	border-radius: 3px;
	background: linear-gradient(to bottom, #eef4fa, #e4ecf5);
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(40, 70, 100, 0.08);
	min-height: 0;
	position: relative;
}
.admin-card--planning-grid .planning-hscroll-toolbar-label {
	flex: 0 1 auto;
	text-align: center;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	color: #2a4058;
	white-space: nowrap;
}
.admin-card--planning-grid .planning-hscroll-toolbar-label--hidden {
	display: none;
}
.admin-card--planning-grid .planning-hscroll-toolbar--hidden {
	display: none;
}
.admin-card--planning-grid .planning-hscroll-btn {
	flex: 0 0 auto;
	min-width: 22px;
	min-height: 18px;
	padding: 0 5px;
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid #5a7fa0;
	border-radius: 3px;
	background: var(--dpss-surface);
	color: #153050;
	box-shadow: 0 1px 2px rgba(30, 55, 85, 0.1);
}
.admin-card--planning-grid .planning-hscroll-btn--hidden {
	display: none;
}
.admin-card--planning-grid .planning-hscroll-btn:hover {
	background: var(--dpss-planning-settings-surface);
	border-color: #2d6da3;
}
.admin-card--planning-grid .planning-hscroll-btn:active {
	transform: translateY(1px);
}
.planning-year-scroll .planning-table-scrollport {
	border: none;
	scroll-behavior: auto;
}
.planning-wrap {
	overflow-x: auto;
	overflow-y: visible;
	max-width: 100%;
	border: 1px solid var(--dpss-planning-pill-border);
	background: var(--dpss-surface);
}
.planning-table {
	border-collapse: collapse;
	min-width: 1100px;
	width: max-content;
	font-size: 11px;
}
/* ≤900px : breakpoint principal */
@media (max-width: 900px) {
	.planning-table {
		min-width: 880px;
		font-size: 10px;
	}
}
.planning-table th,
.planning-table td {
	border: 1px solid var(--dpss-planning-hub-border);
	padding: 2px 3px;
	white-space: nowrap;
}
.planning-table th {
	background: #c7d8eb;
	position: sticky;
	top: 0;
	z-index: 2;
}
.planning-table th.planning-day-head {
	vertical-align: top;
	text-align: center;
	width: 40px;
	max-width: 40px;
	min-width: 40px;
	white-space: normal;
	line-height: 1.15;
	overflow: hidden;
	box-sizing: border-box;
}
.planning-day-num {
	display: block;
	font-weight: bold;
	font-size: 12px;
}
.planning-day-wd {
	display: block;
	font-size: 10px;
	color: #3a4a5a;
}
.planning-day-hl {
	display: block;
	font-size: 9px;
	font-weight: normal;
	color: #5a3d00;
	margin-top: 2px;
	line-height: 1.1;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	max-width: none;
	word-break: break-word;
}
.planning-table th.planning-col-weekend,
.planning-table td.planning-col-weekend {
	background: #fff1e6 !important;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 127, 80, 0.14) 0,
		rgba(255, 127, 80, 0.14) 4px,
		transparent 4px,
		transparent 10px
	) !important;
	box-shadow: inset 0 0 0 1px rgba(225, 89, 36, 0.24);
}
.planning-table th.planning-col-holiday,
.planning-table td.planning-col-holiday {
	background: #ffd9bf !important;
	background-image: none !important;
	box-shadow: inset 0 0 0 1px rgba(205, 78, 28, 0.36);
}
.planning-table tbody tr.planning-row--grp-hidden {
	display: none !important;
}
/* ── 5b. Separateurs de groupe ── */
.planning-table tbody tr.planning-row-grp-sep {
	line-height: 1;
}
.planning-table tbody tr.planning-row-grp-sep td.planning-col-grp-sep--days {
	padding: 0;
	line-height: 1;
	/* Aligné sur les cellules figées (1–3) pour une même bande horizontale */
	background: #dce6f0;
	border-top: 1px solid #c5d4e3;
	border-bottom: 1px solid #dde6ef;
	vertical-align: middle;
}
/* Séparateur Groupe: cellules figées identiques aux colonnes collaborateurs */
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--sticky-cell {
	z-index: 5;
	padding: 1px 5px;
	line-height: 1;
	font-size: 9px;
	font-weight: 600;
	color: #2a4a6a;
	background: #dce6f0;
	border-top: 1px solid var(--dpss-planning-pill-border);
	border-bottom: 1px solid #c5d4e3;
	letter-spacing: 0.01em;
	text-align: left;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--sticky-cell[data-sticky="agent"] {
	border-right-color: transparent;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--sticky-cell[data-sticky="role"] {
	border-left-color: transparent;
	border-right-color: var(--dpss-planning-pill-border);
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--sticky-cell[data-sticky="syn"] {
	box-shadow: none;
}
.planning-grp-js-empty[hidden] {
	display: none !important;
}
/* ── 5c. Cellules jour et selects ── */
.planning-table td.planning-cell {
	padding: 1px;
}
.planning-table td.planning-cell select {
	/* Même gabarit que les pastilles lecture seule (ligne collaborateur, Mon planning). */
	min-width: 3.25em;
	width: auto;
	max-width: 100%;
	height: 18px;
	min-height: 18px;
	max-height: 18px;
	border: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-align-last: center;
	line-height: 1;
	padding: 0 2px;
	border-radius: 3px;
	text-overflow: clip;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none;
	box-sizing: border-box;
}
/* ── 5d. Codes couleur et badges ── */
.planning-table td.planning-cell select.planning-cell-code-select {
	--planning-sel-bg: #ffffff;
	--planning-sel-fg: #000000;
	--planning-sel-border: 1px solid rgba(0, 0, 0, 0.2);
	background: var(--planning-sel-bg) !important;
	color: var(--planning-sel-fg) !important;
	border: var(--planning-sel-border) !important;
}
/* Badge lecture seule (même logique : variables depuis planning.php, pas d’inline background/color). */
.planning-table.planning-table--year tbody td.planning-cell .planning-badge.planning-badge--cell-code {
	--planning-badge-bg: #ffffff;
	--planning-badge-fg: #000000;
	--planning-badge-border: 1px solid rgba(0, 0, 0, 0.2);
	background: var(--planning-badge-bg) !important;
	color: var(--planning-badge-fg) !important;
	border: var(--planning-badge-border) !important;
}
.planning-table.planning-table--year tbody td.planning-cell .planning-badge.planning-badge--cell-code.planning-badge--cell-code-ee {
	--planning-badge-border: 1px solid #000;
}

/* Badge de base */
.planning-badge {
	display: inline-block;
	padding: 2px 6px;
	margin: 0 4px 4px 0;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	font-weight: bold;
	font-size: 11px;
}
/* ── 5d. Codes couleur et badges ── */

.planning-legend-inner {
	margin-top: 12px;
	padding-top: 4px;
	overflow-x: auto;
	box-sizing: border-box;
}
.admin-card--planning-legend .planning-legend-plan {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	align-items: flex-start;
	margin-top: 0;
	width: 100%;
}
.admin-card--planning-legend .planning-legend-plan > .planning-legend-section {
	flex: 0 0 calc(50% - 12px);
	min-width: 0;
	max-width: calc(50% - 12px);
}
/* ≤900px : une seule colonne */
@media (max-width: 900px) {
	.admin-card--planning-legend .planning-legend-plan {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}
	.admin-card--planning-legend .planning-legend-plan > .planning-legend-section {
		flex: 1 1 auto;
		max-width: 100%;
	}
}
.planning-legend-section-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	color: #5a6a7a;
	letter-spacing: 0.02em;
}
.planning-legend-section-title--sub {
	margin-top: 16px;
	margin-bottom: 8px;
	font-style: normal;
	font-weight: 600;
	color: #3a4a5a;
}
.planning-legend-row {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-bottom: 5px;
	box-sizing: border-box;
}
.planning-legend-row .planning-badge.planning-legend-code {
	margin: 0;
	border-radius: 4px 0 0 4px;
	border-right: 0;
	min-width: 3.25em;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 11px;
}
.planning-legend-label {
	flex: 1 1 auto;
	background: #1a5d6f;
	color: #ffffff;
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.3;
	border-radius: 0 4px 4px 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-left: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.planning-legend-hours {
	flex: 0 0 auto;
	margin-left: 8px;
	padding: 3px 8px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	background: #1a5d6f;
	color: #ffffff;
	border-radius: 3px;
	white-space: nowrap;
}
.planning-legend-orphans .planning-legend-row:last-child {
	margin-bottom: 0;
}
.planning-root {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}
/* Ancienne classe planning-root--booting (visibility:hidden) : retirée du HTML pour afficher la grille même si planning.js est bloqué. */
#planning-root.planning-root--booting {
	visibility: visible !important;
}
/* ── 5e. Compactage et navigation ── */
#planning-root .admin-card {
	padding: 6px 8px;
	margin: 6px 0;
}
#planning-root .admin-card h4 {
	margin: 0 0 6px 0;
	padding: 4px 8px;
}
.planning-compact-tools {
	margin: 0 0 14px;
	padding: 2px 5px;
	border: 1px dashed #a8bdd3;
	background: #f6fbff;
	border-radius: 4px;
}
.planning-compact-tools-main {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 2px 8px;
	align-items: center;
	font-size: 10px;
	line-height: 1.1;
}
/* ≤900px : breakpoint principal */
@media (max-width: 900px) {
	.planning-compact-tools-main {
		flex-wrap: wrap;
		gap: 4px;
	}
}
.planning-compact-tools-left {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	min-width: 0;
	flex: 1 1 auto;
}
.planning-compact-block--pdf {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	margin-bottom: auto;
}
.planning-compact-block {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.planning-compact-block--year {
	gap: 6px;
}
.planning-year-current {
	font-size: 1.55em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #0f2844;
	line-height: 1;
}
.planning-year-nav.planning-display-pill {
	min-width: 22px;
	padding: 0 5px;
	font-size: 12px;
	font-weight: 700;
}
.planning-compact-months {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	white-space: normal;
	gap: 4px 6px;
}
.planning-compact-block--views {
	margin-left: 16px;
	margin-right: 10px;
}
.planning-compact-tools a.is-active {
	font-weight: 700;
	text-decoration: none;
}
.planning-module-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #2c8a3f;
}
.planning-module-status-dot--dirty {
	background: #d77b1f;
}
.planning-module-status-dot--saving {
	background: #385b82;
	animation: dpss-planning-status-pulse 0.9s ease-in-out infinite;
}
@keyframes dpss-planning-status-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.92);
	}
}
.planning-module-status-text {
	font-weight: 600;
}
.planning-module-time {
	color: #385b82;
	font-variant-numeric: tabular-nums;
}
.planning-module-sep {
	color: #86a1bf;
}
.planning-pdf-export-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 11px;
	line-height: 1.2;
	margin: 0;
}
.planning-pdf-select {
	font-size: 11px;
	max-width: 200px;
}
.planning-pdf-export-form--compact {
	flex-wrap: nowrap;
	gap: 4px 6px;
	font-size: 10px;
	padding: 0;
	align-items: center;
	margin: 0;
	display: inline-flex;
	vertical-align: middle;
}
/* ≤900px : breakpoint principal */
@media (max-width: 900px) {
	.planning-pdf-export-form--compact {
		flex-wrap: wrap;
	}
	.planning-pdf-export-form--compact .planning-pdf-select {
		width: 100px !important;
		min-width: 100px !important;
		max-width: 100px !important;
	}
}
.planning-pdf-export-form--compact > button,
.planning-pdf-export-form--compact > input[type="submit"] {
	margin-top: 0;
	margin-bottom: 0;
	align-self: center;
}
.planning-pdf-export-form--compact .planning-pdf-select {
	font-size: 13px !important;
	padding: 0 6px !important;
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	height: 22px !important;
	min-height: 18px !important;
	line-height: 1 !important;
	-webkit-appearance: menulist;
	appearance: auto;
	text-align: center;
	text-align-last: center;
	margin: 0;
	vertical-align: middle;
	align-self: center;
}
.planning-pdf-export-form--compact .planning-pdf-select option {
	text-align: center;
}
button.planning-display-pill.planning-pdf-submit {
	cursor: pointer;
}
.planning-display-pill.planning-pdf-submit--compact {
	min-height: 22px;
	padding: 0 7px;
	font-size: 11px;
	line-height: 1.1;
	font-weight: 700;
	border-color: #2d6da3;
	background: #d8e8f7;
	color: #10263d;
	align-self: center;
}
.planning-display-pill.planning-pdf-submit--compact:hover {
	background: #c9dff0;
	color: #0b1f33;
}
/* ── 5f. Export PDF et agenda ICS ── */
.planning-agenda-details {
	border: 1px solid #ccdbe8;
	border-radius: 4px;
	padding: 3px 6px;
	background: #f2f6fa;
}
.planning-agenda-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--dpss-planning-heading);
}
.planning-agenda-details-body {
	margin-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	align-items: center;
}
#planning-root .planning-main {
	width: 100%;
	min-width: 0;
	min-height: 0;
	overflow: visible;
}
.planning-display-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 18px;
	padding: 0 7px;
	border-radius: 999px;
	border: 1px solid #8ea8c0;
	background: #f6f9fc;
	color: var(--dpss-planning-heading);
	text-decoration: none;
	line-height: 1.05;
	font-size: 11px;
}
.planning-display-pill:hover {
	background: #e8f0f8;
}
.planning-display-pill.is-active {
	font-weight: 700;
	border-color: #2d6da3;
	background: #d8e8f7;
	text-decoration: none;
}
.planning-month-block {
	margin-bottom: 1.25em;
}
.planning-year-scroll .planning-month-block-title {
	margin-top: 0;
}
.planning-form-add-year label {
	margin-right: 6px;
}
.planning-form-add-year input[type="number"] {
	width: 5.5em;
	margin-right: 8px;
}
.admin-card--planning-grid .planning-grp-filter-hint {
	margin: 0 0 4px;
	padding: 0;
	font-size: 11px;
	line-height: 1.25;
	color: var(--dpss-planning-heading);
}
/* ── 5g. Panneau legende ── */
.planning-legend-overlay[hidden],
.planning-legend-panel[hidden] {
	display: none !important;
	pointer-events: none !important;
}
.planning-legend-overlay {
	position: fixed;
	inset: 0;
	z-index: 120400;
	background: rgba(15, 35, 55, 0.45);
	backdrop-filter: blur(1px);
	pointer-events: auto;
}
body.planning-legend-ui-open {
	overflow: hidden;
}
.planning-legend-panel {
	position: fixed;
	z-index: 120410;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(880px, calc(100vw - 24px));
	max-height: min(78vh, 720px);
	margin: 0;
	padding: 12px 14px 14px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	border-radius: 8px;
	border: 1px solid var(--dpss-border-light, #c5d6e8);
	background: #f8fafc;
}
.planning-legend-panel .planning-legend-inner {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	margin-top: 8px;
	padding-top: 6px;
	padding-right: 4px;
	-webkit-overflow-scrolling: touch;
}
.planning-legend-panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	flex-shrink: 0;
}
.planning-legend-panel-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--dpss-text);
	line-height: 1.25;
}
.planning-legend-panel-close {
	flex: 0 0 auto;
	min-width: 32px;
	min-height: 32px;
	margin: -4px -6px 0 0;
	padding: 0;
	border: 1px solid #94a8bc;
	border-radius: 6px;
	background: var(--dpss-surface);
	color: #334155;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.planning-legend-panel-close:hover {
	background: #eef4fa;
	border-color: #2d6da3;
}
.planning-legend-panel-lead {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.35;
	color: #475569;
	flex-shrink: 0;
}
.planning-synopsis-legend-wrap {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}
.planning-legend-toggle-pill {
	max-width: 100%;
}
.planning-legend-toggle-pill:hover {
	background: #c9dff0;
}
.planning-legend-toggle-pill.is-active {
	background: #bae6fd;
	border-color: #0369a1;
	box-shadow: inset 0 0 0 1px rgba(3, 105, 161, 0.25);
}
.planning-legend-toggle-pill:focus-visible {
	outline: 2px solid #0284c7;
	outline-offset: 2px;
}
/* ── 5h. Synopsis ── */
.planning-wrap--year {
	border: 1px solid var(--dpss-planning-pill-border);
	border-radius: 4px;
	background: var(--dpss-surface);
}
.planning-wrap--year:not(.planning-table-scrollport) {
	overflow: visible;
}
.admin-card--planning-grid .planning-table-scrollport.planning-wrap--year {
	border: none;
	border-radius: 0;
}
/* Réf. scroll pour sticky : WebKit + empilement au-dessus du tbody */
.admin-card--planning-grid
	.planning-table-scrollport.planning-wrap--year
	.planning-table--year
	thead
	th {
	position: -webkit-sticky;
	position: sticky;
}
.admin-card--planning-grid
	.planning-table-scrollport.planning-wrap--year
	.planning-table--year
	thead
	tr.planning-head-months
	th.planning-month-span {
	z-index: 12;
}
.admin-card--planning-grid
	.planning-table-scrollport.planning-wrap--year
	.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head {
	z-index: 11;
}
.admin-card--planning-grid
	.planning-table-scrollport.planning-wrap--year
	.planning-table--year
	thead
	tr.planning-head-months
	th.planning-month-span.planning-month-block--focus {
	z-index: 14;
}
.admin-card--planning-grid
	.planning-table-scrollport.planning-wrap--year
	.planning-table--year
	th.planning-col-sticky-head {
	z-index: 16;
}
.planning-table.planning-table--year {
	/* Ligne « mois » / « jours » : fallbacks CSS (thead dans le bloc top sticky) */
	--planning-r1-h: 72px;
	--planning-r2-h: 34px;
	--planning-syn-row-h: 12px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	border-bottom: 1px solid #7a9ab8;
}
.planning-syn-code-label-main {
	display: block;
	width: 100%;
	font-size: 8px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: transparent;
	border-bottom: 0;
	padding-bottom: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-synopsis-label-main {
	background: var(
		--planning-syn-label-default-bg,
		var(--dpss-planning-pill-border)
	);
	overflow: hidden;
	z-index: 24;
	border-bottom: 0;
	border-right: 0;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-cell--synopsis {
	box-shadow: none;
	padding: 0;
	text-align: center;
}
.planning-table.planning-table--year tbody tr.planning-row--synopsis td {
	background-color: var(--planning-syn-row-bg, #dce6f0);
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	max-height: var(--planning-syn-row-h, 12px);
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
	overflow: hidden;
	box-sizing: border-box;
}
.planning-table.planning-table--year tbody tr.planning-row--synopsis {
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	max-height: var(--planning-syn-row-h, 12px);
	contain: layout style;
}
/* Masquer synopsis + agents tant que le sticky n'est pas prêt (collab-head exclu : dans le bloc top sticky). */
.planning-table.planning-table--year:not(.planning-sticky-ready):not(.planning-table--collab-head) tbody {
	visibility: collapse;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-sticky-body[data-sticky="agent"],
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-sticky-body[data-sticky="role"] {
	font-size: 0;
	line-height: 0;
	border-top: 0;
	border-bottom: 0;
	background: var(--planning-syn-row-bg, #dce6f0);
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-synopsis-left-spacer {
	position: sticky;
	left: 0;
	z-index: calc(var(--syn-sticky-stack, 10) + 1);
	width: var(--planning-sticky-w, 440px);
	min-width: var(--planning-sticky-w, 440px);
	max-width: var(--planning-sticky-w, 440px);
	background: #d7e2ee;
	border-right: 1px solid var(--dpss-planning-hub-border);
	padding: 0 6px;
	text-align: left;
}
/* Fusion visuelle sous "Sélection" pour colonnes 1 et 2 (Agent, Rôle) */
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-sticky-body[data-sticky="agent"] {
	border-right-color: transparent;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-sticky-body[data-sticky="role"] {
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis
	td.planning-col-sticky-body[data-sticky="syn"] {
	box-shadow: 4px 0 10px rgba(36, 72, 110, 0.24);
	border-left-color: var(--dpss-planning-pill-border);
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
	font-weight: 500;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis-first
	td.planning-col-sticky-body[data-sticky="agent"],
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis-first
	td.planning-col-sticky-body[data-sticky="role"] {
	border-top: 0;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis-last
	td.planning-col-sticky-body[data-sticky="agent"],
.planning-table.planning-table--year
	tbody
	tr.planning-row--synopsis-last
	td.planning-col-sticky-body[data-sticky="role"] {
	border-bottom: 0;
}
.planning-table.planning-table--year tbody tr.planning-row-collab-head td {
	background: #d7e2ee;
	border-top: 0;
	border-bottom: 1px solid var(--dpss-planning-pill-border);
	height: 13px;
	min-height: 13px;
	font-size: 10px;
	text-align: center;
	vertical-align: top;
	line-height: 1;
	padding-top: 0;
	padding-bottom: 0;
	border-left-color: transparent;
	border-right-color: transparent;
}
/* Sticky collab-head nettoyé, géré plus bas en base définitive. */
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head {
	background: #d7e2ee;
	z-index: 6;
	text-align: left;
	padding-left: 4px;
	padding-right: 4px;
}
/* En-tête collaborateurs fusionné uniquement sur Agent / Rôle. */
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="agent"],
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="role"] {
	background: #d7e2ee;
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="agent"] {
	border-left-color: var(--dpss-planning-pill-border);
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="role"] {
	border-left-color: transparent;
	border-right-color: var(--dpss-planning-pill-border);
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	box-shadow: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="syn"] {
	border-left-color: transparent;
	border-right: 1px solid #7a9ab8;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
}
/* ── 5i. Collab-head et separateurs ── */
/* Ligne Agent / Role : spacer — fond uniforme (normal + sticky). */
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-cell--collab-head-spacer,
.planning-table.planning-table--year.planning-sticky-ready
	tbody
	tr.planning-row-collab-head
	> td.planning-cell--collab-head-spacer {
	background: var(--dpss-planning-cell-bg);
}
/* Lignes spéciales : neutraliser les fonds week-end/fériés hérités des cellules de jour. */

/* Agent / Role */
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-cell--collab-head-spacer.planning-col-weekend,
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-cell--collab-head-spacer.planning-col-holiday,
.planning-table.planning-table--year.planning-sticky-ready
	tbody
	tr.planning-row-collab-head
	> td.planning-cell--collab-head-spacer.planning-col-weekend,
.planning-table.planning-table--year.planning-sticky-ready
	tbody
	tr.planning-row-collab-head
	> td.planning-cell--collab-head-spacer.planning-col-holiday {
	background: var(--dpss-planning-cell-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
}
/* Séparateurs de groupe */
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--days.planning-col-weekend,
.planning-table.planning-table--year
	tbody
	tr.planning-row-grp-sep
	td.planning-col-grp-sep--days.planning-col-holiday {
	background: #dce6f0 !important;
	background-image: none !important;
	box-shadow: none !important;
}
.planning-cell--synopsis {
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	contain: style;
}
/* Pastilles synoptiques : fond uniforme (pas de trait latéral), texte foncé pour le contraste sur 12px. */
.planning-synopsis-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--planning-syn-row-h, 12px);
	min-width: 0;
	min-height: 0;
	border-radius: 2px;
	padding: 0;
	font-size: 8px;
	line-height: 1;
	font-weight: 700;
	border: 0;
	box-sizing: border-box;
}
.planning-synopsis-dot--ok {
	background: #dcedc8;
	color: #1b4d1e;
}
.planning-synopsis-dot--warn {
	background: #ffca28;
	color: #5d4037;
}
.planning-synopsis-dot--crit {
	background: #d32f2f;
	color: #ffffff;
}
.planning-synopsis-dot--off {
	background: #eceff1;
	color: #455a64;
}
.planning-table.planning-table--year th.planning-col-sticky-head,
.planning-table.planning-table--year td.planning-col-sticky-body {
	position: sticky;
	z-index: 4;
	background: var(--dpss-surface);
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: none;
}
/* Rôle : libellés courts affichés en entier (pas de …), retour à la ligne si besoin */
.planning-table.planning-table--year
	tbody
	td.planning-col-sticky-body[data-sticky="role"] {
	overflow: hidden;
	text-overflow: clip;
	white-space: normal;
	line-height: 1.2;
	word-break: break-word;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-collab-head
	td.planning-col-collab-head[data-sticky="role"] {
	overflow: hidden;
	text-overflow: clip;
	white-space: normal;
	line-height: 1.05;
	word-break: break-word;
}
/* ── 5j. Colonnes sticky ── */
/* Largeurs rigides des colonnes sticky (meme regles pour thead et tbody).
 * table-layout: fixed sur .planning-table--year assure la prévalence de ces valeurs ;
 * pas de !important nécessaire (aucun autre sélecteur n'override ces largeurs). */
.planning-table.planning-table--year
	th.planning-col-sticky-head[data-sticky="agent"],
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="agent"],
.planning-table.planning-table--year
	td.planning-col-collab-head[data-sticky="agent"] {
	width: 200px;
	min-width: 200px;
	max-width: 200px;
}
.planning-table.planning-table--year
	th.planning-col-sticky-head[data-sticky="role"],
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="role"],
.planning-table.planning-table--year
	td.planning-col-collab-head[data-sticky="role"] {
	width: 136px;
	min-width: 136px;
	max-width: 136px;
}
.planning-table.planning-table--year
	th.planning-col-sticky-head[data-sticky="syn"],
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="syn"],
.planning-table.planning-table--year
	td.planning-col-collab-head[data-sticky="syn"] {
	box-shadow: none;
	/* Au-dessus des cellules jour qui défilent horizontalement, pour garder le trait net */
	z-index: 6;
	width: var(--planning-col-syn-w, 60px);
	min-width: var(--planning-col-syn-w, 60px);
	max-width: var(--planning-col-syn-w, 60px);
	padding-left: 3px;
	padding-right: 3px;
	border-right: 1px solid #7a9ab8;
	text-align: center;
}
/* ≤900px : breakpoint principal */
@media (max-width: 900px) {
	.planning-table.planning-table--year
		th.planning-col-sticky-head[data-sticky="agent"],
	.planning-table.planning-table--year
		td.planning-col-sticky-body[data-sticky="agent"],
	.planning-table.planning-table--year
		td.planning-col-collab-head[data-sticky="agent"] {
		width: 155px;
		min-width: 155px;
		max-width: 155px;
	}
	.planning-table.planning-table--year
		th.planning-col-sticky-head[data-sticky="role"],
	.planning-table.planning-table--year
		td.planning-col-sticky-body[data-sticky="role"],
	.planning-table.planning-table--year
		td.planning-col-collab-head[data-sticky="role"] {
		width: 90px;
		min-width: 90px;
		max-width: 90px;
	}
	.planning-table.planning-table--year
		th.planning-col-sticky-head[data-sticky="syn"],
	.planning-table.planning-table--year
		td.planning-col-sticky-body[data-sticky="syn"],
	.planning-table.planning-table--year
		td.planning-col-collab-head[data-sticky="syn"] {
		width: var(--planning-col-syn-w, 40px);
		min-width: var(--planning-col-syn-w, 40px);
		max-width: var(--planning-col-syn-w, 40px);
	}
	.planning-table th.planning-day-head {
		width: 32px;
		max-width: 32px;
		min-width: 32px;
		font-size: 10px;
	}
	.planning-table th.planning-day-head .planning-day-num {
		font-size: 11px;
	}
	.planning-table th.planning-day-head .planning-day-wd {
		font-size: 9px;
	}
	.planning-table th.planning-day-head .planning-day-hl {
		font-size: 8px;
	}
}
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="agent"] {
	box-shadow: none;
}
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="role"] {
	box-shadow: none;
}
.planning-table.planning-table--year
	td.planning-col-sticky-body[data-sticky="syn"]
	.planning-syn-grp {
	display: inline-block;
	max-width: 100%;
	font-size: 9px;
	font-weight: 600;
	color: #2c3d52;
	line-height: 1.2;
	white-space: normal;
	text-align: center;
	vertical-align: middle;
	hyphens: manual;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head:first-child {
	border-left: 0;
}
.planning-table.planning-table--year th.planning-col-sticky-head {
	z-index: 7;
	background: #d7e2ee;
	vertical-align: middle;
	font-weight: bold;
}
/* ── 5k. Selection et filtres ── */
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-col-sticky-head[data-sticky="agent"] {
	text-align: left;
	vertical-align: top;
	padding: 4px 3px 5px 5px;
}
/* Colonne Légende : même ligne visuelle que « Sélection » (haut des deux cellules + bouton à droite) */
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-col-sticky-head.planning-col-sticky-head--legend {
	vertical-align: top;
	text-align: right;
	padding: 4px 4px 5px 4px;
}
/* Ancien bloc Sélection déplacé hors tableau : pas de style spécial sur th. */
/* Liens Tous / G1… : rangée « jours » (même ligne que les dates), pas sous « Sélection » */
.planning-selection-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 2px 4px;
	font-size: 11px;
	line-height: 1.2;
	padding: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.planning-selection-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-sticky-head--grp-links {
	text-align: left;
	vertical-align: middle;
	padding: 2px 3px 3px 5px;
	line-height: 1.15;
	font-weight: bold;
}
.planning-selection-heading {
	display: block;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	text-align: left;
}
.planning-head-save-status {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	font-size: 10px;
	line-height: 1.1;
	white-space: nowrap;
	max-width: 100%;
}
.planning-head-save-status-cell {
	text-align: left;
	vertical-align: middle;
}
.planning-selection-title {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	text-align: left;
}
.planning-selection-header .planning-synopsis-legend-wrap {
	display: inline-flex;
	white-space: nowrap;
}
.planning-selection-header .planning-legend-toggle-pill {
	max-width: 74px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.planning-table.planning-table--year th.planning-col-sticky-head--legend {
	vertical-align: top;
	text-align: right;
	padding: 4px 4px 5px 4px;
}
.planning-synopsis-legend-wrap--col2 {
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
}
.planning-selection-links .planning-grp-filter-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 1px 4px;
	min-width: 24px;
	border-radius: 3px;
	text-decoration: none;
	color: #17385e;
	border: 1px solid transparent;
	white-space: nowrap;
	box-sizing: border-box;
	font-size: 12px;
}
.planning-selection-links .planning-grp-filter-link:hover {
	border-color: #7fa0c4;
	background: #e9f1f9;
}
.planning-selection-links .planning-grp-filter-link.is-active {
	border-color: #2d6da3;
	background: #d8e8f7;
	font-weight: 600;
}
/* Bouton Légende : même rendu que Enregistrer */
button.planning-display-pill.planning-synopsis-save-pill.planning-synopsis-save-pill--primary.planning-legend-toggle-pill {
	margin: 0;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	flex: 0 1 auto;
	min-height: 22px;
	padding: 1px 10px;
	border-color: #2d6da3;
	background: #d8e8f7;
	color: #152a40;
}
button.planning-display-pill.planning-synopsis-save-pill.planning-synopsis-save-pill--primary.planning-legend-toggle-pill:hover {
	background: #c9dff0;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-month-span {
	position: sticky;
	top: 0;
	z-index: 4;
	background: #dbe6f1;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 6px 6px 8px;
	line-height: 1.25;
	box-sizing: border-box;
	vertical-align: middle;
	border-bottom: 0;
	border-right: 1px solid #7a9ab8;
	box-shadow: none;
	white-space: normal;
	text-align: left;
}
.planning-table.planning-table--year thead .planning-month-hours {
	display: inline-block;
	margin-left: 4px;
	font-size: 10px;
	font-weight: normal;
	color: #2a4a6a;
	white-space: nowrap;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head {
	position: sticky;
	top: var(--planning-r1-h, 72px);
	z-index: 3;
	background: #e3edf6;
	margin-top: 0;
	padding: 2px 2px 2px;
	line-height: 1.15;
	min-height: 34px;
	box-shadow: none !important;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-month-span.planning-month-block--focus {
	background: #dbe6f1;
	border-bottom: 0;
	outline: none;
	z-index: 6;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-nav-month {
	background: #e8f4fc;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-nav-month.planning-col-nav-month-end {
	border-right: 0;
}
/* ── 5l. En-tetes annee (mois, jours, today) ── */
/* Date du jour (serveur) : en-tete jour — bleu nuit adouci (evite le noir #000 trop dur). */
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head.planning-col-today {
	background: #2c3d52 !important;
	color: #f8fafc !important;
	box-shadow: none !important;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head.planning-col-today
	.planning-day-num,
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head.planning-col-today
	.planning-day-wd,
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-day-head.planning-col-today
	.planning-day-hl {
	color: #f8fafc !important;
	font-weight: 700;
}
.planning-table.planning-table--year tbody td.planning-col-nav-month {
	background-color: var(--dpss-planning-cell-bg);
}
.planning-table.planning-table--year
	tbody
	td.planning-col-nav-month.planning-col-holiday {
	background-color: #ffd9bf;
	background-image: none;
	box-shadow: inset 0 0 0 1px rgba(205, 78, 28, 0.36);
}
.planning-table.planning-table--year
	tbody
	td.planning-col-nav-month.planning-col-weekend {
	background-color: #fff1e6;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 127, 80, 0.14) 0,
		rgba(255, 127, 80, 0.14) 4px,
		transparent 4px,
		transparent 10px
	);
	box-shadow: inset 0 0 0 1px rgba(225, 89, 36, 0.24);
}
.planning-table.planning-table--year
	tbody
	td.planning-col-nav-month.planning-col-nav-month-end {
	border-right: 0;
}
.planning-table.planning-table--year tbody td.planning-col-sticky-body {
	padding: 1px 5px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2;
	vertical-align: middle;
}
.planning-table.planning-table--year tbody td.planning-col-sticky-body[data-sticky="agent"] {
	font-size: 12px;
}
.planning-table.planning-table--year tbody td.planning-col-sticky-body[data-sticky="role"] {
	font-size: 11px;
}

/* ── 5m. Cellules annee et commentaires ── */

.planning-table.planning-table--year tbody td.planning-cell {
	padding: 0 1px;
	vertical-align: middle;
	text-align: center;
	contain: style;
}
.planning-table.planning-table--year tbody td.planning-cell select {
	height: 18px;
	min-height: 18px;
	padding: 0 1px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-align-last: center;
}
.planning-table.planning-table--year tbody td.planning-cell .planning-badge {
	padding: 0 1px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell
	.planning-badge--has-cell-comment {
	box-shadow: inset -2px 2px 0 0 #ff1744;
}
/* Indicateur taux de reprise partiel : barre verte au bas de la cellule. */
.planning-table.planning-table--year
	tbody
	td.planning-cell--taux-partiel {
	position: relative;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell--taux-partiel::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(var(--planning-badge-taux, 50) * 1%);
	height: 3px;
	background: #2e7d32;
	pointer-events: none;
	z-index: 1;
	border-radius: 0 1px 0 0;
}
/* Mon planning: ne pas afficher le repère commentaire sur les badges de lecture. */
.planning-table.planning-table--mode-mon
	tbody
	td.planning-cell
	.planning-badge--has-cell-comment {
	box-shadow: none;
}
/* Indicateur "ligne indications" : point rouge visible en bas à gauche. */
.planning-table.planning-table--year
	tbody
	td.planning-cell.planning-cell--has-indication,
.planning-table.planning-table--year
	tbody
	td.planning-cell.planning-cell--has-eff {
	position: relative;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell.planning-cell--has-indication::after,
.planning-table.planning-table--year
	tbody
	td.planning-cell.planning-cell--has-eff::after {
	content: "";
	position: absolute;
	left: 3px;
	bottom: 3px;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #ff1744;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.7),
		0 0 4px rgba(255, 23, 68, 0.55);
	pointer-events: none;
	z-index: 2;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell
	.planning-cell-edit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	padding: 0;
	box-sizing: border-box;
	cursor: context-menu;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell
	.planning-cell-edit
	.planning-cell-code-select {
	margin: 0 auto;
}
.planning-table.planning-table--year
	tbody
	td.planning-cell
	.planning-cell-edit--has-comment::before {
	content: "";
	position: absolute;
	top: 1px;
	right: 1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 7px 0;
	border-color: transparent #ff1744 transparent transparent;
	pointer-events: none;
	z-index: 4;
}
/* Les cellules .planning-cell-edit n'existent qu'en mode gestion (édition) ; ne pas les masquer via .mode-mon. */
.planning-cell-comment-dialog {
	max-width: min(96vw, 420px);
	padding: 0;
	border: 1px solid #7a9ab8;
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(20, 40, 70, 0.35);
}
.planning-cell-comment-dialog::backdrop {
	background: rgba(20, 40, 60, 0.4);
}
.planning-cell-comment-dialog-panel {
	padding: 14px 16px 16px;
}
.planning-cell-comment-dialog-title {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: #142a45;
}
.planning-cell-comment-dialog-hint {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 1.35;
	color: #3d5166;
}
.planning-cell-comment-dialog-ta {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 8px;
	font: inherit;
	font-size: 13px;
	line-height: 1.35;
	border: 1px solid #a8bdd4;
	border-radius: 4px;
	resize: none;
}
.planning-cell-comment-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.planning-cell-comment-dialog-btn {
	min-height: 32px;
	padding: 4px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	border: 1px solid #7a9ab8;
	color: #10263d !important;
}
.planning-cell-comment-dialog-btn--secondary {
	background: var(--dpss-surface);
	color: #10263d !important;
}
.planning-cell-comment-dialog-btn--primary {
	background: #dbe8f6;
	border-color: #5f7f9d;
	color: #10263d !important;
}
.planning-cell-comment-dialog-btn--primary:hover {
	background: #f6fbff;
	color: #10263d !important;
}
#dpss_planning_heures_dialog .heures-slot-row .planning-cell-comment-dialog-ta {
	display: inline-block;
	width: 34px;
}
#dpss_planning_heures_dialog .heures-slot-remove:hover {
	background: #e8f0f8;
	border-color: #5f7f9d;
	color: #c0392b;
}
.planning-table.planning-table--year tbody tr[data-planning-row-select] {
	cursor: pointer;
}
.planning-table.planning-table--year
	tbody
	tr[data-planning-row-select]:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -2px;
}
/* Mon planning: repère discret de la ligne utilisateur connecté. */
.planning-table.planning-table--mode-mon
	tbody
	tr.planning-row--current-user
	> td[data-sticky="agent"],
.planning-table.planning-table--mode-gestion
	tbody
	tr.planning-row--current-user
	> td[data-sticky="agent"] {
	position: sticky;
}
.planning-table.planning-table--mode-mon
	tbody
	tr.planning-row--current-user
	> td[data-sticky="agent"]::before,
.planning-table.planning-table--mode-gestion
	tbody
	tr.planning-row--current-user
	> td[data-sticky="agent"]::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 0;
	bottom: 1px;
	width: 3px;
	border-radius: 2px;
	background: #1db954;
	pointer-events: none;
}
/* Hauteur grille : toutes les lignes collaborateurs (Gestion et Mon planning). data-planning-row-select ne couvre que la ligne sélectionnable en mode agent. */
.planning-table.planning-table--year tbody tr.planning-row--collab > td {
	height: 28px;
	min-height: 28px;
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: middle;
	contain: layout style;
}

/* ── Ligne collaborateur (pastilles, heures) ── */

.planning-table.planning-table--year
	tbody
	tr.planning-row--collab
	td.planning-cell
	.planning-cell-edit {
	min-height: 18px;
	height: 18px;
	line-height: 18px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Pastille collaborateur : hauteur fixe, largeur mini alignee legende. */
.planning-table.planning-table--year
	tbody
	tr.planning-row--collab
	td.planning-cell
	.planning-badge {
	min-height: 18px;
	height: 18px;
	max-height: 18px;
	min-width: 3.25em;
	max-width: 100%;
	line-height: 1;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.planning-table.planning-table--year tbody td .planning-agent-cell-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.planning-table.planning-table--year tbody td .planning-agent-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
}
.planning-table.planning-table--year tbody td .planning-hours-row-toggle {
	min-height: 18px;
	width: 20px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #6b7f97;
	font-size: 10px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.72;
	pointer-events: none;
}
.planning-table.planning-table--year
	tbody
	td
	.planning-hours-row-toggle::before {
	content: "▾";
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--selected
	td
	.planning-hours-row-toggle::before {
	content: "▴";
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--selected
	td
	.planning-hours-row-toggle {
	color: #4d6785;
	opacity: 0.9;
}
/* ── 5n. Lignes heures ── */
.planning-table.planning-table--year tbody tr.planning-row-hours > td {
	height: 24px;
	min-height: 24px;
	background: #f8fbff;
	/* Pas de contain: layout ici : pénalisait la saisie (reflow) dans Firefox sur la ligne indications. */
	contain: style;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-row-hours-sticky {
	color: #355375;
	font-weight: 600;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	.planning-row-hours-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours {
	padding: 0 1px;
	position: relative;
	overflow: visible;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours
	.planning-hours-input {
	width: 100%;
	height: 18px;
	min-height: 18px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 2px;
	text-align: center;
	font-size: 10px;
	border: 1px solid #b8c8dc;
	border-radius: 2px;
	background: var(--dpss-surface);
	color: #10263d;
	position: relative;
	z-index: 1;
	transition:
		width 120ms ease,
		transform 120ms ease,
		box-shadow 120ms ease;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours
	.planning-hours-input:focus {
	outline: 1px solid #4d7cae;
	outline-offset: 0;
	border-color: #4d7cae;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours
	.planning-hours-input--readonly {
	cursor: default;
	background: #f3f6fa;
	color: #1e3a52;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours
	.planning-hours-input--readonly:focus,
.planning-table.planning-table--year
	tbody
	tr.planning-row-hours
	td.planning-cell--hours
	.planning-hours-input--shadow:focus {
	outline: none;
}

/* Heures effectives — meme style que Indications */
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures > td {
	height: 26px;
	min-height: 26px;
	background: #f8fbff;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-row-hours-sticky {
	color: #355375;
	font-weight: 600;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	.planning-row-hours-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours {
	padding: 0 1px;
	position: relative;
	overflow: visible;
	background: #ffffff;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours
	.planning-heures-input {
	width: 100%;
	height: 18px;
	min-height: 18px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 2px;
	text-align: center;
	font-size: 10px;
	border: 1px solid #b8c8dc;
	border-radius: 2px;
	background: #ffffff;
	color: #10263d;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours
	.planning-heures-input--popup {
	cursor: pointer;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours
	.planning-heures-input--readonly {
	cursor: default;
	background: #f3f6fa;
	color: #1e3a52;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours
	.planning-heures-input--readonly:focus {
	outline: none;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td {
	border-top: 0;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row-heures
	td.planning-cell--hours
	.planning-heures-vertical {
	z-index: 0;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
	background: var(--dpss-surface);
	border: 1px solid #b8c8dc;
	border-radius: 2px;
}
.planning-heures-v-slot {
	display: block;
	text-align: center;
	line-height: 1.05;
	pointer-events: none;
	white-space: nowrap;
}
.planning-heures-v-sep {
	display: block;
	width: 1.5em;
	height: 1px;
	background: #c0cfdf;
	margin: 0 auto;
	pointer-events: none;
	flex: none;
}
.planning-heures-v-empty {
	display: block;
	text-align: center;
	font-size: 9px;
	line-height: 1.1;
	color: #3a4a5a;
	font-weight: 400;
	pointer-events: none;
	white-space: nowrap;
}
.planning-heures-v-slot--placeholder {
	color: #3a4a5a;
	font-weight: 400;
}
.planning-heures-v-slot--value {
	color: #10263d;
	font-weight: 600;
}
/* ── Heures eff. : tooltip au survol de la cellule ── */
.planning-heures-tooltip {
	position: absolute;
	z-index: 999;
	pointer-events: none;
	background: #1a2b3d;
	color: #ffffff;
	font-family: "Consolas", "SF Mono", "Menlo", monospace;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
	padding: 5px 10px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0,0,0,0.35);
	transform: translate(-50%, -100%);
	margin-top: -6px;
}
.planning-heures-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1a2b3d;
}
.planning-heures-tooltip--multi {
	white-space: pre;
	text-align: center;
	line-height: 1.45;
}
/* ── 5o. Bordures et separations visuelles ── */
/* Simplification visuelle demandee: pas de bordures horizontales, uniquement separations verticales. */
.planning-table.planning-table--year th,
.planning-table.planning-table--year td {
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-right: 1px solid var(--dpss-planning-hub-border);
}
/* Separation des mois : trait vertical droit en fin de chaque mois (sur le dernier jour). */
.planning-table.planning-table--year th.planning-day-month-end,
.planning-table.planning-table--year td.planning-day-month-end {
	border-right: 1px solid #7a9ab8 !important;
}
/* Ligne Agent / Role: masque les traits verticaux (sauf le trait de separation des mois). */
.planning-table.planning-table--year tbody tr.planning-row-collab-head > td:not(.planning-day-month-end) {
	border-right-color: transparent;
	border-right-width: 0;
}
/* Syn (CR nuit -> AV jour): supprime le separateur vertical entre colonnes 1 et 2. */
.planning-table.planning-table--year
	tbody
	tr:is(
		.planning-row--synopsis-code-crn,
		.planning-row--synopsis-code-bij,
		.planning-row--synopsis-code-bin,
		.planning-row--synopsis-code-avj
	)
	> td.planning-col-sticky-body[data-sticky="agent"] {
	border-right-color: transparent;
	border-right-width: 0;
}
.planning-table.planning-table--year
	tbody
	tr:is(
		.planning-row--synopsis-code-crn,
		.planning-row--synopsis-code-bij,
		.planning-row--synopsis-code-bin,
		.planning-row--synopsis-code-avj
	)
	> td.planning-col-sticky-body[data-sticky="role"] {
	border-left-color: transparent;
}
/* Selection liee collaborateur + ligne heures: contour unique sur toute la largeur (horaires inclus). */
.planning-table--agents tbody tr.planning-row--selected > td {
	border-top: 1px solid #000000;
	border-right-color: transparent;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	> td {
	border-bottom: 1px solid #000000;
	border-right-color: transparent;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours:has(+ tr.planning-row-heures)
	> td {
	border-bottom: 0;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	+ tr.planning-row-heures
	> td {
	border-bottom: 1px solid #000000;
	border-right-color: transparent;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	> td:first-child,
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	> td:first-child {
	border-left: 1px solid #000000;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	+ tr.planning-row-heures
	> td:first-child {
	border-left: 1px solid #000000;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	> td:last-child,
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	> td:last-child {
	border-right: 1px solid #000000;
}
.planning-table--agents
	tbody
	tr.planning-row--selected
	+ tr.planning-row-hours
	+ tr.planning-row-heures
	> td:last-child {
	border-right: 1px solid #000000;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--selected
	td.planning-col-sticky-body {
	z-index: 5;
}
.planning-table.planning-table--year
	tbody
	tr.planning-row--selected
	td.planning-col-sticky-body[data-sticky="syn"] {
	z-index: 6;
}
/* ── 5p. Z-index et empilement sticky ── */
/* Empilement fige harmonise: Selection au-dessus de Syn + Agent/Role. */
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-col-sticky-head[data-sticky] {
	position: sticky;
	top: 0;
	z-index: 30;
}
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-sticky-head[data-sticky] {
	position: sticky;
	top: var(--planning-r1-h, 72px);
	z-index: 29;
}
/* z-index Syn/Collab unifié dans la base définitive sticky ci-dessous. */
/* Bloc Selection sticky: neutralise les bordures et ombres du header.
   Ces propriétés sont spécifiques à ces th (thead sticky head avec data-sticky) ;
   aucune règle concurrente ne peut les écraser sans !important. */
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-col-sticky-head[data-sticky],
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-sticky-head[data-sticky] {
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	box-shadow: none;
}
/* Fond Syn aligne sur la teinte du bloc Selection + trait droit colonne 3. */
.planning-table.planning-table--year
	thead
	tr.planning-head-months
	th.planning-col-sticky-head[data-sticky="syn"],
.planning-table.planning-table--year
	thead
	tr.planning-head-days
	th.planning-col-sticky-head[data-sticky="syn"] {
	background: #d7e2ee;
	border-right: 1px solid #7a9ab8;
}
/* ── 5p+. Sticky planning (4 tables) ── */
/* Dates + synopsis + collab-head : un seul bloc sticky (pur CSS, sans mesure JS) */
.planning-top-sticky-wrap {
	position: sticky;
	top: 0;
	z-index: 30;
	isolation: isolate;
}
.planning-table--collab-head tbody tr.planning-row-collab-head > td {
	background-clip: border-box;
}
.planning-table--synopsis tbody tr.planning-row--synopsis > td {
	overflow: hidden;
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	max-height: var(--planning-syn-row-h, 12px);
	line-height: 1;
	box-shadow: none;
	background-clip: border-box;
}
/* overflow:hidden sur hauteur des cellules syn ; z-index pour colonnes sticky horizontales. */
.planning-table--synopsis tbody tr.planning-row--synopsis > td.planning-col-sticky-body {
	z-index: 21;
	overflow: hidden;
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	max-height: var(--planning-syn-row-h, 12px);
	line-height: 1;
	text-overflow: clip;
}
.planning-table--synopsis tbody tr.planning-row--synopsis td.planning-cell--synopsis {
	overflow: hidden;
	height: var(--planning-syn-row-h, 12px);
	min-height: var(--planning-syn-row-h, 12px);
	max-height: var(--planning-syn-row-h, 12px);
	box-shadow: none;
}
.planning-table--synopsis tbody tr.planning-row--synopsis td.planning-cell--synopsis .planning-synopsis-dot {
	box-shadow: none !important;
}
.planning-table--synopsis tbody tr.planning-row--synopsis > td.planning-col-synopsis-label-main {
	background: var(--planning-syn-label-default-bg, var(--dpss-planning-pill-border));
	box-shadow: none !important;
}
/* ── 5q. Palette couleurs Syn ── */
.planning-table--synopsis
	tbody
	tr:is(.planning-row--synopsis-code-crj, .planning-row--synopsis-code-cri)
	td.planning-col-synopsis-label-main {
	background: var(--planning-syn-crj-bg, #bfe2ff) !important;
	color: #000 !important;
}
.planning-table--synopsis
	tbody
	tr.planning-row--synopsis-code-crn
	td.planning-col-synopsis-label-main {
	background: var(--planning-syn-crn-bg, #8fb5de) !important;
}
.planning-table--synopsis
	tbody
	tr.planning-row--synopsis-code-bij
	td.planning-col-synopsis-label-main {
	background: var(--planning-syn-bij-bg, #d6efb3) !important;
}
.planning-table--synopsis
	tbody
	tr.planning-row--synopsis-code-bin
	td.planning-col-synopsis-label-main {
	background: var(--planning-syn-bin-bg, #b8e986) !important;
}
.planning-table--synopsis
	tbody
	tr.planning-row--synopsis-code-avj
	td.planning-col-synopsis-label-main {
	background: var(--planning-syn-avj-bg, #ffe8b3) !important;
}
.planning-table.planning-table--year
	tbody
	tr:is(
		.planning-row--synopsis-code-crn,
		.planning-row--synopsis-code-bij,
		.planning-row--synopsis-code-bin,
		.planning-row--synopsis-code-avj
	)
	td.planning-col-synopsis-label-main,
.planning-table.planning-table--year.planning-table--mode-gestion.planning-sticky-ready
	tbody
	tr:is(
		.planning-row--synopsis-code-crn,
		.planning-row--synopsis-code-bij,
		.planning-row--synopsis-code-bin,
		.planning-row--synopsis-code-avj
	)
	> td.planning-col-synopsis-label-main {
	color: #000 !important;
}
/* ============================================================
   6. PAGES ANNEXES
   ============================================================ */

/* ── 6a. Gestion planning (codes) ── */
.admin-page .gp-code-input {
	text-transform: uppercase;
	width: 6rem;
}
.admin-page .gp-label-input {
	width: 18rem;
}
.admin-page .gp-table-mt {
	margin-top: 1rem;
}
.admin-page .gp-edit-label-input {
	width: 16rem;
}
.admin-page .gp-align-center {
	text-align: center;
}
.admin-page .gp-code-uppercase {
	text-transform: uppercase;
}
.admin-page .gp-inline-note {
	display: inline;
	margin-left: 0.5rem;
}

/* ── 6b. Effectifs par secteur ── */
.admin-page .staffing-min-op {
	text-align: center;
	font-weight: 600;
	font-size: 13px;
}
.admin-page .staffing-total {
	text-align: center;
	font-size: 13px;
}
.admin-page .staffing-status {
	text-align: center;
	font-weight: 600;
	font-size: 12px;
}
.staffing-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
}
.staffing-dot--ok {
	background: #2e7d32;
}
.staffing-dot--warn {
	background: #f57f17;
}
.staffing-dot--crit {
	background: #c62828;
}
.staffing-dot--off {
	background: #9e9e9e;
}

/* Mise en page compacte pour la page Accueil gestion effectifs */
.admin-page--staffing {
	font-size: 12px;
}
.admin-page--staffing .admin-table th,
.admin-page--staffing .admin-table td {
	font-size: 11px;
	padding: 3px 6px;
}
.admin-page--staffing .admin-table code {
	font-size: 10px;
}
.admin-page--staffing .admin-card--staffing-sector {
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
}
.admin-page--staffing .admin-card--staffing-sector h4 {
	font-size: 12px;
	margin: 0 0 0.25rem;
}
.admin-page--staffing .admin-card--staffing-sector .admin-card-titlebar {
	margin-bottom: 0.25rem;
}
/* Layout top : urgences pleine largeur, puis date + recap */
.staffing-board {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	box-sizing: border-box;
}
.staffing-board .staffing-urgences-banner {
	flex: none;
	width: 100%;
	margin-bottom: 0;
}
.staffing-board .staffing-layout-top {
	margin-bottom: 0;
}
.staffing-board__scroll {
	overflow-x: visible;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	min-width: 0;
	padding-bottom: 4px;
}
.staffing-board__grid {
	display: grid;
	/* Largeur unique = max nécessaire pour les textes (fixée par JS → --staffing-col-width) */
	grid-template-columns: repeat(var(--staffing-board-cols, 1), var(--staffing-col-width, max-content));
	gap: 12px;
	align-items: stretch;
	width: max-content;
	max-width: none;
	box-sizing: border-box;
}
.staffing-board__grid--measuring {
	grid-template-columns: repeat(var(--staffing-board-cols, 1), max-content);
}
.staffing-board__grid--measuring .staffing-board__col,
.staffing-board__grid--measuring .staffing-detail-col {
	width: max-content;
	max-width: none;
	min-width: max-content;
}
.staffing-board__grid--measuring .staffing-detail-agent-name,
.staffing-board__grid--measuring .staffing-detail-contact-line__lbl,
.staffing-board__grid--measuring .staffing-detail-contact-line__phones,
.staffing-board__grid--measuring .staffing-detail-contact-chip__lbl,
.staffing-board__grid--measuring .staffing-detail-contact-chip__tel {
	max-width: none;
	overflow: visible;
	text-overflow: clip;
}
.staffing-board__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: var(--staffing-col-width, auto);
}
.staffing-layout-top {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 0.5rem;
	width: 100%;
	box-sizing: border-box;
}
.staffing-panel-left {
	flex: 0 0 auto;
	min-width: 240px;
}
.staffing-panel-right {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-self: stretch;
}
.staffing-panel-recap {
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* Bandeau urgences globales — Vue du jour (aligne sur le chrome titre) */
.staffing-urgences-banner {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 0.25rem;
	padding: 0.6rem 0.85rem;
	background: var(--dpss-surface);
	border: 1px solid var(--dpss-border-light, #d8e2ed);
	border-left: 4px solid #dc2626;
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.staffing-urgences-banner__title {
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #991b1b;
	white-space: nowrap;
}
.staffing-urgences-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	flex: 1 1 auto;
}
.staffing-urgences-banner .staffing-detail-contact-chip {
	background: var(--dpss-surface-muted, #f8fafc);
	border-color: var(--dpss-border-light, #d8e2ed);
}

/* ── 6c. Graphiques (codes absences, courbes) ── */
.dpss-code-chart-main-grid__list .dpss-code-chart-intro {
	max-width: 100%;
	margin-bottom: 0.75rem;
}
.dpss-code-monthly-block {
	margin-bottom: 1.25rem;
	max-width: 100%;
}
.dpss-code-monthly-block .dpss-code-pie-chart-explain {
	max-width: 52em;
	margin: 0 0 0.5rem 0;
}
.dpss-monthly-effectif-caption {
	margin: 0.35rem 0 0.65rem 0;
	max-width: 52em;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #334155;
}
.dpss-monthly-effectif-caption strong {
	color: var(--dpss-text);
	font-weight: 700;
}
.dpss-monthly-chart-wrap {
	overflow-x: visible;
	-webkit-overflow-scrolling: touch;
	margin-top: 0.25rem;
}
.dpss-monthly-lines-svg-object,
.dpss-monthly-lines-svg-img,
.dpss-monthly-chart-wrap .dpss-monthly-lines-svg {
	display: block;
	max-width: 100%;
	height: auto;
}
.dpss-monthly-line-point {
	cursor: pointer;
}
.dpss-monthly-month-hit__zone {
	cursor: pointer;
}
.dpss-monthly-month-hit__label {
	pointer-events: none;
}
.dpss-monthly-line-point-halo {
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
}
.dpss-monthly-line-point-dot {
	pointer-events: none;
	transition: r 0.12s ease;
}
.dpss-monthly-line-point:hover .dpss-monthly-line-point-halo {
	opacity: 0.28;
}
.dpss-monthly-line-point:hover .dpss-monthly-line-point-dot {
	r: 4.2;
}
.dpss-monthly-line-point.is-panel-selected .dpss-monthly-line-point-halo,
.dpss-monthly-month-hit.is-panel-selected .dpss-monthly-month-hit__label {
	opacity: 1;
}
.dpss-monthly-line-point.is-panel-selected .dpss-monthly-line-point-halo {
	opacity: 0.35;
}
.dpss-monthly-month-hit.is-panel-selected .dpss-monthly-month-hit__label {
	fill: var(--dpss-accent, #1d4ed8);
	font-weight: 700;
}
.dpss-monthly-chart-panel {
	margin-top: 0.75rem;
}
.dpss-monthly-chart-panel__inner {
	background: var(--dpss-surface);
	border: 1px solid #c5d4e3;
	border-radius: 8px;
	padding: 10px 12px 12px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.dpss-monthly-chart-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.dpss-monthly-chart-panel__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dpss-text);
}
.dpss-monthly-chart-panel__close {
	flex: 0 0 auto;
	border: 1px solid #c5d4e3;
	background: #fff;
	color: #475569;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 4px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.dpss-monthly-chart-panel__close:hover {
	background: #f1f5f9;
}
.dpss-monthly-chart-panel__body .admin-table {
	font-size: 11px;
}
.dpss-monthly-chart-panel__swatch {
	display: inline-block;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	vertical-align: middle;
	border: 1px solid rgba(15, 23, 42, 0.15);
}
.dpss-monthly-chart-panel__footnote {
	margin: 0.5rem 0 0;
}
/* Traits lisibles sur fond clair : complément au assombrissement côté PHP */
.dpss-monthly-line-poly {
	filter: drop-shadow(0 0 0.55px rgba(15, 23, 42, 0.28));
	shape-rendering: geometricPrecision;
}
.dpss-monthly-line-label {
	paint-order: normal;
}
.dpss-monthly-line-leader {
	pointer-events: none;
}
.dpss-code-pie-summary {
	margin-bottom: 0;
}
.dpss-code-pie-table-wrap {
	margin-bottom: 0;
	max-height: none;
	overflow: visible;
}
.dpss-code-pie-chart-heading {
	margin: 0 0 0.35rem 0;
	font-size: 1rem;
	font-weight: 700;
}
.dpss-code-pie-chart-explain {
	margin: 0 0 1rem 0;
	max-width: 52em;
}
.dpss-code-pie-chart {
	flex: 0 0 auto;
	background: var(--dpss-surface);
	border: 1px solid #d8e2ed;
	border-radius: 8px;
	padding: 10px;
}
.admin-table--code-pie-legend {
	font-size: 11px;
}
.admin-table--code-pie-legend td,
.admin-table--code-pie-legend th {
	padding: 7px 6px;
}
.admin-table--code-pie-legend .dpss-code-pie-th-graph,
.admin-table--code-pie-legend .dpss-code-pie-td-graph {
	width: 3rem;
	text-align: center;
	vertical-align: middle;
}
.dpss-code-pie-code-label {
	cursor: pointer;
	margin: 0;
	font-weight: inherit;
}
.dpss-code-chart-filter-form {
	margin-bottom: 0;
}
.staffing-date-form {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
/* Liste année : hauteur / interligne un peu plus grands pour que le chiffre ne soit pas tronqué (Chrome, zoom). */
.staffing-date-form--codes-chart select.staffing-date-input {
	min-width: 5.5rem;
	min-height: 1.9rem;
	padding: 4px 10px;
	line-height: 1.4;
	box-sizing: border-box;
}
.staffing-date-label {
	font-weight: 600;
}
.staffing-date-input {
	max-width: 150px;
}

/* ── 6d. Tableaux compacts ── */
.admin-table--staffing-recap {
	width: auto;
	font-size: 11px;
}
.admin-table--staffing-recap th,
.admin-table--staffing-recap td {
	text-align: center;
	padding: 3px 8px;
	font-size: 11px;
	white-space: nowrap;
}
.admin-table--staffing-recap th {
	font-size: 10px;
}
.admin-table--staffing-recap td:first-child {
	text-align: left;
}
.admin-table--staffing-recap td:last-child {
	text-align: left;
	padding-left: 0;
}
.admin-table--staffing-recap td:nth-child(6) {
	font-weight: 700;
	font-size: 12px;
}

/* ── 6i. Backup BDD — colonnes ajustees au contenu ── */
.admin-page--backup .admin-table-wrap {
	width: fit-content;
	max-width: 100%;
}
.admin-page--backup .admin-table--fit-cols {
	width: auto;
	table-layout: auto;
}
.admin-page--backup .admin-table--fit-cols th,
.admin-page--backup .admin-table--fit-cols td {
	width: 1%;
	white-space: nowrap;
	padding-left: 0.65rem;
	padding-right: 0.65rem;
}

/* ── 6j. Tests unitaires — sortie PHPUnit ── */
.admin-page--tests .admin-pre-output {
	margin: 0;
	padding: 0.75rem 1rem;
	max-height: 28rem;
	overflow: auto;
	background: #0f172a;
	color: #e2e8f0;
	border-radius: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}
.admin-page--tests .admin-pre-output--inline {
	display: inline-block;
	max-height: none;
	padding: 0.35rem 0.65rem;
	margin-top: 0.35rem;
}

/* Tableau compact générique (logs, audit, etc.) */
.admin-table--compact {
	font-size: 13px;
}
.admin-table--compact th,
.admin-table--compact td {
	font-size: 13px;
	padding: 5px 10px;
	white-space: normal;
	vertical-align: middle;
	text-align: left;
}
.admin-table--compact th {
	font-size: 12px;
}

/* ── 6e. Grille detail effectifs ── */
.staffing-detail-col {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	width: 100%;
	background: var(--dpss-surface);
	border: 1px solid #d8e2ed;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	overflow: visible;
	box-sizing: border-box;
}
.staffing-detail-col-header {
	background: linear-gradient(135deg, #e8f0fa, #f4f8fc);
	padding: 8px 10px;
	border-bottom: 2px solid var(--dpss-planning-border-accent);
	min-height: 3.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.staffing-detail-col-title {
	font-weight: 700;
	font-size: 12px;
	min-height: 1.25rem;
	color: var(--dpss-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
.staffing-detail-col-minop {
	font-size: 10px;
	color: var(--dpss-text-muted);
	line-height: 1.3;
	min-height: 1.3em;
}
.staffing-detail-col-minop--empty {
	visibility: hidden;
}
.staffing-detail-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}
.staffing-detail-contact-list + .staffing-detail-contact-list {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--dpss-border-light, #d8e2ed);
}
.staffing-detail-contact-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.35rem 0.5rem;
	width: 100%;
	box-sizing: border-box;
	font-size: 10px;
	line-height: 1.45;
	padding: 1px 0;
	text-align: left;
}
.staffing-detail-contact-line + .staffing-detail-contact-line {
	margin-top: 2px;
}
.staffing-detail-contact-line__lbl {
	font-weight: 600;
	color: var(--dpss-text);
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
}
.staffing-detail-contact-line__phones {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.35rem 0.5rem;
	flex: 0 0 auto;
	min-width: 0;
}
.staffing-detail-contact-line__tel {
	font-weight: 600;
	color: var(--dpss-planning-link);
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
	text-align: left;
}
.staffing-detail-contact-line__tel:hover,
.staffing-detail-contact-line__tel:focus-visible {
	text-decoration: underline;
}
.staffing-detail-contact-line__int {
	color: var(--dpss-text-muted);
	font-size: 9px;
	white-space: nowrap;
	flex: 0 0 auto;
	text-align: left;
	margin-left: 0.15rem;
}
.staffing-detail-contact-line__int::before {
	content: "int. ";
}
.staffing-detail-contact-line__int--link {
	font-weight: 600;
	color: var(--dpss-planning-link);
	text-decoration: none;
	font-size: 10px;
}
.staffing-detail-contact-line__int--link:hover,
.staffing-detail-contact-line__int--link:focus-visible {
	text-decoration: underline;
}
.staffing-detail-period {
	border-bottom: 1px solid var(--dpss-bg);
}
.staffing-detail-period:last-child {
	border-bottom: none;
}
.staffing-detail-agent-list {
	padding: 2px 0;
}
.staffing-detail-agent {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	padding: 2px 10px;
	font-size: 11px;
	line-height: 1.4;
}
.staffing-detail-agent:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}
.staffing-detail-agent-role {
	font-size: 10px;
	color: var(--dpss-text-muted);
	min-width: 5ch;
}
.staffing-detail-agent-code code {
	font-size: 10px;
	font-weight: 500;
}
.staffing-detail-agent-name {
	font-weight: 600;
	color: var(--dpss-text);
	white-space: nowrap;
}
.staffing-detail-agent--empty {
	color: #999;
	font-style: italic;
	justify-content: center;
}
.staffing-detail-contacts {
	margin-top: 4px;
	position: relative;
}
.staffing-detail-contacts__summary {
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	color: var(--dpss-planning-link);
	padding: 3px 0 0;
	list-style: none;
	user-select: none;
}
.staffing-detail-contacts__summary::-webkit-details-marker {
	display: none;
}
.staffing-detail-contacts__summary::before {
	content: "▸ ";
	font-size: 9px;
}
.staffing-detail-contacts[open] .staffing-detail-contacts__summary::before {
	content: "▾ ";
}
.staffing-detail-contacts[open] {
	z-index: 5;
}
.staffing-detail-contacts__body {
	display: none;
}
.staffing-detail-contacts[open] .staffing-detail-contacts__body {
	display: block;
	position: absolute;
	left: 0;
	right: auto;
	min-width: 100%;
	width: max-content;
	max-width: min(420px, 92vw);
	top: 100%;
	margin-top: 2px;
	padding: 8px 10px;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--dpss-surface);
	border: 1px solid #d8e2ed;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
	z-index: 20;
	text-align: left;
}
.staffing-detail-contact-chip {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px 6px;
	max-width: 100%;
	padding: 4px 8px;
	font-size: 11px;
	line-height: 1.4;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}
.staffing-detail-contact-chip__lbl {
	font-weight: 600;
	color: var(--dpss-text);
	white-space: nowrap;
}
.staffing-detail-contact-chip__tel {
	font-weight: 600;
	color: var(--dpss-planning-link);
	text-decoration: none;
	white-space: nowrap;
}
.staffing-detail-contact-chip__tel:hover,
.staffing-detail-contact-chip__tel:focus-visible {
	text-decoration: underline;
}
.staffing-detail-contact-chip__int {
	color: var(--dpss-text-muted);
	font-size: 8px;
	white-space: nowrap;
	margin-left: 0.35rem;
}
.staffing-detail-contact-chip__int::before {
	content: "int. ";
}
.staffing-detail-agent-name__sep {
	font-weight: 400;
	color: var(--dpss-text-muted);
}
.staffing-detail-agent-phone {
	font-size: 10px;
	font-weight: 600;
	color: var(--dpss-planning-link);
	text-decoration: none;
	white-space: nowrap;
}
.staffing-detail-agent-phone:hover,
.staffing-detail-agent-phone:focus-visible {
	text-decoration: underline;
}

/* Titres de periode (jour/nuit) en pictos */
.staffing-detail-period-title {
	font-size: 13px;
	text-align: left;
	padding: 6px 10px;
	cursor: default;
	display: flex;
	align-items: center;
	gap: 6px;
}
.staffing-detail-period-title span {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #1a3a5c;
}
.staffing-detail-period-title svg {
	color: #4a5a6a;
	flex: none;
}

/* Surbrillance LTr (depuis Conformité LTr)
 * Cellules de la période concernée sur la ligne du collaborateur. */
.planning-cell.planning-col-ltr-highlight {
	background: rgba(220, 38, 38, 0.22) !important;
	outline: 2px solid rgba(220, 38, 38, 0.7);
	outline-offset: -2px;
}
.planning-cell.planning-col-ltr-highlight .planning-badge,
.planning-cell.planning-col-ltr-highlight .planning-badge--cell-code {
	filter: brightness(1.02);
}

/* ── 6f. Test & feedback ── */
.dpss-test-feedback-page .test-feedback-form {
	background: var(--dpss-surface-muted);
	border: 1px solid var(--dpss-border-light);
	border-radius: var(--dpss-radius-sm, 8px);
	padding: 1rem 1.25rem;
	margin-bottom: 0;
}
.dpss-test-feedback-page .test-feedback-form .form-row {
	margin-bottom: 14px;
}
.dpss-test-feedback-page .test-feedback-form .form-row:last-child {
	margin-bottom: 0;
}
.dpss-test-feedback-page .test-feedback-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--dpss-text);
}
.dpss-test-feedback-page .test-feedback-form select,
.dpss-test-feedback-page .test-feedback-form textarea {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	line-height: 1.45;
}
.dpss-test-feedback-page .test-feedback-form textarea {
	resize: vertical;
	min-height: 60px;
}
.dpss-test-feedback-page .test-radios {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.dpss-test-feedback-page .test-radios label {
	font-weight: normal;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
}
.dpss-test-feedback-page .test-radios input[type="radio"] {
	margin: 0;
}
.dpss-test-feedback-page .test-msg {
	padding: 10px 14px;
	border-radius: var(--dpss-radius-sm, 6px);
	margin-bottom: 14px;
	font-weight: 500;
}
.dpss-test-feedback-page .test-msg--ok {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
.dpss-test-feedback-page .test-msg--err {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}
.dpss-test-feedback-page .test-table,
.admin-page .fb-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.dpss-test-feedback-page .test-table th,
.dpss-test-feedback-page .test-table td,
.admin-page .fb-table th,
.admin-page .fb-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--dpss-border-light);
	text-align: left;
	vertical-align: top;
}
.dpss-test-feedback-page .admin-table-wrap--expanded .test-table thead th,
.admin-page .admin-table-wrap--expanded .fb-table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
}
.dpss-test-feedback-page .test-badge,
.admin-page .fb-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.dpss-test-feedback-page .test-badge.test-ok,
.admin-page .fb-badge--ok {
	background: #d4edda;
	color: #155724;
}
.dpss-test-feedback-page .test-badge.test-probleme,
.admin-page .fb-badge--probleme {
	background: #f8d7da;
	color: #721c24;
}
.dpss-test-feedback-page .test-badge.test-suggestion,
.admin-page .fb-badge--suggestion {
	background: #fff3cd;
	color: #856404;
}
.dpss-test-feedback-page .test-badge.test-badge--resolved {
	background: #d4edda;
	color: #155724;
	font-weight: 700;
}
.dpss-test-feedback-page .test-badge.test-badge--en-attente {
	background: #fff3cd;
	color: #856404;
}
.dpss-test-feedback-page .test-row--resolved,
.admin-page .fb-table tr.fb-row--resolu {
	opacity: 0.65;
}
.dpss-test-feedback-page .test-empty,
.admin-page .fb-empty {
	text-align: center;
	color: var(--dpss-text-muted);
	padding: 32px 0;
	font-style: italic;
}
.dpss-test-feedback-page .test-meta,
.admin-page .fb-meta {
	color: var(--dpss-text-muted);
	font-size: 12px;
}
.admin-page .fb-meta {
	white-space: nowrap;
}
.admin-page .fb-filters {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.admin-page .fb-filters a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	color: var(--dpss-text-muted, #4a6a8a);
	background: transparent;
	border: 1px solid var(--dpss-border-light, #c8d8e8);
}
.admin-page .fb-filters a:hover {
	background: var(--dpss-primary-soft, #e8f0fa);
	color: var(--dpss-text, #0d2b45);
}
.admin-page .fb-filters a.fb-filter--active {
	background: var(--dpss-planning-settings-hover, #dce8f5);
	border-color: var(--dpss-border, #a8c4dd);
	color: var(--dpss-text, #0d2b45);
	font-weight: 700;
}
.admin-page .fb-table td.fb-cb {
	text-align: center;
	width: 36px;
}
.admin-page .fb-table td.fb-cb input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}
.admin-page .fb-desc {
	max-width: 320px;
	word-break: break-word;
}
.admin-page .fb-cmt {
	max-width: 280px;
	word-break: break-word;
	font-size: 12px;
	color: var(--dpss-text-muted);
}
.admin-page .fb-summary {
	display: flex;
	gap: 16px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--dpss-text-muted);
}
.admin-page .fb-summary strong {
	color: var(--dpss-text);
}
@media (max-width: 800px) {
	.dpss-test-feedback-page .test-table,
	.admin-page .fb-table {
		font-size: 12px;
	}
	.dpss-test-feedback-page .test-table th,
	.dpss-test-feedback-page .test-table td,
	.admin-page .fb-table th,
	.admin-page .fb-table td {
		padding: 6px 8px;
	}
	.admin-page .fb-desc,
	.admin-page .fb-cmt {
		max-width: 180px;
	}
}
@media (max-width: 640px) {
	.dpss-test-feedback-page .test-radios {
		flex-direction: column;
		gap: 8px;
	}
}

/* ── 6g. Annuaire (numéros importants) ── */
.dpss-annuaire-page {
	--dpss-annuaire-section-max-h: min(38vh, 17.5rem);
	--dpss-annuaire-section-sector-max-h: min(46vh, 21rem);
}
.dpss-annuaire-page .staffing-urgences-banner {
	margin: 0 0 0.75rem;
}
.dpss-annuaire-page .staffing-urgences-banner[hidden],
.dpss-annuaire-page .staffing-detail-contact-chip[hidden] {
	display: none;
}
.dpss-annuaire-directory {
	margin-top: 0;
}
.dpss-annuaire-toolbar {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
.dpss-annuaire-toolbar h4 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.dpss-annuaire-toolbar__count {
	font-weight: 400;
	font-size: 13px;
	color: var(--dpss-text-muted);
	background: var(--dpss-surface-muted);
	padding: 2px 8px;
	border-radius: 10px;
}
.dpss-annuaire-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.dpss-annuaire-search {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: min(100%, 220px);
}
.dpss-annuaire-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.dpss-annuaire-search__input {
	width: 100%;
	min-width: 180px;
	box-sizing: border-box;
}
.dpss-annuaire-directory__hint {
	margin: 0 0 0.5rem 0;
	font-size: 0.88rem;
}
.dpss-annuaire-directory__sections {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.dpss-annuaire-directory--searching .dpss-annuaire-section[open] > .dpss-annuaire-section__body {
	max-height: none;
	overflow: visible;
	overscroll-behavior: auto;
}
.dpss-annuaire-directory__empty[hidden] {
	display: none;
}
.dpss-annuaire-section {
	margin-bottom: 0;
	border: 1px solid var(--dpss-border-light);
	border-radius: var(--dpss-radius-sm, 8px);
	background: var(--dpss-surface);
	overflow: hidden;
}
.dpss-annuaire-section[hidden] {
	display: none;
}
.dpss-annuaire-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dpss-text);
	cursor: pointer;
	list-style: none;
	border-left: 3px solid var(--dpss-planning-border-accent);
	background: linear-gradient(135deg, #e8f0fa, #f4f8fc);
}
.dpss-annuaire-section__title::before {
	content: "▸";
	flex: none;
	font-size: 0.75rem;
	color: var(--dpss-text-muted);
	transition: transform 0.15s ease;
}
.dpss-annuaire-section[open] > .dpss-annuaire-section__title::before {
	transform: rotate(90deg);
}
.dpss-annuaire-section__body {
	max-height: none;
	overflow: visible;
}
.dpss-annuaire-section[open] > .dpss-annuaire-section__body {
	max-height: var(--dpss-annuaire-section-max-h);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}
.dpss-annuaire-section--editing > .dpss-annuaire-section__body,
.dpss-annuaire-section:has(.dpss-annuaire-entry-panel) > .dpss-annuaire-section__body {
	max-height: none;
	overflow: visible;
	overscroll-behavior: auto;
}
.dpss-annuaire-section--sector[open] > .dpss-annuaire-section__body {
	max-height: var(--dpss-annuaire-section-sector-max-h);
}
.dpss-annuaire-section__title::-webkit-details-marker {
	display: none;
}
.dpss-annuaire-section__count {
	font-size: 11px;
	font-weight: 600;
	color: var(--dpss-text-muted);
	background: var(--dpss-surface);
	border: 1px solid var(--dpss-border-light);
	border-radius: 999px;
	padding: 1px 7px;
	margin-left: auto;
}
.dpss-annuaire-section__sites {
	padding: 0;
}
.dpss-annuaire-section__tiers {
	padding: 0;
}
.dpss-annuaire-placement-tier + .dpss-annuaire-placement-tier {
	border-top: 1px solid var(--dpss-border-light);
}
.dpss-annuaire-placement-tier__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0.45rem 0.75rem 0.35rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--dpss-text);
	background: var(--dpss-surface-muted, #f8fafc);
	position: sticky;
	top: 0;
	z-index: 3;
	border-bottom: 1px solid var(--dpss-border-light);
}
.dpss-annuaire-placement-tier__count {
	font-size: 10px;
	font-weight: 600;
	color: var(--dpss-text-muted);
	background: var(--dpss-surface);
	border: 1px solid var(--dpss-border-light);
	border-radius: 999px;
	padding: 1px 6px;
	margin-left: auto;
}
.dpss-annuaire-site-group + .dpss-annuaire-site-group {
	border-top: 1px solid var(--dpss-border-light);
}
.dpss-annuaire-site-group__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0.35rem 0.75rem 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dpss-text-muted);
	background: var(--dpss-surface);
	position: sticky;
	top: 0;
	z-index: 2;
	border-bottom: 1px solid var(--dpss-border-light);
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}
.dpss-annuaire-site-group__count {
	font-size: 10px;
	font-weight: 600;
	color: var(--dpss-text-muted);
	background: var(--dpss-surface);
	border: 1px solid var(--dpss-border-light);
	border-radius: 999px;
	padding: 1px 6px;
	margin-left: auto;
}
.dpss-annuaire-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dpss-annuaire-entry {
	border-top: 1px solid var(--dpss-border-light);
	padding: 0.35rem 0.75rem;
}
.dpss-annuaire-entry[hidden] {
	display: none;
}
.dpss-annuaire-entry__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.5rem 0.75rem;
	align-items: start;
}
.dpss-annuaire-entry__row--no-type {
	grid-template-columns: 1fr auto;
}
.dpss-annuaire-entry--editable {
	cursor: pointer;
}
.dpss-annuaire-entry--editable:hover:not(.dpss-annuaire-entry--selected) {
	background: rgba(2, 132, 199, 0.04);
}
.dpss-annuaire-entry--editable:focus-visible {
	outline: 2px solid var(--dpss-primary, #0284c7);
	outline-offset: 2px;
}
.dpss-annuaire-entry--editable .dpss-annuaire-entry__tel,
.dpss-annuaire-entry--editable .dpss-annuaire-entry__int {
	cursor: pointer;
}
.dpss-annuaire-entry__type {
	align-self: start;
	padding-top: 0.1rem;
	flex: none;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--dpss-text-muted);
	white-space: nowrap;
	min-width: 3.5rem;
}
.dpss-annuaire-entry__label {
	font-weight: 600;
	color: var(--dpss-text);
	min-width: 0;
	align-self: start;
	line-height: 1.35;
}
.dpss-annuaire-entry__name {
	font-weight: 500;
	color: var(--dpss-text-muted);
	display: inline-block;
	vertical-align: top;
}
.dpss-annuaire-entry__phones--aligned {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 0.5rem;
	row-gap: 0.35rem;
	justify-content: end;
	align-items: baseline;
	align-self: start;
	font-variant-numeric: tabular-nums;
}
.dpss-annuaire-entry__phones--aligned.dpss-annuaire-entry__phones--with-kind {
	grid-template-columns: auto max-content max-content;
	column-gap: 0.5rem;
}
.dpss-annuaire-entry__phones--aligned .dpss-annuaire-entry__phone-line {
	display: contents;
}
.dpss-annuaire-entry__phone-kind {
	text-align: right;
	white-space: nowrap;
	line-height: 1.35;
}
.dpss-annuaire-entry__phone-kind-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--dpss-text-muted);
}
.dpss-annuaire-entry__phone-main,
.dpss-annuaire-entry__phone-int {
	text-align: right;
	white-space: nowrap;
	line-height: 1.35;
}
.dpss-annuaire-entry__phone-line {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.5rem;
	line-height: 1.35;
	white-space: nowrap;
}
.dpss-annuaire-entry__phones {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.25rem 0.5rem;
	justify-content: flex-end;
	font-variant-numeric: tabular-nums;
	align-self: start;
}
.dpss-annuaire-entry__tel {
	font-weight: 600;
	text-decoration: none;
	color: var(--dpss-primary, #0284c7);
	white-space: nowrap;
}
.dpss-annuaire-entry__tel:hover,
.dpss-annuaire-entry__tel:focus-visible {
	text-decoration: underline;
}
.dpss-annuaire-entry__int {
	font-size: 12px;
	color: var(--dpss-text-muted);
	white-space: nowrap;
	text-decoration: none;
}
.dpss-annuaire-entry__int:hover,
.dpss-annuaire-entry__int:focus-visible {
	text-decoration: underline;
}
.dpss-annuaire-entry__sep {
	color: var(--dpss-text-muted);
}
.dpss-annuaire-entry__note {
	margin: 0.35rem 0 0 4.25rem;
	font-size: 11px;
}
.dpss-annuaire-entry--inactive .dpss-annuaire-entry__label {
	opacity: 0.65;
}
.dpss-annuaire-entry--selected {
	background: rgba(2, 132, 199, 0.06);
}
.dpss-annuaire-entry-panel {
	list-style: none;
	border-top: 1px solid var(--dpss-border-light);
	padding: 0;
	background: var(--dpss-surface-muted);
	max-height: min(70vh, 30rem);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}
.dpss-annuaire-entry-panel .admin-user-edit-card {
	margin: 0;
	padding: 0.5rem 0.75rem 0.75rem;
}
.dpss-annuaire-entry-panel .admin-user-edit-card__inner {
	max-height: none;
	overflow: visible;
}
.dpss-annuaire-entry-panel .dpss-annuaire-form {
	max-width: none;
}
@media (max-width: 720px) {
	.dpss-annuaire-page {
		--dpss-annuaire-section-max-h: min(42vh, 15rem);
		--dpss-annuaire-section-sector-max-h: min(50vh, 18rem);
	}
	.dpss-annuaire-entry__row,
	.dpss-annuaire-entry__row--no-type {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.dpss-annuaire-entry__phones,
	.dpss-annuaire-entry__phones--aligned,
	.dpss-annuaire-entry__phones--aligned.dpss-annuaire-entry__phones--with-kind {
		justify-content: flex-start;
		align-items: flex-start;
	}
	.dpss-annuaire-entry__note {
		margin-left: 0;
	}
	.dpss-annuaire-toolbar__actions {
		width: 100%;
		margin-left: 0;
	}
}
.dpss-annuaire-empty {
	color: var(--dpss-text-muted);
}
.dpss-annuaire-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	color: #92400e;
	background: #fef3c7;
	border-radius: 8px;
	padding: 1px 7px;
	margin-left: 6px;
	vertical-align: middle;
}
.dpss-annuaire-form {
	max-width: 40rem;
}
.dpss-annuaire-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	align-items: end;
}
.dpss-annuaire-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13px;
	min-width: 0;
}
.dpss-annuaire-field > span {
	font-weight: 600;
	color: var(--dpss-text);
}
.dpss-annuaire-field input[type="text"],
.dpss-annuaire-field input[type="number"],
.dpss-annuaire-field select {
	padding: 6px 8px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 13px;
	background: var(--dpss-surface);
	width: 100%;
	box-sizing: border-box;
}
.dpss-annuaire-field--check {
	flex-direction: row;
	align-items: center;
	gap: 6px;
}
.dpss-annuaire-form__actions {
	grid-column: 1 / -1;
}
.dpss-annuaire-form__toolbar {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
	flex-wrap: wrap;
}
.dpss-annuaire-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dpss-annuaire-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	align-items: end;
	padding: 10px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #f8fafc;
}
.dpss-annuaire-row__del {
	grid-column: 2;
	justify-self: end;
	align-self: end;
	padding: 6px 10px;
	line-height: 1;
}
.dpss-annuaire-field[hidden] {
	display: none;
}
@media (max-width: 720px) {
	.dpss-annuaire-form__grid,
	.dpss-annuaire-row {
		grid-template-columns: 1fr;
	}
	.dpss-annuaire-row__del {
		grid-column: 1;
	}
}

/* ── 6h. Organisation — libellés organigramme (schéma admin) ── */
.dpss-orga-admin-layout {
	display: grid;
	grid-template-columns: auto minmax(280px, 1fr);
	gap: 16px;
	align-items: start;
}
.dpss-orga-admin-layout .dpss-orga-levels-card {
	margin-top: 0;
	width: fit-content;
	max-width: 100%;
}
.dpss-orga-admin-layout .dpss-orga-labels-card {
	margin-top: 0;
	min-width: 0;
}
.dpss-orga-admin-layout .dpss-orga-labels-card__intro {
	max-width: none;
}
.dpss-orga-labels-card__intro {
	margin: 4px 0 14px;
	line-height: 1.55;
	max-width: 52rem;
}
.dpss-orga-labels-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.dpss-orga-labels-preview {
	overflow-x: auto;
	padding: 8px 4px 4px;
}
.dpss-orga-labels-preview__layout {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	max-width: 560px;
	margin: 0 auto;
}
.dpss-orga-labels-preview__side {
	flex: 0 0 min(170px, 38%);
	padding-top: 44px;
}
.dpss-orga-labels-preview__trunk {
	flex: 1 1 240px;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}
.dpss-orga-labels-preview__chief {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 240px;
}
.dpss-orga-labels-preview__conn {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 18px;
}
.dpss-orga-labels-preview__conn span {
	display: block;
	width: 2px;
	height: 100%;
	background: var(--dpss-border, #cbd5e1);
}
.dpss-orga-labels-preview__groups {
	width: 100%;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: var(--dpss-radius-sm, 8px);
	background: var(--dpss-surface-muted, #f8fafc);
	overflow: hidden;
}
.dpss-orga-labels-preview__groups-title {
	padding: 6px 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
	color: #fff;
	background: #64748b;
}
.dpss-orga-labels-preview__groups-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 12px 10px 8px;
}
.dpss-orga-labels-preview__operational {
	padding: 0 10px 12px;
	border-top: 1px dashed var(--dpss-border-light, #e2e8f0);
}
.dpss-orga-labels-node {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	width: 100%;
}
.dpss-orga-labels-node__label {
	font-size: 10px;
	line-height: 1.35;
	color: var(--dpss-text-muted, #64748b);
}
.dpss-orga-labels-node__input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: var(--dpss-radius-sm, 6px);
	font-size: 12px;
	font-weight: 600;
	background: var(--dpss-surface, #fff);
	color: var(--dpss-text, #0f172a);
}
.dpss-orga-labels-node__input:focus-visible {
	outline: 2px solid var(--dpss-primary, #0284c7);
	outline-offset: 1px;
	border-color: var(--dpss-primary, #0284c7);
}
.dpss-orga-labels-node__input:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}
.dpss-orga-labels-node--root {
	width: 100%;
	max-width: 240px;
}
.dpss-orga-labels-node--root .dpss-orga-labels-node__input {
	border-top: 3px solid #334155;
}
.dpss-orga-labels-node--coord .dpss-orga-labels-node__input {
	border-top: 3px solid #7c3aed;
}
.dpss-orga-labels-node--sector-static {
	align-items: center;
	text-align: center;
	padding: 8px 12px;
	border: 1px dashed var(--dpss-border, #cbd5e1);
	border-radius: var(--dpss-radius-sm, 8px);
	background: #334155;
	color: #fff;
	max-width: 220px;
}
.dpss-orga-labels-node--sector-static .dpss-orga-labels-node__static-title {
	font-size: 12px;
	font-weight: 700;
}
.dpss-orga-labels-node--sector-static .dpss-orga-labels-node__static-hint {
	font-size: 10px;
	opacity: 0.85;
	line-height: 1.35;
}
.dpss-orga-labels-node--sector-chief {
	width: 100%;
}
.dpss-orga-labels-node--sector-chief .dpss-orga-labels-node__input {
	border-top: 3px solid #2563eb;
}
.dpss-orga-labels-node--training .dpss-orga-labels-node__input {
	border-top: 3px solid #059669;
}
.dpss-orga-labels-node--group-chief .dpss-orga-labels-node__input {
	border-top: 3px solid #d97706;
}
.dpss-orga-labels-node--operational .dpss-orga-labels-node__input {
	border-top: 3px solid #94a3b8;
	font-weight: 500;
}
.dpss-orga-labels-node__value {
	display: block;
	width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dpss-text, #1e293b);
	background: #fff;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: 4px;
	box-sizing: border-box;
}
.dpss-orga-labels-node--custom .dpss-orga-labels-node__value {
	border-top: 3px solid #6366f1;
}
.dpss-orga-labels-preview__empty {
	margin: 0;
	padding: 6px 8px;
	font-size: 11px;
	font-style: italic;
	color: var(--dpss-text-muted, #64748b);
	background: #f8fafc;
	border: 1px dashed var(--dpss-border-light, #e2e8f0);
	border-radius: 4px;
}
.dpss-orga-labels-form__actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
	border-top: 1px solid var(--dpss-border-light, #e2e8f0);
}
/* ── Niveaux organigramme dynamiques (admin) ── */
.dpss-orga-levels-card {
	margin-top: 16px;
	width: fit-content;
	max-width: 100%;
}
.dpss-orga-levels-table-wrap {
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
}
.dpss-orga-levels-card__help {
	margin-bottom: 10px;
	line-height: 1.45;
	font-size: 12px;
	max-width: 36rem;
}
.dpss-orga-levels-add {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px 8px;
	margin-bottom: 10px;
	width: fit-content;
	max-width: 100%;
}
.dpss-orga-levels-add__field label {
	display: block;
	font-weight: 600;
	font-size: 10px;
	margin-bottom: 2px;
	color: var(--dpss-text-muted, #64748b);
}
.dpss-orga-levels-add__input,
.dpss-orga-levels-add__select {
	box-sizing: border-box;
	padding: 2px 4px;
	font-size: 11px;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: var(--dpss-radius-sm, 4px);
	background: #fff;
}
.dpss-orga-levels-add__input--label { width: 6.5rem; }
.dpss-orga-levels-add__input--key { width: 4.5rem; }
.dpss-orga-levels-add__select { width: 5.5rem; }
.dpss-orga-levels-add__submit {
	flex: 0 0 auto;
}
.dpss-orga-levels-table {
	width: auto;
	table-layout: auto;
	font-size: 11px;
}
.dpss-orga-levels-table th,
.dpss-orga-levels-table td {
	padding: 3px 5px;
	vertical-align: middle;
	white-space: nowrap;
}
.dpss-orga-levels-table__col-label,
.dpss-orga-levels-table__col-key,
.dpss-orga-levels-table__col-zone,
.dpss-orga-levels-table__col-origin,
.dpss-orga-levels-table__col-actions {
	width: auto;
}
.dpss-orga-levels-table code {
	font-size: 10px;
}
.dpss-orga-levels-table__input {
	display: block;
	width: 7.5rem;
	box-sizing: border-box;
	padding: 2px 4px;
	font-size: 11px;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: var(--dpss-radius-sm, 4px);
	background: #fff;
}
.dpss-orga-levels-table__select {
	display: block;
	width: 5.75rem;
	box-sizing: border-box;
	padding: 2px 4px;
	font-size: 11px;
	border: 1px solid var(--dpss-border-light, #e2e8f0);
	border-radius: var(--dpss-radius-sm, 4px);
	background: #fff;
}
.dpss-orga-levels-table__input:focus-visible,
.dpss-orga-levels-table__select:focus-visible {
	outline: 2px solid var(--dpss-focus, #3b82f6);
	outline-offset: 1px;
}
.dpss-orga-levels-form__actions {
	display: flex;
	justify-content: flex-start;
	width: fit-content;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--dpss-border-light, #e2e8f0);
}
.dpss-orga-levels-inactive__title {
	margin: 18px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dpss-text-muted, #64748b);
}
.dpss-orga-levels-table--inactive td {
	color: var(--dpss-text-muted, #64748b);
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node__input:disabled {
	opacity: 1;
	color: inherit;
	cursor: default;
	background: var(--dpss-surface-muted, #f8fafc);
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--root .dpss-orga-labels-node__value {
	border-top: 3px solid #2563eb;
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--coord .dpss-orga-labels-node__value {
	border-top: 3px solid #7c3aed;
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--sector-chief .dpss-orga-labels-node__value {
	border-top: 3px solid #0d9488;
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--training .dpss-orga-labels-node__value {
	border-top: 3px solid #059669;
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--group-chief .dpss-orga-labels-node__value {
	border-top: 3px solid #d97706;
}
.dpss-orga-labels-form--preview-only .dpss-orga-labels-node--operational .dpss-orga-labels-node__value {
	border-top: 3px solid #94a3b8;
}
.dpss-orga-levels-table__actions {
	white-space: nowrap;
}
.dpss-orga-levels-table__actions .admin-btn--sm {
	min-width: 22px;
	padding: 1px 4px;
	font-size: 10px;
}
.dpss-orga-levels-table__actions .admin-note {
	font-size: 10px;
	margin-left: 2px;
}
@media (max-width: 1100px) {
	.dpss-orga-admin-layout {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.dpss-orga-labels-preview__layout {
		flex-direction: column;
		align-items: stretch;
	}
	.dpss-orga-labels-preview__side {
		flex: none;
		padding-top: 0;
		max-width: 240px;
		margin: 0 auto;
	}
	.dpss-orga-labels-preview__trunk {
		max-width: none;
	}
	.dpss-orga-labels-preview__groups-grid {
		grid-template-columns: 1fr;
	}
}

/* ================================================================
   Organigramme — Vue hiérarchique pyramidale 4 niveaux
   ================================================================ */
.orga-pyramid,
.orga-pyramid__main,
.orga-pyramid__axis {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.orga-pyramid {
	/* Conteneur : le débordement (groupes) remonte au scroll de la page */
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-inline: 0;
	padding: 20px 0;
	overflow-x: visible;
	overflow-y: visible;
	align-items: stretch;
}
.orga-pyramid__axis {
	position: relative;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* Axe du tronc → bord intérieur des côtés */
	--orga-trunk-side-gap: 240px;
	padding-left: 12px;
	padding-right: 12px;
}
.orga-pyramid__main {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.orga-pyramid__groups {
	align-self: center;
	width: max-content;
	max-width: none;
	min-width: 0;
	margin-top: 0;
	box-sizing: border-box;
	overflow-x: visible;
	overflow-y: visible;
	display: flex;
	justify-content: center;
}

body.rub-organigramme .admin-page {
	max-width: 100%;
	min-width: 0;
	overflow-x: visible;
}
/* ── Coordination (gauche) / Secteurs (droite) : ancrés à l’axe du tronc ── */
.orga-sidecard,
.orga-sidebar {
	position: absolute;
	z-index: 5;
	left: 50%;
	right: auto;
	top:88px;
}
.orga-sidecard {
	/* Bord droit à --orga-trunk-side-gap du centre */
	transform: translateX(calc(-100% - var(--orga-trunk-side-gap)));
	min-width: 200px;
}
.orga-sidecard .orga-card {
	min-width: 170px;
}
.orga-sidecard--stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.orga-sidecard--stack .orga-card {
	margin-bottom: 0;
}

.orga-sidebar {
	/* Bord gauche à --orga-trunk-side-gap du centre (même écart que Coordination) */
	transform: translateX(var(--orga-trunk-side-gap));
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
}

/* ── Niveau ── */
.orga-level {
	display: flex;
	justify-content: center;
}
.orga-level--root {
	padding: 0 0 8px;
}

/* ── Cartes ── */
.orga-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.07);
	overflow: hidden;
	min-width: 180px;
}
.orga-card--root {
	border-top: 4px solid #1e3a5f;
	box-shadow: 0 3px 16px rgba(30,58,95,0.12);
	min-width: 240px;
}
.orga-card--sector {
	border-top: 3px solid #334155;
	min-width: 150px;
}
.orga-card--chief,
.orga-card--transverse {
	border-top-width: 3px;
	border-top-style: solid;
}
.orga-card--chief {
	border-top-color: #2563eb;
	background: #f0f7ff;
}
.orga-card--groups {
	border-top: 3px solid #94a3b8;
	min-width: 0;
	/* Largeur = colonnes harmonisées (pas 100 % forcé) */
	width: max-content;
	max-width: none;
	box-sizing: border-box;
}
.orga-card--transverse {
	border-top-color: #7c3aed;
	background: #faf5ff;
	min-width: 220px;
}

.orga-card__title {
	background: #1e3a5f;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	text-align: center;
	letter-spacing: 0.03em;
}
.orga-card--sector .orga-card__title { background: #334155; font-size: 12px; }
.orga-card--chief .orga-card__title { background: #2563eb; }
.orga-card--groups .orga-card__title { background: #64748b; }
.orga-card--transverse .orga-card__title { background: #7c3aed; }

.orga-card__title--sm,
.orga-card--chief .orga-card__title,
.orga-card--groups .orga-card__title,
.orga-card--transverse .orga-card__title {
	font-size: 11px;
	padding: 5px 10px;
}

.orga-card__people {
	padding: 8px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
}
.orga-card__people--vert {
	flex-direction: column;
	align-items: stretch;
}

.orga-card__section {
	padding: 8px 10px;
	border-bottom: 1px solid #f1f5f9;
}
.orga-card__section:last-child { border-bottom: none; }

/* ── Pastille collaborateur ── */
.orga-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-size: 11px;
	color: #334155;
	line-height: 1.5;
	white-space: nowrap;
}
.orga-chip--chief {
	font-weight: 600;
}
.orga-chip--training {
	font-weight: 600;
}
.orga-chip--group-chief {
	font-weight: 600;
}
.orga-chip--self {
	background: #dbeafe;
	border-color: #3b82f6;
	font-weight: 600;
}
.orga-chip--inactive {
	opacity: 0.65;
}
.orga-chip--empty {
	color: #94a3b8;
	font-style: italic;
	border-style: dashed;
}
.orga-chip__name { font-weight: 500; }
.orga-chip__role { font-size: 10px; color: #64748b; }

.orga-chip__badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.4;
}
.orga-chip__badge--self  { background: #3b82f6; color: #fff; }
.orga-chip__badge--inactive { background: #fee2e2; color: #991b1b; }
.orga-chip--system { opacity: 0.8; }

/* ── Connecteurs ── */
.orga-conn {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 24px;
	position: relative;
}
.orga-conn__vline {
	width: 2px;
	height: 100%;
	background: #cbd5e1;
}
.orga-conn--trunk {
	width: 100%;
	height: 30px;
	justify-content: center;
}
.orga-conn--trunk .orga-conn__vline {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-1px);
	height: 100%;
}
/* Liaison horizontale : bord intérieur Coordination → Secteurs (= 2 × gap depuis l’axe) */
.orga-conn__hline {
	position: absolute;
	top: 50%;
	left: calc(50% - var(--orga-trunk-side-gap, 240px));
	width: calc(2 * var(--orga-trunk-side-gap, 240px));
	height: 2px;
	margin-top: -1px;
	background: #cbd5e1;
	pointer-events: none;
}

/* ── Colonnes (secteurs) ── */
.orga-columns {
	display: flex;
	gap: 28px;
	justify-content: center;
	padding: 0 16px;
}
.orga-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Blocs groupes ── */
.orga-groups {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: max-content;
	max-width: none;
	box-sizing: border-box;
	padding: 8px;
}
.orga-groups--measuring .orga-group-block {
	flex: 0 0 auto;
	width: max-content;
	min-width: max-content;
	max-width: none;
}
.orga-group-block {
	padding: 6px 10px;
	background: #f8fafc;
	border-radius: 6px;
	border-left: 3px solid #cbd5e1;
	min-width: 0;
	/* Largeur unique = max contenu (fixée par JS → --orga-group-col-width) */
	flex: 0 0 var(--orga-group-col-width, auto);
	width: var(--orga-group-col-width, max-content);
	box-sizing: border-box;
}
.orga-group-block--training {
	border-left-color: #d97706;
	background: #fffbeb;
}
.orga-group-block__title {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
	padding-bottom: 3px;
	border-bottom: 1px solid #e2e8f0;
}
.orga-group-block__role {
	margin: 4px 0;
}
.orga-group-block__role-label {
	font-size: 10px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 2px;
}
.orga-group-block__people {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ── Sidebar secteurs (éléments internes) ── */
.orga-sidebar__title {
	font-size: 10px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
	padding: 0 6px;
}
.orga-sidebar__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 5px;
	border-left: 3px solid #cbd5e1;
	background: #fff;
	font-size: 12px;
	color: #334155;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s;
	min-width: 130px;
}
.orga-sidebar__item:hover {
	background: #f1f5f9;
	border-left-color: #94a3b8;
}
.orga-sidebar__item--active {
	background: #eff6ff;
	border-left-color: #2563eb;
	font-weight: 700;
	color: #1e40af;
	cursor: default;
	pointer-events: none;
}
.orga-sidebar__item-label {
	overflow: hidden;
	text-overflow: ellipsis;
}
.orga-sidebar__item-count {
	font-size: 10px;
	font-weight: 600;
	color: #94a3b8;
	background: #f1f5f9;
	padding: 1px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
}
.orga-sidebar__item--active .orga-sidebar__item-count {
	color: #2563eb;
	background: #dbeafe;
}

@media (max-width: 600px) {
	.orga-sidebar { max-height: 200px; min-width: 110px; }
	.orga-sidebar__item { font-size: 11px; padding: 4px 8px; min-width: 100px; }
	.orga-pyramid { padding: 8px 12px; }
	.orga-columns { flex-direction: column; align-items: center; gap: 14px; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.orga-columns { flex-wrap: wrap; gap: 20px; }
	.orga-card { min-width: 140px; }
	.orga-card--groups { min-width: 0; width: 100%; max-width: 100%; }
	.orga-groups {
		flex-wrap: wrap;
		width: 100%;
		max-width: 100%;
	}
	.orga-group-block {
		flex: 1 1 120px;
		width: auto;
		min-width: 120px;
	}
	.orga-pyramid {
		padding-left: 12px;
		padding-right: 12px;
	}
	.orga-pyramid__axis {
		padding-left: 12px;
		padding-right: 12px;
	}
	.orga-sidecard,
	.orga-sidebar {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		margin-top: 24px;
		max-height: none;
	}
	.orga-sidebar { flex-direction: row; flex-wrap: wrap; gap: 6px; }
}