/* Cockpit piiitch — système de design de l'application.
   Sujet : un poste de pilotage de levée. Deux publics, un même besoin —
   où en est le tour, et quelle est la prochaine action.
   Principe : les chiffres s'alignent, un seul accent à la fois. */

:root {
  --pi-ink:        #20231D;   /* charbon : texte principal */
  --pi-ink-soft:   #65685D;
  --pi-indigo:     #20231D;   /* primaire de marque */
  --pi-indigo-dim: #F7EDAC;   /* ligne active, sélection */
  --pi-paper:      #FFFEF9;   /* panneaux */
  --pi-canvas:     #F8F7EE;   /* fond d'application */
  --pi-line:       #D9DBCF;
  --pi-gold:       #6B581B;   /* deal en or — jamais décoratif */
  --pi-alert:      #A7332D;
  --pi-live:       #325C44;

  --pi-rail: 232px;
  --pi-list: 312px;
  --pi-r: 10px;
  --pi-r-sm: 6px;
  --pi-gap: 16px;

  /* Un cockpit financier est fait de nombres qui doivent s'aligner
     verticalement : chiffres tabulaires partout, sans exception. */
  --pi-font: Arial, Helvetica, sans-serif;
}

.pi { font-family: var(--pi-font); font-variant-numeric: tabular-nums;
      color: var(--pi-ink); background: var(--pi-canvas);
      margin: 0; -webkit-font-smoothing: antialiased; }
.pi *, .pi *::before, .pi *::after { box-sizing: border-box; }

.pi-shell { display: grid; min-height: 100vh;
            grid-template-columns: var(--pi-rail) var(--pi-list) 1fr;
            grid-template-rows: 1fr auto; }
.pi-rail   { grid-row: 1; border-right: 1px solid var(--pi-line);
             background: var(--pi-paper); padding: 18px 14px; }
.pi-list   { grid-row: 1; border-right: 1px solid var(--pi-line);
             background: var(--pi-paper); overflow-y: auto; }
.pi-detail { grid-row: 1; padding: 22px 26px; overflow-y: auto; }
.pi-status { grid-column: 1 / -1; border-top: 1px solid var(--pi-line);
             background: var(--pi-paper); padding: 12px 22px;
             display: flex; align-items: center; justify-content: space-between;
             font-size: .82rem; color: var(--pi-ink-soft); }

/* -- rail ---------------------------------------------------------------- */
.pi-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.pi-brand__mark { width: 30px; height: 30px; border-radius: 8px;
                  background: var(--pi-indigo); color: #fff;
                  display: grid; place-items: center; font-weight: 700; }
.pi-brand__name { font-weight: 650; font-size: .95rem; line-height: 1.15; }
.pi-brand__sub  { font-size: .74rem; color: var(--pi-ink-soft); }

.pi-railgroup { margin: 18px 0 6px; font-size: .74rem;
                color: var(--pi-ink-soft); }
.pi-nav { display: flex; flex-direction: column; gap: 1px; }
.pi-nav a { display: flex; align-items: center; gap: 9px;
            padding: 7px 10px; border-radius: var(--pi-r-sm);
            color: var(--pi-ink); text-decoration: none; font-size: .88rem; }
.pi-nav a:hover { background: var(--pi-canvas); }
.pi-nav a[aria-current="page"] { background: var(--pi-indigo-dim);
                                 color: var(--pi-indigo); font-weight: 600; }

/* -- colonne liste ------------------------------------------------------- */
.pi-listhead { padding: 16px 16px 12px; border-bottom: 1px solid var(--pi-line);
               position: sticky; top: 0; background: var(--pi-paper); }
.pi-listhead h1 { font-size: .95rem; margin: 0 0 8px; font-weight: 650; }
.pi-count { float: right; font-size: .8rem; color: var(--pi-ink-soft);
            font-weight: 400; }
.pi-meter { height: 3px; background: var(--pi-line); border-radius: 2px; }
.pi-meter > i { display: block; height: 100%; border-radius: 2px;
                background: var(--pi-indigo); }

.pi-group { padding: 12px 16px 4px; font-size: .76rem;
            color: var(--pi-ink-soft); }
.pi-row { display: block; padding: 10px 16px; text-decoration: none;
          color: inherit; border-left: 2px solid transparent; }
.pi-row:hover { background: var(--pi-canvas); }
.pi-row[aria-current="true"] { background: var(--pi-indigo-dim);
                               border-left-color: var(--pi-indigo); }
.pi-row__name { font-size: .88rem; font-weight: 600; }
.pi-row__meta { font-size: .77rem; color: var(--pi-ink-soft); margin-top: 2px; }

/* -- panneau détail ------------------------------------------------------ */
.pi-head { display: flex; align-items: flex-start; gap: 12px;
           margin-bottom: 16px; }
.pi-avatar { width: 40px; height: 40px; border-radius: 50%;
             background: var(--pi-indigo-dim); flex: none; }
.pi-head h2 { margin: 0; font-size: 1.3rem; font-weight: 650;
              color: var(--pi-indigo); }
.pi-head p  { margin: 2px 0 0; font-size: .84rem; color: var(--pi-ink-soft); }

.pi-panel { background: var(--pi-paper); border: 1px solid var(--pi-line);
            border-radius: var(--pi-r); padding: 16px 18px;
            margin-bottom: var(--pi-gap); }
.pi-panel h3 { margin: 0 0 10px; font-size: .84rem; font-weight: 600;
               color: var(--pi-ink-soft); }

.pi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pi-chip { border: 1px solid var(--pi-line); background: var(--pi-paper);
           border-radius: 999px; padding: 5px 12px; font-size: .8rem;
           color: var(--pi-ink); text-decoration: none; }
.pi-chip--on { background: var(--pi-ink); border-color: var(--pi-ink);
               color: #fff; font-weight: 600; }
.pi-chip--gold { border-color: var(--pi-gold); color: var(--pi-gold); }

.pi-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block;
          background: var(--pi-live); margin-right: 6px; }

.pi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 14px; }
.pi-fact__n { font-size: 1.35rem; font-weight: 650; }
.pi-fact__l { font-size: .77rem; color: var(--pi-ink-soft); }

.pi-feed { list-style: none; margin: 0; padding: 0; }
.pi-feed li { display: flex; gap: 10px; padding: 9px 0;
              border-top: 1px solid var(--pi-line); font-size: .85rem; }
.pi-feed li:first-child { border-top: 0; }
.pi-feed span { color: var(--pi-ink-soft); font-size: .8rem; }

.pi-empty { color: var(--pi-ink-soft); font-size: .88rem; }

.pi-field { width: 100%; padding: 8px 10px; border: 1px solid var(--pi-line);
            border-radius: var(--pi-r-sm); font: inherit;
            background: var(--pi-paper); color: var(--pi-ink); }
.pi-btn { background: var(--pi-indigo); color: #fff; border: 0;
          border-radius: var(--pi-r-sm); padding: 8px 15px; font: inherit;
          font-weight: 600; cursor: pointer; text-decoration: none;
          display: inline-block; }
.pi-btn:hover { background: #325C44; }

.pi-skip { position: absolute; left: -9999px; }
.pi-skip:focus { left: 12px; top: 12px; background: var(--pi-paper);
                 padding: 8px 12px; border-radius: var(--pi-r-sm); z-index: 9; }
.pi :focus-visible { outline: 2px solid var(--pi-indigo); outline-offset: 2px; }

@media (max-width: 980px) {
  .pi-shell { grid-template-columns: 1fr; }
  .pi-rail, .pi-list { border-right: 0; border-bottom: 1px solid var(--pi-line); }
  .pi-list { max-height: 42vh; }
  .pi-detail { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .pi * { transition: none !important; } }

/* -- surface d'interview : colonne unique ------------------------------- */
.pi-conv { max-width: 720px; margin: 0 auto; padding: 26px 20px 0;
           display: flex; flex-direction: column; min-height: 100vh; }
.pi-fil { list-style: none; margin: 0 0 auto; padding: 0;
          display: flex; flex-direction: column; gap: 10px; }
.pi-bulle { max-width: 78%; padding: 11px 14px; border-radius: 14px;
            font-size: .93rem; line-height: 1.45; }
.pi-bulle--eux { background: var(--pi-paper); border: 1px solid var(--pi-line);
                 border-bottom-left-radius: 4px; align-self: flex-start; }
.pi-bulle--moi { background: var(--pi-indigo); color: #fff;
                 border-bottom-right-radius: 4px; align-self: flex-end; }
.pi-compose { position: sticky; bottom: 0; background: var(--pi-canvas);
              padding: 14px 0 18px; }
.pi-compose__row { display: flex; gap: 8px; }
.pi-compose__row .pi-field { flex: 1; }
.pi-marge { display: flex; align-items: center; gap: 10px;
            font-size: .8rem; color: var(--pi-ink-soft); margin-bottom: 10px; }
.pi-marge .pi-meter { flex: 1; }
.pi-acquis { list-style: none; margin: 0; padding: 0; display: flex;
             flex-wrap: wrap; gap: 6px; }
.pi-acquis li { font-size: .76rem; color: var(--pi-ink-soft);
                border: 1px solid var(--pi-line); border-radius: 999px;
                padding: 3px 9px; background: var(--pi-paper); }