/* ═══════════════════════════════════════════════════════════════════════════════════
   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); }
  /* 10.10.2026 — « Rends la recherche un peu plus transparente afin de voir les animations. » Le champ
     était un pavé blanc à 96 % : Rex et les combats du bandeau disparaissaient derrière. Il devient un
     verre léger, sans flou (un flou masquerait justement l'animation), et ne redevient presque opaque
     que pendant la saisie, quand on a besoin de lire ce qu'on tape. */
  .dbx-hero .dbx-recherche { background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
  .dbx-hero .dbx-recherche:focus-within { background: rgba(255,255,255,0.9); }
  html:not([data-theme="clair"]) .dbx-hero .dbx-recherche input:not([type="checkbox"]):not([type="radio"]) { background: transparent !important; border: none !important; box-shadow: none !important; }
  .dbx-hero .dbx-recherche input::placeholder { color: #4B5873; }
  /* En thème clair, le bandeau est foncé (marine, ou noir pour Valencia CF) : le verre devient
     sombre et l'encre blanche ; à la saisie, le champ repasse en blanc avec une encre foncée. */
  html[data-theme="clair"] .dbx-hero .dbx-recherche { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.34); }
  html[data-theme="clair"] .dbx-hero .dbx-recherche > span,
  html[data-theme="clair"] .dbx-hero .dbx-recherche input { color: #FFFFFF; }
  html[data-theme="clair"] .dbx-hero .dbx-recherche input::placeholder { color: rgba(255,255,255,0.78); }
  html[data-theme="clair"] .dbx-hero .dbx-recherche:focus-within { background: rgba(255,255,255,0.94); }
  html[data-theme="clair"] .dbx-hero .dbx-recherche:focus-within > span,
  html[data-theme="clair"] .dbx-hero .dbx-recherche:focus-within input { color: #0E1B33; }
  html[data-theme="clair"] .dbx-hero .dbx-recherche:focus-within input::placeholder { color: #8A94A8; }

  /* 30.09.2026 — « Sur mobile les boutons prennent le dessus sur la recherche, le résultat n'est
     pas accessible. » SECOND correctif, le premier (un z-index sur .dbx-recherche) ne changeait
     rien : il avait été écrit sans être essayé dans un navigateur. Mesuré cette fois sur le site
     publié, à 375 px, avec elementFromPoint.

     La vraie cause : une feuille de style injectée par le décor du bandeau pose
       .dbx-hero > :not(.scr-deco):not(.dbx-hero-deco):not(.rex-bandeau-deco) { z-index: 1 }
     sur TOUS les enfants du bandeau. Les deux moitiés — .dbx-hero-gauche (la recherche) et
     .dbx-hero-droite (les boutons) — deviennent donc deux contextes d'empilement de même rang.
     À rang égal c'est l'ordre du document qui tranche : la droite, écrite après, se peint
     par-dessus. Et tout ce qui vit dans la gauche y est ENFERMÉ : le panneau de résultats peut
     porter z-index 200, 400 ou un million, il ne sortira jamais de son contexte.

     On remonte donc la moitié gauche ELLE-MÊME. En permanence, et non au focus : toucher un
     résultat fait perdre le focus au champ AVANT le clic — avec une règle « :focus-within », le
     bouton repassait devant au moment précis où le doigt se posait. Les deux moitiés ne se
     recouvrent que par ce panneau ; la règle n'a donc aucun autre effet.
     !important, parce que la règle adverse est plus spécifique (une classe et trois :not) et
     vient d'une feuille injectée après celle-ci. */
  .dbx-hero > .dbx-hero-gauche { z-index: 4 !important; }
  .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); }

  /* Barre de l'accueil (10.10.2026) : plus d'onglets — « Aujourd'hui », le lien vers le cockpit et
     « Personnaliser » (js/168). L'ancienne barre segmentée (.dbx-onglets) n'est plus produite. */
  .dbx-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
  .dbx-outils-titre { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-l); font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 0; }
  .dbx-outils-esp { flex: 1; }
  .dbx-outil, .dbx-outils .wgm-cadenas { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 10px; padding: 7px 13px; font-size: var(--t-s); font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; margin: 0; }
  .dbx-outil:hover { color: var(--text); border-color: var(--accent-border); }
  .dbx-outils .wgm-cadenas.actif { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
  .dbx-pastille { background: #EF4444; color: #fff; font-size: var(--t-xs); border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
  #dbx-zone-club:empty { display: none; }
  .dbx-decor-attente { display: none; }
  /* Décor masqué dans « Personnaliser » (js/18) : la bulle des citations et le lecteur du menu. */
  body.rex-sans-citations #rex-citation, body.rex-sans-spotify #spf-lecteur { display: none !important; }

  /* 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; }
  /* 10.10.2026 : titres sur deux lignes au lieu d'une coupée net (« Rappeler M. Dupont pour l'off… »). */
  .dbx-action-titre { font-size: var(--t-m); font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .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; }
  .dbx-nouveaute-nb { display: inline-block; margin-left: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }

  /* 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); }

  /* Rangée de tête (22.09.2026 ; 10.10.2026 : « À faire · horloge · agenda » — les priorités du jour
     prennent la place des demandes clients, qui descendent à côté des nouveautés). Sans horloge
     (masquée dans « Personnaliser »), deux colonnes. */
  .dbx-trio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, 1.2fr); gap: 18px; margin-bottom: 18px; align-items: stretch; }
  .dbx-trio.dbx-duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .dbx-trio > .dbx-carte { margin: 0; min-width: 0; display: flex; flex-direction: column; }
  .dbx-carte-actions { display: inline-flex; align-items: baseline; gap: 14px; }
  .dbx-afaire #dbx-actions { max-height: 560px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
  .dbx-horloge { justify-content: center; }
  .dbx-horloge .hl-haut { padding: 4px 0; }
  .dbx-horloge .hl-montre svg { width: min(190px, 62vw); }
  .dbx-agenda2 .hl-agenda { grid-template-columns: 1fr; gap: 10px; max-height: 330px; overflow-y: auto; }
  .dbx-demandes { border-top: 3px solid #F28C28; }
  .dbx-dem-compte { font-size: var(--t-s); color: var(--text-muted); margin: -2px 0 10px; }
  .dbx-dem-compte b { color: #F28C28; font-size: var(--t-m); }
  .dbx-dem-liste { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
  .dbx-dem { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background: rgba(242,140,40,0.07); border: 1px solid rgba(242,140,40,0.22); border-left: 3px solid #F28C28; border-radius: 10px; padding: 8px 10px; color: var(--text); transition: background .15s, transform .15s; }
  .dbx-dem:hover { background: rgba(242,140,40,0.14); transform: translateX(2px); }
  .dbx-dem-ico { font-size: 18px; text-align: center; }
  .dbx-dem-corps { display: flex; flex-direction: column; min-width: 0; }
  .dbx-dem-corps b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbx-dem-corps small { font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbx-dem-age { font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; }
  .dbx-dem.retard { border-left-color: #E5484D; }
  .dbx-dem.retard .dbx-dem-age { color: #E5484D; font-weight: 600; }
  @media (max-width: 1100px) { .dbx-trio, .dbx-trio.dbx-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dbx-trio > .dbx-afaire { grid-column: 1 / -1; } }
  /* Téléphone : À faire d'abord, puis l'agenda ; l'horloge (si on l'a fait revenir) après l'agenda. */
  @media (max-width: 768px) { .dbx-trio, .dbx-trio.dbx-duo { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dbx-trio > .dbx-horloge { order: 3; } .dbx-horloge .hl-montre svg { width: 150px; }
    .dbx-afaire #dbx-actions { max-height: none; overflow: visible; } }
  @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) {
    /* Téléphone (22.09.2026) : bandeau resserré. Titre et résumé, recherche pleine largeur, les
       trois boutons sur une ligne, puis Rex en bas à droite avec la place pour marcher à sa gauche. */
    .dbx-hero { flex-direction: column; gap: 14px; padding: 18px 16px 0; border-radius: 18px; }
    .dbx-hero-titre { font-size: 22px; margin: 4px 0; }
    .dbx-hero-ligne { gap: 2px 12px; } .dbx-hero-exgroup { padding-left: 0; border-left: none; } .dbx-hero-exgroup svg { height: 15px; }
    .dbx-hero-resume { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
    .dbx-recherche { max-width: none; }
    .dbx-recherche input { font-size: 16px; padding: 12px 0; }   /* 16 px : iOS ne zoome plus sur la page au toucher */
    .dbx-recherche kbd { display: none; }
    .dbx-hero-droite { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; }
    .dbx-hero-boutons { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
    .dbx-hero-boutons > button { flex: 1 1 auto; padding: 9px 10px; font-size: 13px; text-align: center; }
    .dbx-hero-droite > .rexb-duo, .dbx-hero-droite > .rxa-scene, .dbx-hero-droite > img.dbx-hero-mascotte { align-self: flex-end; margin-right: 6px; }
    .dbx-hero-mascotte { width: 58px; }
    .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-outils { margin-bottom: 12px; gap: 6px; }
    .dbx-outils-esp { flex-basis: 100%; height: 0; }
    .dbx-outil { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    /* Fait / Reporter : 44 px, la taille d'un pouce (recommandation Apple), et toujours visibles. */
    .dbx-action-boutons { opacity: 1; }
    .dbx-action-boutons button { width: 44px; height: 44px; font-size: var(--t-l); }
    .dbx-action { padding: 8px 6px 8px 10px; gap: 10px; }
    .dbx-action-icone { width: 30px; height: 30px; }
    .dbx-barres { height: 170px; gap: 3px; } .dbx-barre-val { display: none; }
    .dbx-hbarre { grid-template-columns: minmax(90px, 40%) 1fr auto; gap: 8px; }
  }
  @media (max-width: 480px) { .dbx-lib-long { display: none; } }

  /* ── L'horloge utile et l'agenda du CRM (11.10.2026, js/40) ───────────────────────────────────
     « Le widget horloge pourrait être mieux utilisé, agenda aussi. » Le cadran reste, un peu plus
     petit ; l'heure et la date tiennent sur une ligne ; dessous, les infos choisies (⚙). */
  .dbx-horloge { justify-content: flex-start; gap: 6px; position: relative; }
  .dbx-horloge .hl-haut { padding: 0; }
  .dbx-horloge .hl-montre { gap: 4px; }
  .dbx-horloge .hl-montre svg { width: min(140px, 62vw); }
  .dbx-horloge .hl-numerique { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; }
  .dbx-horloge .hl-numerique b { font-size: 20px; }
  .hli { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; }
  .hli-tete { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
  .hli-reglage { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; }
  .hli-reglage:hover, .hli-reglage[aria-expanded="true"] { color: var(--text); border-color: var(--accent-border); }
  .hli-choix { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); font-size: var(--t-s); color: var(--text); }
  .hli-choix[hidden] { display: none; }
  .hli-choix label { display: flex; align-items: center; gap: 6px; cursor: pointer; min-height: 26px; }
  .hli-lignes { display: flex; flex-direction: column; gap: 8px; }
  .hli-ligne { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
  .hli-ico { font-size: 14px; line-height: 18px; text-align: center; }
  .hli-txt { display: flex; flex-direction: column; min-width: 0; }
  .hli-txt b { font-size: var(--t-s); font-weight: 600; color: var(--text); line-height: 1.3; }
  .hli-txt small { font-size: var(--t-xs); color: var(--text-muted); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hli-ligne.vif b { color: var(--accent); }
  .hli-barre { display: block; height: 5px; margin-top: 4px; border-radius: 99px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
  .hli-barre i { display: block; height: 100%; background: linear-gradient(90deg, #2E8B57, #D4A94A); border-radius: inherit; }
  .hli-vide { font-size: var(--t-xs); color: var(--text-muted); }

  /* L'agenda : trois groupes, une ligne par élément, la source à droite. */
  .dbx-carte-agenda .agd { padding: 20px 22px 16px; display: flex; flex-direction: column; min-height: 100%; }
  .agd-source { font-size: var(--t-xs); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
  .agd-liste { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
  .agd-groupe { display: flex; flex-direction: column; gap: 5px; }
  .agd-groupe-titre { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
  .agd-groupe-titre span { letter-spacing: 0; text-transform: none; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .agd-groupe-titre em { margin-left: auto; font-style: normal; letter-spacing: 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
  .agd-el { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 7px 10px; color: var(--text);
    font: inherit; transition: transform .15s, border-color .15s; }
  .agd-el:hover { transform: translateX(2px); border-color: var(--accent-border); }
  .agd-el.agd-outlook { border-left-color: #0F6CBD; }
  .agd-el.agd-tache { border-left-color: #8B5CF6; }
  .agd-el.agd-tache.urgente { border-left-color: #EF4444; }
  .agd-el.agd-echeance { border-left-color: #F28C28; }
  .agd-el.en-cours { border-left-color: #22C55E; background: rgba(34, 197, 94, .08); }
  .agd-el.passe { opacity: .55; }
  .agd-heure { display: flex; flex-direction: column; font-size: var(--t-s); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .agd-heure small { font-size: var(--t-xs); font-weight: 400; color: var(--text-muted); }
  .agd-jour { font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); text-transform: capitalize; }
  .agd-corps { display: flex; flex-direction: column; min-width: 0; }
  .agd-corps b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agd-corps small { font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .agd-type { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
  .agd-el.en-cours .agd-type { color: #16A34A; }
  .agd-vide { font-size: var(--t-xs); color: var(--text-muted); padding: 4px 2px; }
  .agd-plus { align-self: flex-start; font-size: var(--t-xs); }
  /* L'invitation à connecter Outlook : une ligne, au pied, sans gros bouton. */
  .agd-outlook { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 10px;
    border-top: 1px dashed var(--border); font-size: var(--t-xs); color: var(--text-muted); }
  .agd-outlook .dbx-lien { font-size: var(--t-xs); }
  @media (max-width: 768px) {
    .agd-liste { max-height: none; overflow: visible; }
    .agd-el { grid-template-columns: 54px minmax(0, 1fr) auto; min-height: 44px; }
  }