/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CE QUI VIENT DE L'ESPACE CLIENT (js/109, 20.09.2026)

   L'ORANGE EST UNE ORIGINE, PAS UNE URGENCE.

   La règle ne tient que si on s'y astreint : tout ce qui arrive de REX CLOUD est orange, urgent
   ou non, et rien d'autre ne l'est. C'est pourquoi le signal de RETARD est passé au rouge en bas
   de ce fichier — deux oranges voulant dire deux choses différentes, aucun des deux ne voudrait
   plus rien dire.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root { --dsp-orange: #F97316; }

/* ── Le bandeau d'origine ─────────────────────────────────────────────────────────────────────
   Le logo est celui que le client voit en haut de son espace : le lien entre les deux côtés se
   comprend sans qu'on l'explique. */
.dsp-origine {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 8px; padding: 5px 14px 5px 7px;
  border-radius: var(--r-rond, 999px);
  background: linear-gradient(100deg, var(--dsp-orange) 0%, #FB923C 100%);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dsp-orange) 35%, transparent);
}
.dsp-logo {
  width: 26px; height: 26px; flex-shrink: 0;
  /* L'emblème REX CLOUD (Rex derrière les classeurs, sur son nuage) : il se pose tel quel sur l'orange. */
  object-fit: contain;
}
.dsp-marque {
  font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.dsp-marque b { font-weight: 600; }
.dsp-sep { opacity: .5; }
.dsp-quoi { font-size: var(--t-xs); opacity: .92; }

@media (max-width: 620px) {
  .dsp-origine { flex-wrap: wrap; border-radius: var(--r-s, 10px); }
  .dsp-sep { display: none; }
  .dsp-quoi { flex-basis: 100%; }
}

/* ── « Document demandé » en tête de fiche client (js/109, 22.09.2026) ───────────────────────────
   Le voyant clignote tant que la demande est ouverte ; le reste du bandeau reste fixe, pour qu'on
   puisse le lire. Rien ne clignote pour qui a demandé moins d'animations. */
.dsp-doc-alerte {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--r-m, 12px); color: #fff;
  background: linear-gradient(100deg, var(--dsp-orange) 0%, #FB923C 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dsp-orange) 35%, transparent);
  animation: dspDocBord 1.6s ease-in-out infinite;
}
.dsp-doc-feu { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.8); animation: dspDocFeu 1.1s ease-in-out infinite; }
.dsp-doc-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.dsp-doc-texte b { font-size: var(--t-m); font-weight: 600; }
.dsp-doc-texte span { font-size: var(--t-s); opacity: .92; }
.dsp-doc-btn { flex-shrink: 0; border: none; background: #fff; color: #C2410C; font-weight: 600; font-size: var(--t-s);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font-family: inherit; }
.dsp-doc-btn:hover { background: #FFF7ED; }
@keyframes dspDocFeu { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 50% { opacity: .25; box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@keyframes dspDocBord { 0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--dsp-orange) 30%, transparent); } 50% { box-shadow: 0 4px 22px color-mix(in srgb, var(--dsp-orange) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dsp-doc-alerte, .dsp-doc-feu { animation: none; } }
@media (max-width: 620px) { .dsp-doc-alerte { flex-wrap: wrap; } .dsp-doc-btn { width: 100%; } }

/* ── Journal d'activité : logos REX CLOUD et EcoHub (js/17, 22.09.2026) ────────────────────────────
   Les deux logos sont marine : on les pose sur un rond blanc, lisible dans tous les thèmes. */
.ja-icone:has(> .ja-logo) { background: #fff !important; border: 1px solid rgba(21, 25, 88, .14); }
.ja-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.ja-logo-ecohub { width: 15px; height: 16px; }
/* Pastille EcoHub en coin, sur les notes et tâches créées par la synchronisation. */
.ja-icone { position: relative; }
.ja-pastille-ecohub { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(21, 25, 88, .18); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ja-pastille-ecohub img { width: 10px; height: 11px; display: block; }

/* ── Journal d'activité : une ligne par semaine (js/17, 22.09.2026) ─────────────────────────────── */
.ja-groupe { display: block; }
.ja-groupe > summary { display: flex; gap: 10px; cursor: pointer; list-style: none; }
.ja-groupe > summary::-webkit-details-marker { display: none; }
.ja-jours { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.ja-jour { padding: 1px 8px; border-radius: 999px; font-size: var(--t-xs); white-space: nowrap;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); text-transform: capitalize; }
.ja-jour b { font-weight: 600; color: var(--text); }
.ja-voir { color: var(--accent); }
.ja-voir::after { content: ' ▾'; }
.ja-groupe[open] .ja-voir { font-size: 0; }
.ja-groupe[open] .ja-voir::before { content: 'Replier'; font-size: var(--t-xs); }
.ja-groupe[open] .ja-voir::after { content: ' ▴'; font-size: var(--t-xs); }
.ja-groupe-liste { margin: 8px 0 0 38px; display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--border); padding-left: 10px; }
.ja-sous { display: flex; gap: 10px; align-items: baseline; }
.ja-sous-date { flex: 0 0 64px; font-size: var(--t-xs); font-weight: 600; color: var(--text-muted); text-transform: capitalize; }
.ja-sous-corps { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* ── Les pastilles EcoHub (js/59, js/61 — 22.09.2026) ─────────────────────────────────────────── */
.dcx-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.dcx-pastille-ecohub { background: #EEF0FB; color: #151958; border: 1px solid #D5D9F2; }
.dcx-pastille-enligne { background: color-mix(in srgb, #22C55E 14%, transparent); color: #15803D; border: 1px solid color-mix(in srgb, #22C55E 35%, transparent); }
.ehx-logo { display: inline-block; vertical-align: middle; }
.ehx-titre { display: flex; align-items: center; margin: 0; }
.ehx-btn { display: inline-flex; align-items: center; gap: 7px; }
.ehx-logo-texte { vertical-align: -1px; margin-left: 2px; }
/* En thème sombre, le logo marine passe en blanc (la pastille EcoHub garde son fond clair). */
html:not([data-theme="clair"]) .ehx-logo:not(.ehx-blanc) { filter: brightness(0) invert(1); }
html:not([data-theme="clair"]) .dcx-pastille-ecohub .ehx-logo { filter: none; }

/* ── Les demandes non traitées ────────────────────────────────────────────────────────────────
   `.neuf` est posé par js/51 sur les quatre familles — message, sinistre, document, transfert —
   dès que la ligne n'a pas été traitée. Une seule règle les couvre donc toutes, y compris celles
   qu'on ajoutera plus tard. */
.mcx-msg.neuf {
  border-left: 3px solid var(--dsp-orange);
  background: color-mix(in srgb, var(--dsp-orange) 5%, transparent);
}
.mcx-msg.neuf:hover { background: color-mix(in srgb, var(--dsp-orange) 9%, transparent); }

/* ── Le compteur du menu ──────────────────────────────────────────────────────────────────────
   Il était rouge, comme celui des tâches. Rouge veut dire « ça ne va pas » ; or une demande
   client qui arrive, c'est le fonctionnement normal. Orange dit la provenance sans dramatiser. */
.nav-item .ntf-pastille {
  background: var(--dsp-orange);
  color: #fff;
}

/* ── Le voyant du tableau de bord ─────────────────────────────────────────────────────────────
   Ces demandes viennent toutes de l'espace client : le voyant prend donc l'orange dès qu'il y en
   a. Et le RETARD passe au rouge, pour rester distinct de la provenance. */
.ntf-voyant.actif .ntf-lampe {
  background: var(--dsp-orange);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dsp-orange) 55%, transparent);
}
.ntf-voyant.actif { border-color: color-mix(in srgb, var(--dsp-orange) 40%, transparent); }

.ntf-voyant.tard .ntf-lampe {
  background: var(--c-danger);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-danger) 60%, transparent);
}
.ntf-voyant.tard { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
.ntf-voyant.tard .ntf-texte small { color: var(--c-danger-texte); }