/* ==========================================================================
   Theme Ixarys - surcouche moderne de style_admin.css
   Charge APRES style_admin.css (via debut.php et header.php).
   Clair par defaut, sombre automatique selon la preference systeme,
   ou force par le selecteur de theme du menu (attribut data-theme).
   ========================================================================== */

:root {
	color-scheme: light dark;

	--bg: #f4f6f9;
	--surface: #ffffff;
	--surface-2: #f8fafc;
	--border: #e2e6ec;
	--border-strong: #cfd6df;
	--text: #1c2430;
	--muted: #5d6878;
	--accent: #1f7fc4;
	--accent-hover: #17679f;
	--accent-soft: #e6f1fa;
	--accent-text: #ffffff;
	--danger: #c62828;
	--danger-soft: #fdecea;
	--row-alt: #fafbfc;
	--row-hover: #eef5fb;

	--sidebar-bg: #16202b;
	--sidebar-text: #c3cdd9;
	--sidebar-muted: #7f8c9b;
	--sidebar-hover: #1f2c3a;
	--sidebar-active: #1f7fc4;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--sidebar-w: 248px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Graphiques */
	--serie-1: #2a78d6;
	--statut-ok: #0ca30c;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0f1419;
		--surface: #171d24;
		--surface-2: #1c232b;
		--border: #2a333d;
		--border-strong: #38434f;
		--text: #e4e8ee;
		--muted: #96a1b0;
		--accent: #4aa3e3;
		--accent-hover: #6bb5ea;
		--accent-soft: #16324a;
		--accent-text: #0b1015;
		--danger: #ef6b6b;
		--danger-soft: #3a1c1c;
		--row-alt: #1a2028;
		--row-hover: #1e2a36;

		--sidebar-bg: #0b1015;
		--sidebar-text: #c3cdd9;
		--sidebar-muted: #6f7b89;
		--sidebar-hover: #151d26;
		--sidebar-active: #2b6ea3;

		--shadow: 0 1px 2px rgba(0, 0, 0, .4);

		--serie-1: #3987e5;
	}
}

/* Choix explicite via le sélecteur de thème (js/theme.js) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0f1419;
	--surface: #171d24;
	--surface-2: #1c232b;
	--border: #2a333d;
	--border-strong: #38434f;
	--text: #e4e8ee;
	--muted: #96a1b0;
	--accent: #4aa3e3;
	--accent-hover: #6bb5ea;
	--accent-soft: #16324a;
	--accent-text: #0b1015;
	--danger: #ef6b6b;
	--danger-soft: #3a1c1c;
	--row-alt: #1a2028;
	--row-hover: #1e2a36;

	--sidebar-bg: #0b1015;
	--sidebar-text: #c3cdd9;
	--sidebar-muted: #6f7b89;
	--sidebar-hover: #151d26;
	--sidebar-active: #2b6ea3;

	--shadow: 0 1px 2px rgba(0, 0, 0, .4);

	--serie-1: #3987e5;
}

/* --- Base ---------------------------------------------------------------- */

html {
	background: var(--bg) !important;
}
/* Transparent pour laisser voir les décorations saisonnières (z-index: -1) */
body {
	background: transparent !important;
}
body {
	min-width: 0;
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
}
body:has(#app-sidebar) {
	padding-left: var(--sidebar-w);
}

h1, h2, h3,
#cadreCorps h1, #cadreCorpsLarge h1, .cadreCorpsTresLarge h1,
#cadreCorps h2, #cadreCorpsLarge h2, .cadreCorpsTresLarge h2,
#cadreCorps h3, #cadreCorpsLarge h3, .cadreCorpsTresLarge h3 {
	color: var(--text);
	font-weight: 600;
	letter-spacing: -.01em;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

caption { color: var(--accent); }
.erreur, .error, .rouge { color: var(--danger); }

/* --- Menu lateral ------------------------------------------------------- */

#app-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	width: var(--sidebar-w);
	background: var(--sidebar-bg);
	color: var(--sidebar-text);
	font-size: 14px;
}
#app-sidebar a { text-decoration: none; }

.app-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 20px 18px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.app-brand-mark {
	flex: none;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.app-nav {
	flex: 1;
	overflow-y: auto;
	padding: 12px 10px;
}
.app-nav-link,
.app-nav-group > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	color: var(--sidebar-text);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.app-nav-group > summary::-webkit-details-marker { display: none; }
.app-nav-link:hover,
.app-nav-group > summary:hover {
	background: var(--sidebar-hover);
	color: #fff;
}
.app-nav svg {
	flex: none;
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .85;
}
.app-nav-group > summary .app-chevron {
	margin-left: auto;
	width: 14px;
	height: 14px;
	transition: transform .15s;
}
.app-nav-group[open] > summary .app-chevron { transform: rotate(90deg); }

.app-nav-group { margin: 2px 0; }
.app-nav-sub {
	margin: 2px 0 6px 19px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, .08);
}
.app-nav-sub a {
	display: block;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	color: var(--sidebar-muted);
	font-size: 13.5px;
}
.app-nav-sub a:hover {
	background: var(--sidebar-hover);
	color: #fff;
}
.app-nav-sep {
	height: 0;
	margin: 6px 10px;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
#app-sidebar a.is-active {
	background: var(--sidebar-active);
	color: #fff;
}

.app-user {
	padding: 14px 16px 16px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	font-size: 13px;
}
.app-user-name {
	margin: 0 0 8px;
	color: #fff;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-theme {
	display: flex;
	gap: 2px;
	margin: 0 0 12px;
	padding: 3px;
	background: rgba(255, 255, 255, .05);
	border-radius: var(--radius-sm);
}
.app-theme button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	height: 28px;
	padding: 0 6px;
	font-family: var(--font);
	font-size: 12px;
	color: var(--sidebar-muted);
	background: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.app-theme button:hover { color: #fff; }
.app-theme button[aria-pressed="true"] {
	background: var(--sidebar-hover);
	color: #fff;
}
.app-theme button:focus-visible {
	outline: 2px solid var(--sidebar-active);
	outline-offset: 1px;
}
.app-theme svg {
	flex: none;
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#app-sidebar .app-deco {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--sidebar-muted);
	font-size: 12px;
}
/* La barre latérale reste sombre dans les deux thèmes : on écrase label:hover */
#app-sidebar .app-deco:hover { color: #fff; }
.app-deco svg {
	flex: none;
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linejoin: round;
}
#app-sidebar .app-deco select {
	flex: 1;
	min-width: 0;
	height: 28px;
	margin: 0; /* annule la marge basse de style_admin.css */
	padding: 0 6px;
	font-size: 12px;
	line-height: 26px;
	color: var(--sidebar-text);
	background: var(--sidebar-hover);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius-sm);
	color-scheme: dark;
	cursor: pointer;
}
#app-sidebar .app-deco option {
	color: var(--sidebar-text);
	background: var(--sidebar-bg);
}
#app-sidebar .app-deco select:focus {
	border-color: var(--sidebar-active);
	box-shadow: none;
}

.app-user-links {
	display: flex;
	gap: 14px;
}
.app-user-links a { color: var(--sidebar-muted); }
.app-user-links a:hover { color: #fff; }

/* Sous 900px, le menu latéral devient un menu escamotable (voir "Menu burger" en fin de fichier) */

/* --- Zone de contenu ---------------------------------------------------- */

#corps {
	min-height: 0;
	padding: 28px 32px 40px;
	font-size: 14px;
}
#corps a,
#corps a:visited {
	font-size: inherit;
	color: var(--accent);
}
#corps a:hover { color: var(--accent-hover); }

#cadreCorps,
#cadreCorpsLarge,
.cadreCorpsTresLarge,
.pave,
div.version {
	box-sizing: border-box;
	max-width: 100%;
	padding: 24px;
	margin: 0 auto 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--text);
}
.cadreCorpsTresLarge { width: 100%; }
#cadreCorps,
#cadreCorpsLarge,
.cadreCorpsTresLarge { overflow-x: auto; }

/* --- Tableau de bord (accueil) ------------------------------------------ */

.accueil h1 { margin: 0 0 20px; }
.kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.kpi {
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-valeur {
	margin: 6px 0 4px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.kpi-detail { font-size: 13px; color: var(--muted); }
.kpi-hausse { color: var(--statut-ok); font-weight: 600; }
.kpi-baisse { color: var(--danger); font-weight: 600; }

.graphes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.graphes .pave.graphe { width: auto; margin: 0; }
.graphe h2 { margin: 0; }
.graphe-sous-titre { margin: 2px 0 12px; font-size: 13px; color: var(--muted); }
.graphe-zone { position: relative; height: 320px; }
.graphe-donnees { margin-top: 12px; font-size: 13px; }
.graphe-donnees summary { cursor: pointer; color: var(--accent); }
.graphe-donnees table { margin: 8px 0 0; }
.avancements { display: grid; gap: 22px; margin: 8px 0 20px; }
.avancement-entete {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.avancement-entete strong { color: var(--text); }
.avancement-barre {
	height: 10px;
	background: var(--accent-soft);
	border-radius: 5px;
	overflow: hidden;
}
.avancement-barre > div {
	height: 100%;
	background: var(--accent);
	border-radius: 5px;
}
@media (max-width: 1100px) {
	.graphes { grid-template-columns: minmax(0, 1fr); }
}

/* Tableaux larges (campagne, tracingflight, tracinggest) : tiennent dans la
   largeur de l'écran à 100 % de zoom au lieu de déborder horizontalement. */
.cadreCorpsTresLarge.pleineLargeur { padding: 16px; }
table.tableCompacte {
	width: 100%;
	clear: both;
	font-size: 12px;
}
table.tableCompacte th {
	padding: 6px 4px;
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0;
	/* Retour à la ligne entre les mots uniquement, jamais au milieu d'un mot */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
/* Barre de filtres alignée sur une ligne (tracinggest) */
.barre-filtres { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.barre-filtres > div { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.barre-filtres label { display: inline; height: auto; line-height: normal; margin: 0; }
.barre-filtres input, .barre-filtres select { margin: 0; vertical-align: middle; }
.barre-filtres input[type=submit] { width: auto; padding: 0 14px; text-align: center; }
.barre-filtres input[type=submit].buttoncarre { min-width: 34px; padding: 0 8px; }

/* Défilement horizontal quand le tableau ne tient pas en largeur */
.table-scroll {
	clear: both;
	width: 100%;
	overflow: auto;
	/* Valeur de repli, affinée par js/table-scroll.js selon la place restante */
	max-height: calc(100vh - 220px);
}
.table-scroll > table { margin-top: 0; margin-bottom: 0; }
/* Ligne de titres figée en haut pendant le défilement vertical */
.table-scroll > table > thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	/* L'ombre au-dessus masque le trou d'1px laissé par la bordure du tableau */
	box-shadow: 0 -2px 0 var(--surface-2), inset 0 -1px 0 var(--border);
}

table.tableCompacte td {
	padding: 4px 5px;
	overflow-wrap: break-word;
}
.titrepave,
.titrebleu {
	background: none;
	color: var(--text);
	font-weight: 600;
	height: auto;
	padding: 0 0 12px;
}

/* --- Formulaires -------------------------------------------------------- */

label,
label.inline,
label.label,
label.label30,
label.label_inline_right,
label.label_block_right,
.inputlabel,
.boxinline100, .boxinline200, .boxinline300, .boxinline2 {
	font-family: var(--font);
	font-size: 13px;
	color: var(--muted);
}
label:hover { font-weight: inherit; color: var(--text); }
.inputlabel { font-weight: 600; margin-bottom: 4px; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=search],
select,
textarea {
	box-sizing: border-box;
	height: 34px;
	padding: 6px 10px;
	font-family: var(--font);
	font-size: 14px;
	line-height: 20px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color .15s, box-shadow .15s;
}
textarea { height: 150px; }
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=checkbox],
input[type=radio] { accent-color: var(--accent); }

fieldset {
	margin: 20px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 14px;
}
legend {
	padding: 0 6px;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
}

/* --- Boutons ------------------------------------------------------------ */

input[type=submit],
input[type=reset],
input[type=button],
#corps a.button,
.button {
	box-sizing: border-box;
	height: 34px;
	padding: 0 14px;
	line-height: 32px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 500;
	color: var(--accent-text);
	text-shadow: none;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
#corps a.button,
#corps a.button:visited {
	display: inline-block;
	color: var(--accent-text);
	text-decoration: none;
}
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
#corps a.button:hover,
.button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	border-radius: var(--radius-sm);
	box-shadow: none;
}
input[type=reset] {
	color: var(--text);
	background: var(--surface);
	border-color: var(--border-strong);
}
input[type=reset]:hover { background: var(--surface-2); border-color: var(--border-strong); }
input[type=submit].buttoncarre { padding: 0; }

/* Boutons d'action dans les lignes de tableau (Voir / Supprimer) */
.cellule-actions {
	text-align: center;
	white-space: nowrap;
}
.btn-action {
	box-sizing: border-box;
	display: inline-block;
	height: 26px;
	margin: 0 2px;
	padding: 0 10px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 500;
	line-height: 24px;
	color: var(--accent);
	background: transparent;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}
.btn-action:hover { background: var(--accent-soft); }
.btn-action-danger {
	color: var(--danger);
	border-color: var(--danger);
}
.btn-action-danger:hover { background: var(--danger-soft); }

/* Popup de détail d'un enregistrement */
.popup-fond {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
}
.popup-fenetre {
	min-width: 400px;
	max-width: 80%;
	max-height: 80%;
	overflow: auto;
	padding: 20px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
table.popup-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
table.popup-table th,
table.popup-table td {
	padding: 6px 10px;
	text-align: left;
	border: 1px solid var(--border);
}
table.popup-table th {
	color: var(--text);
	background: var(--surface-2);
	text-transform: none;
	letter-spacing: 0;
}

.message-ok {
	padding: 10px;
	color: var(--statut-ok);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

/* --- Tableaux ----------------------------------------------------------- */

table {
	margin: 20px 0;
	font-size: 13.5px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
}
th {
	height: auto;
	padding: 10px 12px;
	line-height: 1.3;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--muted);
	text-shadow: none;
	background: var(--surface-2) none;
	border-bottom: 1px solid var(--border);
}
tr {
	height: auto;
	line-height: 1.4;
	border: none;
	border-bottom: 1px solid var(--border);
}
td {
	height: auto;
	padding: 8px 10px;
	line-height: 1.4;
	vertical-align: middle;
}
table tr:nth-child(2n+1),
.normal { background-color: var(--surface); }
table tr:nth-child(2n) { background-color: var(--row-alt); }
tr:hover,
table tr:nth-child(2n+1):hover,
.normalActive { background-color: var(--row-hover); }
.noborder,
.noborder tr { border: none; background: transparent; }
td img { vertical-align: middle; }

/* --- Pagination --------------------------------------------------------- */

.numPage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 16px 0;
}
.numPage a,
.blockrouge {
	float: none;
	width: auto;
	min-width: 32px;
	margin: 0;
	padding: 0 8px;
	line-height: 32px;
	text-align: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
}
#corps .numPage a:hover { border-color: var(--accent); text-decoration: none; }
.numPage a:visited { text-decoration: none; }

/* --- Onglets (onglet2.css) ---------------------------------------------- */

.tabbed_area {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
#corps ul.tabs li a {
	background: var(--surface-2) none;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	font-family: var(--font);
}
#corps ul.tabs li a:hover { background: var(--row-hover); border-color: var(--border); }
#corps ul.tabs li a.active {
	background: var(--surface) none;
	color: var(--text);
	border-bottom-color: var(--surface);
}
.content,
#corps .content {
	background: var(--surface) none;
	border: 1px solid var(--border);
}
#corps .content ul li a { color: var(--text); }
.content ul li { border-bottom-color: var(--border); }

/* --- Elements divers ---------------------------------------------------- */

.block_mails,
#loader {
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
#loader { background-image: url("../img/loading.gif"); }

/* --- Décorations saisonnières (inc/deco.php) ---------------------------- */
/* Toujours sous le contenu (z-index négatif) et sans interaction possible. */

.deco {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	opacity: var(--deco-opacite);
	color: var(--deco-encre);
}
body:has(#app-sidebar) .deco-page { left: var(--sidebar-w); }
.deco-sidebar {
	position: absolute;
	opacity: .8;
}
/* Emplacement réservé à droite du nom du site */
body:has(.deco-sidebar) .app-brand { padding-right: 64px; }
.deco-insigne {
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
}
.deco-insigne svg,
.deco-insigne > span {
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width: 900px) {
	body:has(#app-sidebar) .deco-page { left: 0; }
}

:root {
	--deco-opacite: .5;
	--deco-encre: #2a2230;
	--deco-neige: #a9c3dc;
	--deco-blanc: #b8c2cf;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--deco-opacite: .45;
		--deco-encre: #b8b0c4;
		--deco-neige: #e8f0f8;
		--deco-blanc: #f2f5f9;
	}
}
:root[data-theme="dark"] {
	--deco-opacite: .45;
	--deco-encre: #b8b0c4;
	--deco-neige: #e8f0f8;
	--deco-blanc: #f2f5f9;
}

.deco svg { display: block; width: 100%; height: auto; }
.deco > span { position: absolute; }

/* Éléments posés (citrouilles, sapins, œufs, raisins) */
.deco-pose { line-height: 0; }

/* Toile d'araignée et araignée suspendue */
.deco-toile {
	position: absolute;
	top: 0;
	right: 0;
	width: 240px !important;
}
.deco-araignee {
	top: 0;
	width: 28px;
	height: var(--long);
	transform-origin: top center;
	animation: deco-balance 5s ease-in-out infinite;
}
.deco-araignee::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 20px;
	left: 50%;
	width: 1px;
	background: currentColor;
}
.deco-araignee svg {
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Chauves-souris */
.deco-vol { animation: deco-vol 6s ease-in-out var(--d) infinite; }

/* Particules qui tombent (neige, confettis, feuilles) ou qui montent (cœurs) */
.deco-chute,
.deco-monte {
	left: var(--x);
	width: var(--s);
	height: var(--s);
	animation: deco-chute var(--t) linear var(--d) infinite;
}
.deco-chute { top: -40px; }
.deco-monte { top: 100%; animation-name: deco-monte; }
.deco-neige { color: var(--deco-neige); }
.deco-point {
	display: block;
	width: 60%;
	height: 60%;
	border-radius: 50%;
	background: currentColor;
}
.deco-confetti {
	display: block;
	width: 100%;
	height: 45%;
	border-radius: 1px;
	background: currentColor;
}
.deco-multi:nth-child(5n+1) { color: #e04848; }
.deco-multi:nth-child(5n+2) { color: #f2c230; }
.deco-multi:nth-child(5n+3) { color: #4a90e2; }
.deco-multi:nth-child(5n+4) { color: #43b07a; }
.deco-multi:nth-child(5n+5) { color: #c46be0; }
.deco-saint-valentin .deco-multi:nth-child(odd) { color: #e0457b; }
.deco-saint-valentin .deco-multi:nth-child(even) { color: #f28bb0; }

/* Guirlande lumineuse (haut de la barre latérale) */
.deco-guirlande {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px !important;
}
.deco-ampoule { animation: deco-scintille 2.4s ease-in-out infinite; }
.deco-ampoule:nth-of-type(4n+1) { fill: #e04848; }
.deco-ampoule:nth-of-type(4n+2) { fill: #f2c230; animation-delay: -.6s; }
.deco-ampoule:nth-of-type(4n+3) { fill: #43b07a; animation-delay: -1.2s; }
.deco-ampoule:nth-of-type(4n+4) { fill: #4a90e2; animation-delay: -1.8s; }

/* Feux d'artifice */
.deco-feu { animation: deco-eclate 3.6s ease-out var(--d) infinite; }
.deco-feu.c1 { color: #f2c230; }
.deco-feu.c2 { color: #e04848; }
.deco-feu.c3 { color: #4a90e2; }
.deco-feu.bleu { color: #2b5fd9; }
.deco-feu.blanc { color: var(--deco-blanc); }
.deco-feu.rouge { color: #e23b3b; }

/* Herbe de Pâques */
.deco-herbe {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 30px !important;
}

@keyframes deco-chute {
	to { transform: translate(var(--dx), calc(100vh + 80px)) rotate(var(--r)); }
}
@keyframes deco-monte {
	to { transform: translate(var(--dx), calc(-100vh - 80px)) rotate(calc(var(--r) / 8)); }
}
@keyframes deco-vol {
	0%, 100% { transform: translate(0, 0) scaleY(1); }
	25% { transform: translate(18px, -10px) scaleY(.75); }
	50% { transform: translate(34px, 4px) scaleY(1); }
	75% { transform: translate(14px, 10px) scaleY(.8); }
}
@keyframes deco-balance {
	0%, 100% { transform: rotate(-3deg) scaleY(1); }
	50% { transform: rotate(3deg) scaleY(.92); }
}
@keyframes deco-scintille {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}
@keyframes deco-eclate {
	0% { transform: scale(.2); opacity: 0; }
	15% { opacity: 1; }
	60% { transform: scale(1); opacity: .9; }
	100% { transform: scale(1.1); opacity: 0; }
}

/* Motifs posés sur les blocs : uniquement dans la bordure ou la marge
   intérieure haute (16 à 32 px selon le bloc), jamais sur le contenu. */
body:has(.deco-page) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi) {
	position: relative;
}
/* Taille des motifs de coin : toujours inférieure à la marge intérieure du bloc */
body:has(.deco-page) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave) { --deco-coin: 22px; }
body:has(.deco-page) :is(.kpi, .cadreCorpsTresLarge.pleineLargeur) { --deco-coin: 16px; }
body:has(.deco-page) #login { --deco-coin: 28px; }
body:has(.deco-page) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login)::before {
	content: "";
	position: absolute;
	pointer-events: none;
	background: no-repeat center / contain;
}
/* Noël : neige sur le bord haut */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login)::before {
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--deco-neige);
	opacity: .7;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 11' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V5C112 5 110 10 104 10S96 4 90 6 82 11 76 9 68 4 60 6 52 10 46 9 38 4 30 6 22 11 16 9 6 4 0 6Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 11px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 11' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V5C112 5 110 10 104 10S96 4 90 6 82 11 76 9 68 4 60 6 52 10 46 9 38 4 30 6 22 11 16 9 6 4 0 6Z'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 11px;
}
/* 14 juillet : ruban tricolore sur le bord haut */
body:has(.deco-fete-nationale) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login)::before {
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: var(--radius) var(--radius) 0 0;
	background: linear-gradient(90deg, #2b5fd9 33.3%, var(--deco-blanc) 33.3% 66.6%, #e23b3b 66.6%);
	opacity: .8;
}
/* Émojis d'événement dans le coin haut droit des blocs, dans la marge intérieure.
   Un émoji différent par bloc (rotation selon la position du bloc). */
body:has(.deco-nouvel-an, .deco-saint-valentin, .deco-paques, .deco-vendanges, .deco-halloween, .deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login)::after {
	position: absolute;
	top: 1px;
	right: 3px;
	font-size: var(--deco-coin); /* = taille max tenant dans la marge du bloc */
	line-height: 1;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
	opacity: .9;
	pointer-events: none;
}
body:has(.deco-nouvel-an) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+1)::after { content: "\1F37E"; } /* 🍾 */
body:has(.deco-nouvel-an) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+2)::after { content: "\1F942"; } /* 🥂 */
body:has(.deco-nouvel-an) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+3)::after { content: "\1F38A"; } /* 🎊 */
body:has(.deco-nouvel-an) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+4)::after { content: "\1F389"; } /* 🎉 */
body:has(.deco-saint-valentin) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+1)::after { content: "\1F495"; } /* 💕 */
body:has(.deco-saint-valentin) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+2)::after { content: "\1F339"; } /* 🌹 */
body:has(.deco-saint-valentin) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+3)::after { content: "\1F48D"; } /* 💍 */
body:has(.deco-paques) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+1)::after { content: "\1F36B"; } /* 🍫 */
body:has(.deco-paques) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+2)::after { content: "\1F430"; } /* 🐰 */
body:has(.deco-paques) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+3)::after { content: "\1F514"; } /* 🔔 */
body:has(.deco-vendanges) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+1)::after { content: "\1F69C"; } /* 🚜 */
body:has(.deco-vendanges) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+2)::after { content: "\1F377"; } /* 🍷 */
body:has(.deco-vendanges) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(3n+3)::after { content: "\1F468\200D\1F33E"; } /* 👨‍🌾 */
body:has(.deco-halloween) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+1)::after { content: "\1F9DF\200D\2642\FE0F"; } /* 🧟‍♂️ */
body:has(.deco-halloween) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+2)::after { content: "\1F9CC"; } /* 🧌 */
body:has(.deco-halloween) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+3)::after { content: "\1FA7B"; } /* 🩻 */
body:has(.deco-halloween) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(4n+4)::after { content: "\1F344"; } /* 🍄 */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(5n+1)::after { content: "\1F385"; } /* 🎅 */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(5n+2)::after { content: "\1F381"; } /* 🎁 */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(5n+3)::after { content: "\26C4"; } /* ⛄ */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(5n+4)::after { content: "\2744\FE0F"; } /* ❄️ */
body:has(.deco-noel) :is(#cadreCorps, #cadreCorpsLarge, .cadreCorpsTresLarge, .pave, .kpi, #login):nth-child(5n+5)::after { content: "\26F7\FE0F"; } /* ⛷️ */

/* Sans animation : les particules sont réparties sur le fond, figées */
@media (prefers-reduced-motion: reduce) {
	.deco * { animation: none !important; }
	.deco-chute,
	.deco-monte { top: var(--y); transform: rotate(var(--r)); }
	.deco-feu { opacity: .8; }
}

/* --- Pied de page ------------------------------------------------------- */

#footer {
	padding: 16px 32px 24px;
	color: var(--muted);
	font-size: 12.5px;
}
#footer a,
#footer a:visited,
#footerlogin a,
#footerlogin a:visited { color: var(--muted); }
#footer a:hover,
#footerlogin a:hover { color: var(--accent); }

/* --- Page de connexion -------------------------------------------------- */

#login {
	box-sizing: border-box;
	top: 50%;
	left: 50%;
	width: min(400px, calc(100% - 32px));
	height: auto;
	margin: 0;
	padding: 32px;
	transform: translate(-50%, -55%);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .08);
}
#login h1 {
	margin: 0 0 24px;
	padding: 0;
	border: none;
	font-family: var(--font);
	font-size: 22px;
	font-weight: 600;
	color: var(--text);
}
#login h3.error {
	margin: -8px 0 16px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 500;
	background: var(--danger-soft);
	border-radius: var(--radius-sm);
}
label.label_block_login {
	height: auto;
	margin: 0 0 6px;
	line-height: 1.4;
	font-size: 13px;
	font-weight: 500;
	color: var(--text);
}
input[type=text].inputlogin,
input[type=password].inputlogin {
	width: 100%;
	height: 40px;
	margin: 0 0 16px;
	padding: 8px 12px;
	font-size: 15px;
}
#login input[type=submit] {
	width: 100%;
	height: 40px;
}
#footerlogin {
	margin: -40px 0 0;
	color: var(--muted);
}

/* ==========================================================================
   Petits écrans
   - ≤ 900px : menu burger (barre du haut + menu latéral escamotable)
   - ≤ 700px : version téléphone (formulaires, filtres, tableaux, popup)
   Au-dessus de 900px, l'affichage bureau n'est pas modifié.
   ========================================================================== */

/* Barre du haut et fond du menu : masqués au-dessus de 900px */
.app-topbar,
.app-menu-fond { display: none; }

/* Menu burger : barre du haut + menu latéral escamotable (≤ 900px) */
@media (max-width: 900px) {
	body:has(#app-sidebar) {
		padding-left: 0;
		padding-top: 52px;
	}
	.app-topbar {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 950;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 52px;
		padding: 0 8px;
		color: #fff;
		background: var(--sidebar-bg);
		box-shadow: var(--shadow);
	}
	.app-topbar-titre {
		overflow: hidden;
		font-size: 16px;
		font-weight: 600;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.app-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		color: #fff;
		background: transparent;
		border: none;
		border-radius: var(--radius-sm);
		cursor: pointer;
	}
	.app-burger:hover,
	.menu-ouvert .app-burger { background: var(--sidebar-hover); }
	.app-burger svg {
		width: 22px;
		height: 22px;
		stroke: currentColor;
		fill: none;
		stroke-width: 2;
		stroke-linecap: round;
	}

	#app-sidebar {
		position: fixed;
		inset: 52px auto 0 0;
		z-index: 940;
		width: min(85vw, 300px);
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .2s ease;
	}
	.menu-ouvert #app-sidebar {
		transform: none;
		box-shadow: 4px 0 20px rgba(0, 0, 0, .35);
	}
	.app-nav { overflow: visible; }
	.app-nav-link,
	.app-nav-group > summary,
	.app-nav-sub a { padding-top: 10px; padding-bottom: 10px; }

	.app-menu-fond {
		position: fixed;
		inset: 52px 0 0 0;
		z-index: 930;
		background: rgba(0, 0, 0, .45);
	}
	.menu-ouvert .app-menu-fond { display: block; }
	.menu-ouvert body { overflow: hidden; }
}

@media (max-width: 700px) {
	/* --- Zone de contenu ------------------------------------------------ */
	#corps { padding: 12px 10px 24px; }
	#cadreCorps,
	#cadreCorpsLarge,
	.cadreCorpsTresLarge,
	.cadreCorpsTresLarge.pleineLargeur,
	.pave,
	div.version {
		width: auto;
		padding: 14px 12px;
		margin-bottom: 14px;
	}
	.block_mails,
	.inputarea,
	.inputareaLarge,
	.inputlabel { width: auto; max-width: 100%; }

	h1,
	#cadreCorps h1, #cadreCorpsLarge h1, .cadreCorpsTresLarge h1 { font-size: 19px; }
	.cadreCorpsTresLarge h1 { margin-bottom: 12px !important; }

	/* --- Formulaires : un champ par ligne, pleine largeur --------------- */
	label.label,
	label.label30,
	label.label_inline_right {
		float: none;
		display: block;
		width: auto;
		height: auto;
		margin: 8px 0 2px;
		padding: 0;
		line-height: 1.4;
		text-align: left;
	}
	input[type=text],
	input[type=email],
	input[type=password],
	input[type=number],
	input[type=date],
	input[type=search],
	select,
	textarea {
		max-width: 100%;
		height: 40px;
		font-size: 16px; /* évite le zoom automatique d'iOS */
	}
	textarea { height: 150px; }
	input[type=text]:not(.inputbox50):not(.inputbox100):not(.inputbox120),
	input[type=email],
	input[type=password],
	input[type=number],
	input[type=date],
	input[type=search],
	select:not(.inputbox50):not(.inputbox100):not(.inputbox120),
	textarea { width: 100%; }

	input[type=submit],
	input[type=reset],
	input[type=button],
	#corps a.button,
	.button {
		height: 40px;
		line-height: 38px;
	}
	input[type=submit].buttoncarre { width: auto; min-width: 40px; padding: 0 10px; }

	/* --- Barres de filtres au-dessus des listes ------------------------- */
	#search,
	#options {
		float: none !important;
		width: 100%;
		margin: 0 0 10px !important;
		text-align: left !important;
	}
	#search > div,
	#options > div {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 6px;
		margin: 0 0 8px !important;
	}
	#search label.inline,
	#options label.inline {
		display: block;
		flex-basis: 100%;
		height: auto;
		line-height: 1.4;
	}
	#search > div > input[type=text],
	#options > div > input[type=text]:not(.inputbox50),
	#options > div > select { flex: 1; width: auto; min-width: 0; margin: 0; }
	#options > div > .inputbox50 { flex: 1; width: auto; margin: 0; }
	/* Filtres posés directement dans #options (sans div intermédiaire) */
	#options > label.inline { display: block; margin-top: 8px; }

	.barre-filtres,
	.barre-filtres > div { flex-direction: column; align-items: stretch; }
	.barre-filtres > div { gap: 6px; width: 100%; }
	.barre-filtres input[type=text],
	.barre-filtres select { width: 100%; }
	.barre-filtres input[type=submit] { width: 100%; }

	/* --- Tableaux ------------------------------------------------------- */
	table { margin: 12px 0; }
	th { padding: 8px; }
	td { padding: 6px 8px; }
	table.tableCompacte { font-size: 12.5px; }
	/* Colonne Nom / Raison sociale (classe col-epinglee) figée pendant le
	   défilement horizontal. L'ombre à gauche masque le trou d'1px laissé
	   par la bordure du tableau, où le contenu défilant apparaissait. */
	.table-scroll .col-epinglee {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--surface);
		box-shadow: -2px 0 0 var(--surface), inset -1px 0 0 var(--border);
	}
	.table-scroll > table > thead > tr > th.col-epinglee {
		z-index: 3;
		background: var(--surface-2);
		box-shadow: -2px -2px 0 var(--surface-2), 0 -2px 0 var(--surface-2), -2px 0 0 var(--surface-2), inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border);
	}

	.btn-action { height: 34px; line-height: 32px; padding: 0 12px; }

	/* --- Pagination ----------------------------------------------------- */
	.numPage a,
	.blockrouge { min-width: 40px; line-height: 40px; }

	/* --- Popup de détail : plein écran ---------------------------------- */
	.popup-fond { align-items: stretch; }
	.popup-fenetre {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	/* --- Accueil -------------------------------------------------------- */
	.kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.kpi-valeur { font-size: 24px; }
	.graphe-zone { height: 240px; }
}