/* Résidences du Parc — feuille de style unique.
   Sobre et lisible : l'outil sert à lire des tableaux de chiffres. */

:root {
	--ink:        #1c2733;
	--ink-soft:   #5b6b7c;
	--line:       #dde3ea;
	--bg:         #f5f7fa;
	--card:       #ffffff;
	--accent:     #1f5c8b;
	--accent-dk:  #17456a;
	--ok:         #1d7a4c;
	--warn:       #9a6500;
	--bad:        #a52f2f;
	--radius:     6px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

a { color: var(--accent); }

/* ---------- En-tête ---------- */

header.app {
	background: var(--accent-dk);
	color: #fff;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	min-height: 56px;
}
header.app .brand { font-weight: 600; letter-spacing: .2px; }
header.app nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
header.app nav a {
	color: #cfe0ee; text-decoration: none; padding: 18px 0;
	border-bottom: 3px solid transparent;
}
header.app nav a:hover { color: #fff; }
header.app nav a.on { color: #fff; border-bottom-color: #7db2d8; }

/* ---------- Menu du compte ---------- */

.usermenu { position: relative; margin-left: 4px; }
.usermenu > summary {
	list-style: none; cursor: pointer; color: #cfe0ee; font-size: 13px;
	padding: 7px 12px; border-radius: var(--radius); white-space: nowrap;
	border: 1px solid rgba(255,255,255,.18);
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::after { content: " ▾"; opacity: .7; }
.usermenu > summary:hover { color: #fff; background: rgba(255,255,255,.09); }
.usermenu[open] > summary { color: #fff; background: rgba(255,255,255,.14); }

.usermenu .menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius); min-width: 210px; padding: 6px 0;
	box-shadow: 0 8px 24px rgba(18,32,46,.18);
}
.usermenu .menu a {
	display: block; padding: 9px 16px; color: var(--ink);
	text-decoration: none; font-size: 14px; border-bottom: 0;
}
.usermenu .menu a:hover { background: #eef3f8; }
.usermenu .menu .sep { height: 1px; background: var(--line); margin: 6px 0; }
.usermenu .menu .head {
	padding: 4px 16px 8px; color: var(--ink-soft); font-size: 12px;
	border-bottom: 1px solid var(--line); margin-bottom: 6px;
}

header.app .who { color: #a9c6dd; font-size: 13px; }

/* ---------- Contenu ---------- */

main { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }

h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 17px; margin: 28px 0 10px; font-weight: 600; }
p.lead { color: var(--ink-soft); margin: 0 0 24px; }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 20px;
}

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Dans un formulaire, les champs s'alignent par le bas : un libellé qui
   passe sur deux lignes ne doit pas décaler sa zone de saisie par rapport
   aux voisines. */
form .grid { align-items: end; }
form .grid .field { margin-bottom: 0; }
/* Indication secondaire : dans un libellé comme dans un tableau. */
.hint { color: var(--ink-soft); font-weight: 400; }
td .hint, td.hint { font-size: 13px; }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

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

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-weight: 600; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f8fafc; }
tfoot td { font-weight: 600; border-top: 2px solid var(--line); border-bottom: none; }

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

label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
	width: 100%; padding: 9px 11px; font: inherit;
	border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #a9cce6; border-color: var(--accent); }
.field { margin-bottom: 16px; }

button, .btn {
	font: inherit; font-weight: 500; cursor: pointer;
	padding: 9px 18px; border-radius: var(--radius);
	border: 1px solid var(--accent); background: var(--accent); color: #fff;
	text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--accent-dk); }
.btn.ghost { background: #fff; color: var(--accent); }

/* Action secondaire dans un tableau : POST obligatoire pour une
   suppression, mais l'aspect reste celui d'un lien. */
button.linklike {
	background: none; border: 0; padding: 0; color: var(--bad);
	font: inherit; cursor: pointer; text-decoration: underline;
}
button.linklike:hover { background: none; color: #7f2323; }

/* ---------- Messages ---------- */

.msg { padding: 11px 14px; border-radius: var(--radius); margin-bottom: 18px; font-size: 14px; }
.msg.bad  { background: #fdecec; color: var(--bad);  border: 1px solid #f3c9c9; }
.msg.ok   { background: #e9f6ef; color: var(--ok);   border: 1px solid #c2e3d1; }
.msg.warn { background: #fdf4e3; color: var(--warn); border: 1px solid #efdcb4; }

/* ---------- Connexion ---------- */

.login-wrap { max-width: 380px; margin: 8vh auto; padding: 0 20px; }
.login-wrap h1 { text-align: center; margin-bottom: 4px; }
.login-wrap .sub { text-align: center; color: var(--ink-soft); margin: 0 0 28px; font-size: 14px; }

footer.app { color: var(--ink-soft); font-size: 12px; text-align: center; padding: 24px 20px 40px; }

@media (max-width: 640px) {
	header.app { padding: 10px 16px; gap: 10px; }
	header.app nav { margin-left: 0; gap: 14px; }
	header.app nav a { padding: 6px 0; }
	/* Au téléphone, le menu s'ouvre sur toute la largeur plutôt qu'en
	   débordant du bord droit de l'écran. */
	.usermenu { margin-left: 0; }
	.usermenu .menu { right: auto; left: 0; min-width: 60vw; }
	main { padding: 16px 16px 48px; }
}