@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --modal-header-gap: 0.8rem;
  --modal-header-padding-bottom: 1rem;
  --modal-header-margin-bottom: 1.1rem;
  --modal-close-size: 44px;
  --modal-close-icon-size: 16px;
  /* ---------------------------------------------------------------
     Couleurs de marque — TIRÉES DES JETONS OFFICIELS.

     `brand-tokens.css` est généré depuis `brand/tokens/` par
     `npm run brand:sync` (dépôt du site). On y fait référence plutôt
     que de recopier les valeurs : une couleur recopiée diverge, et
     c'est exactement ce qui s'était produit ici — le laiton de
     l'application n'était pas l'or de la marque.
     --------------------------------------------------------------- */
  --ink: var(--brand-anthracite);
  --ink-soft: #2E3A47;
  --paper: var(--brand-ivory);
  --paper-raised: #FBFAF6;
  --field-bg: var(--brand-white);
  --brass: var(--brand-gold);
  --brass-dark: #8C6534;
  --slate: #5C6773;
  --slate-light: #8992A0;

  /* Discipline des couleurs de statut : rouge = urgence, orange = action
     attendue, bleu = info, vert = succès. Les quatre viennent des jetons
     fonctionnels officiels. */
  --sage: var(--state-success);
  --sage-bg: #EAF4EF;
  --rust: var(--state-danger);
  --orange-attente: var(--state-warning);
  --bleu-info: var(--state-info);
  --rust-bg: #F9EDED;
  --line: #D8D5C9;

  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Barème de tailles — 3 valeurs maximum, à respecter partout pour la cohérence :
     0.8rem = tout texte secondaire (labels, badges, méta, cellules de tableau)
     1rem   = texte de corps standard (paragraphes, titres de carte, boutons)
     1.5rem = mise en avant (titres de page, chiffres clés) */
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.5rem;

  --radius: 3px;
  --shadow-plate: 0 1px 0 rgba(28,37,48,0.06), 0 2px 8px rgba(28,37,48,0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  color-scheme: light;
}

body {
  line-height: 1.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 100%;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }

a { color: inherit; }

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
  background: var(--field-bg);
  color: var(--ink);
  color-scheme: light;
  border: 1.5px solid var(--slate-light);
}

.hidden { display: none !important; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  border-radius: var(--radius);
  padding: 0.85em 1.4em;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--paper-raised); }
.btn-primary:hover { background: var(--ink-soft); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-dark); }
.btn-ghost { background: var(--paper); color: var(--ink); border: 1.5px solid var(--slate-light); }
.btn-ghost:hover { border-color: var(--ink); background: var(--line); }
.btn-danger { background: transparent; color: var(--rust); border: 1.5px solid var(--rust-bg); }
.btn-danger:hover { background: var(--rust-bg); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.5em 0.9em; font-size: 0.8rem; min-height: 36px; }

/* ---------- Champs ---------- */
.field { margin-bottom: 1.1rem; text-align: left; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin-bottom: 0.4rem;
}
.field input, .field select {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--slate-light);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--ink);
  min-height: 44px;
}
.field input:focus, .field select:focus {
  outline: 3px solid rgba(164,123,76,0.35);
  outline-offset: 0;
  border-color: var(--brass);
}
.field-row { display: flex; gap: 0.8rem; }
.field-row .field { flex: 1; }

.error-msg {
  background: var(--rust-bg);
  color: var(--rust);
  border-radius: var(--radius);
  padding: 0.7em 1em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  display: none;
}
.error-msg.show { display: block; }

.info-msg {
  background: var(--sage-bg);
  color: var(--sage);
  border-radius: var(--radius);
  padding: 0.7em 1em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  display: none;
}
.info-msg.show { display: block; }

/* ---------- Ecran d'authentification ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
}

.auth-wrap {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--paper-raised);
  border-radius: 6px;
  box-shadow: var(--shadow-plate);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* Panneau d'accueil de la résidence — générique, ne suppose jamais aucune
   structure physique particulière (blocs, étages...). Photo de la résidence
   en fond si disponible, sinon fond uni. Composition : marque discrète en
   haut, nom de résidence dominant ancré en bas — jamais l'inverse, pour que
   l'attention aille d'abord à "votre résidence", pas au logiciel. */
.auth-screen .directory-panel {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 2.4rem 2.4rem;
  overflow: hidden;
}
.auth-screen .directory-panel-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(1.08) contrast(1.06);
  opacity: 0; transition: opacity 0.4s ease;
}
.auth-screen .directory-panel-bg.has-photo { opacity: 1; }
.auth-screen .directory-panel-scrim {
  position: absolute; inset: 0;
  /* Plus sombre en haut (marque) et en bas (nom + accroche), plus clair au
     centre pour que la photo reste réellement visible. */
  background: linear-gradient(180deg, rgba(20,26,34,0.75) 0%, rgba(20,26,34,0.28) 42%, rgba(20,26,34,0.85) 100%);
}
.auth-screen .directory-panel-content {
  position: absolute; inset: 2.4rem;
  z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-screen .directory-mark-row { display: flex; align-items: center; gap: 0.6rem; }
/* Symbole officiel Syndicop.
   Le "S" provisoire a disparu : la place qu'il occupait accueille
   maintenant le vrai symbole, à taille et position identiques — la
   composition n'a pas bougé. */
.auth-screen .directory-logo-slot {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--brass);
}
.auth-screen .directory-logo-slot svg { width: 100%; height: 100%; display: block; }
.auth-screen .directory-mark {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; color: rgba(238,237,228,0.85);
}
.auth-screen .directory-residence-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.55rem; line-height: 1.2; color: #fff;
  margin-top: 1.4rem; max-width: 16ch;
}
.auth-screen .directory-tagline {
  font-size: 0.92rem; line-height: 1.5; color: var(--slate-light);
  margin-top: 0.6rem;
}
.auth-screen .directory-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.auth-screen .directory-points li {
  font-size: 0.78rem; color: rgba(238,237,228,0.75); letter-spacing: 0.02em;
  padding-left: 1.1rem; position: relative;
}
.auth-screen .directory-points li::before {
  content: '✓'; position: absolute; left: 0; color: var(--brass); font-weight: 600;
}

/* Bandeau mobile — visible uniquement sous 720px, remplace le panneau complet */
.auth-screen .mobile-auth-band {
  display: none;
  align-items: center; gap: 0.6rem;
  padding: 1rem 1.4rem;
  background: var(--ink); color: var(--paper);
}
.auth-screen .directory-logo-slot-sm { width: 22px; height: 22px; }
.auth-screen .mobile-auth-band .directory-mark { font-size: 0.66rem; }
.auth-screen .mobile-auth-band-residence { font-size: 0.9rem; font-weight: 600; color: #fff; margin-left: auto; }

.auth-panel { padding: 2.6rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.auth-panel h2 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.auth-panel .subtitle { color: var(--slate); font-size: 1rem; margin-bottom: 1.6rem; }

/* Transition d'apparition douce entre Connexion / Inscription / Mot de passe oublié */
@keyframes authPanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.auth-panel:not(.hidden) { animation: authPanelIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* Champs — finition premium scopée aux écrans d'authentification (le reste
   de l'application garde ses proportions plus denses et fonctionnelles). */
.auth-panel .field label {
  text-transform: none; font-size: 0.82rem; font-weight: 500; letter-spacing: 0;
  color: var(--slate);
}
.auth-panel .field input, .auth-panel .field select {
  border-radius: 10px; border-color: var(--line);
  padding: 0.8em 1em;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-panel .field input::placeholder { color: var(--slate-light); }
.auth-panel .field input:focus, .auth-panel .field select:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 4px rgba(164,123,76,0.14);
}
.auth-panel .field-divider {
  border: none; border-top: 1px solid var(--line);
  margin: 1.7rem 0 1.4rem; opacity: 0.7;
}

/* Bouton principal — profondeur et hover soignés, scopés à l'authentification */
.auth-panel .btn-primary {
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(28,37,48,0.2);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, background 0.18s ease;
}
.auth-panel .btn-primary:hover { box-shadow: 0 6px 18px rgba(28,37,48,0.28); transform: translateY(-1px); }
.auth-panel .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(28,37,48,0.22); }

/* Choices.js — personnalisation pour s'aligner sur le langage visuel du
   produit (les styles par défaut de la bibliothèque sont génériques). */
.auth-panel .choices { margin-bottom: 0; font-size: 1rem; }
.auth-panel .choices__inner {
  background: var(--field-bg); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.55em 0.9em; min-height: 44px;
  font-family: var(--font-body);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-panel .choices.is-focused .choices__inner,
.auth-panel .choices.is-open .choices__inner {
  border-color: var(--brass); box-shadow: 0 0 0 4px rgba(164,123,76,0.14);
}
.auth-panel .choices__list--single .choices__item { color: var(--ink); }
.auth-panel .choices__list--dropdown, .auth-panel .choices__list[aria-expanded] {
  border-color: var(--line); border-radius: 10px; margin-top: 0.4rem;
  box-shadow: 0 8px 24px rgba(28,37,48,0.12);
  font-family: var(--font-body);
}
.auth-panel .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--sage-bg); color: var(--ink);
}
.auth-panel .choices__input { background: var(--field-bg); font-family: var(--font-body); }
.auth-panel .choices[data-type*="select-one"]::after { border-color: var(--slate) transparent transparent transparent; }
.auth-panel .choices.is-disabled .choices__inner { background: var(--paper); opacity: 0.75; }

.auth-switch { margin-top: 1.2rem; font-size: 1rem; color: var(--slate); text-align: center; }
.auth-switch button {
  background: none; border: none; color: var(--brass-dark); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
  min-height: unset;
}

.lot-type-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.lot-type-toggle button {
  flex: 1; padding: 0.7em; border: 1.5px solid var(--line); background: var(--paper-raised);
  border-radius: var(--radius); cursor: pointer; font-weight: 600; font-size: 0.8rem; color: var(--slate);
}
.lot-type-toggle button.active { border-color: var(--brass); background: var(--sage-bg); color: var(--ink); }

.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 720px) {
  .dash-grid-2 { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; gap: 0; }
  .auth-wrap { grid-template-columns: 1fr; max-width: 460px; }
  .auth-screen .directory-panel { display: none; }
  .auth-screen .mobile-auth-band { display: flex; }
  .auth-panel { padding: 2.2rem 1.6rem; }
}
@media (min-width: 721px) {
  .auth-screen .mobile-auth-band { display: none; }
}

/* ---------- Application (post-login) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 1.6rem 1.1rem;
  display: flex;
  flex-direction: column;
}
.sidebar-brand { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: 0.2rem; }
.sidebar-residence-name {
  font-size: 0.8rem; color: var(--slate-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.1rem;
}
/* Sélecteur de résidence — n'apparaît qu'à partir de deux résidences
   accessibles. Placé haut dans la sidebar : pour un syndic professionnel, la
   résidence active doit rester évidente en permanence, une saisie dans la
   mauvaise résidence étant silencieuse et coûteuse. */
.residence-switcher {
  margin: 0.9rem 0 0.2rem;
  padding: 0.6rem 0.7rem;
  background: rgba(238, 237, 228, 0.07);
  border: 1px solid rgba(238, 237, 228, 0.18);
  border-radius: 8px;
}
.residence-switcher.hidden { display: none; }
.residence-switcher-label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate-light);
  margin-bottom: 0.35rem;
}
.residence-switcher-select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(238, 237, 228, 0.28);
  border-radius: 6px;
  cursor: pointer;
}
.residence-switcher-select option { color: #1a1a1a; background: #fff; }

/* Vignette de résidence dans la sidebar — dimensions strictement fixes,
   jamais la grande photo de fond (réservée à #auth-screen, voir plus bas). */
.sidebar .residence-thumb {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; overflow: hidden;
  border: 1px solid rgba(238,237,228,0.25);
}
.sidebar .residence-thumb.hidden { display: none; }
.btn-edit-residence {
  background: none; border: none; color: var(--slate-light); cursor: pointer; font-size: 0.8rem;
  margin-left: auto; padding: 0.3rem;
}
.btn-edit-residence.hidden { display: none; }
.btn-edit-residence:hover { color: #fff; }
.sidebar-lot-plate {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.9rem 0 1rem;
  border: 1px solid rgba(238,237,228,0.2);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
}
.plate-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--brass); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;
  flex-shrink: 0;
}
.plate-text { min-width: 0; flex: 1; }
.sidebar-lot-plate .plate-name { font-size: 1rem; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-lot-plate .plate-lot { font-size: 0.8rem; color: var(--slate-light); margin-top: 0.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-list { list-style: none; padding: 0; margin: 0; flex: 1; }

.nav-item i, .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.inbox-btn {
  position: relative; flex-shrink: 0; background: rgba(238,237,228,0.06); border: 1px solid rgba(238,237,228,0.15);
  border-radius: var(--radius); padding: 0.5em; cursor: pointer; color: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.inbox-btn-corner { width: 34px; height: 34px; }
.inbox-btn svg { width: 18px; height: 18px; }
.inbox-btn:hover { background: rgba(238,237,228,0.14); }
.inbox-badge {
  position: absolute; top: -6px; right: -6px; background: var(--rust); color: #fff; font-size: 0.8rem;
  font-weight: 700; min-width: 18px; height: 18px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.inbox-badge.hidden { display: none; }

.inbox-item { padding: 0.85em 0.9em; border-bottom: 1px solid var(--line); cursor: pointer; }
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: var(--paper); }
.inbox-item.unread { background: var(--sage-bg); }
.inbox-item .inbox-item-title { font-weight: 600; font-size: 1rem; }
.inbox-item .inbox-item-meta { font-size: 0.8rem; color: var(--slate); margin-top: 0.2rem; }
.inbox-item .inbox-item-body { font-size: 0.8rem; margin-top: 0.4rem; color: var(--ink); white-space: pre-wrap; }
.nav-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75em 0.7em; border-radius: var(--radius); cursor: pointer;
  color: var(--slate-light); font-weight: 500; font-size: 1rem; margin-bottom: 0.15rem;
}
.nav-item:hover { background: rgba(238,237,228,0.06); color: #fff; }
.nav-item.active { background: var(--brass); color: #fff; }
.nav-item.disabled { opacity: 0.4; cursor: default; }
.nav-item.disabled:hover { background: none; color: var(--slate-light); }
.nav-item-locked { opacity: 0.5; cursor: pointer; }
.nav-item-locked:hover { opacity: 0.75; background: rgba(238,237,228,0.06); }
.nav-lock-icon { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; background: var(--rust); color: #fff; font-size: 0.8rem;
  border-radius: 10px; padding: 0.1em 0.5em; font-weight: 700;
}

.nav-divider {
  margin: 0.9rem 0.7rem 0.5rem; padding-top: 0.9rem; border-top: 1px solid rgba(238,237,228,0.15);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); font-weight: 700;
}

.sidebar-foot { padding-top: 1rem; border-top: 1px solid rgba(238,237,228,0.15); }
.sidebar-foot button { display: block; width: 100%; text-align: left; color: var(--slate-light); background: none; border: none; cursor: pointer; font-size: 0.8rem; padding: 0.4em 0; }
.sidebar-foot button:hover { color: #fff; }

.main-area { flex: 1; padding: 2.2rem 2.6rem; max-width: 1100px; }
.main-header { margin-bottom: 1.3rem; }
.main-header h1 { font-size: 1.5rem; }
.main-header .eyebrow {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass-dark);
  font-weight: 700; margin-bottom: 0.35rem;
}

.card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow-plate); margin-bottom: 0.8rem;
}
.card h3 { font-size: 1rem; margin-bottom: 0.5rem; }

.status-tag {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; font-weight: 700;
  padding: 0.25em 0.7em; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em;
}
.status-valide { background: var(--sage-bg); color: var(--sage); }
.status-en_attente { background: var(--rust-bg); color: var(--rust); }
.status-ouvert { background: var(--rust-bg); color: var(--rust); }
.status-en_cours { background: #F0E4D0; color: var(--brass-dark); }
.status-resolu { background: var(--sage-bg); color: var(--sage); }
.status-declare { background: #E3E8EF; color: #3D5A80; }
.badge-neutre { background: var(--line); color: var(--slate); }

.crit-critique { background: var(--rust); color: #fff; }
.crit-haute { background: #FBEBD5; color: var(--orange-attente); }

.tag-securite { background: var(--rust-bg); color: var(--rust); }
.tag-degats_pannes { background: #F0E4D0; color: var(--brass-dark); }
.tag-calme_bienetre { background: var(--sage-bg); color: var(--sage); }

.tag-voisinage-vie_residence { background: #E3E8EF; color: #3D5A80; }
.tag-voisinage-travaux { background: #F0E4D0; color: var(--brass-dark); }
.tag-voisinage-securite { background: #F5DADA; color: #A13D3D; }
.tag-voisinage-stationnement { background: #E0E7E9; color: #3E6B73; }
.tag-voisinage-bruit { background: #EDE0F0; color: #7A4A99; }
.tag-voisinage-objets { background: #FBEBD0; color: #A9720D; }
.tag-voisinage-animaux { background: #E6EFDD; color: #4C7A2E; }
.tag-voisinage-entraide { background: #FDE4EC; color: #B85C7E; }
.tag-voisinage-evenements { background: #F0DDE7; color: #9C4668; }
.tag-voisinage-information { background: #DCEBF7; color: #2E6C99; }
.tag-voisinage-autre { background: var(--line); color: var(--slate); }
.tag-voisinage-travaux_bruyants { background: #F0E4D0; color: var(--brass-dark); }
.tag-voisinage-livraison_demenagement { background: #E3E8EF; color: #3D5A80; }
.tag-voisinage-absence_prolongee { background: #DCEBF7; color: #2E6C99; }
.tag-voisinage-evenement_prive { background: #F0DDE7; color: #9C4668; }
.tag-syndic-annonce { background: var(--ink); color: #fff; font-weight: 700; }

.groupe-btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.groupe-btn {
  flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 1.1rem 0.6rem; border: 1.5px solid var(--slate-light); border-radius: 8px; background: var(--field-bg);
  cursor: pointer; font-weight: 600; font-size: 0.8rem; color: var(--ink);
  box-shadow: 0 1px 3px rgba(28,37,48,0.08); text-align: center;
  transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.groupe-btn:hover { border-color: var(--brass); box-shadow: 0 3px 8px rgba(28,37,48,0.14); transform: translateY(-1px); }
.groupe-btn.active { border-color: var(--brass); border-width: 2px; background: var(--sage-bg); color: var(--ink); }
.groupe-btn-icon { width: 28px; height: 28px; }

.incident-card { cursor: pointer; transition: box-shadow 0.15s ease; }
.incident-card:hover { box-shadow: 0 2px 12px rgba(28,37,48,0.12); }
.incident-thumb { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; background: var(--paper); }

.comment-thread { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 1rem; }
.comment-item { margin-bottom: 0.9rem; }
.comment-item .comment-meta { font-size: 0.8rem; color: var(--slate); margin-bottom: 0.2rem; }
.comment-item .comment-msg { font-size: 1rem; background: var(--paper); border-radius: var(--radius); padding: 0.6em 0.8em; }
.comment-form { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.comment-form textarea { flex: 1; min-height: 44px; padding: 0.6em 0.8em; border: 1.5px solid var(--slate-light); background: var(--field-bg); border-radius: var(--radius); font-family: inherit; resize: vertical; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); padding: 0.6em 0.7em; border-bottom: 2px solid var(--line); }
td { padding: 0.7em 0.7em; border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
td.text-cell { font-family: var(--font-body); }
tr:last-child td { border-bottom: none; }
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--paper); }

.empty-state {
  text-align: center; padding: 3rem 1.5rem; color: var(--slate);
}
.empty-state .empty-icon { font-size: 1.5rem; margin-bottom: 0.6rem; }

.placeholder-card {
  border: 1.5px dashed var(--line); border-radius: 6px; padding: 2.2rem; text-align: center; color: var(--slate);
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(28,37,48,0.5); display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; z-index: 50;
}
.modal-box {
  background: var(--paper-raised); border-radius: 6px; padding: 1.8rem; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-box h3:not(.modal-title) { margin-bottom: 1.1rem; }
.modal-actions { display: flex; gap: 0.7rem; margin-top: 0.6rem; }

/* Composant unique de header de modale — structure statique présente
   directement dans le gabarit HTML de chaque modale (voir migrations/README
   ou CHANGELOG pour le détail). Le JS ne fait qu'attacher la fermeture
   (délégation d'événement) et gérer le focus — jamais construire ce balisage. */
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--modal-header-gap);
  padding-bottom: var(--modal-header-padding-bottom); margin-bottom: var(--modal-header-margin-bottom);
  border-bottom: 1px solid var(--line);
}
.modal-heading { flex: 1 1 auto; min-width: 0; }
.modal-title { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.modal-subtitle { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--slate); font-weight: 400; }

.modal-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--modal-close-size); height: var(--modal-close-size);
  min-width: var(--modal-close-size); min-height: var(--modal-close-size);
  padding: 0; margin: 0; box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--slate);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal-close svg { width: var(--modal-close-icon-size); height: var(--modal-close-icon-size); display: block; }
.modal-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.modal-close:focus-visible { outline: 3px solid rgba(164,123,76,0.45); outline-offset: 2px; }

.modal-footer { display: flex; gap: 0.7rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }

.modal-box-scroll { display: flex; flex-direction: column; max-height: 90vh; padding: 1.8rem 0; }
.modal-box-scroll .modal-fixed-top { padding: 0 1.8rem; flex-shrink: 0; }
.modal-box-scroll .modal-scroll-area { flex: 1; overflow-y: auto; padding: 0 1.8rem; min-height: 0; }
.modal-box-scroll .modal-fixed-bottom { padding: 0.9rem 1.8rem 0; flex-shrink: 0; margin-top: 0; border-top: 1px solid var(--line); }

.loading-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); animation: pulse 1s infinite ease-in-out; }
@keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .mobile-topbar {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--ink); color: #fff; padding: 0.85rem 1.1rem;
    padding-top: calc(0.85rem + env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 30;
  }
  .mobile-topbar .menu-toggle {
    background: none; border: 1px solid rgba(238,237,228,0.25); border-radius: var(--radius);
    color: #fff; width: 42px; height: 42px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .mobile-topbar .mobile-title {
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .mobile-residence-thumb {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(238,237,228,0.3);
  }
  .mobile-residence-thumb.hidden { display: none; }

  .sidebar-backdrop.show {
    display: block; position: fixed; inset: 0; background: rgba(28,37,48,0.55); z-index: 35;
  }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 82vw; max-width: 300px;
    padding-top: calc(1.6rem + env(safe-area-inset-top));
    transform: translateX(-105%); transition: transform 0.25s ease;
    z-index: 40; overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }
  .sidebar.open { transform: translateX(0); }

  .nav-list { display: block; }
  .nav-item { font-size: 1rem; padding: 0.75em 0.7em; }

  .main-area { padding: 1.2rem 1rem; }

  /* Tableaux -> cartes automatiquement sur mobile, sans dupliquer le code de rendu */
  .table-wrap table thead { display: none; }
  .table-wrap table, .table-wrap table tbody, .table-wrap table tr, .table-wrap table td { display: block; width: 100%; }
  .table-wrap table { border: none; }
  .table-wrap table tr {
    border: 1px solid var(--line); border-radius: 6px; margin-bottom: 0.7rem; padding: 0.8rem 0.9rem;
    background: var(--field-bg);
  }
  .table-wrap table tr:last-child { margin-bottom: 0; }
  .table-wrap table td { border-bottom: none; padding: 0.3em 0; font-family: var(--font-body); }
  .table-wrap table td[data-label]::before {
    content: attr(data-label); display: block; font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--slate); margin-bottom: 0.15rem; font-family: var(--font-body);
  }
  .table-wrap table td:empty { display: none; }
}

.mode-toggle-row { display: flex; gap: 0.3rem; margin-bottom: 0.9rem; background: rgba(238,237,228,0.06); border-radius: var(--radius); padding: 0.25rem; }
.mode-toggle-btn {
  flex: 1; background: none; border: none; border-radius: calc(var(--radius) - 2px); padding: 0.45em 0.4em;
  font-size: 0.72rem; font-weight: 600; color: var(--slate-light); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.35em;
}
.mode-toggle-btn i, .mode-toggle-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.mode-toggle-btn.active { background: var(--brass); color: #fff; }

.search-trigger {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-bottom: 0.8rem;
  background: rgba(238,237,228,0.06); border: 1px solid rgba(238,237,228,0.15); border-radius: var(--radius);
  padding: 0.6em 0.8em; cursor: pointer; color: var(--slate-light); font-size: 0.8rem; text-align: left;
}
.search-trigger:hover { background: rgba(238,237,228,0.12); color: #fff; }
.search-trigger i { width: 16px; height: 16px; flex-shrink: 0; }

.search-input-wrap { position: relative; margin-bottom: 1rem; }
.search-input-wrap i { position: absolute; left: 0.9em; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate); }
.search-input-wrap input { width: 100%; padding: 0.75em 0.9em 0.75em 2.6em; border: 1.5px solid var(--slate-light); border-radius: var(--radius); background: var(--field-bg); font-size: 1rem; }
.search-group-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); font-weight: 600; margin: 1rem 0 0.4rem; }
.search-result-item { padding: 0.6em 0.4em; border-radius: var(--radius); cursor: pointer; font-size: 1rem; }
.search-result-item:hover { background: var(--paper); }
.search-result-meta { font-size: 0.8rem; color: var(--slate); margin-top: 0.1rem; }

.filter-chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-chip {
  padding: 0.4em 0.9em; border-radius: 20px; border: 1.5px solid var(--line); background: var(--paper-raised);
  font-size: 0.8rem; font-weight: 600; color: var(--slate); cursor: pointer;
}
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.overflow-menu { position: relative; }
.overflow-menu-btn {
  background: none; border: 1.5px solid var(--slate-light); border-radius: var(--radius); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--slate);
}
.overflow-menu-btn:hover { border-color: var(--ink); color: var(--ink); }
.overflow-menu-btn i { width: 17px; height: 17px; }
.overflow-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); background: var(--field-bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 4px 14px rgba(28,37,48,0.18); min-width: 150px; z-index: 20; overflow: hidden;
}
.overflow-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.6em 0.9em;
  font-size: 0.8rem; color: var(--ink); cursor: pointer;
}
.overflow-menu-item:hover { background: var(--paper); }
.overflow-menu-item-danger { color: var(--rust); }

.push-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4em 0; font-size: 0.8rem; color: var(--slate-light); }
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(238,237,228,0.25); border-radius: 22px; transition: background 0.15s ease; }
.switch-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; }
.switch input:checked + .switch-slider { background: var(--brass); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

.fiche-section {
  border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.9rem; margin-bottom: 1.1rem; background: var(--paper);
}
.fiche-section > summary {
  cursor: pointer; font-weight: 600; font-size: 0.8rem; padding: 0.7em 0; list-style: none; color: var(--ink);
  display: flex; align-items: center; gap: 0.4rem;
}
.fiche-section > summary::-webkit-details-marker { display: none; }
.fiche-section > summary::before { content: '▸'; color: var(--brass-dark); transition: transform 0.15s ease; }
.fiche-section[open] > summary::before { transform: rotate(90deg); }
.fiche-section > summary ~ * { animation: fadeIn 0.15s ease; }
.fiche-section .field:last-child { margin-bottom: 0.9rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0;
  background: var(--ink); color: #fff; padding: 0.7em 1.2em; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28); z-index: 300; display: flex; align-items: center; gap: 0.5rem;
  transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }

.progress-bar { width: 100%; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 0.6rem; }
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }

.stat-row { display: flex; gap: 0.8rem; margin-bottom: 0.8rem; }
.stat-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) {
  .stat-row { flex-direction: column; }
}

.tab-row { display: flex; gap: 0.4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab-btn {
  padding: 0.7em 1rem; background: none; border: none; border-bottom: 2px solid transparent;
  font-size: 0.92rem; font-weight: 600; color: var(--slate); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--brass); }

.wizard-stepper { display: flex; justify-content: space-between; gap: 0.4rem; margin-top: 1rem; overflow-x: auto; }
.wizard-step-dot {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex: 1; min-width: 60px;
  cursor: pointer; opacity: 0.55;
}
.wizard-step-dot.active, .wizard-step-dot.done { opacity: 1; }
.wizard-step-num {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--slate); font-weight: 700; font-size: 0.82rem; flex-shrink: 0;
}
.wizard-step-dot.active .wizard-step-num { background: var(--brass); color: #fff; }
.wizard-step-dot.done .wizard-step-num { background: var(--sage); color: #fff; }
.wizard-step-label { font-size: 0.72rem; text-align: center; color: var(--slate); font-weight: 600; }
.wizard-step-dot.active .wizard-step-label { color: var(--ink); }

.link-inline {
  background: none; border: none; padding: 0; font: inherit; color: var(--rust);
  text-decoration: underline; cursor: pointer; font-weight: 600;
}
.row-solde-manquant { background: rgba(194,118,15,0.06); }
.row-flash { animation: flash-highlight 0.6s ease-in-out 2; }
@keyframes flash-highlight {
  0%, 100% { background: rgba(194,118,15,0.06); }
  50% { background: rgba(194,118,15,0.3); }
}

.pwa-install-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.8rem 1rem; background: var(--ink); color: var(--paper-raised);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}
.pwa-install-banner span { flex: 1; min-width: 180px; font-size: 0.85rem; }
.pwa-install-banner .btn-ghost { background: transparent; color: var(--paper-raised); border-color: rgba(247,246,241,0.4); }
@media (max-width: 640px) {
  .pwa-install-banner { padding: 0.7rem 0.8rem; }
  .pwa-install-banner span { font-size: 0.8rem; }
}

/* Alignement homogène des cases à cocher (corrige les défauts d'alignement iPhone) */
.checkbox-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.6rem 0; border-top: 1px solid rgba(28,37,48,0.06);
}
.checkbox-row:first-child { border-top: none; }
.checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px; min-height: unset; min-width: 20px; flex-shrink: 0; margin-top: 0.15rem;
  border: 1.5px solid var(--slate-light); background: var(--field-bg); border-radius: 4px; padding: 0; appearance: none; -webkit-appearance: none;
  position: relative; cursor: pointer;
}
.checkbox-row input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.checkbox-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid var(--paper-raised); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.checkbox-row label {
  margin: 0; text-transform: none; font-size: 0.92rem; font-weight: 400; color: var(--ink); line-height: 1.45; cursor: pointer;
}
.form-section { margin-top: 1.7rem; padding-top: 1.1rem; border-top: 1px solid rgba(28,37,48,0.06); }
.form-section:first-of-type { margin-top: 1.2rem; border-top: none; padding-top: 0; }

/* Cadre compact — scopé à "Informer le voisinage", n'affecte aucun autre écran */
.form-compact .field { margin-bottom: 0.75rem; }
.form-compact .field label {
  font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  margin-bottom: 0.3rem; color: var(--slate);
}
.form-compact input, .form-compact select {
  height: 48px; min-height: unset; padding: 0 0.75em; line-height: 44px;
}
.form-compact .form-section { margin-top: 1.6rem; padding-top: 0.8rem; }
.form-compact .form-subtitle {
  font-size: 0.74rem; font-weight: 600; color: var(--slate); margin: 0 0 0.35rem;
}
.form-compact .field-row-date { display: grid; grid-template-columns: 3fr 2fr; gap: 0.6rem; margin-bottom: 0.75rem; }
@media (max-width: 359px) {
  .form-compact .field-row-date { grid-template-columns: 1fr; }
}
.form-compact .modal-actions:last-child {
  padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
}
.form-section-title {
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--slate); margin-bottom: 0.6rem;
}
@media (max-width: 640px) {
  .checkbox-row { padding: 0.5rem 0; gap: 0.6rem; }
  .checkbox-row label { font-size: 0.9rem; }
}

/* =====================================================================
   CONSOLE D'ADMINISTRATION
   =====================================================================

   Même charte, autre univers. Le bordeaux n'est PAS une couleur de
   marque : il ne sert qu'à signaler l'environnement, comme le favicon.
   Il apparaît sur un badge et un filet, jamais en aplat — un bandeau
   rouge donnerait l'impression d'une alerte permanente.
   ===================================================================== */
:root {
  --env-admin: #7A2733;
  /* Le bordeaux plein tombe a 1,6:1 sur l'anthracite de la sidebar :
     illisible. Cette version eclaircie sert au texte et aux filets ;
     le bordeaux plein reste reserve aux aplats (favicon, bordure). */
  --env-admin-clair: #C98089;
}

/* ---------------------------------------------------------------------
   VERROU D'AUTORISATION

   Tant que `admin-en-attente` est present sur <html>, NI l'ecran
   d'authentification NI la coque applicative ne sont peints. La classe
   est posee synchroniquement au chargement et retiree uniquement quand
   le droit est connu.

   `visibility` plutot que `display` : la mise en page est deja calculee
   quand le verrou tombe, donc rien ne saute. Et `!important` parce que
   ce verrou doit gagner contre n'importe quelle regle d'affichage --
   c'est sa seule raison d'etre.
   --------------------------------------------------------------------- */
html.admin-en-attente #auth-screen,
html.admin-en-attente #app-shell,
html.admin-en-attente .pwa-install-banner {
  visibility: hidden !important;
}

/* Un repere discret pendant le controle : quelques dixiemes de seconde,
   mais un ecran vide sans explication inquiete. */
html.admin-en-attente body::after {
  content: 'Verification des droits…';
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--slate);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  z-index: 9998;
}

.env-admin .sidebar {
  /* Un filet, pas un aplat : on signale, on n'alarme pas. */
  border-right: 3px solid var(--env-admin);
}

/* ---------------------------------------------------------------------
   LE LOCKUP DE LA CONSOLE

   Symbole et mot sur UNE ligne, badge aligné sur la même ligne de base.
   La sous-ligne s'indente sous le MOT, pas sous le symbole : c'est ce
   décalage qui donne l'impression d'un bloc, et non de trois éléments
   posés côte à côte.

   `--lockup-decalage` porte cette indentation une seule fois — largeur
   du symbole plus l'écart. Changer la taille du symbole ne demande donc
   qu'une seule retouche.
   --------------------------------------------------------------------- */
.admin-brand {
  --symbole-taille: 22px;
  --symbole-ecart: 0.55rem;
  --lockup-decalage: calc(var(--symbole-taille) + var(--symbole-ecart));
  width: 100%;
}

.admin-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--symbole-ecart);
}

.admin-brand-symbole {
  width: var(--symbole-taille);
  height: var(--symbole-taille);
  flex-shrink: 0;
  color: var(--brass);
  /* Le carré optique du symbole s'assied un cheveu sous la ligne de
     base des capitales : ce demi-pixel le remet d'aplomb. */
  transform: translateY(-0.5px);
}
.admin-brand-symbole svg { width: 100%; height: 100%; display: block; }

.admin-brand-mot {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--paper);
}
.marque-op { color: var(--brass); }

.admin-brand-sous {
  margin-top: 0.3rem;
  padding-left: var(--lockup-decalage);
  font-size: 0.66rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--slate-light);
}

/* Le badge ne flotte pas à droite : il suit le mot, à un écart constant.
   Discret — c'est un repère d'environnement, pas une alerte. */
.badge-admin {
  margin-left: 0.1rem;
  background: transparent;
  color: var(--env-admin-clair);
  border: 1px solid var(--env-admin-clair);
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0.22rem 0.34rem;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
   L'IDENTITÉ DE L'ADMINISTRATEUR
   Séparée du lockup par un vrai blanc, pas par une bordure : deux
   filets rapprochés hachent la colonne.
   --------------------------------------------------------------------- */
.admin-identite {
  margin-top: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(238, 237, 228, 0.12);
  margin-bottom: 0.75rem;
}
.admin-identite-nom {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.25;
}
.admin-identite-mail {
  font-size: 0.71rem;
  color: var(--slate-light);
  margin-top: 0.15rem;
  /* Une adresse longue ne doit pas élargir la colonne ni déborder. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   ÉCRAN BLOQUANT

   Il remplace tout. Ni l'écran d'authentification ni la coque
   applicative ne restent derrière : un refus qui laisserait entrevoir
   l'application ne refuserait rien.
   --------------------------------------------------------------------- */
.ecran-bloquant {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); padding: 1.5rem;
}
.ecran-bloquant.hidden { display: none; }
.ecran-bloquant-carte {
  max-width: 30rem; background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 2rem;
}
.ecran-bloquant-marque {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 700; letter-spacing: 0.1em; font-size: 0.9rem;
}
.ecran-bloquant-symbole { width: 22px; height: 22px; color: var(--brass); }
.ecran-bloquant-symbole svg { width: 100%; height: 100%; display: block; }
.ecran-bloquant-carte h1 { font-size: 1.35rem; margin: 1.1rem 0 0; }

/* Le titre recoit le focus par programme, pour que le message soit
   annonce et qu'aucun bouton ne puisse etre declenche par une touche
   Entree restee enfoncee. Il n'est PAS atteignable au clavier
   (tabindex="-1"), donc le contour de focus n'informe personne : il
   donne juste au titre l'air d'un champ de saisie. */
.ecran-bloquant-carte h1:focus { outline: none; }
.ecran-bloquant-carte p {
  color: var(--slate); line-height: 1.65; margin-top: 0.7rem; font-size: 0.95rem;
}
.ecran-bloquant-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem;
}
/* Le lien est un <a> stylé en bouton : sans cela il garde son
   soulignement et sa ligne de base de texte. */
.ecran-bloquant-actions .btn { text-decoration: none; text-align: center; }


/* =====================================================================
   ENVIRONNEMENT PRO — pro.syndicop.tn

   Même charte, autre univers. Le violet n'est PAS une couleur de
   marque : il ne sert qu'à signaler l'environnement, comme le favicon
   et comme le bordeaux de la console. Un filet et un badge, jamais un
   aplat.
   ===================================================================== */
:root {
  --env-pro: #9B7FD4;
  /* Mesuré : 4,70:1 sur l'anthracite de la colonne. Contrairement au
     bordeaux, le violet n'a pas besoin d'être éclairci pour le texte. */
}

/* ---------------------------------------------------------------------
   VERROU D'AUTORISATION

   Même contrat que la console. Tant que `pro-en-attente` est présent
   sur <html>, ni l'écran d'authentification ni la coque ne sont peints.

   `visibility` plutôt que `display` : la mise en page est déjà calculée
   quand le verrou tombe, donc rien ne saute.
   --------------------------------------------------------------------- */
html.pro-en-attente #auth-screen,
html.pro-en-attente #app-shell,
html.pro-en-attente .pwa-install-banner {
  visibility: hidden !important;
}

html.pro-en-attente body::after {
  content: 'Ouverture du cockpit…';
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--slate);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  z-index: 9998;
}

.env-pro .sidebar {
  border-right: 3px solid var(--env-pro);
}

/* ---------------------------------------------------------------------
   LE LOCKUP DU CABINET

   Deux formes, selon que le cabinet a activé son co-branding.

   AVEC — le nom du cabinet passe devant, en corps de titre ; Syndicop
   passe derrière, en mention « by SYNDICOP ». C'est l'ordre juste : le
   copropriétaire connaît son syndic, pas son logiciel. Syndicop ne
   disparaît pas pour autant — ce n'est pas une marque blanche.

   SANS — le lockup Syndicop ordinaire, badge PRO, raison sociale en
   sous-ligne. Jamais un nom inventé, jamais un blanc.

   Comme sur la console, la sous-ligne s'indente sous le MOT et non sous
   le symbole : c'est ce décalage qui fait un bloc plutôt que trois
   éléments côte à côte.
   --------------------------------------------------------------------- */
.pro-brand {
  --symbole-taille: 22px;
  --symbole-ecart: 0.55rem;
  --lockup-decalage: calc(var(--symbole-taille) + var(--symbole-ecart));
  width: 100%;
}

.pro-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--symbole-ecart);
  min-width: 0;
}

.pro-brand-symbole {
  width: var(--symbole-taille);
  height: var(--symbole-taille);
  flex-shrink: 0;
  color: var(--brass);
  transform: translateY(-0.5px);
}
.pro-brand-symbole svg { width: 100%; height: 100%; display: block; }

.pro-brand-mot,
.pro-brand-cabinet {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--paper);
}

/* Le nom d'un cabinet peut être long — « Cabinet Ben Amor & Associés ».
   Il se coupe proprement au lieu de pousser le badge hors de la
   colonne. */
.pro-brand-cabinet {
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pro-brand-sous {
  margin-top: 0.3rem;
  padding-left: var(--lockup-decalage);
  font-size: 0.66rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--slate-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.badge-pro {
  background: transparent;
  color: var(--env-pro);
  border: 1px solid var(--env-pro);
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 0.22rem 0.34rem;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   L'IDENTITÉ DU COLLABORATEUR

   En pied de colonne, discrète. Elle vient de la session Supabase et de
   rien d'autre — un cabinet n'a pas forcément de ligne dans `profiles`.
   --------------------------------------------------------------------- */
.pro-identite {
  padding: 0.7rem 0 0.8rem;
  border-bottom: 1px solid rgba(238,237,228,0.10);
  margin-bottom: 0.6rem;
}
.pro-identite-nom {
  font-size: 0.86rem;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pro-identite-mail {
  font-size: 0.7rem;
  color: var(--slate-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pro-identite-role {
  margin-top: 0.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--env-pro);
}