/* Les deux polices sont servies depuis ce domaine, comme sur les pages
   publiques (constat 76). Ici l'enjeu n'est pas la nLPD, les deux comptes sont
   des employes de l'agence, mais deux connexions tierces bloquantes de moins
   avant le premier affichage, et un CRM qui fonctionne sans reseau sortant. */
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/polices/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Figtree'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/polices/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/polices/caprasimo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Caprasimo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/polices/caprasimo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* CRM Wayne - palette bleus vifs sur fond bleu-gris clair : cobalt pour les
   actions et l'etat actif, turquoise comme seconde voix. Les jetons ci-dessous
   sont la source de verite : ne jamais coder une couleur en dur ailleurs. */
:root {
  --color-bg: #eef2f8;
  --color-surface: #dde6f3;
  --color-text: #10182a;
  --color-accent: #2563eb;          /* cobalt */
  --color-accent-2: #0e9aa7;        /* turquoise */
  --color-divider: color-mix(in srgb, #10182a 14%, transparent);
  --color-sombre: #0a3f5c;          /* blocs sombres, texte en neutral-100 */

  --color-neutral-100: #f8fafd;
  --color-neutral-200: #e7edf6;
  --color-neutral-300: #d0dae8;
  --color-neutral-400: #a8b6cb;
  --color-neutral-500: #8493ab;
  /* Constat 46 : #66748c sur --color-surface donnait 3,76:1, sous le seuil AA
     de 4,5. Ce jeton porte tous les textes secondaires de l'application, dont
     les libelles de formulaire. #59667e donne 4,60:1 sur la surface la plus
     sombre et 5,54:1 sur la plus claire, sans changer la teinte. */
  --color-neutral-600: #59667e;
  --color-neutral-700: #4c5871;
  --color-neutral-800: #313c53;
  --color-neutral-900: #1b2438;

  --color-accent-100: #eaf1ff;
  --color-accent-200: #d3e2ff;
  --color-accent-300: #a9c6ff;
  --color-accent-400: #6f9dfb;
  --color-accent-500: #2563eb;
  --color-accent-600: #1a4fcc;
  --color-accent-700: #143da3;
  --color-accent-800: #102d78;
  --color-accent-900: #0c1f52;

  --color-accent-2-100: #e3fbfb;
  --color-accent-2-200: #c3f1f3;
  --color-accent-2-300: #93e0e6;
  --color-accent-2-400: #4cc3cf;
  --color-accent-2-500: #0e9aa7;
  --color-accent-2-600: #0a7d89;
  --color-accent-2-700: #08626c;
  --color-accent-2-800: #0a3f5c;
  --color-accent-2-900: #071f33;

  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px;
  --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px;

  /* ombres teintees bleu nuit, jamais du noir neutre */
  --shadow-sm: 0 1px 2px rgba(12, 31, 82, .14);
  --shadow-md: 0 3px 12px rgba(12, 31, 82, .16);
  --shadow-lg: 0 14px 36px rgba(12, 31, 82, .24);

  --gutter: 56px;

  /* Constat 63 : huit jetons etaient declares et jamais utilises, dans un bloc
     presente comme la source de verite de la palette. Ils sont conserves, mais
     dits : --color-accent-2, --color-accent-2-300, --color-accent-2-600,
     --color-accent-2-900, --color-accent-500, --color-sombre, --shadow-md et
     --space-1 constituent la reserve de la palette, pas son etat courant. */

  /* Alias vers les jetons reels. Ces cinq noms etaient utilises a trente
     endroits sans jamais avoir ete definis : la declaration devenait invalide
     et retombait sur la valeur par defaut. Un message d'erreur s'affichait donc
     comme un message de succes, et la hierarchie des textes secondaires
     disparaissait. La palette n'avait aucune couleur d'alerte, --rouge en
     introduit une. */
  --gris: var(--color-neutral-600);
  --gris-clair: var(--color-divider);
  --encre: var(--color-text);
  --indigo: var(--color-accent-800);
  --rouge: #b3261e;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: 400;
  line-height: 1.1; letter-spacing: -0.02em;
}
h1 { font-size: 46px; }
h2 { font-size: 26px; margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: 20px; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 999px; }

@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px,30px) scale(1.08); } }

/* ------- decor : formes douces derriere le contenu ------- */
#blobs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 999px; filter: blur(2px); }
.blob-1 { top: -220px; right: -160px; width: 620px; height: 620px;
  background: var(--color-accent-2-200); opacity: .55;
  animation: drift 18s ease-in-out infinite alternate; }
.blob-2 { top: 380px; left: -240px; width: 460px; height: 460px;
  background: var(--color-accent-200); opacity: .4;
  animation: drift 24s ease-in-out infinite alternate-reverse; }

/* ------- barre superieure ------- */
#app { position: relative; z-index: 1; min-height: 100vh; }
#barre-haut {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-6);
  padding: 16px var(--gutter);
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, #eef2f8 82%, transparent);
}
.marque { display: flex; align-items: center; flex: none; color: var(--color-text); }
.marque svg { height: 30px; width: auto; display: block; }
.marque:hover { color: var(--color-accent); }
/* ecran de connexion : le logo remplace le mot-symbole */
.logo-login svg { height: 42px; width: auto; display: block; color: var(--color-text); }

#menu-principal {
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 999px; background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
#menu-principal a {
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--color-neutral-700); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
#menu-principal a:hover { transform: translateY(-1px); color: var(--color-text); }
#menu-principal a.actif {
  background: var(--color-accent); color: var(--color-bg); box-shadow: var(--shadow-sm);
}

#zone-recherche { position: relative; margin-left: auto; flex: 0 1 300px; min-width: 0; }
#recherche-globale {
  width: 100%; min-height: 42px; padding: 8px 18px; font: inherit; font-size: 14px;
  color: var(--color-neutral-700); background: transparent;
  border: 1.5px solid var(--color-neutral-300); border-radius: 999px;
  transition: border-color 200ms ease, color 200ms ease;
}
#recherche-globale::placeholder { color: var(--color-neutral-600); }
#recherche-globale:hover { border-color: var(--color-accent); }
#recherche-globale:focus { border-color: var(--color-accent); color: var(--color-text); }
#resultats-recherche {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-height: 62vh; overflow-y: auto; padding: 8px;
}
.r-groupe { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); padding: 10px 12px 5px; }
.resultat { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px;
  border-radius: var(--radius-md); color: var(--color-text); }
.resultat:hover { background: var(--color-neutral-200); color: var(--color-text); }
.r-titre { font-size: 14px; font-weight: 600; }
.r-detail { font-size: 12px; color: var(--color-neutral-600); }
.r-vide { padding: 16px; text-align: center; color: var(--color-neutral-600); font-size: 13px; }

#avatar {
  width: 42px; height: 42px; flex: none; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--color-accent-2-500);
  color: var(--color-neutral-100); font-family: var(--font-body);
  font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm);
}
#menu-compte {
  position: absolute; top: 66px; right: var(--gutter); z-index: 50;
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-4); min-width: 220px;
}
#user-nom { font-weight: 600; margin-bottom: var(--space-2); }
#btn-menu { display: none; flex-direction: column; gap: 4px; flex: none;
  padding: 11px 12px; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
#btn-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-text); }
#voile { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); z-index: 25; }

.badge {
  background: var(--color-accent); color: var(--color-bg);
  border-radius: 999px; min-width: 19px; padding: 1px 6px;
  font-size: 11px; font-weight: 700; text-align: center;
}
#menu-principal a.actif .badge { background: var(--color-bg); color: var(--color-accent); }

/* ------- contenu ------- */
#contenu { position: relative; z-index: 1; padding: var(--space-8) var(--gutter) 96px;
  max-width: 1500px; animation: riseIn 460ms cubic-bezier(.2,.7,.2,1) both; }
.entete { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: var(--space-8); flex-wrap: wrap; }
.entete h1 { max-width: 20ch; }
.sous-titre { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-top: 10px; }
.fil { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: var(--space-3); }

/* ------- boutons ------- */
button, .btn {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.2;
  cursor: pointer; border: 1.5px solid transparent; border-radius: 999px;
  padding: 11px 20px; background: transparent; color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
:is(button, .btn):not(.btn-primaire):not(.btn-danger):not(.btn-lien) { border-color: var(--color-neutral-300); }
:is(button, .btn):not(.btn-primaire):not(.btn-danger):not(.btn-lien):hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn { text-decoration: none; }
.btn-primaire { background: var(--color-accent); color: var(--color-bg); border-color: transparent; }
.btn-primaire:hover { background: var(--color-accent-600); transform: translateY(-1px); }
.btn-primaire:active { background: var(--color-accent-700); }
.btn-danger { background: var(--color-accent-200); color: var(--color-accent-800); border-color: transparent; }
.btn-danger:hover { background: var(--color-accent-300); }
.btn-lien { border: 0; padding: 0; font-size: 13px; font-weight: 500;
  color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
/* Constat 46 : les petits boutons mesuraient 32 px de haut, sous les 44 px
   recommandes pour une cible tactile. La zone cliquable est agrandie sans
   changer l'aspect visuel : un pseudo-element deborde de six pixels en haut
   et en bas, ce qui laisse la ligne du tableau intacte. */
.btn-petit { padding: 7px 14px; font-size: 13px; position: relative; }
.btn-petit::after { content: ''; position: absolute; inset: -6px -2px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ------- champs ------- */
input, select, textarea {
  font-family: var(--font-body); font-size: 14px; width: 100%;
  min-height: 42px; padding: 9px 16px; color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-neutral-100);
  border: 1.5px solid var(--color-divider); border-radius: 999px;
}
textarea { border-radius: var(--radius-md); min-height: 96px; resize: vertical; padding: 12px 16px; }
/* La regle ci-dessus impose width:100% a tous les champs, ce qui est juste dans
   un formulaire. Dans une barre d'actions, le selecteur de statut s'etirait
   alors sur toute la largeur pour porter deux mots. */
#sel-statut { width: auto; min-width: 160px; font-weight: 600; }
input:hover, select:hover, textarea:hover { border-color: var(--color-neutral-400); }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: none; }
label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 5px;
  color: var(--color-neutral-700); }
.champ { margin-bottom: var(--space-4); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--space-4); }
.filtres { display: flex; gap: 10px; margin-bottom: var(--space-6); flex-wrap: wrap; align-items: center; }
.filtres input, .filtres select { width: auto; min-width: 150px; }
/* La largeur minimale des filtres transformait les cases a cocher en rectangles
   vides de 150px de large. Une case garde sa taille propre. */
.filtres input[type="checkbox"], .filtres input[type="radio"],
input[type="checkbox"], input[type="radio"] {
  width: auto; min-width: 0; height: auto; min-height: 0;
  padding: 0; accent-color: var(--color-accent);
}
.aide { font-size: 12px; color: var(--color-neutral-600); margin-top: 5px; }

/* ------- coordonnees sur la fiche contact ------- */
.fiche-coord { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4);
  font-size: 14px; margin: 0; }
.fiche-coord dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); padding-top: 4px; }
.fiche-coord dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ------- choix d'un contact par recherche ------- */
.choix-contact { position: relative; }
.choix-contact .suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: 6px;
}
.choix-contact .resultat { cursor: pointer; }

/* ------- cartes et tableaux ------- */
.carte { background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-6); }
/* Les tableaux sans .tableau-cartes gardent leurs colonnes sur petit ecran :
   sans defilement, la derniere colonne est coupee au lieu d'etre atteignable. */
.conteneur-tableau { border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden;
  background: var(--color-neutral-100); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: 16px var(--space-4); border-bottom: 1px solid var(--color-divider); }
.tableau td { padding: 14px var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover { background: var(--color-neutral-200); }
/* Constat 46 : aucune ligne de tableau n'etait atteignable au clavier, donc
   aucune fiche ouvrable sans souris. Le script pose tabindex et role ; le
   contour de focus doit rester visible, y compris au survol. */
.tableau tr.cliquable:focus-visible { outline: 2px solid var(--color-accent);
  outline-offset: -2px; background: var(--color-neutral-200); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vide { padding: var(--space-8); text-align: center; color: var(--color-neutral-600);
  background: var(--color-neutral-100); border-radius: var(--radius-lg); font-size: 14px; }

/* ------- pastilles de statut ------- */
.pastille { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.p-estimation, .p-nouveau, .p-a_faire, .p-projet { background: var(--color-accent-200); color: var(--color-accent-800); }
.p-mandat, .p-en_cours { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.p-en_vente { background: var(--color-accent-100); color: var(--color-accent-700); }
.p-reserve { background: var(--color-accent-300); color: var(--color-accent-900); }
.p-vendu, .p-client, .p-fait, .p-terminee { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.p-perdu, .p-inactif { background: var(--color-neutral-200); color: var(--color-neutral-600); }

.etiquette-location, .etiquette-archive {
  display: inline-flex; vertical-align: middle; margin-left: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.etiquette-location { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.etiquette-archive { background: var(--color-neutral-200); color: var(--color-neutral-600); }

/* ------- tableau de bord ------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px; background: var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: var(--space-8); }
.tuile { background: var(--color-bg); padding: 28px 30px; transition: background 260ms ease; }
.tuile:hover { background: var(--color-neutral-100); }
/* Rangee de tuiles posee dans une carte. Le rayon avait ete annule parce que
   les 28px de coin combines a overflow:hidden rognaient la premiere lettre de
   la valeur : « CHF 930'000 » sortait « HF 930'000 ». D'ou des angles droits au
   milieu d'une interface entierement arrondie. On garde donc le rayon et on
   remplace le decoupage : les separateurs sont des bordures, pas un fond qui
   transparait dans un ecart, et rien n'a plus besoin d'etre rogne. */
.tuiles-fiche { border-radius: var(--radius-md); margin-bottom: var(--space-6);
  overflow: visible; gap: 0; background: transparent;
  border: 1.5px solid var(--color-divider); }
.tuiles-fiche .tuile { padding: 16px 22px; background: transparent;
  border-left: 1.5px solid var(--color-divider); display: flex;
  flex-direction: column; justify-content: center; gap: 6px; min-height: 78px; }
.tuiles-fiche .tuile:first-child { border-left: 0; }
.tuiles-fiche .tuile:hover { background: var(--color-neutral-100); }
.tuiles-fiche .tuile:first-child:hover { border-radius: calc(var(--radius-md) - 2px) 0 0 calc(var(--radius-md) - 2px); }
.tuiles-fiche .tuile:last-child:hover { border-radius: 0 calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0; }
.tuiles-fiche .valeur { font-size: 21px; line-height: 1.15; }
.tuiles-fiche .libelle { margin: 0; }
/* Le statut tenait dans une pastille de 11px logee sous un libelle de 10px :
   la seule information vraiment consultee etait la moins lisible du bloc. */
.tuiles-fiche .tuile-statut .valeur { font-size: 0; }
.tuiles-fiche .tuile-statut .pastille { font-size: 14px; padding: 7px 16px; }
.tuiles-fiche .tuile-vendu .valeur { font-size: 15px; line-height: 1.3; }

/* Caracteristiques : une grille de paires, qui remplit le panneau au lieu de
   reserver 45 % de la largeur au libelle et de laisser l'autre moitie vide. */
/* Les separateurs sont des bordures et non un fond qui transparait dans un
   ecart : sinon la derniere rangee, rarement pleine, laissait une bande grise
   la ou il manque des cellules. */
.criteres { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0 0 var(--space-6); background: var(--color-neutral-100);
  border: 1.5px solid var(--color-divider); border-radius: var(--radius-md);
  overflow: hidden; }
.critere { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: 11px 18px;
  border-top: 1px solid var(--color-divider); border-left: 1px solid var(--color-divider); }
.critere:first-child { border-left: 0; }
.critere dt { color: var(--color-neutral-600); font-size: 13px; }
.critere dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right;
  overflow-wrap: anywhere; }

/* ------- acheteurs potentiels sur la fiche d'un bien ------- */
/* ------- diffusion : passerelles et etat en ligne ------- */
.liste-portails { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.ligne-portail { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; margin: 0; padding: 8px 0; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--color-divider); }
.ligne-portail:last-child { border-bottom: 0; }
.ligne-portail .nom { font-weight: 600; }
.ligne-portail .detail { font-size: 11px; }
.ligne-portail.inactif { opacity: .45; cursor: not-allowed; }
.aide.alerte { color: var(--color-accent-700); font-weight: 500; }
.en-ligne { display: inline-block; margin-top: 6px; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-2-700); }

/* ------- champs multilingues empiles ------- */
.bloc-langues { border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4) var(--space-2); margin-bottom: var(--space-4); }
.bloc-langues legend { font-size: 13px; font-weight: 700; padding: 0 6px;
  color: var(--color-neutral-800); }
.bloc-langues legend .detail { font-weight: 400; font-size: 11px; }
.ligne-langue { display: grid; grid-template-columns: 88px 1fr 40px;
  align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.ligne-langue.haute { align-items: start; }
.ligne-langue label { margin: 0; font-size: 12px; color: var(--color-neutral-600); }
/* La modale fait maintenant 920px : les descriptions ont la place de respirer.
   Elles tenaient sur quatre lignes visibles, ce qui rendait impossible de
   relire un texte d'annonce avant de le publier. */
.ligne-langue textarea { min-height: 180px; }
.btn-traduire { min-height: 34px; padding: 6px 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em; border-radius: var(--radius-sm); }

/* ------- glisser-deposer entre categories ------- */
.groupe-tete .depot { margin-left: auto; font-size: 11px; color: var(--color-accent);
  opacity: 0; transition: opacity 160ms ease; }
body.deplacement .groupe-tete .depot { opacity: .7; }
body.deplacement .groupe-docs { border-radius: var(--radius-md); }
.groupe-docs.survol { background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  outline: 2px dashed var(--color-accent); outline-offset: 6px; }
.groupe-docs.survol .depot { opacity: 1; font-weight: 600; }
body.deplacement { cursor: grabbing; }
[data-doc] { cursor: grab; }

/* ------- rectangle de selection ------- */
.cadre-selection { position: fixed; z-index: 60; pointer-events: none;
  border: 1.5px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.zone-docs { user-select: none; }
[data-doc].choisi { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.liste-docs .doc.choisi { outline-offset: -1px; border-radius: var(--radius-sm); }
.actions-selection { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  visibility: hidden; }
.actions-selection.actif { visibility: visible; }
.barre-docs #compte-selection { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--color-neutral-600); }

/* ------- documents regroupes par nature ------- */
.groupe-docs { margin-top: var(--space-6); }
/* Les categories vides disparaissaient. Un fichier venu du bureau n'avait donc
   plus aucune cible ou etre lache des que la categorie n'existait pas encore :
   pour creer un plan il fallait deja avoir un plan. Elles restent affichees,
   reduites, et servent de zone de depot. */
.groupe-vide { opacity: .72; }
.groupe-vide:hover, .groupe-docs.survol.groupe-vide { opacity: 1; }
.depot-vide { border: 1.5px dashed var(--color-neutral-400); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6); font-size: 13px; color: var(--color-neutral-600);
  text-align: center; }
.groupe-docs.survol .depot-vide { border-color: var(--color-accent);
  color: var(--color-accent-700); border-style: solid; }

/* Documents repris du projet : ils paraissent sur l'annonce du lot, donc ils
   figurent ici, mais le fichier appartient au projet. Le repere le dit, et la
   croix ne fait que les retirer de ce lot. */
.etiquette-projet { position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--color-accent-2-500); color: #fff; }
.liste-docs .etiquette-projet { position: static; }
.vignette-projet { outline: 1.5px dashed var(--color-accent-2-500); outline-offset: -1.5px; }
.doc-projet { border-left: 3px solid var(--color-accent-2-500); }
.compteur-projet { background: var(--color-accent-2-100); color: var(--color-accent-2-700);
  font-weight: 500; }
.groupe-docs:first-of-type { margin-top: var(--space-3); }
.groupe-tete { display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--color-divider); }
.groupe-tete h3 { font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0; margin: 0; }
.groupe-tete .detail { font-size: 12px; color: var(--color-neutral-600); }
.etiquette-privee { position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: var(--color-neutral-900); color: var(--color-neutral-100); }
.liste-docs .etiquette-privee { position: static; }
.liste-docs .doc { display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--color-divider); }
.liste-docs .doc:last-child { border-bottom: 0; }
.liste-docs .doc a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------- selection multiple de documents ------- */
.barre-docs { display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-3); font-size: 13px; }
.barre-docs label { display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 13px; font-weight: 500; color: var(--color-neutral-700); cursor: pointer; }
.coche-doc { accent-color: var(--color-accent); cursor: pointer; }
.galerie .vignette .coche-doc { position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 18px; height: 18px; }
.liste-docs .doc { display: flex; align-items: center; gap: 10px; }

/* ------- choix des photos du projet pour un lot ------- */
.choix-photos { display: grid; gap: var(--space-3); margin-top: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }


/* ------- navigation d'un lot a l'autre ------- */
.fil-nav { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.nav-lots { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-lots .detail { font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--color-neutral-600); }
.nav-lots .inactif { opacity: .35; pointer-events: none; }

.compteur { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--color-neutral-600); vertical-align: middle; }
.acheteur { padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.acheteur:last-child { border-bottom: 0; }
.acheteur-nom { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-weight: 600; font-size: 14px; }
.acheteur .detail { font-size: 12px; color: var(--color-neutral-600); }
.tuile .valeur { font-family: var(--font-heading); font-weight: 400; font-size: 42px;
  line-height: 1; letter-spacing: -0.02em; color: var(--color-text); }
.tuile .libelle { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 16px; }
.tuile .libelle:last-child { margin: 12px 0 0; }
.barres { display: flex; flex-direction: column; gap: 10px; }
.barre-ligne { display: grid; grid-template-columns: 150px 1fr 64px; align-items: center;
  gap: 12px; font-size: 13px; }
.barre-fond { background: var(--color-neutral-200); border-radius: 999px; height: 14px; overflow: hidden; }
.barre-remplie { background: var(--color-accent); height: 100%; border-radius: 999px; min-width: 2px; }

.grille-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-8); }
.bloc-jour h3 { font-size: 18px; margin-bottom: var(--space-2); }
.bloc-retard { box-shadow: inset 5px 0 0 var(--color-accent); }
.bloc-reponses { box-shadow: inset 5px 0 0 var(--color-accent-2-500); }
.bloc-ok { box-shadow: inset 5px 0 0 var(--color-accent-2-400); }
.ligne-jour { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--color-divider); color: var(--color-text); font-size: 13px; }
.ligne-jour:hover { color: var(--color-accent-700); }
.ligne-jour .detail, .bloc-jour .detail { color: var(--color-neutral-600); font-size: 12px; }

/* ------- pipeline ------- */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr));
  gap: var(--space-3); overflow-x: auto; align-items: start; padding-bottom: var(--space-4); }
.colonne { background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-radius: var(--radius-lg); padding: var(--space-3); }
.colonne h3 { font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600);
  padding: 4px 8px var(--space-3); display: flex; justify-content: space-between; }
.carte-bien { background: var(--color-neutral-100); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-2); cursor: grab;
  box-shadow: var(--shadow-sm); transition: transform 220ms ease; }
.carte-bien:hover { transform: translateY(-2px); }
.carte-bien .titre { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.carte-bien .meta { font-size: 12px; color: var(--color-neutral-600); }
.carte-bien .prix { font-size: 13px; color: var(--color-accent-700); font-weight: 700; margin-top: 5px; }
.colonne.survol { outline: 2px dashed var(--color-accent); outline-offset: -2px; }

/* ------- promotions ------- */
.grille-unites { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2); }
.unite { border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer;
  background: var(--color-neutral-100); text-align: center; transition: transform 220ms ease; }
.unite:hover { transform: translateY(-3px); }
.unite .lot { font-family: var(--font-heading); font-size: 18px; }
.unite .details { font-size: 11px; color: var(--color-neutral-600); margin: 4px 0; }
.u-en_vente { box-shadow: inset 0 4px 0 var(--color-accent); }
.u-reserve { box-shadow: inset 0 4px 0 var(--color-accent-400); }
.u-vendu { box-shadow: inset 0 4px 0 var(--color-accent-2-500); background: var(--color-accent-2-100); }
.u-estimation, .u-mandat { box-shadow: inset 0 4px 0 var(--color-neutral-400); }
.u-perdu { box-shadow: inset 0 4px 0 var(--color-neutral-300); opacity: .55; }

/* ------- fiches ------- */
.deux-colonnes { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: start; }
.chrono { display: flex; flex-direction: column; }
.evt { padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.evt .date { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 3px; }
.liste-docs { display: flex; flex-direction: column; }
.doc { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  margin-top: var(--space-6); font-size: 13px; color: var(--color-neutral-600); }

/* ------- galerie photos ------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3); margin-top: var(--space-3); }
.vignette { position: relative; display: block; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-200);
  box-shadow: var(--shadow-sm); transition: transform 260ms ease; }
.vignette:hover { transform: translateY(-3px); }
.vignette img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(.96); }
.vignette .suppr-photo { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .15s; }
.vignette:hover .suppr-photo { opacity: 1; }

/* Cantonne sous .choix-photos : la galerie des documents utilise deja .vignette
   avec un format 4/3, et des regles non cantonnees se marchaient dessus. */
.choix-photos .vignette { position: relative; display: block; margin: 0; cursor: pointer;
  aspect-ratio: auto; box-shadow: none;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-100);
  border: 2px solid transparent; transition: border-color 180ms ease; }
.choix-photos .vignette:hover { transform: none; }
.choix-photos .vignette.retenue { border-color: var(--color-accent); }
.choix-photos .vignette img { width: 100%; height: 104px; object-fit: cover; display: block;
  filter: none; }
/* Document sans apercu : une pastille du type remplace la vignette. */
.pastille-doc { height: 104px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--color-neutral-600); background: var(--color-neutral-200); }
.choix-photos .vignette span { display: block; padding: 6px 8px; font-size: 11px;
  color: var(--color-neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-photos .vignette input { position: absolute; top: 8px; left: 8px; z-index: 1;
  width: 18px; height: 18px; accent-color: var(--color-accent); }
.couverture { width: 92px; height: 62px; object-fit: cover; border-radius: var(--radius-md);
  display: block; filter: saturate(.85) contrast(.96); }
.vide-photo { display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-200); color: var(--color-neutral-600); font-size: 11px; }

/* ------- messages ------- */
.fil-messages { display: flex; flex-direction: column; gap: var(--space-3);
  max-height: 460px; overflow-y: auto; }
.msg { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.msg-sortant { background: var(--color-accent-100); margin-left: 32px; }
.msg-entrant { background: var(--color-neutral-100); margin-right: 32px; }
.msg-tete { display: flex; justify-content: space-between; gap: 10px; font-size: 11px;
  color: var(--color-neutral-600); margin-bottom: 5px; }
.msg-tete strong { color: var(--color-text); font-weight: 700; }
.msg-sujet { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.msg-corps { font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* ------- modale et toast ------- */
#modale-fond { position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding: 48px var(--space-4); }
/* 560px suffisaient pour un formulaire de contact, pas pour la fiche bien :
   ses trois zones de description multilingues tenaient sur quatre lignes
   visibles. La largeur suit desormais le contenu, jusqu'a 920px. */
#modale { width: min(920px, 100%); background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-6);
  box-shadow: var(--shadow-lg); }
#modale h2 { margin-top: 0; font-size: 24px; }
.modale-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  padding: 13px 24px; border-radius: 999px; z-index: 100; font-size: 14px;
  font-weight: 500; box-shadow: var(--shadow-lg); max-width: 90vw; }
.erreur { color: var(--color-accent-700); font-size: 13px; margin-top: var(--space-2); }

/* ------- connexion ------- */
.page-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); }
.boite-login { width: min(420px, 100%); background: var(--color-surface);
  border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-8); box-shadow: var(--shadow-lg); }
.logo-login { font-family: var(--font-heading); font-size: 34px; letter-spacing: -0.02em;
  margin-bottom: var(--space-6); }

/* ------- zone de depot de l'import ------- */
.zone-depot { display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 32px 24px; margin-bottom: var(--space-2); cursor: pointer; text-align: center;
  border: 2px dashed var(--color-neutral-400); border-radius: var(--radius-lg);
  background: var(--color-neutral-100); transition: border-color .15s, background .15s; }
.zone-depot:hover { border-color: var(--color-accent); }
.zone-depot.survol { border-color: var(--color-accent); background: var(--color-accent-100); }
.zone-depot strong { font-size: 15px; }
.zone-depot span { font-size: 13px; color: var(--color-neutral-600); }
.zone-depot .nom-fichier:not(:empty) { margin-top: 8px; padding: 4px 14px; border-radius: 999px;
  background: var(--color-bg); color: var(--color-text); font-weight: 600; }

/* ------- mobile ------- */
@media (max-width: 1360px) {
  /* la barre en pastilles ne tient plus : elle passe en tiroir des que
     le logo, les 8 onglets, la recherche et l'avatar se disputent la place */
  #menu-principal {
    position: fixed; top: 74px; left: 20px; right: 20px; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-3);
    border-radius: var(--radius-lg); background: var(--color-neutral-100);
    box-shadow: var(--shadow-lg); display: none;
  }
  body.menu-ouvert #menu-principal { display: flex; }
  #menu-principal a { justify-content: space-between; padding: 12px 16px; font-size: 15px; }
  #btn-menu { display: flex; }
  #zone-recherche { flex: 0 1 340px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  /* la recherche prend sa propre ligne : coincee entre la marque, l'avatar et
     le menu, elle se reduisait a deux lettres */
  #barre-haut { flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-3); }
  #zone-recherche { order: 10; flex: 1 0 100%; margin-left: 0; }
  #menu-principal { top: 126px; }
  #menu-compte { top: 122px; right: 20px; }
  h1 { font-size: 34px; }
  .entete { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .entete > div:last-child { display: flex; gap: 10px; }
  .entete > div:last-child > * { flex: 1; }
  .filtres { flex-direction: column; align-items: stretch; }
  /* Constat 58 : cette regle, plus loin dans le fichier que celle qui protege
     les cases a cocher et de specificite egale, leur rendait une largeur de
     100%. Deux styles en ligne masquaient le defaut ; il serait revenu a la
     prochaine case ajoutee. */
  .filtres input:not([type="checkbox"]):not([type="radio"]),
  .filtres select { width: 100%; min-width: 0; }
  .grille-2, .grille-3, .deux-colonnes, .kanban { grid-template-columns: 1fr; }
  .barre-ligne { grid-template-columns: 110px 1fr 54px; }
  #modale { width: 100%; }

  /* Les tableaux deviennent des cartes empilees. Constat 41 : « overflow:
     visible » etait pose sur TOUS les conteneurs, y compris ceux dont le
     tableau ne se transforme pas en cartes (Taches, Diffusion, Promotions,
     Reglages). Ils perdaient donc le defilement horizontal que la regle de la
     ligne 266 leur donne, ce que son commentaire dit vouloir eviter. */
  .conteneur-tableau:has(.tableau-cartes) { background: transparent; overflow: visible; }
  .tableau-cartes tr:first-child { display: none; }
  .tableau-cartes tr { display: block; background: var(--color-neutral-100);
    border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: var(--space-4);
    box-shadow: var(--shadow-sm); }
  .tableau-cartes td { display: flex; justify-content: space-between; gap: 12px;
    border: 0; padding: 4px 0; text-align: right; }
  .tableau-cartes td::before { content: attr(data-label); color: var(--color-neutral-600);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; text-align: left; flex-shrink: 0; }
  .tableau-cartes td[data-label="Bien"], .tableau-cartes td[data-label="Nom"] {
    display: block; text-align: left; padding-bottom: 10px; }
  .tableau-cartes td[data-label="Bien"]::before,
  .tableau-cartes td[data-label="Nom"]::before { display: none; }
  .tableau-cartes td.col-photo { display: block; padding: 0 0 var(--space-3); }
  .tableau-cartes td.col-photo .couverture { width: 100%; height: 180px; }
  .msg-sortant, .msg-entrant { margin: 0; }
}

@media print {
  /* Constat 53 : .pas-imprimer est pose dans le rapport mandant mais n'existait
     dans aucune feuille. Le rapport partait au proprietaire avec « Retour au
     bien » en tete. */
  #barre-haut, #blobs, #voile, .filtres, button, .pas-imprimer { display: none !important; }
  body { background: #fff; }
  #contenu { padding: 0; animation: none; }
}

/* ------- menu secondaire, sous l'avatar ------- */
#menu-secondaire { display: flex; flex-direction: column; margin: var(--space-3) 0; }
#menu-secondaire a { padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--color-text); }
#menu-secondaire a:hover, #menu-secondaire a.actif { color: var(--color-accent-700); }
.detail { color: var(--color-neutral-600); font-size: 12px; }
.ref-mono { font-family: var(--font-mono); font-size: 13px; }

/* ------- agenda de la semaine ------- */
.agenda { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-8); align-items: start; }
.agenda-jours { display: flex; flex-direction: column; gap: var(--space-6); }
.agenda-jour { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6); align-items: start; }
.agenda-date { text-align: right; padding-top: 4px; }
.agenda-date .num { font-family: var(--font-heading); font-size: 36px; line-height: 1;
  letter-spacing: -0.02em; }
.agenda-date .nom { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); margin-top: 4px; }
.est-aujourdhui .agenda-date .num { color: var(--color-accent); }
.agenda-evts { display: flex; flex-direction: column; gap: 10px;
  border-left: 1.5px solid var(--color-divider); padding-left: var(--space-6); min-height: 46px; }
.agenda-evt { display: flex; align-items: center; gap: var(--space-4);
  padding: 15px 22px; border-radius: var(--radius-lg); background: var(--color-neutral-100);
  cursor: pointer; transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.agenda-evt:hover { transform: translateX(6px); }
.agenda-evt .heure { font-family: var(--font-mono); font-size: 13px; font-weight: 700; flex: none; }
.agenda-evt .quoi { flex: 1; font-size: 15px; font-weight: 600; }
.agenda-evt .qui { font-size: 13px; color: var(--color-neutral-600); }
.agenda-evt.evt-visite { background: var(--color-accent-200); }
.agenda-evt.evt-rdv { background: var(--color-accent-2-200); }
.agenda-evt.fait { opacity: .5; }
.agenda-vide { font-size: 13px; color: var(--color-neutral-500); padding: 12px 0; }
.agenda-cote { position: sticky; top: 96px; }

/* ------- honoraires ------- */
.p-brouillon { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.p-envoyee { background: var(--color-accent-200); color: var(--color-accent-800); }
.p-payee { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.p-annulee { background: var(--color-neutral-200); color: var(--color-neutral-500); }
.sel-statut-facture { min-width: 130px; font-size: 13px; min-height: 36px; padding: 5px 14px; }

/* ------- performance ------- */
.perf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.histogramme { display: flex; align-items: flex-end; gap: 14px; height: 260px;
  padding-bottom: 14px; border-bottom: 1.5px solid var(--color-divider); }
.colonne-barre { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 10px; height: 100%; }
.valeur-barre { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--color-neutral-700); }
.barre { width: 100%; border-radius: 999px 999px 8px 8px; background: var(--color-accent);
  min-height: 4px; transition: height 700ms cubic-bezier(.2,.7,.2,1); }
.colonne-barre:nth-child(even) .barre { background: var(--color-accent-2-500); }
.mois-barre { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  color: var(--color-neutral-600); }
.perf-cotes { display: flex; flex-direction: column; gap: var(--space-4); }
.perf-carte { border-radius: var(--radius-lg); background: var(--color-neutral-100); padding: 28px 30px; }
.perf-carte .stat { font-family: var(--font-heading); line-height: 1;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em;
  color: var(--color-accent-700); margin-bottom: 10px; word-break: break-word; }
.perf-carte p { margin: 0; font-size: 15px; color: var(--color-neutral-700); line-height: 1.5; }

@media (max-width: 900px) {
  .agenda, .perf { grid-template-columns: 1fr; }
  .agenda-cote { position: static; }
  .agenda-jour { grid-template-columns: 62px 1fr; gap: var(--space-4); }
  .agenda-evts { padding-left: var(--space-4); }
  .agenda-evt { flex-wrap: wrap; gap: 8px; padding: 13px 18px; }
  .agenda-evt .quoi { flex: 1 0 100%; order: 3; }
}

/* ------- filtre par statuts : pilules a cocher ------- */
.filtres-statuts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.pilule-statut {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  margin: 0; color: var(--color-neutral-600);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border: 1.5px solid transparent; transition: background 180ms, color 180ms, border-color 180ms;
}
.pilule-statut input { position: absolute; opacity: 0; width: 0; height: 0; }
.pilule-statut:hover { border-color: var(--color-neutral-400); color: var(--color-text); }
.pilule-statut.active {
  background: var(--color-accent-100); color: var(--color-accent-700);
  border-color: var(--color-accent-300);
}
.pilule-statut.active::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--color-accent);
}
.pilule-statut:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#form-bien h3 { margin: var(--space-6) 0 var(--space-3); font-size: 15px;
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600); }

/* Bloc « mandat du projet » du formulaire de promotion : un cadre discret qui
   separe le mandat des coordonnees, sans rompre la grille des champs. */
.bloc-mandat { border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4); }
.bloc-mandat legend { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-neutral-600); padding: 0 6px; }

/* ------- chiffre d'affaires par courtier ------- */
/* Trois cartes : ce que porte le portefeuille aujourd'hui, et ce qui est
   realise sur l'exercice. Le realise se distingue, c'est le seul chiffre
   acquis. */
.grille-ca { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4); }
.carte-ca { background: var(--color-neutral-100); border-radius: var(--radius-lg);
  padding: var(--space-6); border: 1.5px solid var(--color-divider); }
.carte-ca-realise { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.ca-tete h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: 0; }
.ca-tete .detail { display: block; margin-bottom: var(--space-3); }
.ca-montant { font-family: var(--font-heading); font-weight: 400; font-size: 30px;
  line-height: 1.1; letter-spacing: -0.01em; }
.carte-ca-realise .ca-montant { color: var(--color-accent-700); }
.ca-pied { display: flex; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); font-size: 12px; color: var(--color-neutral-600); }
.ca-alerte { margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider); font-size: 12px; color: var(--color-neutral-700); }

/* ------- repartition des couts par poste ------- */
/* Une barre par poste, la plus grosse depense servant d'echelle : on voit d'un
   coup ou part l'argent de la commercialisation. */
.repartition { display: flex; flex-direction: column; gap: 7px;
  margin: var(--space-4) 0 var(--space-6); }
.poste { display: grid; grid-template-columns: minmax(110px, 150px) 1fr auto;
  align-items: center; gap: var(--space-3); font-size: 13px; }
.poste-nom { color: var(--color-neutral-700); }
.poste-barre { height: 9px; background: var(--color-neutral-200);
  border-radius: 999px; overflow: hidden; }
.poste-barre i { display: block; height: 100%; background: var(--color-accent-400);
  border-radius: 999px; min-width: 3px; }
.poste-montant { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Les statuts de cout remplacent ceux des factures d'honoraires. */
.p-a_payer { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.p-payee { background: var(--color-accent-100); color: var(--color-accent-700); }
.p-annulee { background: var(--color-neutral-200); color: var(--color-neutral-700); }
@media (max-width: 560px) {
  .poste { grid-template-columns: 1fr auto; }
  .poste-barre { grid-column: 1 / -1; }
}

/* ------- entete « Documents & photos » ------- */
/* Constat 66 : le formulaire d'ajout mesurait 456 px et ne se repliait pas,
   display:flex sans flex-wrap et champ fichier fige a 200 px. La fiche d'un
   bien debordait a 655 px pour un ecran de 375, et c'est precisement la carte
   qui sert en visite pour verser les photos prises sur place. */
.tete-docs { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); flex-wrap: wrap; }
.form-doc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-doc input[type="file"] { width: 200px; min-width: 0; }
@media (max-width: 560px) {
  .tete-docs { align-items: stretch; }
  .form-doc { width: 100%; }
  /* Le selecteur de fichier prend la ligne : sur mobile son libelle
     « Choisir les fichiers » est deja plus large que 200 px. */
  .form-doc input[type="file"] { width: 100%; flex: 1 0 100%; }
  .form-doc button { flex: 1; }
}

/* Constat 68 : la carte du Pipeline est atteignable au doigt et au clavier. */
.carte-bien { cursor: pointer; }
.carte-bien:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Plans : page entiere sur fond blanc, commandes hors du lien d'ouverture. */
.galerie-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 16px; }
.carte-plan { border: 1px solid var(--color-divider); border-radius: 16px; overflow: hidden; background: #fff; min-width: 0; }
.carte-plan-projet { border-style: dashed; }
.carte-plan.choisi { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.actions-plan { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; background: var(--color-neutral-100); }
.actions-plan label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.actions-plan button { margin-left: auto; }
.ouvrir-plan { display: block; color: inherit; padding: 12px; text-decoration: none; }
.ouvrir-plan:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.surface-plan { display: flex; align-items: center; justify-content: center; height: 300px; background: #fff; }
.surface-plan canvas, .surface-plan img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.surface-plan canvas[hidden] { display: none; }
.nom-plan { display: block; overflow-wrap: anywhere; margin-top: 12px; font-weight: 600; font-size: 13px; }
.statut-plan { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-600); }
@media (max-width: 600px) { .surface-plan { height: 240px; } }

/* Honoraires : vue du portefeuille courant, independante de l'exercice vendu. */
.previsions-honoraires { margin: var(--space-8) 0; }
.previsions-honoraires .filtres { align-items: end; }
.previsions-honoraires .filtres label { display: grid; gap: 8px; font-size: 13px; }
.previsions-honoraires .filtres input { min-width: min(280px, 100%); }
.grille-ca-previsions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }