/* Les formulaires : champs du dossier, bien saisi à la main, profil et simulations.
   Extrait tel quel de index.html (découpage du front). */

/* ---- Formulaire bien manuel ---- */
.mform-section { margin-top: 1.5rem; }
.mform-section:first-of-type { margin-top: 1.25rem; }
.mform-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.mform-head .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: #6366f1; flex: none; }
.mform-head .title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #475569; white-space: nowrap; }
.mform-head .rule { flex: 1; height: 1px; background: linear-gradient(to right, #e2e8f0, transparent); }
.mform-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: .85rem 1rem;
}
@media (min-width: 768px) { .mform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mfield { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mfield > span { font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.mfield input, .mfield select, .mfield textarea {
  width: 100%;
  font-size: .875rem;
  padding: .5rem .7rem;
  border-radius: .6rem;
  border: 1px solid var(--field-border);
  background: #fff;
  color: #0f172a;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.mfield input:hover, .mfield select:hover, .mfield textarea:hover { border-color: #cbd5e1; }
.mfield input:focus, .mfield select:focus, .mfield textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.mfield input::placeholder, .mfield textarea::placeholder { color: var(--placeholder); opacity: 1; }
.mfield input[type=number]::-webkit-outer-spin-button,
.mfield input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mfield input[type=number] { -moz-appearance: textfield; }
.mfield.col-2 { grid-column: span 1; }
@media (min-width: 768px) { .mfield.col-2 { grid-column: span 2; } }

/* ---- Mêmes contrôles de formulaire pour tous les onglets de gestion ---- */
.management-panel input:not([type=checkbox]):not([type=radio]):not([type=range]),
.management-panel select,
.management-panel textarea {
  width: 100%;
  font-size: .875rem;
  padding: .5rem .7rem;
  border-radius: .6rem;
  border: 1px solid var(--field-border);
  background: #fff;
  color: #0f172a;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.management-panel input:hover, .management-panel select:hover, .management-panel textarea:hover { border-color: #cbd5e1; }
.management-panel input:focus, .management-panel select:focus, .management-panel textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
/* Un champ en lecture seule doit se voir comme tel : sinon on tape dedans avant
   de comprendre que la valeur vient d'ailleurs. */
.management-panel input[readonly] { background: #f8fafc; color: #475569; cursor: default; }
html[data-theme="dark"] .management-panel input[readonly] { background: #0b1220 !important; color: var(--ink-3) !important; }
.management-panel input::placeholder, .management-panel textarea::placeholder { color: var(--placeholder); opacity: 1; }
.management-panel input[type=number]::-webkit-outer-spin-button,
.management-panel input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.management-panel input[type=number] { -moz-appearance: textfield; }
/* Libellés : on aligne sur la DA du formulaire manuel */
.management-panel label.text-xs { color: var(--ink-3); font-weight: 500; font-size: 13px; }
/* Le cadre épouse le contrôle. Largeur, marge et flex appartiennent au cadre ;
   les boutons peuvent ainsi s'ancrer au même coin dans toutes les rubriques. */
.field-control { position: relative; display: inline-flex; width: 100%; min-width: 0; vertical-align: top; }
.field-control > input,
.field-control > select,
.field-control > textarea { display: block; width: 100%; min-width: 0; margin: 0; }
.field-label { display: flex; align-items: baseline; }
.field-label > span { min-width: 0; }
.field-reference-help { position: absolute; top: 0; right: 0; transform: translate(35%, -35%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: var(--surface); color: var(--ink-3); line-height: 1; cursor: help; }
.field-reference-help svg { display: block; width: 12px; height: 12px; pointer-events: none; }
.field-reference-help::before { content: ''; position: absolute; inset: -5px; }
.field-reference-help:hover { color: var(--ink); background: var(--surface-2); }
.field-reference-help:focus-visible,
.field-info:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.field-reference-help.sugg-open { cursor: pointer; }
.field-effective-reference { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Champ de données vide (sans valeur ni source héritée/dérivée) : signalé,
   pas bloquant. Contour rouge + pastille « ! ». */
.field-empty { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444; }
.empty-mark { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:6px; border-radius:50%; background:#ef4444;
  color:#fff; font-size:11px; font-weight:800; line-height:1; vertical-align:middle;
  flex:0 0 auto; }
.field-control > .empty-mark { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); margin: 0; }
.field-control > .field-empty { padding-right: 1.8rem; }
/* Champ en cours d'édition (focus) : visuellement distinct. Sauvegarde auto au
   blur/Enter, donc on matérialise clairement le champ actif. */
#managementBody input:focus, #managementBody select:focus, #managementBody textarea:focus,
.management-panel input:focus, .management-panel select:focus, .management-panel textarea:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.18) !important;
  background: #f5f9ff;
}
/* Échelle « valeur conseillée » (beta) : cloche gaussienne (dégradé inline,
   vert au conseillé → rouge aux extrêmes) + curseur manipulable (input range
   transparent par-dessus). Encoche sombre = le conseillé (centre). Glisser le
   curseur écrit la valeur dans le champ. */
/* UN CHAMP À LA TAILLE DE SA VALEUR. Les champs du dossier étaient en `w-full`
   dans une grille à deux ou trois colonnes : une taxe foncière à quatre chiffres
   s'étalait sur un tiers de la carte, et son curseur avec. On borne la largeur ;
   la grille garde ses colonnes, les champs cessent de flotter dedans. */
.management-panel label > input[type="number"],
.management-panel label > .field-control:has(> input[type="number"]) { max-width: 9rem; }
/* Les libellés n'ont pas tous la même hauteur : sans ancrage bas, celui qui passe
   sur deux lignes pousse son champ plus bas que ses voisins et la rangée se
   dentelle. On aligne les cellules par le bas, donc par leur champ. */
.champs-grille > label { display: flex; flex-direction: column; justify-content: flex-end; }
/* Des colonnes à la taille de leur contenu, pas de la carte : en fractions égales,
   trois colonnes de 22 rem portaient un libellé et un champ de 9 rem, et le reste
   était du vide. Les colonnes se posent à gauche et le vide reste au bord. */
.champs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 14rem));
  justify-content: start;
  column-gap: 1.5rem; row-gap: 1rem;
}
/* LES CHAMPS D'UNE MÊME RANGÉE S'ALIGNENT. Un intitulé qui passe sur deux
   lignes décalait son champ de 52 px vers le bas, et la rangée partait en
   escalier. Chaque cellule devient une colonne dont le dernier élément est
   poussé en bas : les intitulés peuvent respirer, les champs restent alignés. */
/* LE CHAMP REMPLIT SA COLONNE. Un `max-width: 9rem` global sur les champs
   nombre les laissait à 144 px dans des colonnes de 240 : 96 px de vide par
   cellule, et une grille qui ne se lisait plus comme une grille. La contrainte
   garde son sens ailleurs (un champ inline dans une phrase), pas ici. */
.management-panel .champs-grille > label > input[type="number"],
.management-panel .champs-grille > label > .field-control { max-width: none; }
/* Un texte libre se lit mal sur toute la largeur de la carte : on borne la ligne,
   comme on borne un champ numérique à la taille de sa valeur. */
.management-panel textarea { display: block; max-width: 48rem; }
/* Une phrase n'a pas la même largeur qu'un nombre : les champs de texte libre
   prennent deux colonnes, sans sortir de la grille. */
.champs-grille > label.champs-large { grid-column: span 2; }
@media (max-width: 34rem) { .champs-grille > label.champs-large { grid-column: span 1; } }

/* FENÊTRE DU CURSEUR : la place qu'une barre de 9 rem n'avait pas. */
.sugg-pop {
  position: fixed; z-index: 70; width: 340px; padding: 14px 16px 16px;
  border-radius: 16px; background: #fff; border: 1px solid #e2e8f0;
  box-shadow: 0 18px 40px rgba(15,23,42,.22);
}
html[data-theme="dark"] .sugg-pop { background: var(--surface) !important; border-color: var(--hairline) !important; }
.sugg-pop-title { font-size: .82rem; font-weight: 600; color: #0f172a; }
html[data-theme="dark"] .sugg-pop-title { color: var(--ink); }
.sugg-pop-sub { font-size: .7rem; color: #64748b; margin-top: 1px; white-space: pre-line; }
html[data-theme="dark"] .sugg-pop-sub { color: var(--ink-3); }
.sugg-pop-bar {
  position: relative; height: 26px; border-radius: 8px; margin: 26px 0 18px;
}
.sugg-pop-reco { position: absolute; top: -5px; bottom: -5px; width: 2px; background: rgba(15,23,42,.45); border-radius: 2px; }
html[data-theme="dark"] .sugg-pop-reco { background: rgba(226,232,240,.6); }
.sugg-pop-range {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: -6px 0; width: 100%; height: 38px;
  margin: 0; background: transparent; cursor: ew-resize;
}
.sugg-pop-range::-webkit-slider-runnable-track { background: transparent; height: 38px; }
.sugg-pop-range::-moz-range-track { background: transparent; height: 38px; }
.sugg-pop-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 38px; background: transparent; cursor: ew-resize; }
.sugg-pop-range::-moz-range-thumb { width: 30px; height: 38px; background: transparent; border: 0; cursor: ew-resize; }
/* LA LOUPE EST LE CURSEUR. Elle glisse SUR le dégradé et en montre la portion
   qu'elle survole, agrandie — d'où le fond repris de la barre, zoomé et décalé
   pour que le point réglé tombe au centre du verre. La valeur s'inscrit dedans. */
.sugg-pop-loupe {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 999px; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(15,23,42,.35), inset 0 0 0 1px rgba(15,23,42,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 800; color: #0f172a;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
  background-repeat: no-repeat;
}
html[data-theme="dark"] .sugg-pop-loupe { border-color: #e2e8f0; }
.sugg-pop-foot { display: flex; justify-content: space-between; font-size: .68rem; color: #94a3b8; margin-top: 10px; }

/* Champ vide = on utilise l'estimation : placeholder coloré pour le signaler. */
input[data-est]::placeholder { color: var(--estimated-ink); opacity: 1; }
.rent-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; margin-top: 4px; }
.rent-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
/* Explorateur 3D : boutons de bascule de métrique. */
.renta-metric-btn { font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #475569; cursor: pointer; }
.renta-metric-btn:hover { border-color: #94a3b8; }
/* Point d'aide : de la couleur du texte secondaire, il ne prend la main que
   lorsqu'on le vise. */
/* Dans le profil acheteur les champs sont NUS (ni bordure ni fond) : un <select>
   natif y plante une boîte grise au milieu de valeurs en texte simple. On lui
   retire son habillage et on lui rend un chevron discret — il reste lisible
   comme une liste sans rompre l'alignement de la grille. */
#buyerProfileModal select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 3.1rem center;
  padding-right: 1rem;
}

.aide-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent;
  color: #94a3b8; font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  transition: color .12s, background .12s;
}
.aide-i:hover { color: #0f172a; background: rgba(15, 23, 42, .07); }
/* Variante PUREMENT informative : elle ne mène nulle part, elle explique sur
   place. Le curseur le dit — « pointer » promettrait une destination. */
.aide-i--info { cursor: help; }
.aide-i.field-info { width: 16px; height: 16px; flex: 0 0 auto; margin-left: 4px; font-size: 13px; vertical-align: baseline; }
/* Informative aussi, mais porte une réserve (réglementation) : couleur d'alerte. */
.aide-i--alerte { cursor: help; color: #b45309; width: auto; height: auto; font-size: 11px; }
html[data-theme="dark"] .aide-i.aide-i--alerte { color: #fbbf24; }
html[data-theme="dark"] .aide-i { color: var(--ink-3); }
html[data-theme="dark"] .aide-i:hover { color: #e2e8f0; background: rgba(148, 163, 184, .16); }
/* Lots & revenus : champs affichés selon l'exploitation choisie (data-strategy). */
.bp-revenue-grid {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) 5rem 7rem 10.5rem 29rem;
  column-gap: .75rem;
  /* Libellés, exploitation et revenus commencent sur la même ligne. */
  align-items: start;
}
.bp-lot-row { --bp-lot-control-height: 2.375rem; }
.bp-lot-row input,
.bp-lot-row select { height: var(--bp-lot-control-height); }
.bp-lot-row select { appearance: none; -webkit-appearance: none; min-height: var(--bp-lot-control-height); padding-right: 2rem; }
.bp-lot-use { position: relative; }
.bp-lot-use::after { content: ''; position: absolute; right: .8rem; top: 50%; margin-top: -4px; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; }
/* Les champs des lots utilisent le même cadre, avec leur largeur de colonne. */
.bp-lot-field { flex: 0 0 auto; }
.bp-lot-row .bp-lot-ld,
.bp-lot-row .bp-lot-cd { align-items: flex-start; }
.bp-lot-ld > span:not(.bp-lot-field),
.bp-lot-cd > span:not(.bp-lot-field) { display: inline-flex; align-items: center; min-height: var(--bp-lot-control-height); flex-shrink: 0; }
.bp-lot-row .bp-lot-ld,
.bp-lot-row .bp-lot-cd,
.bp-lot-row .bp-lot-vide { display: none; }
.bp-lot-row[data-strategy="LD"] .bp-lot-ld { display: flex; }
.bp-lot-row[data-strategy="CD"] .bp-lot-cd { display: flex; }
.bp-lot-row[data-strategy="VIDE"] .bp-lot-vide { display: flex; }
/* Mêmes colonnes pour le montant, l'unité, l'occupation et le résultat en LD/CD. */
.bp-revenue-grid .bp-lot-ld,
.bp-revenue-grid .bp-lot-cd { grid-template-columns: 5.5rem 3rem .75rem 4rem 5rem .75rem 7.75rem; column-gap: .375rem; align-items: center; }
.bp-revenue-grid[data-strategy="LD"] .bp-lot-ld,
.bp-revenue-grid[data-strategy="CD"] .bp-lot-cd { display: grid; }
.bp-revenue-grid .bp-lot-field { width: 100%; }
.bp-revenue-grid .bp-lot-ld > :nth-child(3),
.bp-revenue-grid .bp-lot-cd > :nth-child(3),
.bp-revenue-grid .bp-lot-ld > :nth-child(6),
.bp-revenue-grid .bp-lot-cd > :nth-child(6) { justify-content: center; }
.bp-revenue-grid .bp-lot-income { justify-content: flex-end; }


.simulation-section-title { margin:20px 0 8px;font-size:13px;font-weight:600;color:var(--ink-2) }
#simulation-fields label { display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-size:12px;line-height:1.5;color:var(--ink-2);font-weight:500;min-width:0 }
#simulation-fields .grid { column-gap:18px;row-gap:20px }
#simulation-fields input, #simulation-fields select { display:block;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:10px 12px;border:1px solid #94a3b8;border-radius:9px;background:#f8fafc;color:#0f172a;font-family:inherit;font-size:15px;font-weight:500;line-height:1.4 }
html[data-theme="dark"] #simulation-fields input, html[data-theme="dark"] #simulation-fields select { background:#0b1220 !important;border-color:#64748b !important;color:var(--ink) !important }
#simulation-fields input:focus, #simulation-fields select:focus { outline:2px solid var(--ink-2);outline-offset:2px }
#buyerOnboarding label { font-weight:500;color:var(--ink-2) }
#buyerOnboarding input { border-color:#94a3b8 !important;background:#f8fafc !important;color:var(--ink) !important;font-weight:500 }
html[data-theme="dark"] #buyerOnboarding input { border-color:#64748b !important;background:#0b1220 !important }

.simulation-tabs { display:flex;gap:5px;margin-top:16px;border-bottom:1px solid var(--hairline);flex-shrink:0 }
.simulation-tabs button { flex:1;padding:10px 3px;font-size:12px;border-bottom:2px solid transparent;color:var(--ink-2) }
.simulation-tabs button[aria-selected="true"] { border-color:var(--ink);color:var(--ink);font-weight:700 }
#simulation-fields [hidden] { display:none }

@media (max-width: 640px) {
  .field-reference-help::before { inset: -8px; }
  .bp-lot-row { --bp-lot-control-height: 44px; }
  .mfield input, .mfield select, .mfield textarea,
  .management-panel input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .management-panel select, .management-panel textarea { min-height: 44px; font-size: 16px; }
}

/* Charges : des groupes complets, sans cellule de titre au milieu des champs. */
.champs-grille.opex-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem 1.25rem;
}
.opex-grid > label { min-width: 0; }
.opex-grid input[type="number"] { max-width: none; width: 100%; }
.management-panel .opex-grid > label > .field-control:has(> input[type="number"]) { max-width: none; }
.opex-utilities > label > span { flex-wrap: wrap; }
.opex-utility-hint { flex-basis: 100%; }

.opex-breakdown { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.opex-summary-section { min-width: 0; border: 1px solid var(--hairline); border-radius: .75rem; padding: .75rem 1rem; }
.opex-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-weight: 600; color: var(--ink-2); }
.opex-summary-heading h3, .opex-summary-heading h4 { margin: 0; font-size: inherit; font-weight: inherit; }
.opex-summary-lines { margin-top: .375rem; }
.opex-summary-lot { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--hairline); }
.opex-summary-lot .opex-summary-heading { font-size: .8125rem; }
.opex-summary-lot .opex-summary-lines { padding-left: .75rem; }
.opex-breakdown .tabular-nums { white-space: nowrap; margin-left: .75rem; }
.opex-breakdown .opex-total { border-top: 1px solid var(--hairline); padding-top: .75rem; }

.champs-grille.opex-utilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 75rem) {
  .champs-grille.opex-utilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 35rem) {
  .champs-grille.opex-utilities { grid-template-columns: minmax(0, 1fr); }
}

.opex-headline { white-space: nowrap; }

.revenue-table { min-width: 67rem; }
.bp-lot-income { justify-content: flex-end; white-space: nowrap; }
.opex-lot-charges { display: grid; gap: .75rem; margin-top: .75rem; }
.opex-lot-card { padding: 1rem; border: 1px solid var(--hairline); border-radius: .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem 1rem; }
.opex-lot-heading, .opex-lot-note { grid-column: 1 / -1; }
.opex-lot-card > label { min-width: 0; }
.opex-lot-card .bp-lot-utilities { display: contents; }
.opex-lot-card > label,
.opex-lot-card .bp-lot-utilities > label { display: flex; flex-direction: column; gap: .25rem; justify-content: flex-end; }
.opex-lot-card .bp-lot-utilities .field-control { width: 100%; max-width: none; }
.opex-lot-card .bp-lot-utilities input { width: 100%; }
.opex-lot-card .bp-lot-utilities select { width: 100%; }
.opex-lot-card input, .opex-lot-card select { height: 2.375rem; }

.management-panel .opex-lot-card label > .field-control:has(> input[type="number"]) { max-width: none; }
.opex-lot-card input:disabled { opacity: .5; }

[data-opex-form] [hidden] { display: none !important; }
/* Intitulés en haut, montants en bas de la rangée : un libellé qui revient
   à la ligne ne décale plus son champ par rapport aux autres fluides. */
.opex-utilities > label { justify-content: space-between; }
.opex-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: 3px 0; }

.opex-lot-ld { grid-column: 1 / -1; }

.bp-lot-name { display: flex; align-items: center; min-height: var(--bp-lot-control-height); overflow-wrap: anywhere; }

.surface-breakdown-grid { display: grid; grid-template-columns: minmax(12rem, 1fr) 7rem 12rem 28px; column-gap: .75rem; align-items: center; min-width: 36rem; }