/* ============================================================
   Veille AO — feuille de style commune (index.html + pipeline.html)
   ============================================================ */

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

/* ---------- Design tokens ---------- */
:root {
  color-scheme: light dark;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Gabarit commun aux trois icônes du bandeau (compte, déconnexion, cloche).
     Une seule valeur pour les trois : elles étaient à 18, 18 et 19 px, et un
     écart d'un pixel se voit dès qu'elles sont côte à côte. Les tailles posées
     en attributs `width`/`height` sur les SVG ne sont plus que des valeurs de
     repli — le CSS les surcharge, pour qu'un seul endroit décide. */
  --ico: 18px;

  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F3F4F6;
  --border:    #E1E1E1;
  /* Le texte courant ne prend PAS la couleur de marque : --text pour le corps,
     --muted et --faint pour le secondaire et le tertiaire, tous neutres.
     --text-soft (plus bas) est réservé aux titres, aux libellés de chiffres
     clés et aux accents de marque — voir la charte à sa définition. */
  --text:      #10233F;
  --muted:     #566579;
  --faint:     #93A0B0;

  --accent:      #013274;
  --accent-2:    #4EAABB;
  --accent-ink:  var(--text-soft);
  --accent-soft: #E6F1F6;
  --on-accent:   #FFFFFF;
  --grad-primary:   linear-gradient(135deg, #4EAABB 0%, #013274 100%);
  --grad-secondary: linear-gradient(135deg, #EFEFEF 0%, #E1E1E1 100%);

  --good:   #15803D;  --good-soft:   #E4F3E9;
  --warn:   #B45309;  --warn-soft:   #F8ECDC;
  --neutral:#64748B;  --neutral-soft:#EAEDF1;
  --danger: #DC2626;  --danger-soft: #FBE7E7;

  /* Charte : deux rôles à ne pas confondre.
     --brand   = la couleur des TEXTES de marque (chiffres de pilotage, onglet
                 actif, états sélectionnés). Jamais un signal d'alerte.
     --action  = la couleur des SURFACES cliquables primaires (fond de bouton,
                 cloche active). Jamais en texte.
     --brand et --brand-ink ne se distinguent plus : les accents de marque sont
     tous sur --text-soft. Les deux noms restent pour ne pas casser les pages
     qui les appellent. */
  --brand: var(--text-soft);  --brand-soft: #E4F4F4;  --brand-ink: var(--text-soft);
  /* Couleur de marque des TEXTES. Trois emplois, et rien d'autre :
       1. les titres et têtes de section (h1, .drawer-head h2, .col-head…) ;
       2. les libellés qui annoncent un chiffre clé (.tile .k, .dl dt…) ;
       3. les accents de marque (onglet actif, lien, pastille, score).
     Le texte courant reste --text / --muted / --faint. Élargir cette liste
     repeint l'interface : 82 déclarations de texte courant l'ont montré.
     Volontairement hors des blocs de thème : même valeur en clair et en sombre.
     Compromis assumé : 2.8:1 sur blanc, sous le seuil AA de 4.5:1 pour le petit
     texte — acceptable sur des titres, qui sont gros et gras. */
  --text-soft: #4eaa9d;
  /* Volontairement absent des blocs de thème : identique en clair et en sombre
     (aplat clair + texte noir, lisible sur les deux fonds). */
  --action: #91E4C1;  --on-action: #000000;

  --radius: 12px;
  /* Hauteur et respiration latérale communes aux contrôles cliquables (boutons,
     selects d'action) : les caler explicitement évite qu'elles dépendent du
     line-height et de la police, et empêche les deux de diverger. */
  --control-h: 36px;
  --control-pad: 20px;
  --shadow: 0 1px 2px rgba(21,32,29,.04), 0 6px 20px rgba(21,32,29,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0A1526;
    --surface:   #0F1D33;
    --surface-2: #16273F;
    --border:    #24374F;
    --text:      #E7EEF6;
    --muted:     #9AAAC0;
    --faint:     #6B7C92;

    --accent:      #4EAABB;
    --accent-2:    #4EAABB;
    --accent-soft: #113442;
    --on-accent:   #06131F;
    --grad-primary:   linear-gradient(135deg, #4EAABB 0%, #1E5DA0 100%);
    --grad-secondary: linear-gradient(135deg, #16273F 0%, #24374F 100%);

    --good:   #4ADE80;  --good-soft:   #12301F;
    --warn:   #FBBF24;  --warn-soft:   #33260F;
    --neutral:#94A3B8;  --neutral-soft:#20272E;
    --danger: #F87171;  --danger-soft: #331715;

    --brand-soft: #10353A;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"] {
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F6; --border:#E1E1E1;
  --text:#10233F; --muted:#566579; --faint:#93A0B0;
  --accent:#013274; --accent-2:#4EAABB; --accent-soft:#E6F1F6; --on-accent:#FFFFFF;
  --grad-primary:linear-gradient(135deg,#4EAABB 0%,#013274 100%); --grad-secondary:linear-gradient(135deg,#EFEFEF 0%,#E1E1E1 100%);
  --good:#15803D; --good-soft:#E4F3E9; --warn:#B45309; --warn-soft:#F8ECDC;
  --neutral:#64748B; --neutral-soft:#EAEDF1; --danger:#DC2626; --danger-soft:#FBE7E7;
  --brand-soft:#E4F4F4;
  --shadow:0 1px 2px rgba(1,32,74,.05), 0 6px 20px rgba(1,32,74,.06);
}
:root[data-theme="dark"] {
  --bg:#0A1526; --surface:#0F1D33; --surface-2:#16273F; --border:#24374F;
  --text:#E7EEF6; --muted:#9AAAC0; --faint:#6B7C92;
  --accent:#4EAABB; --accent-2:#4EAABB; --accent-soft:#113442; --on-accent:#06131F;
  --grad-primary:linear-gradient(135deg,#4EAABB 0%,#1E5DA0 100%); --grad-secondary:linear-gradient(135deg,#16273F 0%,#24374F 100%);
  --good:#4ADE80; --good-soft:#12301F; --warn:#FBBF24; --warn-soft:#33260F;
  --neutral:#94A3B8; --neutral-soft:#20272E; --danger:#F87171; --danger-soft:#331715;
  --brand-soft:#10353A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
/* Les contrôles (button, input, select, textarea) n'héritent pas de la police
   par défaut : on force l'héritage pour qu'ils utilisent tous Inter. */
button, input, select, textarea { font-family: inherit; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 14px 20px 64px; }
.wrap.wide { max-width: 1320px; }

/* ---------- Header + navigation ----------
   Bandeau strictement identique sur toutes les pages : logo à gauche, menu +
   cloche à droite, aucun titre de page. Hauteur figée pour que le menu tombe
   au pixel près au même endroit quand on navigue. */
header.top {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 20px; height: 52px; margin-bottom: 100px;   /* logo compact, menu à sa suite, cloche à droite */
  border-bottom: 1px solid var(--border);          /* fine ligne de séparation sous le header */
}
/* Pipeline (.wrap.wide) : on cale le header dans la même boîte centrée (1040px)
   que la page Veille pour que le menu tombe exactement au même endroit. */
.wrap.wide > header.top { max-width: 1040px; margin-left: auto; margin-right: auto; }
.brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; text-decoration: none; }
header.top .nav { flex: none; margin-left: 48px; }
.logo { height: 26px; width: auto; flex: none; display: block; }
/* Bascule logo clair / sombre : suit la préférence OS et le toggle manuel data-theme */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark  { display: none; }
:root[data-theme="dark"]  .logo-light { display: none; }
:root[data-theme="dark"]  .logo-dark  { display: block; }
h1 { font-size: 21px; font-weight: 650; margin: 0; letter-spacing: -.01em; color: var(--text-soft); }
.sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; letter-spacing: .01em; }
/* Ligne « Dernière synchro » — placée sous le bloc des 4 indicateurs. */
.sync { font-size: 12px; color: var(--faint); font-family: var(--font-mono); text-align: right; margin: -30px 0 30px; }
.sync b { color: var(--muted); font-weight: 600; }
/* Pastille "N nouveautés" (onglet Veille) — placée sous la recherche */
.newbadge {
  font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--accent-soft);
  border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.newbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: none; }
.newbadge[hidden] { display: none; }

.nav {
  display: inline-flex; gap: 24px; align-items: center;
}
.nav a {
  font-size: 13px; font-weight: 600; padding: 4px 0;
  color: var(--text); text-decoration: none; transition: .12s; display: inline-flex; align-items: center; gap: 7px;
}
.nav a:hover { color: var(--brand); }
.nav a.active { color: var(--brand); }
/* Le compteur arrive après le chargement des AO : sa place est réservée dès le
   premier rendu (largeur figée à deux chiffres, cachée tant qu'il est vide),
   sinon le menu se décalait au moment où le chiffre apparaissait. */
.nav .ncnt {
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #d2e5e8; color: #000; border-radius: 999px; padding: 1px 7px;
  min-width: 20px; text-align: center;
}
.nav .ncnt:empty { visibility: hidden; }

/* ---------- Stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 44px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 600; }
.tile .v { font-size: 26px; font-weight: 680; margin-top: 6px; font-family: var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .v small { font-size: 14px; color: var(--faint); font-weight: 500; }
.tile.alert .v { color: var(--danger); }
.tile.go .v { color: var(--good); }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; }
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; font-weight: 550; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: .12s;
  font-family: var(--font-sans);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
/* Onglet actif : fond identique aux onglets inactifs. C'est le contour et le
   texte colorés qui portent la sélection, pas un aplat. */
.chip[aria-pressed="true"] { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.chip.tab .cnt { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .5; margin-left: 3px; }
.chip.tab[aria-pressed="true"] .cnt { opacity: .9; }
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; align-self: center; }
select, .search {
  font-family: var(--font-sans); font-size: 12.5px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.search { min-width: 180px; cursor: text; flex: 1; max-width: 240px; }
/* Libellé du groupe de filtres secondaires (onglet Veille) */
.controls-label { font-size: 12px; font-weight: 600; color: var(--text); align-self: center; margin-right: 2px; }
/* Selects de filtre (onglet Veille) — secondaires : discrets, alignés sur la recherche.
   Le dégradé reste réservé aux éléments primaires (nav active, bouton Go). */
.controls select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  font-weight: 600; padding-right: 30px; appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6B80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.controls select:hover { border-color: var(--accent); }
.controls select option { color: var(--text); background: var(--surface); font-weight: 500; }
.spacer { flex: 1; }
select:focus-visible, .search:focus-visible, .chip:focus-visible, a:focus-visible,
.btn:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Cards (veille) ---------- */
.list { display: flex; flex-direction: column; gap: 12px; margin: 0 44px; }
.card {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 18px; box-shadow: var(--shadow); transition: border-color .12s, opacity .25s, transform .25s;
}
.card:hover { border-color: var(--accent); }
.card.leaving { opacity: 0; transform: translateX(24px); }
.score { text-align: center; }
/* Anneau de pertinence : se remplit proportionnellement au score (--p = 0..100),
   couleur --c = scoreColor. Le masque radial creuse le centre pour laisser l'anneau.
   Diamètre, épaisseur et corps du chiffre sont paramétrables : les cartes du
   kanban réutilisent le même anneau en plus petit, sans dupliquer le dégradé
   conique ni le masque. */
.score .ring {
  --p: 0; --c: var(--accent-2);
  --ring-d: 46px; --ring-w: 4px; --ring-fs: 14px;
  position: relative; width: var(--ring-d); height: var(--ring-d); margin: 0 auto;
  display: grid; place-items: center;
}
.score .ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-2) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
}
.score .n { position: relative; font-family: var(--font-mono); font-size: var(--ring-fs); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--c); }
.score .lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-top: 6px; font-weight: 600; }

.body .objet { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 20px; text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta .dot { color: var(--border); }
.resume { font-size: 13.5px; color: var(--text); opacity: .88; margin: 0 0 16px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tag { font-size: 11px; font-weight: 550; padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }

.foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.candidater { background: var(--good-soft); color: var(--good); }
.pill.surveiller { background: var(--warn-soft); color: var(--warn); }
.pill.ecarter    { background: var(--neutral-soft); color: var(--neutral); }
.pill.closed     { background: var(--neutral-soft); color: var(--neutral); }
.card.closed { opacity: .58; }
.card.closed:hover { opacity: .9; }
.deadline.closed { color: var(--faint); font-weight: 600; }
.card.is-new { border-color: var(--accent); }
.badge-new {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
  background: var(--grad-primary); text-shadow: 0 1px 2px rgba(1,20,50,.4);
}
.deadline { font-size: 12.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.deadline.urgent { color: var(--danger); font-weight: 600; }
.deadline svg { width: 13px; height: 13px; }
.foot .spacer { flex: 1; }
a.link { font-size: 12.5px; font-weight: 600; color: var(--text-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.link:hover { text-decoration: underline; }

/* ---------- Boutons d'action ---------- */
.btn {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  min-height: var(--control-h); padding: 0 var(--control-pad);
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; transition: .12s; display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;   /* les .btn portés par un <a> héritaient du soulignage par défaut */
}
.btn:hover { border-color: var(--accent); color: var(--text-soft); }
/* Largeur figée à celle de l'ancien libellé « Go — répondre » (147.5 px mesurés
   au navigateur) : le raccourcir en « Répondre » faisait perdre 31 px et
   décalait « Écarter » et « Voir l'annonce » sur toute la liste. Le centrage
   évite que le libellé se colle à gauche dans la largeur conservée. */
.btn.go { background: var(--action); border-color: transparent; color: var(--on-action); font-weight: 700;
          min-width: 147.5px; justify-content: center; }
.btn.go:hover { filter: brightness(1.06); }
.btn.dismiss:hover { border-color: var(--danger); color: var(--danger); }
.btn.danger { color: var(--danger); border-color: var(--danger-soft); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---------- Kanban (pipeline) ---------- */
/* Colonnes ouvertes : pas de conteneur. Le fond gris + le radius empilaient une
   3e boîte autour de cartes qui en sont déjà une ; la colonne est maintenant tenue
   par son titre et un filet, et les cartes se posent directement sur la page.
   L'écart entre colonnes remplace la bordure : il doit rester généreux. */
.board { display: grid; grid-template-columns: repeat(5, minmax(215px, 1fr)); gap: 26px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.col { min-width: 0; }
.col-head {
  display: flex; align-items: baseline; gap: 8px; padding: 0 2px 9px; margin-bottom: 13px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
  border-bottom: 1px solid var(--faint);
}
/* Pas de pastille de statut : la position dans le kanban porte déjà l'étape.
   Toute couleur restante sur le board est donc un signal, jamais une décoration. */
.col-head .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--faint); }
.col-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.col-empty { color: var(--faint); font-size: 12px; padding: 4px 2px 14px; }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s;
}
.kcard:hover { border-color: var(--accent); }
.kcard .t {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kcard .m { font-size: 11px; color: var(--muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .f { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.kcard .f .deadline { font-size: 11px; }
.kcard .sc { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.kcard .notes-flag { margin-left: auto; color: var(--faint); }

/* ---------- Drawer (panneau détail) ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(4, 12, 26, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 40;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(749px, 100%);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(4, 12, 26, .18);
  transform: translateX(102%); transition: transform .22s ease; z-index: 50;
  display: flex; flex-direction: column;
}
.drawer.show { transform: none; }
/* Titre centré sur la largeur du tiroir. La croix sort du flux : en flex, sa
   largeur décalait le centre du titre d'une douzaine de pixels vers la gauche.
   Le padding symétrique du h2 réserve sa place des deux côtés, pour qu'un titre
   long ne passe pas sous la croix et reste centré. */
.drawer-head { position: relative; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.drawer-head h2 { font-size: 15.5px; font-weight: 650; margin: 0; line-height: 1.4; letter-spacing: -.01em; flex: 1; color: var(--text-soft); text-align: center; padding: 0 28px; }
.drawer-close {
  position: absolute; right: 20px; top: 16px;
  background: none; border: none; color: var(--faint); font-size: 20px; cursor: pointer;
  line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.drawer-close:hover { color: var(--text); background: var(--surface-2); }
.drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: 7px 14px; font-size: 13px; margin-bottom: 16px; }
.dl dt { color: var(--text-soft); font-weight: 550; }
.dl dd { margin: 0; }
.drawer .resume { font-size: 13px; background: var(--surface-2); border-radius: 9px; padding: 11px 13px; }
.drawer-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; margin: 18px 0 8px; }
.drawer textarea {
  width: 100%; min-height: 110px; resize: vertical; font-family: var(--font-sans); font-size: 13px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.drawer-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.drawer select { width: 100%; }

/* ---------- Fiche Go/No-Go (dans le panneau détail) ---------- */
.fiche-empty { text-align: center; padding: 8px 0 4px; }
.fiche-empty .btn { margin-top: 10px; }
.fiche-err { color: var(--danger); font-weight: 550; }
.fiche-na { color: var(--faint); font-size: 12.5px; margin: 2px 0; }
.fiche-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 14px 0; }
.spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); border-top-color: var(--accent); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* La pastille de verdict vivait ici. Elle n'est plus portée que par le cockpit,
   qui ne se replie jamais : l'afficher deux fois sur un même écran ne servait
   qu'à répondre deux fois à la même question. Ne reste que le score, posé
   contre la synthèse qu'il résume. */
.fiche-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.fiche-intro { flex: 1; min-width: 0; }
.reco {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.reco-go   { background: var(--good-soft);    color: var(--good); }
.reco-vig  { background: var(--warn-soft);    color: var(--warn); }
.reco-nogo { background: var(--neutral-soft); color: var(--neutral); }
/* Anneau de score dans le tiroir : même composant que Veille, poussé à droite.
   Le chiffre passe sur --brand-ink : --brand tient le contraste en aplat, pas
   en texte de 14px. */
.adeq { margin-left: auto; flex: none; }
.adeq .n { color: var(--brand-ink); }

.fiche-syn { font-size: 13.5px; font-weight: 550; margin: 0 0 6px; line-height: 1.5; }
.fiche-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.fiche-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft);
  font-weight: 700; margin: 16px 0 7px;
}
.fiche-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.fiche-tbl td { padding: 5px 0; border-bottom: 1px solid var(--border); }
.fiche-tbl .pond { text-align: right; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.fiche-tbl tr:last-child td { border-bottom: none; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.fiche-list { margin: 2px 0; padding-left: 17px; font-size: 12.5px; line-height: 1.55; }
.fiche-list li { margin-bottom: 2px; }
.fiche-list.warn li { color: var(--warn); }
.fiche-list.todo { list-style: none; padding-left: 0; }
.fiche-list.todo li { position: relative; padding-left: 20px; color: var(--muted); }
.fiche-list.todo li::before { content: "☐"; position: absolute; left: 2px; color: var(--text-soft); }
.fiche-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text);
  background: var(--surface-2); border-radius: 9px; padding: 10px 12px; margin: 14px 0 4px;
}
.fiche-meta b { color: var(--muted); font-weight: 600; margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.fiche-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 11px; color: var(--faint); font-family: var(--font-mono);
}

/* ---------- Documents DCE (panneau détail) ---------- */
/* ---- Lots visés (bloc de l'analyse) + jalons cochables (section Dépôt) ---- */
.lots-list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lot-item label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.lot-item input { accent-color: var(--accent); }
.lot-num { color: var(--accent-ink); background: var(--accent-soft); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.lot-tit { font-weight: 550; }
.lot-meta { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lot-meta small { color: var(--faint); }
.lot-com { font-size: 12px; color: var(--muted); margin: 2px 0 0 27px; line-height: 1.45; }
.chk-head { display: flex; align-items: baseline; color: var(--text-soft); }
.chk-progress { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.chk-cat { font-size: 11.5px; font-weight: 700; color: var(--text-soft); margin: 10px 0 4px; }
.chk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chk-item { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.chk-item input { accent-color: var(--accent); flex-shrink: 0; }
.chk-item.done > span { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--border); }
.chk-detail { color: var(--muted); font-style: normal; font-size: 11.5px; }
.chk-lots { color: var(--accent-ink); background: var(--accent-soft); font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.chk-badge { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chk-badge.full { color: var(--good); font-weight: 700; }

/* Vocabulaire d'états partagé (.cand-pill, .cand-note) — réutilisé par le constructeur */
.cand-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cand-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.45; flex-wrap: wrap; }
.cand-item { font-weight: 550; }
.cand-det { color: var(--muted); font-size: 11.5px; margin-left: auto; text-align: right; }
.cand-pill {
  font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0; border: 1px solid transparent;
}
.cand-pill.ok   { background: var(--good-soft);    color: var(--good); }
.cand-pill.warn { background: var(--warn-soft);    color: var(--warn); }
.cand-pill.bad  { background: var(--danger-soft);  color: var(--danger); }
.cand-pill.none { background: var(--neutral-soft); color: var(--neutral); }
.cand-note { font-size: 11.5px; color: var(--muted); margin: 4px 0 0; line-height: 1.45; }
.cand-foot { font-size: 12px; margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; }

/* Constructeur de dossier — une pièce par bloc, ses fichiers, ses actions.
   Le bloc remplace la ligne à plat de `.cand-row` : une pièce porte désormais
   plusieurs fichiers et plusieurs actions, ça ne tient plus sur une ligne.
   `.cand-pill` est réutilisée telle quelle — même vocabulaire d'états, il ne
   faut surtout pas deux jeux de pastilles qui divergent. */
.dp-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.dp-row:last-child { border-bottom: 0; }
.dp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.45; }
.dp-item { font-weight: 550; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dp-det { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 2px 0 0 0; }
.dp-motif { color: var(--warn); font-style: normal; }

.dp-files { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dp-file { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; }
.dp-x {
  border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 3px;
  font-size: 12px; line-height: 1; border-radius: 4px;
}
.dp-x:hover { color: var(--danger); background: var(--danger-soft); }

.dp-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dp-btn {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; transition: border-color .12s, background .12s;
}
.dp-btn:hover:not(:disabled) { border-color: var(--accent); }
.dp-btn:disabled { opacity: .5; cursor: default; }
.dp-btn.go { background: var(--action); border-color: var(--action); color: var(--on-action); }
.dp-btn.ghost { color: var(--muted); }

/* Rapprochement incertain : encadré, parce que c'est une QUESTION posée à
   l'usager, pas une information. Elle doit se distinguer du reste de la ligne. */
.dp-rap {
  margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 11.5px; line-height: 1.5;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dp-pied { font-size: 12px; margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Coffre (page dédiée) — une ligne par pièce, formulaire de métadonnées replié */
.coffre-item { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.coffre-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.coffre-head .grow { flex: 1; }
.coffre-type { font-size: 11px; color: var(--text-soft); }
.coffre-group { margin: 1.2rem 0 .3rem; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.coffre-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem;
  margin: .55rem 0 .2rem 1rem; padding: .6rem .8rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
}
.coffre-form label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); gap: .2rem; }
.coffre-form input, .coffre-form select { padding: .35rem .45rem; border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; background: var(--surface); color: inherit; }
.coffre-form .row-inline { flex-direction: row; align-items: center; gap: .4rem; }
.coffre-form .full { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.coffre-hint { grid-column: 1 / -1; font-size: 11px; color: var(--faint); margin-top: -.2rem; }
@media (max-width: 560px) { .coffre-form { grid-template-columns: 1fr; } }

.docs-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.docs-list li { font-size: 12.5px; display: flex; align-items: baseline; gap: 7px; }
.docs-list .dn { font-weight: 550; word-break: break-word; }
.docs-chars { color: var(--faint); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.docs-note { color: var(--warn); font-style: normal; font-size: 11.5px; }
.trame-row { align-items: center; }
.trame-del {
  margin-left: auto; border: none; background: none; cursor: pointer; padding: 2px 6px;
  border-radius: 6px; font-size: 13px; line-height: 1; color: var(--muted);
  transition: color .12s, background .12s;
}
.trame-del:hover { color: var(--danger); background: var(--surface-2); }
.trame-del:disabled { opacity: .5; cursor: default; }
.docs-drop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.docs-file {
  font-family: var(--font-sans); font-size: 12px; color: var(--muted); flex: 1; min-width: 150px;
}
.docs-file::file-selector-button {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; margin-right: 8px;
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.docs-file::file-selector-button:hover { border-color: var(--accent); color: var(--text-soft); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--text); color: var(--bg); padding: 11px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 550; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: .2s; z-index: 60; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.error { background: var(--danger); color: #fff; }

/* ---------- Divers ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--faint); font-size: 14px; }
.demo-banner {
  font-size: 12px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 9px; padding: 9px 13px; margin-bottom: 18px; display: none;
}
.demo-banner.show { display: block; }

/* ---- Bibliothèque socle + fichiers stockés ---- */
.biblio-intro { font-size: 13.5px; color: var(--muted); max-width: 640px; margin: 4px 0 18px; line-height: 1.55; }
.biblio-drop { margin-bottom: 22px; }
.biblio-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.biblio-list .dn { font-weight: 550; }
.biblio-del { padding: 2px 8px; font-size: 11px; margin-left: auto; }
/* Liste unifiée des documents du DCE — UNE seule grille pour toute la liste.
   Chaque ligne portait la sienne : ses colonnes `auto` se dimensionnaient donc
   sur son propre contenu, et une pastille « ✕ non lu » ne tombait pas au même
   endroit qu'un « ✓ lu & analysé » de la ligne voisine. `display:contents` fait
   remonter les quatre cellules dans la grille du <ul>, qui porte les pistes
   communes : toutes les lignes partagent enfin les mêmes colonnes. */
.docs-merged {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: 14px; row-gap: 6px; align-items: center; font-size: 12.5px;
}
.doc-row { display: contents; }
/* Colonnes de données centrées : les informations de même nature se lisent les
   unes sous les autres, sur un axe commun. Le nom fait exception et reste à
   gauche — c'est la seule colonne élastique, centrer un nom court l'aurait
   éloigné du reste de sa ligne, et des noms de longueurs inégales ne partagent
   un bord commun qu'à gauche. */
.doc-name { min-width: 0; overflow: hidden; text-align: left; }
/* Nom en noir plutôt qu'en vert : la couleur de marque signale une action, or
   ici tout est cliquable — elle ne distinguait plus rien et le nom du fichier
   est l'information à lire en premier. Portée au .doc-name pour ne pas décolorer
   les autres liens de téléchargement de l'application. */
.doc-name .link { max-width: 100%; color: var(--text); }
.doc-name .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.doc-name .dn { font-weight: 550; }
.doc-size { color: var(--neutral); font-size: 11.5px; white-space: nowrap; text-align: center; }
.doc-ext, .doc-cadre { display: flex; justify-content: center; }
.ext-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ext-pill.ok  { background: var(--good-soft); color: var(--good); }
.ext-pill.bad { background: var(--warn-soft); color: var(--warn); cursor: help; }
.cadre-pill {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--neutral); cursor: pointer;
  white-space: nowrap; transition: border-color .12s, color .12s, background .12s;
}
.cadre-pill:hover { border-color: var(--warn); color: var(--warn); }
.cadre-pill.on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.cadre-pill:disabled { opacity: .55; cursor: default; }
.banner-cadre {
  font-size: 13px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 9px; padding: 9px 12px; margin: 4px 0 10px; line-height: 1.5;
}
.banner-cadre strong { color: var(--text); }

/* ---- Historique acheteur (panneau détail pipeline) ---- */
.histo-sortant {
  font-size: 13px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 9px; padding: 9px 12px; margin: 4px 0 10px;
}
.histo-sortant-com { color: var(--text); font-size: 12.5px; margin-top: 4px; }
.histo-neuf {
  font-size: 13px; color: var(--good); background: var(--good-soft);
  border-radius: 9px; padding: 9px 12px; margin: 4px 0 10px;
}
.histo-list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.histo-list li { font-size: 13px; line-height: 1.45; }
.histo-date { color: var(--faint); font-size: 11px; font-family: var(--font-mono); margin-right: 6px; white-space: nowrap; }
.histo-meta { color: var(--muted); font-size: 12px; margin-top: 1px; }
.histo-freq { margin-top: 10px; }
.histo-more { margin: 8px 0 2px; }
.histo-more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; }
.histo-more[open] summary { margin-bottom: 6px; }

/* Identité de l'acheteur (haut de l'onglet « Information sur l'acheteur ») */
.ach-warn {
  font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 9px; padding: 8px 11px; margin: 2px 0 10px;
}
.ach-cands { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ach-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.ach-nom { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ach-siren { font-size: 11px; font-family: var(--font-mono); color: var(--faint); white-space: nowrap; }
.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 10px; }
.ach-cell {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ach-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; }
.ach-cell .v { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ach-pres { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0 0 4px; }
.ach-sep {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600;
  margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--border);
}
@media (max-width: 460px) { .ach-grid { grid-template-columns: 1fr; } }

/* Rectificatif : bandeau (hero du tiroir) + pastille (carte kanban) */
.ao-rect {
  font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 8px;
}
/* Même grammaire que .kc-deadline : fond teinté, pas de bordure pleine. La bordure
   ajoutait un 3e niveau d'intensité qui écrasait les échéances voisines. */
.rect-pill {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border-radius: 999px;
  padding: 2px 8px; margin: 2px 0 6px;
}

/* Bouton de déconnexion — injecté par auth-guard.js à gauche de la cloche.
   Il reprend la géométrie de .notif-btn pour que les deux boutons s'alignent.
   `.notif-wrap` porte margin-left:auto pour se coller à droite ; quand le bouton
   de déconnexion le précède, c'est LUI qui prend l'auto, sinon les deux se
   repousseraient et la déconnexion finirait au milieu du bandeau. */
.logout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  padding: 4px; margin-left: auto; margin-right: 10px;
  line-height: 1; cursor: pointer; color: #d9d9d9; transition: .12s;
}
.logout-btn:hover { color: var(--action); }
.logout-btn:disabled { opacity: .5; cursor: default; }
.logout-btn + .notif-wrap { margin-left: 0; }

/* Compte entreprise — entre la déconnexion et la cloche. Même géométrie que les
   deux autres pour que les trois s'alignent.
   ⚠️ `.logout-btn + .notif-wrap` ne matche plus dès que ce bouton s'intercale :
   sans la règle ci-dessous, la cloche récupérait son `margin-left:auto` et partait
   se coller à droite en abandonnant les deux autres au milieu du bandeau. */
.compte-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: transparent; border: none; border-radius: 8px;
  padding: 4px; margin-right: 10px;
  line-height: 1; cursor: pointer; color: #d9d9d9; transition: .12s;
}
.compte-btn:hover { color: var(--action); }
.compte-btn.actif { color: var(--action); }
.compte-btn + .notif-wrap { margin-left: 0; }
/* Les trois icônes au même gabarit. La cloche est un PNG en masque, les deux
   autres des SVG au trait : à taille de boîte égale, le masque paraît un peu
   plus dense. C'est voulu — c'est le seul des trois qui porte une alerte. */
.logout-btn svg, .compte-btn svg { width: var(--ico); height: var(--ico); display: block; }
.compte-alerte {
  position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
  background: var(--danger); border-radius: 999px;
}

/* Centre de notifications : cloche (header) + panneau déroulant */
.topright { display: flex; align-items: center; gap: 12px; }
.notif-wrap { position: relative; margin-left: auto; }
.notif-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  border-radius: 8px; padding: 4px; line-height: 1; cursor: pointer;
  color: var(--text); transition: .12s;
}
/* La cloche est un PNG monochrome utilisé en masque : la couleur vient du
   background, ce qui la rend lisible en thème sombre et permet de la passer
   en ambre dès qu'une alerte est en attente. */
.notif-ico {
  display: block; width: var(--ico); height: var(--ico); background: #d9d9d9; transition: .12s;
  -webkit-mask: url(bell.png) center / contain no-repeat;
          mask: url(bell.png) center / contain no-repeat;
}
.notif-btn:hover { border-color: var(--accent); }
.notif-btn:hover .notif-ico { background: var(--action); }
.notif-btn.has { border-color: var(--action); }
.notif-btn.has .notif-ico { background: var(--action); }
.notif-badge {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(360px, 88vw);
  max-height: 72vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.20); z-index: 60;
}
.notif-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft);
  font-weight: 600; padding: 10px 13px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface);
}
.notif-item {
  display: flex; gap: 10px; width: 100%; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--border); padding: 10px 13px; cursor: pointer;
  color: var(--text); font: inherit;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--surface-2); }
.notif-ic { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-line { font-size: 12px; color: var(--muted); }
.notif-lbl { font-weight: 700; }
.notif-lbl.warn, .notif-ic.warn { color: var(--warn); }
.notif-lbl.bad, .notif-ic.bad { color: var(--danger); }
.notif-lbl.soft, .notif-ic.soft { color: var(--muted); }
.notif-sub { color: var(--muted); font-variant-numeric: tabular-nums; }
.notif-ob { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-ac { font-size: 11.5px; color: var(--muted); }
.notif-empty { padding: 22px 13px; text-align: center; color: var(--muted); font-size: 13px; }

/* Volet prix / offre */
.prix-panel { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.prix-lot-h { font-weight: 700; font-size: 13px; color: var(--text-soft); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prix-budget { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.prix-mode { display: flex; gap: 16px; font-size: 12.5px; margin-bottom: 8px; }
.prix-mode label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.prix-build { margin-bottom: 8px; }
.p-field { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.prix-panel input, .prix-panel select, .prix-panel textarea {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12.5px;
}
.prix-panel input:focus, .prix-panel select:focus, .prix-panel textarea:focus { outline: none; border-color: var(--accent); }
.p-field input, .p-ref { width: 120px; }
.p-lignes { display: flex; flex-direction: column; gap: 5px; }
.p-ligne { display: flex; align-items: center; gap: 6px; }
.pl-profil { flex: 1; min-width: 0; }
.pl-tjm, .pl-jours { width: 72px; }
.p-item { flex-wrap: wrap; }
.p-item .pl-desig { flex: 1 1 100%; min-width: 0; }
.p-item .pl-unite { width: 76px; }
.p-item .pl-pu, .p-item .pl-qte { width: 76px; }
.p-bpu-note { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.p-x { color: var(--muted); }
.p-delligne { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.p-delligne:hover { color: var(--danger); }
.p-addligne { margin-top: 6px; }
.prix-formule { margin: 8px 0; }
.prix-formule summary { cursor: pointer; font-size: 12px; color: var(--muted); user-select: none; }
.p-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.p-form-grid label, .p-verbatim { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.pf-verbatim { width: 100%; box-sizing: border-box; resize: vertical; }
.prix-hyp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0; }
.p-hyp-lbl { color: var(--muted); }
.prix-out { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.po-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 2px 0; gap: 8px; }
.po-line small { color: var(--muted); font-size: 11px; }
.po-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-low { color: var(--warn); }
.po-na { color: var(--muted); font-weight: 600; }
.po-oab { font-size: 12px; color: var(--danger); background: var(--warn-soft); border: 1px solid var(--danger); border-radius: 7px; padding: 5px 9px; margin: 6px 0; }
.po-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.po-sens { margin-top: 8px; }
.po-sens-h { font-size: 11px; color: var(--text-soft); margin-bottom: 4px; }
.ps-tbl { width: 100%; border-collapse: collapse; }
.ps-tbl td { text-align: center; border: 1px solid var(--border); padding: 4px 2px; }
.ps-r { font-size: 10px; color: var(--muted); }
.ps-n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-p { font-size: 10.5px; color: var(--warn); font-variant-numeric: tabular-nums; }
.po-taux { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.po-arbitrage { font-size: 11.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
                border-radius: 8px; padding: 5px 8px; margin-top: 5px; line-height: 1.45; }
.p-hyp-note { flex-basis: 100%; font-size: 11px; color: var(--faint); line-height: 1.4; }
.prix-tech { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 8px 0; }
.p-notetech { width: 72px; }
.po-glob { margin-top: 10px; }
.po-glob-h { font-size: 11px; color: var(--text-soft); margin-bottom: 4px; }
.prix-warn { font-size: 11px; color: var(--muted); margin: 8px 0; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (max-width: 960px) {
  .board { grid-template-columns: repeat(5, 230px); }
}
@media (max-width: 720px) {
  /* Le menu passe sur une 2e ligne : la hauteur figée du bandeau le ferait
     déborder. On la libère ici seulement — au-dessus de 720px elle reste
     stricte, ce qui garantit que le menu tombe au même pixel d'une page à l'autre. */
  header.top { flex-wrap: wrap; height: auto; min-height: 52px; margin-bottom: 56px; }
  .tiles { grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; }
  .card { grid-template-columns: 1fr; gap: 10px; }
  .score { display: flex; align-items: center; gap: 12px; text-align: left; }
  .score .lbl { display: none; }
}

/* Sélecteur de gabarit dans le constructeur (Lot 3) — même gabarit visuel que
   `.dp-btn` : c'est une action de la même rangée, elle ne doit pas s'en détacher. */
.dp-sel {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 8px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; max-width: 260px;
}
.dp-sel:hover:not(:disabled) { border-color: var(--accent); }
.dp-sel:disabled { opacity: .5; cursor: default; }

/* Fiche entreprise (Lot 3 bis) — en tête du coffre, repliée quand elle est
   complète : une donnée qu'on saisit une fois ne doit pas pousser le coffre
   hors de l'écran. */
.ent-bloc { margin: 0 0 22px; }
.ent-det {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 0 16px;
}
.ent-det > summary {
  cursor: pointer; padding: 13px 0; font-size: 13.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ent-det[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
/* Chevron d'état. Le marqueur natif de <details> disparaît dès que le sommaire
   passe en flex : sans lui, rien ne dit qu'un encart replié peut s'ouvrir. Même
   dessin que les selects (chevron-down), posé en MASQUE et non en image, pour
   qu'il prenne var(--muted) et suive donc le thème clair/sombre. */
.ent-det > summary::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: -3px;
  background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transform: rotate(-90deg); transition: transform .15s ease;
}
.ent-det[open] > summary::before { transform: rotate(0deg); }
/* Respiration en bas de l'encart déplié : sans elle la dernière rangée de champs
   touche la bordure, alors que le sommaire en garde 13px en haut. Uniquement sur
   [open] — replié, l'encart se réduit au sommaire, qui a déjà son padding.
   22px et pas 16 : au-dessus des champs il y a 13px de sommaire + le filet +
   14px de marge, soit ~28px de respiration. 16px en bas rendait l'encart
   visiblement plus serré du bas que du haut. */
.ent-det[open] { padding-bottom: 22px; }
.ent-groupe { margin: 0 0 16px; }
.ent-groupe h3 {
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-soft); margin: 0 0 8px;
}
/* Interligne plus large que l'entre-colonnes : c'est verticalement que le
   libellé d'une rangée risque d'être lu comme appartenant au champ du dessus. */
.ent-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 10px; }
/* Note d'avertissement suivie de champs : sans cette marge le premier libellé se
   colle au texte de la note et se lit comme sa dernière ligne. Ciblé sur la
   succession note → grille, pour ne pas décoller les notes placées APRÈS les
   champs (bloc « Compte & accès »). */
.ent-det > .cand-note + .ent-grille { margin-top: 14px; }
.ent-champ { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ent-champ > span { color: var(--muted); }
.ent-champ.requis > span { color: var(--text); font-weight: 550; }
.ent-champ input {
  height: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.ent-champ input:focus { outline: none; border-color: var(--accent); }
.ent-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }

/* ---------- Page Compte entreprise (Lot 8) ---------- */
.ent-entete {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.ent-entete-nom {
  font-size: 17px; font-weight: 650;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* La frontière entre les deux régimes. Elle est VISIBLE à dessein : au-dessus,
   ce qui part mot pour mot dans un document signé ; en dessous, ce qui ne sort
   jamais de l'application. Un simple titre laisserait croire à une section de
   plus. */
.ent-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 14px; font-size: 11px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.ent-sep::before, .ent-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.ent-champ.full-w { grid-column: 1 / -1; }
.ent-champ textarea {
  padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); resize: vertical;
}
.ent-champ textarea:focus { outline: none; border-color: var(--accent); }
.ent-champ input[readonly] { color: var(--muted); background: var(--surface); }
.dp-bord { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* Téléchargement en cours : signalé sans toucher au contenu du lien. */
[data-dl-en-cours] { opacity: .5; pointer-events: none; }

/* ---------- Profil de veille (Lot 3 multi-locataire) ----------
   Le bloc est dense : une liste extensible de mots-clés, quatorze cases de
   région, six champs. Sans repères, il se lit comme un mur de formulaire. D'où
   les sous-titres, qui découpent le geste — dire ce qu'on cherche, où, et à
   quelles conditions — plutôt que les champs. */
.veille-sstitre {
  margin: 20px 0 8px; font-size: 12px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; color: var(--brand);
  display: flex; align-items: baseline; gap: 8px;
}
.veille-sstitre:first-child { margin-top: 6px; }

/* Mots-clés : une ligne = un mot-clé. Les champs restent étroits (28rem) même
   sur grand écran — un champ pleine largeur pour « TMS » invite à y écrire une
   phrase, et le BOAMP cherche des termes, pas des phrases. */
.kw-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.kw-ligne { display: flex; align-items: center; gap: 6px; max-width: 28rem; }
.kw-ligne input {
  flex: 1; height: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
}
.kw-ligne input:focus { outline: none; border-color: var(--accent); }
.kw-x {
  flex: none; width: 30px; height: 30px; line-height: 1; font-size: 17px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.kw-x:hover { border-color: var(--danger); color: var(--danger); }

/* Régions : grille souple, une case par région. `auto-fill` plutôt qu'un nombre
   fixe de colonnes — quatorze cases sur trois colonnes tiennent sur un portable
   et s'étalent sur un écran large, sans média-requête. */
.reg-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 12px; margin: 8px 0 12px;
}
.reg-case {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 8px; border-radius: 8px; cursor: pointer;
}
.reg-case:hover { background: var(--accent-soft); }
.reg-case input { width: auto; margin: 0; cursor: pointer; }
.reg-case > span { color: var(--text); }
/* Le partiel doit se distinguer du décoché au premier coup d'œil : sans ce
   repère, « 3 départements sur 6 » se lirait « rien dans cette région ». */
.reg-case.partiel { background: var(--accent-soft); }
.reg-part { font-style: normal; font-size: 11px; color: var(--brand); font-weight: 600; }
.reg-france { margin: 8px 0 2px; padding-left: 8px; }
.reg-detail { margin: 0 0 6px; }
.reg-detail textarea { width: 100%; }

.veille-actif { flex-direction: row; align-items: center; gap: 8px; }
.veille-actif input { width: auto; }
.veille-actif > span { color: var(--text); margin: 0; }