/*
Theme Name:        Bespin
Description:       Front-office of the Bespin support platform. Display only: business logic lives in the bespin-core plugin.
Version:           0.19.0
Requires at least: 6.5
Requires PHP:      8.2
Author:            La Source
*/

/*
 * Pas d'en-tête « Text Domain » : les textes du thème utilisent le domaine
 * « bespin », dont le catalogue (languages/) est fourni et chargé par le
 * plugin bespin-core. Déclarer ce domaine ici ferait pointer WordPress vers
 * le dossier languages/ du thème, vide.
 *
 * Interface sobre, aux neutres chauds : les couleurs de l'instance (réglages
 * de la plateforme) surchargent --bespin-primary et --bespin-secondary, qui
 * portent l'identité (boutons, liens, accents) ; tout le reste est neutre.
 */

/* ==========================================================================
   Police : Public Sans variable (100–900), auto-hébergée (licence OFL)
   ========================================================================== */

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/public-sans/public-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/public-sans/public-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/*
	 * Identité de l'instance (surchargées par les réglages) : principale pour
	 * les boutons, liens et accents ; secondaire, claire, pour les fonds teintés.
	 */
	--bespin-primary: #2f5d8a;
	--bespin-secondary: #e8eef5;

	/* Encre : texte et neutres en dérivent (brun très sombre, neutre chaud). */
	--bespin-ink: #322514;
}

/*
 * Palette dérivée : déclarée sur body pour que les mélanges utilisent les
 * couleurs de l'instance, injectées sur :root par l'en-tête.
 */
body {
	/* Accents */
	--bespin-accent: color-mix(in oklch, var(--bespin-primary), #fff 28%);
	--bespin-primary-ink: color-mix(in srgb, var(--bespin-primary) 80%, var(--bespin-ink));
	--bespin-primary-hover: color-mix(in srgb, var(--bespin-primary) 85%, var(--bespin-ink));
	--bespin-tint: color-mix(in srgb, var(--bespin-secondary) 45%, #fff);
	--bespin-tint-line: color-mix(in srgb, var(--bespin-secondary), var(--bespin-primary) 18%);

	/* Surfaces : blanc légèrement teinté par la couleur secondaire. */
	--bespin-bg: color-mix(in srgb, var(--bespin-secondary) 12%, #fffdfb);
	--bespin-surface: #fff;
	--bespin-surface-alt: color-mix(in srgb, var(--bespin-secondary) 18%, #fffdfb);
	--bespin-sidebar: color-mix(in srgb, var(--bespin-secondary) 32%, #fffdfb);
	--bespin-selected: color-mix(in srgb, var(--bespin-secondary) 75%, #fff);
	--bespin-fill: color-mix(in srgb, var(--bespin-secondary) 55%, var(--bespin-ink) 8%);

	/* Bordures : encre diluée. */
	--bespin-border-faint: color-mix(in srgb, var(--bespin-ink) 6%, #fff);
	--bespin-border-soft: color-mix(in srgb, var(--bespin-ink) 9%, #fff);
	--bespin-border-sidebar: color-mix(in srgb, var(--bespin-ink) 10%, var(--bespin-sidebar));
	--bespin-border: color-mix(in srgb, var(--bespin-ink) 14%, #fff);
	--bespin-border-strong: color-mix(in srgb, var(--bespin-ink) 18%, #fff);

	/* Texte */
	--bespin-text: var(--bespin-ink);
	--bespin-text-strong: color-mix(in srgb, var(--bespin-ink) 86%, #fff);
	--bespin-text-soft: color-mix(in srgb, var(--bespin-ink) 74%, #fff);
	--bespin-muted: color-mix(in srgb, var(--bespin-ink) 66%, #fff);
	--bespin-subtle: color-mix(in srgb, var(--bespin-ink) 48%, #fff);
	--bespin-faint: color-mix(in srgb, var(--bespin-ink) 34%, #fff);
}

:root {
	/* États (rouge brique, distinct d'une couleur principale rose ou rouge) */
	--bespin-danger: #b8432f;
	--bespin-danger-soft: #fbe9e4;
	--bespin-danger-line: #ecc0b5;
	--bespin-danger-ink: #8c2f1f;
	--bespin-warning: #b6852f;
	--bespin-warning-soft: #faf1dc;
	--bespin-warning-line: #e6cf9c;
	--bespin-warning-ink: #7a5c1c;
	--bespin-success: #5c8a63;
	--bespin-success-soft: #f1f6f1;
	--bespin-success-line: #cfe0d0;
	--bespin-success-ink: #3f6b46;

	/* Formes */
	--bespin-radius-xs: 3px;
	--bespin-radius-sm: 5px;
	--bespin-radius: 6px;
	--bespin-radius-lg: 8px;
	--bespin-radius-pill: 20px;
	--bespin-shadow: 0 1px 2px rgba(42, 40, 37, 0.05);
	--bespin-shadow-pop: 0 10px 30px rgba(42, 40, 37, 0.12);
	--bespin-tracking-caps: 0.03em;
	--bespin-tracking-caps-wide: 0.05em;

	/* Mise en page */
	--bespin-sidebar-width: 228px;
	--bespin-font: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bespin-bg);
	color: var(--bespin-text);
	font-family: var(--bespin-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--bespin-primary);
	font-weight: 600;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--bespin-primary);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	color: var(--bespin-text);
	line-height: 1.25;
}

h1 {
	margin: 0 0 1rem;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h2 {
	margin: 1.75rem 0 0.75rem;
	font-size: 15px;
	font-weight: 600;
}

h3 {
	font-size: 14px;
	font-weight: 600;
}

button,
summary,
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"] {
	cursor: pointer;
}

:disabled {
	cursor: not-allowed;
}

.container {
	max-width: 1168px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.muted {
	color: var(--bespin-muted);
}

.nowrap {
	white-space: nowrap;
}

/* ==========================================================================
   En-tête : barre du haut sur mobile et tablette, sidebar fixe sur ordinateur
   ========================================================================== */

.site-header {
	background: var(--bespin-sidebar);
	border-bottom: 1px solid var(--bespin-border);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	min-height: 60px;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	color: var(--bespin-text);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.site-brand:hover {
	text-decoration: none;
}

.site-brand__logo {
	display: block;
	/* Hauteur fixe : un logo SVG n'a pas toujours de dimensions propres. */
	width: auto;
	max-width: 180px;
	height: 36px;
	object-fit: contain;
	object-position: left center;
}

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	order: 3;
}

.site-menu {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 1rem 1.5rem;
	order: 2;
	min-width: 0;
}

.site-menu__head {
	display: none;
}

/* Navigation : élément à repère rond, actif sur fond « sélection ». */

.site-nav ul {
	display: flex;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 11px;
	border-radius: var(--bespin-radius);
	color: var(--bespin-text-soft);
	font-weight: 500;
	text-decoration: none;
}

.site-nav a::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	border: 1.5px solid var(--bespin-faint);
	border-radius: 50%;
}

.site-nav a:hover {
	background: var(--bespin-selected);
	color: var(--bespin-text);
	text-decoration: none;
}

.site-nav a.is-active {
	background: var(--bespin-selected);
	color: var(--bespin-text);
	font-weight: 600;
}

.site-nav a.is-active::before {
	border-color: var(--bespin-primary);
	background: var(--bespin-primary);
	box-shadow: inset 0 0 0 2.5px var(--bespin-selected);
}

/* Utilisateur : avatar à initiales, nom, liens du compte. */

.site-user {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-left: auto;
	font-size: 13px;
}

.site-user__id {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.site-user__avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: 50%;
	background: var(--bespin-fill);
	color: var(--bespin-text-soft);
	font-size: 11px;
	font-weight: 600;
}

.site-user__name {
	overflow: hidden;
	color: var(--bespin-text);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-user a {
	color: var(--bespin-text-soft);
	font-weight: 500;
}

.site-user a:hover,
.site-user a[aria-current="page"] {
	color: var(--bespin-text);
}

.site-menu-toggle,
.site-menu-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	background: var(--bespin-surface);
	color: var(--bespin-text);
	font: inherit;
}

.site-menu-toggle[hidden] {
	display: none;
}

body.has-menu-open {
	overflow: hidden;
}

.site-main {
	padding: 26px 0 3rem;
}

/* Mobile et tablette : menu replié derrière le bouton (calque plein écran). */

@media (max-width: 1100px) {

	.site-header__tools {
		order: 2;
		margin-left: auto;
	}

	.site-menu {
		flex-direction: column;
		flex-basis: 100%;
		align-items: stretch;
		gap: 0.75rem;
		order: 3;
		padding-bottom: 0.75rem;
	}

	.site-nav ul {
		flex-direction: column;
	}

	.site-menu .site-user {
		flex-wrap: wrap;
		margin-left: 0;
		padding: 0.75rem 0.75rem 0;
		border-top: 1px solid var(--bespin-border-sidebar);
	}

	.site-user__id {
		flex-basis: 100%;
	}

	.site-header.has-toggle .site-menu {
		display: none;
	}

	.site-header.has-toggle .site-menu.is-open {
		display: flex;
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		flex-direction: column;
		gap: 1rem;
		margin: 0;
		padding: 0.75rem 1.25rem 2rem;
		overflow-y: auto;
		background: var(--bespin-sidebar);
	}

	.site-header.has-toggle .site-menu__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid var(--bespin-border-sidebar);
		font-weight: 700;
	}

	.site-header.has-toggle .site-nav a {
		padding: 0.85rem 0.75rem;
		font-size: 16px;
	}

	.site-header.has-toggle .site-menu .site-user {
		gap: 1rem 1.5rem;
		padding: 1rem 0.75rem 0;
		font-size: 15px;
	}
}

/* Ordinateur : sidebar fixe pleine hauteur (sous la barre d'administration). */

@media (min-width: 1101px) {

	body {
		padding-left: var(--bespin-sidebar-width);
	}

	.site-menu-toggle {
		display: none !important;
	}

	.site-header {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0);
		bottom: 0;
		left: 0;
		z-index: 20;
		width: var(--bespin-sidebar-width);
		border-right: 1px solid var(--bespin-border);
		border-bottom: 0;
		overflow-y: auto;
	}

	.site-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"brand tools"
			"nav nav"
			"user user";
		align-items: center;
		gap: 24px 8px;
		min-height: 100%;
		max-width: none;
		padding: 18px 14px;
	}

	.site-menu {
		display: contents;
	}

	.site-brand {
		grid-area: brand;
		min-height: 36px;
	}

	.site-header__tools {
		grid-area: tools;
		margin-left: 0;
	}

	.site-nav {
		grid-area: nav;
		align-self: start;
	}

	.site-nav ul {
		flex-direction: column;
	}

	.site-menu .site-user {
		grid-area: user;
		flex-direction: column;
		align-items: stretch;
		align-self: end;
		gap: 2px;
		margin: 0;
		padding-top: 14px;
		border-top: 1px solid var(--bespin-border-sidebar);
	}

	.site-user__id {
		margin-bottom: 8px;
	}

	.site-user a {
		padding: 5px 9px;
		border-radius: var(--bespin-radius-sm);
	}

	.site-user a:hover,
	.site-user a[aria-current="page"] {
		background: var(--bespin-selected);
		text-decoration: none;
	}

	.site-main {
		padding: 26px 0 3rem;
	}

	.site-main > .container {
		padding: 0 30px;
	}
}

/* ==========================================================================
   Composants
   ========================================================================== */

.page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.page-header h1 {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.breadcrumb {
	margin: 0 0 0.75rem;
	color: var(--bespin-muted);
	font-size: 12.5px;
}

.breadcrumb a {
	color: var(--bespin-text-soft);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 7px 14px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	background: var(--bespin-surface);
	color: var(--bespin-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, filter 0.15s;
}

.button:hover {
	border-color: var(--bespin-faint);
	background: var(--bespin-surface-alt);
	text-decoration: none;
}

.button--primary {
	border-color: var(--bespin-primary);
	background: var(--bespin-primary);
	color: #fff;
}

.button--primary:hover {
	border-color: var(--bespin-primary-hover);
	background: var(--bespin-primary-hover);
}

.button--block {
	display: flex;
	width: 100%;
	text-align: center;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bespin-primary);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.link-button:hover {
	text-decoration: underline;
}

.link-button--danger {
	color: var(--bespin-danger);
}

/* Messages : fond doux, bordure assortie. */

.notice {
	margin: 0 0 1.25rem;
	padding: 12px 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.notice p {
	margin: 0 0 0.75rem;
}

.notice p:last-child {
	margin-bottom: 0;
}

.notice--info {
	border-color: var(--bespin-tint-line);
	border-left: 3px solid var(--bespin-accent);
	background: var(--bespin-tint);
}

.notice--success {
	border-color: var(--bespin-success-line);
	background: var(--bespin-success-soft);
	color: var(--bespin-success-ink);
}

.notice--warning {
	border-color: var(--bespin-warning-line);
	background: var(--bespin-warning-soft);
	color: var(--bespin-warning-ink);
}

.notice--error {
	border-color: var(--bespin-danger-line);
	background: var(--bespin-danger-soft);
	color: var(--bespin-danger-ink);
}

/* Badges : pastille arrondie bordée ; point coloré pour les statuts. */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius-pill);
	background: var(--bespin-surface-alt);
	color: var(--bespin-text-strong);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}

[class*="badge--status-"]::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.badge--danger,
.badge--severity-bloquante {
	border-color: var(--bespin-danger-line);
	background: var(--bespin-danger-soft);
	color: var(--bespin-danger-ink);
}

.badge--warning,
.badge--internal,
.badge--severity-majeure,
.badge--status-en_attente_client,
.badge--status-rouvert {
	border-color: var(--bespin-warning-line);
	background: var(--bespin-warning-soft);
	color: var(--bespin-warning-ink);
}

.badge--status-nouveau,
.badge--status-en_cours {
	border-color: var(--bespin-tint-line);
	background: var(--bespin-tint);
	color: var(--bespin-primary-ink);
}

.badge--status-nouveau::before {
	background: var(--bespin-accent);
}

.badge--status-resolu,
.badge--status-clos {
	border-color: var(--bespin-success-line);
	background: var(--bespin-success-soft);
	color: var(--bespin-success-ink);
}

.badge--status-clos {
	opacity: 0.75;
}

.badge--visibility {
	border-color: var(--bespin-border);
	background: transparent;
	color: var(--bespin-muted);
}

.empty {
	padding: 24px 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	color: var(--bespin-muted);
	text-align: center;
}

.plain-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Filtres, raccourcis et tableaux
   ========================================================================== */

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 1rem;
}

.filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--bespin-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--bespin-tracking-caps);
	text-transform: uppercase;
}

.filters select,
.filters input[type="search"],
.filters input[type="date"] {
	min-width: 12rem;
	padding: 7px 10px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	background: var(--bespin-surface);
	color: var(--bespin-text);
	font: inherit;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
}

.filters input[type="date"] {
	min-width: 0;
}

.filters input[type="search"] {
	min-width: 14rem;
}

.filters__search {
	flex: 1 1 16rem;
}

.filters__search input {
	width: 100%;
}

.filters__toggle[hidden] {
	display: none;
}

.shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.shortcut {
	padding: 4px 12px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius-pill);
	background: var(--bespin-surface);
	color: var(--bespin-text-strong);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}

.shortcut:hover {
	background: var(--bespin-selected);
	text-decoration: none;
}

.shortcut.is-active {
	border-color: var(--bespin-primary);
	background: var(--bespin-primary);
	color: #fff;
	font-weight: 600;
}

/* Tableau : carte arrondie, en-tête en capitales, lignes séparées finement. */

.table {
	width: 100%;
	border: 1px solid var(--bespin-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	overflow: hidden;
}

.table th,
.table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--bespin-border-faint);
	text-align: left;
	vertical-align: middle;
}

.table tbody tr:last-child > * {
	border-bottom: 0;
}

.table th {
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-color: var(--bespin-fill);
	background: var(--bespin-surface-alt);
	color: var(--bespin-text-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--bespin-tracking-caps);
	text-transform: uppercase;
}

.table tbody tr:hover > td {
	background: var(--bespin-bg);
}

.table td.cell-ref a {
	color: var(--bespin-text-soft);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.table td.cell-title > a {
	color: var(--bespin-text);
}

.table td.cell-title .badge {
	margin-left: 4px;
}

.table--compact th,
.table--compact td {
	padding: 8px 12px;
	font-size: 13px;
}

.table-wrap {
	margin-bottom: 1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-wrap > .table {
	margin: 0;
}

.table-wrap .table--stats {
	min-width: 640px;
}

.table--stats .num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.table--stats th.stats-tag {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: 1rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: var(--bespin-radius);
	color: var(--bespin-text-soft);
	font-weight: 500;
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	background: var(--bespin-selected);
}

.pagination .current {
	background: var(--bespin-selected);
	color: var(--bespin-text);
	font-weight: 600;
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form {
	max-width: 760px;
	padding: 24px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.field {
	margin-bottom: 1.1rem;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.field label,
.field__label {
	display: block;
	margin-bottom: 5px;
	color: var(--bespin-text);
	font-size: 13px;
	font-weight: 600;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 8px 11px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	background: var(--bespin-surface);
	color: var(--bespin-text);
	font: inherit;
}

.field input::placeholder,
.field textarea::placeholder,
.filters input::placeholder {
	color: var(--bespin-subtle);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filters input:focus,
.filters select:focus,
.comment-form__canned select:focus,
.ticket-tags__add input:focus,
.tag-rename input:focus {
	border-color: var(--bespin-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bespin-primary) 15%, transparent);
}

.field__help {
	margin: 5px 0 0;
	color: var(--bespin-muted);
	font-size: 12.5px;
}

.field__error {
	margin: 5px 0 0;
	color: var(--bespin-danger);
	font-size: 12.5px;
	font-weight: 600;
}

.field__readonly {
	margin: 0;
	padding: 0.5rem 0;
}

.field .checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.field .checkbox input {
	width: auto;
}

.field .choice-inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.3rem 0;
	font-weight: 400;
}

.field .choice-inline input {
	width: auto;
	margin: 0;
	padding: 0;
}

.required {
	color: var(--bespin-danger);
}

.form__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.form--compact {
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
}

.form--compact .field {
	margin-bottom: 0.75rem;
}

input[type="file"] {
	max-width: 100%;
	padding: 0.4rem 0;
	border: 0;
	background: transparent;
}

/* Formulaire de création : sections, cartes à cocher, récapitulatif */

.ticket-form {
	max-width: 860px;
}

.form-section {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.form-section + .form-section {
	padding-top: 1.5rem;
	border-top: 1px solid var(--bespin-border-soft);
}

/* Titre de section : la légende flotte pour ne pas se poser sur la bordure. */
.form-section__title {
	display: flex;
	float: left;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-bottom: 1rem;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
}

.form-section__title + * {
	clear: both;
}

.form-section__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-text);
	color: var(--bespin-bg);
	font-size: 13px;
	font-weight: 700;
}

.choice-group {
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
}

.choice-group > legend {
	margin-bottom: 0.4rem;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
}

.choice-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 10px;
}

.field .choice-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	padding: 13px 14px 13px 38px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	font-weight: 400;
	cursor: pointer;
}

.choice-card input {
	position: absolute;
	top: 15px;
	left: 14px;
	width: auto;
	margin: 0;
	accent-color: var(--bespin-primary);
}

.choice-card__label {
	font-weight: 600;
}

.choice-card__help {
	color: var(--bespin-muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.choice-card:hover {
	border-color: var(--bespin-faint);
	background: var(--bespin-surface-alt);
}

.choice-card:has(input:checked) {
	border-color: var(--bespin-primary);
	background: var(--bespin-tint);
	box-shadow: inset 0 0 0 1px var(--bespin-primary);
}

.choice-card:has(input:focus-visible) {
	outline: 2px solid var(--bespin-primary);
	outline-offset: 2px;
}

.choice-card--criticite-bloquante:has(input:checked) {
	border-color: var(--bespin-danger);
	background: var(--bespin-danger-soft);
	box-shadow: inset 0 0 0 1px var(--bespin-danger);
}

.incident-fields {
	padding: 16px 16px 2px;
	border: 1px solid var(--bespin-border-soft);
	border-left: 3px solid var(--bespin-accent);
	border-radius: 0 var(--bespin-radius-lg) var(--bespin-radius-lg) 0;
	background: var(--bespin-surface-alt);
}

.incident-fields[hidden] {
	display: none;
}

.incident-fields__intro {
	margin: 0 0 0.75rem;
	font-size: 13px;
}

.ticket-summary {
	width: min(640px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 24px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	color: var(--bespin-text);
	box-shadow: 0 20px 50px rgba(42, 40, 37, 0.25);
}

.ticket-summary::backdrop {
	background: rgba(42, 40, 37, 0.45);
}

.ticket-summary h2 {
	margin-top: 0;
}

.ticket-summary__list {
	display: grid;
	grid-template-columns: minmax(8rem, auto) 1fr;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
}

.ticket-summary__list dt {
	color: var(--bespin-muted);
	font-size: 13px;
}

.ticket-summary__list dd {
	margin: 0;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

/* ==========================================================================
   Fiche ticket
   ========================================================================== */

.ticket-ref {
	margin-right: 0.5rem;
	color: var(--bespin-muted);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ticket {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

.ticket__main,
.ticket__meta {
	padding: 20px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.ticket__main > h2:first-child,
.ticket__meta > h2:first-child {
	margin-top: 0;
}

.ticket__description {
	overflow-wrap: anywhere;
}

.ticket__meta dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 1rem;
	margin: 0;
}

.ticket__meta dt {
	color: var(--bespin-muted);
	font-size: 12.5px;
}

.ticket__meta dd {
	margin: 0;
	font-size: 13px;
}

.ticket__internal-title {
	padding-top: 1rem;
	border-top: 1px solid var(--bespin-border-soft);
	color: var(--bespin-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--bespin-tracking-caps-wide);
	text-transform: uppercase;
}

.ticket__transitions {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.ticket__edit {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bespin-border-soft);
}

.ticket__edit summary {
	color: var(--bespin-primary);
	font-weight: 600;
	cursor: pointer;
}

.ticket__details {
	display: grid;
	gap: 0.3rem;
	margin: 1rem 0 0;
	padding: 16px;
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface-alt);
}

.ticket__details dt {
	color: var(--bespin-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.ticket__details dd {
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
}

.ticket__details dd p {
	margin: 0 0 0.4rem;
}

.history {
	margin: 0;
	padding: 0;
	list-style: none;
}

.history li {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 8px 0;
	border-bottom: 1px solid var(--bespin-border-faint);
	font-size: 13px;
}

.history__date,
.history__user {
	color: var(--bespin-muted);
}

/* Messages (commentaires) */

.comments {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.comment {
	margin-bottom: 10px;
	padding: 12px 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.comment--client {
	border-left: 3px solid var(--bespin-accent);
}

.comment--internal {
	border-style: dashed;
	border-color: var(--bespin-warning-line);
	background: var(--bespin-warning-soft);
}

.comment--masked {
	opacity: 0.6;
}

.comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-size: 12.5px;
}

.comment__mask {
	margin-left: auto;
}

.comment__text {
	overflow-wrap: anywhere;
}

.comment__text p:last-child {
	margin-bottom: 0;
}

.comment-form {
	margin-bottom: 1.5rem;
	padding: 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.comment-form__canned {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.comment-form__canned select {
	min-width: 16rem;
	padding: 7px 10px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	background: var(--bespin-surface);
	font: inherit;
	font-size: 13px;
}

.comment-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.comment-form__visibility {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.comment-form__field {
	position: relative;
}

/* Mentions */

.mention-list {
	position: absolute;
	z-index: 5;
	left: 0;
	min-width: 16rem;
	margin: 0.25rem 0 0;
	padding: 4px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	box-shadow: var(--bespin-shadow-pop);
	list-style: none;
}

.mention-list[hidden] {
	display: none;
}

.mention-list li {
	padding: 6px 9px;
	border-radius: var(--bespin-radius-sm);
	cursor: pointer;
}

.mention-list li.is-active,
.mention-list li:hover {
	background: var(--bespin-selected);
	color: var(--bespin-text);
}

.mention {
	padding: 0 0.2em;
	border-radius: var(--bespin-radius-xs);
	background: var(--bespin-tint);
	color: var(--bespin-primary-ink);
	font-weight: 600;
}

/* Pièces jointes */

.attachments {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.attachment {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.attachment svg {
	flex: none;
	color: var(--bespin-muted);
}

.attachment__delete {
	display: inline;
	margin: 0;
}

/* Tags des tickets (équipe) */

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.tag-list--inline {
	display: inline-flex;
	margin: 0 0 0 0.25rem;
	vertical-align: middle;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 1px 8px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius-pill);
	background: var(--bespin-surface);
	color: var(--bespin-text-strong);
	font-size: 11.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.tag a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

a.tag:hover,
.tag a:hover {
	background: var(--bespin-selected);
	text-decoration: none;
}

.tag form {
	display: inline;
	margin: 0;
}

.tag__remove {
	padding: 0 0.15rem;
	border: 0;
	background: none;
	color: var(--bespin-muted);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.tag__remove:hover,
.tag__remove:focus-visible {
	color: var(--bespin-danger);
}

.ticket-tags {
	margin-top: 1rem;
}

.ticket-tags__title {
	margin: 0 0 0.5rem;
	font-size: 13px;
}

.ticket-tags__add,
.tag-rename {
	display: flex;
	gap: 0.5rem;
}

.ticket-tags__add input,
.tag-rename input {
	flex: 1;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--bespin-border-strong);
	border-radius: var(--bespin-radius);
	font: inherit;
	font-size: 13px;
}

.tag-rename input {
	flex: initial;
	max-width: 16rem;
}

/* ==========================================================================
   Temps, projets, crédit d'heures
   ========================================================================== */

.time {
	margin-bottom: 1.5rem;
}

.time h2 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.time__total {
	color: var(--bespin-text);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.time__form {
	margin-top: 1rem;
	padding: 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.time__form h3 {
	margin: 0 0 0.75rem;
}

/* Chiffres clés : libellé en capitales, valeur en grand. */

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 1rem;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 14px 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.stat__label {
	display: block;
	color: var(--bespin-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: var(--bespin-tracking-caps);
	text-transform: uppercase;
}

.stat__value {
	font-size: 24px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.stat--low .stat__value,
.amount--low {
	color: var(--bespin-warning);
}

.stat--low {
	border-color: var(--bespin-warning-line);
}

.stat--negative .stat__value,
.amount--negative {
	color: var(--bespin-danger);
	font-weight: 600;
}

.stat--negative {
	border-color: var(--bespin-danger-line);
	background: var(--bespin-danger-soft);
}

.top-ups li {
	padding: 8px 0;
	border-bottom: 1px solid var(--bespin-border-faint);
	font-size: 13px;
}

.week-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.day {
	margin-bottom: 1rem;
}

.day h2 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-size: 14px;
}

.day--today h2 {
	color: var(--bespin-primary);
}

/* Fiche société */

.company-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.company-title__logo {
	width: auto;
	max-height: 48px;
}

.link-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 10px 0;
	border-bottom: 1px solid var(--bespin-border-faint);
}

/* ==========================================================================
   Notifications
   ========================================================================== */

.notif-menu {
	position: relative;
}

.notif-menu__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--bespin-radius-lg);
	color: var(--bespin-text-soft);
	cursor: pointer;
	list-style: none;
}

.notif-menu__toggle::-webkit-details-marker {
	display: none;
}

.notif-menu__toggle svg {
	width: 18px;
	height: 18px;
}

.notif-menu__toggle:hover,
.notif-menu__toggle.is-active,
.notif-menu[open] .notif-menu__toggle {
	background: var(--bespin-selected);
	color: var(--bespin-text);
}

.notif-menu__count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 17px;
	padding: 0 4px;
	border: 2px solid var(--bespin-sidebar);
	border-radius: 9px;
	background: var(--bespin-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 13px;
	text-align: center;
	box-sizing: content-box;
}

.notif-menu__count[hidden] {
	display: none;
}

.notif-menu__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	width: min(360px, 90vw);
	padding: 12px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	box-shadow: var(--bespin-shadow-pop);
}

.notif-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
	padding: 0 4px;
}

.notif-menu__list {
	max-height: 360px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.notif-menu__list a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: var(--bespin-radius);
	color: var(--bespin-text);
	font-weight: 400;
	text-decoration: none;
}

.notif-menu__list a:hover {
	background: var(--bespin-bg);
}

.notif-menu__list .is-unread a,
.notif-list__item.is-unread .notif-list__link {
	font-weight: 600;
}

.notif-menu__list .is-unread a {
	background: var(--bespin-surface-alt);
	box-shadow: inset 3px 0 0 var(--bespin-accent);
}

.notif-menu__time {
	color: var(--bespin-muted);
	font-size: 12px;
	font-weight: 400;
}

.notif-menu__empty {
	margin: 0.5rem 4px;
}

.notif-menu__all {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--bespin-border-soft);
	font-size: 13px;
	text-align: center;
}

.notif-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 12px 0;
	border-bottom: 1px solid var(--bespin-border-faint);
}

.notif-list__link {
	flex: 1 1 20rem;
}

/*
 * Ordinateur : le panneau s'ouvre dans la zone centrale, à droite de la
 * sidebar et à hauteur de la cloche. Position fixe : la sidebar défile
 * (overflow), un panneau absolu y serait coupé.
 */
@media (min-width: 1101px) {

	.notif-menu__panel {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px);
		right: auto;
		left: calc(var(--bespin-sidebar-width) + 8px);
		z-index: 100;
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 28px);
		overflow-y: auto;
	}
}

/* ==========================================================================
   Tableau de bord, compte
   ========================================================================== */

.dashboard__block {
	margin-bottom: 2rem;
}

.dashboard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.dashboard__count {
	display: inline-block;
	min-width: 1.6em;
	margin-left: 0.4rem;
	padding: 0 0.45em;
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-selected);
	color: var(--bespin-primary-ink);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	vertical-align: middle;
}

.stats-section {
	margin-top: 2rem;
}

.account {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 20px;
	align-items: start;
}

.account .form {
	max-width: none;
}

.account h2 {
	margin-top: 0;
}

/* ==========================================================================
   Wiki
   ========================================================================== */

.doc-index {
	max-width: 48rem;
}

.doc-tree {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.doc-index > .doc-tree {
	padding: 0 16px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
	list-style: none;
}

.doc-index > .doc-tree > li {
	padding: 12px 0;
	border-bottom: 1px solid var(--bespin-border-faint);
}

.doc-index > .doc-tree > li:last-child {
	border-bottom: 0;
}

.doc-index > .doc-tree > li > a {
	color: var(--bespin-text);
	font-weight: 600;
}

.doc-tree li {
	margin: 0.2rem 0;
}

.doc-tree .doc-tree {
	margin-top: 0.3rem;
}

.doc-tree .doc-tree a {
	font-weight: 500;
}

.doc-results {
	max-width: 48rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-result {
	padding: 14px 0;
	border-bottom: 1px solid var(--bespin-border-soft);
}

.doc-result__path {
	margin: 0 0 0.2rem;
	font-size: 12.5px;
}

.doc-result__title {
	margin: 0 0 0.3rem;
	font-size: 15px;
}

.doc-result__excerpt,
.doc-result__meta {
	margin: 0.3rem 0 0;
}

.doc {
	max-width: 48rem;
}

.doc__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: -0.25rem 0 1.5rem;
	font-size: 13px;
}

.doc__meta a.badge {
	text-decoration: none;
}

.doc__content {
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.doc__content h2,
.doc__content h3,
.doc__content h4 {
	margin: 1.75rem 0 0.6rem;
	line-height: 1.3;
}

.doc__content h2 {
	font-size: 18px;
}

.doc__content blockquote {
	margin: 1rem 0;
	padding: 0.25rem 1rem;
	border-left: 3px solid var(--bespin-accent);
	color: var(--bespin-text-soft);
}

.doc__content pre {
	padding: 12px 16px;
	overflow-x: auto;
	border: 1px solid var(--bespin-border-soft);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface-alt);
	font-size: 13px;
	white-space: pre;
	overflow-wrap: normal;
}

.doc__content code {
	font-size: 0.9em;
}

.doc__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.doc__content th,
.doc__content td {
	padding: 6px 10px;
	border: 1px solid var(--bespin-border);
	text-align: left;
}

.doc__content th {
	background: var(--bespin-surface-alt);
}

.doc__children {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bespin-border-soft);
}

.doc__children h2 {
	margin: 0 0 0.5rem;
	font-size: 14px;
}

.doc__delete {
	margin-top: 2rem;
}

.doc-form__editor {
	margin-bottom: 1.1rem;
}

.doc-form__label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
}

.doc-form .wp-editor-wrap {
	max-width: 100%;
}

.doc-form .wp-editor-area {
	width: 100%;
	font-family: ui-monospace, monospace;
}

/* ==========================================================================
   Quarantaine des e-mails entrants
   ========================================================================== */

.quarantine {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.quarantine__email,
.quarantine__actions {
	padding: 20px;
	border: 1px solid var(--bespin-border);
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface);
}

.quarantine__actions h2 {
	margin: 0 0 0.5rem;
	font-size: 14px;
}

.quarantine__actions form + h2 {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bespin-border-soft);
}

.quarantine__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 1rem;
	margin: 0 0 1rem;
	font-size: 13px;
}

.quarantine__meta dt {
	color: var(--bespin-muted);
}

.quarantine__meta dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.quarantine__body {
	max-height: 32rem;
	margin: 0 0 1rem;
	padding: 12px 16px;
	overflow: auto;
	border-radius: var(--bespin-radius-lg);
	background: var(--bespin-surface-alt);
	font-family: inherit;
	font-size: 13.5px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Mobile et tablette
   ========================================================================== */

@media (max-width: 800px) {

	body {
		font-size: 15px;
	}

	.container {
		padding: 0 1rem;
	}

	.site-main {
		padding: 1.25rem 0 2rem;
	}

	h1 {
		font-size: 20px;
	}

	.ticket,
	.field-row,
	.stats,
	.quarantine {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Notifications : panneau sur toute la largeur de l'écran. */
	.notif-menu__panel {
		position: fixed;
		top: 60px;
		right: 1rem;
		left: 1rem;
		width: auto;
	}

	/* Filtres : un champ par ligne, dates côte à côte ; repliés sauf la recherche. */
	.filters {
		align-items: stretch;
		gap: 0.75rem;
	}

	.filters label,
	.filters__search {
		flex: 1 1 100%;
	}

	.filters label:has(input[type="date"]) {
		flex: 1 1 calc(50% - 0.5rem);
	}

	.filters select,
	.filters input {
		width: 100%;
		min-width: 0;
	}

	.filters--collapsible.has-toggle:not(.is-open) > label:not(.filters__search),
	.filters--collapsible.has-toggle:not(.is-open) > button[type="submit"] {
		display: none;
	}

	.filters--collapsible.has-toggle.is-open .filters__toggle {
		display: none;
	}

	/* Listes (tickets, projets, réponses types) : une carte par ligne. */
	.table--cards thead {
		display: none;
	}

	.table--cards,
	.table--cards tbody {
		display: block;
		border: 0;
		background: transparent;
		overflow: visible;
	}

	.table--cards tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem 0.6rem;
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--bespin-border);
		border-radius: var(--bespin-radius-lg);
		background: var(--bespin-surface);
	}

	.table--cards tbody tr:hover > td {
		background: transparent;
	}

	.table--cards td {
		display: block;
		padding: 0;
		border: 0;
	}

	.table--cards td.cell-title {
		flex: 1 1 100%;
		order: -1;
		font-weight: 600;
	}

	.table--cards td.cell-ref {
		order: -2;
		font-size: 12.5px;
	}

	.table--cards td:last-child {
		margin-left: auto;
		color: var(--bespin-muted);
		font-size: 12.5px;
	}

	.form {
		padding: 16px;
	}

	.form__actions,
	.button-row {
		flex-wrap: wrap;
	}

	.ticket__main,
	.ticket__meta {
		padding: 16px;
	}

	.comment-form__canned select {
		width: 100%;
		min-width: 0;
	}

	.comment,
	.comment__text {
		overflow-wrap: anywhere;
	}
}

@media (min-width: 801px) {

	.filters__toggle {
		display: none !important;
	}
}

@media (max-width: 600px) {

	.ticket-summary__list {
		grid-template-columns: 1fr;
	}

	.ticket-summary__list dd {
		margin-bottom: 0.5rem;
	}
}

/* ==========================================================================
   Page de connexion
   ========================================================================== */

body.login-page {
	padding-left: 0;
	background: var(--bespin-bg);
}

.login {
	display: grid;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Panneau d'ambiance : image des réglages sous un voile d'encre, ou couleur principale. */
.login__aside {
	display: none;
	position: relative;
	flex-direction: column;
	justify-content: flex-end;
	gap: 40px;
	padding: 48px 56px;
	overflow: hidden;
	background-color: var(--bespin-primary);
	background-image: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--bespin-secondary) 35%, transparent), transparent 55%);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.login__aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bespin-ink) 10%, transparent) 0%, color-mix(in srgb, var(--bespin-ink) 35%, transparent) 50%, color-mix(in srgb, var(--bespin-ink) 82%, transparent) 100%);
}

.login__aside:not(.has-image)::before {
	background: linear-gradient(200deg, transparent 30%, color-mix(in srgb, var(--bespin-ink) 45%, transparent) 100%);
}

.login__pitch,
.login__copy {
	position: relative;
	z-index: 1;
}

.login__pitch {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 30rem;
}

.login__headline {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-wrap: balance;
}

.login__tagline {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	line-height: 1.5;
}

.login__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
}

/* Formulaire */
.login__main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
}

.login__box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 380px;
}

.login__logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: 44px;
	object-fit: contain;
	object-position: left center;
}

.login__name {
	color: var(--bespin-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.login__header h1 {
	margin: 0 0 6px;
	font-size: 24px;
}

.login__header p {
	margin: 0;
	font-size: 14.5px;
}

.login .notice {
	margin: 0;
}

.login__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.login__form .field {
	margin: 0;
}

.login__form .field label {
	color: var(--bespin-muted);
	font-size: 11px;
	letter-spacing: var(--bespin-tracking-caps);
	text-transform: uppercase;
}

.login__form .field input {
	padding: 11px 13px;
	font-size: 14.5px;
}

.login__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.login__label-row a {
	margin-bottom: 5px;
	font-size: 12.5px;
}

.login__password {
	position: relative;
}

.login__form .login__password input {
	padding-right: 46px;
}

.login__reveal {
	display: inline-flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 var(--bespin-radius) var(--bespin-radius) 0;
	background: none;
	color: var(--bespin-subtle);
}

.login__reveal:hover,
.login__reveal[aria-pressed="true"] {
	color: var(--bespin-text);
}

.login__reveal[hidden],
.login__reveal [data-bespin-password-slash][hidden] {
	display: none;
}

.login__remember {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--bespin-text-strong);
	font-size: 13.5px;
	cursor: pointer;
}

.login__remember input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--bespin-primary);
}

.login__submit {
	margin-top: 4px;
	padding: 12px 16px;
	font-size: 14.5px;
}

.login__help {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--bespin-border-soft);
	font-size: 13px;
}

@media (min-width: 1024px) {

	.login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.login__aside {
		display: flex;
		justify-content: space-between;
	}

	.login__aside:not(:has(.login__pitch)) {
		justify-content: flex-end;
	}

	.login__pitch {
		margin-top: auto;
	}
}