/* AMAP - gestion des contrats (version PHP 8) */
:root {
	--ink: #1d362a;
	--muted: #5b7064;
	--bg: #f5f2ea;
	--surface: #ffffff;
	--line: #e2ddd0;
	--brand: #2c7a4d;
	--brand-dark: #20593a;
	--brand-soft: #e5f2e9;
	--accent: #d9822b;
	--accent-soft: #fdf0dd;
	--danger: #b3392b;
	--danger-soft: #fbe7e3;
	--danger-row: #fbdcd7;
	--danger-strong: #a3170c;
	--brand-strong: #1f6b3f;
	--warn-soft: #fff4d6;
	--page-max: 1680px;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(29, 54, 42, .06), 0 6px 20px rgba(29, 54, 42, .06);
	--font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 var(--font);
}

img { max-width: 100%; height: auto; }
a { color: var(--brand-dark); }
a:hover { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0 0 .75em; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff;
	padding: 10px 14px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- En-tête ---------- */
.app-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.app-header__bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
	max-width: var(--page-max); margin: 0 auto; padding: 10px 16px;
}
.brand { order: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { height: 42px; width: auto; display: block; }
.brand span { font-weight: 700; font-size: 1.05rem; }

/* Menu hamburger (smartphone) : trois barres qui deviennent une croix quand le menu est ouvert. */
.burger {
	order: 2; margin-left: auto; flex: none; width: 56px; height: 56px; padding: 0;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	position: relative; border: 1.5px solid #cfe0d5; border-radius: 16px; background: var(--surface); color: var(--ink); cursor: pointer;
	transition: background-color .12s, border-color .12s;
}
.burger:hover, .burger[aria-expanded="true"] { background: var(--brand-soft); border-color: #8fc4a3; }
.burger__bar {
	display: block; width: 26px; height: 3px; border-radius: 3px; background: currentColor;
	transition: transform .2s ease, opacity .15s ease;
}
.perm-alert-dot {
	position: absolute; top: -3px; right: -4px; display: grid; width: 20px; height: 20px; place-items: center;
	border: 2px solid var(--surface); border-radius: 50%; background: #d32f2f; color: #fff;
	box-shadow: 0 2px 6px rgba(211, 47, 47, .4); font-size: .75rem; font-weight: 900; line-height: 1;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.app-nav {
	order: 4; flex: 1 0 100%; display: none; flex-direction: column; gap: 10px; padding: 4px 0 12px;
}
.app-header[data-open="true"] .app-nav { display: flex; }
.app-tabs { display: flex; flex-direction: column; gap: 8px; }
.app-tabs__label { margin-top: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Boutons du menu smartphone et actions de l'accueil : même aspect (sur ordinateur, le menu devient une rangée d'onglets). */
.app-tabs a, .action-card {
	display: flex; align-items: center; min-height: 48px; padding: 0 16px;
	background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700;
	border: 1.5px solid #cfe0d5; border-radius: 12px;
	transition: background-color .12s, border-color .12s, box-shadow .12s, transform .05s;
}
.app-tabs a:hover, .action-card:hover {
	background: var(--brand-soft); border-color: #8fc4a3; color: var(--brand-dark);
}
.app-tabs a:active, .action-card:active { transform: translateY(1px); }
.app-tabs a { padding: 0 12px; min-height: 46px; }
/* Onglets hors gestion (Contrats, Chèques…) : vert pastel, vert soutenu quand sélectionnés (même en espace de gestion). */
.app-tabs a:not(.tab--gestion):not([aria-current="page"]) { background: #e5f2e9; border-color: #cfe0d5; color: #20593a; }
.app-tabs a:not(.tab--gestion):not([aria-current="page"]):hover { background: #d3ead9; border-color: #8fc4a3; color: #20593a; }
.app-tabs a:not(.tab--gestion)[aria-current="page"] { background: #1f6b3f; border-color: #1f6b3f; color: #fff; }
.app-tabs a:not(.tab--gestion)[aria-current="page"]:hover { background: #17552f; border-color: #17552f; color: #fff; }
/* Menu hamburger : vert encore plus clair pour les onglets hors gestion, bleu pastel clair pour les lignes de gestion. */
@media (max-width: 1239px) {
	.app-tabs a:not(.tab--gestion):not([aria-current="page"]) { background: #f7fcf8; border-color: #e6f2e8; color: #20593a; }
	.app-tabs a:not(.tab--gestion):not([aria-current="page"]):hover { background: #eef8f0; border-color: #8fc4a3; }
	.app-tabs a.tab--gestion:not([aria-current="page"]) { background: #f5f8fd; border-color: #e6ecf8; color: #263f73; }
	.app-tabs a.tab--gestion:not([aria-current="page"]):hover { background: #ecf1fa; border-color: #b9c8e8; }
}
/* Bouton de la page affichée : plein, bien visible. */
.app-tabs a[aria-current="page"], .action-card--main {
	background: var(--brand-strong); border-color: var(--brand-strong); color: #fff;
	box-shadow: 0 2px 8px rgba(31, 107, 63, .35);
}
.app-tabs a[aria-current="page"]:hover, .action-card--main:hover { background: #17552f; border-color: #17552f; color: #fff; }
.app-tabs a.perm-alert-tab { position: relative; overflow: visible; }
.perm-alert-tab__label { display: inline; }
.perm-alert-bubble {
	position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 60;
	display: inline-flex; align-items: center; gap: 7px;
	width: max-content; max-width: min(290px, 90vw);
	padding: 3px 9px 3px 7px; transform: translateX(-50%);
	border: 1.5px solid #d32f2f; border-radius: 8px;
	background: #fff2ec; color: #7f2214;
	box-shadow: 0 4px 14px rgba(211, 47, 47, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
	font-size: .70rem; font-weight: 700; line-height: 1.2; text-align: left; white-space: normal;
	pointer-events: none;
	animation: permBubblePop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes permBubblePop {
	from { opacity: 0; transform: translate(-50%, 3px) scale(0.97); }
	to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.perm-alert-bubble__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	background: #fcd5c7; color: #c62828;
}
.perm-alert-bubble__text { display: block; }
.perm-alert-bubble.is-dismissed { display: none; }
.app-tabs a.cheque-alert-tab { position: relative; overflow: visible; gap: 8px; }
.app-tabs a.required-alert-tab { position: relative; overflow: visible; gap: 8px; }
.app-tabs a.perm-alert-tab { gap: 8px; }
.cheque-alert-icon, .perm-alert-icon, .required-alert-icon {
	flex: none; display: inline-grid; width: 18px; height: 18px; place-items: center; margin-left: auto;
	border-radius: 50%; background: #d32f2f; color: #fff; font-size: .72rem; font-weight: 900; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 4px rgba(211, 47, 47, .4);
}
.cheque-alert-bubble, .required-alert-bubble {
	display: none; position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 60;
	width: max-content; max-width: min(290px, 90vw); padding: 4px 10px;
	border: 1.5px solid #d32f2f; border-radius: 8px; background: #fff2ec; color: #7f2214;
	box-shadow: 0 4px 14px rgba(211, 47, 47, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
	font-size: .72rem; font-weight: 700; line-height: 1.2; white-space: normal; pointer-events: none;
}
.cheque-alert-tab.is-cheque-open .cheque-alert-bubble, .required-alert-tab.is-required-open .required-alert-bubble { display: block; }
.perm-alert-bubble::before, .perm-alert-bubble::after {
	content: ""; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%);
}
.perm-alert-bubble::before { bottom: -6px; border-top: 6px solid #d32f2f; border-right: 6px solid transparent; border-left: 6px solid transparent; }
.perm-alert-bubble::after { bottom: -4px; border-top: 5px solid #fff2ec; border-right: 5px solid transparent; border-left: 5px solid transparent; }
.perm-alert-mobile { display: none; }
@media (max-width: 1239px) {
	.perm-alert-bubble { display: none; }
	.perm-alert-icon, .cheque-alert-icon, .cheque-alert-bubble { display: none !important; }
	.app-tabs .perm-alert-mobile {
		display: inline-flex; align-items: center; gap: 6px;
		flex: none; margin-left: auto;
		padding: 3px 10px; border: 1.5px solid #d32f2f; border-radius: 999px;
		background: #fff2ec; color: #8e2012;
		font-size: .68rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
		box-shadow: 0 1px 4px rgba(211, 47, 47, 0.12);
	}
	.app-tabs a.perm-alert-tab { gap: 8px; }
	.app-tabs a.perm-alert-tab .perm-alert-tab__label { flex: 1 1 auto; min-width: 0; }
	.perm-alert-mobile svg { flex: none; stroke: currentColor; }
	.required-alert-bubble { bottom: auto; top: calc(100% + 4px); right: 0; }
}
/* En dessous de 1240 px (tablette et smartphone) : le menu ouvert est un panneau flottant posé
   par-dessus la page, à droite du burger, et ne décale donc plus le contenu vers le bas. */
@media (max-width: 1239px) {
	.app-header__bar { position: relative; }
	.app-header[data-open="true"] .app-nav {
		position: absolute; top: 100%; right: 16px; left: auto; transform: none;
		flex: 0 1 320px; width: min(320px, calc(100vw - 32px)); box-sizing: border-box;
		margin: 4px 0 0; padding: 12px;
		border: 1px solid #c7dccb; border-radius: 16px;
		background: #eaf3ec; box-shadow: 0 8px 22px rgba(31, 107, 63, .14);
	}
}
@media (max-width: 700px) {
	.app-header__bar .home-btn { order: 2; margin-left: auto; }
	.app-header__bar .burger { order: 3; margin-left: 0; }
}

.user-chip { display: flex; align-items: center; gap: 10px; padding: 0 4px; margin: 0; font-size: .95rem; color: var(--ink); }
.app-tabs a.version-badge.version-badge { align-self: center; min-height: 0; padding: 3px 12px; border: 1px solid #c9a227; border-radius: 999px; background: #fff4cf; color: #6b5200; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.app-tabs a.version-badge.version-badge:hover { background: #ffe9a3; color: #6b5200; border-color: #c9a227; }
@media (min-width: 1240px) {
	.app-tabs a.version-badge { margin-left: auto; }
	.app-tabs a.version-badge + a.tab--logout { margin-left: 0; }
}
/* « Ancienne Version » placé dans la barre, à gauche du bouton Accueil (libère la ligne d'onglets pour la Déconnexion). */
.version-badge--bar { order: 3; align-self: center; flex: none; padding: 4px 12px; border: 1px solid #c9a227; border-radius: 999px; background: #fff4cf; color: #6b5200; font-size: .8rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.version-badge--bar:hover { background: #ffe9a3; color: #6b5200; border-color: #c9a227; }
@media (max-width: 700px) { .version-badge--bar { order: 2; } }
@media print { .version-badge { display: none; } }

/* Bouton « maison » : grand, plein et placé à l'extrémité droite de la bannière. */
.home-btn {
	order: 3; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none;
	min-width: 56px; height: 56px; padding: 0 14px; border-radius: 16px;
	background: var(--brand-strong); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem;
	box-shadow: 0 4px 14px rgba(31, 107, 63, .4); transition: background-color .12s, transform .05s;
}
.home-btn:hover { background: #17552f; color: #fff; }
.home-btn:active { transform: translateY(1px); }
.home-btn[aria-current="page"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.home-btn svg { flex: none; }
.home-btn__label { display: none; }

/* Bouton « Déconnexion » : à côté du bouton maison. */
.logout-btn {
	order: 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
	min-width: 56px; height: 56px; padding: 0 14px; border-radius: 16px;
	background: var(--surface); color: var(--ink); border: 1.5px solid #cfe0d5; text-decoration: none; font-weight: 700;
	transition: background-color .12s, border-color .12s, transform .05s;
}
.logout-btn:hover { background: var(--danger-soft); border-color: #e6b3ac; color: var(--danger); }
.logout-btn:active { transform: translateY(1px); }
.logout-btn svg { flex: none; }
.logout-btn__label { display: none; }

.role-badge {
	padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: #8a4b0b;
	font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

@media (min-width: 700px) {
	.home-btn { padding: 0 22px; }
	.home-btn__label { display: inline; }
	.logout-btn { padding: 0 18px; }
	.logout-btn__label { display: inline; }
}

/* En dessous de 1240 px la rangée d'onglets ne tient pas : on garde le hamburger.
   Au-dessus, les liens (et ceux du menu Gestion) forment une rangée d'onglets sous le nom de l'AMAP. */
@media (min-width: 1240px) {
	.burger { display: none; }
	.app-header__bar { padding-block: 8px 0; gap: 4px 10px; }
	.app-header .app-nav { display: contents; }
	.brand { margin-right: auto; }
	.user-chip, .compact-toggle { order: 2; }
	.app-tabs { order: 10; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-top: 4px; border-bottom: 3px solid var(--brand-strong); }
	.app-tabs a { min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px 10px 0 0; background: transparent; box-shadow: none; }
	.app-tabs a:not(.tab--gestion):not([aria-current="page"]) { background: #e5f2e9; }
	.app-tabs a:hover { background: var(--brand-soft); color: var(--brand-dark); }
	.app-tabs a[aria-current="page"], .app-tabs a.tab--gestion[aria-current="page"] { background: var(--brand-strong); color: #fff; }
	.app-tabs a[aria-current="page"]:hover { background: #17552f; color: #fff; }
	.app-tabs__label { align-self: center; margin: 0 4px 0 14px; padding-left: 14px; border-left: 2px solid var(--line); color: var(--muted); }
	.app-tabs a.tab--gestion { background: #dbe5f7; color: #263f73; }
	.app-tabs a.tab--gestion:hover { background: #c3d3f0; color: #1d3366; }
}
@media (max-width: 1239px) {
	.app-header__bar .user-chip { order: 2; flex: 0 1 auto; min-width: 0; max-width: min(220px, 40vw); margin-left: auto; }
	.app-header__bar .user-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.app-header__bar .home-btn { order: 3; margin-left: 0; }
	.app-header__bar .burger { order: 4; margin-left: 0; }
}

/* Onglets de gestion : bleu pastel, bleu soutenu quand actifs */
body .app-tabs a.tab--gestion[aria-current="page"] { background: #2b4682; border-color: #2b4682; color: #fff; box-shadow: 0 2px 8px rgba(43, 70, 130, .35); }
body .app-tabs a.tab--gestion[aria-current="page"]:hover { background: #1d3366; border-color: #1d3366; color: #fff; }

/* ---------- Page ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 20px 16px 120px; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.page-head h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.01em; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

/* Vignette « Votre référent » : nom + mail du référent du contrat, à droite du titre. */
.page-head__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.referent-card {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--brand-soft); border: 1px solid var(--line); border-left: 4px solid var(--brand);
	border-radius: 10px; padding: 8px 12px; max-width: 22rem;
}
.referent-card__label { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-dark); position: relative; }
/* Pastille « ? » + infobulle : rôle du référent. */
.referent-card__info {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
	border-radius: 50%; border: 1px solid var(--brand); background: #fff;
	color: var(--brand-dark); font-size: .72rem; font-weight: 700; line-height: 1;
	cursor: help; user-select: none; text-transform: none; letter-spacing: 0;
}
.referent-card__info:hover, .referent-card__info:focus-visible { background: var(--brand); color: #fff; }
.referent-card__tip {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
	width: max-content; max-width: 18rem;
	background: var(--brand); color: #fff; font-size: .82rem; font-weight: 400;
	text-transform: none; letter-spacing: 0; line-height: 1.35; white-space: normal;
	padding: 8px 10px; border-radius: 8px; box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	pointer-events: none;
}
.referent-card__tip::before {
	content: ""; position: absolute; bottom: 100%; left: 12px;
	border: 6px solid transparent; border-bottom-color: var(--brand);
}
.referent-card__info:hover + .referent-card__tip,
.referent-card__info:focus-visible + .referent-card__tip,
.referent-card__info:focus + .referent-card__tip { opacity: 1; visibility: visible; transform: translateY(0); }
.referent-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.referent-card__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .9rem; line-height: 1.3; }
.referent-card__name { font-weight: 700; color: var(--ink); }
.referent-card__mail { color: var(--muted); word-break: break-all; }
a.referent-card__mail:hover { color: var(--accent); }
@media (max-width: 640px) {
	.page-head__side { justify-content: flex-start; }
	.referent-card { max-width: 100%; }
}

.season-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin: 0; }
.season-bar label { font-weight: 700; color: var(--muted); }
.season-bar select { width: auto; min-width: 11rem; }
.season-bar__range { color: var(--muted); font-size: .92rem; }

.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-bottom: 4px; }
.card__head .card__title { margin-bottom: 0; }

.crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 600; text-decoration: none; min-height: 40px; }

.card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 18px;
}
.card + .card { margin-top: 16px; }
.card__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.1rem; margin-bottom: 4px; }
.card__hint { margin: 0 0 14px; color: var(--muted); font-size: .94rem; }
.card--soft { background: var(--brand-soft); border-color: #cfe5d6; box-shadow: none; }
.referent-status--pending { background: var(--accent-soft); border-color: #e3b883; box-shadow: none; }

.layout { display: grid; gap: 16px; }
.layout > * { min-width: 0; }
@media (min-width: 1000px) {
	.layout--aside { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
	.sticky { position: sticky; top: 84px; }
}

.stack > * + * { margin-top: 16px; }

/* ---------- Alertes ---------- */
.alert { padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; margin-bottom: 16px; font-weight: 500; }
.contract-comment { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.alert--ok { background: var(--brand-soft); border-color: #bfdcc9; color: var(--brand-dark); }
.alert--warn { background: var(--warn-soft); border-color: #f1dc9b; color: #7a5a08; }
.alert--error { background: var(--danger-soft); border-color: #efc0b8; color: var(--danger); }

/* ---------- Formulaires ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 18px; }
.toolbar .contract-grid { flex: 1 1 100%; }
/* Bannière figée du producteur : tuiles + onglets des sous-écrans, collée sous l'en-tête d'application. */
.producer-banner {
	position: sticky; top: var(--app-header-height, 0px); z-index: 45;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	margin: 0 0 18px;
	padding: 8px 0 4px;
}
.producer-banner .toolbar { margin-bottom: 8px; }
.producer-banner .tabs { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span, .field > label { font-size: .84rem; font-weight: 700; color: var(--muted); }
.field--grow { flex: 1 1 240px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea {
	width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; color: var(--ink);
	background: #fff; border: 1.5px solid #cfc9b9; border-radius: 10px;
}
textarea { min-height: 110px; resize: vertical; }
select { padding-right: 32px; }
input:read-only:not([type="checkbox"]) { background: #f1eee5; color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); outline-offset: 0; }

.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brand); flex: none; }
/* Cases à cocher d'un contrat alignées sur une seule ligne. */
.check-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.check-row .check { align-items: center; }
.check-row .check input { margin-top: 0; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; font: inherit; font-weight: 700; text-decoration: none;
	border-radius: 999px; border: 1.5px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer;
	transition: background-color .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--brand-dark); }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #2c1700; }
.btn--accent:hover { background: #bf6f1d; border-color: #bf6f1d; color: #fff; }
.btn--danger { background: var(--danger); border-color: var(--danger); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Puces contrats ---------- */
.contract-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	margin: 0; padding: 0; list-style: none;
}
.contract-grid > li { min-width: 0; }
.contract-btn {
	display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; min-height: 76px; padding: 12px 14px;
	text-align: left; font: inherit; color: var(--ink); cursor: pointer;
	background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
	transition: border-color .15s, box-shadow .15s, transform .05s;
}
.contract-btn:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.contract-btn__name { font-weight: 700; }
.contract-btn--name, .contract-btn__meta { display: block; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.contract-btn__meta { font-size: .88rem; color: var(--muted); }
/* Plus de 20 producteurs : tuiles très compactes, à la largeur de leur texte (non alignées). */
.contract-grid--many { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: flex-start; }
.contract-grid--many > li { flex: 0 0 auto; min-width: 0; }
.contract-grid--many .contract-btn:not(.contract-btn--selected) { width: auto !important; min-height: 0 !important; padding: 2px 6px !important; gap: 0 !important; border-radius: 7px !important; }
.contract-grid--many .contract-btn:not(.contract-btn--selected) .contract-btn__name { font-size: .58rem !important; font-weight: 400 !important; line-height: 1.1 !important; white-space: nowrap; }
.contract-grid--many .contract-btn:not(.contract-btn--selected) .contract-btn__meta { font-size: .54rem !important; line-height: 1.1 !important; white-space: nowrap; }
/* Tuile sélectionnée : toujours en 1re position (à gauche), un peu plus grande ; les autres s'agglutinent à droite. */
.contract-grid--many:has(.contract-btn--selected) > li:has(.contract-btn--selected) { order: -1; flex: 0 0 auto; }
.contract-grid--many .contract-btn--selected { width: auto !important; min-width: 160px; min-height: 0 !important; padding: 6px 12px !important; }
.contract-grid--many .contract-btn--selected .contract-btn__name { font-size: .82rem !important; font-weight: 700 !important; }
.contract-grid--many .contract-btn--selected .contract-btn__meta { font-size: .7rem !important; }
/* Disposition « scindée » : tuile sélectionnée à gauche, autres tuiles dans un conteneur flex à droite. */
.contract-grid--many-split { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 8px !important; }
.contract-grid--many-split > .contract-btn--selected { flex: 0 0 auto; }
.contract-grid__rest { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; min-width: 0; flex: 1 1 auto; }
.contract-grid__rest .contract-btn { width: auto; min-height: 0; padding: 2px 6px; gap: 0; border-radius: 7px; }
.contract-grid__rest .contract-btn__name { font-size: .58rem; font-weight: 400; line-height: 1.1; white-space: nowrap; }
.contract-grid__rest .contract-btn__meta { font-size: .54rem; line-height: 1.1; white-space: nowrap; }
/* Neutralise la disposition « grille 3 lignes » héritée pour les grilles --many. */
.contract-grid--many:has(.contract-btn--selected):has(li + li) { display: flex !important; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: none; }
.contract-grid--many:has(.contract-btn--selected):has(li + li) > li:has(.contract-btn--selected) { grid-row: auto; }
/* Une tuile est sélectionnée : les autres se réduisent au libellé du contrat (nom masqué, hauteur réduite). */
.contract-grid:has(.contract-btn--selected) .contract-btn:not(.contract-btn--selected) { min-height: 0; padding-block: 8px; }
.contract-grid:has(.contract-btn--selected) .contract-btn:not(.contract-btn--selected) .contract-btn__meta { display: none; }
/* Tuile sélectionnée + plusieurs tuiles : tuile active en 1re colonne (taille fixe, pleine hauteur),
   les autres rangées en horizontal (ligne par ligne) à droite, sur au plus 3 lignes. */
.contract-grid:has(.contract-btn--selected):has(li + li) {
	grid-auto-flow: row;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: minmax(240px, 320px) repeat(auto-fill, minmax(120px, 1fr));
	align-items: stretch;
}
.contract-grid:has(.contract-btn--selected):has(li + li) > li:has(.contract-btn--selected) { grid-row: 1 / span 3; }
.contract-grid:has(.contract-btn--selected):has(li + li) > li:has(.contract-btn--selected) .contract-btn { height: 100%; }
/* Beaucoup de tuiles : texte réduit pour tenir sur 3 lignes. */
.contract-grid:has(.contract-btn--selected):has(li:nth-child(7)) .contract-btn:not(.contract-btn--selected) {
	padding-inline: 8px; gap: 0;
}
.contract-grid:has(.contract-btn--selected):has(li:nth-child(7)) .contract-btn:not(.contract-btn--selected) .contract-btn__name {
	font-size: .8rem;
}
.contract-btn--done { background: var(--brand-soft); border-color: #bfdcc9; }
.contract-btn--done .contract-btn__meta { color: var(--brand-dark); font-weight: 600; }
.contract-btn--valid { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.contract-btn--valid .contract-btn__meta { color: #e6f4ea; }
.contract-btn--valid:hover { background: #17552f; border-color: #17552f; }
.contract-btn--draft { background: var(--warn-soft); border-color: #f1dc9b; }
.contract-btn--new { border-style: dashed; border-color: #e3b883; background: var(--accent-soft); }
/* Libellé trop long pour la tuile : le script réduit la police jusqu'à ce qu'il tienne sur une ligne. */
.contract-btn__name--shrink { white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: none; }
/* Contrat obligatoire non souscrit : fond soutenu et bordure assortie au badge pour le mettre en évidence. */
.contract-btn--obligatoire { position: relative; background: #fdecea; border: 2.5px solid #d98880; box-shadow: 0 0 0 2px rgba(217, 136, 128, .22); }
.contract-btn--obligatoire:hover { border-color: #cf6f66; background: #fbdcd7; }
.contract-btn--obligatoire .contract-btn__name { color: #8f2b20; }
/* Badge « Obligatoire » cadré en haut à droite de la tuile. */
.contract-btn--obligatoire .badge--obligatoire { position: absolute; top: 4px; right: 4px; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid transparent; display: inline-block; }
.legend .lg-draft { background: var(--warn-soft); border-color: #f1dc9b; }
.legend .lg-done { background: var(--brand-soft); border-color: #bfdcc9; }
.legend .lg-valid { background: var(--brand-strong); border-color: var(--brand-strong); }

.empty { padding: 18px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line); border-radius: 12px; }

/* ---------- Récapitulatifs ---------- */
.summary { margin: 0; padding: 0; list-style: none; }
.summary li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.summary li:last-child { border-bottom: 0; }
.summary .is-draft { color: var(--danger); font-weight: 700; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.15rem; }

.total-box {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 16px; background: var(--ink); color: #fff; border-radius: 12px;
}
.total-box strong { font-size: 1.6rem; letter-spacing: -.01em; }
.total-box small { display: block; opacity: .75; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--brand-soft); color: var(--brand-dark); }
.badge--warn { background: var(--warn-soft); color: #7a5a08; }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--lock { background: #e9e6dc; color: #4b5a51; }
.badge--obligatoire { padding: 1px 5px; font-size: .48rem; font-weight: 700; background: #d98880; color: #fff; letter-spacing: .02em; vertical-align: middle; }

/* ---------- Grilles de saisie ---------- */
.table-wrap {
	overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff;
	-webkit-overflow-scrolling: touch;
}
.table-wrap--recap { width: fit-content; max-width: 100%; }
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.matrix thead th { background: #f0ede3; font-size: .85rem; position: sticky; top: 0; z-index: 1; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix th[scope="row"], .matrix:not(.matrix--grid) thead th:first-child, .matrix--grid thead th.corner {
	text-align: left; position: sticky; left: 0; background: #fbfaf5; z-index: 2; min-width: 130px; box-shadow: 1px 0 0 var(--line);
}
.matrix:not(.matrix--grid) thead th:first-child, .matrix--grid thead th.corner { background: #f0ede3; z-index: 3; }
.matrix tfoot td, .matrix tfoot th, .matrix tfoot th[scope="row"] { font-weight: 800; background: var(--accent-soft); border-bottom: 0; }
.matrix:not(.matrix--grid) tbody th[scope="row"] { font-weight: 400; }
.matrix--grid:not(.matrix--edit):not(.matrix--dates):not(.matrix--planning) tbody th[scope="row"] { font-weight: 400; }
.matrix .na { color: #b7b1a0; text-align: center; }
.matrix .price { color: var(--muted); white-space: nowrap; }

/* Grilles « par date » : zone de défilement dans la fen\u00eatre, avec ascenseurs toujours pr\u00e9sents,
   en-t\u00eates et premi\u00e8re colonne fig\u00e9s (la hauteur est calcul\u00e9e par un script sur la fen\u00eatre). */
.table-wrap--grid { overflow: scroll; max-height: 70vh; }
.table-wrap--grid:focus-visible { outline-offset: -3px; }
.table-wrap--grid::-webkit-scrollbar { width: 16px; height: 16px; }
.table-wrap--grid::-webkit-scrollbar-track, .table-wrap--grid::-webkit-scrollbar-corner { background: #efece1; }
.table-wrap--grid::-webkit-scrollbar-thumb { background: #8fb39f; border-radius: 8px; border: 3px solid #efece1; }
.table-wrap--grid::-webkit-scrollbar-thumb:hover { background: #5f9a7a; }
@supports (-moz-appearance: none) { .table-wrap--grid { scrollbar-width: auto; scrollbar-color: #8fb39f #efece1; } }

.matrix--grid thead th { z-index: 4; white-space: nowrap; }
.matrix--grid thead th.corner { z-index: 6; }
.matrix--grid .head1 { top: 0; height: 40px; text-align:center;}
.matrix--grid .head2 { top: 40px; }
.matrix--grid tbody th[scope="row"] { z-index: 2; max-width: 220px; }
.matrix--grid .group-row th, .matrix--grid .group-row td { background: #e4dfd0; border-bottom: 1px solid var(--line); }
.matrix--grid .group-label { position: sticky; left: 0; z-index: 3; min-width: 130px; max-width: 220px; text-align: left; font-weight: 800; box-shadow: 1px 0 0 var(--line); }

input.qty, .matrix input[type="number"] {
	width: 5.4rem; min-height: 40px; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums;
}
.qty {
	width: 5.4rem; min-height: 40px; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums;
}
.qty.has-value { border-color: var(--brand); background: var(--brand-soft); font-weight: 700; }
.qty[readonly] { background: #ebe7da; border-style: dashed; }

.contract-block + .contract-block { margin-top: 20px; }
.contract-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.contract-block__head h3 { font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.chips li { padding: 4px 10px; background: #efece1; border-radius: 999px; font-size: .84rem; }

/* ---------- Chèques ---------- */
.cheque-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.cheque-grid label { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.cheque-grid input { text-align: right; min-height: 42px; }
.cheque-grid .is-off { opacity: .4; }
.cheque-line { font-size: .95rem; margin: 0 0 10px; }

.reorg td, .reorg th { white-space: nowrap; }
.reorg input.qty, .reorg input[type="number"] { width: 5.8rem; }
.reorg .ok { border-color: var(--brand); }
.reorg .ko { border-color: var(--danger); background: var(--danger-soft); }

/* Ligne dont le total des chèques ne correspond pas au montant : toute la ligne est signalée. */
/* Contrat validé par le référent : ligne entière en vert pastel (la règle « erreur » ci-dessous l'emporte si les totaux diffèrent). */
.reorg tbody tr.row-valid > th,
.reorg tbody tr.row-valid > td { background: var(--brand-soft); color: var(--brand-dark); }
.reorg tbody tr.row-valid .price,
.reorg tbody tr.row-valid small { color: var(--brand-dark); }
.reorg tbody tr.row-valid input.qty { color: var(--brand-dark); border-color: #9fc9ae; background: rgba(255, 255, 255, .55); }

.reorg tbody tr.row-error > th,
.reorg tbody tr.row-error > td { background: var(--danger-row); color: var(--danger-strong); font-weight: 700; }
.reorg tbody tr.row-error .price,
.reorg tbody tr.row-error small { color: var(--danger-strong); }
.reorg tbody tr.row-error input.qty { color: var(--danger-strong); border-color: var(--danger-strong); font-weight: 700; }
.reorg tbody tr.row-error input.qty:not([readonly]) { background: #fff; }

/* ---------- Barre d'action ---------- */
.action-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	box-sizing: border-box; width: 100%; max-width: 100%;
	display: flex; align-items: center; gap: 12px;
	padding: 10px max(16px, calc((100% - var(--page-max)) / 2 + 16px)) calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
	border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(29, 54, 42, .1);
}
.action-bar__total { flex: 1; min-width: 0; line-height: 1.2; }
.action-bar__total strong { display: block; font-size: 1.2rem; }
.action-bar__total small { color: var(--muted); }
.action-bar .btn { flex: none; white-space: nowrap; padding: 0 18px; }
.action-bar__total small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html, body { overflow-x: clip; }
@media (max-width: 420px) { .action-bar__total small { display: none; } .action-bar { gap: 8px; } .action-bar .btn { padding: 0 14px; } }
@media (min-width: 1000px) { .action-bar { display: none; } }
/* Fiches \u00ab par date \u00bb : Fermer / Enregistrer restent visibles en permanence, m\u00eame sur grand \u00e9cran. */
@media (min-width: 1000px) { .action-bar--always { display: flex; } }
.has-bar .summary-actions { display: none; }

/* ---------- Écran Producteur ---------- */
a.contract-btn { text-decoration: none; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tabs a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
	border: 1.5px solid #cfe0d5; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none;
}
.tabs a:hover { background: var(--brand-soft); border-color: #8fc4a3; color: var(--brand-dark); }
.tabs a[aria-current="page"] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.tabs--sub a { min-height: 38px; padding: 0 14px; font-size: .92rem; font-weight: 600; }
.tabs--sub a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #2c1700; }
/* Onglets producteur : sélecteur de saison intégré à droite de la ligne. */
.tabs--producer { align-items: center; }
.tabs--producer .tabs__season { margin-left: auto; }
.tabs--producer .tabs__season .season-bar { justify-content: flex-end; }

.contract-edit-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
.contract-edit-grid > * { min-width: 0; margin-top: 0 !important; }
.contract-card .btn-row { margin-top: 14px; }
.contract-card--new { border-style: dashed; background: var(--accent-soft); }
/* Blocs contrats densifiés : moins de padding, de marges et d'espacements. */
.contract-card { padding: 12px; }
.contract-card .form-grid { gap: 10px; }
.contract-card .fieldset { margin-top: 10px; padding: 8px 12px 10px; }
.contract-card .chips { margin-bottom: 8px; }
.contract-card .btn-row { margin-top: 10px; }
/* Espace de travail contrats (desktop) : 3 colonnes — entêtes 10 %, contrat 25 %, produits à la largeur de la table. */
.contracts-cols { display: grid; grid-template-columns: 10% 25% max-content; gap: 16px; align-items: start; }
.contracts-col { min-width: 0; }
.contracts-col--products { width: max-content; max-width: 100%; }
.contracts-col--products .card { width: max-content; max-width: 100%; box-sizing: border-box; }
/* Colonne 3 : la grille produits s'adapte pour tenir sans ascenseur horizontal. */
.contracts-col--products .table-wrap--grid { overflow: visible; max-height: none; }
.contracts-col--products .matrix.matrix--edit { width: auto; table-layout: fixed; }
.contracts-col--products .matrix th, .contracts-col--products .matrix td { padding: 6px 6px; }
.contracts-col--products .matrix input[type="text"], .contracts-col--products .matrix input[type="number"], .contracts-col--products .matrix select { width: 100%; min-width: 0; box-sizing: border-box; }
.contracts-col--products .matrix--edit tbody th[scope="row"] { min-width: 0; max-width: none; }
.contracts-col--products .matrix--grid thead th.corner { min-width: 0; }
/* Dans la colonne produits, pas de colonnes figées : tout tient sans défilement horizontal. */
.contracts-col--products .matrix th[scope="row"],
.contracts-col--products .matrix--grid thead th.corner,
.contracts-col--products .matrix thead th { position: static; box-shadow: none; }
.contracts-col--products .matrix--edit tbody th[scope="row"] input[type="text"] { width: 100%; min-width: 0; }
.contracts-col--products .matrix--edit td select { width: 100%; min-width: 0; }
.contracts-col--products .matrix--edit input[type="number"] { width: 100%; min-width: 0; padding-inline: 4px; }
.contracts-col--products .matrix .col-n { width: 5rem; }
.contracts-col--products .matrix .col-ref { width: 3rem; }
/* Largeurs compactes des colonnes (table-layout: fixed) : le nom du produit prend l'essentiel, le reste est étroit. */
.contracts-col--products .matrix--edit thead th.corner { width: 13rem; }
.contracts-col--products .matrix--edit thead th:not(.corner):not(.col-n):not(.col-ref):not(:last-child) { width: 7rem; }
.contracts-col--products .matrix--edit thead th:last-child { width: 4.5rem; }
/* Petit bouton Suppr. par ligne. */
.contracts-col--products .matrix .row-del.btn { min-height: 0; height: auto; padding: 1px 7px; font-size: .74rem; line-height: 1.15; }
/* Bulle d'aide du bouton Suppr. (dernière colonne) : ouverte vers la gauche pour ne pas sortir de l'écran. */
.contracts-col--products .cell-check .has-tip::after { left: auto; right: 0; }
.contract-head-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.contract-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.contract-head:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.contract-head.is-current { border-color: var(--brand-strong); box-shadow: 0 0 0 2px var(--brand-strong); }
.contract-head__title { font-weight: 800; }
.contract-head__label { flex: 1 1 100%; font-weight: 600; overflow-wrap: anywhere; }
.contracts-placeholder { color: var(--muted); font-style: italic; }
/* Sur mobile / tablette : on empile les colonnes (affichage classique). */
@media (max-width: 1239px) {
	.contracts-cols { grid-template-columns: 1fr; }
}
/* Enregistrement automatique : indicateur d'état à la place du bouton « Enregistrer ». */
.autosave-state { display: inline-flex; align-items: center; padding: 0 12px; min-height: 40px; font-weight: 700; color: var(--muted); }
.autosave-state.is-saved { color: var(--brand-dark); }
.autosave-state.is-error { color: var(--danger); }
/* Les deux limites (par date / sur le contrat) côte à côte pour réduire la hauteur du bloc. */
.contract-card .fieldset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.contract-card .fieldset-row .fieldset { margin-top: 10px; }
.contract-card .fieldset .form-grid { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.contract-card .fieldset legend { font-size: .85rem; }
/* Limites : mini/maxi plus étroits (≈ -40 %), message sur la même ligne. */
.contract-card .fieldset .form-grid--limits { grid-template-columns: 5rem 5rem 1fr; align-items: end; }
.contract-card .fieldset-row > .fieldset:nth-child(2) .form-grid--limits { grid-template-columns: 5rem 1fr; }
.contract-card .fieldset .form-grid--limits .field--narrow { min-width: 0; }
.contract-card .fieldset .form-grid--limits .field--narrow input { width: 100%; padding-inline: 6px; }

/* Contrats repliables : l'en-tête sert de bouton, « Produits » n'apparaît que sur un contrat ouvert. */
.contract-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; cursor: pointer; min-height: 32px; }
.contract-fold > summary::-webkit-details-marker { display: none; }
.contract-fold__head::before { content: "\25B8"; color: var(--brand); transition: transform .15s; }
.contract-fold[open] > .contract-fold__head::before { transform: rotate(90deg); }
.contract-fold[open] > .contract-fold__head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.contract-fold__title { font-weight: 800; }
.contract-fold__label { flex: 1 1 8rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.contract-fold__btn { margin-left: auto; }
.contract-fold:not([open]) .contract-fold__btn { display: none; }
.contract-fold__head:hover .contract-fold__title { color: var(--brand-dark); }

/* Bulles d'aide au survol (ou au focus clavier / toucher) : texte dans data-tip. */
.has-tip { position: relative; }
.has-tip::after {
	content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 40; width: max-content; max-width: min(280px, 80vw);
	padding: 6px 10px; border-radius: 8px; background: #2a2f2c; color: #fff; font-size: .82rem; font-weight: 500; line-height: 1.35;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.has-tip:hover::after, .has-tip:focus::after, .has-tip:focus-within::after { opacity: 1; transform: none; }
.field__row { display: flex; align-items: center; gap: 8px; }
.field__row select { flex: 1; min-width: 0; }
.help {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--accent); color: #fff; font-size: .85rem; font-weight: 800; cursor: help;
}
.help.has-tip::after { left: auto; right: -6px; }
.fieldset { min-width: 0; margin: 14px 0 0; padding: 10px 14px 14px; border: 1.5px solid var(--line); border-radius: 12px; }
.fieldset legend { padding: 0 8px; font-weight: 700; font-size: .9rem; color: var(--muted); }
.hint { color: var(--muted); font-size: .84rem; }
.btn--danger-ghost { background: transparent; border-color: #e6b3ac; color: var(--danger); }
.btn--danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.chips--links li { padding: 0; }
.chips--links a { display: block; padding: 6px 12px; font-weight: 600; text-decoration: none; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 600; color: var(--brand-dark); text-decoration: underline; cursor: pointer; }
.editor-tools { margin: 2px 0 6px; }
.editor-tools .btn { min-height: 38px; padding: 0 14px; }
#dirty-flag { font-size: 1rem; }
#dirty-flag.is-dirty { color: var(--danger); }

/* Grilles de saisie (produits, listes, dates) et planning : cellules de formulaire, dates hors vendredi, colonne du producteur affiché. */
.matrix--edit td, .matrix--edit th[scope="row"] { text-align: left; }
/* Grilles produits / listes : largeur au contenu (pas 100 %), en-têtes à gauche sauf N° et Réf. centrés. */
.matrix--edit { width: auto; }
.matrix--edit thead th { text-align: left; }
.matrix--edit thead th.col-n, .matrix--edit thead th.col-ref, .matrix--edit td.col-n { text-align: center; }
.matrix--edit td.col-n { width: 1px; }
.matrix--edit td.cell-check { text-align: left; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--danger); }
.check-inline.is-disabled { color: var(--muted); cursor: not-allowed; }
.check-inline.is-disabled input { cursor: not-allowed; opacity: .5; }
.check-inline.has-tip::after { left: auto; right: 0; }
.matrix--edit tbody th[scope="row"] { min-width: 230px; max-width: none; }
.regul-orders th:nth-child(5), .regul-orders td:nth-child(5) { text-align: center; }
.matrix--edit input[type="text"], .matrix--edit select { width: 9rem; min-height: 40px; padding: 4px 8px; }
.matrix--edit td select { width: auto; min-width: 9rem; }
.matrix--edit tbody th[scope="row"] input[type="text"] { width: 20rem; min-width: 200px; }
.matrix--edit input[type="number"] { width: 5.4rem; }
.matrix--edit .row-new th[scope="row"], .matrix--edit .row-new td { background: var(--accent-soft); }
.matrix td.ref { color: var(--muted); text-align: center; }
.matrix td.num { min-width: 4.5rem; text-align: center; }
.matrix td.cell-check { text-align: center; }
.cell-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); }
.cell-check small { display: block; font-size: .72rem; color: #8a4b0b; }
.matrix td.cell-locked { background: var(--accent-soft); }
.matrix tr.is-offday th[scope="row"], .matrix tr.is-offday td { background: #e3f3f6; }
.matrix th.is-current, .matrix td.is-current { background: var(--brand-soft); }
.matrix--dates thead th, .matrix--planning thead th { vertical-align: bottom; }
.matrix--planning thead th { min-width: 6rem; max-width: 9rem; line-height: 1.2; white-space: normal; }
.matrix--planning .head1 { height: auto; width: auto; }
/* Les grilles « dates » / « planning » ne s'étirent pas sur toute la largeur : elles s'adaptent à leur contenu. */
.matrix--dates, .matrix--planning { width: fit-content; min-width: 100%; }
.table-wrap--grid:has(.matrix--dates), .table-wrap--grid:has(.matrix--planning) { width: fit-content; max-width: 100%; }
/* Tableau « dates » transposé : dates en colonnes, contrats en lignes. */
.matrix--dates-t { table-layout: fixed; }
.matrix--dates-t thead th.date-col { text-align: center; white-space: nowrap; vertical-align: bottom; width: 2.9rem; }
.matrix--dates-t thead th.corner { width: 7.5rem; }
.matrix--dates-t .date-col__dow { display: block; font-weight: 400; font-size: .74rem; }
.matrix--dates-t .date-col__day { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); }
/* Colonnes compactes pour tenter de tout faire tenir en largeur : marges et cellules réduites. */
.matrix--dates-t th, .matrix--dates-t td { padding: 4px 4px; }
.matrix--dates-t thead th.date-col { padding-inline: 3px; }
.matrix--dates-t .cell-check input[type="checkbox"] { width: 18px; height: 18px; }
/* Alternance clair/sombre des colonnes par mois. */
.matrix--dates-t .date-col--alt { background: #eef2ea; }
.matrix--dates-t tbody th.contract-row { text-align: left; white-space: nowrap; }
.matrix--dates-t .contract-row__label { display: block; font-weight: 700; }
.matrix--dates-t .contract-row .link-btn { font-size: .72rem; }
.matrix--dates-t tbody td.cell-check { text-align: center; }
.matrix--dates-t .is-offday { background: #e3f3f6; }
.matrix--dates-t tfoot th[scope="row"] { text-align: left; white-space: nowrap; }
.matrix--dates-t tfoot td { text-align: center; }
/* Planning transposé : mêmes colonnes de dates compactes que « Dates de distribution ». */
.matrix--planning.matrix--dates-t thead th.date-col { min-width: 0; max-width: none; white-space: nowrap; }
.matrix--planning.matrix--dates-t tbody th.contract-row.is-current,
.matrix--planning.matrix--dates-t tbody td.is-current { background: var(--brand-soft); }
/* Cellules « Présent » : fond soutenu pour bien marquer la présence. */
.matrix--planning.matrix--dates-t tbody td.is-present { background: #cfe8d6; }
.matrix--planning.matrix--dates-t tbody td.is-present span[aria-label="Présent"] { color: #1f6b3f; font-weight: 800; }
/* Pied « Nbre » : couleur de fond selon le nombre de producteurs. */
.matrix--planning.matrix--dates-t tfoot td.nbre--dark { background: #1f6b3f; color: #fff; }
.matrix--planning.matrix--dates-t tfoot td.nbre--light { background: #b9e0c4; color: #143d27; }
.matrix--planning.matrix--dates-t tfoot td.nbre--orange { background: #f5a623; color: #3a2200; }
.matrix--planning.matrix--dates-t tfoot td.nbre--pink { background: #f3a6c0; color: #5a1030; }
.matrix--planning.matrix--dates-t tfoot td.nbre--red { background: #d64545; color: #fff; }
/* Plein écran du planning : la carte occupe tout l'écran, le tableau remplit l'espace restant. */
html.has-fullscreen-planning, html.has-fullscreen-planning body { overflow: hidden; }
section.card.is-fullscreen {
	position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0;
	display: flex; flex-direction: column; background: var(--card, #fff); padding: 12px 14px;
}
section.card.is-fullscreen .table-wrap--grid {
	flex: 1 1 auto; max-height: none !important; min-height: 0; max-width: none; width: auto; overflow: auto;
}
section.card.is-fullscreen .card__hint { display: none; }
.planning-fs__exit {
	position: absolute; top: 10px; right: 12px; z-index: 2;
	padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--danger, #d64545); color: #fff; font: inherit; font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.planning-fs__exit:hover, .planning-fs__exit:focus-visible { filter: brightness(1.08); }
.planning-fs__exit[hidden] { display: none; }
@media (max-width: 520px) {
	.matrix--edit tbody th[scope="row"] { min-width: 170px; }
	.matrix--edit tbody th[scope="row"] input[type="text"] { width: 12rem; min-width: 150px; }
	.tabs a { padding: 0 12px; }
	.tabs:not(.tabs--sub) { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
	.tabs:not(.tabs--sub) a { flex: none; white-space: nowrap; }
}

/* ---------- Pages de gestion : thème « bleu ardoise » ----------
   Les couleurs de marque passent du vert au bleu ; pour changer de teinte, ne modifier que ce bloc de variables. */
body.mode-gestion {
	--ink: #1b2742; --muted: #55637f; --bg: #edf0f7; --line: #d5dbea;
	--brand: #34569a; --brand-dark: #263f73; --brand-soft: #e6ebf7; --brand-strong: #2b4682;
	--g-edge: #c9d3ea; --g-edge-hover: #8ea3d3; --g-hover: #1d3366; --g-glow: rgba(43, 70, 130, .35);
	--g-sunken: #e3e8f4; --g-group: #d9e0f1; --g-thumb: #8da2d1; --g-thumb-hover: #5f7cc0;
}
.gestion-band { background: var(--brand-strong); color: #fff; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.gestion-band__in { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; max-width: var(--page-max); margin: 0 auto; padding: 6px 16px; }
.gestion-band span { opacity: .85; }
.gestion-band span::before { content: "\203A"; margin-right: 14px; }
.mode-gestion .app-header { border-bottom: 4px solid var(--brand-strong); }
.mode-gestion .page-head h1 { color: var(--brand-dark); }
.mode-gestion .card { border-top: 3px solid var(--brand); }
.mode-gestion .contract-card--new { border-top-color: var(--accent); }

.mode-gestion .burger, .mode-gestion .logout-btn, .mode-gestion .tabs a:not([aria-current="page"]) { border-color: var(--g-edge); }
.mode-gestion .logout-btn:hover { border-color: #e6b3ac; }
.mode-gestion .burger:hover, .mode-gestion .burger[aria-expanded="true"], .mode-gestion .tabs a:hover:not([aria-current="page"]) { border-color: var(--g-edge-hover); }
@media (max-width: 1239px) {
	.mode-gestion .app-tabs a:not([aria-current="page"]) { border-color: var(--g-edge); }
	.mode-gestion .app-tabs a:hover:not([aria-current="page"]) { border-color: var(--g-edge-hover); }
	.mode-gestion .app-tabs a[aria-current="page"] { box-shadow: 0 2px 8px var(--g-glow); }
}
.mode-gestion .app-tabs a[aria-current="page"]:hover, .mode-gestion .home-btn:hover, .mode-gestion .action-card--main:hover { background: var(--g-hover); border-color: var(--g-hover); }
.mode-gestion .home-btn { box-shadow: 0 4px 14px var(--g-glow); }
.mode-gestion .alert--ok { border-color: var(--g-edge); }

.mode-gestion :is(input, select, textarea) { border-color: #c4cde2; }
.mode-gestion input:read-only:not([type="checkbox"]) { background: #eceff6; }
.mode-gestion .chips li { background: var(--g-sunken); }
.mode-gestion .matrix thead th, .mode-gestion .matrix--grid thead th.corner { background: var(--g-sunken); }
.mode-gestion .matrix--grid .group-row th, .mode-gestion .matrix--grid .group-row td { background: var(--g-group); }
.mode-gestion .matrix thead th.is-current { background: #c5d1ee; }
.mode-gestion .table-wrap--grid::-webkit-scrollbar-track, .mode-gestion .table-wrap--grid::-webkit-scrollbar-corner { background: var(--g-sunken); }
.mode-gestion .table-wrap--grid::-webkit-scrollbar-thumb { background: var(--g-thumb); border-color: var(--g-sunken); }
.mode-gestion .table-wrap--grid::-webkit-scrollbar-thumb:hover { background: var(--g-thumb-hover); }
@supports (-moz-appearance: none) { .mode-gestion .table-wrap--grid { scrollbar-color: var(--g-thumb) var(--g-sunken); } }
@media print { .gestion-band { display: none; } }

/* ---------- Case « Style compact » de la bannière ---------- */
.compact-toggle {
	display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; cursor: pointer; font-weight: 700; white-space: nowrap;
	background: var(--surface); color: var(--ink); border: 1.5px solid #cfe0d5; border-radius: 12px;
}
.compact-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: none; }
.compact-toggle:hover { background: var(--brand-soft); }
.compact-toggle:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.compact-toggle:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.mode-gestion .compact-toggle { border-color: var(--g-edge); }
.mode-gestion .compact-toggle:has(input:checked) { border-color: var(--brand); }

/* Les styles dense et compact ne valent qu'à l'écran : l'impression garde sa mise en page standard. */
@media screen {
/* Style de base (classe « dense » posée sur <html> par la bannière) : marges, hauteurs et corps de texte réduits. */
html.dense body { font-size: 14px; }
.dense .app-header__bar { padding-block: 5px; gap: 6px 8px; }
.dense .brand img { height: 30px; }
.dense .burger { width: 44px; height: 44px; border-radius: 12px; }
.dense .home-btn, .dense .logout-btn { height: 44px; min-width: 44px; border-radius: 12px; }
.dense .app-tabs a, .dense .compact-toggle { min-height: 36px; padding: 0 10px; }
.dense .page { padding: 12px 12px 96px; }
.dense .page-head { margin-bottom: 10px; }
.dense .page-head h1 { font-size: 1.35rem; }
.dense .gestion-band__in { padding: 3px 12px; }
.dense .card { padding: 12px; }
.dense .card + .card, .dense .stack > * + * { margin-top: 10px; }
.dense .layout, .dense .contract-grid, .dense .form-grid, .dense .contract-edit-grid { gap: 10px; }
.dense .sticky { top: 64px; }
.dense .alert { padding: 8px 12px; margin-bottom: 10px; }
.dense .toolbar { margin-bottom: 10px; }
.dense .crumb { min-height: 32px; }
.dense .tabs { margin-bottom: 10px; }
.dense .tabs a { min-height: 34px; padding: 0 12px; }
.dense .tabs--sub a { min-height: 30px; }
.dense .contract-btn { min-height: 56px; padding: 8px 12px; }
.dense .btn { min-height: 36px; padding: 0 14px; }
.dense input:not([type="checkbox"]):not([type="radio"]), .dense select { min-height: 34px; padding: 4px 8px; }
.dense textarea { min-height: 80px; padding: 6px 8px; }
.dense .check input { width: 18px; height: 18px; }
.dense .matrix { font-size: .9rem; }
.dense .matrix th, .dense .matrix td { padding: 4px 8px; }
.dense .qty, .dense input.qty, .dense .matrix input[type="number"], .dense .matrix--edit input[type="text"], .dense .matrix--edit select { min-height: 30px; padding: 2px 6px; }
.dense .matrix--grid .head1 { height: 32px; }
.dense .matrix--grid .head2 { top: 32px; }
.dense .cell-check input[type="checkbox"] { width: 18px; height: 18px; }
.dense .action-bar { padding-block: 6px; }

/* Style compact (case de la bannière) : encore plus serré que le style de base. Placé après lui : à égalité de poids, il l'emporte. */
html.compact body { font-size: 13px; line-height: 1.35; }
.compact .app-header__bar { padding-block: 2px; gap: 4px 6px; }
.compact .brand img { height: 24px; }
.compact .brand span { font-size: .95rem; }
.compact .burger { width: 36px; height: 36px; border-radius: 10px; }
.compact .burger__bar { width: 20px; height: 2px; }
.compact .burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.compact .burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.compact .home-btn, .compact .logout-btn { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; font-size: .95rem; }
.compact .home-btn svg, .compact .logout-btn svg { width: 22px; height: 22px; }
.compact .app-tabs a, .compact .compact-toggle { min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: .92rem; }
.compact .compact-toggle input { width: 16px; height: 16px; }
.compact .user-chip { font-size: .88rem; }
.compact .page { padding: 6px 8px 84px; }
.compact .page-head { margin-bottom: 6px; gap: 6px 16px; }
.compact .page-head h1 { font-size: 1.15rem; }
.compact .gestion-band { font-size: .76rem; }
.compact .gestion-band__in { padding: 1px 8px; }
.compact .card { padding: 8px; border-radius: 10px; }
.compact .card__title { font-size: 1rem; }
.compact .card__hint { margin-bottom: 8px; font-size: .86rem; }
.compact .card + .card, .compact .stack > * + * { margin-top: 6px; }
.compact .layout, .compact .contract-grid, .compact .form-grid, .compact .contract-edit-grid, .compact .action-grid { gap: 6px; }
.compact .sticky { top: 50px; }
.compact .alert { padding: 5px 10px; margin-bottom: 6px; }
.compact .toolbar { gap: 8px 10px; margin-bottom: 6px; }
.compact .crumb { min-height: 26px; margin-bottom: 4px; }
.compact .tabs { gap: 6px; margin-bottom: 6px; }
.compact .tabs a { min-height: 28px; padding: 0 10px; font-size: .92rem; }
.compact .tabs--sub a { min-height: 26px; }
.compact .contract-btn { min-height: 44px; padding: 5px 10px; border-radius: 10px; }
.compact .contract-btn__meta { font-size: .8rem; }
.compact .btn { min-height: 30px; padding: 0 10px; font-size: .92rem; }
.compact input:not([type="checkbox"]):not([type="radio"]), .compact select { min-height: 28px; padding: 2px 6px; border-radius: 8px; }
.compact textarea { min-height: 60px; padding: 4px 6px; }
.compact .field { gap: 2px; }
.compact .field > span, .compact .field > label { font-size: .78rem; }
.compact .check input { width: 16px; height: 16px; }
.compact .fieldset { margin-top: 8px; padding: 4px 8px 8px; }
.compact .chips li { padding: 2px 8px; font-size: .78rem; }
.compact .badge { padding: 1px 8px; font-size: .74rem; }
.compact .badge--obligatoire { padding: 1px 5px; font-size: .48rem; }
.compact .matrix { font-size: .8rem; }
.compact .matrix th, .compact .matrix td { padding: 2px 6px; }
.compact .matrix thead th { font-size: .76rem; }
.compact .qty, .compact input.qty, .compact .matrix input[type="number"] { width: 4.6rem; }
.compact .qty, .compact input.qty, .compact .matrix input[type="number"], .compact .matrix--edit input[type="text"], .compact .matrix--edit select { min-height: 24px; padding: 1px 4px; }
.compact .matrix--grid .head1 { height: 26px; }
.compact .matrix--grid .head2 { top: 26px; }
.compact .cell-check input[type="checkbox"] { width: 16px; height: 16px; }
.compact .table-wrap--grid::-webkit-scrollbar { width: 14px; height: 14px; }
.compact .action-bar { padding-block: 4px; gap: 8px; }
.compact .action-bar__total strong { font-size: 1rem; }

/* Rangée d'onglets (ordinateur) : pas de marge basse sous le bandeau, onglets à la hauteur du style choisi. */
@media (min-width: 1240px) {
	.dense .app-header__bar { padding-block: 5px 0; }
	.dense .app-tabs a { min-height: 34px; padding: 0 12px; }
	.compact .app-header__bar { padding-block: 3px 0; }
	.compact .app-tabs a { min-height: 28px; padding: 0 12px; }
}
}

/* ---------- Compte / connexion ---------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
.narrow { max-width: 760px; margin-inline: auto; }

.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; }
.auth__card { width: min(100%, 440px); }
.auth__logo { display: block; margin: 0 auto 14px; height: 56px; }
.auth h1 { font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
.auth p.lead { text-align: center; color: var(--muted); margin-bottom: 20px; }
.auth__links { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; font-size: .94rem; }

/* ---------- Accueil ---------- */
.action-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* L'aspect de base vient de la règle commune avec les boutons de la bannière ; on ne règle ici que la mise en page. */
.action-card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 76px; padding: 12px 16px; }
.action-card--alert, .action-card--required-alert { position: relative; padding-right: 44px; }
.action-card__alert { position: absolute; top: 12px; right: 12px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #d32f2f; color: #fff; font-size: .75rem; font-weight: 900; line-height: 1; box-shadow: 0 1px 4px rgba(211, 47, 47, .4); }
.action-card span { font-weight: 500; font-size: .9rem; color: var(--muted); }
.action-card:hover span { color: var(--brand-dark); }
.action-card--main span, .action-card--main:hover span { color: #e6f4ea; }

.notice { border-left: 6px solid var(--accent); }
.prose { max-width: 72ch; margin-bottom: 14px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.reminder + .reminder { margin-top: 8px; }
.reminder summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.qr { display: block; width: 140px; height: 140px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.basket-date { margin: 16px 0 6px; font-size: 1rem; color: var(--brand-dark); }
.baskets { margin: 0; padding: 0; list-style: none; }
.baskets li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.baskets li:last-child { border-bottom: 0; }

/* ---------- Feuille imprimable ---------- */
.sheet h2 { margin: 22px 0 8px; }
.sheet .matrix th, .sheet .matrix td { text-align: left; }

@media (max-width: 520px) {
	.card { padding: 14px; border-radius: 12px; }
	.brand span { display: none; }
	.total-box strong { font-size: 1.35rem; }
}

@media print {
	body { background: #fff; font-size: 12px; }
	.app-header, .action-bar, .btn, .skip-link, .crumb, .toolbar { display: none !important; }
	.page { padding: 0; max-width: none; }
	.card { box-shadow: none; border-color: #999; break-inside: avoid; }
	.table-wrap { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Distributions et permanences (am_calend.php8), tableau repris de l'ancien ecran */
.legacy-cal { width: 100%; border-collapse: collapse; background: #fff; }
.legacy-cal th { background: #3d5a80; color: #fff; padding: 8px; text-align: center; font-weight: 700; border: 1px solid #fff; }
.legacy-cal th small { font-weight: 400; }
.legacy-cal td { padding: 10px 8px; border: 1px solid #fff; vertical-align: middle; }
.legacy-cal tr.dr td { background: #dde2ea; }
.legacy-cal tr.sr td { background: #ecf0f5; }
.legacy-cal .legacy-cal__date-head { position: sticky; left: 0; z-index: 5; }
.legacy-cal .legacy-cal__date { position: sticky; left: 0; z-index: 2; min-width: 150px; text-align: left; vertical-align: top; white-space: nowrap; font-size: 1.05rem; font-weight: 700; box-shadow: 2px 0 4px rgba(0, 0, 0, .12); }
.legacy-cal__date-meta { display: grid; gap: 3px; margin-top: 7px; font-size: .75rem; line-height: 1.3; font-weight: 500; white-space: normal; }
.legacy-cal__date-meta b { font-weight: 800; }
.legacy-cal__registered { color: #bd5360; }
.legacy-cal .legacy-cal__slot { text-align: center; }
.legacy-cal tr td.legacy-cal__slot--taken { background: palegreen; }
.legacy-cal tr td.legacy-cal__slot--text { background: #b7dfc0; }
.legacy-cal form { margin: 0; }
.legacy-cal__link { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.legacy-cal__link--free { color: #c00; font-size: 1rem; }
.legacy-cal__link--own { color: #0000ee; font-size: 1.15rem; }
/* Listes de Divers : tableaux aeres */
.airy th, .airy td { padding: 14px 18px; vertical-align: middle; }
.airy thead th { padding-top: 16px; padding-bottom: 16px; }
.airy tbody tr + tr td, .airy tbody tr + tr th { border-top: 1px solid #e4e0d2; }
.airy td:nth-child(2) { font-weight: 600; }
/* Suivi des permanences : les premiers du classement (à relancer en priorité) sont mis en évidence. */
.airy tbody tr.stats-priority td { background: #fdf3e0; }
.airy tbody tr.stats-priority td:first-child { font-weight: 700; color: var(--danger); }

/* Filtres du suivi des contrats */
.follow-filters { display: grid; gap: 14px; margin-bottom: 20px; }
.follow-filters fieldset { border: 1px solid #ddd8c8; border-radius: 8px; padding: 8px 14px 12px; }
.follow-filters legend { font-weight: 700; padding: 0 6px; }
.follow-filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.follow-filters__grid label { display: flex; gap: 6px; align-items: center; }

.table-wrap--flat { overflow: auto; max-height: calc(100vh - 140px); }
.follow-table thead th { position: sticky; top: 0; z-index: 2; }

/* Suivi des contrats : les colonnes Producteur et Contrat restent visibles pendant le défilement
   horizontal (indispensable dès que plusieurs saisons sont affichées). */
.follow-table .follow-sticky { position: sticky; }
.follow-table .follow-sticky--first { left: 0; z-index: 4; min-width: 9.5rem; box-shadow: 1px 0 0 rgba(0, 0, 0, .18); }
.follow-table .follow-sticky--second { left: 9.5rem; z-index: 4; min-width: 7.5rem; box-shadow: 1px 0 0 rgba(0, 0, 0, .18); }
.follow-table thead .follow-sticky { z-index: 6; }
/* En-tête sur une ligne : libellé de la donnée rappelé en petit sous le nom de la saison. */
.follow-th-sub { display: block; margin-top: 2px; font-size: .68rem; font-weight: 600; opacity: .85; }
/* Pied de totaux : toujours visible en bas du cadre. */
.follow-table tfoot th, .follow-table tfoot td { position: sticky; bottom: 0; z-index: 3; border-top: 2px solid rgba(0, 0, 0, .35); }
.follow-table tfoot .follow-sticky--first { z-index: 5; }
.follow-total-label { background: #000; color: #fff; }

/* Petites largeurs : on réduit les colonnes figées pour laisser de la place aux données,
   et on retire l'ombre qui mangerait la largeur utile. */
@media (max-width: 760px) {
	.follow-table .follow-sticky--first { min-width: 5.5rem; max-width: 5.5rem; }
	.follow-table .follow-sticky--second { left: 5.5rem; min-width: 4.5rem; max-width: 4.5rem; }
	.follow-table .follow-sticky--first, .follow-table .follow-sticky--second { box-shadow: none; }
	.follow-table th, .follow-table td { padding: 8px 8px; }
	.follow-th-sub { font-size: .62rem; }
	/* Les noms longs sont tronqués : le libellé complet reste disponible au survol (title). */
	.follow-table .follow-sticky--first, .follow-table .follow-sticky--second {
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
}

.follow-table th, .follow-table td { white-space: nowrap; }
.table-wrap--flat:fullscreen { max-height: none; height: 100%; border-radius: 0; border: 0; }

.follow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 12px; }
.follow-head h2 { margin: 0; }
.follow-head__limit { display: flex; align-items: center; gap: 8px; font-weight: 600; }

.btn--pastel { background: #cfe8d5; color: #1f4d32; border: 1px solid #a9d3b8; }
.btn--pastel.is-dirty { background: #1e7a3c; color: #fff; border-color: #165c2d; }
.btn--pastel:hover { background: #bfe0c8; }
/* Tant qu'aucun filtre n'a changé, le bouton reste discret : il n'y a rien à relancer. */
.btn--pastel[aria-disabled="true"] { background: #eef1ee; color: #7a8a80; border-color: #d7ded9; cursor: default; }
.btn--pastel[aria-disabled="true"]:hover { background: #eef1ee; }
/* Le bouton actif attire l'œil : ombre et libellé explicite. */
.btn--pastel.is-dirty { box-shadow: 0 2px 8px rgba(30, 122, 60, .35); }

/* Saisons repliées : le résumé remplace la liste, ouverte d'un clic. */
.follow-seasons > summary { cursor: pointer; font-weight: 700; padding: 4px 0; list-style-position: inside; }
/* Calcul en cours : la page est recouverte d'un voile et un indicateur tourne au centre. */
.follow-busy {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	background: rgba(250, 249, 244, .92);
	backdrop-filter: blur(2px);
}
.follow-busy[hidden] { display: none; }
.follow-busy__box {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 26px; border: 1px solid #cfe0d5; border-radius: 14px;
	background: #fff; box-shadow: 0 8px 26px rgba(31, 107, 63, .18);
	font-weight: 700; color: var(--brand-dark);
}
.follow-busy__spinner {
	width: 26px; height: 26px; flex: none; border-radius: 50%;
	border: 3px solid #cfe0d5; border-top-color: var(--brand-strong);
	animation: followSpin .8s linear infinite;
}
@keyframes followSpin { to { transform: rotate(360deg); } }
/* Empêche toute interaction pendant le calcul. */
body.is-busy { overflow: hidden; }
body.is-busy .page { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.follow-busy__spinner { animation-duration: 2s; }
}
.follow-seasons > summary::marker { color: #4b5a51; }
.follow-seasons[open] > summary { margin-bottom: 8px; }
.follow-seasons__count { font-weight: 600; color: #4b5a51; }
/* Sur grand écran la liste est toujours visible : le repli n'apporte rien.
   On ne touche pas au <details> lui-même (display:contents casserait la hauteur du fieldset) :
   on masque le résumé et on force l'affichage de la grille, y compris quand le détail est fermé. */
@media (min-width: 761px) {
	.follow-seasons > summary { display: none; }
	.follow-seasons > .follow-filters__grid { display: grid !important; }
	/* Le contenu d'un <details> fermé est masqué par le navigateur : on le rétablit. */
	.follow-seasons:not([open]) > .follow-filters__grid { display: grid !important; }
	.follow-seasons { display: block; }
}

/* Onglet sur 2 lignes (Distributions & Permanences) */
.app-tabs a.tab--two { font-size: .8rem; line-height: 1.1; text-align: center; padding-block: 2px; }
@media (max-width: 1239px) {
	.app-tabs a.tab--two, .app-tabs a.tab--two .perm-alert-tab__label { text-align: left; }
}

/* Distributions : sous-entete, badges, toast panier, fenetre de modification */
.legacy-cal th.legacy-cal__sub { text-align: left; font-size: .72rem; font-weight: 600; }
.legacy-cal td.legacy-cal__prod, .legacy-cal td.legacy-cal__slot { position: relative; padding-bottom: 28px; }
.legacy-cal .legacy-cal__closed { color: #6b6f76; font-style: italic; font-size: .9rem; }
.legacy-cal tr td.legacy-cal__slot--closed { color: #6b6f76; }
.cal-badge { position: absolute; right: 6px; bottom: 5px; border: 0; border-radius: 999px; padding: 2px 9px; font: inherit; font-size: .68rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.cal-badge--basket { background: #2f6b46; color: #fff; }
.cal-badge--basket:hover, .cal-badge--basket:focus-visible { background: #1f4d32; }
.cal-badge--edit { background: #fff; color: #3d5a80; border: 1px solid #3d5a80; }
.cal-badge--edit:hover, .cal-badge--edit:focus-visible { background: #3d5a80; color: #fff; }
.cal-toast { position: absolute; z-index: 50; width: max-content; max-width: 96vw; padding: 10px 14px; background: #1f2d27; color: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: .88rem; white-space: nowrap; }
.cal-toast[hidden] { display: none; }
.cal-toast ul { margin: 6px 0 0; padding-left: 18px; }
.cal-toast p { margin: 6px 0 0; }
.slot-dialog { border: 0; border-radius: 12px; padding: 20px 24px; width: min(460px, 94vw); box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.slot-dialog::backdrop { background: rgba(0,0,0,.45); }
.slot-dialog h2 { margin: 0 0 4px; font-size: 1.2rem; }
.slot-dialog__sub { margin: 0 0 12px; color: #5b665f; }
.slot-dialog fieldset { border: 1px solid #ddd8c8; border-radius: 8px; margin: 0 0 12px; display: grid; gap: 6px; }
.slot-dialog__field { display: grid; gap: 4px; margin-bottom: 12px; font-weight: 600; }
.slot-dialog__field[hidden] { display: none; }
.slot-dialog__field input { font-weight: 400; padding: 8px; border: 1px solid #bbb; border-radius: 6px; }
.slot-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
/* Colonne « Déplacer une date » de l'écran Dates de distribution : collée à droite pour rester visible malgré le défilement horizontal. */
.matrix--dates .date-move-head, .matrix--dates .date-move-cell { width: 9rem; min-width: 9rem; max-width: 9rem; white-space: nowrap; text-align: center; }
.matrix--dates .date-move-head { position: sticky; right: 0; z-index: 4; background: #f0ede3; box-shadow: -1px 0 0 var(--line); }
.matrix--dates .date-move-cell { position: sticky; right: 0; z-index: 2; background: #fbfaf5; box-shadow: -1px 0 0 var(--line); }
.matrix--dates tfoot .date-move-cell { z-index: 3; background: #f0ede3; }
.matrix--dates .date-move-cell .btn--small { padding: 4px 8px; font-size: .78rem; white-space: normal; line-height: 1.15; }
.move-date-list { display: grid; gap: 6px; max-height: 40vh; overflow: auto; }
.move-date-list .check-inline { white-space: normal; }
.legacy-cal .legacy-cal__min { font-size: .7rem; color: #5b3a00; font-weight: 400; }

.cal-toast .cal-toast__flag { color: #ffb4a8; }

.legacy-cal .legacy-cal__nohelp { color: #8a2c0d; }

/* Listes referents / producteurs : lignes alternees et entetes colorees */
.zebra thead th { background: #3d5a80; color: #fff; text-align: left; }
.zebra tbody tr.zebra-a > * { background: #eef1f5; }
.zebra tbody tr.zebra-b > * { background: #d3dae5; }

.ref-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ref-layout__main { flex: 1 1 560px; min-width: 0; }
.ref-layout__side { flex: 0 1 280px; }
.ref-layout__side small { color: #5b665f; }

/* Listes « référents » et « producteurs » : sur petit écran, chaque ligne devient une fiche
   avec le nom de la colonne devant la valeur (data-label posé par am_divers.php8). */
@media (max-width: 760px) {
	.resp-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.resp-list, .resp-list tbody, .resp-list tr, .resp-list td { display: block; width: 100%; }
	.resp-list tbody tr {
		margin: 0 0 10px; padding: 4px 0;
		border: 1px solid #d8d3c4; border-radius: 12px; overflow: hidden;
	}
	.resp-list tbody tr:last-child { margin-bottom: 0; }
	.resp-list td, .resp-list tbody tr + tr td {
		display: grid; grid-template-columns: minmax(92px, 38%) 1fr; gap: 10px;
		padding: 7px 12px; border-top: 0; text-align: left; overflow-wrap: anywhere;
	}
	.resp-list td + td { border-top: 1px solid rgba(0, 0, 0, .08); }
	.resp-list td::before {
		content: attr(data-label);
		font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
		color: #4b5a51; align-self: center;
	}
	.resp-list td:empty, .resp-list td[data-label=""] { display: none; }
	/* Les cellules fusionnées (rowspan) gardent leur libellé une seule fois. */
	.resp-list td[rowspan] { border-top: 0; }
	.resp-list td:nth-child(2) { font-weight: 600; }
}


/* Déconnexion : dernière ligne du menu (smartphone) / extrémité droite de la rangée d'onglets (ordinateur). */
.app-tabs a.version-badge.version-badge, .app-tabs a.version-badge.version-badge:hover { border-color: #c9a227; }
.app-tabs a.tab--logout { gap: 8px; }
.app-tabs a.tab--logout svg { width: 20px; height: 20px; flex: none; }
.app-tabs a.tab--logout:hover { background: var(--danger-soft); border-color: #e6b3ac; color: var(--danger); }
@media (min-width: 1240px) {
	.app-tabs a.tab--logout { margin-left: auto; }
}


/* Tableaux des récapitulatifs de commandes : colonnes alignées d'un tableau à l'autre, en-têtes colorées, lignes alternées. */
.recap-table { width: max-content; border-collapse: collapse; }
.recap-table th, .recap-table td { padding: 9px 14px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.recap-table .num { text-align: right; white-space: nowrap; }
.recap-table thead th { background: #3d5a80; color: #fff; font-weight: 700; }
.recap-table tbody tr:nth-child(odd) > * { background: #eef1f5; }
.recap-table tbody tr:nth-child(even) > * { background: #d9e0ea; }
.recap-table tbody th { font-weight: 600; }
.recap-heading-short { display: none; }
.referent-checks { margin-top: 14px; }
.referent-member-picker { margin: 0 0 12px; }
.referent-member-picker .field { max-width: 30rem; }
.referent-member-picker option.is-validated { background-color: silver; }
.referent-checks h3 { margin: 0 0 6px; font-size: .95rem; }
.referent-checks ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.referent-errors ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; }
.referent-errors li { padding-left: 2px; }
.referent-errors li span { display: block; color: var(--text-muted, #626b67); }
@media (min-width: 1100px) {
	.page--referent > :not(.referent-errors) { width: calc(100% - 368px); }
	.referent-errors--sidebar {
		position: fixed; z-index: 30; top: var(--app-header-height, 128px);
		right: max(16px, calc((100vw - var(--page-max)) / 2 + 16px));
		width: 320px; height: calc(100vh - var(--app-header-height, 128px)); height: calc(100dvh - var(--app-header-height, 128px));
		margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
		border-radius: 12px 12px 0 0;
	}
}
.referent-checks li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .72); }
.referent-checks strong { flex: none; }
.referent-checks__total { display: flex; justify-content: space-between; gap: 12px; margin: 7px 8px 0; font-weight: 700; }
.referent-checks__warning { margin: 2px 8px 0; color: var(--danger-strong); font-weight: 800; text-align: right; }
@media (max-width: 640px) {
	.recap-table { width: 100%; table-layout: fixed; }
	.recap-table th, .recap-table td { padding: 6px 3px; font-size: .78rem; overflow-wrap: anywhere; }
	.recap-table .num { text-align: left; white-space: normal; }
	.recap-table thead th { padding-right: 2px; padding-left: 2px; font-size: .65rem; white-space: nowrap; }
	.recap-table thead th.num { white-space: nowrap; }
	.recap-heading-short { display: inline; }
	.recap-heading-full { display: none; }
	.recap-table--multiline .recap-date { display: block; }
	.recap-table--multiline .recap-date-separator { display: none; }
}
@media (max-width: 360px) {
	.recap-table thead th { padding-right: 1px; padding-left: 1px; font-size: .58rem; }
}

/* Chèques : contrat obligatoire non souscrit */
.reorg tbody tr.row-missing > th, .reorg tbody tr.row-missing > td { background: #fbc99a; color: #6b3a0a; text-align: left; }
.reorg tbody tr.row-missing small { color: #6b3a0a; }

/* Chèques : badge « Code couleurs » */
.hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hint-row .card__hint { margin: 0; }
.color-legend { position: relative; flex: none; margin-left: auto; }
.color-legend__badge { border: 1px solid #9fb0cf; background: #eef2fa; color: #234879; border-radius: 999px; padding: 3px 12px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.color-legend__pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.color-legend.is-open .color-legend__pop { display: grid; gap: 6px; }
.legend-line { margin: 0; padding: 6px 10px; border-radius: 6px; font-size: .9rem; white-space: nowrap; }
.legend-line--ok { background: var(--brand-soft); color: var(--brand-dark); }
.legend-line--ko { background: var(--danger-row); color: var(--danger-strong); }
.legend-line--missing { background: #fbc99a; color: #6b3a0a; }
@media (max-width: 640px) {
	.color-legend__pop {
		width: calc(100vw - 48px); max-width: 360px; box-sizing: border-box;
		max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
		overflow-y: auto;
	}
	.legend-line { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 640px) and (max-height: 480px) {
	.color-legend__pop {
		position: fixed; top: 64px; right: 8px; left: auto;
		max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px);
	}
}

/* Chèques : bouton de dépliage (actif seulement sur smartphone) */
.reorg-toggle { all: unset; display: block; color: inherit; font: inherit; text-align: left; }
.reorg-toggle:disabled { cursor: default; }

/* Chèques sur smartphone : une carte repliable par contrat. */
@media (max-width: 640px) {
	.table-wrap--reorg { overflow: visible; border: 0; background: none; }
	.reorg, .reorg tbody, .reorg tfoot, .reorg tr { display: block; }
	.reorg thead { display: none; }
	.reorg tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
	.reorg th, .reorg td { white-space: normal; border-bottom: 0; text-align: left; }
	.reorg th[scope="row"] { position: static; grid-column: 1 / -1; min-width: 0; max-width: none; box-shadow: none; padding: 0; }
	.reorg-toggle { position: relative; width: 100%; box-sizing: border-box; padding: 10px 40px 10px 12px; cursor: pointer; }
	.reorg-toggle::after { content: ""; position: absolute; right: 16px; top: 14px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
	.reorg tr.is-open .reorg-toggle::after { top: 18px; transform: rotate(-135deg); }
	.reorg td[data-label] { grid-column: span 3; }
	.reorg td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 700; color: var(--muted); }
	.reorg td.reorg-chq { grid-column: span 2; display: none; order: 3; }
	.reorg tr.is-open td.reorg-chq { display: block; }
	.reorg input.qty, .reorg input[type="number"] { width: 100%; box-sizing: border-box; }
	.reorg tfoot td.reorg-chq, .reorg tr.is-open td.reorg-chq[data-col] { display: none; }
	.reorg td.reorg-na { display: none; }
	.reorg td.reorg-nosub { grid-column: 1 / -1; }
	.reorg th[scope="row"] .price { color: inherit; white-space: normal; }
	.reorg tfoot th[scope="row"] { padding: 10px 12px 2px; }
	.reorg tr.is-open td.reorg-chq { padding-top: 6px; }
}

/* Total saison cumulé (plusieurs contrats) */
.season-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--accent-soft); border-left: 4px solid var(--accent); font-size: 1.05rem; }
.season-total strong { font-size: 1.2rem; }

/* Récapitulatif (page contrat) */
.recap-mini { width: 100%; border-collapse: collapse; font-size: .9rem; }
.recap-mini th, .recap-mini td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: baseline; }
.recap-mini th:first-child { text-align: left; font-weight: 400; }
.recap-mini thead th { font-size: .8rem; color: var(--muted); font-weight: 700; }
.recap-mini tfoot th, .recap-mini tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; }
.recap-mini .is-draft { color: var(--danger); font-weight: 700; }
.recap-mini .todo { color: var(--danger); font-weight: 700; }
.recap-mini tr.row-missing > th, .recap-mini tr.row-missing > td { background: #fbc99a; color: #6b3a0a; text-align: left; }
.recap-mini .ok { color: #1e7a3c; font-weight: 700; }
.recap-mini .warn, .recap-legend .warn { color: #d9780f; font-weight: 700; }
.recap-legend .is-draft, .recap-legend .todo { color: var(--danger); font-weight: 700; }

/* Producteurs : dates sur une saison ouverte */
.contract-btn--dates { background: #edf8ef; border-color: #a9d3b8; }
.contract-btn--nodates { background: #fff0ed; border-color: #e6b3ac; }
.contract-btn--dates:hover { border-color: #5fa57a; }
.contract-btn--nodates:hover { border-color: #c9776b; }
/* Tuile sélectionnée : surbrillance par anneau + couleur de fond soutenue (vert/rose). */
.contract-btn--selected { box-shadow: 0 0 0 2px var(--brand-strong), var(--shadow); border-color: var(--brand-strong); }
.contract-btn--selected .contract-btn__meta { color: var(--brand-dark); font-weight: 600; }
.contract-btn--dates.contract-btn--selected { background: #bfe3c9; border-color: #2c7a4d; }
.contract-btn--dates.contract-btn--selected .contract-btn__meta { color: #17552f; }
.contract-btn--nodates.contract-btn--selected { background: #f7c9c2; border-color: #c0392b; }
.contract-btn--nodates.contract-btn--selected .contract-btn__meta { color: #7b241c; }
.legend-dates { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 700; color: var(--ink); }
.legend-dates--ok { background: #edf8ef; }
.legend-dates--no { background: #fff0ed; }

/* ---------- Calendrier administratif (gestion des dates de distribution) ---------- */
/* Page en hauteur fixe sous la bannière : chaque colonne défile, pas de double ascenseur page + colonne. */
main.page:has(> .calendar-page) { max-width: none; height: calc(100vh - var(--app-header-height, 0px)); height: calc(100dvh - var(--app-header-height, 0px)); padding: 0; margin: 0; overflow: hidden; box-sizing: border-box; }
.calendar-page { height: 100%; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 16px; height: 100%; padding: 16px; box-sizing: border-box; }
.calendar-layout__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-y: auto; padding-right: 4px; }
.calendar-layout__side { min-height: 0; overflow-y: auto; padding-right: 4px; }
.calendar-titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.calendar-titlebar h1 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); }
.calendar-titlebar p { margin: 4px 0 0; color: var(--muted); }
.calendar-seasonbar { padding-block: 12px; }
.calendar-seasonbar__form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.calendar-seasonbar__field { min-width: 16rem; }
.season-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.season-badge.is-open { background: var(--brand-soft); color: var(--brand-dark); }
.season-badge.is-planned { background: var(--accent-soft); color: #8a4b0b; }
.season-badge.is-closed { background: var(--danger-soft, #fdecea); color: var(--danger-strong, #b3261e); }
.calendar-tools > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.calendar-tools > summary::-webkit-details-marker { display: none; }
.calendar-tools > summary::before { content: "\25B8"; color: var(--brand); transition: transform .15s; }
.calendar-tools[open] > summary::before { transform: rotate(90deg); }
.calendar-tools > summary h2 { margin: 0; font-size: 1.05rem; }
.calendar-tools__inline { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calendar-tools[open] > summary { margin-bottom: 12px; }
.calendar-tools__block { margin-top: 12px; }
/* Formulaire saison : colonne 1 = code/libellé/statut empilés, colonne 2 = 6 dépôts empilés. */
.season-form__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.season-form__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.season-form__col .field--code { max-width: 5rem; }
.season-form__col .field--code input { width: 4.5rem; }
.season-form__col .field--statut { max-width: max-content; }
.season-form__col .field--statut select { width: auto; min-width: 8rem; }
.btn--sm { min-height: 30px; padding: 0 10px; font-size: .82rem; }
/* Modal générique (création de saison). */
.modal { border: 0; border-radius: 14px; padding: 0; max-width: min(680px, 94vw); width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.modal::backdrop { background: rgba(20, 30, 25, .45); }
.modal__body { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__head h2 { margin: 0; font-size: 1.2rem; }
.modal__close { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.modal__section { margin: 0; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; }
.calendar-card { display: flex; flex-direction: column; gap: 12px; }
.calendar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-head h2 { margin: 0; font-size: 1.05rem; }
.calendar-nav { display: inline-flex; align-items: center; gap: 6px; }
.calendar-nav__btn { min-width: 36px; min-height: 34px; padding: 0 10px; justify-content: center; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--muted); }
.calendar-legend li { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend__dot { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--line); }
.calendar-legend__dot--on { background: var(--brand-strong); border-color: var(--brand-strong); }
.calendar-legend__dot--today { background: #fff; border-color: var(--accent); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--accent); }
.calendar-legend__dot--other { background: #efece1; border-color: #d9d3c4; }
.calendar-months { display: flex; flex-direction: column; gap: 16px; }
/* Calendrier papier traditionnel : table à cases carrées, bordure fine, coins droits, hauteur ajustée au contenu. */
.calendar-admin { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.calendar-admin__caption { caption-side: top; padding: 6px 0; font-size: 1rem; font-weight: 800; text-align: center; color: var(--ink); }
.calendar-admin thead th { padding: 4px 2px; font-size: .72rem; font-weight: 700; color: #fff; background: var(--brand-strong); text-align: center; border: 1px solid var(--brand-dark); }
.calendar-cell { border: 1px solid #d9d3c4; padding: 0; vertical-align: top; }
.calendar-cell--empty { background: #f6f4ec; }
.calendar-cell form { margin: 0; }
.calendar-day { display: block; width: 100%; padding: 2px 5px; box-sizing: border-box; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; text-align: center; line-height: 1.25; }
.calendar-day__num { font-size: .9rem; font-weight: 700; }
.calendar-day:hover { background: var(--brand-soft); }
.calendar-day.is-on { background: var(--brand-strong); color: #fff; }
.calendar-day.is-on:hover { background: #17552f; }
/* Couleur des dates selon le statut de leur saison : vert (en cours), orange (prévisionnelle), rouge (fermée).
   Saison sélectionnée = couleur soutenue ; autres saisons = pastel. */
.calendar-day.is-on.is-open { background: #1f6b3f; color: #fff; }
.calendar-day.is-on.is-open:hover { background: #17552f; }
.calendar-day.is-on.is-planned { background: #e08a1e; color: #fff; }
.calendar-day.is-on.is-planned:hover { background: #c5760f; }
.calendar-day.is-on.is-closed { background: #c0392b; color: #fff; }
.calendar-day.is-on.is-closed:hover { background: #a52f23; }
.calendar-day--other.is-open { background: #d7ecdd; color: #3f6b4e; }
.calendar-day--other.is-planned { background: #fbe6c7; color: #8a5a12; }
.calendar-day--other.is-closed { background: #f6d5d0; color: #8f3a2f; }
/* Bulle d'aide des dates : texte multi-lignes et largeur adaptée. */
.calendar-day--other.has-tip { cursor: help; }
.calendar-day--other.has-tip::after { white-space: pre-line; max-width: min(320px, 80vw); text-align: left; font-weight: 500; }
.calendar-day.is-on.has-tip::after { white-space: pre-line; max-width: min(320px, 80vw); text-align: left; font-weight: 500; }
.calendar-cell--today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-cell--today .calendar-day__num { color: var(--accent); font-weight: 900; }
.calendar-cell--today .calendar-day.is-on .calendar-day__num { color: #fff; }
.calendar-day--other { display: block; width: 100%; padding: 2px 5px; box-sizing: border-box; background: #f6f4ec; color: #b3aa93; font-weight: 700; line-height: 1.25; cursor: default; text-align: center; }
@media (max-width: 1100px) {
	main.page:has(> .calendar-page) { height: auto; overflow: visible; }
	.calendar-layout { grid-template-columns: 1fr; height: auto; }
	.calendar-layout__main, .calendar-layout__side { overflow: visible; padding-right: 0; }
}