/* ============================================================================
   Portail AR Digital : feuille applicative, refonte « Focus »
   Consomme exclusivement les jetons de tokens.css. Aucune valeur en dur ici.
   ========================================================================= */

/* --- Remise à zéro --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, label, summary { touch-action: manipulation; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
/* Le contenu saisi par les clients contient parfois une URL ou un mot sans
   espace : il se coupe plutôt que de déborder de sa carte. La propriété
   s'hérite, elle vaut donc pour tout le document, blocs cités compris. */
body { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; text-underline-offset: 3px; }

/* Un seul anneau de focus dans toute l'application. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Alpine : évite le clignotement avant l'hydratation. */
[x-cloak] { display: none !important; }
.skip-link {
  position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-24)); z-index: 100;
  background: var(--surface); color: var(--ink); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); font-weight: 700;
}
.skip-link:focus { top: var(--sp-4); }

/* --- Typographie ----------------------------------------------------------- */
.t-metric  { font-size: var(--fs-metric);  font-weight: var(--fw-metric);  letter-spacing: var(--ls-metric);  line-height: 1; font-variant-numeric: tabular-nums; }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: 1.1; text-wrap: balance; }
.t-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-h1);      letter-spacing: var(--ls-h1);      line-height: 1.15; text-wrap: balance; }
.t-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-h2);      letter-spacing: var(--ls-h2);      line-height: 1.3; }
.t-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-h3);      letter-spacing: var(--ls-h3);      line-height: 1.35; }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-small   { font-size: var(--fs-small);   font-weight: 500; color: var(--ink-soft); line-height: 1.5; }
.t-label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.4;
}
.t-data    { font-family: var(--font-data); font-size: var(--fs-data); font-weight: 600; }
.t-mute    { color: var(--ink-mute); }
.t-soft    { color: var(--ink-soft); }
.t-lead    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); max-width: 62ch; }
.t-measure { max-width: 62ch; }

/* Référence de ticket : se lit caractère par caractère. */
.reference {
  display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-data); font-size: var(--fs-data); font-weight: 700;
  letter-spacing: .04em; color: var(--ink);
}
.reference--inline {
  padding: 0; background: none; border: none; font-size: var(--fs-small);
  letter-spacing: .03em; color: var(--ink-soft);
}

/* --- Charpente ------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; }
.shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { flex: 1; padding: 0 var(--sp-10) var(--sp-14); }
.page__inner { max-width: var(--content-max); margin: 0 auto; }
.page__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-7);
}
.page__actions { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.page__eyebrow { margin-bottom: var(--sp-2); }
.page__sub { margin-top: var(--sp-2); font-size: var(--fs-body); color: var(--ink-soft); font-weight: 500; }

.date-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.date-chip::first-letter { text-transform: uppercase; }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-1 { display: flex; flex-direction: column; gap: var(--sp-1); }
.row     { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--tight { gap: var(--sp-2); }
.spacer  { flex: 1; }
.grid    { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.grid--split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
.section { margin-top: var(--sp-5); }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}

/* --- Barre latérale ---------------------------------------------------------
   Sur le fond crème, comme la page : la carte blanche reste le seul relief.
   La navigation active passe en pastille encre. */
.sidebar {
  width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  background: var(--bg); border-right: 1px solid var(--hairline);
}
.sidebar__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-2); color: var(--ink); text-decoration: none;
}
.sidebar__brand:hover { text-decoration: none; color: var(--ink); }
.sidebar__logo { height: 24px; width: auto; }
.sidebar__context {
  padding-left: var(--sp-3); border-left: 1px solid var(--border-strong);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink); line-height: 1.3;
}

.sidebar__me {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.avatar {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  background: var(--lime); color: var(--ink); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .04em;
}
/* Petite pastille ronde des fils de messages. */
.avatar--sm { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); }
.sidebar__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sidebar__who strong {
  font-size: var(--fs-small); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__who span {
  font-size: var(--fs-label); font-weight: 500; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sidebar__nav { display: flex; flex-direction: column; gap: var(--sp-6); }
.sidebar__group { display: flex; flex-direction: column; gap: var(--sp-1); }
.sidebar__label {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-mute);
}
.sidebar__link {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 46px; padding: 0 var(--sp-3); border-radius: var(--r-md);
  color: var(--ink-soft); font-size: var(--fs-data); font-weight: 600; text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.sidebar__link:hover { background: var(--bg-deep); color: var(--ink); text-decoration: none; }
.sidebar__link.is-active { background: var(--ink); color: var(--surface); }
.sidebar__link.is-disabled { opacity: .45; cursor: default; }
.sidebar__link.is-disabled:hover { background: none; color: var(--ink-soft); }
.sidebar__link svg { flex: none; }
.sidebar__count {
  margin-left: auto; min-width: 28px; height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); background: var(--surface-3); color: var(--ink-soft);
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar__count--alert { background: var(--st-action-bg); color: var(--st-action-fg); }
.sidebar__link.is-active .sidebar__count { background: var(--on-blue-fill); color: var(--surface); }

.sidebar__cta {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-card);
  background: var(--blue); color: var(--on-blue);
}
.sidebar__cta-title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: var(--ls-h1); line-height: 1.15; }
.sidebar__cta-text { font-size: var(--fs-small); color: var(--on-blue-soft); line-height: 1.5; }
.sidebar__cta .btn { margin-top: var(--sp-2); }

.sidebar__status {
  margin-top: auto; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
a.sidebar__status:hover { background: var(--bg-deep); color: var(--ink); text-decoration: none; }
.status-dot { width: 8px; height: 8px; flex: none; border-radius: var(--r-pill); background: var(--success); }
.status-dot--danger { background: var(--danger); }

/* --- Barre supérieure -------------------------------------------------------
   Plus de bandeau blanc : quelques boutons ronds posés sur le crème. Le titre
   de la page reste un h1 pour les lecteurs d'écran, le grand titre visible
   vit dans l'en-tête de page. */
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center;
  gap: var(--sp-2); padding: 0 var(--sp-10);
}
.topbar__brand img { height: 22px; width: auto; }
.icon-btn {
  position: relative; width: var(--control-h); height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill);
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--ink); text-decoration: none; }
.icon-btn__dot {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-blue);
  font-family: var(--font-data); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* Sélecteur de langue : même grammaire que la navigation, pastille encre. */
.lang {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.lang a {
  min-width: 34px; padding: 5px var(--sp-2); border-radius: var(--r-pill); text-align: center;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); text-decoration: none; line-height: 1.3;
}
.lang a:hover { color: var(--ink); text-decoration: none; }
.lang a.is-active { background: var(--ink); color: var(--surface); }

/* --- Cartes ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.card__body { padding: var(--sp-6) var(--sp-7); }
.card__head {
  padding: var(--sp-6) var(--sp-7) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.card__head + .card__body { padding-top: var(--sp-1); }
.card__foot {
  padding: var(--sp-4) var(--sp-7); border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.card--flush { box-shadow: none; }
.card--flush > .card__body { padding: var(--sp-4); }
.card--fill { height: 100%; display: flex; flex-direction: column; }
.card--fill > .card__body { flex: 1; display: flex; flex-direction: column; }
.card__link {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft);
}
.card__link:hover { color: var(--ink); text-decoration: none; }
.card__meta { margin-left: auto; font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }

/* Carte « à venir » : le citron vert en aplat, une fois par écran au plus. */
.card--lime { background: var(--lime); border-color: var(--lime); }
.card--lime .t-small { color: var(--ink); }

/* Tables posées dans une carte : alignées sur la marge de la carte. */
.card .table th:first-child, .card .table td:first-child { padding-left: var(--sp-7); }
.card .table th:last-child,  .card .table td:last-child  { padding-right: var(--sp-7); }

/* --- Cartes de chiffre ------------------------------------------------------
   Titre en haut, flèche ronde si la carte mène quelque part, grand chiffre,
   légende en pied. Une seule carte bleue par rangée : c'est le point focal. */
.stat {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 176px; padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
a.stat:hover { color: var(--ink); text-decoration: none; border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.stat__title { font-size: var(--fs-data); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.stat__go {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
a.stat:hover .stat__go { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stat__value {
  font-size: var(--fs-metric); font-weight: var(--fw-metric); letter-spacing: var(--ls-metric);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.stat__caption { margin-top: auto; font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); line-height: 1.45; }

.stat--accent { background: var(--blue); border-color: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-blue); }
.stat--accent .stat__caption { color: var(--on-blue-soft); }
.stat--accent .stat__go { border-color: var(--on-blue-line); color: var(--on-blue); }
a.stat--accent:hover { color: var(--on-blue); background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: var(--shadow-blue); }
a.stat--accent:hover .stat__go { background: var(--on-blue); border-color: var(--on-blue); color: var(--blue); }

/* --- Listes à tuiles ------------------------------------------------------- */
.list { display: flex; flex-direction: column; }
.list__row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-top: 1px solid var(--hairline);
  color: inherit; text-decoration: none;
}
.list > li:first-child > .list__row,
.list > .list__row:first-child { border-top: none; padding-top: var(--sp-2); }
a.list__row:hover { color: inherit; text-decoration: none; }
a.list__row:hover .list__title { color: var(--blue); }
.list__tile {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.list__tile--blue { background: var(--blue-soft); color: var(--blue-ink); }
.list__tile--alert { background: var(--st-action-bg); color: var(--st-action-fg); }
.list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list__title {
  font-size: var(--fs-data); font-weight: 700; color: var(--ink); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s var(--ease);
}
.list__sub { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.list__value { font-family: var(--font-data); font-size: var(--fs-data); font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Barre de progression fine, pour une ligne de projet. */
.progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress__bar { height: 100%; width: var(--p, 0%); background: var(--blue); border-radius: var(--r-pill); }

/* --- Histogramme sur sept jours -------------------------------------------
   Piste hachurée pleine hauteur, remplissage bleu. Le jour courant en bleu. */
.bars {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3);
  align-items: end; margin-top: var(--sp-4);
}
.bars__col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.bars__value { font-family: var(--font-data); font-size: var(--fs-small); font-weight: 700; color: var(--ink-mute); }
.bars__col.has-value .bars__value { color: var(--ink); }
.bars__track {
  position: relative; width: 100%; max-width: 48px; height: 148px;
  border-radius: var(--r-md); background: var(--hatch), var(--surface-2); overflow: hidden;
}
/* Dans une carte étirée par sa voisine, les barres prennent la hauteur
   disponible au lieu de laisser un vide sous l'histogramme. */
.card--fill .bars { flex: 1; align-items: stretch; min-height: 200px; }
.card--fill .bars__track { flex: 1; height: auto; min-height: 120px; }
.bars__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 0%);
  background: var(--blue); border-radius: var(--r-md);
}
.bars__day { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.bars__col.is-today .bars__day { color: var(--blue); font-weight: 700; }
/* Un jour qui a reçu des demandes est un lien vers leur liste. */
a.bars__col { color: inherit; text-decoration: none; border-radius: var(--r-md); }
a.bars__col:hover { text-decoration: none; }
a.bars__col:hover .bars__fill { background: var(--blue-hover); }
a.bars__col:hover .bars__day, a.bars__col:focus-visible .bars__day { color: var(--blue); }

/* --- Jauge demi-cercle ----------------------------------------------------- */
.gauge { position: relative; width: 100%; max-width: 250px; margin: var(--sp-4) auto 0; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge__track { stroke: var(--surface-3); }
.gauge__value { stroke: var(--blue); }
.gauge__center { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.gauge__num { font-size: var(--fs-display); font-weight: var(--fw-metric); letter-spacing: var(--ls-metric); line-height: 1; }
.gauge__label { margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }

/* --- Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-5); border-radius: var(--r-md);
  font-size: var(--fs-data); font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn svg { flex: none; }

.btn--primary { background: var(--blue); color: var(--on-blue); }
.btn--primary:hover { background: var(--blue-hover); color: var(--on-blue); }

/* Citron sur fond bleu ou encre : l'appel qui doit se voir de loin. */
.btn--accent { background: var(--lime); color: var(--ink); }
.btn--accent:hover { background: var(--lime-hover); color: var(--ink); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--ink-mute); color: var(--ink); }

.btn--ghost { background: none; color: var(--ink-soft); padding: 0 var(--sp-3); }
.btn--ghost:hover { background: var(--bg-deep); color: var(--ink); }

/* Danger : jamais plein. */
.btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

.btn--sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-small); border-radius: var(--r-sm); }
.btn--block { width: 100%; }

/* --- Champs ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.field__req { color: var(--danger); }
.field__hint { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.field__error {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-small); font-weight: 600; color: var(--danger);
}
.field__error svg { flex: none; }

.input, .select, .textarea {
  width: 100%; min-height: var(--control-h); padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-size: var(--fs-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-mute); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.textarea { padding: var(--sp-3) var(--sp-4); min-height: 128px; resize: vertical; line-height: var(--lh-body); }
.select { appearance: none; padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23595c64' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
.input:disabled, .textarea:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-mute); }

/* Mot de passe et son « œil » : le bouton se loge à droite, dans le champ. */
.password { position: relative; }
.password .input { padding-right: 52px; }
.password .input::-ms-reveal { display: none; }   /* Edge ajoute le sien : un seul œil */
.password__toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-mute); cursor: pointer;
}
.password__toggle:hover { color: var(--ink); background: var(--surface-2); }
.password__toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.has-error .input, .has-error .textarea, .has-error .select,
.input.is-invalid, .textarea.is-invalid, .select.is-invalid { border: 1.5px solid var(--danger); }

.check { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }

/* Choix en cartes (catégorie, urgence) */
.choice { display: grid; gap: var(--sp-3); }
.choice__item {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface); cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.choice__item:hover { border-color: var(--ink-mute); }
.choice__item:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-soft); }
.choice__item input { margin: 2px 0 0; accent-color: var(--blue); flex: none; }

/* --- Pastilles de statut : les six statuts client -------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: var(--pill-h);
  padding: 0 var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 700; white-space: nowrap;
}
.pill svg { flex: none; }
.pill--recu    { background: var(--st-recu-bg);    color: var(--st-recu-fg); }
.pill--cours   { background: var(--st-cours-bg);   color: var(--st-cours-fg); }
.pill--pause   { background: var(--st-pause-bg);   color: var(--st-pause-fg); }
.pill--action  { background: var(--st-action-bg);  color: var(--st-action-fg); }
.pill--resolu  { background: var(--st-resolu-bg);  color: var(--st-resolu-fg); }
.pill--termine { background: var(--st-termine-bg); color: var(--st-termine-fg); }

.pill--sm { height: var(--pill-sm-h); padding: 0 var(--sp-2); font-size: var(--fs-label); letter-spacing: .01em; }
.pill--critique { background: var(--urg-critique-bg); color: var(--urg-critique-fg); }
.pill--normale  { background: var(--urg-normale-bg);  color: var(--urg-normale-fg); }
.pill--faible   { background: var(--urg-faible-bg);   color: var(--urg-faible-fg); }

/* --- Carte de ticket : le composant signature ------------------------------ */
.ticket-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ticket-card:hover { border-color: var(--border-strong); text-decoration: none; color: inherit; transform: translateY(-1px); box-shadow: var(--shadow-2); }
/* Action requise : bordure gauche 4 px, la seule chose criarde de l'interface. */
.ticket-card.is-action { box-shadow: inset 4px 0 0 var(--st-action-fg), var(--shadow-1); }
.ticket-card.is-action:hover { box-shadow: inset 4px 0 0 var(--st-action-fg), var(--shadow-2); }
.ticket-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.ticket-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.ticket-card__ref {
  font-family: var(--font-data); font-size: var(--fs-small); font-weight: 700;
  color: var(--ink-soft); letter-spacing: .03em;
}
.ticket-card__subject { font-size: var(--fs-body); font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -.01em; }
.ticket-card.is-unread .ticket-card__subject { font-weight: 800; }
.ticket-card__meta { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.dot-unread { width: 8px; height: 8px; flex: none; border-radius: var(--r-pill); background: var(--blue); }

/* --- Livrable d'une demande : un fichier à télécharger -------------------- */
.deliverable {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--blue); text-decoration: none;
  transition: border-color .15s var(--ease);
}
.deliverable:hover { border-color: var(--blue); text-decoration: none; }
.deliverable__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deliverable__title { font-size: var(--fs-small); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

/* Un livrable sur une ligne : le fichier à gauche, ses actions à droite —
   regarder ou annoter, télécharger. Les actions passent dessous si la place
   manque (colonne latérale, mobile), toujours calées à droite. */
.deliverable-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.deliverable-row__file { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); color: var(--blue); }
.deliverable-row__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.icon-btn--sm { width: 36px; height: 36px; color: var(--blue); }

/* --- Nouvelle demande : l'écrire ou l'expliquer à voix haute -------------- */
.mode-choice { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .mode-choice { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-7); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: inherit; text-decoration: none;
  transition: border-color .15s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mode-card:hover { border-color: var(--blue); color: inherit; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.mode-card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue);
}
.mode-card--voice .mode-card__icon { background: var(--blue); color: var(--on-blue, #fff); }
.mode-card__title { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
.mode-card__text { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.55; }
.mode-card__go { margin-top: auto; padding-top: var(--sp-3); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); }

/* --- Enregistreur d'une demande vocale ------------------------------------- */
.voice-tips { display: grid; gap: var(--sp-2); padding-left: 1.2em; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }
.voice-tips li::marker { color: var(--blue); }
.recorder__panel {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center;
  padding: var(--sp-7) var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2);
}
.recorder__panel--done { border-style: solid; border-color: var(--blue); background: var(--blue-soft); }
.recorder__mic {
  width: 84px; height: 84px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-blue, #fff); cursor: pointer; box-shadow: var(--shadow-blue);
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.recorder__mic:hover { background: var(--blue-hover); transform: scale(1.04); }
.recorder__mic--waiting { opacity: .6; cursor: default; }
.recorder__mic--live { background: var(--danger); box-shadow: 0 0 0 0 rgba(180, 35, 24, .45); animation: recorder-pulse 1.6s infinite; }
.recorder__mic--live:hover { background: var(--danger); }
@keyframes recorder-pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .45); }
  70% { box-shadow: 0 0 0 18px rgba(180, 35, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
}
@media (prefers-reduced-motion: reduce) { .recorder__mic--live { animation: none; } }
.recorder__label { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--ink); }
.recorder__dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--danger); }
.recorder__clock { font-family: var(--font-data); font-weight: 600; color: var(--ink-soft); }
.recorder__bar { width: min(320px, 100%); height: 4px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.recorder__bar > span { display: block; height: 100%; background: var(--danger); transition: width .25s linear; }
.recorder__player { width: min(420px, 100%); }

/* --- Message vocal sur la page de la demande ------------------------------- */
.voice-note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
}
.voice-note__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue, #fff); }
.voice-note__player { width: 100%; max-width: 460px; }

/* --- Page concernée d'une demande « Site web » ------------------------------
   Une adresse peut être longue et sans espace : elle se coupe où il faut. */
.affected-page {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  max-width: 62ch; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--ink-mute); font-size: var(--fs-small);
}
.affected-page a, .affected-page__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }

/* --- Ce que l'équipe attend du client : bandeau de la demande --------------
   Deux étapes numérotées avant le verdict : le client sait quoi faire sans
   avoir à interpréter un statut. */
.review-steps { display: grid; gap: var(--sp-2); counter-reset: etape; }
.review-steps li {
  display: flex; align-items: center; gap: var(--sp-2); counter-increment: etape;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}
.review-steps li::before {
  content: counter(etape); flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--st-action-bg); color: var(--st-action-fg);
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700;
}
.review-quote {
  padding-left: var(--sp-4); border-left: 3px solid var(--border);
  color: var(--ink-soft); line-height: var(--lh-body); overflow-wrap: anywhere;
}

/* --- Visionneuse d'une image livrée, et ses remarques ----------------------
   L'image à gauche, les remarques numérotées à droite ; empilées sur mobile.
   Les repères se placent en pourcentage : ils suivent l'image à toute taille. */
.viewer { width: min(1200px, calc(100vw - 2 * var(--sp-4))); }
.viewer__body { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.viewer__body--plain { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .viewer__body { grid-template-columns: minmax(0, 1fr); } }
.viewer__stage {
  display: flex; justify-content: center; align-items: center; min-height: 160px;
  padding: var(--sp-2); border-radius: var(--r-md); background: var(--surface-2);
}
.viewer__frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.viewer__frame.is-annotating { cursor: crosshair; }
.viewer__image {
  display: block; max-width: 100%; max-height: calc(100vh - 220px); width: auto; height: auto;
  user-select: none; -webkit-user-select: none;
}
.viewer__pin, .annotated__pin {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; padding: 0; border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-blue); border: 2px solid var(--surface);
  box-shadow: var(--shadow-2); font-family: var(--font-data); font-weight: 700; line-height: 1;
}
.viewer__pin { width: 30px; height: 30px; font-size: var(--fs-small); cursor: pointer; }
.viewer__pin.is-active { box-shadow: 0 0 0 4px var(--blue-soft), var(--shadow-2); }
.viewer__notes { max-height: calc(100vh - 200px); overflow: auto; }
.viewer__note { display: flex; align-items: flex-start; gap: var(--sp-2); }
.viewer__note.is-active .viewer__field { border-color: var(--blue); }
.viewer__field { min-height: 0; }
.viewer__badge {
  flex: none; width: 24px; height: 24px; margin-top: 10px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue);
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700;
}
.viewer__remove {
  flex: none; width: 32px; height: 32px; margin-top: 6px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-mute); cursor: pointer;
}
.viewer__remove:hover { background: var(--surface-2); color: var(--ink); }
/* Un PDF : ses pages les unes sous les autres, dans une zone qui défile. */
.viewer__stage--pages { display: block; max-height: calc(100vh - 220px); overflow: auto; }
.viewer__pages { display: grid; gap: var(--sp-3); justify-items: center; }
.viewer__page { position: relative; width: fit-content; max-width: 100%; line-height: 0; box-shadow: var(--shadow-2); background: var(--surface); }
.viewer__page.is-annotating { cursor: crosshair; }
.viewer__canvas { display: block; max-width: 100%; height: auto; }
/* Une vidéo : la couche qui reçoit les clics laisse libre la barre de lecture. */
.viewer__overlay { position: absolute; inset: 0 0 56px 0; cursor: crosshair; }
.viewer__frame .viewer__pin { z-index: 1; }
/* « p. 2 » ou « 1:05 » : où retrouver la remarque. */
.viewer__where {
  justify-self: start; align-self: flex-start; padding: 1px var(--sp-2); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700; line-height: 1.6;
}
button.viewer__badge { border: 0; padding: 0; cursor: pointer; }
.viewer__count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--surface); color: var(--blue);
  font-family: var(--font-data); font-size: var(--fs-label); font-weight: 700;
}

/* Dans le fil : l'image et ses repères, puis les remarques dans l'ordre. */
.annotated { display: grid; gap: var(--sp-2); }
.annotated__frame {
  position: relative; display: inline-block; justify-self: start; max-width: min(100%, 420px);
  line-height: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
}
.annotated__frame img { display: block; max-width: 100%; height: auto; }
.annotated__pin { width: 22px; height: 22px; font-size: var(--fs-label); }
.annotated__list { display: grid; gap: var(--sp-1); }
.annotated__list li { display: flex; align-items: baseline; gap: var(--sp-2); }
.annotated__list .viewer__badge { width: 20px; height: 20px; margin-top: 0; }

/* --- Vidéos des documents ---------------------------------------------------
   Au back office, la progression de l'envoi par morceaux ; côté client, la
   fenêtre du lecteur, à la taille de l'écran, image entière. */
/* La zone de dépôt du champ fichier : on y glisse les fichiers, ou on clique. */
.dropzone { display: grid; gap: var(--sp-3); }
.dropzone__target {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.dropzone__target:hover { border-color: var(--ink-mute); }
.dropzone__target:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.dropzone.is-over .dropzone__target { border-color: var(--blue); border-style: solid; background: var(--blue-soft); }
.dropzone__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  margin-bottom: var(--sp-1); border-radius: var(--r-pill); background: var(--surface); color: var(--blue-ink);
}
.dropzone__title { font-weight: 700; color: var(--ink); }
.dropzone.is-over .dropzone__title { color: var(--blue-ink); }
.dropzone__sub { font-size: var(--fs-small); color: var(--ink-soft); }
.dropzone__files { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.dropzone__file {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink-soft);
}
.dropzone__file > svg { flex: none; }
.dropzone__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.dropzone__remove {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); cursor: pointer;
}
.dropzone__remove:hover { background: var(--surface-2); color: var(--danger); }

.upload-progress { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.upload-progress__item { display: grid; gap: var(--sp-1); }
.upload-progress__head { display: flex; justify-content: space-between; gap: var(--sp-3); }
.upload-progress__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.upload-progress__bar { height: 6px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.upload-progress__bar > span { display: block; height: 100%; background: var(--blue); transition: width .3s linear; }

.video-launch { display: inline-flex; }
.video-dialog {
  width: min(960px, calc(100vw - 2 * var(--sp-4))); max-height: calc(100vh - 2 * var(--sp-4));
  padding: 0; border: 0; border-radius: var(--r-lg, 16px); background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 64px rgba(21, 24, 33, .28);
}
.video-dialog::backdrop { background: rgba(13, 16, 23, .72); }
.video-dialog__panel { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.video-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.video-dialog__head .t-h3 { min-width: 0; overflow-wrap: anywhere; }
.video-dialog__player { display: block; width: 100%; max-height: calc(100vh - 180px); border-radius: var(--r-md); background: #000; }
.affected-page__name { color: var(--ink); }

/* --- Nina : la carte du choix ----------------------------------------------
   Sur toute la largeur, sous les deux autres façons : le portrait animé à
   gauche, le texte à droite. Empilée sur mobile, le portrait en tête. */
.mode-card--nina {
  grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border-color: var(--blue); background: linear-gradient(110deg, var(--blue-soft) 0%, var(--surface) 46%);
}
.mode-card__media { flex: none; width: 240px; background: var(--nina-backdrop) 50% 0% / cover no-repeat; }
.mode-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.mode-card__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-7); flex: 1; min-width: 0; }
.mode-card__badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue);
  font-size: var(--fs-label); font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase;
}
@media (max-width: 760px) {
  .mode-card--nina { flex-direction: column; }
  /* Assez haut pour la main qui salue, cadré sur le visage. */
  .mode-card__media { width: 100%; height: 280px; background-position: 50% 30%; }
  .mode-card__media video { object-position: 50% 30%; }
}

/* --- Nina : la conversation ------------------------------------------------ */
.nina { display: grid; gap: var(--sp-5); grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 900px) { .nina { grid-template-columns: minmax(0, 1fr); } }

.nina__stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-6); text-align: center; }
.nina__portrait {
  --level: 0;
  position: relative; flex: none; width: 196px; height: 196px; border-radius: var(--r-pill); isolation: isolate;
}
.nina__portrait video {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: var(--r-pill);
  object-fit: cover; object-position: 50% 0%;
  background: var(--nina-poster, none) 50% 0% / cover no-repeat, var(--nina-backdrop);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
  transition: box-shadow .25s var(--ease);
}
.nina__halo {
  position: absolute; inset: -10px; z-index: 0; border-radius: var(--r-pill);
  background: radial-gradient(closest-side, var(--nina-glow), var(--nina-glow-out));
  opacity: 0; transform: scale(calc(1 + var(--level) * .22));
  transition: opacity .3s var(--ease), transform .08s linear;
}
.nina__portrait.is-listening video, .nina__portrait.is-chatting video { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--blue); }
.nina__portrait.is-speaking video { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--blue); }
.nina__portrait.is-speaking .nina__halo, .nina__portrait.is-listening .nina__halo { opacity: 1; }
.nina__portrait.is-connecting .nina__halo { opacity: 1; animation: nina-breathe 1.4s var(--ease) infinite; }
@keyframes nina-breathe { 0%, 100% { transform: scale(.98); opacity: .45; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nina__portrait.is-connecting .nina__halo { animation: none; } .nina__halo { transform: none; } }

.nina__id { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nina__name { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.nina__role { font-size: var(--fs-small); color: var(--ink-soft); }
.nina__status { margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.nina__dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--ink-mute); }
.nina__dot.is-listening, .nina__dot.is-chatting, .nina__dot.is-speaking { background: var(--success); }
.nina__dot.is-connecting { background: var(--warning); }
.nina__dot.is-muted { background: var(--danger); }
.nina__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); width: 100%; }
.nina__actions .btn { justify-content: center; }
.nina__privacy { margin-top: auto; line-height: 1.5; }

.nina__chat { display: flex; flex-direction: column; min-height: 460px; max-height: 620px; overflow: hidden; }
.nina__scroll { flex: 1; overflow-y: auto; padding: var(--sp-6); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .nina__scroll { scroll-behavior: auto; } }
.nina__empty { max-width: 46ch; margin: var(--sp-10) auto; text-align: center; color: var(--ink-soft); line-height: 1.6; }
.nina__turns { display: flex; flex-direction: column; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.nina__error { margin-top: var(--sp-4); }
.nina__composer { display: flex; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--hairline); background: var(--surface-2); }
.nina__composer .input { flex: 1; }
.nina__updated { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue-ink); font-size: var(--fs-small); font-weight: 700; }

.bubble { display: flex; align-items: flex-end; gap: var(--sp-2); max-width: 82%; }
.bubble--nina { align-self: flex-start; }
.bubble--client { align-self: flex-end; flex-direction: row-reverse; }
.bubble__avatar { flex: none; width: 32px; height: 32px; border-radius: var(--r-pill); object-fit: cover; }
.bubble__body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); }
.bubble--nina .bubble__body { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.bubble--client .bubble__body { background: var(--blue); color: var(--on-blue); border-bottom-right-radius: 4px; }
.bubble__who { font-size: var(--fs-label); font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase; opacity: .7; }
.bubble__text { white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 760px) { .bubble { max-width: 94%; } .nina__chat { min-height: 380px; } }
/* Sur téléphone, pendant la conversation : Nina en bandeau, l'échange dessous. */
@media (max-width: 900px) {
  .nina.is-live .nina__stage { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4); text-align: left; }
  .nina.is-live .nina__portrait { width: 64px; height: 64px; }
  .nina.is-live .nina__id { flex: 1; align-items: flex-start; }
  .nina.is-live .nina__status { margin-top: 2px; }
  .nina.is-live .nina__actions { flex-direction: row; }
  .nina.is-live .nina__actions .btn { flex: 1; }
  .nina.is-live .nina__actions .t-small, .nina.is-live .nina__privacy { display: none; }
}

/* --- Demande préparée avec Nina, sur la page de la demande ---------------- */
.nina-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--sp-3); border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-ink); font-size: var(--fs-small); font-weight: 700;
}
.nina-badge img { width: 20px; height: 20px; border-radius: var(--r-pill); object-fit: cover; }

/* --- Tables ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.table td { padding: var(--sp-4); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color .15s var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
/* Une ligne qui mène quelque part : son lien la couvre en entier. */
.table tbody tr:has(.table__row-link) { position: relative; cursor: pointer; }
.table__row-link { color: inherit; }
.table__row-link::after { content: ''; position: absolute; inset: 0; }
.table tbody tr:hover .table__row-link { color: var(--blue); text-decoration: none; }
.table__num { font-family: var(--font-data); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Un menu ouvert dans une table ne doit pas être rogné par le défilement horizontal. */
.table-wrap:has(details.menu[open]) { overflow: visible; }
.table__actions { width: 1%; white-space: nowrap; text-align: right; }

/* --- Onglets -----------------------------------------------------------------
   Des liens, pas des boutons : chaque onglet a son URL, se partage et survit
   au rechargement. Même pastille encre que la navigation active. */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.tabs__item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.tabs__item:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.tabs__item.is-active { background: var(--ink); color: var(--surface); }
.tabs__count {
  min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); text-align: center;
  background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-label); line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.tabs__item.is-active .tabs__count { background: var(--on-blue-fill); color: var(--surface); }

/* Barre d'outils au-dessus d'une liste : onglets à gauche, action à droite. */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5);
}

/* --- Panneau repliable -------------------------------------------------------
   Les formulaires d'ajout restent sous la main sans repousser la liste,
   qui est ce qu'on vient consulter neuf fois sur dix. */
.disclosure > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .disclosure__chevron { margin-left: auto; color: var(--ink-mute); transition: transform .2s var(--ease); }
.disclosure[open] > summary .disclosure__chevron { transform: rotate(180deg); }
.disclosure > summary:hover .disclosure__chevron { color: var(--ink); }
.disclosure__body { padding: 0 var(--sp-7) var(--sp-7); }
.disclosure__sub { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }

/* --- Menu d'actions ----------------------------------------------------------
   Un seul bouton par ligne ; les actions, dont la destructive, vivent dans le
   menu. <details> ouvre et ferme sans JavaScript. */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--bg-deep); color: var(--ink); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 248px; padding: var(--sp-2); text-align: left; white-space: normal;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.menu__item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu__item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-bg); color: var(--danger); }
.menu__item.is-current { color: var(--ink-mute); cursor: default; }
.menu__item.is-current:hover { background: none; }
.menu__label {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-mute);
}
.menu__sep { height: 1px; margin: var(--sp-2) 0; background: var(--hairline); }
.menu__confirm { padding: var(--sp-2) var(--sp-3); }
.menu__confirm > summary { list-style: none; }
.menu__confirm > summary::-webkit-details-marker { display: none; }

/* --- Vidéo de présentation ------------------------------------------------- */
.video-card { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.video {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  background: var(--ink); border: 1px solid var(--border);
}

/* Liste cochée : les points clés, un par ligne. */
.checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }
.checklist svg { flex: none; margin-top: 2px; color: var(--success); }

/* Guide « Comment ça marche » */
.help-status { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.help-status .pill { justify-self: start; }
.help-toc { position: sticky; top: var(--sp-6); }
.help-toc__link {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.help-toc__link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
[id] { scroll-margin-top: var(--sp-6); }

/* --- Personnes ---------------------------------------------------------------
   Une ligne par personne : pastille, nom, email, puis ce qu'il faut savoir
   d'un coup d'œil. Les sociétés servent d'intertitres. */
.people { display: flex; flex-direction: column; }
.people__group {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7) var(--sp-2);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-mute);
}
.people__group a { color: var(--ink-soft); text-decoration: none; }
.people__group a:hover { color: var(--ink); }
.people__group + .person { border-top: none; }
.person {
  display: grid; align-items: center; gap: var(--sp-4);
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  padding: var(--sp-3) var(--sp-7); border-top: 1px solid var(--hairline);
  transition: background-color .15s var(--ease);
}
.person:hover { background: var(--surface-2); }
.person__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.person__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person__name {
  font-size: var(--fs-data); font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person__mail {
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person__meta { font-size: var(--fs-small); font-weight: 500; color: var(--ink-soft); }
.person.is-inactive .person__name, .person.is-inactive .person__mail { color: var(--ink-mute); }
.avatar--soft { background: var(--surface-2); color: var(--ink-soft); border-radius: var(--r-pill); }
.avatar--brand { border-radius: var(--r-pill); }

/* --- État vide ------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-14) var(--sp-6);
}
.empty__icon {
  width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.empty__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-h3); }
.empty__text { font-size: var(--fs-small); color: var(--ink-soft); max-width: 46ch; }

/* --- Bandeaux -------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg);
  font-size: var(--fs-small); line-height: 1.55;
}
.alert svg { flex: none; margin-top: 1px; }
.alert__title { font-weight: 700; display: block; }
.alert--info    { background: var(--info-bg);    color: var(--info); }
.alert--success { background: var(--success-bg); color: var(--success); }
.alert--warning { background: var(--warning-bg); color: var(--warning); }
.alert--danger  { background: var(--danger-bg);  color: var(--danger); }
.alert code { font-family: var(--font-data); font-weight: 700; }
/* Bandeau à plusieurs blocs (titre, explication, liste, actions) : empilé. */
.alert--stack { flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); }
.alert--stack li { overflow-wrap: anywhere; }

/* Guide de saisie : cadre une demande qui a besoin de l'être.
   Bloc empilé, et non .alert : celle-ci est en flex, faite pour « une icône,
   une phrase », et met en colonnes tout ce qu'on lui donne de plus. */
.guide {
  padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg);
  background: var(--info-bg); color: var(--ink-soft);
  font-size: var(--fs-small); line-height: 1.6;
}
.guide__title { margin: 0; font-weight: 700; color: var(--info); }
.guide__intro { margin: var(--sp-1) 0 var(--sp-4); }
.guide__list { display: grid; gap: var(--sp-1); margin: 0; }
/* Empilé, chaque terme colle à sa définition et respire avant le suivant. */
.guide__term { margin: var(--sp-3) 0 0; font-weight: 700; color: var(--ink); }
.guide__term:first-of-type { margin-top: 0; }
.guide__def { margin: 0; }
.guide__chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin: var(--sp-2) 0 0; padding: 0; list-style: none;
}
.guide__chip {
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink-soft);
}

/* Deux colonnes dès qu'il y a la place : le terme sert alors de repère. */
@media (min-width: 760px) {
  .guide__list { grid-template-columns: max-content 1fr; column-gap: var(--sp-5); row-gap: var(--sp-3); }
  .guide__term { margin: 0; }
}

/* Bandeau permanent de prise d'identité : doit être impossible à ignorer. */
.impersonation-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-10); background: var(--ink); color: var(--surface);
  font-size: var(--fs-small); font-weight: 600;
}
.impersonation-bar a { color: var(--lime); text-decoration: underline; }

/* --- Pagination ------------------------------------------------------------ */
.pagination { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: var(--fs-small); font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
}
.pagination a:hover { background: var(--bg-deep); color: var(--ink); text-decoration: none; }
.pagination .is-current { background: var(--ink); color: var(--surface); }
.pagination .is-disabled { color: var(--ink-mute); opacity: .5; }

/* --- Écrans d'accès -------------------------------------------------------- */
.auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.auth__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
}
.auth__top img { height: 24px; width: auto; }
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-5) var(--sp-10); }
/* Le contenu de chaque écran d'accès porte déjà sa carte : ce cadre ne fait
   que la centrer et la hausser, pour éviter une carte dans une carte. */
.auth__card { width: 100%; max-width: 460px; }
/* Page publique de la vidéo : la vidéo a besoin de largeur. */
.auth__card--wide { max-width: 820px; }
.auth__card > .card { box-shadow: var(--shadow-2); }
.auth__card > .card > .card__body { padding: var(--sp-10); }
.auth__foot { padding: var(--sp-5); text-align: center; font-size: var(--fs-small); color: var(--ink-mute); }
.auth__foot a { color: var(--ink-soft); }
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-mute); font-size: var(--fs-small); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* --- Squelettes de chargement ---------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; border-radius: var(--r-xs); animation: sk 1.4s ease infinite;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- Toasts ---------------------------------------------------------------- */
.toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px; }
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
}
.toast--success { border-left: 3px solid var(--success); }
.toast--danger  { border-left: 3px solid var(--danger); }

/* --- Mouvement réduit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  a.stat:hover, .ticket-card:hover { transform: none; }
}

/* --- Adaptatif ------------------------------------------------------------- */
.mobile-only { display: none; }

@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .grid--sidebar, .grid--split, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .help-toc { position: static; order: -1; }
  .page { padding: 0 var(--sp-6) var(--sp-10); }
  .topbar { padding: 0 var(--sp-6); }
  .impersonation-bar { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}

@media (max-width: 767px) {
  .mobile-only { display: inline-flex; }
  .desktop-only { display: none !important; }
  .shell { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%);
    transition: transform .22s var(--ease); box-shadow: var(--shadow-2);
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  }
  .sidebar.is-open { transform: none; }
  .sidebar-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 40; }
  .topbar { padding: 0 var(--sp-4); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .help-status { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .person { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .person__role, .person__seen { grid-column: 1; padding-left: calc(36px + var(--sp-3)); }
  .person__actions { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .people__group, .disclosure > summary { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .disclosure__body { padding: 0 var(--sp-5) var(--sp-5); }
  .page { padding: 0 var(--sp-4) var(--sp-8); }
  .page__head { align-items: flex-start; flex-direction: column; }
  .t-display { font-size: var(--fs-h1); }
  .stat { min-height: 0; padding: var(--sp-5); }
  .stat__value { font-size: var(--fs-display); }
  .card__body, .card__head, .card__foot { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .card .table th:first-child, .card .table td:first-child { padding-left: var(--sp-5); }
  .card .table th:last-child,  .card .table td:last-child  { padding-right: var(--sp-5); }
  .ticket-card { flex-direction: column; align-items: flex-start; padding: var(--sp-4) var(--sp-5); }
  .auth__card > .card > .card__body { padding: var(--sp-7) var(--sp-6); }
  .auth__top { padding: var(--sp-5); }
  .btn--block-mobile { width: 100%; }
}

@media (max-width: 420px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .sidebar, .topbar, .toasts, .impersonation-bar { display: none; }
  .page { padding: 0; }
  .card, .stat { box-shadow: none; }
}