/* ==========================================================================
   Zone « tableau » – Tableau de bord (index.php) et suivi du pointage en direct
   Classes préfixées « tdb- ». Couleurs : jetons de assets/style.css uniquement.
   ========================================================================== */

/* ---------- En-tête ---------- */

.tdb-entete {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.tdb-entete-texte { min-width: 0; flex: 1 1 420px; }
.tdb-entete-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tdb-direct {
    display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px 0 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 600; letter-spacing: .005em; white-space: nowrap;
    color: var(--ok); background: var(--ok-fond);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
    transition: color var(--d-3) var(--ease-out), background var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.tdb-direct .point-direct { width: 7px; height: 7px; transition: background var(--d-3); }
.tdb-direct.tdb-tic .point-direct { animation: tdb-tic var(--d-4) var(--ease-ressort), pulsation 2s var(--ease-out) infinite; }
.tdb-direct.hors-ligne { color: var(--texte-2); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.tdb-direct.hors-ligne .point-direct { background: var(--texte-3); animation: none; }
.tdb-date { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 500; color: var(--texte-2); }
.tdb-date .ico { width: 15px; height: 15px; color: var(--texte-3); }
.tdb-salut { margin: 0; font-size: 1.95rem; font-weight: 700; letter-spacing: -.034em; line-height: 1.12; }
/* Deux lignes réservées : la phrase change en direct sans faire sauter la page */
.tdb-resume { margin: 8px 0 0; max-width: 680px; min-height: 3.1em; color: var(--texte-2); font-size: .95rem; }
.tdb-resume strong { color: var(--texte); font-weight: 600; }
.tdb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Indicateurs ---------- */

.tdb-indicateurs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tdb-indicateurs-paie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tdb-indicateurs-paie.tdb-indicateurs-paie-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tdb-kpi { display: grid; min-width: 0; }
.tdb-kpi > .stat-lien, .tdb-kpi > .stat { min-width: 0; }
.tdb-indicateurs .stat-libelle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tdb-indicateurs:not(.tdb-indicateurs-paie) .stat { padding: 16px 15px 14px; }
.tdb-indicateurs:not(.tdb-indicateurs-paie) .stat-icone { width: 28px; height: 28px; border-radius: 8px; }
.tdb-indicateurs:not(.tdb-indicateurs-paie) .stat-icone .ico { width: 15px; height: 15px; }
/* Anneau lumineux discret quand un indicateur change en direct */
.tdb-kpi .stat::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1.5px var(--ton, var(--marque-vif)), 0 0 0 4px color-mix(in srgb, var(--ton, var(--marque-vif)) 14%, transparent);
    opacity: 0; transition: opacity var(--d-4) var(--ease-out);
}
.tdb-kpi.tdb-maj .stat::before { opacity: 1; transition-duration: var(--d-2); }
/* Pied des indicateurs sans mini-courbe (même hauteur que .stat-graphe) */
.tdb-kpi-pied { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-top: auto; padding-top: 6px; min-width: 0; }
.tdb-kpi-pied:empty { display: none; }
.tdb-kpi-pied small { font-size: .74rem; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tdb-jauge { flex: 1; min-width: 30px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.tdb-jauge > span {
    display: block; height: 100%; border-radius: inherit; background: var(--ton, var(--marque-vif)); transform-origin: left;
    transition: transform var(--d-4) var(--ease-out); animation: tdb-grandit var(--d-5) var(--ease-out) both .3s;
}
.tdb-pied-direct { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tdb-pied-direct .tdb-puce-point { flex: none; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fond); }
.tdb-pied-direct strong { color: var(--texte); font-weight: 650; }
.tdb-pile { display: flex; flex: none; padding-left: 4px; }
.tdb-pile .avatar { width: 26px; height: 26px; margin-left: -4px; font-size: .58rem; letter-spacing: 0; box-shadow: 0 0 0 2px var(--surface); }
.tdb-pile-plus { color: var(--texte-2); background: var(--surface-3); }

/* ---------- Grille 12 colonnes ---------- */

.tdb-grille { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
.tdb-c4 { grid-column: span 4; }
.tdb-c6 { grid-column: span 6; }
.tdb-c8 { grid-column: span 8; }
.tdb-grille [hidden] { display: none !important; }

.tdb-carte { display: flex; flex-direction: column; min-width: 0; }
.tdb-carte > .carte-entete { align-items: flex-start; flex-wrap: nowrap; }
.tdb-carte > .carte-entete > div:first-child { flex: 1 1 auto; }
.tdb-carte > .carte-entete > div:first-child { min-width: 0; }
.tdb-carte > .carte-entete h2 { font-size: 1rem; }
.tdb-carte > .carte-entete > :not(:first-child) { flex: none; }
.tdb-carte > .etat-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.tdb-lien {
    display: inline-flex; align-items: center; gap: 2px; padding: 5px 6px 5px 10px; margin: -4px -6px 0 0; border-radius: 8px;
    font-size: .82rem; font-weight: 600; color: var(--texte-2); text-decoration: none; white-space: nowrap;
    transition: color var(--d-2), background var(--d-2);
}
.tdb-lien .ico { width: 15px; height: 15px; transition: transform var(--d-2) var(--ease-out); }
.tdb-lien:hover { color: var(--marque-texte); background: var(--marque-doux); }
.tdb-lien:hover .ico { transform: translateX(2px); }

/* ---------- Présence aujourd'hui (anneau + répartition) ---------- */

/* « Attendus plus tard » : gris clair, la part de la journée qui reste à venir */
.tdb-carte { --tdb-avenir: var(--bord-fort); }
@supports (color: color-mix(in srgb, red, blue)) {
    .tdb-carte { --tdb-avenir: color-mix(in srgb, var(--graphe-6) 48%, var(--surface)); }
    /* Thème sombre : un peu plus de matière pour rester lisible sur la piste de l'anneau */
    :root[data-theme="dark"] .tdb-carte { --tdb-avenir: color-mix(in srgb, var(--graphe-6) 64%, var(--surface)); }
}
@media (prefers-color-scheme: dark) {
    @supports (color: color-mix(in srgb, red, blue)) {
        :root:not([data-theme="light"]) .tdb-carte { --tdb-avenir: color-mix(in srgb, var(--graphe-6) 64%, var(--surface)); }
    }
}

.tdb-anneau { padding: 2px 0 18px; }
.tdb-graphe-anneau .graphe-centre strong { font-size: 1.85rem; }
.tdb-repartition { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--bord); display: grid; gap: 10px; }
.tdb-repartition li {
    display: grid; grid-template-columns: 9px minmax(0, 1fr) minmax(36px, 76px) 2.1em 3.1em; align-items: center; gap: 10px;
    font-size: .84rem;
}
.tdb-pastille { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.tdb-rep-libelle { color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-rep-barre { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.tdb-rep-barre > span {
    display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left;
    transition: transform var(--d-4) var(--ease-out); animation: tdb-grandit var(--d-5) var(--ease-out) both .25s;
}
.tdb-rep-valeur { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.tdb-rep-part { text-align: right; font-size: .78rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
@container (max-width: 300px) {
    .tdb-repartition li { grid-template-columns: 9px minmax(0, 1fr) minmax(24px, 48px) 2.1em 3.1em; gap: 8px; }
}

/* ---------- En direct (flux des passages) ---------- */

.tdb-compteurs-direct { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tdb-puce {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; white-space: nowrap;
    font-size: .8rem; color: var(--texte-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord);
}
.tdb-puce strong { color: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; }
.tdb-puce-point { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-3); }
.tdb-puce-ok .tdb-puce-point { background: var(--ok); }

.tdb-flux-cadre { position: relative; flex: 1 1 auto; min-height: 300px; margin: 0 -12px -8px; }
.tdb-flux-defile {
    position: absolute; inset: 0; padding: 0 12px 8px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bord-fort) transparent;
}
.tdb-flux { margin: 0; padding: 0; list-style: none; }
/* Repère de fin de flux : début de la journée, ou lien vers le pointage complet si le flux est tronqué */
.tdb-flux-fin {
    display: flex; align-items: center; gap: 12px; margin: 10px 10px 4px;
    font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--texte-3); white-space: nowrap;
}
.tdb-flux-fin::before, .tdb-flux-fin::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
.tdb-flux-fin [hidden] { display: none; }
.tdb-flux-fin a { color: var(--marque-texte); }
.tdb-flux-defile.defile-bas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }

.tdb-evt {
    position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 10px; border-radius: 12px; transition: background var(--d-1);
}
.tdb-evt + .tdb-evt::after { content: ''; position: absolute; top: 0; left: 60px; right: 10px; height: 1px; background: var(--bord); }
.tdb-evt:hover { background: var(--surface-2); }
.tdb-evt:hover::after, .tdb-evt:hover + .tdb-evt::after { opacity: 0; }
/* Surbrillance d'un passage arrivé pendant que la page est ouverte */
.tdb-evt::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: var(--marque-doux); box-shadow: inset 3px 0 0 var(--marque-vif);
    opacity: 0; transition: opacity var(--d-4) var(--ease-in-out);
}
.tdb-evt.tdb-evt-nouveau::before { opacity: 1; transition-duration: var(--d-3); }

.tdb-evt-avatar { position: relative; width: 38px; height: 38px; font-size: .76rem; text-decoration: none; }
.tdb-evt-sens {
    position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ok); color: var(--surface); box-shadow: 0 0 0 2px var(--surface);
}
.tdb-evt:hover .tdb-evt-sens { box-shadow: 0 0 0 2px var(--surface-2); }
.tdb-evt-sens .ico { width: 10px; height: 10px; stroke-width: 2.6; }
.tdb-evt-depart .tdb-evt-sens { background: var(--texte-3); }
.tdb-evt-photo { cursor: zoom-in; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--bord-fort); transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.tdb-evt-photo img { display: block; background: var(--surface-3); }
.tdb-evt-photo:hover, .tdb-evt-photo:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--marque-vif); }

.tdb-evt-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tdb-evt-nom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tdb-evt-nom strong { min-width: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-evt-nom .badge { flex: none; font-size: .72rem; }
.tdb-evt-qui small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .78rem; color: var(--texte-3); }
.tdb-evt-poste { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-source { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--texte-2); }
.tdb-source::before { content: ''; width: 3px; height: 3px; margin-right: 2px; border-radius: 50%; background: var(--texte-3); }
.tdb-source .ico { width: 13px; height: 13px; }
/* Passage synchronisé après une coupure de réseau (borne restée hors ligne) */
.tdb-differe { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--texte-3); }
.tdb-differe::before { content: ''; width: 3px; height: 3px; margin-right: 2px; border-radius: 50%; background: var(--texte-3); }
.tdb-differe .ico { width: 13px; height: 13px; color: var(--attention); }
.tdb-evt-quand { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.tdb-evt-type { font-size: .82rem; font-weight: 550; color: var(--texte-2); white-space: nowrap; }
.tdb-evt-arrivee .tdb-evt-type { color: var(--ok); }
.tdb-evt-type time { margin-left: 3px; font-size: .92rem; font-weight: 700; color: var(--texte); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tdb-evt-rel { font-size: .74rem; color: var(--texte-3); white-space: nowrap; }

.tdb-flux-vide {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px 24px 28px; text-align: center; color: var(--texte-2);
}
.tdb-flux-vide strong { display: block; color: var(--texte); font-size: 1rem; margin-bottom: 4px; }
.tdb-flux-vide p { max-width: 400px; margin: 0 auto 16px; font-size: .87rem; }
.tdb-flux-vide .actions { justify-content: center; }
.tdb-scan-illustration {
    position: relative; width: 68px; height: 68px; margin-bottom: 16px; border-radius: 20px; overflow: hidden;
    display: grid; place-items: center; color: var(--marque-texte); background: var(--marque-doux);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 22%, transparent);
}
.tdb-scan-illustration .ico { width: 32px; height: 32px; stroke-width: 1.6; }
.tdb-scan-ligne {
    position: absolute; left: 12px; right: 12px; top: 14px; height: 2px; border-radius: 2px;
    background: var(--marque-vif); box-shadow: 0 0 10px 1px var(--anneau);
    animation: tdb-balayage 2.6s var(--ease-in-out) infinite alternate;
}

/* ---------- Listes (non pointés, congés, alertes) ---------- */

.tdb-liste { list-style: none; margin: 0 -10px; padding: 0; }
.tdb-liste li {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
    transition: background var(--d-1);
}
.tdb-liste li + li::after { content: ''; position: absolute; top: 0; left: 56px; right: 10px; height: 1px; background: var(--bord); }
.tdb-liste li:hover { background: var(--surface-2); }
.tdb-liste li:hover::after, .tdb-liste li:hover + li::after { opacity: 0; }
.tdb-liste .avatar { width: 34px; height: 34px; font-size: .72rem; }
.tdb-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tdb-ligne-texte > strong, .tdb-ligne-texte > a {
    min-width: 0; font-size: .88rem; font-weight: 600; color: var(--texte); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdb-ligne-texte > a:hover { color: var(--marque-texte); text-decoration: underline; }
.tdb-ligne-texte small { font-size: .78rem; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-np-heure { color: var(--texte-2); }
.tdb-np-heure.tdb-attendu { color: var(--attention); font-weight: 600; }
/* Listes dont la 2e ligne (dates · type) peut passer à la ligne plutôt que d'être coupée */
.tdb-liste-2l .tdb-ligne-texte small { white-space: normal; }
.tdb-liste .badge { flex: none; }
.tdb-duree {
    flex: none; padding: 3px 9px; border-radius: 8px; font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--texte); background: var(--surface-3);
}
.tdb-plus { margin: 10px 0 0; font-size: .82rem; }
.tdb-plus a { color: var(--texte-2); font-weight: 550; }

.tdb-calendrier {
    width: 38px; flex: none; overflow: hidden; border-radius: 9px; text-align: center; line-height: 1.1;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--bord-fort);
}
.tdb-calendrier small {
    display: block; padding: 2px 0; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texte-2); background: var(--surface-3);
}
.tdb-calendrier strong { display: block; padding: 3px 0 4px; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tdb-calendrier.en-cours { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 40%, transparent); }
.tdb-calendrier.en-cours small { color: var(--info); background: var(--info-fond); }

.tdb-alerte-icone { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.tdb-alerte-icone .ico { width: 17px; height: 17px; }
.tdb-alerte-alerte .tdb-alerte-icone { color: var(--alerte); background: var(--alerte-fond); }
.tdb-alerte-attention .tdb-alerte-icone { color: var(--attention); background: var(--attention-fond); }
.tdb-compte {
    min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--alerte); background: var(--alerte-fond);
}

/* Attendus plus tard (poste pas encore commencé), regroupés par heure et équipe */
.tdb-avenir { margin-top: 6px; }
.tdb-sous-titre {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 4px;
    font-size: .7rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3);
}
.tdb-sous-titre::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
.tdb-sous-compte {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
    font-size: .7rem; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--texte-2); background: var(--surface-3);
}
/* Heure | équipe et délai, puis les noms sur toute la largeur restante */
.tdb-liste-avenir li {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "heure titre dans" "heure noms noms";
    align-items: center; column-gap: 12px; row-gap: 1px;
}
.tdb-liste-avenir li + li::after { left: 68px; }
.tdb-liste-avenir .tdb-heure { grid-area: heure; align-self: start; }
.tdb-av-titre { grid-area: titre; min-width: 0; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-liste-avenir .tdb-dans { grid-area: dans; margin: 0; }
.tdb-av-noms { grid-area: noms; align-self: start; font-size: .8rem; line-height: 1.45; color: var(--texte-2); }
.tdb-heure {
    width: 46px; flex: none; overflow: hidden; border-radius: 9px; text-align: center; line-height: 1.1;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--bord-fort);
}
.tdb-heure small {
    display: block; padding: 2px 0; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texte-2); background: var(--surface-3);
}
.tdb-heure strong { display: block; padding: 3px 0 4px; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tdb-dans { flex: none; font-variant-numeric: tabular-nums; }
/* Avec des attendus plus tard, l'état « tout le monde est pointé » devient une ligne compacte */
.tdb-avec-avenir .tdb-vide {
    flex: none; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 4px 0 2px; text-align: left;
}
.tdb-avec-avenir .tdb-vide-icone { width: 34px; height: 34px; border-radius: 10px; }
.tdb-avec-avenir .tdb-vide-icone .ico { width: 17px; height: 17px; }
.tdb-avec-avenir .tdb-vide small { margin: 1px 0 0; max-width: none; }

/* Horaires des équipes (pied de la carte « Pas encore pointés ») */
.tdb-equipes {
    list-style: none; margin: auto 0 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.tdb-equipes li {
    min-width: 0; padding: 8px 10px 9px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord);
}
.tdb-equipes small { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--texte-3); text-transform: uppercase; letter-spacing: .05em; }
.tdb-equipes strong { display: block; margin-top: 1px; font-size: .86rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-equipes li.en-cours { background: var(--ok-fond); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); }
.tdb-equipes li.en-cours small { color: var(--ok); }
.tdb-equipes li:not(.en-cours) .tdb-equipe-active { display: none; }
.tdb-equipe-active { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
/* Carte étroite : tuiles plus compactes, puis horaires en liste (aucun débordement des heures) */
@container (max-width: 340px) {
    .tdb-equipes { gap: 6px; }
    .tdb-equipes li { padding: 7px 8px 8px; }
    .tdb-equipes small { font-size: .66rem; letter-spacing: .04em; }
    .tdb-equipes strong { font-size: .76rem; }
}
@container (max-width: 290px) {
    .tdb-equipes { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .tdb-equipes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .tdb-equipes small { gap: 8px; }
    .tdb-equipes strong { margin: 0; font-size: .8rem; }
}

/* État vide compact des cartes */
.tdb-vide {
    flex: 1; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 16px 12px; text-align: center;
}
.tdb-vide-icone {
    width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center;
    color: var(--texte-3); background: var(--surface-3);
}
.tdb-vide-icone .ico { width: 22px; height: 22px; }
.tdb-vide-ok .tdb-vide-icone { color: var(--ok); background: var(--ok-fond); animation: echelle var(--d-4) var(--ease-ressort) both .3s; }
.tdb-vide strong { display: block; font-size: .93rem; color: var(--texte); }
.tdb-carte { container-type: inline-size; }
@container (min-width: 720px) {
    .tdb-vide { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 8px 0 4px; text-align: left; gap: 14px; }
    .tdb-vide small { margin-left: 0; max-width: none; }
}
.tdb-vide small { display: block; max-width: 300px; margin: 3px auto 0; font-size: .82rem; color: var(--texte-3); }

/* ---------- Graphique 14 jours et paie ---------- */

.tdb-chiffres { display: flex; gap: 6px; margin: 0; }
.tdb-chiffres > div { min-width: 76px; padding: 6px 12px 7px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord); }
.tdb-chiffres dt { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap; }
.tdb-chiffres dd { margin: 1px 0 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tdb-cache, .tdb-cache + .graphe-legende { display: none !important; }
.tdb-14j-vide { flex: 1; display: flex; }
.tdb-14j-vide > .etat-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Les graphiques occupent toute la hauteur disponible de la carte (cartes voisines plus hautes) */
.tdb-carte > .graphe:not(.tdb-graphe-anneau) { flex: 1 1 auto; height: auto !important; min-height: 236px; margin-top: 2px; }
.tdb-carte .graphe-legende { margin-top: 14px; }

.tdb-paie-unique { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4px 0; }
.tdb-paie-mois { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.tdb-paie-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tdb-paie-barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 12px; }
.tdb-paie-lib { font-size: .86rem; color: var(--texte-2); }
.tdb-paie-barres strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-paie-piste { grid-column: 1 / -1; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.tdb-paie-piste > span {
    display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left;
    animation: tdb-grandit var(--d-5) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms);
}
.tdb-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--texte-3); }
.tdb-note .ico { width: 15px; height: 15px; }

/* ---------- Visionneuse de photo ---------- */

dialog.tdb-visionneuse {
    width: min(520px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--bord); border-radius: var(--rayon-l);
    background: var(--surface); color: var(--texte); box-shadow: var(--ombre-3);
}
dialog.tdb-visionneuse[open] { animation: dialogue-entree var(--d-3) var(--ease-ressort); }
dialog.tdb-visionneuse::backdrop { background: var(--voile); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fondu var(--d-2) var(--ease-out); }
.tdb-visionneuse figure { margin: 0; }
.tdb-visionneuse img { display: block; width: 100%; height: auto; min-height: 200px; max-height: 70vh; object-fit: contain; background: var(--surface-3); }
.tdb-visionneuse figcaption { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; font-weight: 600; }
.tdb-visionneuse figcaption small { font-weight: 400; font-size: .8rem; color: var(--texte-3); }
.tdb-visionneuse form { position: absolute; top: 10px; right: 10px; margin: 0; }
.tdb-visionneuse-fermer { background: var(--verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--ombre-1); }

/* ---------- Mouvement ---------- */

@keyframes tdb-grandit { from { transform: scaleX(0); } }
@keyframes tdb-tic { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes tdb-balayage { from { transform: translateY(0); opacity: .55; } to { transform: translateY(38px); opacity: 1; } }

/* ---------- Adaptation aux écrans ---------- */

@media (max-width: 1380px) {
    .tdb-indicateurs:not(.tdb-indicateurs-paie) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Colonnes 4/8 trop étroites en dessous : 5/7 */
    .tdb-c4 { grid-column: span 5; }
    .tdb-c8 { grid-column: span 7; }
    .tdb-grille-chef .tdb-bas { grid-column: span 6; }
    .tdb-grille-chef .tdb-bas:last-child { grid-column: 1 / -1; }
    .tdb-chiffres > div { min-width: 0; padding: 5px 10px 6px; }
    /* Titre et chiffres / compteurs sur deux lignes plutôt qu'un titre écrasé */
    .tdb-carte > .tdb-entete-large { flex-wrap: wrap; }
}
@media (max-width: 1180px) {
    .tdb-indicateurs-paie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tdb-grille > *, .tdb-grille-chef .tdb-bas { grid-column: 1 / -1; }
    .tdb-carte > .tdb-entete-large { flex-wrap: wrap; }
    .tdb-chiffres { width: 100%; }
    .tdb-chiffres > div { flex: 1; }
    .tdb-flux-cadre { min-height: 0; }
    .tdb-flux-defile, .tdb-flux-vide { position: static; }
    .tdb-flux-defile { max-height: 470px; }
    .tdb-flux-vide { padding: 8px 8px 20px; }
    .tdb-compteurs-direct { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .tdb-entete { margin-bottom: 18px; }
    .tdb-salut { font-size: 1.5rem; }
    .tdb-resume { font-size: .9rem; }
    .tdb-actions { width: 100%; }
    .tdb-actions .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
    .tdb-actions .btn:not(.btn-leger) { order: -1; flex-basis: 100%; }
    .tdb-indicateurs:not(.tdb-indicateurs-paie), .tdb-indicateurs-paie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tdb-carte { padding: 16px; }
    .tdb-flux-cadre { margin: 0 -8px -6px; }
    .tdb-flux-defile { padding: 0 8px 6px; }
    .tdb-evt { gap: 10px; padding: 9px 8px; }
    .tdb-evt + .tdb-evt::after { left: 54px; right: 8px; }
    .tdb-evt-nom { flex-wrap: wrap; row-gap: 3px; }
    .tdb-evt-nom strong { flex: 1 1 100%; }
    /* Source et « hors ligne » réduits à leur icône (texte conservé pour les lecteurs d'écran) : le poste reste lisible */
    .tdb-source > span, .tdb-differe > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tdb-repartition li { grid-template-columns: 9px minmax(0, 1fr) minmax(36px, 68px) 2.1em 3.1em; }
}
@media (max-width: 400px) {
    /* Petits téléphones : libellés des indicateurs sur deux lignes plutôt que tronqués */
    .tdb-indicateurs .stat-libelle, .tdb-kpi-pied small { white-space: normal; }
}