/* « En direct »: the agents, « Pour vous », the sessions at work with their ticker. The feed is in fil.css. */

.accueil {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
}

.accueil__cote,
.accueil__principal {
    display: grid;
    gap: var(--space-8);
    align-content: start;
    min-width: 0;
}

.accueil__principal .section + .section { margin-top: 0; }

/* — The five agents: one grouped list on the phone, five cards on a wide screen ---------------------------------- */
.agents {
    display: grid;
    overflow: hidden;
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
}

.agent {
    position: relative;
    display: grid;
    grid-template-areas: "icone nom puce" "icone ligne ligne";
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    min-height: calc(var(--space-6) * 2 + var(--space-1) + var(--space-3) * 2);
    padding: var(--space-3) var(--space-4);
    transition: background-color var(--dur-fast) var(--ease);
}

.agent + .agent { border-top: var(--border-width) solid var(--border-subtle); }
.agent:hover { background: var(--paper-soft); }

.agent__icone {
    display: grid;
    grid-area: icone;
    align-self: center;
    width: var(--space-10);
    height: var(--space-10);
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--ink-100);
    color: var(--text-dim);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.agent--direct .agent__icone { background: var(--accent-soft); color: var(--accent-text); }
.agent--alerte .agent__icone { background: var(--warning-bg); color: var(--warning-text); }
.agent--erreur .agent__icone { background: var(--error-bg); color: var(--error-text); }

/* On the phone the badge shares the name's row: the name wraps rather than losing its end. */
.agent__nom {
    grid-area: nom;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
}

.agent__puce { grid-area: puce; }

.agent__ligne {
    display: flex;
    grid-area: ligne;
    align-items: baseline;
    gap: var(--space-3);
    min-width: 0;
}

/* Two lines at most, so a time at the end of the sentence (« demain à 00 h 30 ») stays readable. */
.agent__quoi {
    display: -webkit-box;
    flex: 1;
    grid-area: quoi;
    min-width: 0;
    overflow: hidden;
    color: var(--text-soft);
    font-size: var(--text-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.agent--neutre .agent__quoi { color: var(--text-dim); }

.agent__temps {
    flex: none;
    grid-area: temps;
    color: var(--text-mute);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    white-space: nowrap;
}

.agent__temps--alerte { color: var(--warning-text); font-weight: var(--weight-semibold); }

/* — « Pour vous » ----------------------------------------------------------------------------------------------------- */
.rappels {
    display: grid;
    gap: var(--space-2);
}

.rappel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xs);
    animation: apparition var(--dur-slow) var(--ease-out);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.rappel:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }

.rappel__icone {
    display: grid;
    width: var(--space-10);
    height: var(--space-10);
    place-items: center;
    border-radius: var(--radius-md);
}

.rappel--info .rappel__icone { background: var(--info-bg); color: var(--info-text); }
.rappel--alerte .rappel__icone { background: var(--warning-bg); color: var(--warning-text); }
.rappel--erreur .rappel__icone { background: var(--error-bg); color: var(--error-text); }

.rappel__corps { min-width: 0; }

.rappel__titre {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.rappel__lien {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The title's link covers the card; the card's own button sits above it. */
.rappel__lien::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.rappel__meta-texte,
.rappel__temps { font-variant-numeric: tabular-nums; }

.rappel__meta {
    overflow: hidden;
    color: var(--text-dim);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rappel__action {
    position: relative;
    z-index: var(--z-raise);
    display: grid;
    grid-column: 1 / -1;
}

/* — « En cours »: one card per session, with its ticker ---------------------------------------------------------------- */
.sessions {
    display: grid;
    gap: var(--space-3);
}

.session {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
    animation: apparition var(--dur-slow) var(--ease-out);
}

.session__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.session__chrono { color: var(--text-mute); font-size: var(--text-xs); }

.session__titre {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-snug);
}

.session__lien { overflow-wrap: anywhere; }
.session__meta { margin-top: calc(var(--space-2) * -1); color: var(--text-dim); font-size: var(--text-sm); }
.session__meta--alerte { color: var(--warning-text); font-weight: var(--weight-semibold); }

.session__paralleles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.session__parallele {
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--ink-100);
    color: var(--text-soft);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-loose);
}

.session__pied { display: grid; }
.session__suivre { justify-self: stretch; }

/* The ticker: six lines, reserved height, the newest slides in on top. */
.teleimprimeur__cadre {
    position: relative;
    min-height: calc(var(--space-8) * 6);
    padding: var(--space-1) 0;
    border-top: var(--border-width) solid var(--border-subtle);
}

.teleimprimeur { display: grid; }

.teleimprimeur__ligne {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    height: var(--space-8);
    color: var(--text-soft);
    font-size: var(--text-sm);
}

.teleimprimeur__ligne--nouvelle { animation: descente var(--dur-slow) var(--ease-out); }
.teleimprimeur__icone { color: var(--text-mute); }
.teleimprimeur__ligne:first-child .teleimprimeur__icone { color: var(--accent); }
.teleimprimeur__session { flex: none; color: var(--text-mute); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.teleimprimeur__verbe { flex: none; color: var(--text); font-weight: var(--weight-semibold); }

.teleimprimeur__cible {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.teleimprimeur__cible--texte { font-family: var(--font-sans); font-size: var(--text-sm); font-style: italic; }
.teleimprimeur__cible--simple { display: block; text-overflow: ellipsis; }
.teleimprimeur__cible--categorie { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-dim); }
.teleimprimeur__dossier { overflow: hidden; color: var(--text-mute); text-overflow: ellipsis; }
.teleimprimeur__fichier { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.teleimprimeur__temps { flex: none; color: var(--text-mute); font-size: var(--text-xs); }

.teleimprimeur__attente {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-mute);
    font-size: var(--text-sm);
}