/* ═══════════════════════════════════════════════════════════════════════════════════
   Tableau de bord REX
   Extrait de index.html le 20.09.2026. L'ordre des fichiers compte : la cascade CSS en depend,
   ne pas les reordonner dans index.html.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ═══ TABLEAU DE BORD REX (js/18-dashboard.js, 19.09.2026) ═══ */
  .dbx { --dbx-r: 18px; --dbx-ombre: 0 1px 2px rgba(6,20,44,0.18), 0 8px 28px rgba(6,20,44,0.22); max-width: 1400px; margin: 0 auto; }
  html[data-theme="clair"] .dbx { --dbx-ombre: 0 1px 2px rgba(17,54,121,0.05), 0 10px 30px rgba(17,54,121,0.08); }
  .dbx-anim { opacity: 0; transform: translateY(10px); animation: dbx-entree 0.55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes dbx-entree { to { opacity: 1; transform: none; } }
  /* Réaffichage après une action (tâche faite, reportée) : pas d'animation d'entrée */
  .dbx-calme .dbx-anim, .dbx-calme .dbx-signal, .dbx-calme .dbx-hbarre, .dbx-calme .dbx-barre, .dbx-calme .dbx-spark path:last-child, .dbx-calme .dbx-hbarre-piste > span { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .dbx-calme .dbx-hbarre-piste > span { width: var(--w); }

  /* Bandeau d'accueil */
  .dbx-hero { position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 22px; overflow: visible; z-index: 5;
    background: radial-gradient(120% 140% at 100% 0%, rgba(0,207,255,0.28) 0%, transparent 55%), linear-gradient(135deg, #0B2458 0%, #113679 55%, #1A4A9C 100%);
    color: #fff; box-shadow: 0 18px 40px rgba(17,54,121,0.28); margin-bottom: 18px; }
  .dbx-hero-deco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
  .dbx-hero-deco::before, .dbx-hero-deco::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.09); }
  .dbx-hero-deco::before { width: 420px; height: 420px; right: -120px; top: -210px; }
  .dbx-hero-deco::after { width: 260px; height: 260px; right: 140px; bottom: -190px; border-color: rgba(0,207,255,0.2); }
  .dbx-hero-gauche { position: relative; flex: 1; min-width: 0; }
  .dbx-hero-date { font-size: var(--t-xs); letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.62); font-weight: 600; }
  .dbx-hero-titre { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 6px; color: #fff; }
  .dbx-hero-ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .dbx-hero-exgroup { display: inline-flex; align-items: center; padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.25); color: #fff; }
  .dbx-hero-exgroup svg { height: 20px; width: auto; }
  .dbx-hero-resume { font-size: 14px; color: rgba(255,255,255,0.78); margin-bottom: 20px; }
  .dbx-hero-resume strong { color: #00CFFF; font-weight: 600; }
  .dbx-hero-droite { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .dbx-hero-boutons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .dbx-hero-mascotte { width: 92px; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.3)); animation: dbx-flotte 6s ease-in-out infinite; }
  @keyframes dbx-flotte { 50% { transform: translateY(-6px) rotate(-2deg); } }
  .dbx-btn-verre, .dbx-btn-blanc { border-radius: 11px; padding: 9px 15px; font-size: var(--t-s); font-weight: 500; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
  .dbx-btn-verre { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(6px); }
  .dbx-btn-verre:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
  .dbx-btn-blanc { background: #fff; border: 1px solid #fff; color: #113679; }
  .dbx-btn-blanc:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
  .dbx-recherche { position: relative; display: flex; align-items: center; gap: 10px; max-width: 620px; background: rgba(255,255,255,0.96); border-radius: 14px; padding: 0 12px 0 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18); transition: box-shadow .2s, transform .2s; }
  .dbx-recherche:focus-within { box-shadow: 0 0 0 4px rgba(0,207,255,0.35), 0 14px 34px rgba(0,0,0,0.22); transform: translateY(-1px); }
  .dbx-recherche > span { color: #56627A; font-size: 18px; }
  .dbx-recherche input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 13px 0; font-size: 14px; color: #0E1B33; }
  .dbx-recherche input::placeholder { color: #8A94A8; }
  .dbx-recherche kbd { font-family: inherit; font-size: var(--t-xs); color: #56627A; background: #EEF2F7; border: 1px solid #E2E7EF; border-radius: 6px; padding: 2px 7px; }
  .dbx-recherche-resultats { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.3); max-height: 420px; overflow-y: auto; z-index: 200; color: var(--text); }

  /* Onglets segmentés */
  .dbx-onglets { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: fit-content; margin-bottom: 18px; }
  .dbx-onglets button { position: relative; border: none; background: transparent; color: var(--text-muted); font-size: var(--t-m); font-weight: 600; padding: 8px 18px; border-radius: 10px; cursor: pointer; transition: background .2s, color .2s; display: inline-flex; align-items: center; gap: 8px; }
  .dbx-onglets button:hover { color: var(--text); }
  .dbx-onglets button.actif { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
  .dbx-onglets .dbx-classique { font-size: var(--t-xs); font-weight: 500; color: var(--text-dim); margin-left: 8px; }
  .dbx-pastille { background: #EF4444; color: #fff; font-size: var(--t-xs); border-radius: 999px; padding: 1px 7px; line-height: 1.5; }

  /* Indicateurs */
  .dbx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
  .dbx-kpi { position: relative; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; min-height: 132px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--dbx-r); box-shadow: var(--dbx-ombre); color: var(--text); cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .dbx-kpi:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 16px 36px rgba(17,54,121,0.16); }
  .dbx-kpi[tabindex="-1"] { cursor: default; }
  .dbx-kpi-label { font-size: var(--t-xs); color: var(--text-muted); font-weight: 500; letter-spacing: 0.2px; }
  .dbx-kpi-valeur { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
  .dbx-kpi-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--t-xs); position: relative; z-index: 1; }
  .dbx-kpi-sous { color: var(--text-dim); }
  .dbx-spark { position: absolute; right: 0; bottom: 0; width: 55%; height: 52px; opacity: 0.9; pointer-events: none; }
  .dbx-spark path:last-child { stroke-dasharray: 400; stroke-dashoffset: 400; animation: dbx-trace 1.4s .3s ease-out forwards; }
  @keyframes dbx-trace { to { stroke-dashoffset: 0; } }
  .dbx-tendance { font-weight: 500; font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
  .dbx-tendance.hausse { background: rgba(34,197,94,0.14); color: #16A34A; }
  .dbx-tendance.baisse { background: rgba(239,68,68,0.13); color: #EF4444; }
  html:not([data-theme="clair"]) .dbx-tendance.hausse { color: #4ADE80; }

  /* Grille et cartes */
  .dbx-grille { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .dbx-grille-egale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dbx-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .dbx-carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--dbx-r); box-shadow: var(--dbx-ombre); padding: 20px 22px; min-width: 0; }
  .dbx-carte-agenda { padding: 0; overflow: hidden; }
  .dbx-carte-agenda #calendar-widget-container > * { margin-bottom: 0 !important; border: none !important; border-radius: 0 !important; }
  .dbx-carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
  .dbx-carte-tete h2 { font-size: var(--t-l); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
  .dbx-carte-sous { font-size: var(--t-xs); color: var(--text-dim); }
  .dbx-lien { background: none; border: none; color: var(--accent); font-size: var(--t-s); font-weight: 500; cursor: pointer; padding: 4px 0; }
  .dbx-lien:hover { text-decoration: underline; }

  /* Liste d'actions */
  .dbx-groupe + .dbx-groupe { margin-top: 16px; }
  .dbx-groupe-titre { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
  .dbx-groupe-titre span { font-size: var(--t-xs); letter-spacing: 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
  .dbx-groupe-retard .dbx-groupe-titre { color: #EF4444; }
  .dbx-groupe-equipe .dbx-groupe-titre { color: #F59E0B; }
  .dbx-action { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border-radius: 12px; transition: background .15s, opacity .35s, transform .35s; }
  .dbx-action::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: transparent; }
  .dbx-groupe-retard .dbx-action::before { background: #EF4444; }
  .dbx-action.urgente::before { background: #F59E0B; }
  .dbx-action:hover { background: var(--surface-alt); }
  .dbx-action-icone { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-dim); font-size: var(--t-l); }
  .dbx-action-corps { flex: 1; min-width: 0; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); display: flex; flex-direction: column; gap: 2px; padding: 0; }
  .dbx-action-titre { font-size: var(--t-m); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbx-action-sous { font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbx-action-boutons { display: flex; gap: 6px; opacity: 0.35; transition: opacity .15s; }
  .dbx-action:hover .dbx-action-boutons, .dbx-action:focus-within .dbx-action-boutons { opacity: 1; }
  .dbx-action-boutons button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: var(--t-m); transition: all .15s; }
  .dbx-action-boutons button:hover { color: var(--accent); border-color: var(--accent-border); transform: translateY(-1px); }
  .dbx-action-boutons button.ok:hover { background: #22C55E; border-color: #22C55E; color: #fff; }
  .dbx-action.dbx-fait { opacity: 0; transform: translateX(24px); }

  .dbx-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 10px; color: var(--text-muted); font-size: var(--t-m); }
  .dbx-vide img { width: 84px; margin-bottom: 6px; animation: dbx-flotte 6s ease-in-out infinite; }
  /* Rex banquier : c'est le bloc .rexb qui porte la taille et l'animation, pas l'image */
  .dbx-vide .rexb { margin-bottom: 6px; width: auto; }
  
  .dbx-vide strong { color: var(--text); font-size: var(--t-l); font-weight: 600; }
  .dbx-vide-petit { color: var(--text-dim); font-size: var(--t-s); padding: 8px 0; }
  .dbx-chargement { display: flex; gap: 6px; padding: 14px 0; }
  .dbx-chargement span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dbx-point 1s infinite ease-in-out; }
  .dbx-chargement span:nth-child(2) { animation-delay: .15s; } .dbx-chargement span:nth-child(3) { animation-delay: .3s; }
  @keyframes dbx-point { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: none; } }

  /* Nouveautés */
  .dbx-fil { display: flex; flex-direction: column; }
  .dbx-nouveaute { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border: none; background: none; border-radius: 10px; text-align: left; cursor: pointer; color: var(--text);
    opacity: 0; animation: dbx-entree .45s ease forwards; animation-delay: calc(var(--i) * 45ms); transition: background .15s; }
  .dbx-nouveaute:hover { background: var(--surface-alt); }
  .dbx-nouveaute-icone { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--t-m); background: var(--surface-alt); }
  .dbx-nouveaute.vert .dbx-nouveaute-icone { background: rgba(34,197,94,0.14); }
  .dbx-nouveaute.bleu .dbx-nouveaute-icone { background: rgba(0,207,255,0.14); }
  .dbx-nouveaute.violet .dbx-nouveaute-icone { background: rgba(167,139,250,0.16); }
  .dbx-nouveaute-texte { flex: 1; min-width: 0; font-size: var(--t-s); color: var(--text-muted); }
  .dbx-nouveaute-texte strong { color: var(--text); font-weight: 600; }
  .dbx-nouveaute-date { font-size: var(--t-xs); color: var(--text-dim); white-space: nowrap; }

  /* Signaux */
  .dbx-signaux { display: flex; flex-direction: column; gap: 8px; }
  .dbx-signal { --c: #00CFFF; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    background: color-mix(in srgb, var(--c) 7%, transparent); opacity: 0; animation: dbx-entree .45s ease forwards; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
  .dbx-signal.rouge { --c: #EF4444; } .dbx-signal.orange { --c: #F59E0B; } .dbx-signal.vert { --c: #22C55E; } .dbx-signal.bleu { --c: #0EA5E9; }
  .dbx-signal-icone { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: color-mix(in srgb, var(--c) 16%, transparent); font-size: 14px; }
  .dbx-signal-texte { flex: 1; font-size: var(--t-s); line-height: 1.45; color: var(--text-muted); }
  .dbx-signal-texte strong { color: var(--text); font-weight: 600; }
  .dbx-signal button { flex-shrink: 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); border-radius: 9px; padding: 6px 12px; font-size: var(--t-xs); font-weight: 500; cursor: pointer; transition: all .15s; }
  .dbx-signal button:hover { background: var(--c); color: #fff; }

  /* Graphiques */
  .dbx-barres { display: flex; align-items: flex-end; gap: 6px; height: 210px; padding-top: 6px; }
  .dbx-barre-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
  .dbx-barre { width: 100%; max-width: 30px; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent));
    transform-origin: bottom; transform: scaleY(0); animation: dbx-monte .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(150ms + var(--i) * 40ms); transition: filter .15s; }
  .dbx-barre-col:hover .dbx-barre { filter: brightness(1.15) saturate(1.2); }
  @keyframes dbx-monte { to { transform: scaleY(1); } }
  .dbx-barre-val { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dbx-barre-mois { font-size: var(--t-xs); color: var(--text-dim); }
  .dbx-hbarres { display: flex; flex-direction: column; gap: 11px; }
  .dbx-hbarre { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 12px; opacity: 0; animation: dbx-entree .45s ease forwards; animation-delay: calc(200ms + var(--i) * 50ms); }
  .dbx-hbarre-nom { display: flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--text); min-width: 0; }
  .dbx-hbarre-nom > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dbx-hbarre-piste { height: 9px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
  .dbx-hbarre-piste > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #113679, #00CFFF); animation: dbx-largeur .9s .3s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes dbx-largeur { to { width: var(--w); } }
  .dbx-hbarre-val { font-size: var(--t-s); font-weight: 500; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; min-width: 70px; }
  .dbx-hbarre-val small { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--text-dim); }
  .dbx-point { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .dbx-raccourcis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .dbx-raccourcis button { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px 16px; font-size: var(--t-s); font-weight: 500; cursor: pointer; transition: all .15s; }
  .dbx-raccourcis button:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--dbx-ombre); }

  @media (max-width: 1100px) { .dbx-kpis { grid-template-columns: repeat(2, 1fr); } .dbx-grille, .dbx-grille-egale { grid-template-columns: 1fr; } }
  @media (max-width: 768px) {
    .dbx-hero { flex-direction: column; padding: 22px 18px; border-radius: 18px; }
    .dbx-hero-titre { font-size: 24px; }
    .dbx-hero-ligne { gap: 4px 18px; } .dbx-hero-exgroup { padding-left: 0; border-left: none; }
    .dbx-hero-droite { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
    .dbx-hero-mascotte { width: 58px; }
    .dbx-hero-boutons { justify-content: flex-start; }
    .dbx-recherche kbd { display: none; }
    .dbx-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dbx-kpi { min-height: 110px; padding: 14px; }
    .dbx-kpi-valeur { font-size: var(--t-xl); }
    .dbx-onglets { width: 100%; } .dbx-onglets button { flex: 1; justify-content: center; padding: 8px 10px; }
    .dbx-onglets .dbx-classique { display: none; }
    .dbx-action-boutons { opacity: 1; }
    .dbx-barres { height: 170px; gap: 3px; } .dbx-barre-val { display: none; }
    .dbx-hbarre { grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 8px; }
  }