/* =============================================================
   Coop MIL — CSS partagé (header, nav, base)
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* -------------------------------------------------------------
   Jetons de couleur, d'espacement, de rayon et de durée.
   ►► SOURCE DE VÉRITÉ UNIQUE : assets/tokens.css (chargé AVANT ce
   fichier dans templates/header.php). app.css ne définit plus
   aucun :root token — il les CONSOMME via var(--c-*) / var(--space-*)
   / var(--radius-*) / var(--t-*). Pour ajouter/modifier un jeton,
   éditer tokens.css, jamais ici. Thème sombre = :root[data-theme="dark"],
   palette daltonien = :root[data-palette="cb"] (tous dans tokens.css).
   Cf. DESIGN_SYSTEM.md. Règle d'or : jamais de hex en dur.
   ------------------------------------------------------------- */

/* Zoom du texte (accessibilité) : --mil-fs (défaut 1) est posé sur :root par
   le header. Tous les `font-size` du site sont en calc(Npx * var(--mil-fs)),
   donc seul le TEXTE grandit — la mise en page (largeurs, marges) reste en
   cadre et le contenu se reflue verticalement. */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: calc(17px * var(--mil-fs, 1));
  background: var(--c-bg);
  color: var(--c-text);
}

/* Verrou de défilement global quand un modal est ouvert (helper MILModal,
   assets/modal.js). La page de fond ne défile pas tant qu'un `.modal` est
   ouvert. Les verrous historiques par fonctionnalité (`.modal-lock`,
   `.task-detail-lock`, `.coord-lock`, `.br-lock`) restent valables. */
body.mil-modal-open { overflow: hidden; }

/* ============================================================
   Confirmation modale générique (MILModal.confirm) — remplace les
   window.confirm() natifs par un modal du design system. Créé à la
   volée par assets/modal.js ; styles globaux (utilisable partout).
   ============================================================ */
.mil-confirm {
  position: fixed;
  inset: 0;
  z-index: 1100;   /* au-dessus des autres modals/feuilles (≤ 1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.mil-confirm[hidden] { display: none; }
.mil-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: var(--c-shadow-strong);
  animation: mil-confirm-fade 0.12s ease-out;
}
.mil-confirm-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px var(--c-shadow-strong);
  padding: 22px 22px 18px;
  animation: mil-confirm-in 0.15s ease-out;
}
@keyframes mil-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mil-confirm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mil-confirm-title {
  margin: 0 0 8px;
  font-size: calc(17px * var(--mil-fs, 1));
  font-weight: 600;
  color: var(--c-text);
}
.mil-confirm-text {
  margin: 0 0 18px;
  font-size: calc(14px * var(--mil-fs, 1));
  color: var(--c-text-mid);
  line-height: 1.5;
}
.mil-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.mil-confirm-btn {
  padding: 10px 16px;
  min-height: 44px;
  font: inherit;
  font-size: calc(14px * var(--mil-fs, 1));
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
}
.mil-confirm-cancel {
  color: var(--c-text-mid);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
}
.mil-confirm-cancel:hover { background: var(--c-hover-bg); }
.mil-confirm-ok {
  color: var(--c-on-accent);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
}
.mil-confirm-ok:hover { background: var(--c-accent-dark); }
/* Variante « danger » : action destructrice (désistement, retrait…). */
.mil-confirm-ok.is-danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-on-danger, var(--c-on-accent));
}
.mil-confirm-ok.is-danger:hover { filter: brightness(0.94); }
/* Cibles tactiles pleines largeur sur téléphone (design phone-first). */
@media (max-width: 480px) {
  .mil-confirm-actions { flex-direction: column-reverse; }
  .mil-confirm-btn { width: 100%; }
}

a { color: inherit; }

/* Supprime le flash bleu natif au tap : un contrôle qui « clignote » trahit le
   web, un feedback de press (scale) fait app. Le focus clavier reste intact. */
a, button, .nav-btn, .nav-link, .nav-me, .icon-ghost, .avatar-btn,
.tabbar-item, .nav-switch, .fs-opt {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- HEADER ---------- */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.2s ease;
}
.logo-svg { width: 36px; height: 40px; flex-shrink: 0; padding-bottom: 4px;}
.header-text {
  display: flex;
  gap: 8px;
}
.header-text h1 {
  /* Brutalist : grotesque ultra-gras, capitales, calé sur la hauteur du logo (40px). */
  font-family: 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  font-size: calc(20px * var(--mil-fs, 1));
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--c-accent);
}
.header-text p {
font-size: calc(19px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text-mid); letter-spacing: 0.3px;
}

.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
  position: relative;  /* ancrage de la pastille « nouvelles annonces » */
}

/* Pastille « nouvelles annonces » sur le logo : point d'accent en coin
   haut-droit. Présente seulement quand le membre a des besoins non vus
   (rendu serveur, cf. header.php / NotificationRepository). */
.brand-dot {
  position: absolute; top: -2px; left: 28px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 0 2px var(--c-surface);
  pointer-events: none;
}

/* La marque : avatar-menu (ancre gauche) + nav membre « Moi | Toutes les
   tâches » (croquis UX revamp). Le wordmark ne sort qu'en repli (staff /
   déconnecté). */
.brand-cluster { display: inline-flex; align-items: center; gap: 14px; }

/* Nav membre gauche + nav gestion droite : liens texte séparés par un « | ».
   Pas de cadre — juste le texte, l'actif passe en accent (cf. .nav-link). */
.brand-nav { display: inline-flex; align-items: center; gap: 2px; }
.nav-sep {
  color: var(--c-border-strong);
  font-weight: 400;
  user-select: none;
  padding: 0 1px;
}
/* Pastille « nouveaux besoins » : point d'accent en coin haut-droit de l'avatar
   « Moi » (l'accueil héberge le feed Recherché). Rendu serveur quand le membre
   a des besoins non vus (NotificationRepository). */
.nav-dot {
  position: absolute; top: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-orange);
  box-shadow: 0 0 0 2px var(--c-surface);
  pointer-events: none;
}

/* Pensée du jour : centrée dans la barre (absolute → indépendante des largeurs
   gauche/droite). Italique, discrète, 2 lignes max (line-clamp — ellipse au-delà).
   Décorative (pointer-events:none : les clics passent à travers vers la nav).
   Masquée sous 1100px pour ne pas heurter les liens de nav. */
.nav-pensee {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(42vw, 460px);
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(13px * var(--mil-fs, 1));
  font-style: italic;
  line-height: 1.3;
  color: var(--c-text-muted);
  pointer-events: none;
}
.nav-pensee-src { font-style: normal; opacity: 0.8; }
@media (max-width: 1100px) { .nav-pensee { display: none; } }

.top-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; position: relative; }

/* Boutons texte de la nav */
.nav-btn {
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text-mid);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-btn:hover { border-color: var(--c-border-strong); color: var(--c-text); background: var(--c-hover-bg); }
.nav-btn.active { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }

/* « Moi » : NON un bouton — un **indicateur cliquable** (libellé discret +
   barre de complétion). Pas de cadre/fond : juste le texte et la barre à 3
   segments (`.nav-me-bar`, 1 par onglet) qui se remplit selon les jetons
   (`--fill` ∈ 0..1). Ambre quand 0 jeton (`.is-empty`) pour appeler l'action. */
.nav-me {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: calc(13px * var(--mil-fs, 1)); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--c-accent);
  text-decoration: none;
  padding: 4px 7px;
  border: none; background: transparent;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-me:hover { color: var(--c-accent-dark); }
.nav-me.active { color: var(--c-accent); }
.nav-me.is-empty { color: var(--c-warning); }
.nav-me:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
/* « Moi » prend la place du wordmark, accolé au logo dans .brand-cluster. */
.nav-me-brand { margin-left: 2px; }

.nav-me-bar {
  display: flex; gap: 3px;
  width: 36px; height: 4px;
}
/* Un segment par onglet (intérêts /3, implication /3, dispos /3, préférences /3).
   La piste est neutre ; le remplissage (`::after`, largeur = `--fill` ∈ 0..1) suit les jetons. */
.nav-me-seg {
  position: relative;
  flex: 1;
  border-radius: 2px;
  background: var(--c-border);
  overflow: hidden;
}
.nav-me-seg::after {
  content: '';
  position: absolute; inset: 0;
  width: calc(var(--fill, 0) * 100%);
  background: var(--c-bling);
  border-radius: 2px;
  transition: width 0.2s;
}
/* Profil vide : pistes teintées ambre pour appuyer l'attention. */
.nav-me.is-empty .nav-me-seg { background: var(--c-warning); opacity: 0.35; }

/* Résident·e : la barre « Moi » est neutralisée — remplissage gris clair
   (`--c-border-strong`) au lieu du vert « bling », piste neutre (ni ambre
   « vide » ni « soucieux »). Le profil lui est facultatif : on l'affiche sans
   le gamifier. */
.nav-me.is-resident .nav-me-seg { background: var(--c-border); opacity: 1; }
.nav-me.is-resident .nav-me-seg::after { background: var(--c-border-strong); }
/* Profil facultatif → pas d'appel ambre sur le libellé même à 0 jeton. */
.nav-me.is-resident.is-empty { color: var(--c-accent); }

/* « Mes tâches » : indicateur-bouton gamifié à gauche du bouton « À faire »
   (→ /a-faire), pendant participation de « Moi ». Icône mini-liste à cocher
   à 3 rangées fixes, cochées au prorata des tâches « fraîches » (acte
   < 7 jours) ; compteur fraîches/total à DROITE de l'icône — la pleine
   hauteur reste à l'icône. Même langage que la barre Moi : remplissage
   --c-bling, ambre seulement quand RIEN n'est frais (.is-empty) — l'état est
   aussi porté par les cases pleines vs vides (jamais la couleur seule).
   Masqué si aucune tâche assignée (rendu conditionnel serveur) ; rafraîchi
   en direct par assets/a-faire.js. */
.nav-afaire {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px;
  text-decoration: none;
  border: none; background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.nav-afaire:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }

.na-icon {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 28px; height: 28px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  transition: border-color 0.15s, background 0.15s;
}
.nav-afaire:hover .na-icon { background: var(--c-hover-bg); }
.nav-afaire.active .na-icon,
.tabbar-afaire.active .na-icon { border-color: var(--c-accent); }

.na-row { display: flex; align-items: center; gap: 3px; }
.na-box {
  flex: 0 0 auto;
  width: 5px; height: 5px;
  box-sizing: border-box;
  border: 1px solid var(--c-border-strong);
  border-radius: 1px;
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.na-row.is-on .na-box { background: var(--c-bling); border-color: var(--c-bling); }
.na-line { flex: 1; height: 2px; border-radius: 1px; background: var(--c-border); }
.na-row.is-on .na-line { background: var(--c-border-strong); }

.na-count {
  font-size: calc(10px * var(--mil-fs, 1));
  font-weight: 500;
  line-height: 1;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Tout est à jour : le cadre passe au bling avec l'ensemble des cases.
   (Mêmes états sur l'onglet « Mes tâches » de la tab-bar mobile, .tabbar-afaire.) */
.nav-afaire.is-done .na-icon,
.tabbar-afaire.is-done .na-icon { border-color: var(--c-bling); }
/* Rien de frais : appel d'attention ambre (mêmes règles que Moi vide). */
.nav-afaire.is-empty .na-icon,
.tabbar-afaire.is-empty .na-icon { border-color: var(--c-warning); }
.nav-afaire.is-empty .na-box,
.tabbar-afaire.is-empty .na-box { border-color: var(--c-warning); opacity: 0.7; }
/* Aucune tâche assignée : mood triste — liste vide ambre (via is-empty) et
   😔 à la place du compteur, pour encourager la participation. */
.nav-afaire.is-sad .na-count {
  font-size: calc(13px * var(--mil-fs, 1));
  line-height: 1;
}
/* Résident·e sans tâche assignée : indicateur neutre/grisé (la participation
   par tâche lui est facultative — ni mood triste ni alarme ambre). */
.nav-afaire.is-muted .na-icon,
.tabbar-afaire.is-muted .na-icon,
.nav-afaire.is-muted .na-count,
.tabbar-afaire.is-muted .na-count { opacity: 0.5; }


/* Groupe de nav-btn collés (ex: "Mes tâches | Les tâches"). */
.nav-group {
  display: inline-flex;
  align-items: center;
}
.nav-group .nav-btn { border-radius: 0; }
.nav-group .nav-btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.nav-group .nav-btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.nav-group .nav-btn + .nav-btn {
  /* Évite la bordure doublée entre boutons collés ; l'actif passe au-dessus. */
  margin-left: -1px;
}
.nav-group .nav-btn:hover,
.nav-group .nav-btn.active {
  position: relative;
  z-index: 1;
}

/* Boutons icône carrés (Communauté, ⚙️) */
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-mid);
  font-size: calc(16px * var(--mil-fs, 1));
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  padding: 0;
  font-family: inherit;
}
.nav-icon:hover { border-color: var(--c-border-strong); background: var(--c-hover-bg); color: var(--c-text); }

/* Zone gestion : liens « ghost » plus discrets que le segment membre, pour
   distinguer les fonctions perso des fonctions de coordination. */
.nav-zone-manage { display: inline-flex; align-items: center; gap: 2px; }
.nav-link {
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500;
  color: var(--c-text-mid); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-sm);
  white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--c-hover-bg); color: var(--c-text); }
.nav-link.active { color: var(--c-accent); background: var(--c-accent-soft); }

/* Nav « signage » (croquis UX mechanics) : tuile icône-au-dessus-du-libellé,
   noir & blanc — la couleur reste réservée aux chips/boutons. Actif = texte
   sombre + gras + barre 2px sous la tuile (pas de fond accent). */
.brand-nav, .nav-zone-manage { display: inline-flex; align-items: stretch; gap: 4px; }
.nav-tile {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 52px; padding: 5px 9px;
  border-radius: var(--radius-sm);
  color: var(--c-text-mid); text-decoration: none;
  font-size: calc(11px * var(--mil-fs, 1)); font-weight: 500; line-height: 1.1;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base);
}
.nav-tile-ico { display: flex; }
.nav-tile-ico svg { width: 24px; height: 24px; display: block; }
.nav-tile:hover { background: var(--c-hover-bg); color: var(--c-text); }
.nav-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.nav-tile.active { color: var(--c-text); font-weight: 700; }
.nav-tile.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--c-text); border-radius: 1px;
}
.nav-tile.is-disabled { color: var(--c-text-muted); cursor: default; }
.nav-tile.is-disabled:hover { background: transparent; color: var(--c-text-muted); }
/* Bande tablette (561–760px) : tuiles icône-seule pour que la nav inline tienne
   même pour un coordo (3 tuiles à droite). Le nom vit dans title/aria-label. */
@media (max-width: 760px) {
  .nav-tile-lbl { display: none; }
  .nav-tile { min-width: 0; padding: 6px; }
}

/* Boutons icône « ghost » (aide, communauté) : sans cadre, légers. */
.icon-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--c-text-mid);
  cursor: pointer; text-decoration: none; padding: 0;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.icon-ghost:hover { background: var(--c-hover-bg); color: var(--c-text); }
.icon-ghost svg { width: 20px; height: 20px; display: block; }
.icon-ghost[aria-pressed="true"] { color: var(--c-accent); background: var(--c-accent-soft); }

/* Bascule d'app « Communauté » → HumHub. Pilule accent teal, posée dans la zone
   utilitaire juste avant l'avatar. Le pendant côté HumHub (pilule « Participation »,
   même icône d'échange ↔) ramène ici : paire symétrique de bascule entre les deux
   apps sœurs. Teal (et non bleu) pour la distinguer de la pastille « Besoins ». */
.nav-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  color: var(--c-teal); text-decoration: none;
  border: 1px solid var(--c-teal);
  border-radius: 50%;
  background: var(--c-teal-soft);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.nav-switch:hover { background: var(--c-teal); color: var(--c-bg); }
.nav-switch-icon { width: 19px; height: 19px; display: block; }

/* Avatar « Moi » : ancre gauche de la barre (croquis UX revamp révisé), 44px.
   L'avatar EST le lien vers /accueil (plus un déclencheur de menu — le
   compte/réglages vit derrière le rouage ⚙️ à droite). Initiales sur fond
   accent : le Gravatar a été retiré (aucun appel à un tiers). */
.nav-avatar {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500; letter-spacing: 0.3px;
  text-decoration: none;
  padding: 0; overflow: hidden; flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-avatar:hover { border-color: var(--c-accent); }
.nav-avatar.active { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-soft); }
.nav-avatar:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Le rouage (déclencheur du menu) prend un état actif à l'ouverture. */
.menu-wrap.open .menu-trigger { color: var(--c-accent); background: var(--c-accent-soft); }
.avatar-initials { line-height: 1; }

/* Liens de nav principaux — inline sur desktop, remplacés par la tab-bar du bas ≤ 560px. */
/* Respiration (au lieu d'un trait) entre les liens de nav et le cluster
   utilitaire (aide / bascule / avatar) : sépare les deux zones par du blanc. */
.primary-nav { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }

/* Dropdown menu — ouvert par le rouage ⚙️ à DROITE de la barre : le menu se
   cale à droite sous le rouage. */
.menu-wrap { position: relative; margin-left: 4px; }
.menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px var(--c-shadow), 0 1px 3px var(--c-shadow);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0s 0.12s;
}
.menu-wrap.open .menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.12s, transform 0.12s, visibility 0s 0s;
}
.menu-section { padding: 2px 0; }
.menu-divider { height: 1px; background: var(--c-border); margin: 4px 6px; }
.menu-version {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  padding: 6px 14px 2px;
  font-size: calc(11px * var(--mil-fs, 1)); letter-spacing: .02em;
}
.menu-version-num { color: var(--c-text-muted); user-select: text; }
.menu-version-link { color: var(--c-accent); text-decoration: none; }
.menu-version-link:hover, .menu-version-link:focus-visible { text-decoration: underline; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text);
  text-align: left;
  text-decoration: none;
  background: transparent;     /* reset chrome natif des <button class="menu-item"> */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.menu-item:hover { background: var(--c-hover-bg); }
.menu-item:focus-visible { outline: none; background: var(--c-hover-bg); }
.menu-item.active { color: var(--c-accent); background: var(--c-accent-soft); }
.menu-icon { font-size: calc(15px * var(--mil-fs, 1)); width: 18px; text-align: center; flex-shrink: 0; }

/* Toggle "Mode super-admin" dans le dropdown */
.sa-toggle-form { margin: 0; }
.sa-toggle {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  /* font-family seulement : `font` (shorthand) réinitialiserait font-size à
     l'hérité (17px du body) et écraserait le 14px de .menu-item → libellé trop gros. */
  font-family: inherit;
  text-align: left;
}
.sa-toggle .sa-label { flex: 1; }
.sa-switch {
  position: relative;
  display: inline-block;
  width: 32px;              /* gabarit d'interrupteur normalisé : 32×18 (cf. DESIGN_SYSTEM.md) */
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--c-border-strong);
  transition: background var(--t-base);
  flex-shrink: 0;
}
.sa-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 1px 2px var(--c-shadow-strong);
  transition: transform var(--t-base);
}
.sa-toggle.is-on .sa-switch { background: var(--c-accent); }
.sa-toggle.is-on .sa-switch-knob { transform: translateX(14px); }
.sa-toggle.is-off .sa-label { color: var(--c-text-mid); }

/* En-tête de section dans le dropdown (ex. "Outils admin") */
.menu-heading {
  padding: 8px 14px 4px;
  font-size: calc(11px * var(--mil-fs, 1)); font-weight: 500; letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Accessibilité : sélecteur "Taille du texte" (Normal / Grand / Très grand) */
.a11y-fontsize { padding: 4px 12px 8px; }
.a11y-fs-label {
  display: flex; align-items: center; gap: 12px;
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text);
  margin-bottom: 6px;
}
.fs-seg { display: flex; }
.fs-opt {
  flex: 1;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-mid);
  font-family: inherit; font-weight: 500;
  /* Taille fixe (hors --mil-fs) : ce contrôle ne doit pas se redimensionner
     quand il change le zoom, sinon il déborde du dropdown. */
  font-size: 12px;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.fs-opt + .fs-opt { margin-left: -1px; }
.fs-opt:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.fs-opt:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fs-opt:hover { background: var(--c-hover-bg); color: var(--c-text); }
.fs-opt.is-active {
  background: var(--c-accent); color: var(--c-bg);
  border-color: var(--c-accent); position: relative; z-index: 1;
}

/* Tri des membres par prénom / nom — segmenté partagé par /membres (Talents)
   et l'onglet Membres de /comites. Le choix se reflète dans la carte
   (« Prénom Nom » ↔ « Nom, Prénom ») ; préférence persistée en cookie. */
.name-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ns-label {
  font-size: calc(12px * var(--mil-fs, 1));
  color: var(--c-text-muted);
}
.name-sort .ns-opt {
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-mid);
  font-family: inherit;
  font-weight: 500;
  font-size: calc(12px * var(--mil-fs, 1));
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.name-sort .ns-opt + .ns-opt { margin-left: -1px; }
.name-sort .ns-opt:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.name-sort .ns-opt:last-of-type  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.name-sort .ns-opt:hover { background: var(--c-hover-bg); color: var(--c-text); }
.name-sort .ns-opt.is-on {
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  border-color: var(--c-accent);
  position: relative; z-index: 1;
  font-weight: 700;
}
.name-sort .ns-opt:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* Palette daltonien (:root[data-palette="cb"]) et toutes ses surcharges de
   jetons sémantiques vivent désormais dans assets/tokens.css. */

/* Picker cherchable "Voir en tant que" dans le dropdown */
.imp-form { margin: 0; padding: 4px 14px 8px; }
.imp-label {
  display: flex; align-items: center; gap: 10px;
  font-size: calc(14px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text);
  margin-bottom: 6px;
}
.imp-picker { position: relative; }
.imp-search {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: calc(13px * var(--mil-fs, 1));
  padding: 7px 10px;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-text);
}
.imp-search:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.imp-results {
  list-style: none; margin: 4px 0 0; padding: 4px;
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 6px 18px var(--c-shadow);
}
.imp-result {
  padding: 7px 10px;
  font-size: calc(13px * var(--mil-fs, 1)); color: var(--c-text);
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-result:hover, .imp-result.is-active { background: var(--c-accent-soft); color: var(--c-accent-dark); }
.imp-empty { padding: 8px 10px; font-size: calc(13px * var(--mil-fs, 1)); color: var(--c-text-muted); }
.imp-stop { width: 100%; border: none; background: transparent; cursor: pointer; font-family: inherit; text-align: left; }

/* Bannière de personnification active */
.imp-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--c-warning);
  color: #3a2c00;
}
.imp-banner-icon { font-size: calc(18px * var(--mil-fs, 1)); }
.imp-banner-text { flex: 1; font-size: calc(14px * var(--mil-fs, 1)); }
.imp-banner-text strong { font-weight: 700; }
.imp-banner-form { margin: 0; }
.imp-banner-btn {
  border: 1px solid #3a2c00;
  background: transparent;
  color: #3a2c00;
  font: inherit; font-size: calc(13px * var(--mil-fs, 1)); font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.imp-banner-btn:hover { background: #3a2c00; color: var(--c-warning); }

/* ---------- Bandeau d'aide partagé ---------- */
.help-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 18px 28px 0;
}
.help-banner[hidden] { display: none; }
.help-banner .hb-icon { font-size: calc(22px * var(--mil-fs, 1)); line-height: 1.2; flex: 0 0 auto; }
.help-banner .hb-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: calc(13.5px * var(--mil-fs, 1));
  line-height: 1.5;
  color: var(--c-text-mid);
}
.help-banner .hb-text strong { color: var(--c-text); }
.help-banner .hb-dismiss {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--c-accent);
  background: var(--c-surface);
  color: var(--c-accent-dark);
  font: inherit;
  font-size: calc(13px * var(--mil-fs, 1));
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.help-banner .hb-dismiss:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

@media (max-width: 640px) {
  .help-banner { margin: 14px 16px 0; flex-wrap: wrap; }
  .help-banner .hb-dismiss { margin-left: auto; }
}

/* ---------- COMMON BLOCKS ---------- */

/* Boutons — `.btn` + UNE variante (cf. DESIGN_SYSTEM § Composants).
   Le vocabulaire de base était défini deux fois, dans comites.css ET moi.css :
   une page qui ne chargeait ni l'un ni l'autre (comme /parcours) héritait du
   bouton natif du navigateur. Il vit maintenant ici, dans la feuille que
   TOUTES les pages chargent. Les deux copies restent en place et continuent
   de gagner (app.css est chargée avant les feuilles de page) — à retirer
   quand on voudra faire le ménage, sans urgence puisqu'elles sont identiques. */
.btn {
  font-family: inherit;
  font-size: calc(14px * var(--mil-fs, 1));
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast, 0.12s);
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  border-color: var(--c-accent);
}
.btn-primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.btn-secondary {
  background: var(--c-surface);
  color: var(--c-text-mid);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover { background: var(--c-hover-bg); color: var(--c-text); }
.btn-ghost {
  background: transparent;
  color: var(--c-text-mid);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--c-hover-bg); color: var(--c-text); }

/* Étiquette « Résident·e » : habite avec un membre officiel sans l'être
   (bénévole pur). Pill discret à bordure fine, statut aussi porté par le
   texte (jamais la couleur seule). Utilisé sur /coordo et /taches. */
.tag-resident {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-mid);
  font-size: calc(10.5px * var(--mil-fs, 1));
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.flash {
  max-width: 800px;
  margin: 16px auto 0;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: calc(14px * var(--mil-fs, 1));
}
.flash.success { background: var(--c-success-soft); color: var(--c-success-text); border: 1px solid var(--c-success); }
.flash.error   { background: var(--c-danger-soft); color: var(--c-danger-text); border: 1px solid var(--c-danger); }

/* ---------- TEXTE VENANT DU HUB ----------
   Rendu du champ « À propos » d'un Space HumHub (= les objectifs d'un comité,
   cf. décision #7) : markdown restreint → HTML par \MIL\SpaceText. Partagé par
   /comites › Paramètres et /taches — un seul rendu pour un seul texte. */
.hub-text {
  font-size: calc(13px * var(--mil-fs, 1));
  line-height: 1.55;
  color: var(--c-text);
}
.hub-text > :first-child { margin-top: 0; }
.hub-text > :last-child  { margin-bottom: 0; }
.hub-text p  { margin: 0 0 10px; }
.hub-text h4 {
  margin: 16px 0 6px;
  font-size: calc(12px * var(--mil-fs, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-mid);
}
.hub-text ul {
  margin: 0 0 10px;
  padding-left: 18px;
  list-style: disc;
}
.hub-text li { margin-bottom: 4px; }
.hub-text a {
  color: var(--c-accent);
  text-decoration: none;
}
.hub-text a:hover { text-decoration: underline; }

/* ---------- PLACEHOLDER PAGES ---------- */
.placeholder-page {
  max-width: 600px; margin: 40px auto; padding: 20px;
}
.placeholder-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 56px 40px; text-align: center;
}
.placeholder-icon { font-size: calc(52px * var(--mil-fs, 1)); margin-bottom: 18px; opacity: 0.9; }
.placeholder-card h2 { font-size: calc(22px * var(--mil-fs, 1)); font-weight: 500; color: var(--c-text); margin-bottom: 10px; }
.placeholder-card p { font-size: calc(15px * var(--mil-fs, 1)); color: var(--c-text-mid); margin-bottom: 8px; line-height: 1.55; }
.placeholder-card p.muted { color: var(--c-text-muted); font-size: calc(14px * var(--mil-fs, 1)); }
.placeholder-cta {
  display: inline-block; margin-top: 24px;
  padding: 11px 20px;
  background: var(--c-accent); color: var(--c-on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: calc(14px * var(--mil-fs, 1));
  font-weight: 500;
  transition: background 0.15s;
}
.placeholder-cta:hover { background: var(--c-accent-dark); }

/* ---------- RESPONSIVE BASE ---------- */
@media (max-width: 640px) {
  .nav-btn, .nav-me { padding: 7px 11px; font-size: calc(13px * var(--mil-fs, 1)); }
  .header-text { display: none; }

  /* Barre d'app native : plus basse, collée au bord, et qui respecte l'encoche
     (safe-area) sur les téléphones à notch / Dynamic Island. */
  .site-header {
    gap: 10px;
    padding: 8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  /* Élévation au défilement : à plat en haut, ombre douce dès qu'on scrolle —
     le décollement de la barre est un signal « app » (classe posée en JS). */
  .site-header.is-scrolled {
    border-bottom-color: transparent;
    box-shadow: 0 2px 10px var(--c-shadow), 0 1px 2px var(--c-shadow);
  }

  /* Feedback de press : tous les contrôles de la barre s'enfoncent légèrement
     au toucher (transition transform pour un relâchement fluide). */
  .icon-ghost, .nav-avatar,
  .nav-btn, .nav-link, .nav-switch, .nav-afaire {
    transition: transform 0.12s ease, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .icon-ghost:active, .nav-avatar:active,
  .nav-btn:active, .nav-link:active, .nav-switch:active,
  .nav-afaire:active {
    transform: scale(0.93);
  }

  /* Sur mobile, le cluster = avatar-menu (44px) + nav membre. Le logo n'existe
     qu'en repli (staff / déconnecté) — on le réduit alors. */
  .brand-cluster .brand { padding: 0; }
  .brand-cluster .logo-svg { width: 22px; height: 24px; padding-bottom: 0; }

  /* Bande « tablette / large mobile » (≥ 561px) : chip compact MAIS la nav reste
     INLINE pour remplir la barre avec les vrais liens plutôt que de laisser un
     grand vide. On resserre paddings/gaps pour qu'un coordo (4 liens) tienne ;
     sous 561px la nav inline cède la place à la tab-bar du bas (bloc dédié). */
  .top-nav { gap: 6px; }   /* = écart desktop ; aligne l'écart pastille↔avatar sur HumHub */
  .nav-link { padding: 7px 9px; }
  .primary-nav { margin-right: 10px; }   /* respiration un peu plus serrée en tablette */
}

/* Cahier des locataires dans le cluster de marque — TÉLÉPHONE SEULEMENT.
   Sur grand écran la tuile « Cahier » de .brand-nav fait le travail ; ≤ 560px
   cette nav est masquée et le cahier n'est pas un onglet de la tab-bar, donc
   on le remonte en icône à côté de l'avatar (sinon : seulement le menu ⚙️). */
.nav-cahier-mobile { display: none; position: relative; flex-shrink: 0; }

/* ---------- TAB-BAR MOBILE (≤ 560px) ---------- */
/* Vrais téléphones : plus de burger — les destinations principales (Mes tâches,
   À faire, Mes comités, Membres) vivent dans une barre du bas fixe, à portée
   de pouce. Même langage que la tab-bar HumHub du thème MilHub (_nav.scss) :
   plat, icône 24px au-dessus d'un libellé discret, onglet actif = accent +
   fin liseré HAUT (indicateur d'onglet), jamais de bloc de fond. Rendue
   serveur (header.php, ≥ 2 onglets) ; body.has-tabbar réserve la place en
   bas du contenu. La barre du haut se réduit à logo · Moi · ⟷ · avatar. */
.tabbar { display: none; }

@media (max-width: 560px) {
  /* La nav inline (gestion, à droite) ET la nav membre gauche « Moi | Toutes
     les tâches » cèdent la place à la tab-bar du bas. La barre du haut se réduit
     à avatar · ⟷ · avatar-menu. */
  .primary-nav { display: none; }
  .brand-nav { display: none; }

  /* Même gabarit 36px que ⟷ et ⚙️ pour que le cluster reste homogène ; la
     cible tactile est portée à 44px par ::after, sans grossir le visuel. */
  .nav-cahier-mobile { display: inline-flex; }
  .nav-cahier-mobile svg { width: 22px; height: 22px; }
  .nav-cahier-mobile::after { content: ''; position: absolute; inset: -4px; }
  .nav-cahier-mobile.active { color: var(--c-accent); background: var(--c-accent-soft); }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;   /* au-dessus du contenu et du header (100), sous les sheets/backdrops (≥ 500) */
    display: flex;
    align-items: stretch;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 10px var(--c-shadow);
  }
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  .tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 4px;
    border-top: 2px solid transparent;   /* gabarit de l'indicateur actif */
    color: var(--c-text-mid);
    text-decoration: none;
    font-size: calc(10px * var(--mil-fs, 1));
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    transition: color 0.15s;
  }
  .tabbar-item.active { color: var(--c-accent); border-top-color: var(--c-accent); }
  .tabbar-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  .tabbar-item:active .tabbar-icon { transform: scale(0.9); }

  .tabbar-icon {
    position: relative;   /* ancre la pastille de compteur */
    display: flex; align-items: center; justify-content: center;
    height: 26px;
    transition: transform 0.12s ease;
  }
  .tabbar-icon svg { width: 24px; height: 24px; }
  /* L'icône gamifiée « Mes tâches » reste au gabarit 24px des icônes voisines
     (le 28px de .na-icon ne vaut que pour l'indicateur du header). */
  .tabbar-icon .na-icon { width: 24px; height: 24px; padding: 0 5px; }
  .tabbar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 460px) {
  .nav-btn, .nav-me { padding: 6px 9px; font-size: calc(12px * var(--mil-fs, 1)); }
  .top-nav { gap: 6px; }   /* écart pastille↔avatar constant (= HumHub) */
}