/* ============================================================================
   app.css - Shell, composant Carte, listes, feuille basse, toasts.
   Dépend de tokens.css. Aucune couleur/dimension hors token.
   Mobile-first (référence 375 px), desktop à partir de 840 px.
   ========================================================================== */

/* --- 1. Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--barre-haute);
  padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px));
}
body:has(.vue--sans-barre) { padding-top: 0; }

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

/* L'accent client n'a que 3 usages (bouton primaire, indicateur d'onglet
   actif, logo - spec §7.6). Aucune règle générique ne le pose sur les liens :
   la règle « l'accent n'agit que sur 3 éléments » doit rester vraie même le
   jour où un lien apparaît dans un écran. */
a { color: inherit; }

:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
  border-radius: var(--r-1);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icone { width: var(--icone); height: var(--icone); display: block; flex: none; fill: none;
         stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
         stroke-linejoin: round; }
.icone--nav { width: var(--icone-nav); height: var(--icone-nav); }

/* --- 2. Shell -------------------------------------------------------------- */

/* Blanc, pas le gris de la page : sinon le logo (blanc, ci-dessous) s'y
   pose comme un bouton posé sur le bandeau au lieu de s'y fondre. */
.barre-haute {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--barre-haute);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--gouttiere);
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
}
.barre-haute[hidden] { display: none; }

/* Usage n°3 de l'accent : le logo. Aucun fond propre : le bandeau qui le
   porte (`.barre-haute`, `.nav__logo`) est déjà blanc - un fond ici
   dessinerait un bouton là où tout doit rester d'un seul blanc. */
.logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-corps); font-weight: var(--gras-titre);
  letter-spacing: -.01em; color: var(--encre);
  text-decoration: none;
}
/* Le logo est cliquable, mais reste tel quel au survol : sur un PNG en
   `multiply` (ci-dessous), baisser l'opacité l'éclaircit vers le fond au
   lieu de l'assombrir - il paraît grisé plutôt qu'atténué. Aucun retour
   visuel n'est donc peint ici. */
/* Le logo client est un PNG SANS transparence : sur le blanc du bandeau,
   son propre fond blanc disparaît de lui-même (blanc x blanc = blanc) -
   `multiply` n'a plus qu'à laisser le tracé sombre intact, sans retoucher
   l'image du client. Il reste utile si un client fournit un logo sur fond
   non blanc, ou si le bandeau qui le porte change un jour de couleur. */
.logo__img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.logo__marque {
  width: var(--icone-appui); height: var(--icone-appui); flex: none;
  border-radius: var(--r-1);
  background: var(--accent); color: var(--accent-encre);
  display: grid; place-items: center;
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  letter-spacing: 0;
}
.logo__marque--mot {
  width: auto;
  padding: 0 var(--sp-2);
  letter-spacing: .06em;
}

.barre-haute__titre {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: var(--fs-titre); font-weight: var(--gras-titre);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.avatar {
  width: var(--cible); height: var(--cible); flex: none;
  margin-left: auto;
  display: grid; place-items: center; border-radius: var(--r-pill);
}
.avatar__pastille {
  width: var(--avatar); height: var(--avatar); border-radius: var(--r-pill);
  background: var(--surface-appui); color: var(--encre);
  display: grid; place-items: center;
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  border: 1px solid var(--ligne);
}
.avatar:hover .avatar__pastille { background: var(--ligne); }

/* Bouton retour (vues détail / sous-vues) : remplace le logo à gauche. */
.retour {
  width: var(--cible); height: var(--cible); margin-left: calc(var(--sp-2) * -1);
  display: grid; place-items: center; color: var(--encre); flex: none;
}
.retour:hover { background: var(--surface-appui); border-radius: var(--r-pill); }

/* Barre basse mobile */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex;
  height: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--ligne);
}

/* Le logo n'existe que dans le menu vertical desktop. */
.nav__logo { display: none; }

.nav__item {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--sp-1) 2px;
  color: var(--encre-douce);
  text-decoration: none;
}
.nav__item:hover { color: var(--encre); }

.nav__icone { position: relative; display: block; }

.nav__label {
  font-size: var(--fs-meta); line-height: 1;
  font-weight: var(--gras-corps); letter-spacing: -.015em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Usage n°2 de l'accent : l'indicateur d'onglet actif. */
.nav__item[aria-current="page"] { color: var(--accent); }
.nav__item[aria-current="page"] .nav__label { font-weight: var(--gras-titre); }
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--indicateur); height: 3px; border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: var(--accent);
}

/* Entrée SECONDAIRE (le Chat) - séparée des onglets de travail par un filet.
   Le filet est un nœud à part et non une bordure posée sur l'entrée : une
   bordure gauche se serait confondue, sur la barre basse, avec l'indicateur
   d'onglet actif. Il ne porte aucun texte, n'est pas atteignable au clavier et
   reste `aria-hidden` - il sépare, il ne commande pas.
   Mobile : trait vertical de la hauteur d'une icône, centré dans la barre. */
.nav__filet {
  flex: none; align-self: center;
  width: 1px; height: var(--icone-nav);
  margin: 0 var(--sp-1);
  background: var(--ligne);
}

/* L'entrée secondaire garde le contraste des autres : l'atténuer la ferait
   passer sous 4,5:1 pour un gain de hiérarchie déjà obtenu par le filet. */

/* Onglet en préparation (état V2) : atténué, jamais cassé.
   L'opacité ne porte que sur l'ICÔNE (spec §3 : « icône à 40 % d'opacité »).
   Le libellé et la pastille « V2 » gardent leur contraste plein : atténués
   avec le reste, ils tombaient à 1,84:1 et 1,96:1, sous le seuil de 4,5:1. */
.nav__item--v2 .icone { opacity: .4; }
.nav__item--v2:hover .icone,
.nav__item--v2:focus-visible .icone { opacity: .7; }

/* Pastille numérique 18 px ancrée sur l'icône - jamais masquée. */
.pastille {
  position: absolute; top: -6px; left: 50%; margin-left: 4px;
  min-width: var(--pastille); height: var(--pastille); padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--danger-encre); color: var(--surface);
  font-size: var(--fs-meta); line-height: var(--pastille); font-weight: var(--gras-titre);
  text-align: center; letter-spacing: -.02em;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}
/* Dernier onglet : la pastille s'ancre à DROITE de son icône. Ancrée au
   centre comme les autres, la plus large (« V2 ») sortait de l'écran -
   mesurée rognée de 4 px à 320 px, et à 1,5 px du bord à 375 px. */
.nav__pied {
  display: contents;
}
.nav__deconnexion {
  display: none;
  color: var(--encre-douce);
  font-size: var(--fs-meta);
  text-decoration: none;
}
.nav__deconnexion:hover { color: var(--encre); text-decoration: underline; }
.pastille[hidden] { display: none; }
.pastille--texte {
  background: var(--neutre-fond); color: var(--neutre-encre);
  border-color: var(--surface); letter-spacing: 0;
}

/* --- 3. Vue & colonne ------------------------------------------------------ */

.vue { display: block; }

.colonne {
  width: 100%; max-width: var(--colonne-max); margin: 0 auto;
  padding: var(--sp-3) var(--gouttiere) var(--sp-8);
}

.section-titre {
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--encre-douce);
  margin: var(--sp-5) 0 var(--sp-2);
}
.section-titre:first-child { margin-top: 0; }

/* --- 4. Bandeau (en-tête d'écran non-carte) -------------------------------- */

.bandeau {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-3) var(--carte-pad);
  margin-bottom: var(--carte-gap);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--ligne-forte);
  border-radius: var(--r-2);
  color: var(--encre);
}
.bandeau--cliquable:hover { background: var(--surface-creuse); }
.bandeau__corps { flex: 1 1 auto; min-width: 0; }
.bandeau__titre {
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  letter-spacing: .03em; text-transform: uppercase; color: var(--encre-douce);
}
.bandeau__texte {
  font-size: var(--fs-corps); line-height: 1.3;
}
.bandeau__texte strong { font-weight: var(--gras-titre); }
.bandeau__note {
  display: block; margin-top: 2px;
  font-size: var(--fs-meta); line-height: 1.3; color: var(--encre-douce);
}
.bandeau__chevron { color: var(--encre-douce); flex: none; }

/* --- 5. Puces d'état ------------------------------------------------------- */

.puce {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: var(--pastille); padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta); line-height: 1; font-weight: var(--gras-titre);
  letter-spacing: -.005em; white-space: nowrap;
  background: var(--neutre-fond); color: var(--neutre-encre);
}
.puce--danger  { background: var(--danger-fond);  color: var(--danger-encre); }
.puce--alerte  { background: var(--alerte-fond);  color: var(--alerte-encre); }
.puce--succes  { background: var(--succes-fond);  color: var(--succes-encre); }
.puce--info    { background: var(--info-fond);    color: var(--info-encre); }
.puce--meta    {
  background: none; color: var(--encre-douce); padding: 0;
  font-weight: var(--gras-corps);
}
.puce__point {
  width: var(--sp-serre); height: var(--sp-serre); border-radius: var(--r-pill);
  background: currentColor; flex: none;
}

/* --- 6. Boutons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--cible); padding: 0 var(--sp-4);
  border-radius: var(--r-2);
  font-size: var(--fs-corps); font-weight: var(--gras-titre);
  letter-spacing: -.005em;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--ligne-forte);
  transition: background var(--duree-1) var(--courbe);
}
.btn:hover { background: var(--surface-appui); }
.btn:active { background: var(--ligne); }

/* Usage n°1 de l'accent : le bouton primaire. */
.btn--primaire {
  background: var(--accent); color: var(--accent-encre);
  border-color: var(--accent);
}
.btn--primaire:hover { background: var(--accent-appui); border-color: var(--accent-appui); }
.btn--primaire:active { background: var(--accent-appui); }

.btn--pleine { width: 100%; }
.btn--discret { background: none; border-color: transparent; color: var(--encre-douce); }
.btn--discret:hover { background: var(--surface-appui); color: var(--encre); }
.btn--danger { color: var(--danger-encre); }

.btn[disabled],
.btn.est-envoi {
  cursor: wait;
  opacity: .88;
  pointer-events: none;
}
.btn__spinner {
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loader-spin .75s linear infinite;
}
.btn svg[hidden] { display: none; }

.btn-icone {
  width: var(--cible); height: var(--cible); flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  color: var(--encre-douce);
  border: 1px solid var(--ligne-forte);
  background: var(--surface);
}
.btn-icone:hover { background: var(--surface-appui); color: var(--encre); }

.btn-icone--danger {
  background: none;
  border-color: transparent;
  color: var(--danger-encre);
}
.btn-icone--danger:hover {
  background: var(--danger-fond);
  color: var(--danger-encre);
}
.barre-outils > .btn-icone--danger { margin-left: auto; }

/* --- 7. LE COMPOSANT CARTE ------------------------------------------------- */

.carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

/* Zone de tap : titre + corps. La carte n'est JAMAIS cliquable en bloc.
   C'est un `div[role=button]` (voir core.js) : le curseur et le survol, que
   `<button>` donnait gratuitement, sont posés ici - et seulement quand la
   zone ouvre réellement quelque chose. */
.carte__tap {
  display: block; width: 100%; text-align: left;
  padding: var(--carte-pad) var(--carte-pad) 0;
  background: none; color: inherit;
}
.carte__tap[role="button"] { cursor: pointer; }
.carte__tap[role="button"]:hover { background: var(--surface-creuse); }

/* Sans rangée d'actions, le padding bas de la carte vit sur la zone de tap
   (sinon les puces collent au bord). Avec actions, c'est `.carte__actions`
   qui porte ce budget. */
.carte:not(:has(.carte__actions)) .carte__tap {
  padding-bottom: var(--carte-pad);
}

.carte__supprimer { position: absolute; top: 4px; right: 4px; z-index: 1; }
.carte--avec-retrait .carte__tap { padding-right: calc(var(--cible) + var(--sp-1)); }

.carte__entete {
  display: flex; align-items: flex-start; gap: var(--sp-2);
}
.carte__titre {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-titre); line-height: 1.25;
  font-weight: var(--gras-titre); letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte__titre-action { flex: none; margin-left: auto; }
.carte__chevron { color: var(--ligne-forte); flex: none; margin-top: 1px; }

.carte__etats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1);
}

/* Ligne « pourquoi » : constat factuel, 2 lignes max, jamais sous 13 px. */
.carte__pourquoi {
  display: flex; align-items: flex-start; gap: var(--sp-1);
  margin-top: var(--sp-serre);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  background: var(--surface-creuse);
  border-left: 2px solid var(--ligne-forte);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}
.carte__pourquoi-texte {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta); line-height: 1.35;
  color: var(--encre-douce);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 👎 : 44x44 réel, mais neutralisé en hauteur de flux pour tenir le budget.
   Opacité 0,75 et non 0,6 : à 0,6 le pictogramme tombait à 2,6:1 sur la
   surface creuse de la ligne « pourquoi », sous le seuil de 3:1 des objets
   non textuels. À 0,75 il est mesuré à 3,3:1 et reste discret. */
.btn-pouce {
  width: var(--cible); height: var(--cible); flex: none;
  margin: -13px -10px -13px 0;
  display: grid; place-items: center;
  color: var(--encre-douce); opacity: .75;
  border-radius: var(--r-1);
  transition: opacity var(--duree-1) var(--courbe);
}
.btn-pouce:hover { opacity: 1; background: var(--surface-appui); }
.btn-pouce[aria-pressed="true"] {
  opacity: 1; color: var(--danger-encre); background: var(--danger-fond);
}

/* Corps injecté : 2 à 4 champs, densité maximale. */
.carte__corps { margin-top: var(--sp-serre); }

/* `minmax(0, 1fr)` et non `auto` : sans borne basse, la piste se dimensionne
   sur le contenu, `text-overflow: ellipsis` de `.champ__valeur` ne se
   déclenche jamais et les valeurs longues sont coupées en plein mot (mesuré
   jusqu'à 41 px hors carte à 320 px, et déjà dans le padding à 375 px). */
.champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.champ {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-meta); line-height: 1.3;
}
.champ__label {
  flex: none; width: var(--champ-label); color: var(--encre-douce);
}
.champ__valeur {
  flex: 1 1 auto; min-width: 0; color: var(--encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte--detail .champ__valeur { white-space: normal; }

/* Citation sourcée - typographiquement distincte des critères structurés. */
.citation {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--info-fond);
  border-radius: var(--r-1);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  color: var(--info-encre);
}
.citation__texte { font-style: italic; }
.citation__source {
  display: block; margin-top: 2px; font-style: normal;
  color: var(--info-encre); opacity: .85;
}
/* Le lien de source est une CIBLE TACTILE (44 px), partout et pas seulement
   dans les deux écrans qui posaient la règle chez eux. La compensation par
   marges négatives lui rend sa hauteur de texte dans le flux : la densité de
   la carte est inchangée. */
.citation__lien {
  display: inline-flex; align-items: center;
  min-height: var(--cible);
  margin: calc(var(--sp-3) * -1) calc(var(--sp-2) * -1);
  padding: 0 var(--sp-2);
  border-radius: var(--r-1);
  color: var(--info-encre); text-underline-offset: 2px;
}

/* Réserve explicite (« à vérifier ») */
.reserve {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--alerte-fond); color: var(--alerte-encre);
  border-radius: var(--r-1);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}

/* Rangée d'actions : primaire pleine largeur + ⋯ */
.carte__actions {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--carte-pad) var(--carte-pad);
}
.carte__actions .btn--primaire { flex: 1 1 auto; min-width: 0; }
.carte__actions .btn--primaire > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chip de report */
.carte__chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--carte-pad);
  background: var(--alerte-fond); color: var(--alerte-encre);
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  border-bottom: 1px solid var(--ligne);
}

/* --- 7b. Variantes --------------------------------------------------------- */

/* LISTE (par défaut) : rien de plus. */

/* COMPACTE (chat) : 96–112 px, titre + pourquoi 1 ligne + primaire seule.
   Les trois paddings ci-dessous sont le budget : mesurée à 120,5 px avec
   --sp-3 en haut et en bas, la carte tient à 110 px avec --sp-2. */
.carte--compacte .carte__tap { padding: var(--sp-2) var(--sp-3) 0; }
.carte--compacte .carte__pourquoi {
  margin-top: 2px;
  padding: 0 0 0 var(--sp-2);
  background: none; border-radius: 0;
}
.carte--compacte .carte__pourquoi-texte { -webkit-line-clamp: 1; }
.carte--compacte .btn-pouce { display: none; }
.carte--compacte .carte__corps { display: none; }
.carte--compacte .carte__etats { display: none; }
.carte--compacte .carte__actions { padding: var(--sp-2) var(--sp-3); }
.carte--compacte .btn { min-height: var(--cible); }

/* DÉTAIL (plein écran) : 4 actions à plat, primaire collée en bas. */
.carte--detail {
  border: 0; border-radius: 0; box-shadow: none; background: none;
}
.carte--detail .carte__tap { padding: 0; }
.carte--detail .carte__tap:hover { background: none; }
.carte--detail .carte__chevron { display: none; }
.carte--detail .carte__titre { white-space: normal; }
.carte--detail .carte__pourquoi {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--ligne-forte);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  margin-top: var(--sp-3);
}
.carte--detail .carte__pourquoi-texte { -webkit-line-clamp: none; display: block; }
.carte--detail .carte__corps {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--carte-pad);
  background: var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r-2);
}
.carte--detail .champs { gap: var(--sp-1); }
.carte--detail .champ { line-height: var(--lh-meta); }
.carte--detail .carte__pourquoi { padding: var(--sp-2) var(--sp-3); }
.carte--detail .carte__pourquoi-texte { line-height: var(--lh-meta); }
.carte--detail .btn-pouce { margin: -10px -10px -10px 0; }

.detail__secondaires {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-4);
}
.detail__secondaires .btn {
  flex: 1 1 0; min-width: 0;
  flex-direction: column; gap: var(--sp-1);
  min-height: var(--secondaire-h); padding: var(--sp-2) var(--sp-1);
}
.detail__secondaires .btn > span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.detail__sticky {
  position: sticky; z-index: 20;
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
}
.detail__sticky--double {
  display: flex; gap: var(--sp-2);
}
.detail__sticky--double > .btn { flex: 1 1 0; min-width: 0; }
@media (max-width: 320px) {
  .detail__sticky--double { flex-direction: column; }
}
.detail__sticky::before {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--gouttiere) * -1); right: calc(var(--gouttiere) * -1);
  top: calc(var(--sp-6) * -1); bottom: calc(var(--sp-6) * -1);
  background: linear-gradient(to bottom, transparent, var(--papier) 45%);
  pointer-events: none;
}

/* --- 7c. États post-action ------------------------------------------------- */

.carte--sortie {
  overflow: hidden;
  transition: height var(--duree-3) var(--courbe),
              opacity var(--duree-2) var(--courbe),
              margin var(--duree-3) var(--courbe);
}
.carte--sortie.est-sortie {
  height: 0 !important; opacity: 0;
  margin-top: calc(var(--carte-gap) * -1) !important;
  margin-bottom: 0 !important;
}

/* Traitée → une seule ligne « ✓ … · Annuler » (jamais de texte barré). */
.carte--traitee {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--carte-pad);
  background: var(--succes-fond);
  border-color: var(--succes-fond);
  box-shadow: none;
}
.carte__resume {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  color: var(--succes-encre);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte__resume-marque { font-weight: var(--gras-titre); }
.lien-annuler {
  flex: none; min-height: var(--cible); padding: 0 var(--sp-2);
  display: inline-flex; align-items: center;
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  color: var(--succes-encre); text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reportée → en fin de liste, atténuée.
   L'atténuation porte sur le CHROME, jamais sur le texte. `opacity: .55` sur
   toute la carte donnait un titre à 4,00:1, une ligne « pourquoi » à 2,35:1,
   un chip à 2,57:1 et un bouton primaire à 1,89:1 - très loin des 4,5:1
   exigés. Le signal reste le même (carte en retrait, poussée en fin de file,
   primaire dégradée en secondaire), la lecture redevient possible. */
.carte--reportee {
  background: var(--surface-creuse);
  border-color: var(--ligne);
  box-shadow: none;
}
.carte--reportee .carte__titre { color: var(--encre-douce); font-weight: var(--gras-corps); }
.carte--reportee .carte__pourquoi { background: var(--surface); }
.carte--reportee .carte__chevron { opacity: .55; }
.carte--reportee .btn--primaire {
  background: var(--surface-appui);
  border-color: var(--ligne);
  color: var(--encre);
}
.carte--reportee .btn--primaire:hover { background: var(--ligne); }
.carte--reportee:hover, .carte--reportee:focus-within { background: var(--surface); }
.carte--reportee:hover .carte__titre,
.carte--reportee:focus-within .carte__titre { color: var(--encre); }

/* --- 8. Liste & états vides ------------------------------------------------ */

.liste { display: flex; flex-direction: column; gap: var(--carte-gap); }

.etat-vide {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
}
.etat-vide__marque {
  width: var(--marque); height: var(--marque); margin: 0 auto var(--sp-3);
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--succes-fond); color: var(--succes-encre);
}
.etat-vide__marque--attente { background: var(--neutre-fond); color: var(--neutre-encre); }
.etat-vide__titre {
  font-size: var(--fs-titre); font-weight: var(--gras-titre);
  letter-spacing: -.012em;
}
.etat-vide__texte {
  margin-top: var(--sp-2);
  font-size: var(--fs-corps); color: var(--encre-douce);
  max-width: 34ch; margin-left: auto; margin-right: auto;
}
.etat-vide__pied { margin-top: var(--sp-4); }

/* --- 9. Champs de formulaire ---------------------------------------------- */

.champ-saisie {
  display: block; width: 100%;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-1);
  font-size: var(--fs-corps); line-height: var(--lh-corps);
  color: var(--encre);
  resize: vertical;
}
.champ-saisie:focus-visible { border-color: var(--encre); }
.champ-legende {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--fs-meta); font-weight: var(--gras-titre); color: var(--encre-douce);
}
.champ-aide {
  margin-top: var(--sp-1);
  font-size: var(--fs-meta); color: var(--encre-douce);
}

/* Choix radio en pastilles (motifs, report) */
.choix { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choix__option { position: relative; }
.choix__option input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.choix__etiquette {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible); padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--ligne-forte);
  background: var(--surface);
  font-size: var(--fs-corps); font-weight: var(--gras-titre);
}
.choix__option input:checked + .choix__etiquette {
  background: var(--encre); color: var(--surface); border-color: var(--encre);
}
.choix__option input:focus-visible + .choix__etiquette {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: var(--focus-ecart);
}

/* --- 10. Feuille basse (bottom-sheet) -------------------------------------- */

.voile {
  position: fixed; inset: 0; z-index: 60;
  background: var(--voile);
  display: flex; align-items: flex-end; justify-content: center;
  animation: voile-entre var(--duree-2) var(--courbe);
}
@keyframes voile-entre { from { opacity: 0; } }

.feuille {
  width: 100%; max-width: var(--feuille-max);
  max-height: 86vh; overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-3) var(--r-3) 0 0;
  box-shadow: var(--ombre-2);
  padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  animation: feuille-entre var(--duree-3) var(--courbe);
}
@keyframes feuille-entre { from { transform: translateY(var(--sp-4)); opacity: 0; } }

.feuille__poignee {
  width: var(--poignee); height: 4px; margin: var(--sp-2) auto var(--sp-1);
  border-radius: var(--r-pill); background: var(--ligne);
}
.feuille__entete { padding: var(--sp-2) var(--gouttiere) var(--sp-3); }
.feuille__titre {
  font-size: var(--fs-titre); font-weight: var(--gras-titre); letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feuille__sous-titre {
  margin-top: 2px; font-size: var(--fs-meta); color: var(--encre-douce);
}
.feuille__corps { padding: 0 var(--gouttiere) var(--sp-3); }
.feuille__pied { padding: var(--sp-2) var(--gouttiere) var(--sp-2); }

.feuille__action {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--cible);
  padding: var(--sp-3) var(--gouttiere);
  text-align: left; font-size: var(--fs-corps); font-weight: var(--gras-appui);
  border-top: 1px solid var(--ligne);
  color: var(--encre);
}
.feuille__action:hover { background: var(--surface-creuse); }
.feuille__action--danger { color: var(--danger-encre); }
.feuille__action__icone { color: var(--encre-douce); flex: none; }
.feuille__action--danger .feuille__action__icone { color: var(--danger-encre); }
.feuille__action__corps { flex: 1 1 auto; min-width: 0; }
.feuille__action__aide {
  display: block; font-size: var(--fs-meta); font-weight: var(--gras-corps);
  color: var(--encre-douce);
}
.feuille__action[aria-checked="true"] .feuille__action__corps::after {
  content: " ✓"; font-weight: var(--gras-titre);
}

/* Placeholder photo (image manquante ou cassée) - dessin fil de fer. */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--surface-creuse);
  color: var(--ligne-forte);
}
.photo-placeholder__dessin {
  width: 48%;
  max-width: 9rem;
  height: auto;
  fill: currentColor;
}

/* --- 11. Toasts ------------------------------------------------------------ */

.toasts {
  position: fixed; z-index: 70;
  left: 0; right: 0;
  bottom: calc(var(--barre-basse) + var(--sp-2) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: 0 var(--gouttiere);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 100%; max-width: var(--toast-max);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
  background: var(--encre); color: var(--surface);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-2);
  animation: toast-entre var(--duree-2) var(--courbe);
}
@keyframes toast-entre { from { transform: translateY(var(--sp-2)); opacity: 0; } }
.toast.est-sortie { opacity: 0; transition: opacity var(--duree-2) var(--courbe); }

.toast__texte {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  padding: var(--sp-2) 0;
}
.toast__annuler {
  flex: none; min-height: var(--cible); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center;
  border-radius: var(--r-1);
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  color: var(--surface); text-decoration: underline; text-underline-offset: 3px;
}
.toast__annuler:hover { background: var(--voile-clair); }
.toast__annuler:focus-visible { outline-color: var(--surface); }

/* --- 12. Écran en préparation (garde-fou anti cul-de-sac) ------------------ */

.en-preparation {
  padding: var(--sp-8) var(--sp-5); text-align: center;
  background: var(--surface); border: 1px dashed var(--ligne-forte);
  border-radius: var(--r-2); color: var(--encre-douce);
  font-size: var(--fs-corps);
}

/* --- 13. Desktop (>= 840 px) : menu vertical, colonne confortable --------- */

@media (min-width: 840px) {
  body {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--nav-large);
  }

  .barre-haute {
    left: var(--nav-large);
    padding-left: var(--sp-6);
    background: var(--papier);
    border-bottom-color: transparent;
  }
  .barre-haute .logo { display: none; }
  .barre-haute__titre {
    text-align: left; font-size: var(--fs-titre);
  }
  .barre-haute .retour { margin-left: calc(var(--sp-4) * -1); }

  .nav {
    inset: 0 auto 0 0;
    width: var(--nav-large);
    height: 100%;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-4) var(--sp-3);
    border-top: 0; border-right: 1px solid var(--ligne);
  }
  /* Le logo tient TOUTE la largeur de la colonne : les marges négatives
     annulent le padding de `.nav`, pour que l'aplat aille d'un bord à
     l'autre au lieu de flotter en encadré. */
  .nav__logo {
    display: flex;
    justify-content: center;
    align-self: stretch;
    margin: calc(var(--sp-4) * -1) calc(var(--sp-3) * -1) var(--sp-5);
    padding: var(--sp-4) var(--sp-3);
    /* `.nav` (ci-dessus) est déjà blanc : pas de fond propre ici, pour la
       même raison qu'au bandeau haut - un fond dessinerait un bouton. Pas de
       filet non plus sous le logo : rien ne doit séparer visuellement le
       logo des onglets, tout est le même blanc d'un seul tenant. */
  }
  .nav__logo .logo__img { height: 60px; }

  /* Menu vertical : le filet devient une règle horizontale pleine largeur. */
  .nav__filet {
    align-self: stretch;
    width: auto; height: 1px;
    margin: var(--sp-3) var(--sp-2);
  }

  .nav__item {
    flex: none;
    flex-direction: row; justify-content: flex-start;
    gap: var(--sp-3);
    min-height: var(--cible);
    padding: 0 var(--sp-3);
    border-radius: var(--r-2);
  }
  .nav__item:hover { background: var(--surface-appui); }
  .nav__item[aria-current="page"] { background: var(--accent-voile); }
  .nav__item[aria-current="page"]::before {
    top: 50%; left: 0; transform: translateY(-50%);
    width: 3px; height: var(--icone-nav); margin: 0;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
  }
  .nav__label {
    flex: 1 1 auto; font-size: var(--fs-corps); letter-spacing: -.005em;
  }
  .nav__item[aria-current="page"] .nav__label { font-weight: var(--gras-titre); }

  .pastille {
    position: static; margin: 0; border: 0;
    padding: 0 5px; box-sizing: border-box;
  }
  .nav__icone .pastille {
    position: absolute; top: -7px; left: auto; right: -7px; margin: 0;
    border: 2px solid var(--papier); box-sizing: content-box;
  }
  .nav__item[aria-current="page"] .nav__icone .pastille { border-color: var(--accent-voile); }
  .nav__item:hover .nav__icone .pastille { border-color: var(--surface-appui); }

  .nav__pied {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-top: auto;
    padding: var(--sp-2) var(--sp-3) var(--sp-2);
  }
  .nav__pied .nav__item {
    width: 100%;
  }
  .nav__deconnexion {
    display: block;
    padding: var(--sp-2) var(--sp-3);
  }

  .colonne {
    padding: calc(var(--barre-haute) + var(--sp-2)) var(--sp-6) var(--sp-12);
    margin-left: 0;
  }
  .vue--sans-barre .colonne {
    padding-top: var(--sp-3);
  }

  .toasts {
    left: var(--nav-large); right: auto;
    bottom: var(--sp-5);
    align-items: flex-start;
    padding-left: var(--sp-6);
  }
  .toast { --toast-max: 440px; }

  .voile { align-items: center; padding: var(--sp-5); }
  .feuille {
    border-radius: var(--r-3);
    padding-bottom: var(--sp-2);
    max-height: 78vh;
  }

  .detail__sticky { bottom: var(--sp-5); }
}

/* --- 14. Écran Relances : biens joints, barre d'outils, encart manager ----- */

/* ===========================================================================
   SÉLECTEUR DE SOUS-VUE - « Ma recherche / Ma chasse », « Biens → acquéreurs / Acquéreurs → biens ».

   Deux états du même écran, pas deux onglets du menu. Le compteur de chaque
   segment rend visible ce que la bascule change - et ce qu'une action
   transfère d'un côté à l'autre.

   Composant PARTAGÉ (`ui.sousVue`) : il sert la Chasse et le Rapprochement.
   Aucun écran ne redéclare ces règles.
   ======================================================================== */

.sous-vue {
  display: flex;
  gap: var(--sp-serre);
  padding: var(--sp-serre);
  margin-bottom: var(--sp-3);
  background: var(--surface-creuse);
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
}
.sous-vue__choix {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--cible);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  /* Un libellé long (« Acquéreurs → biens ») passe à la ligne : sans cela, sa
     largeur minimale pousse la page en débordement horizontal à 375 px, ce
     qu'aucun écran ne s'autorise. Le socle ne peut pas supposer que tous les
     clients auront des libellés courts. */
  white-space: normal; text-align: center; line-height: 1.25;
  padding: var(--sp-1) var(--sp-2);
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--encre-douce);
  font: inherit; font-size: var(--fs-meta); font-weight: var(--gras-appui);
  cursor: pointer;
  transition: background var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe);
}
.sous-vue__choix:hover { color: var(--encre); }
/* `--accent-encre` vaut #FFFFFF : c'est l'encre POSÉE SUR l'accent, pas une
   couleur de texte. Sur le fond blanc du segment actif, le libellé
   (« Ma recherche ») devenait blanc sur blanc - invisible, et hors contraste. */
.sous-vue__choix.est-actif {
  background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1);
}
.sous-vue__choix:focus-visible {
  outline: var(--focus-largeur) solid var(--focus);
  outline-offset: calc(var(--focus-ecart) * -1);
}
.sous-vue__compte {
  min-width: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--ligne); color: var(--encre);
  font-variant-numeric: tabular-nums; font-size: var(--fs-meta);
}
.sous-vue__choix.est-actif .sous-vue__compte {
  background: var(--accent); color: #FFF;
}

/* Un champ sans valeur : gris, en italique, jamais confondu avec une donnée.
   Il reste lisible (4,6:1) - c'est une information, pas un décor. */
.champ__valeur--manquant { color: var(--encre-douce); font-style: italic; }

.barre-outils {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--carte-gap);
}

.encart-manager {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--carte-pad);
  margin-bottom: var(--carte-gap);
  background: var(--info-fond); color: var(--info-encre);
  border-radius: var(--r-2);
}
.encart-manager__texte {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
}
.encart-manager .btn {
  flex: none; background: var(--surface); color: var(--info-encre);
  border-color: var(--surface);
}
.encart-manager .btn:hover { background: var(--surface); border-color: var(--info-encre); }

.detail-relance { display: block; }
.detail-relance .section-titre:first-child { margin-top: var(--sp-4); }

.biens { display: grid; gap: var(--sp-2); }
.bien {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-creuse);
  border-radius: var(--r-1);
}
.bien__ref {
  flex: none;
  font-family: var(--police-chiffres);
  font-size: var(--fs-meta); font-weight: var(--gras-titre);
  color: var(--encre-douce);
}
.bien__corps { flex: 1 1 auto; min-width: 0; }
.bien__libelle {
  display: block;
  font-size: var(--fs-meta); font-weight: var(--gras-titre); color: var(--encre);
}
.bien__detail {
  display: block; margin-top: 1px;
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--encre-douce);
}

/* --- 15. Garde-fou 320 px -------------------------------------------------- */

@media (max-width: 359px) {
  :root { --gouttiere: 12px; }
  .nav__label { letter-spacing: -.03em; }
  :root { --champ-label: 92px; }
  /* 4 onglets + filet + entrée secondaire à 320 px : le filet rend ses marges
     à la largeur des libellés (calage fin, pas une valeur d'échelle). */
  .nav__filet { margin: 0 2px; }
}

/* Colonne élargie - demandée par les écrans dont le contenu est un BLOC
   (photo + détails + actions) et non une carte de file. 640 px y laisseraient
   ~150 px à la colonne du milieu : illisible. */
.colonne--large { max-width: 1180px; }

.colonne--tableau { max-width: 960px; }

.brouillon__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
}
.brouillon__tete .section-titre { margin: 0; }
.brouillon__copier { margin-right: calc(var(--sp-4) * -1); }

.suivi-reglage-groupe { margin: 0 0 var(--sp-6); padding: 0; border: 0; }
.suivi-reglage-groupe legend { padding: 0; }
.suivi-reglage-groupe > .champ-aide { margin: var(--sp-1) 0 var(--sp-5); }

.suivi-reglage { margin-bottom: var(--sp-4); cursor: default; }
.suivi-reglage__ligne {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2); margin-top: var(--sp-1);
}
.suivi-reglage__champ { width: 5.5rem; flex: 0 0 auto; }
.suivi-reglage__unite {
  font-size: var(--fs-meta); color: var(--encre-douce);
  white-space: nowrap;
}
.suivi-reglage__aide { margin-top: var(--sp-1); }
.suivi-reglage__aide--erreur { color: var(--danger-encre); }

@media (min-width: 560px) {
  .suivi-reglage {
    display: grid;
    grid-template-columns: var(--reglage-label) 1fr;
    align-items: baseline;
    column-gap: var(--sp-3);
  }
  .suivi-reglage__ligne { margin-top: 0; }
  .suivi-reglage__aide { grid-column: 2; }
}

.suivi-reglage__champ::-webkit-outer-spin-button,
.suivi-reglage__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.suivi-reglage__champ { -moz-appearance: textfield; }

.suivi-reglage__effet {
  position: sticky; bottom: 0;
  margin: var(--sp-4) calc(var(--gouttiere) * -1) 0;
  padding: var(--sp-3) var(--gouttiere);
  background: var(--surface);
  border-top: 1px solid var(--ligne);
  font-size: var(--fs-meta); color: var(--encre);
  font-variant-numeric: tabular-nums;
}

.equipe--suivi .equipe__taux {
  position: sticky; right: 0;
  background: var(--surface);
  border-left: 1px solid var(--ligne);
}
.equipe--suivi thead .equipe__taux,
.equipe--suivi tfoot .equipe__taux { background: var(--surface-creuse); }

/* --- Loader de démarrage --------------------------------------------------- */

#agent-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  transition: opacity var(--duree-3) var(--courbe);
}
#agent-loader.agent-loader--out {
  opacity: 0;
  pointer-events: none;
}
.agent-loader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ligne);
  border-top-color: #047a59;
  border-radius: 50%;
  animation: loader-spin .75s linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}