/* =============================================================================
   Charte Comabat
   -----------------------------------------------------------------------------
   Un fond blanc chaud, un gris pose, un seul point orange. L'orange est la seule
   couleur vive : il est reserve au bouton principal, au point du logo et aux
   quelques chiffres qui comptent. Hors aplat, il couvre au plus un dixieme de la
   surface. Les tons sombres sont l'ardoise, en aplat, et l'encre nuit, pour
   ecrire sur l'orange. Jamais de noir, jamais de blanc pur.
   ========================================================================== */
:root {
  --orange: #ff6600;        /* accent unique : bouton principal, point du logo */
  --orange-deep: #c44f00;   /* texte orange sur fond clair                     */
  --brown: #975020;         /* surtitres, libelles en capitales                */
  --ink: #636363;           /* titres et texte : du gris, pas du noir          */
  --ink-strong: #555555;
  --navy: #182230;          /* texte pose sur l'orange                         */
  --slate: #243844;         /* aplats sombres : barre haute, bandeaux          */
  --slate-soft: #c6cfd5;    /* texte secondaire sur ardoise                    */
  --paper: #fffdfa;         /* fond de page : blanc chaud                      */
  --pale: #faf7f2;
  --sand: #f5f1ea;          /* fonds alternes, en-tetes de tableau             */
  --card: #ffffff;          /* cartes qui doivent se detacher                  */
  --peach: #ffe4cf;         /* pastilles, encarts                              */
  --peach-soft: #fff5eb;
  --line: #e9dfd5;          /* un filet suffit a delimiter une carte           */

  /* Couleurs de service : elles disent un etat, pas la marque. Petites surfaces
     seulement, comme le prevoit la charte pour les tons d'appoint. */
  --sage: #5f8457;
  --sage-deep: #466639;
  --sage-pale: #eef2e6;
  --brique: #a8453c;
  --brique-pale: #fbece9;

  /* Noms hérités, conservés pour que les composants existants suivent la charte
     sans etre tous reecrits : le ton change, pas la structure. */
  --brand: var(--orange);
  --brand-dark: var(--orange-deep);
  --accent: var(--orange-deep);
  --olive: var(--sage);
  --olive-dark: var(--sage-deep);
  --muted: #8a857f;         /* gris chaud : le gris froid jurait avec le papier */
  --bg: var(--paper);

  /* Angles arrondis genereux, bordures plutot qu'ombres : une ombre Comabat est
     presque invisible, c'est le filet qui tient la carte. */
  --radius: 14px;
  --radius-btn: 10px;
  --shadow: 0 1px 2px rgba(36, 56, 68, .04), 0 4px 14px rgba(36, 56, 68, .035);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Inter partout, comme la charte. Arial en secours : c'est elle qui prend le
     relais dans les courriers et les documents Word, autant garder le meme pli. */
  font: 15px/1.6 Inter, system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Titres en Inter 600, interlettrage negatif. Un seul grand titre par page. */
h1, h2, h3, .amount, .total { letter-spacing: -.02em; }

/* Le bleu souligne du navigateur n'est pas une couleur de la charte : dans la
   page, un lien de texte reste du texte et ne se souligne qu'au survol. Les
   boutons portent une classe, leur regle est plus forte et l'emporte. */
main a { color: var(--brand-dark); text-decoration: none; }
main a:hover { text-decoration: underline; }

/* ---------- barre superieure ----------
   Un aplat d'ardoise, pas d'orange : la barre est sur toutes les pages, elle
   consommerait a elle seule le dixieme de surface reserve a l'accent. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 28px; background: var(--slate); color: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
/* Le logo : « comabat. » en minuscules, interlettrage serre, point orange. */
.brand { cursor: pointer; line-height: 1; }
.brand b {
  font-weight: 600; font-size: 21px; letter-spacing: -.06em;
  text-transform: lowercase;
}
/* le point final, et lui seul, porte l'orange */
.brand b::after { content: "."; color: var(--orange); }
.brand span {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .02em;
  text-transform: none; color: var(--slate-soft); margin-top: 3px;
}
/* La declinaison partenaire : « comabat. / archi ». Le mot reste gris, c'est la
   barre oblique qui porte l'orange — un second mot orange ferait deux accents
   cote a cote et la marque perdrait son point. */
.marque-suffixe {
  font-style: normal; font-weight: 400; font-size: 19px;
  letter-spacing: -.04em; color: var(--slate-soft);
}
.marque-suffixe::before {
  content: "/"; color: var(--orange); margin: 0 6px 0 5px; font-weight: 500;
}

.topbar-right { font-size: 12.5px; color: var(--slate-soft); text-align: right; }
/* Chez un partenaire, la barre ne compte pas les artisans : elle dit chez qui il
   travaille et comment le joindre. C'est la seule carte de visite de l'ecran. */
.topbar-right .moe-nom { display: block; font-size: 13px; font-weight: 600; color: var(--paper); }
.topbar-right .moe-metier { display: block; font-size: 11px; letter-spacing: .01em; }
.topbar-right .moe-contact { display: block; font-size: 11.5px; margin-top: 2px; }
/* un numero de telephone ne se coupe pas en deux : chaque lien reste d'un bloc */
.topbar-right .moe-contact a { color: var(--paper); opacity: .8; text-decoration: none; white-space: nowrap; }
.topbar-right .moe-contact a:hover { opacity: 1; text-decoration: underline; }
.topbar-right .moe-contact a + a::before {
  content: "·"; margin: 0 7px; opacity: .55; text-decoration: none;
}

/* le role d'un compte : une ligne, parce qu'on ne le change pas souvent */
.panel-role { max-width: 640px; }
.role-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.role-ligne select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-family: inherit; font-size: 14px; background: var(--card); min-width: 220px;
}
.role-ligne .flash { margin: 0; }

/* ---------- les reperes de l'architecte ----------
   La surface et l'annee : deux faits qu'il connait et que le metre ne dit pas.
   Poses sous le titre, en petit : ce sont des champs qu'on remplit une fois. */
.pj-reperes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px;
}
.pj-reperes label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0;
}
.pj-reperes input {
  width: 72px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--card); text-align: right;
}
.pj-reperes input:focus { outline: 0; border-color: var(--orange); }
.pj-reperes-aide { font-size: 12px; }

/* le cout au metre carre : l'etalon avec lequel un architecte juge un budget */
.au-metre {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  display: flex; align-items: baseline; gap: 8px;
}
.au-metre strong { font-size: 19px; color: var(--brand-dark); letter-spacing: -.02em; }
.au-metre .muted { font-size: 12.5px; }

/* d'ou viennent les prix : la seule chose qui distingue d'une base nationale */
.origine-prix {
  margin: 8px 0 0; padding: 9px 11px; background: var(--pale);
  border-left: 2px solid var(--peach); border-radius: 0 6px 6px 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-strong);
}
.origine-prix span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

/* Le poids de chaque ensemble : « 8 000 € » ne se discute pas, « 24 % » si.
   Un nombre gris, et rien d'autre — une jauge dans une liste de sept lignes
   ajoute du bruit a une information que le chiffre porte deja. */
.ensemble-montant small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* ---------- ce qui n'est pas compris dans le montant ----------
   Ce ne sont pas des erreurs de saisie, ce sont les limites de l'estimation :
   pas de rouge, pas de compteur. Une liste qu'on apprend a craindre est une
   liste qu'on finit par fermer sans lire. */
.panel-vigilance h3 { color: var(--brown); }
.vig-ligne { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.vig-ligne:last-of-type { border-bottom: 0; }
.vig-ligne strong { display: block; font-size: 13.5px; color: var(--ink-strong); }
.vig-raison {
  display: inline-block; margin: 3px 0 5px; padding: 1px 8px; border-radius: 999px;
  background: var(--peach-soft); color: var(--brown); font-size: 11.5px; font-weight: 600;
}
.vig-ligne p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.vig-ligne small { font-size: 11px; color: var(--muted); line-height: 1.4; display: block; }
.vig-manque { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---------- passer la main au courtier ----------
   Le pivot du modele, en fin de colonne : la colonne de droite se lit de haut en
   bas comme une phrase — voici le budget, de quoi il est fait, ce qu'il ne
   couvre pas, et qui prend la suite. Pas un second bouton orange : il se
   distingue par sa place et sa largeur, pas par sa couleur. */
.panel-passer { border-left: 4px solid var(--orange); }
.panel-passer strong { display: block; font-size: 14.5px; color: var(--ink-strong); margin-bottom: 4px; }
.panel-passer p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.panel-passer input {
  width: 100%; padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px;
  background: var(--paper);
}
.panel-passer input:focus { outline: 0; border-color: var(--orange); }
.btn-passer { width: 100%; border-color: var(--orange); color: var(--brand-dark); font-weight: 600; }
.btn-passer:hover { background: var(--peach-soft); }
/* une fois transmis, le panneau se calme : il n'appelle plus a rien */
.panel-passer.fait { border-left-color: var(--sage); background: var(--sage-pale); }
.panel-passer.fait strong { color: var(--sage-deep); }

/* ---------- le client d'un projet ----------
   Un chiffrage sans nom ne mene nulle part : la ligne est discrete mais jamais
   absente, et le telephone se compose d'un clic. */
.ligne-client {
  margin-top: 5px; font-size: 13px; color: var(--ink-strong);
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline;
}
.ligne-client strong { color: var(--brown); font-weight: 600; }
.ligne-client a { color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
.ligne-client a:hover { text-decoration: underline; }

/* la case d'accord : une phrase a lire, pas une mention a survoler */
.accord-ligne {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0;
  font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-strong);
}
.accord-ligne input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--orange); }

/* Au telephone la barre ne tient pas sur une ligne : elle se plie en trois
   rangees — la marque, puis la carte de visite et le compte, puis la
   navigation. Sans cela les coordonnees sortent de l'ecran, et c'est justement
   ce qu'un partenaire ne doit pas perdre. */
/* La barre du haut demande 860 px pour tenir sur une ligne : la marque, cinq
   entrees de navigation et le bloc de droite. En dessous — tablette en portrait
   comprise — elle se plie en trois rangees plutot que de pousser la page hors
   de l'ecran. La navigation passe a la ligne au lieu de defiler : « Admin »
   sortait a droite, et rien ne disait qu'il fallait faire glisser la barre. */
@media (max-width: 880px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .topbar-end { order: 2; width: 100%; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .topnav { order: 3; width: 100%; flex-wrap: wrap; gap: 4px; }
  .topnav a { padding: 6px 11px; font-size: 13px; }
  .topbar-right { text-align: left; font-size: 12px; }
  .user-chip { flex-direction: column; align-items: flex-end; gap: 3px; white-space: normal; }
}
@media (max-width: 720px) {
  /* les pastilles de lots debordaient du cadre : une par ligne */
  .lot-nav-ligne { width: 100%; }
  /* le reglage du coefficient tenait sur une ligne de 630 px : il se plie */
  .coef-champ { flex-wrap: wrap; }
  .coef-champ > * { flex: 0 1 auto; }
  /* un tableau trop large defile dans son cadre, pas en emportant la page */
  .table-cadre .ref-table { min-width: 560px; }
}
.topnav { display: flex; gap: 6px; }
.topnav a {
  color: var(--paper); text-decoration: none; font-size: 13.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 6px; opacity: .82; transition: .15s;
}
.topnav a:hover { opacity: 1; background: rgba(255, 255, 255, .13); }
.topnav a.on { opacity: 1; background: rgba(255, 255, 255, .2); }

/* ---------- espace artisans ---------- */
.artisan-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
}
.artisan-card h3 { margin: 0 0 3px; font-size: 16.5px; }
.lot-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chip {
  background: var(--peach-soft); color: var(--brown); border-radius: 20px;
  padding: 3px 11px; font-size: 11.5px; font-weight: 600;
}
.chip.grey { background: var(--line); color: var(--muted); }

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 34px 24px; text-align: center; cursor: pointer; transition: .15s;
  margin-bottom: 18px;
}
.dropzone:hover, .dropzone.hot { border-color: var(--accent); background: var(--peach-soft); }
.dropzone strong { display: block; font-size: 15.5px; margin-bottom: 5px; }
.dropzone .hint { color: var(--muted); font-size: 13px; }

/* ---------- référence de prix ---------- */
.ref-table { width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ref-table th, .ref-table td { padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.ref-table th { background: var(--sand); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-strong); }
.ref-table td.num, .ref-table th.num { text-align: right; white-space: nowrap; }
.ref-table tr:last-child td { border-bottom: 0; }
.ref-lot { font-size: 11.5px; color: var(--muted); display: block; }
.ecart { font-weight: 700; }
.ecart.cher { color: var(--brique); }
.ecart.bon { color: var(--olive-dark); }
.detail-prix { font-size: 12px; color: var(--muted); }

.flash { border-radius: 8px; padding: 12px 15px; margin-bottom: 15px; font-size: 13.5px; }
.flash.ok { background: var(--sage-pale); color: var(--olive-dark); border: 1px solid var(--sage); }
.flash.err { background: var(--brique-pale); color: var(--brique); border: 1px solid var(--brique); }

/* ---------- structure ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 26px 22px 80px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
h1 { font-size: 25px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 14px; }
.muted { color: var(--muted); font-size: 13.5px; margin: 0; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- boutons ----------
   L'orange ne sert qu'ici : un bouton principal par ecran. Le texte qu'il porte
   est en encre nuit, pas en blanc — sur l'orange, le blanc ne tient pas le
   contraste en petit corps. */
.btn {
  border: 0; border-radius: var(--radius-btn); padding: 10px 18px; font-size: 14px;
  font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s;
}
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: #e65c00; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--sand); }
.btn-danger { background: var(--brique-pale); color: var(--brique); }
.btn-danger:hover { background: var(--brique-pale); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------- cartes projet ---------- */
.project-grid { display: grid; gap: 12px; }
.project-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; cursor: pointer; transition: .15s;
  border-left: 4px solid transparent;
}
.project-card:hover { transform: translateY(-1px); border-left-color: var(--accent); }
.project-card h3 { margin: 2px 0 3px; font-size: 17px; }
.project-card .meta { font-size: 12.5px; color: var(--muted); }
.estimate { text-align: right; white-space: nowrap; }
.estimate small { display: block; color: var(--muted); font-size: 11.5px; }
.estimate .amount { font-size: 21px; font-weight: 700; }

/* ---------- navigation par lot ---------- */
.lot-nav {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px;
  background: var(--card); padding: 13px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.lot-nav button {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 20px; padding: 6px 13px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: .15s;
}
.lot-nav button:hover { border-color: var(--accent); }
.lot-nav button.active { background: var(--brand); color: var(--paper); border-color: var(--brand); }
.lot-nav button .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-left: 6px; vertical-align: middle;
}
.lot-nav button.active .dot { background: var(--card); }

/* ---------- formulaire ---------- */
/* overflow visible : la bulle des prix par entreprise dépasse de l'en-tête */
.lot-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: visible; }
.lot-header {
  background: var(--ink); color: var(--paper); padding: 15px 22px; border-radius: var(--radius) var(--radius) 0 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.lot-header h2 { margin: 0; font-size: 17px; }

/* ---------- passer d'un lot à l'autre ---------- */
.lot-titre { display: flex; align-items: center; gap: 10px; }
.pager-mini {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: transparent; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
.pager-mini:hover:not([disabled]) { background: rgba(255, 255, 255, .15); }
.pager-mini[disabled] { opacity: .3; cursor: default; }
.lot-pager {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 22px; border-top: 1px solid var(--line); background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
}
.lot-pager .btn { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.lot-pager .btn[disabled] { opacity: .45; cursor: default; }
.pager-sens { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.pager-nom { display: block; font-weight: 700; }
.lot-pager .btn span { line-height: 1.25; }
.pager-texte { display: flex; flex-direction: column; }
.lot-pager .btn-primary .pager-texte { text-align: right; }
.pager-pos { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.group-title {
  background: var(--sand); padding: 9px 22px; font-weight: 700;
  font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-strong);
}
.question {
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.question:last-child { border-bottom: 0; }
.q-label { font-weight: 600; font-size: 14.5px; }
.q-help { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.q-input { flex-shrink: 0; }

/* ---------- le « ? » d'une question et sa definition ---------- */
.question { position: relative; }
.aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 7px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: 10.5px; font-weight: 700; line-height: 1; cursor: help;
  vertical-align: middle; position: relative; transition: .15s;
}
.aide:hover, .aide:focus { border-color: var(--brand); color: var(--brand); background: var(--peach-soft); }
.bulle-aide { width: 360px; padding: 11px 13px 12px; font-weight: 400; cursor: auto; }
.aide-terme { display: block; font-size: 13.5px; color: var(--brand-dark); margin-bottom: 4px; }
.aide-simple { display: block; line-height: 1.5; }
.aide-technique { display: block; line-height: 1.5; color: var(--ink-strong); font-size: 12.5px; }
.aide-renvois { margin: 2px 0 0; padding: 0; list-style: none; }
.aide-renvois li { padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.aide-renvois li:last-child { border-bottom: 0; }
.aide-renvois a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.aide-renvois a:hover { text-decoration: underline; }
.aide-renvois em { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 5px; }
.aide-renvois span { display: block; color: var(--muted); line-height: 1.45; margin-top: 1px; }
/* la question vers laquelle un renvoi vient d'emmener */
.question-visee { background: var(--peach); transition: background .4s; }

.choices { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.choices button {
  border: 1px solid var(--line); background: var(--pale); color: var(--ink);
  padding: 7px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: .12s;
}
.choices button:hover { border-color: var(--accent); }
.choices button.on { background: var(--brand); border-color: var(--brand); color: var(--paper); font-weight: 600; }

.num-wrap { display: flex; align-items: center; }
.num-wrap input {
  width: 120px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px 0 0 6px;
  text-align: right; font-family: inherit; font-size: 14px; background: var(--pale);
}
.num-wrap input:only-child { border-radius: 6px; }
.num-wrap input:focus { outline: 0; border-color: var(--accent); background: var(--card); }
.num-wrap .unit {
  background: var(--sand); border: 1px solid var(--line); border-left: 0;
  padding: 8px 11px; border-radius: 0 6px 6px 0; font-size: 13px; color: var(--muted);
}
select.q-select {
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px;
  font-family: inherit; font-size: 14px; background: var(--pale); min-width: 230px;
}

/* ---------- recapitulatif ---------- */
.summary { position: sticky; top: 74px; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
/* Une colonne de grille refuse par defaut de descendre sous la largeur de son
   contenu : la liste des lots gardait sa largeur de bureau et debordait de
   l'ecran au telephone, en emportant la page avec elle. */
.layout > *, .layout-lots > * { min-width: 0; }

/* ---------- projet : les lots dans une colonne à gauche, toujours à portée ---------- */
main:has(.layout-lots) { max-width: 1480px; }
.layout-lots { grid-template-columns: 240px minmax(0, 1fr) 320px; }
.lot-nav-cote {
  flex-direction: column; flex-wrap: nowrap; gap: 2px; margin-bottom: 0; padding: 10px 8px;
  position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow-y: auto;
}
.lot-nav-titre {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted);
}
.lot-nav-titre span { background: var(--sand); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.lot-nav-ligne { display: flex; align-items: stretch; gap: 1px; }
.lot-nav-ligne > button[data-lot] { flex: 1; min-width: 0; }
.lot-nav-cote button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  text-align: left; border: 0; border-radius: 8px; padding: 7px 8px; font-size: 13px; line-height: 1.25;
}
/* la corbeille reste discrete tant qu'on ne passe pas sur la ligne.
   Selecteur a deux classes : sinon « .lot-nav-cote button » l'emporte et sa
   largeur de 100 % ecrase le bouton du lot. */
.lot-nav-cote .lot-nav-suppr {
  flex: 0 0 26px; width: 26px; justify-content: center; border: 0; background: none;
  border-radius: 8px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
  opacity: .25; transition: .15s;
}
.lot-nav-ligne:hover .lot-nav-suppr { opacity: .75; }
.lot-nav-cote .lot-nav-suppr:hover,
.lot-nav-cote .lot-nav-suppr:focus-visible { opacity: 1; background: var(--brique-pale); }
.lot-nav-cote button:hover { background: var(--peach-soft); }
.lot-nav-cote button.active { background: var(--brand); color: var(--paper); }
.lot-nav-nom { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.lot-nav-num {
  flex: none; min-width: 18px; font-size: 11px; font-weight: 700; color: var(--muted); text-align: right;
}
.lot-nav-cote button.active .lot-nav-num { color: rgba(255, 255, 255, .8); }
.lot-nav-prix { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lot-nav-cote button.active .lot-nav-prix { color: var(--paper); font-weight: 600; }
.lot-nav-cote button.chiffre:not(.active) .lot-nav-num { color: var(--brand); }
/* écran moyen : colonnes resserrées, la liste reste à gauche */
@media (max-width: 1320px) {
  .layout-lots { grid-template-columns: 205px minmax(0, 1fr) 290px; gap: 16px; }
  .lot-nav-cote button { font-size: 12.5px; }
}
/* petit écran : la liste repasse au-dessus, en pastilles */
@media (max-width: 1024px) {
  .layout-lots { grid-template-columns: minmax(0, 1fr) 320px; }
  .lot-nav-cote {
    grid-column: 1 / -1; position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px;
  }
  .lot-nav-titre { width: 100%; }
  .lot-nav-cote button { width: auto; border: 1px solid var(--line); border-radius: 20px; }
}
@media (max-width: 980px) { .layout-lots { grid-template-columns: 1fr; } }

.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.total { font-size: 26px; font-weight: 700; }
.total small { font-size: 13px; font-weight: 400; color: var(--muted); }

.supplier-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.supplier-row:last-child { border-bottom: 0; }
.supplier-row .name { font-weight: 600; }
.supplier-row .sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }

.product-row { font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.product-row:last-child { border-bottom: 0; }
.product-row .qty { color: var(--muted); font-size: 12px; }

.empty { text-align: center; padding: 46px 20px; color: var(--muted); }

/* ---------- modales ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(25, 30, 40, .5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--card); border-radius: 12px; padding: 26px; width: 100%; max-width: 430px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  /* une fiche longue (documents de conformité) doit rester entièrement
     atteignable : on borne la hauteur et on fait défiler l'intérieur */
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-box-lg { max-width: 720px; }
.modal-box label { display: block; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; }
.modal-box input[type=text], .modal-box input[type=email],
.modal-box input[type=tel], .modal-box input[type=date], .modal-box select {
  width: 100%; margin-top: 5px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 400;
  background: var(--card);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.lot-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; max-height: 46vh; overflow-y: auto; margin: 14px 0;
  padding: 4px; border: 1px solid var(--line); border-radius: 8px;
}
.lot-picker label {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; margin: 0;
}
.lot-picker label:hover { background: var(--pale); }

@media print {
  .topbar, .lot-nav, .row-actions, .modal { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  .panel, .lot-card { box-shadow: none; border: 1px solid var(--line); }
}

/* ---------- prix de référence : repère, jamais confondu avec une offre ---------- */
.lot-references { background: var(--peach-soft); border-top: 1px solid var(--line); }
.supplier-row.reference .name { font-style: italic; }
.supplier-row.reference > span:last-child { color: var(--brand-dark); }
.panel-reference { border-left: 3px solid var(--accent); }

/* ---------- prix national : toujours en tête, en grand ---------- */
.pastille.attente { background: var(--peach); color: var(--brown); }
.admin-table th.num, .admin-table td.num { text-align: right; }

.panel-national { border-left: 4px solid var(--brand); background: var(--peach-soft); }
.panel-national h3 { color: var(--brand-dark); }
.total.national { font-size: 34px; color: var(--brand-dark); letter-spacing: -.5px; }
.estimate .amount.national { display: block; font-size: 26px; color: var(--brand-dark); }
.lot-header .estimate small { color: var(--slate-soft); }
.lot-header .estimate small.fourchette-lot-nat { color: var(--paper); opacity: .85; font-size: 12px; margin-top: 1px; }
.fourchette-nationale { margin-top: 4px; font-size: 14px; color: var(--brand-dark); }
.fourchette-nationale span { text-transform: uppercase; font-size: 11px; letter-spacing: .4px; color: var(--muted); margin-right: 4px; }
.fourchette-nationale strong { font-size: 15px; }
.lot-header .amount.national { color: var(--paper); }
.fourchette-lot { display: inline-block; margin-top: 3px; font-size: 13px; color: var(--slate-soft);
  border-bottom: 1px dotted var(--slate-soft); }

/* ---------- bulle : le prix de chaque entreprise au survol ---------- */
.survol { position: relative; cursor: help; outline: none; }
.survol .bulle {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); right: 0;
  width: 340px; max-height: 380px; overflow-y: auto; text-align: left; white-space: normal;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 34, 40, .18); padding: 8px 12px 10px;
  font-size: 13px; font-weight: 400; letter-spacing: 0;
}
.survol:hover .bulle, .survol:focus .bulle, .survol:focus-within .bulle { display: block; }
.survol.vers-haut .bulle { top: auto; bottom: calc(100% + 6px); }
.bulle-titre { display: block; margin: 6px 0 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.bulle-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--line); }
.bulle-ligne:last-child { border-bottom: 0; }
.bulle-ligne strong { white-space: nowrap; font-size: 13.5px; }
.bulle-ligne.complet { background: var(--peach-soft); margin: 0 -6px; padding: 5px 6px; border-radius: 4px; }
.bulle-ligne.reference .bulle-nom, .bulle-ligne.reference strong { font-style: italic; color: var(--brand-dark); }
.bulle-nom em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.bulle-vide { display: block; color: var(--muted); padding: 4px 0; }

/* ---------- fenêtre de relance ---------- */
.modal-large { max-width: 640px; }
.modal-box textarea {
  width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 6px; font-family: "Consolas", "Menlo", monospace; font-size: 12.5px;
  line-height: 1.5; resize: vertical; background: var(--paper); color: var(--ink);
}
.modal-box textarea:focus { outline: 0; border-color: var(--accent); background: var(--card); }

/* ---------- coefficient de courtage ---------- */
.coef-bar {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 20px; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap; border-left: 4px solid var(--brand);
}
.coef-bar strong { display: block; font-size: 14.5px; }
.coef-bar .muted { font-size: 12.5px; }
.coef-champ { display: flex; gap: 8px; align-items: center; }
.coef-champ input {
  width: 90px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px;
  text-align: right; font-family: inherit; font-size: 15px; font-weight: 700;
  background: var(--pale);
}
.coef-champ input:focus { outline: 0; border-color: var(--accent); background: var(--card); }
.coef-champ label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.coef-champ label input { width: 62px; font-size: 14px; }
.coef-total { font-weight: 700; font-size: 15px; padding: 0 4px; }

.consult-date { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; }
.consult-date input { margin-left: 8px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 7px; font-family: inherit; font-size: 13.5px; font-weight: 400; }

/* ---------- qui peut faire ce lot, en colonne de droite ---------- */
.panel-qui .qui-ligne { display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
  padding: 5px 0; border-bottom: 1px solid var(--line); }
.panel-qui .qui-ligne:last-child { border-bottom: 0; }
.panel-qui .qui-nom { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.panel-qui .qui-prix { font-size: 12.5px; font-weight: 700; color: var(--brand-dark);
  white-space: nowrap; }
.panel-qui .qui-couv { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.panel-qui .partiel .qui-nom, .panel-qui .partiel .qui-prix { color: var(--muted); font-weight: 500; }

/* ---------- murs à monter ---------- */
.murs { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  margin: 10px 0 14px; background: var(--paper); }
.murs-titre { margin-bottom: 8px; }
.murs-titre strong { font-size: 14px; color: var(--brand-dark); }
.murs-titre .q-help { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.murs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.murs-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 600; padding: 0 6px 5px; }
.murs-table th.r, .murs-table td.r { text-align: right; }
.murs-table td { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.murs-table tfoot td { border-bottom: 0; padding-top: 9px; }
.murs-table input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px;
  font-family: inherit; font-size: 13.5px; color: var(--ink); }
.murs-table td:first-child input { width: 100%; }
.murs-table td.r input { width: 62px; text-align: right; }
.murs-table .mur-surface { color: var(--brand-dark); font-weight: 600; white-space: nowrap; }
.mur-retirer { border: 0; background: none; color: var(--muted); font-size: 17px; cursor: pointer;
  line-height: 1; padding: 0 4px; }
.mur-retirer:hover { color: var(--brique); }

/* ---------- nombre d'installations d'un lot ---------- */
.installations { border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; background: var(--paper); }
.installations.active { border-left-color: var(--brand); background: var(--peach-soft); }
.installations > label { display: flex; align-items: center; gap: 12px; }
.inst-titre { font-size: 14.5px; font-weight: 600; color: var(--brand-dark); }
.installations input { width: 62px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; font-family: inherit; font-size: 15px; text-align: center; color: var(--ink); }
.inst-effet { font-size: 13px; color: var(--muted); margin: 9px 0 6px; }
.inst-effet ul { margin: 5px 0 0; padding-left: 18px; }
.inst-effet li { margin-bottom: 3px; }
.inst-effet li span { color: var(--brand-dark); font-weight: 600; margin-left: 6px; }
.installations > .muted { font-size: 12.5px; margin: 0; }


/* ---------- fiche d'un courtier ---------- */
.fiche-reperes { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.repere-carte { flex: 1 1 160px; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); border-top: 3px solid var(--brand); padding: 12px 14px; }
.repere-carte .lib { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted); }
.repere-carte .val { display: block; font-size: 21px; font-weight: 700; color: var(--brand-dark);
  line-height: 1.3; }
.repere-carte .note { font-size: 11.5px; color: var(--muted); }
.repere-carte .note.ok { color: var(--sage-deep); font-weight: 600; }
.admin-table a { color: var(--brand-dark); text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }
/* Un tableau de huit colonnes ne rentre pas sur une tablette : il faisait
   glisser toute la page, et la colonne des boutons devenait inatteignable.
   C'est le cadre qui defile maintenant, pas l'ecran. */
.table-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-cadre .admin-table { min-width: 720px; }

/* ---------- consultation du projet d'un autre courtier ---------- */
.bandeau-lecture { background: var(--peach-soft); border-left: 4px solid var(--brown); color: var(--brown);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13.5px; }
.bloc-courtier { margin-bottom: 18px; }
.bloc-courtier h3 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.bloc-courtier h3 .muted { font-size: 12.5px; font-weight: 400; }

/* ---------- mon profil ---------- */
.panel-profil { max-width: 720px; }
.panel-profil .col-2 { grid-column: 1 / -1; }
.panel-profil label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.panel-profil input { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 14px; font-family: inherit; }
.panel-profil .btn { margin-top: 14px; }

/* ---------- fiche entreprise ---------- */
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fiche-infos { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 6px;
  font-size: 12.5px; color: var(--muted); }
.fiche-infos span::before { content: "· "; color: var(--slate-soft); }
.fiche-infos span:first-child::before { content: ""; }
.fiche-notes { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 5px; }
.sans-bordereau { background: var(--peach-soft); color: var(--brown); border-radius: 20px;
  padding: 3px 11px; font-size: 11.5px; font-weight: 600; }

/* ---- tableau de bord & statut d'affaire ----
   Les trois états se distinguent par la VALEUR, pas par la teinte : la charte
   Comabat n'a ni vert ni rouge, et le tableau de bord est la page la plus
   regardée de l'outil — y poser deux couleurs étrangères, c'est les installer
   dans la marque.
   · en cours  : ardoise, l'affaire est vivante et on travaille dessus ;
   · gagné     : orange foncé, c'est la bonne nouvelle, elle mérite l'accent ;
   · perdu     : gris chaud, l'affaire est sortie du champ. Un dossier perdu n'a
                 pas à crier en rouge chaque fois que Tony ouvre son outil. */
:root {
  --s-encours: var(--slate);
  --s-gagne:   var(--orange-deep);
  --s-perdu:   #b4aca3;
}

.tbd {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 4px 0 18px;
}
.tbd-tuile {
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; text-align: left;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  font: inherit; color: inherit; transition: .15s;
}
button.tbd-tuile:hover { transform: translateY(-1px); }
.tbd-tuile.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.tbd-tuile.tbd-taux { cursor: default; }
.tbd-tuile.s-encours { border-top-color: var(--s-encours); }
.tbd-tuile.s-gagne   { border-top-color: var(--s-gagne); }
.tbd-tuile.s-perdu   { border-top-color: var(--s-perdu); }
.tbd-titre { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tbd-nb { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tbd-montant { font-size: 13px; color: var(--muted); }
.filtre-actif { margin: -8px 0 12px; }
.filtre-actif a { color: var(--brand-dark); }

/* ---------- le controle d'un bordereau avant enregistrement ----------
   Les lignes douteuses d'abord : une virgule oubliee se voit en haut de l'ecran
   ou ne se voit jamais. Trois couleurs seulement — l'orange de la charte pour
   ce qui alerte, la brique pour ce qui est presque certainement faux. */
.ctrl-bilan { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ctrl-tuile {
  flex: 1 1 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px;
}
.ctrl-tuile .lib {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
}
.ctrl-tuile .val { display: block; font-size: 24px; font-weight: 700; color: var(--ink-strong); line-height: 1.2; }
.ctrl-tuile .note { display: block; font-size: 11.5px; color: var(--muted); }
.ctrl-tuile.alerte { border-color: var(--orange); background: var(--peach-soft); }
.ctrl-tuile.alerte .val { color: var(--brand-dark); }
.ctrl-tuile.ok { border-color: var(--sage); background: var(--sage-pale); }
.ctrl-tuile.ok .val { color: var(--sage-deep); }

.ctrl-table td { vertical-align: middle; }
.ctrl-lot { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ctrl-prix {
  width: 92px; padding: 5px 8px; text-align: right; font: inherit; font-size: 13.5px;
  font-weight: 600; border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.ctrl-prix:focus { outline: 0; border-color: var(--orange); }
.ctrl-prix:disabled { background: var(--pale); color: var(--muted); }
.ctrl-garde { display: flex; align-items: center; margin: 0; }
.ctrl-garde input { width: 16px; height: 16px; accent-color: var(--orange); }
.ctrl-verdict {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.v-grave .ctrl-verdict { background: var(--brique); color: var(--paper); }
.v-alerte .ctrl-verdict { background: var(--orange); color: var(--navy); }
.v-neutre .ctrl-verdict { background: var(--sand); color: var(--muted); }
tr.v-grave td { background: var(--brique-pale); }
tr.v-alerte td { background: var(--peach-soft); }
.ctrl-reste { margin-top: 18px; }
.ctrl-reste > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand-dark); }
.ctrl-actions { margin-top: 20px; align-items: center; gap: 12px; }

/* ---------- d'ou vient un prix de reference ----------
   Les releves qui l'ont fait, avec leur date. Replie par defaut : c'est une
   justification qu'on va chercher quand un prix surprend, pas une colonne de
   plus a lire a chaque ligne. */
.voix { margin-top: 4px; }
.voix > summary {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--brand-dark);
  cursor: pointer; list-style: none; padding: 1px 7px; border-radius: 999px;
  background: var(--peach-soft); border: 1px solid var(--peach);
}
.voix > summary::-webkit-details-marker { display: none; }
.voix > summary::before { content: "↳ "; opacity: .6; }
.voix[open] > summary { background: var(--sand); border-color: var(--line); color: var(--ink-strong); }
.voix-table { width: 100%; margin-top: 5px; border-collapse: collapse; font-size: 11.5px; text-align: left; }
.voix-table td { padding: 2px 6px 2px 0; border-bottom: 1px dotted var(--line); white-space: nowrap; }
.voix-table td.g { color: var(--muted); }
.voix-table td.num { text-align: right; font-weight: 600; padding-right: 0; }
.voix-table .voix-bareme td { color: var(--muted); font-style: italic; border-bottom: 0; }
.voix-ecart { margin: 5px 0 0; font-size: 11px; color: var(--brique); line-height: 1.4; white-space: normal; }

/* ---------- le logo du partenaire ----------
   Il signe ses notes de budget : on le montre tel qu'il sortira, sur le fond
   clair du document, et pas dans une vignette grise qui mentirait sur le rendu. */
.panel-logo h3 { margin-bottom: 4px; }
.logo-ligne { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 12px; }
.logo-cadre {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 220px; height: 92px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.logo-cadre img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-cadre .muted { font-size: 12.5px; }
.logo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.logo-actions .muted { flex-basis: 100%; margin: 0; font-size: 12.5px; }

/* ---------- le relais : ce qu'un partenaire vient de passer ----------
   Le moment utile de toute la chaine. Il est en tete de l'ecran, avant meme le
   tableau de bord : un dossier transmis attend une reponse, et il ne doit pas
   se decouvrir au detour d'une liste. */
.relais {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--peach-soft); border: 1px solid var(--peach);
  border-left: 4px solid var(--orange); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 16px;
}
.relais > div { flex: 1 1 320px; min-width: 0; }
.relais strong { display: block; font-size: 15px; color: var(--brown); }
.relais .muted { font-size: 13px; line-height: 1.45; }
.relais.on { background: var(--slate); border-color: var(--slate); }
.relais.on strong { color: var(--paper); }
.relais.on .muted { color: var(--slate-soft); }
.relais.on .btn { color: var(--paper); border-color: rgba(255, 255, 255, .35); }
.relais.on .btn:hover { background: rgba(255, 255, 255, .12); }
.pastille-relais {
  display: inline-block; background: var(--orange); color: var(--navy);
  border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600;
}
.relais-mot { display: block; color: var(--muted); font-style: italic; margin-top: 2px; }

/* ---------- qui chiffre : le courtier ou ses partenaires ----------
   Un rectangle sobre, pose sous les barres et juste au-dessus de la liste qu'il
   commande. Il pilote tout le tableau de bord, pas seulement les cartes. */
.origine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px;
}
.origine-lib {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-right: 4px;
}
.origine-choix {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--pale); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; transition: .15s;
}
.origine-choix span {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--sand); border-radius: 999px; padding: 1px 7px;
}
.origine-choix:hover { border-color: var(--muted); }
.origine-choix.on { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.origine-choix.on span { background: rgba(255, 255, 255, .22); color: var(--paper); }
/* celui des partenaires porte l'accent, selectionne ou non : c'est lui qu'on cherche */
.origine-choix.partenaire { border-color: var(--orange); }
.origine-choix.partenaire span { background: var(--peach); color: var(--brown); }
.origine-choix.partenaire.on { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.origine-choix.partenaire.on span { background: rgba(24, 34, 48, .14); color: var(--navy); }

/* liseré gauche de la carte selon le statut */
.project-card.s-encours { border-left-color: var(--s-encours); }
.project-card.s-gagne   { border-left-color: var(--s-gagne); }
.project-card.s-perdu   { border-left-color: var(--s-perdu); }

/* ---------- les dossiers des partenaires ----------
   Un chantier chiffre par un architecte est une affaire en etude ailleurs : il
   doit sauter aux yeux quand on balaie la colonne. C'est le seul endroit de la
   liste ou l'orange vif sort, et il ne touche qu'un filet et une pastille — la
   charte garde sa regle du dixieme de surface. Place APRES les regles de statut :
   meme specificite, c'est l'ordre qui tranche. */
.project-card.du-partenaire {
  border-left-color: var(--orange); border-left-width: 5px;
  background: linear-gradient(90deg, var(--peach-soft) 0, var(--card) 180px);
}
.ligne-partenaire { font-size: 12.5px; color: var(--brown); margin-top: 3px; }
.ligne-partenaire a { color: var(--brown); font-weight: 600; text-decoration: none; }
.ligne-partenaire a:hover { text-decoration: underline; }
.ligne-joindre { margin: 4px 0 0; font-size: 13px; }
.ligne-joindre a { color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
.ligne-joindre a:hover { text-decoration: underline; }
.badge.b-partenaire { background: var(--orange); color: var(--navy); }

.project-main { min-width: 0; }
.project-side { display: flex; align-items: center; gap: 14px; }

/* pastille de statut à côté du titre */
.badge {
  display: inline-block; vertical-align: middle; font-size: 11.5px;
  font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-left: 6px;
  color: var(--paper);
}
.badge.s-encours { background: var(--s-encours); }
.badge.s-gagne   { background: var(--s-gagne); }
.badge.s-perdu   { background: var(--s-perdu); }

/* sélecteur de statut */
.statut-select {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  border-left: 4px solid var(--line);
}
.statut-select.s-encours { border-left-color: var(--s-encours); }
.statut-select.s-gagne   { border-left-color: var(--s-gagne); }
.statut-select.s-perdu   { border-left-color: var(--s-perdu); }
.statut-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
}

@media (max-width: 720px) {
  .tbd { grid-template-columns: repeat(2, 1fr); }
  /* La carte de projet etait posee sur une seule ligne : le titre a gauche, le
     montant et le statut a droite. Au telephone, cette colonne de droite ne se
     comprimait pas et poussait la carte a 530 px de large — toute la page
     glissait lateralement. Elle passe donc dessous, sur sa propre ligne. */
  .project-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .project-side {
    justify-content: space-between; gap: 10px;
    border-top: 1px dashed var(--line); padding-top: 10px;
  }
  .estimate { text-align: left; white-space: normal; }
  .estimate .amount { font-size: 19px; }
  .statut-select { max-width: 130px; }
  /* le selecteur « qui chiffre » : son libelle prend la ligne, les pastilles suivent */
  .origine { padding: 10px 12px; }
  .origine-lib { width: 100%; margin: 0 0 2px; }
  .origine-choix { font-size: 13px; padding: 6px 11px; }
  /* Une grille a deux colonnes n'en vaut plus qu'une sur un telephone. La regle
     doit vivre ICI, apres la declaration de .grille-2 : a specificite egale,
     c'est l'ordre du fichier qui tranche, et un bloc media place plus haut
     perdait silencieusement. */
  .grille-2 { grid-template-columns: 1fr; }
}

/* CA (commission du courtier) dans le tableau de bord et sur les cartes */
.tbd-ca { font-size: 15px; font-weight: 700; color: var(--ink); }
.tbd-tuile.s-encours .tbd-ca { color: var(--s-encours); }
.tbd-tuile.s-gagne   .tbd-ca { color: var(--s-gagne); }
.tbd-tuile.s-perdu   .tbd-ca { color: var(--s-perdu); }
.tbd-montant { font-size: 12.5px; }
.ca-card { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tbd-ca .ca-lib {
  display: block; font-size: 11px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin-top: 3px;
}

/* ---- documents de conformité & alertes de renouvellement ---- */
.fiche-section {
  margin: 20px 0 2px; font-size: 15px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fiche-hint { margin: 0 0 10px; }

.alertes-doc {
  background: var(--peach-soft); border: 1px solid var(--line);
  border-left: 4px solid var(--s-encours); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px;
}
.alertes-doc.a-expire { background: var(--brique-pale); border-color: var(--brique); border-left-color: var(--s-perdu); }
.alertes-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.badge-expire {
  background: var(--s-perdu); color: var(--paper); font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
}
.alertes-doc ul { margin: 0; padding-left: 2px; list-style: none; }
.alertes-doc li { font-size: 13.5px; padding: 2px 0; }
.alertes-doc li.al-expire { color: var(--brique); }
.al-delai { color: var(--muted); font-size: 12.5px; }
.alertes-doc li.al-expire .al-delai { color: var(--s-perdu); font-weight: 600; }
.lien-doc {
  font: inherit; font-weight: 600; color: var(--ink); background: none;
  border: none; padding: 0; cursor: pointer; text-decoration: underline;
}

.badge-doc {
  display: inline-block; vertical-align: middle; font-size: 11.5px;
  font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 4px;
}
.badge-doc.b-bientot { background: var(--peach); color: var(--brown); }
.badge-doc.b-expire  { background: var(--s-perdu); color: var(--paper); }

/* ---- graphique de synthèse du tableau de bord ---- */
.tbd-graph {
  display: flex; gap: 28px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 22px; margin-bottom: 18px;
}
.graph-donut { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.donut { width: 118px; height: 118px; flex: 0 0 auto; }
.arc { fill: none; stroke-width: 15; }
.arc-fond { stroke: var(--line); }
.arc-perdu { stroke: var(--s-perdu); }
.arc-gagne { stroke: var(--s-gagne); }
.donut-nb { font-size: 24px; font-weight: 700; fill: var(--ink); }
.donut-lib { font-size: 8.5px; fill: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.graph-legende { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.graph-legende .pt {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px;
}
.pt.s-gagne { background: var(--s-gagne); }
.pt.s-perdu { background: var(--s-perdu); }

.tbd-barres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.barres-titre {
  font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 1px;
}
.barre-ligne {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center;
  gap: 12px; font-size: 13px;
}
.barre-lib { color: var(--muted); }
.barre { background: var(--line); border-radius: 6px; height: 15px; overflow: hidden; }
.barre-plein { display: block; height: 100%; border-radius: 6px; min-width: 2px; transition: width .3s; }
.barre-plein.s-encours { background: var(--s-encours); }
.barre-plein.s-gagne { background: var(--s-gagne); }
.barre-plein.s-perdu { background: var(--s-perdu); }
.barre-val { font-weight: 700; white-space: nowrap; }

@media (max-width: 720px) {
  .tbd-graph { flex-direction: column; align-items: stretch; }
  .barre-ligne { grid-template-columns: 84px 1fr auto; }
}

/* ---- récupération société par SIREN/SIRET (Kbis) ---- */
.kbis-lookup {
  display: flex; gap: 10px; align-items: flex-end; margin-bottom: 4px;
}
.kbis-lookup label { flex: 1; margin-bottom: 0; }
.kbis-lookup .btn { white-space: nowrap; }
.fiche-hint.ok { color: var(--olive-dark); }
.fiche-hint.erreur { color: var(--brique); }

/* ---- comptes, connexion & administration ---- */
.topbar-end { display: flex; align-items: center; gap: 18px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.user-chip .uc-nom { font-weight: 600; }
.user-chip .uc-role {
  background: rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.user-chip a { color: var(--paper); opacity: .85; text-decoration: underline; }
.user-chip a:hover { opacity: 1; }

.login-wrap { display: flex; justify-content: center; padding: 60px 20px; }
.login-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 32px 30px; width: 100%; max-width: 360px;
}
.login-box h1 { margin: 0 0 4px; }
.login-box label { display: block; margin: 16px 0 0; font-size: 13.5px; font-weight: 600; }
.login-box input {
  width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 15px; font-family: inherit;
}
.login-box input:focus { outline: 0; border-color: var(--accent); }
.login-box .btn { width: 100%; margin-top: 22px; }

.admin-etat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--s-perdu);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 20px; margin-bottom: 22px;
}
.admin-etat.on { border-left-color: var(--s-gagne); }
.admin-etat strong { display: block; }
.bloc-titre { margin: 26px 0 12px; font-size: 17px; }
.form-user { margin-bottom: 6px; }

.admin-table { width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; }
.admin-table th, .admin-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.admin-table th { background: var(--sand); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-strong); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.inactif { opacity: .55; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pastille { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.pastille.ok { background: var(--sage-pale); color: var(--olive-dark); }
.pastille.off { background: var(--brique-pale); color: var(--brique); }

.activite { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px 4px; }
.act-ligne {
  display: grid; grid-template-columns: 26px 130px 1fr auto; align-items: center;
  gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--pale); font-size: 13px;
}
.act-ligne:last-child { border-bottom: 0; }
/* Une colonne « 1fr » refuse par defaut de descendre sous la largeur de son
   contenu : un nom de projet un peu long poussait l'horodatage hors de l'ecran,
   et toute la page glissait avec lui. */
.act-ligne > * { min-width: 0; }
.act-act { overflow-wrap: anywhere; }
.act-ic { text-align: center; opacity: .7; }
.act-user { font-weight: 600; }
.act-ts { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 720px) {
  .act-ligne { grid-template-columns: 20px 1fr; }
  .act-ts { grid-column: 2; }
}

/* ---- mission : courtage ou maîtrise d'oeuvre ---- */
.badge.b-moe { background: var(--slate); color: var(--paper); }
.statut-select.m-moe { border-left-color: var(--slate); }
.coef-champ select { font: inherit; font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.taux-input { width: 54px; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 7px; text-align: right; }

/* ---- separation entre les artisans suivis et le bareme de reference ---- */
.section-titre {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand-dark); margin: 26px 0 10px; font-weight: 700;
}
.section-titre .muted {
  display: block; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 400; margin-top: 2px;
}
.supplier-row.complet .name { font-weight: 600; }
.supplier-row.complet { background: var(--peach-soft); }

/* ---------- projet hors catalogue : un montant saisi, rien d'autre ---------- */
.layout-hors { grid-template-columns: minmax(0, 640px); }
.panel-hors { border-left: 4px solid var(--brand); }
.hors-montant {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 6px; font-weight: 600;
}
.hors-montant input {
  flex: 0 1 220px; font-size: 22px; font-weight: 700; text-align: right;
  padding: 8px 12px;
}
.hors-montant span { font-size: 20px; font-weight: 700; color: var(--muted); }
.hors-note { display: block; margin-top: 16px; }
.hors-note textarea { width: 100%; margin-top: 6px; }

/* =============================================================================
   Ajustements Comabat
   -----------------------------------------------------------------------------
   Ce que la charte demande et que le remplacement des couleurs ne pouvait pas
   faire seul : des filets plutot que des ombres, des angles genereux, un orange
   tenu en laisse, et des surtitres en capitales brunes.
   ========================================================================== */

/* Bordures plutot qu'ombres : le filet tient la carte, l'ombre ne fait que la
   poser. Les deux ensemble, et plus rien ne respire. */
.panel, .project-card, .artisan-card, .lot-card, .modal-box, .tbd-tuile,
.murs-table, .installations, .repere-carte {
  border: 1px solid var(--line);
}

/* Les en-tetes de tableau et les libelles en capitales passent en brun : c'est
   le role du surtitre dans la charte. */
.ref-table th, .admin-table th, .modal-section, .panel h3 {
  color: var(--brown); letter-spacing: .18em; text-transform: uppercase;
  font-size: 11px; font-weight: 600;
}

/* Le montant qui compte porte l'accent — une seule fois par bloc. */
.total, .amount.national { color: var(--orange-deep); }
.tbd-ca { font-weight: 700; }

/* La pastille de numero de lot : fond peche, chiffre brun, comme les etapes de
   la methode sur les supports. */
.lot-nav-num {
  background: var(--peach); color: var(--brown); border-radius: 999px;
  font-weight: 700;
}
.lot-nav-cote button.active .lot-nav-num { background: var(--paper); color: var(--brown); }

/* Un lot actif : l'ardoise plutot que l'orange, qui reste pour l'action. */
.lot-nav button.active,
.lot-nav-cote button.active { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.lot-nav-cote button.active .lot-nav-prix { color: var(--slate-soft); }

/* Les champs de saisie : fond papier, filet discret, angle arrondi. */
input[type="text"], input[type="password"], select, textarea {
  font-family: inherit; border-radius: var(--radius-btn);
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
input[type="text"]:focus, input[type="password"]:focus,
select:focus, textarea:focus { outline: 0; border-color: var(--orange); }

/* Le bandeau de consultation et les encarts d'alerte : peche, jamais orange vif. */
.bandeau-lecture { background: var(--peach-soft); border-left: 4px solid var(--orange); color: var(--brown); }

/* La pastille MOE : ardoise, le seul ton sombre autorise en aplat. */
.badge.b-moe { background: var(--slate); color: var(--paper); }

/* L'en-tete d'un lot est un aplat : c'est l'ardoise, pas le gris de texte. */
.lot-header { background: var(--slate); }
.lot-header .estimate small { color: var(--slate-soft); }

/* Une reponse cochee n'est pas une action : elle se marque en ardoise. L'orange
   reste pour le bouton principal, sinon un ecran de vingt questions vire a
   l'orange et l'accent ne veut plus rien dire. */
.choices button.on {
  background: var(--slate); border-color: var(--slate); color: var(--paper);
}
.choices button { border-radius: var(--radius-btn); }

/* ---------- l'estimation par ensemble, vue des partenaires ----------
   Un architecte lit un budget par ensemble de travaux, pas par ouvrage : c'est
   la maille à laquelle il raisonne, et celle à laquelle rien ne se divise pour
   retrouver un prix unitaire. */
.ensemble-ligne {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ensemble-ligne:last-child { border-bottom: 0; }
.ensemble-code {
  font-weight: 700; color: var(--brown); font-size: 13px;
  background: var(--peach); border-radius: 6px; text-align: center; padding: 2px 0;
}
.ensemble-titre { font-size: 13.5px; color: var(--ink-strong); line-height: 1.35; }
.ensemble-titre small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ensemble-montant { font-weight: 700; color: var(--slate); white-space: nowrap; }

/* =============================================================================
   Passe de conception — octobre 2026
   -----------------------------------------------------------------------------
   Le parti pris : rapprocher l'application du langage de ses propres documents.
   Un rapport Comabat est une pièce technique — cartouche ardoise, tableaux
   réglés, rien de décoratif. L'application, elle, était un empilement de cartes
   arrondies toutes identiques : même rayon, même filet, même ombre, qu'il
   s'agisse du métré, d'un total ou d'une liste. Deux maisons différentes pour
   un même métier.
   On réserve donc la carte à ce qui doit vraiment se détacher, et on structure
   le reste par des filets et du blanc — comme sur un bordereau.
   ========================================================================== */

/* --- Les chiffres sont la matière de l'outil : ils s'alignent -------------- */
.amount, .total, .lot-nav-prix, .num, .ensemble-montant, .qui-prix,
.tbd-nb, .tbd-ca, .tbd-montant, .ca-card, .fourchette-nationale {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- L'index des lots : un sommaire de bordereau, pas une pile de pastilles --
   Le nom et le montant se marchaient dessus dès que le libellé passait à la
   ligne. Chacun sa ligne : le nom respire, le montant s'aligne à droite. */
.lot-nav-cote { padding: 6px 0; gap: 0; }
.lot-nav-titre { padding: 6px 12px 10px; border-bottom: 1px solid var(--line); }
.lot-nav-ligne { border-bottom: 1px solid var(--line); }
.lot-nav-ligne:last-child { border-bottom: 0; }
.lot-nav-cote button[data-lot] {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 8px; align-items: start;
  border-radius: 0; padding: 9px 10px 9px 8px;
}
.lot-nav-nom { display: contents; }
.lot-nav-num {
  grid-row: 1 / span 2; align-self: center;
  min-width: 0; width: 22px; height: 22px; line-height: 22px;
  font-size: 11px; text-align: center; border-radius: 999px;
}
.lot-nav-prix {
  grid-column: 2; font-size: 12px; font-weight: 600; color: var(--ink-strong);
  text-align: left;
}
.lot-nav-cote button[data-lot]:hover { background: var(--sand); }
.lot-nav-cote button.active { border-left: 3px solid var(--orange); padding-left: 5px; }

/* --- Le métré : une feuille réglée, pas une carte -------------------------
   Surtout PAS d'overflow:hidden ici. Il servait à rogner les angles carrés de
   l'en-tête sombre dans la carte arrondie — mais il rognait du même coup les
   bulles d'aide, qui débordent volontairement de la feuille : elles sont en
   position absolue, et un ancêtre qui coupe les coupe aussi. On arrondit donc
   le haut de l'en-tête au lieu de le rogner, le rendu est le même. */
.lot-card { border: 1px solid var(--line); box-shadow: none; }
.lot-header { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.question-row { border-bottom: 1px solid var(--line); }
.question-row:last-of-type { border-bottom: 0; }

/* --- Un seul orange à l'écran ---------------------------------------------
   « Estimation » est l'action principale. Le pied de page qui mène au lot
   suivant est de la navigation : il passe en ardoise, sinon deux oranges se
   disputent l'oeil et l'accent ne veut plus rien dire. */
.lot-pager .btn-primary { background: var(--slate); color: var(--paper); }
.lot-pager .btn-primary:hover { background: #1c2d37; }

/* --- Le panneau d'estimation : le seul endroit où l'on hausse la voix ----- */
.panel-national { background: var(--card); border-left: 3px solid var(--orange); }
.panel-national .total { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.fourchette-nationale { margin-top: 2px; font-size: 13px; }

/* --- La barre d'actions : moins de boîtes, plus de rythme ----------------- */
.row-actions { gap: 8px; align-items: center; }
.statut-inline { font-size: 12px; color: var(--muted); }

/* --- Les panneaux secondaires s'effacent --------------------------------- */
.panel-qui, .panel:not(.panel-national) { box-shadow: none; }
.panel h3 { margin-bottom: 10px; }

/* =============================================================================
   L'orange de la marque, et lui seul
   -----------------------------------------------------------------------------
   Les fichiers de marque sont formels : #FF6600, quarante fois dans les logos.
   #C44F00 n'y apparaît que trois fois — c'est une variante d'appoint que la
   charte réserve au PETIT TEXTE sur fond clair, où le vrai orange tombe à 3:1
   de contraste et devient illisible. Je l'avais employé partout ; les gros
   chiffres et les marques graphiques tiraient donc au brun.
   La règle, désormais :
     · tout ce qui est GRAPHIQUE ou GROS  -> #FF6600, l'orange de la marque ;
     · le petit texte orange sur fond clair -> #C44F00, pour rester lisible.
   ========================================================================== */
:root {
  --s-gagne: var(--orange);          /* pastilles, anneau, barres : le vrai */
  --s-gagne-texte: var(--orange-deep); /* les petits montants : lisibilité  */
}

/* Les grands chiffres portent l'orange de la marque. À 30 px et en gras, le
   contraste passe (3:1 suffit au-delà de 24 px) : rien n'oblige à l'assombrir. */
.total, .amount.national { color: var(--orange); }
.panel-national { border-left-color: var(--orange); }

/* Les petits montants colorés restent en orange foncé : à 13-15 px, le vrai
   orange sur blanc n'est plus lisible, et la charte l'interdit explicitement. */
.tbd-tuile.s-gagne .tbd-ca { color: var(--s-gagne-texte); }
.ca-card, .fiche-notes { color: var(--muted); }

/* Le bouton principal : aplat orange, texte encre nuit — inchangé, c'est la
   seule façon dont la charte autorise un grand aplat de cette couleur. */
.btn-primary { background: var(--orange); color: var(--navy); }

/* L'accueil d'un partenaire qui n'a encore rien chiffré : lui dire ce que
   l'outil fait pour lui, plutôt que « aucun projet ». */
.accueil-partenaire { text-align: left; max-width: 560px; margin: 0 auto; }
.accueil-partenaire strong { display: block; font-size: 17px; color: var(--slate); margin-bottom: 10px; }
.accueil-partenaire p { margin: 0 0 10px; }
.accueil-partenaire .btn { margin-top: 10px; }

/* L'attribut `hidden` doit l'emporter.
   Le navigateur l'applique par une règle de très faible poids ([hidden] →
   display:none). Dès qu'un élément caché porte aussi une classe qui fixe son
   display — .grille-2 en grid, un label en block — cette classe gagne et
   l'élément reste visible : le bloc « Mission / Commission » s'affichait chez
   un architecte alors que le code l'avait bien masqué. */
[hidden] { display: none !important; }

/* --- les deux mails d'une demande d'agence -------------------------------
   Une fenetre ou Tony relit avant d'envoyer. Les deux mails sont cote a cote
   dans le meme ecran : il doit voir d'un coup d'oeil que le client et l'agent
   ne recoivent pas le meme message — les 1 pour cent ne figurent que chez
   l'agent, et cette separation doit se verifier a l'oeil. */
.mail-bloc {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 16px; background: var(--paper);
}
.mail-tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mail-tete h3 { margin: 0; font-size: 15px; color: var(--slate); }
.mail-champs { font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
.mail-champs em { color: var(--orange-deep); font-style: normal; }
.mail-lib {
  display: inline-block; min-width: 86px; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--brown);
}
.modal-box textarea.mail-corps {
  width: 100%; font-family: inherit; font-size: 13px; line-height: 1.6;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink-strong); resize: vertical;
}
.modal-box textarea.mail-corps:focus { outline: 2px solid var(--peach); border-color: var(--orange); }
/* « 36 000 € à 54 000 € » ne doit pas casser apres le montant : l'euro
   atterrissait seul sur sa ligne. */
.admin-table td.montant-demande { white-space: nowrap; }
.modal-mails { max-width: 860px; max-height: 88vh; overflow-y: auto; }