/* Accueil en blocs et favoris (app `home`, docs/spec-accueil.md): the blocks of the home page, the star ☆ / ★ of the top
   bar, « Mes favoris » in the menus, the pages « Personnaliser mon accueil », « Mes favoris », « Accueil par fonction ». */

/* --- Home page ------------------------------------------------------------------------------------------------------ */
/* The top (20/10/2026): the date, « Personnaliser mon accueil » and the brief in ONE grid, the width of the blocks below
   (`main.page`, --layout-max): the left and right edges of the brief fall exactly on those of the blocks. */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro customize" "brief brief"; align-items: center; column-gap: var(--space-6); margin-bottom: var(--space-6); }
.home-intro { grid-area: intro; min-width: 0; max-width: none; margin: 0; }
.home-intro h1 { margin-bottom: var(--space-1); }
.home-intro .home-today { margin: 0; color: var(--color-muted); font-size: var(--text-md); }
.home-top.has-brief .home-intro .home-today { font-weight: 700; }
.home-customize-link { grid-area: customize; justify-self: end; display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-ink); font: 700 var(--text-sm) var(--font-text); text-decoration: none; white-space: nowrap; }
.home-customize-link:hover, .home-customize-link:focus-visible { box-shadow: var(--shadow-md); color: var(--color-accent-ink); }
.home-customize-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.home-brief { grid-area: brief; min-width: 0; margin-top: var(--space-3); }
.home-brief .brief-slot { margin-bottom: 0; }
.home-top:not(.has-brief) { align-items: end; }
.home-empty-blocks { margin-bottom: 28px; }
/* Ordinateur du groupe d'abord (1 280 à 1 440 px) : trois colonnes de blocs (dès 1 101 px), deux sur une tablette, une sur
   téléphone. Each block keeps the height of its content (never stretched over the void). A rich block (`data-home-wide`:
   Assistant, Courrier, Échéances, Ma journée) may take two columns, its content in two columns inside (container query
   below). The disposition (Vincent, 20/10/2026, « c'est mal disposé »): home.js packs the blocks as a balanced wall — each
   block under the shortest column (a wide one over the two lowest neighbouring columns), the person's order kept, a block
   moved by two places at most when that fills a hole; without JavaScript, the dense grid of the browser. */
.home-widgets { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; align-items: start; gap: var(--space-5); margin-bottom: var(--space-10); }
@media (min-width: 761px) { .home-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-widget[data-home-wide] { grid-column: span 2; } }
@media (min-width: 1101px) { .home-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-widgets.is-packed { grid-auto-rows: 4px; row-gap: 0; }
.home-widgets.is-packed > .home-widget { margin-bottom: var(--space-5); }
.home-widget { position: relative; min-width: 0; padding: var(--space-5) var(--space-6) var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-sm); container-type: inline-size; }
.home-widget::before { display: none; }
.home-widget[hidden] { display: none; }
.home-widget-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 32px; margin-bottom: var(--space-3); }
.home-widget-head h2 { min-width: 0; margin: 0; font-size: var(--text-xl); line-height: 1.25; }
.home-widget-all { flex: none; color: var(--color-accent-ink); font: 700 var(--text-sm) var(--font-text); text-decoration: none; white-space: nowrap; }
.home-widget-all:hover { color: var(--color-accent-hover); text-decoration: underline; }
.home-widget-body { font: var(--text-md)/1.45 var(--font-text); }
.home-widget-body > :last-child { margin-bottom: 0; }

/* The panels that already existed (observations, Ma matinée, menu, Technique, assistant) inside a block: no box in a box. */
.home-widget-body .obs-home, .home-widget-body .mm-home, .home-widget-body .k-panel, .home-widget-body .t-home, .home-widget-body .assistant-panel,
.home-widget-body .writing-home { margin: 0 0 12px; border: 0; padding: 0; background: none; box-shadow: none; }
/* The actions of a block (20/10/2026): the main button, then the others in a row that wraps, all of one height; a
   secondary link is a small text pill (no underline), the same in every block. */
.hw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.hw-actions .button { flex: none; white-space: nowrap; }
.hw-action-link, .hw-sub a:not(.button), .hw-links a, .home-widget-body .k-panel p > a:only-child, .home-widget-body .t-home-link { display: inline-flex; align-items: center; gap: 5px; min-height: var(--control-height-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--color-accent-ink); font: 700 var(--text-sm)/1.2 var(--font-text); text-decoration: none; white-space: nowrap; }
.hw-action-link:hover, .hw-action-link:focus-visible, .hw-sub a:not(.button):hover, .hw-sub a:not(.button):focus-visible, .hw-links a:hover, .hw-links a:focus-visible, .home-widget-body .k-panel p > a:only-child:hover, .home-widget-body .t-home-link:hover { background: var(--color-accent-soft); color: var(--color-accent-ink); text-decoration: none; }
/* The links of the panels of the sections inside a block (« Menu du jour et repas », Technique): the same small text pill. */
.home-widget-body .k-panel p > a:only-child, .home-widget-body .t-home-link { margin-left: calc(-1 * var(--space-3)); }
/* Block « Assistant »: « Que dois-je faire ? » and « Rédiger avec l'assistant », side by side when the block is wide (two
   columns of the wall), one under the other otherwise; no card in a card, no coloured edge. */
.hw-assistant { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.hw-assistant > .hw-assistant-part { display: block; min-width: 0; margin: 0; border: 0; padding: 0; background: none; box-shadow: none; }
.hw-assistant > .hw-assistant-part + .hw-assistant-part { border-top: 1px solid var(--color-line); padding-top: var(--space-5); }
.hw-assistant-title { margin: 0 0 var(--space-1); font: 700 var(--text-lg)/1.3 var(--font-text); }
.hw-assistant-intro { margin: 0 0 var(--space-3); color: var(--color-muted); font: var(--text-sm)/1.45 var(--font-text); }
@container (min-width: 600px) {
  .hw-assistant { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  .hw-assistant > .hw-assistant-part + .hw-assistant-part { border-top: 0; border-left: 1px solid var(--color-line); padding: 0 0 0 var(--space-8); }
  /* Courrier, Échéances, Ma journée over two columns: their lines in two columns, read down then across. */
  .hw-list { columns: 2; column-gap: var(--space-8); }
  .hw-list .hw-line { break-inside: avoid; }
}
.home-widget-body .obs-home { display: flex; flex-wrap: wrap; gap: 8px; }
.home-widget-body .obs-home-button { min-height: 44px; padding: 0 14px; font-size: .88rem; }
.home-widget-body .obs-home-button:not(.obs-home-new) { flex: 0 1 auto; }
.home-widget-body .k-panel h2 { font-size: 1rem; }

.hw-list { margin: 0 0 10px; padding: 0; list-style: none; }
.hw-line { border-bottom: 1px solid var(--color-line); }
.hw-line:last-child { border-bottom: 0; }
.hw-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 6px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
a.hw-row:hover { background: var(--soft); }
.hw-who { font-weight: 700; font-size: var(--text-sm); }
.hw-who small { font-weight: 400; color: var(--muted); }
.hw-when { margin-left: auto; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.hw-text { flex-basis: 100%; overflow-wrap: anywhere; }
.hw-line.is-unread .hw-who::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; content: ""; }
.hw-line.is-alert .hw-when { color: var(--color-danger); font-weight: 700; }
/* « En retard » / « ! »: a red dot before the name and the date in red (no coloured edge at the left: style A, 20/10/2026). */
.hw-line.is-alert .hw-who::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-danger); vertical-align: middle; content: ""; }
.hw-line.is-important .hw-who { color: var(--accent-dark); }
/* Timeline (Ma journée, Mes tâches, Mon horaire): the time on the left, the text beside. */
.home-widget-my_day .hw-row, .home-widget-tasks .hw-row, .home-widget-workforce .hw-row { flex-wrap: nowrap; }
.home-widget-my_day .hw-when, .home-widget-tasks .hw-when, .home-widget-workforce .hw-when { order: -1; flex: none; min-width: 6.6em; margin-left: 0; color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: normal; }
.home-widget-my_day .hw-text, .home-widget-tasks .hw-text, .home-widget-workforce .hw-text { flex: 1; flex-basis: auto; }
/* « Horaires du personnel » (20/10/2026): the facts of next month (the state as a pill at the right, the line below), the
   A-E note as in the grid of the schedules, the posts and balances of a worker. */
.home-widget-workforce .hw-facts .hw-row { flex-wrap: wrap; }
.home-widget-workforce .hw-facts .hw-text { flex-basis: 100%; color: var(--color-muted); font-size: var(--text-sm); }
.home-widget-workforce .hw-facts .hw-line.is-alert .hw-text { color: var(--color-danger); font-weight: 700; }
.hw-state { margin-left: auto; }
.hw-grade { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: var(--radius-sm); font: 800 var(--text-md)/1 var(--font-title); }
.hw-grade.is-a { background: var(--color-success-soft); color: var(--color-success); box-shadow: inset 0 0 0 2px var(--color-success); }
.hw-grade.is-b { background: var(--color-info-soft); color: var(--color-info); box-shadow: inset 0 0 0 2px var(--color-info); }
.hw-grade.is-c { background: var(--color-warning-soft); color: var(--color-warning); box-shadow: inset 0 0 0 2px var(--color-warning); }
.hw-grade.is-d { background: var(--color-accent-soft); color: var(--color-accent-ink); box-shadow: inset 0 0 0 2px var(--color-accent); }
.hw-grade.is-e { background: var(--color-accent-ink); color: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-accent-ink); } /* never red: red is for the legal rules (26/10/2026) */
.hw-caption { margin: var(--space-3) 0 0; color: var(--color-muted); font: 700 var(--text-xs)/1.4 var(--font-text); letter-spacing: .06em; text-transform: uppercase; }
.hw-caption:first-child { margin-top: 0; }
.hw-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 0; }
.hw-balances div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.hw-balances dt { color: var(--color-muted); font-size: var(--text-sm); }
.hw-balances dd { margin: 0; font: 700 var(--text-lg)/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
.hw-alert { display: inline-grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 50%; background: var(--color-danger); color: var(--color-on-accent); font: 700 .78rem/1 var(--font-text); vertical-align: 1px; }
.hw-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--soft); color: var(--accent-dark); font: 700 .7rem/1.6 var(--font-text); }
.hw-pill.is-urgent { background: var(--color-danger-soft); color: var(--color-danger); }
.hw-code { display: inline-block; min-width: 2.2em; padding: 0 5px; border-radius: var(--radius-xs); color: var(--reason-half-ink); font: 700 var(--text-xs)/1.6 var(--font-text); text-align: center; }
.hw-code.is-dark { color: var(--color-on-dark); }
.hw-icon, .hw-star { color: var(--color-accent-ink); }
.hw-star { color: var(--color-accent); }
.hw-empty { margin: 0 0 10px; color: var(--muted); font-style: italic; }
.hw-note, .hw-more { margin: 4px 0 8px; color: var(--muted); font-size: var(--text-sm); }
.hw-warn { margin: 6px 0 10px; color: var(--accent-dark); font-weight: 700; }
.hw-warn a { color: inherit; }
.hw-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 4px 0 var(--space-3); font-weight: 700; }
.hw-sub .button { flex: none; white-space: nowrap; }
.hw-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 4px calc(-1 * var(--space-3)); }
.hw-links .message-badge { margin: 0; }
.hw-loading { margin: 0; color: var(--muted); }
.home-widget[aria-busy="true"] .home-widget-body { min-height: calc(3 * var(--control-height)); }
.hw-loading::after { display: inline-block; width: 1.2em; content: "…"; animation: hw-dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes hw-dots { from { width: 0; } to { width: 1.2em; } }

/* « Tous les modules »: the cards of the modules, folded on a phone (the person's choice is kept). */
.home-modules { margin: 0 0 20px; }
.home-modules > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: var(--space-5); padding: 10px 0; border-bottom: 0; cursor: pointer; list-style: none; }
.home-modules > summary::-webkit-details-marker { display: none; }
.home-modules > summary::before { flex: none; color: var(--accent); font: 700 1rem var(--font-text); content: "▸"; transition: transform .15s ease; }
.home-modules[open] > summary::before { transform: rotate(90deg); }
.home-modules-title { font: 600 var(--text-2xl)/1.2 var(--font-title); }
.home-modules-hint { color: var(--muted); font: .9rem var(--font-text); }

/* --- Top bar: the star and « Favoris » --------------------------------------------------------------------------------- */
.topbar nav .nav-star { display: inline-flex; margin: 0; }
.nav-star-button { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; border: 0; border-radius: var(--radius-pill); padding: 0; background: none; color: var(--color-accent); font: 400 1.4rem/1 var(--font-text); cursor: pointer; }
.nav-star-button:hover, .nav-star-button:focus-visible { color: var(--accent-dark); }
.nav-star-button.is-favorite { color: var(--color-accent); }
.nav-star-button[disabled] { opacity: .6; }
.nav-favorites { position: relative; }
.nav-favorites > summary { color: var(--color-ink); font: 700 var(--text-sm) var(--font-text); cursor: pointer; list-style: none; white-space: nowrap; }
.nav-favorites > summary::-webkit-details-marker { display: none; }
.nav-favorites-panel { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: min(320px, 86vw); padding: 14px 16px; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.nav-favorites-title { margin: 0 0 8px; color: var(--accent-dark); font: 700 .72rem var(--font-text); letter-spacing: .12em; text-transform: uppercase; }
.nav-favorites-panel ul { max-height: 60vh; margin: 0 0 8px; padding: 0; overflow: auto; list-style: none; }
.nav-favorites-panel ul:empty, .tabbar-more-favorites ul:empty { display: none; }
.topbar nav .nav-favorites-panel a { display: block; padding: 8px 4px; border-bottom: 1px solid var(--line); background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font: 700 .9rem var(--font-text); }
.topbar nav .nav-favorites-panel a:hover { color: var(--accent-dark); }
.topbar nav .nav-favorites-panel .nav-favorites-manage { border-bottom: 0; color: var(--accent-dark); font-size: .8rem; }
.nav-favorites-empty { margin: 0 0 8px; color: var(--muted); font: .85rem/1.4 var(--font-text); }
.home-toast { position: fixed; z-index: 90; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; background: var(--ink); color: var(--color-on-accent); font: 700 .86rem/1.4 var(--font-text); box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / 0.2); }
body.has-tabbar .home-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* « Plus » menu of the phone: « Mes favoris ». */
.tabbar-more-favorites { padding: 6px 0 4px; border-bottom: 1px solid var(--line); }
.tabbar-more-subtitle { margin: 6px 4px 2px; color: var(--accent-dark); font: 700 .72rem var(--font-text); letter-spacing: .12em; text-transform: uppercase; }
.tabbar-more-favorites ul { margin: 0; padding: 0; list-style: none; }
.tabbar-more-list .tabbar-more-favorites ul a { font-size: .98rem; }
.tabbar-more-list .tabbar-more-favorites .tabbar-more-manage { min-height: 40px; border-bottom: 0; color: var(--accent-dark); font: 700 .82rem var(--font-text); }
.tabbar-more-hint { margin: 4px 4px 2px; color: var(--muted); font: .86rem/1.4 var(--font-text); }

@media (max-width: 760px) {
  body.has-tabbar .topbar nav .nav-favorites { display: none; }
  .nav-star-button { min-width: 44px; min-height: 44px; }
  /* Phone: the date, the brief, then « Personnaliser mon accueil » under the brief, at the right. */
  .home-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "brief" "customize"; margin-bottom: var(--space-5); }
  .home-top:not(.has-brief) { grid-template-areas: "intro" "customize"; }
  .home-customize-link { margin-top: var(--space-4); }
  .home-brief { margin-top: var(--space-2); }
  .home-widgets { gap: 14px; margin-bottom: 28px; }
  .home-widget { padding: 16px 16px 12px; }
  .hw-row { padding: 11px 2px; }
}

/* --- « Personnaliser mon accueil », « Mes favoris », « Accueil par fonction » --------------------------------------------- */
.home-editor { max-width: 760px; }
.home-editor-list { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: bloc; }
.home-editor-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
.home-editor-row.is-dragging { opacity: .5; }
.home-editor-row.is-over { box-shadow: inset 0 3px 0 var(--accent); }
.home-editor-main { flex: 1; min-width: 0; }
.home-editor-main strong { display: block; }
.home-editor-main small, .home-editor-main .muted { display: block; margin-top: 3px; font: .82rem/1.4 var(--font-text); }
.home-editor-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.home-editor-actions form { margin: 0; }
.home-editor-actions button, .home-icon-button { min-width: 40px; min-height: 40px; border: 1px solid var(--line); padding: 0 10px; background: var(--surface); color: var(--ink); font: 700 .86rem var(--font-text); cursor: pointer; }
.home-editor-actions button:hover, .home-icon-button:hover { border-color: var(--accent); color: var(--accent-dark); }
.home-editor-actions button[disabled] { opacity: .35; cursor: default; }
.home-editor-actions .home-remove { color: var(--color-danger); }
.home-rename { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.home-rename input { flex: 1; min-width: 12rem; }
.home-drag { flex: none; color: var(--muted); font-size: 1.2rem; cursor: grab; }
.home-section-title { margin: 30px 0 10px; }
.home-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--accent-dark); font: 700 .74rem/1.6 var(--font-text); }
.home-functions { width: 100%; border-collapse: collapse; font: .88rem/1.4 var(--font-text); }
.home-functions th, .home-functions td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.home-functions th { font-weight: 700; white-space: nowrap; }
.home-functions a { color: var(--accent-dark); font-weight: 700; }
@media (max-width: 760px) {
  .home-editor-row { align-items: flex-start; flex-wrap: wrap; }
  .home-editor-actions { width: 100%; justify-content: flex-start; }
  .home-editor-actions button { min-width: 44px; min-height: 44px; }
  .home-drag { display: none; }
  .home-functions thead { display: none; }
  .home-functions tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .home-functions th, .home-functions td { display: block; padding: 3px 0; border: 0; }
}

/* --- Top bar at 1 280 px (audit PIF UI-001): « Mon compte » and « Déconnexion » in « Plus », the qualifiers « (mails) »,
   « (interne) », « du personnel » only on a wide screen; the bar never overflows. ----------------------------------- */
.nav-more-panel { width: min(220px, 86vw); }
.topbar nav .nav-more-panel .nav-logout { border-bottom: 0; color: var(--accent-dark); }
.topbar nav { min-width: 0; }
@media (min-width: 761px) and (max-width: 1440px) { .topbar .nav-qualifier { display: none; } .topbar nav { gap: 2px; } .topbar { padding-left: 24px; padding-right: 24px; } }
/* 20/10/2026: the pills carry their own padding; at 1 280 px the bar of the management (gear, bell, assistant, schedules,
   mail and messages with their counts, favourites, « Plus ») stays inside the screen. */
@media (min-width: 1101px) and (max-width: 1360px) { .topbar nav > a, .topbar nav > details > summary, .notif-bell > summary { padding: 0 11px; } }
.resident-filter { margin: 0 0 16px; }
.resident-filter input { width: 100%; min-height: 44px; }
/* Cibles tactiles d'au moins 44 px sur téléphone (audit PIF A11Y-003) : « Tout voir » des blocs, « Personnaliser mon accueil ». */
@media (max-width: 760px) { .home-widget-all { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; } }

/* « Retours à faire » at the top of the home page (09/11/2026, planning.visit_report_tags.home_feedback_band). */
.home-due { margin: 0 auto 16px; padding: 12px 14px; border: 2px solid var(--accent); border-radius: 12px; background: var(--color-surface); }
.home-due h2 { margin: 0 0 6px; font: 700 1.05rem var(--font-text); }
.home-due ul { margin: 0; padding: 0; list-style: none; }
.home-due li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.home-due li:first-child { border-top: 0; }
.home-due-what { flex: 1 1 200px; min-width: 0; }
.home-due-what small { display: block; color: var(--muted); }
.home-due .button { min-height: 44px; display: inline-flex; align-items: center; }