/* Style de l'application, repris du prototype v3.
   Les couleurs, les tailles et les espacements viennent de lui : c'est la
   maquette de référence, validée écran par écran. Ne pas « moderniser » sans
   décision — la densité est voulue, les utilisateurs traitent des listes et
   des montants. */

:root {
	--green: #00533a;
	--beige: #fcedd9;
	--lg: #c4d970;
	--yel: #ffd65c;
	--red: #ed7869;
	--bg: #f7f5f0;
	--panel: #ffffff;
	--line: #c9c6bd;
	--text: #1d1d1b;
	--muted: #5d5c58;
	--head: #ece7db;
	color-scheme: light;
}

* { box-sizing: border-box }

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: var(--text);
	background: var(--bg);
}

a { color: var(--green) }

/* --- Bandeau supérieur ------------------------------------------------- */
.top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	padding: 8px 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
.top img { height: 26px }
.top .app { line-height: 1.15 }
.top .app small { display: block; color: var(--muted); font-size: 11px }
.top .app b { font-size: 12px; letter-spacing: .02em }

.nav { margin-left: auto; display: flex; flex-wrap: wrap; border: 1px solid var(--green) }
.nav a, .nav span {
	padding: 7px 11px;
	color: var(--green);
	text-decoration: none;
	border-left: 1px solid var(--green);
	font-size: 12px;
	background: var(--panel);
	white-space: nowrap;
}
.nav a:first-child, .nav span:first-child { border-left: 0 }
.nav a.on { background: var(--green); color: #fff }
/* Écran prévu par la maquette, pas encore construit : montré, pas cliquable. */
.nav span.avenir { color: #9a9a94; cursor: default }

/* Les volets de Reporting et de Référentiels : une deuxième rangée sous
   l'en-tête, pleine largeur. Elle ne se replie pas en liste déroulante sur un
   écran étroit — la barre du haut en a une, deux menus l'un sous l'autre
   demanderaient de deviner lequel mène où. */
.nav.sous-onglets {
	margin: 0 0 10px;
	width: 100%;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}
.nav.sous-onglets a, .nav.sous-onglets span { font-size: 12px }

/* L'en-tête de travail : le contexte à gauche, la recherche au milieu, la
   création à droite. Il tient sur une ligne, et passe en colonne quand l'écran
   est étroit. */
.entete {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 8px 16px; background: var(--head);
	border-bottom: 1px solid var(--line); font-size: 12px;
}
.entete .ctxsel, .entete .recherche { display: flex; align-items: center; gap: 6px }
.entete label { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .04em }
.entete select, .entete input { font: inherit; padding: 3px 6px; border: 1px solid var(--line); background: #fff }
.entete .recherche input { min-width: 240px }
.entete .recherche { margin-left: auto }

/* Le menu de création : replié par défaut, il ne prend la place que lorsqu'on
   le demande. `details` suffit — une liste déroulante n'aurait pas permis de
   grouper par contenant ni de garder le libellé en clair. */
.neuve { position: relative }
.neuve > summary { list-style: none; cursor: pointer }
.neuve > summary::-webkit-details-marker { display: none }
.neuve .menu {
	position: absolute; right: 0; top: 100%; z-index: 20; min-width: 340px;
	background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.neuve .menu .groupe {
	padding: 6px 12px; background: var(--head); color: var(--muted);
	text-transform: uppercase; font-size: 10px; letter-spacing: .04em;
}
.neuve .menu a { display: block; padding: 7px 12px; color: var(--text); text-decoration: none }
.neuve .menu a:hover { background: var(--beige) }
.neuve .menu a b { font-family: "Courier New", monospace }

.qui { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.qui form { display: inline; margin: 0 }

main { max-width: 1280px; margin: 16px auto; padding: 0 18px }

/* --- Panneaux ---------------------------------------------------------- */
.panel { background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px }
.panel h2 {
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--head);
	border-bottom: 1px solid var(--line);
}
.ctx { padding: 6px 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px }
.note { padding: 8px 12px; font-size: 12px; color: var(--muted) }
.legend { font-size: 11px; color: var(--muted); padding: 4px 12px }
.exports { display: inline-block; margin-left: 6px }
.exports a { color: var(--green) }
/* Le lien qui ouvre l'énoncé d'une règle. Discret à dessein : il ne s'adresse
   qu'à qui déroule une recette ou instruit un écart. */
a.pourquoi { color: var(--muted); text-decoration: underline dotted }
a.pourquoi:hover { color: var(--text) }

/* --- Filtres et formulaires -------------------------------------------- */
.filters { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line) }
.f { border-right: 1px solid var(--line); padding: 6px 10px; min-width: 0 }
.f:last-child { border-right: 0 }
.f label {
	display: block;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 3px;
}
.f input, .f select, .f textarea { width: 100%; font: inherit; border: 0; padding: 3px 0; background: transparent }
.f input.err, .f select.err { border-bottom: 2px solid #b53d2e }
/* Les champs répartis sur les six colonnes des filtres, dans le volet droit de
   E06, laissaient des cases de 90 px : le libellé y était coupé au milieu. Ici
   les colonnes suivent le nombre de champs, et se partagent la largeur. */
.filters.ajout { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) }
.form { display: grid; grid-template-columns: repeat(4, 1fr) }
.form .f { border-bottom: 1px solid var(--line) }
.form .f input, .form .f select { border-bottom: 1px dotted #bbb }
.form .f.ro input { color: var(--muted); border-bottom: 0 }

/* Le volet « répartir » de l'ODB : fermé, il tient en une ligne. C'est ce qui
   permet à l'écran courant de ne demander qu'une ligne budgétaire, sans
   fermer la porte à la dépense qui tient sur deux. */
.repartir { border-top: 1px solid var(--line) }
.repartir > summary { padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--muted) }
.repartir[open] > summary { color: var(--text); border-bottom: 1px solid var(--line) }

/* Une enveloppe de caisse (écran E19) : son en-tête se lit replié — numéro,
   financement, versé, reste — et ses pièces se déplient dessous. Les
   enveloppes ouvertes s'ouvrent seules, les clôturées restent fermées : une
   caisse de trois ans d'ancienneté tient ainsi encore à l'écran. */
.enveloppe { border-top: 1px solid var(--line) }
.enveloppe > summary { padding: 8px 12px; cursor: pointer; font-size: 12px }
.enveloppe > summary b { font-family: "Courier New", monospace }
.enveloppe[open] > summary { background: var(--beige); border-bottom: 1px solid var(--line) }

/* Le chiffre qui commande la lecture d'un écran. Cinq chiffres de même taille
   et de même graisse se valent tous : aucun ne ressort, et celui qui sert à
   décider se cherche. Un seul est grand ; les autres l'expliquent. */
.cle { display: flex; align-items: baseline; gap: 12px; padding: 12px; flex-wrap: wrap }
.cle b { font-family: "Courier New", monospace; font-size: 30px; line-height: 1 }
.cle small { color: var(--muted); font-size: 12px }
.cle .quand { margin-left: auto; color: var(--muted); font-size: 11px }

/* Le cycle de l'argent en une ligne : ce qui est dépensé, ce qui est promis,
   ce qui reste. Trois parts d'un même tout — le reçu —, sinon la barre
   mentirait par construction. */
.cycle { padding: 0 12px 10px }
.cycle .rail { display: flex; height: 22px; border: 1px solid var(--line); background: #fff }
.cycle .part { min-width: 2px }
.cycle .part.depense { background: var(--green) }
.cycle .part.promis { background: var(--yel) }
.cycle .part.libre { background: var(--lg) }
.cycle .cartouche { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 11px }
.cycle .part.reste { background: repeating-linear-gradient(45deg, #efeadf, #efeadf 4px, #fff 4px, #fff 8px) }
.cycle .cartouche span::before {
	content: ""; display: inline-block; width: 9px; height: 9px;
	margin-right: 5px; border: 1px solid var(--line);
}
.cycle .cartouche .depense::before { background: var(--green) }
.cycle .cartouche .promis::before { background: var(--yel) }
.cycle .cartouche .libre::before { background: var(--lg) }
.cycle .cartouche .reste::before { background: repeating-linear-gradient(45deg, #efeadf, #efeadf 3px, #fff 3px, #fff 6px) }
.cycle .cartouche b { font-family: "Courier New", monospace }

/* Le bloc des taux, replié : son résumé se lit sans l'ouvrir. */
.resume-taux { padding: 10px 12px; cursor: pointer; font-size: 13px }
details.panel[open] > .resume-taux { border-bottom: 1px solid var(--line) }

/* --- Barre d'actions et boutons ---------------------------------------- */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px }
.bar .sp { flex: 1 }
.bar .exp { color: var(--muted); font-size: 12px }
.btn {
	font: inherit;
	font-size: 12px;
	padding: 7px 14px;
	border: 1px solid var(--green);
	background: #fff;
	color: var(--green);
	cursor: pointer;
	letter-spacing: .03em;
}
.btn.p { background: var(--green); color: #fff }
.btn.w { border-color: #b08f00; background: var(--yel); color: #3d3000 }
.btn.d { border-color: #b53d2e; background: #fff; color: #b53d2e }
.btn.s { padding: 4px 9px; font-size: 11px }

/* --- Tableaux ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse }
th {
	background: var(--green);
	color: #fff;
	text-align: left;
	padding: 7px 9px;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
td { padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: top }
tr:last-child td { border-bottom: 0 }
/* Les montants s'alignent à droite en chasse fixe : c'est ce qui permet de
   comparer deux colonnes de chiffres d'un coup d'œil. */
td.n, th.n { text-align: right; font-family: "Courier New", monospace; white-space: nowrap }
tr.tot td { background: var(--head); font-weight: bold }
tr.sub td { background: #f4f1ea; font-style: italic }
.tw { overflow-x: auto }

/* --- Étiquettes, alertes, étapes ---------------------------------------- */
.tag { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); font-size: 11px; background: #fff; white-space: nowrap }
.tag.g { background: var(--lg); border-color: #9bb24a }
.tag.y { background: var(--yel); border-color: #d1ac2a }
.tag.r { background: var(--red); border-color: #c95a4a; color: #fff }
.tag.b { background: var(--beige) }
.tag.k { background: #e5e5e5 }

.alert { margin: 10px 12px; padding: 8px 10px; border: 1px solid #d1ac2a; background: var(--yel); font-size: 12px }
.alert.r { background: #fbe0dc; border-color: #c95a4a }
.alert.g { background: #eaf2cf; border-color: #9bb24a }
.alert.i { background: #f4f1ea; border-color: var(--line) }

.steps { display: flex; flex-wrap: wrap; padding: 10px 12px }
.st { flex: 1; min-width: 110px; padding: 8px 10px; border: 1px solid var(--line); margin-left: -1px; font-size: 11px; background: #fff }
.st.done { background: var(--lg) }
.st.cur { background: var(--green); color: #fff }
.st.corr { background: var(--red); color: #fff }
.st.skip { color: #aaa; background: #f4f4f4 }
.st small { display: block; opacity: .85 }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr) }
.kpi { padding: 10px 12px; border-right: 1px solid var(--line) }
.kpi:last-child { border-right: 0 }
.kpi small { display: block; color: var(--muted); font-size: 11px }
.kpi b { font-family: "Courier New", monospace; font-size: 15px }

.hist { padding: 6px 12px; font-size: 12px; color: var(--muted) }
.hist div { padding: 3px 0; border-bottom: 1px dotted var(--line) }
.two { display: grid; grid-template-columns: 2fr 1fr; gap: 16px }
.link { cursor: pointer; color: var(--green); text-decoration: underline }

/* --- Connexion ---------------------------------------------------------- */
.connexion { max-width: 380px; margin: 60px auto }
.connexion .f { border-right: 0; border-bottom: 1px solid var(--line) }
.connexion .f input { border-bottom: 1px dotted #bbb }

/* --- Administration (E04, E05, E06) -------------------------------------- */
/* Onglets internes d'un écran d'administration : quatre volets pour une seule
   entrée de navigation. Repris des maquettes validées le 16/09/2026. */
.sous-nav { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: #f4f1ea }
.sous-nav a {
	padding: 8px 14px;
	color: var(--muted);
	text-decoration: none;
	font-size: 12px;
	border-right: 1px solid var(--line);
	white-space: nowrap;
}
.sous-nav a.on { background: var(--panel); color: var(--green); font-weight: bold }

/* Deux volets : la liste des listes à gauche, ses valeurs à droite (E06). */
.volets { display: grid; grid-template-columns: 260px 1fr }
.volets > :first-child { border-right: 1px solid var(--line) }
.listes a {
	display: block;
	padding: 6px 12px;
	color: var(--text);
	text-decoration: none;
	font-size: 12px;
	border-bottom: 1px solid #ece9e1;
}
.listes a.on { background: var(--green); color: #fff }
.listes small { color: var(--muted); float: right }
.listes a.on small { color: #dfe8d9 }

/* Le mot de passe affiché une seule fois : il doit se recopier sans erreur. */
.secret {
	font-family: "Courier New", monospace;
	font-size: 18px;
	letter-spacing: .12em;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--green);
	display: inline-block;
}

/* --- Écrans étroits ------------------------------------------------------ */
.mnav { display: none; font: inherit; padding: 6px; border: 0; width: 100%; color: var(--green) }
@media (max-width: 600px) {
	.nav a, .nav span { display: none }
	.nav.sous-onglets a, .nav.sous-onglets span { display: inline-block }
	.mnav { display: block }
	.nav { width: 100%; margin-left: 0 }
	.panel { overflow-x: auto }
	.top .app b { display: none }
	main { padding: 0 4px }
}
@media (max-width: 900px) {
	.filters, .form { grid-template-columns: repeat(2, 1fr) }
	.filters.ajout { grid-template-columns: 1fr }
	.kpis { grid-template-columns: repeat(2, 1fr) }
	.two, .volets { grid-template-columns: 1fr }
	main { padding: 0 8px }
}

/* Le bandeau des donnees reelles. Rouge et pleine largeur : il doit se voir
   sans etre cherche, puisqu'il previent d'une saisie qui ne se rattrape pas. */
.bandeau-reel {
	background: #8a1c1c;
	color: #fff;
	padding: 7px 16px;
	font-size: 13px;
	line-height: 1.45;
	text-align: center;
}
.bandeau-reel b { letter-spacing: .02em; }
.bandeau-reel code {
	background: rgba(255, 255, 255, .18);
	padding: 1px 5px;
	border-radius: 3px;
}