/* ==========================================================================
   Module IA — système visuel des écrans du cahier des charges de juillet 2026
   ==========================================================================

   Ces écrans ont d'abord été construits pour être justes, pas pour être
   habités. Or huit gestionnaires y passeront leur journée : la file se
   parcourt des centaines de fois par semaine, et chaque hésitation du regard
   se paie autant de fois.

   Tout est porté par `.ai-page`, la classe posée sur le contenu des écrans du
   module. Rien ici ne peut donc altérer les écrans WikiDesk existants —
   contrainte assumée : le module doit s'intégrer, pas imposer sa loi.

   Trois principes, dans cet ordre :

   1. UNE SEULE COULEUR PORTEUSE DE SENS PAR LIGNE. Le rouge ne dit qu'une
      chose, « le délai est dépassé ». S'il dit aussi « urgent », « erreur »
      et « supprimer », il ne dit plus rien. L'urgence est portée par la
      typographie et une pastille sobre ; le retard, lui, colore la ligne.

   2. LE REGARD DESCEND, IL NE ZIGZAGUE PAS. Dans la file, l'objet du mail est
      l'ancre : même position, même taille, toujours à gauche. Le reste
      s'aligne en colonnes de largeur fixe pour que l'œil apprenne où regarder
      et cesse de chercher.

   3. LA DENSITÉ EST UN SERVICE, PAS UNE ÉCONOMIE. Un outil de travail montre
      beaucoup d'un coup — mais chaque ligne garde une hauteur constante et de
      l'air vertical, faute de quoi la liste devient un mur.
   ========================================================================== */

.ai-page {
    /* Échelle d'espacement : multiples de 4. Toute marge de ce fichier en
       est tirée — c'est ce qui donne l'impression de régularité. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Échelle typographique. Volontairement courte : cinq tailles suffisent,
       et au-delà les écarts deviennent indécidables. */
    --fs-meta: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-base: 0.92rem;
    --fs-lg: 1.05rem;
    --fs-title: 1.45rem;

    --ink: #17222e;
    --ink-soft: #5b6b7c;
    --ink-faint: #8a99a8;

    --line: #e3e9ee;
    --line-strong: #cfd8e0;
    --surface: #ffffff;
    --surface-sunken: #f6f8fa;

    --brand: #123A63;
    --brand-soft: #00A9AA;

    --danger: #c0392b;
    --danger-bg: #fdf2f1;
    --warn: #b9770e;
    --warn-bg: #fdf8ec;
    --ok: #1e7f4f;
    --ok-bg: #f0f8f3;

    --r-sm: 6px;
    --r-md: 10px;

    color: var(--ink);
    font-size: var(--fs-base);
}

/* --------------------------------------------------------------------------
   En-tête de page
   -------------------------------------------------------------------------- */

.ai-page .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
}

.ai-page .page-header h1 {
    font-size: var(--fs-title);
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--brand);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.ai-page .page-header h1 i { color: var(--brand-soft); font-size: 0.9em; }

.ai-page .page-subtitle {
    margin: var(--sp-2) 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    max-width: 68ch;      /* au-delà, l'œil perd la ligne suivante */
    line-height: 1.5;
}

.ai-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: var(--sp-2);
}

.ai-page .back-link:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.ai-page .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    /* Ombre très légère : à cette densité, une ombre marquée fait vibrer la
       page dès qu'il y a plus de trois cartes. La bordure porte la
       séparation, l'ombre ne fait que décoller. */
    box-shadow: 0 1px 2px rgba(16, 32, 48, 0.04);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.ai-page .card > h2 {
    font-size: var(--fs-lg);
    font-weight: 640;
    color: var(--brand);
    margin: 0 0 var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ai-page .card > h2 i { color: var(--brand-soft); font-size: 0.85em; }

.ai-page .card-note {
    margin: 0 0 var(--sp-4);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
    max-width: 78ch;
}

/* --------------------------------------------------------------------------
   Bandeau de chiffres
   -------------------------------------------------------------------------- */

.ai-page .month-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.ai-page .stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: none;
    text-align: left;
}

.ai-page .stat-label {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.ai-page .stat-value {
    font-size: 1.6rem;
    font-weight: 660;
    color: var(--brand);
    line-height: 1.1;
    /* Chiffres de largeur fixe : sans cela une colonne de nombres tressaute
       d'une ligne à l'autre. */
    font-variant-numeric: tabular-nums;
}

.ai-page .stat-value.is-danger { color: var(--danger); }
.ai-page .stat-value.is-muted { color: var(--ink-faint); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */

.ai-page .table-container {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}

.ai-page .card .table-container { border: none; border-radius: 0; }

.ai-page .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.ai-page .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    font-size: var(--fs-meta);
    font-weight: 660;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

.ai-page .data-table tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink);
}

.ai-page .data-table tbody tr:last-child td { border-bottom: none; }

.ai-page .data-table tbody tr {
    transition: background 0.12s ease;
}

.ai-page .data-table tbody tr:hover { background: var(--surface-sunken); }

/* Colonne de nombres : alignée à droite et de chiffres égaux, seule façon de
   comparer deux valeurs d'un coup d'œil. */
.ai-page .data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-page .data-table .nowrap { white-space: nowrap; }

/* Ligne en retard. Teinte très pâle : elle doit se voir en balayant la page,
   sans rendre le texte moins lisible ni écraser les lignes voisines. */
.ai-page tr.row-alert { background: var(--danger-bg); }
.ai-page tr.row-alert:hover { background: #fbe9e7; }
.ai-page tr.row-inactive { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Pastilles
   -------------------------------------------------------------------------- */

.ai-page .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 650;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ai-page .pill-danger { background: var(--danger-bg); color: var(--danger); border-color: #f3c9c4; }
.ai-page .pill-warn   { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4; }
.ai-page .pill-ok     { background: var(--ok-bg); color: var(--ok); border-color: #c7e4d4; }
.ai-page .pill-muted  { background: var(--surface-sunken); color: var(--ink-soft); border-color: var(--line-strong); }
.ai-page .pill-brand  { background: #eaf6f7; color: #0b6d6e; border-color: #bfe4e5; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.ai-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 9px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

.ai-page .btn:hover { background: var(--surface-sunken); border-color: var(--ink-faint); }

.ai-page .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.ai-page .btn-primary:hover { background: #0d2c4c; border-color: #0d2c4c; }

.ai-page .btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.ai-page .btn-success:hover { background: #196b42; }

.ai-page .btn-danger { background: var(--surface); border-color: #eec4bf; color: var(--danger); }
.ai-page .btn-danger:hover { background: var(--danger-bg); }

.ai-page .btn-sm { padding: 5px 10px; font-size: var(--fs-meta); }

/* Une action et une seule doit sauter aux yeux par écran. Les voisines
   restent discrètes, sinon plus rien ne ressort. */
/* Un bouton discret reste un bouton : il garde un bord.
   Avec `border-color: transparent` il ne se distinguait du texte que par le
   contraste du fond — ce qui tient sur du blanc et disparaît en thème
   sombre. « J'appelle » et « Noter l'issue » s'y lisaient comme de simples
   libellés, et personne ne cliquait dessus. */
.ai-page .btn-ghost {
    background: none;
    border-color: var(--line-strong);
    color: var(--ink-soft);
}
.ai-page .btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); }

.ai-page .actions-cell {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */

.ai-page .filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.ai-page .filter-tab {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    transition: all 0.12s ease;
}

.ai-page .filter-tab:hover { border-color: var(--ink-faint); color: var(--ink); }

.ai-page .filter-tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.ai-page .filter-count {
    font-size: var(--fs-meta);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Bandeaux d'information
   -------------------------------------------------------------------------- */

.ai-page .alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.ai-page .alert i { margin-top: 2px; flex-shrink: 0; }
.ai-page .alert-danger  { background: var(--danger-bg); border-color: #f3c9c4; color: #8e2b20; }
.ai-page .alert-warning { background: var(--warn-bg); border-color: #f0dcb4; color: #8a5a0b; }
.ai-page .alert-success { background: var(--ok-bg); border-color: #c7e4d4; color: #175f3b; }
.ai-page .alert-info    { background: #eef6fb; border-color: #cfe3f0; color: #1c4f70; }

.ai-page .warning-list { margin: var(--sp-2) 0 0 var(--sp-4); padding: 0; }
.ai-page .warning-list li { margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   État vide
   -------------------------------------------------------------------------- */

/* Un écran vide doit apprendre quelque chose. « Aucun résultat » n'apprend
   rien : on dit ce qui manque et ce qu'il faut faire. */
.ai-page .empty-state {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--ink-soft);
}

.ai-page .empty-state i {
    font-size: 2rem;
    color: var(--line-strong);
    margin-bottom: var(--sp-3);
    display: block;
}

.ai-page .empty-state strong {
    display: block;
    color: var(--ink);
    font-size: var(--fs-base);
    margin-bottom: var(--sp-2);
}

.ai-page .empty-state p { margin: 0 auto; max-width: 52ch; font-size: var(--fs-sm); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.ai-page .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.ai-page .form-group { display: flex; flex-direction: column; gap: 6px; }
.ai-page .form-group-wide { grid-column: 1 / -1; }

.ai-page .form-group label {
    font-size: var(--fs-sm);
    font-weight: 620;
    color: var(--ink);
}

.ai-page .form-group input[type="text"],
.ai-page .form-group input[type="number"],
.ai-page .form-group input[type="url"],
.ai-page .form-group input[type="password"],
.ai-page .form-group input[type="email"],
.ai-page .form-group input[type="date"],
.ai-page .form-group select,
.ai-page .form-group textarea {
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    width: 100%;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ai-page .form-group input:focus,
.ai-page .form-group select:focus,
.ai-page .form-group textarea:focus {
    outline: none;
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(0, 169, 170, 0.15);
}

.ai-page .form-group small {
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    line-height: 1.5;
}

.ai-page .form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
}

.ai-page .inline-form { display: flex; gap: var(--sp-2); align-items: center; }

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.ai-page .text-muted { color: var(--ink-faint); }
.ai-page .text-danger { color: var(--danger); }
.ai-page .text-success { color: var(--ok); }
.ai-page .text-warning { color: var(--warn); }
.ai-page .small { font-size: var(--fs-meta); }
.ai-page code {
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.85em;
}

@media (max-width: 900px) {
    .ai-page .page-header { flex-direction: column; align-items: stretch; }
    .ai-page .card { padding: var(--sp-4); }
}

/* ==========================================================================
   La file (§10) — l'écran le plus regardé du module
   ==========================================================================

   Parcouru des dizaines de fois par jour. Chaque hésitation du regard se paie
   autant de fois, d'où deux partis pris.

   L'URGENCE EST UN LISERÉ, PAS UNE COLONNE. Une colonne « Urgence » coûtait
   90 pixels de large pour un mot répété à l'identique sur toute la hauteur.
   Un liseré de 3 px sur le bord gauche donne la même information sans
   consommer de largeur ni attirer l'œil plus que nécessaire.

   LA PREMIÈRE CELLULE PORTE L'IDENTITÉ DU DOSSIER. L'objet du mail seul ne
   suffit pas à décider : le gestionnaire cherche l'assuré et la police.
   L'adresse de l'expéditeur, elle, ne sert presque jamais — elle cède la
   place.
   -------------------------------------------------------------------------- */

.ai-page .queue-table { table-layout: fixed; }

/* Cinq colonnes, pas sept. Le type d'acte est descendu dans la ligne de
   contexte : à sept colonnes, la colonne « Dossier » devenait si étroite que
   les objets se coupaient en plein mot et que les hauteurs de ligne
   variaient du simple au double — exactement ce qui empêche de balayer. */
.ai-page .queue-table thead th.col-subject { width: auto; min-width: 220px; }
/* Le courtier n'est pas une donnée d'appoint : c'est l'identité au nom de
   laquelle le gestionnaire répondra. « Assurances Vanderb… » oblige à
   ouvrir le dossier pour savoir qui l'on sera. */
.ai-page .queue-table thead th.col-courtier { width: 210px; }
.ai-page .queue-table td[data-label="Courtier"] {
    font-weight: 600;
    white-space: normal;
}
.ai-page .queue-table thead th.col-owner { width: 150px; }
.ai-page .queue-table thead th.col-due { width: 120px; }
.ai-page .queue-table thead th.col-trust { width: 90px; }

.ai-page .queue-table tbody tr {
    border-left: 3px solid transparent;
}

/* Le liseré ne distingue que ce qui demande une décision : l'urgent, et le
   retard. Un dossier normal n'a pas de liseré — c'est ce qui rend les autres
   visibles. */
.ai-page .queue-table tr.is-urgent { border-left-color: #e08a2e; }
.ai-page .queue-table tr.is-late { border-left-color: var(--danger); }

.ai-page .queue-subject {
    display: block;
    font-weight: 620;
    color: var(--brand);
    text-decoration: none;
    font-size: var(--fs-base);
    line-height: 1.35;
    /* Deux lignes au plus : au-delà, les hauteurs de ligne divergent et le
       tableau cesse d'être balayable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-page .queue-subject:hover { text-decoration: underline; }

/* Ligne de contexte sur UNE seule ligne, tronquée si nécessaire. Autorisée
   à passer à la ligne, elle faisait varier la hauteur des lignes d'une à
   trois, et la liste cessait d'être parcourable d'un regard. */
.ai-page .queue-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 5px;
    font-size: var(--fs-meta);
    color: var(--ink-faint);
}

.ai-page .queue-meta > * { flex-shrink: 0; }

/* L'assuré est le seul élément autorisé à se réduire : c'est le plus long
   et le moins critique à lire en entier. */
.ai-page .queue-meta .shrink {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* Hauteur de ligne constante : deux lignes d'objet au plus, une de contexte.
   C'est cette régularité qui permet de descendre la liste sans relire. */
.ai-page .queue-table tbody td { height: 62px; }

.ai-page .queue-meta .sep { color: var(--line-strong); }
.ai-page .queue-meta strong { color: var(--ink-soft); font-weight: 620; }

.ai-page .queue-due {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.3;
}

.ai-page .queue-due .relative {
    display: block;
    font-size: var(--fs-meta);
    color: var(--ink-faint);
}

.ai-page .queue-due.is-late { color: var(--danger); font-weight: 640; }
.ai-page .queue-due.is-late .relative { color: var(--danger); }

.ai-page .queue-table tbody td { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

/* Sur écran étroit, un tableau à sept colonnes devient illisible : il se
   replie en fiches, une par dossier.

   **Pourquoi 1150 px et non 860.** Le seuil se mesure sur la fenêtre, mais
   c'est la zone de contenu qui porte le tableau — et le menu latéral lui
   prend 308 px. Les cinq colonnes à largeur fixe en occupent 610 ; il faut
   donc 1150 px de fenêtre pour qu'il reste à la colonne « Dossier » de quoi
   afficher un objet.

   Entre 861 et 1150 px, le tableau ne se repliait pas et la colonne
   « Dossier » — la seule à largeur `auto` — absorbait tout le manque :
   mesurée à **0 pixel**, objet présent dans le HTML et invisible à
   l'écran. Un poste de travail en 1024 ou une fenêtre à demi-écran sur un
   16 pouces tombaient en plein dedans. Vu au navigateur ; aucun test ne
   pouvait le voir. */
@media (max-width: 1150px) {
    .ai-page .queue-table thead { display: none; }
    .ai-page .queue-table, .ai-page .queue-table tbody,
    .ai-page .queue-table tr, .ai-page .queue-table td { display: block; width: 100%; }
    .ai-page .queue-table tr {
        border: 1px solid var(--line);
        border-left-width: 3px;
        border-radius: var(--r-md);
        margin-bottom: var(--sp-3);
        padding: var(--sp-3);
    }
    .ai-page .queue-table td { border: none; padding: 2px 0; }
    .ai-page .queue-table td[data-label]::before {
        content: attr(data-label) " · ";
        font-size: var(--fs-meta);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-faint);
        font-weight: 650;
    }

    /* **Les quatre faits secondaires tiennent sur une ligne, pas quatre.**
       Empilés chacun sur son bloc, une fenêtre à demi-écran ne montrait
       qu'un seul dossier : il fallait défiler pour savoir s'il y en avait
       un deuxième, ce qui retire à la file sa seule raison d'être —
       comparer d'un coup d'œil. Ils s'écoulent donc côte à côte et passent
       à la ligne quand la place manque.

       Cette compaction n'existait que sous 860 px. Entre 860 et 1150 —
       c'est-à-dire précisément la demi-fenêtre d'un écran courant — la
       version la plus large était donc la plus haute. */
    .ai-page .queue-table td[data-label="Courtier"],
    .ai-page .queue-table td[data-label="Gestionnaire"],
    .ai-page .queue-table td[data-label="Échéance"],
    .ai-page .queue-table td[data-label="Fiabilité"] {
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin-right: var(--sp-4);
        vertical-align: top;
        white-space: normal;
        font-size: var(--fs-meta);
    }
    .ai-page .queue-table td[data-label="Courtier"]::before,
    .ai-page .queue-table td[data-label="Gestionnaire"]::before,
    .ai-page .queue-table td[data-label="Échéance"]::before,
    .ai-page .queue-table td[data-label="Fiabilité"]::before {
        display: inline;
    }

    /* La fiche se resserre : c'est ce qui fait tenir plusieurs dossiers. */
    .ai-page .queue-table tr {
        padding: var(--sp-2) var(--sp-3);
        margin-bottom: var(--sp-2);
    }
    .ai-page .queue-table tbody td { height: auto; }
}

/* Courtier sur une ligne : le nom exact importe peu au balayage, et un
   retour à la ligne y crée un décrochement visuel à chaque ligne. */
.ai-page .queue-table td[data-label="Courtier"],
.ai-page .queue-table td[data-label="Gestionnaire"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Le dossier (§10) — l'établi
   ==========================================================================

   Le gestionnaire y fait trois choses, dans cet ordre : lire ce que le client
   demande, vérifier les actions proposées, reprendre le brouillon. La mise en
   page suit cet ordre plutôt que celui du modèle de données.

   La colonne de droite ne porte que ce qui se consulte sans agir : temps,
   attribution, journal. Rien d'essentiel ne s'y trouve — sur écran étroit
   elle passe sous la colonne principale sans rien casser.
   -------------------------------------------------------------------------- */

.ai-page .ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 1100px) {
    .ai-page .ticket-layout { grid-template-columns: minmax(0, 1fr); }
}

.ai-page .ticket-head {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}

.ai-page .ticket-head h1 {
    font-size: 1.3rem;
    font-weight: 650;
    color: var(--brand);
    margin: var(--sp-1) 0 var(--sp-2);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ai-page .ticket-head .origin {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.ai-page .ticket-pills {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}

/* Identité du dossier : quatre faits, alignés, lisibles sans lecture. */
.ai-page .fact-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.ai-page .fact-label {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    font-weight: 650;
    margin-bottom: 3px;
}

/* Un élément de grille vaut `min-width: auto` : il refuse de devenir plus
   étroit que son contenu. Une référence comme `SL/HEALTH/2022/4587`, qui n'a
   aucune espace où se couper, débordait donc sur la colonne voisine et se
   superposait au nom de l'assuré. Même cause que le débordement de la
   facturation, même remède — et `overflow-wrap` pour que la coupure se fasse
   dans le mot quand il n'y a pas d'autre choix. */
.ai-page .fact-row > * { min-width: 0; }
.ai-page .fact-value {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* -- actions recommandées -- */

.ai-page .recommendation {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
}

.ai-page .recommendation:last-of-type { border-bottom: none; padding-bottom: 0; }
.ai-page .recommendation-body { flex: 1; min-width: 0; }

.ai-page .recommendation h3 {
    font-size: var(--fs-base);
    font-weight: 640;
    color: var(--ink);
    margin: 0 0 var(--sp-2);
    line-height: 1.4;
}

.ai-page .justification {
    margin: 0 0 var(--sp-3);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* La citation est la pièce maîtresse du §10 : elle justifie l'action. Elle
   doit se distinguer du commentaire sans crier. */
.ai-page .source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef6fb;
    border: 1px solid #d3e6f2;
    color: #1c4f70;
    border-radius: var(--r-sm);
    padding: 4px 9px;
    font-size: var(--fs-meta);
    line-height: 1.4;
    margin-right: 6px;
    margin-bottom: 4px;
}

.ai-page .sources-empty { color: var(--warn); font-size: var(--fs-meta); margin: 0; }

.ai-page .recommendation-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* -- brouillon -- */

.ai-page .draft-area {
    width: 100%;
    min-height: 260px;
    padding: var(--sp-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    resize: vertical;
}

.ai-page .draft-area:focus {
    outline: none;
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(0, 169, 170, 0.15);
}

.ai-page .draft-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    align-items: center;
}

/* -- mail reçu -- */

.ai-page .mail-message { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.ai-page .mail-message:last-child { border-bottom: none; }

.ai-page .mail-message header {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.ai-page .mail-body {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-4);
    margin: 0;
}

/* -- colonne latérale -- */

.ai-page .ticket-side .card { padding: var(--sp-4); }
.ai-page .ticket-side .card > h2 { font-size: var(--fs-base); }

.ai-page .side-list { list-style: none; margin: 0; padding: 0; }

.ai-page .side-list li {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.ai-page .side-list li:last-child { border-bottom: none; }

/* Journal : l'horodatage recule, l'événement avance. Un journal se parcourt
   de haut en bas pour savoir « ce qui s'est passé », pas « à quelle heure ». */
.ai-page .journal-entry { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.ai-page .journal-entry:last-child { border-bottom: none; }

.ai-page .journal-entry .when {
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.ai-page .journal-entry .what {
    font-size: var(--fs-sm);
    font-weight: 620;
    color: var(--ink);
    margin: 2px 0;
}

.ai-page .journal-entry .detail {
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    line-height: 1.5;
}

.ai-page .synthesis {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
}

/* -- une action = une consigne exécutable -------------------------------- */

.ai-page .recommendation.is-accepted { opacity: 0.62; }
.ai-page .recommendation.is-rejected { opacity: 0.45; }
.ai-page .recommendation.is-accepted h3 { text-decoration: none; }

.ai-page .recommendation h3 {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}

/* Numéro d'étape : la pastille dit « ceci est une séquence », pas une liste
   d'options entre lesquelles choisir. */
.ai-page .step-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: 1px;
}

.ai-page .recommendation.is-accepted .step-number { background: var(--ok); }
.ai-page .recommendation.is-rejected .step-number { background: var(--ink-faint); }

/* Où aller dans Brio. Mis en évidence : c'est ce qui évite de chercher. */
.ai-page .brio-path {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    padding: 7px 11px;
    background: #f2f7fb;
    border: 1px solid #dbe8f2;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #1c4f70;
}

.ai-page .brio-path i { color: #4a86ae; }

/* Valeurs à encoder : une par ligne, pour pouvoir les suivre du doigt. */
.ai-page .brio-fields {
    margin: 0 0 var(--sp-3);
    padding: 0 0 0 var(--sp-4);
    list-style: none;
}

.ai-page .brio-fields li {
    position: relative;
    font-size: var(--fs-sm);
    color: var(--ink);
    line-height: 1.7;
}

.ai-page .brio-fields li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-3));
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--line-strong);
}

.ai-page .verdict-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-meta);
    white-space: nowrap;
}

.ai-page .verdict-badge i { font-size: 1.15rem; }
.ai-page .verdict-badge strong { display: block; font-size: var(--fs-sm); }
.ai-page .verdict-badge span { color: var(--ink-faint); }
.ai-page .verdict-badge.is-accepted i { color: var(--ok); }
.ai-page .verdict-badge.is-accepted strong { color: var(--ok); }
.ai-page .verdict-badge.is-rejected i { color: var(--ink-faint); }
.ai-page .verdict-badge.is-rejected strong { color: var(--ink-soft); }

/* ==========================================================================
   Écrans de configuration
   ==========================================================================

   Ces écrans ne se parcourent pas comme la file : on ne les ouvre que pour
   régler quelque chose, souvent une fois, parfois en urgence parce qu'une
   chose a cessé de fonctionner. Trois règles en découlent.

   1. L'ÉTAT AVANT LE FORMULAIRE. La première question est toujours « est-ce
      que ça marche ? ». Elle doit trouver sa réponse sans lecture, avant
      tout champ de saisie.

   2. LES INSTRUCTIONS N'APPARAISSENT QUE SI ELLES SERVENT. Un guide de
      branchement affiché en permanence sur un service déjà branché ajoute du
      bruit à chaque visite pour rendre service une seule fois.

   3. UNE SEULE ACTION PRINCIPALE PAR CARTE. Ce qui détruit reste discret :
      un bouton rouge saillant finit par être cliqué.
   -------------------------------------------------------------------------- */

/* -- navigation vers les écrans de réglage -- */

.ai-page .config-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-3);
}

.ai-page .config-link {
    display: block;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.ai-page .config-link:hover {
    border-color: var(--brand-soft);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(16, 32, 48, 0.07);
}

.ai-page .config-link i {
    color: var(--brand-soft);
    font-size: 1.1rem;
    display: block;
    margin-bottom: var(--sp-2);
}

.ai-page .config-link strong {
    display: block;
    font-size: var(--fs-base);
    font-weight: 640;
    color: var(--brand);
    margin-bottom: 4px;
}

.ai-page .config-link span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.5;
}

/* -- formulaires : primitives héritées des écrans existants -- */

.ai-page .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--sp-4);
}

.ai-page .form-row-wide { grid-column: 1 / -1; }

.ai-page .form-row > label,
.ai-page label.field-label {
    font-size: var(--fs-sm);
    font-weight: 620;
    color: var(--ink);
}

.ai-page .form-control {
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    width: 100%;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ai-page .form-control:focus {
    outline: none;
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(0, 169, 170, 0.15);
}

.ai-page .form-control::placeholder { color: var(--ink-faint); }

.ai-page .field-hint {
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    line-height: 1.5;
}

.ai-page .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 3px 0;
}

.ai-page .checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: var(--brand-soft);
    flex-shrink: 0;
}

/* -- pastilles héritées -- */

.ai-page .badge,
.ai-page .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 650;
    background: var(--surface-sunken);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    white-space: nowrap;
}

.ai-page .badge-muted { background: var(--surface-sunken); color: var(--ink-faint); }
.ai-page .badge-danger { background: var(--danger-bg); color: var(--danger); border-color: #f3c9c4; }
.ai-page .badge-warning { background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4; }
.ai-page .btn-outline { background: var(--surface); }

/* -- intégrations : l'état d'abord -- */

.ai-page .integration-card { padding: 0; overflow: hidden; }

.ai-page .integration-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.ai-page .integration-head h2 { margin: 0 0 4px; font-size: var(--fs-lg); }

.ai-page .integration-head p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    max-width: 72ch;
    line-height: 1.5;
}

/* Le voyant répond à la seule question qui compte en arrivant. */
.ai-page .integration-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-sm);
    font-weight: 620;
    white-space: nowrap;
}

.ai-page .integration-status::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
    flex-shrink: 0;
}

.ai-page .integration-status.is-ok { color: var(--ok); }
.ai-page .integration-status.is-ok::before {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(30, 127, 79, 0.16);
}

.ai-page .integration-status.is-error { color: var(--danger); }
.ai-page .integration-status.is-error::before {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

.ai-page .integration-status.is-off { color: var(--ink-faint); }

.ai-page .integration-card > form,
.ai-page .integration-body { padding: var(--sp-5); }

.ai-page .integration-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    margin-top: var(--sp-4);
}

.ai-page .test-result {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: 1.55;
    margin-bottom: var(--sp-4);
    border: 1px solid;
}

.ai-page .test-ok { background: var(--ok-bg); border-color: #c7e4d4; color: #175f3b; }
.ai-page .test-error { background: var(--danger-bg); border-color: #f3c9c4; color: #8e2b20; }

/* Guide de branchement : replié dès que le service répond. */
.ai-page .setup-guide {
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.ai-page .setup-guide > summary {
    cursor: pointer;
    font-weight: 620;
    font-size: var(--fs-sm);
    color: var(--brand);
}

.ai-page .setup-guide ol { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }

.ai-page .setup-guide li {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.ai-page .setup-guide li strong { display: block; color: var(--ink); }

.ai-page .setup-guide code,
.ai-page .code-block {
    display: block;
    background: #1e2a35;
    color: #e6edf3;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: 0.78rem;
    line-height: 1.6;
    overflow-x: auto;
    margin-top: 6px;
    border: none;
    white-space: pre;
}

/* -- supervision : cartes de rapport côte à côte -- */

.ai-page .supervision-grid {
    display: grid;
    /* 460 px : en deçà, un tableau de quatre colonnes serre ses libellés au
       point de les abréger. Sur un écran courant cela fait deux cartes par
       rangée plutôt que trois — moins dense, et lisible. */
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: var(--sp-4);
    align-items: stretch;
}

/* -- notifications -- */

.ai-page .notification-list { display: flex; flex-direction: column; }

.ai-page .notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
}

.ai-page .notification-item:last-child { border-bottom: none; }

.ai-page .notification-unread {
    background: var(--warn-bg);
    border-left: 3px solid #e08a2e;
    padding-left: var(--sp-3);
    margin: 0 calc(-1 * var(--sp-3));
    padding-right: var(--sp-3);
}

.ai-page .notification-icon { color: var(--ink-faint); padding-top: 2px; }
.ai-page .notification-unread .notification-icon { color: #b9770e; }
.ai-page .notification-body { flex: 1; min-width: 0; }
.ai-page .notification-action { flex-shrink: 0; }

/* -- habilitations repliées, dans le tableau des boîtes -- */

.ai-page .authorisation-cell summary {
    cursor: pointer;
    font-size: var(--fs-meta);
}

.ai-page .authorisation-cell form {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-width: 210px;
}

.ai-page .checkbox-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    margin-bottom: 4px;
    cursor: pointer;
}

/* -- listes de définition (qualification, réglages) -- */

.ai-page dl.qualification {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-4) 0 0;
}

.ai-page dl.qualification dt {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faint);
    font-weight: 650;
    margin-bottom: 3px;
}

.ai-page dl.qualification dd { margin: 0; font-weight: 600; font-size: var(--fs-base); }

/* Chaque service est repliable : dix services dépliés font une page de
   plusieurs milliers de pixels. L'en-tête reste cliquable sur toute sa
   largeur, et le chevron natif est remplacé par un indicateur discret. */
.ai-page details.integration-card > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ai-page details.integration-card > summary::-webkit-details-marker { display: none; }

.ai-page details.integration-card > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--ink-faint);
    transition: transform 0.15s ease;
    align-self: center;
}

.ai-page details.integration-card[open] > summary::after { transform: rotate(180deg); }
.ai-page details.integration-card > summary:hover { background: #eef2f6; }

/* ==========================================================================
   Installation guidée
   ==========================================================================
   Une liste de huit réglages également mis en valeur ne dit pas par où
   commencer. Une seule chose est mise en avant : la suivante.
   -------------------------------------------------------------------------- */

.ai-page .setup-progress {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.ai-page .setup-progress-bar {
    flex: 1;
    height: 7px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.ai-page .setup-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-soft), var(--brand));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.ai-page .setup-progress-label {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    white-space: nowrap;
}

.ai-page .setup-progress-label strong { color: var(--brand); font-size: var(--fs-base); }

/* L'étape suivante : la seule chose saillante de la page. */
.ai-page .next-step {
    border-left: 3px solid var(--brand-soft);
    background: linear-gradient(180deg, #f4fbfb 0%, var(--surface) 60%);
}

.ai-page .next-step-tag {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--brand-soft);
    margin-bottom: var(--sp-2);
    /* Ne jamais couper cette étiquette.

       `.card` porte `overflow-wrap: anywhere` — utile pour un mot
       interminable, désastreux ici : la valeur rend le minimum d'un élément
       égal à **un caractère**, si bien que le flex l'a comprimée à 37 px et
       qu'on lisait « PROC HAIN E ÉTAP E ». Le défaut dormait depuis
       toujours ; il s'est réveillé quand le titre de l'étape s'est allongé,
       serrant assez la rangée pour que la compression commence. */
    white-space: nowrap;
    flex: 0 0 auto;
    overflow-wrap: normal;
}
/* Un titre d'étape se coupe entre les mots, pas dedans. */
.ai-page .next-step h2 { overflow-wrap: break-word; }

.ai-page .next-step h2 { margin-bottom: var(--sp-2); }
.ai-page .next-step-why { margin: 0 0 var(--sp-3); font-size: var(--fs-base); color: var(--ink); }

.ai-page .next-step-consequence {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--warn);
    line-height: 1.55;
    max-width: 78ch;
}

/* Liste des étapes */
.ai-page .setup-list { list-style: none; margin: 0; padding: 0; }

.ai-page .setup-step {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
}

.ai-page .setup-step:last-child { border-bottom: none; }

.ai-page .setup-mark {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    background: var(--surface-sunken);
    color: var(--ink-faint);
    border: 1px solid var(--line-strong);
}

.ai-page .setup-step.is-fait .setup-mark {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.ai-page .setup-step.is-partiel .setup-mark {
    background: var(--warn-bg);
    border-color: #f0dcb4;
    color: var(--warn);
}

.ai-page .setup-body { flex: 1; min-width: 0; }

.ai-page .setup-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--fs-base);
    font-weight: 640;
    color: var(--ink);
    margin-bottom: 3px;
}

.ai-page .setup-step.is-fait .setup-title { color: var(--ink-soft); }
.ai-page .setup-why { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }

.ai-page .setup-consequence {
    font-size: var(--fs-sm);
    color: var(--warn);
    line-height: 1.55;
    margin-top: 5px;
    max-width: 82ch;
}

.ai-page .setup-action { flex-shrink: 0; }

/* Compléments facultatifs */
.ai-page .optional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3);
}

.ai-page .optional-item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    background: var(--surface);
}

.ai-page .optional-item.is-done { background: var(--surface-sunken); }

.ai-page .optional-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.ai-page .optional-item p {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.5;
}

.ai-page .optional-consequence { color: var(--ink-faint); font-size: var(--fs-meta); }

/* ==========================================================================
   Ergonomie sur toute largeur
   ==========================================================================

   L'outil se consulte sur des écrans très différents : un poste de bureau
   large, un portable de 13 pouces avec la barre latérale ouverte — soit
   environ 1 000 px utiles — et un téléphone en déplacement.

   Le point de rupture réel n'est pas la taille de l'écran mais la largeur
   *restante* : sur un portable, la barre latérale en consomme 260. Les
   seuils ci-dessous sont donc choisis sur ce qui reste au contenu, pas sur
   des tailles d'appareil théoriques.
   -------------------------------------------------------------------------- */

/* -- portable 13 pouces, barre latérale ouverte -- */
@media (max-width: 1200px) {
    .ai-page .setup-step {
        flex-wrap: wrap;
    }
    /* Le bouton passe sous le texte plutôt que de le comprimer : une
       description tronquée fait perdre l'information qui justifie l'action. */
    .ai-page .setup-action {
        width: 100%;
        padding-left: 42px;
    }
    .ai-page .optional-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* -- tablette et fenêtre étroite -- */
@media (max-width: 900px) {
    .ai-page .page-header { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .ai-page .page-header form,
    .ai-page .page-header .btn { width: 100%; }
    .ai-page .setup-progress { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
    .ai-page .setup-progress-label { text-align: right; }
    .ai-page .month-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .ai-page .integration-head { flex-direction: column; gap: var(--sp-2); }
    .ai-page .recommendation { flex-direction: column; }
    .ai-page .recommendation-actions { width: 100%; }
    .ai-page .supervision-grid { grid-template-columns: minmax(0, 1fr); }
    .ai-page .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- téléphone -- */
@media (max-width: 640px) {
    .ai-page { --fs-title: 1.25rem; }
    .ai-page .card { padding: var(--sp-4) var(--sp-3); }
    .ai-page .month-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-page .stat-value { font-size: 1.3rem; }
    .ai-page .optional-grid { grid-template-columns: minmax(0, 1fr); }
    .ai-page .config-links { grid-template-columns: minmax(0, 1fr); }
    .ai-page .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    .ai-page .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .ai-page .filter-tab { flex-shrink: 0; }
    .ai-page .setup-consequence,
    .ai-page .next-step-consequence { font-size: var(--fs-meta); }
    /* Les tableaux restants défilent horizontalement plutôt que d'écraser
       leurs colonnes : une valeur illisible ne vaut pas mieux qu'absente. */
    .ai-page .table-container { -webkit-overflow-scrolling: touch; }
}

/* Aucune page ne doit provoquer de défilement horizontal du corps : c'est
   le défaut le plus visible et le plus facile à introduire. */
.ai-page { max-width: 100%; overflow-x: hidden; }

/* Toute page du module est centrée et s'arrête à une largeur lisible ;
   un lien y est de la couleur de la marque, sans soulignement hors survol. */
.ai-page { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* :where() : spécificité nulle, pour que tout style de lien déjà écrit
   (onglet actif, bouton, sujet d'un dossier) garde la main. */
:where(.ai-page a) { color: var(--brand); text-decoration: none; }
:where(.ai-page a:hover) { text-decoration: underline; }
:where(.ai-page .btn, .ai-page .btn:hover, .ai-page a.finding, .ai-page a.finding:hover) { text-decoration: none; }
.ai-page .table-container,
.ai-page pre,
.ai-page .code-block { max-width: 100%; }

/* Affinage des fiches de la file sur téléphone. */
@media (max-width: 860px) {
    /* L'objet du dossier se passe d'étiquette : il est en gras, en tête, et
       c'est le seul texte de cette taille. */
    .ai-page .queue-table td[data-label="Dossier"]::before { content: none; }

    .ai-page .queue-table td { padding: 3px 0; }
    .ai-page .queue-table tbody td { height: auto; }

    /* En hauteur libre, la ligne de contexte peut passer à la ligne : sur
       téléphone la régularité des hauteurs n'a plus d'utilité, alors que
       lire le numéro de police en entier en a une. */
    .ai-page .queue-meta {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 4px;
    }
    .ai-page .queue-subject { -webkit-line-clamp: 3; }

    /* Le regroupement des faits secondaires vit dans le bloc 1150 px :
       il vaut pour toute la plage où la file se rend en fiches. */
}

/* ==========================================================================
   Supervision — des cartes qui ne se chevauchent pas
   ==========================================================================
   Un tableau plus large que sa carte débordait et sa dernière colonne se
   retrouvait coupée par le bord. Deux garde-fous, l'un dans le gabarit
   (chaque tableau dans un conteneur), l'autre ici : plus rien ne peut
   dépasser d'une carte, quelle que soit la largeur de fenêtre.
   -------------------------------------------------------------------------- */

/* Aucune carte ne rogne son contenu : c'est la carte qui s'adapte au texte,
   pas l'inverse. Seuls les tableaux, qui peuvent être arbitrairement larges,
   défilent à l'intérieur de leur conteneur. */
/* Les cartes d'une même rangée ont la même hauteur, mais leur contenu reste
   en haut. Une première version les alignait par le bas (`margin-top:auto`),
   ce qui creusait un vide sous le titre des cartes les plus courtes. */
.ai-page .supervision-grid { align-items: stretch; }

/* Un tableau ne dépasse jamais sa carte : il défile à l'intérieur. */
.ai-page .card .data-table { width: 100%; }
.ai-page .card .table-container { max-width: 100%; overflow-x: auto; }

/* Dans une carte étroite, un tableau à quatre colonnes n'a pas de place à
   perdre : le libellé prend ce qu'il lui faut et pas plus, les colonnes
   chiffrées se serrent. Une largeur fixe de 45 % sur la première colonne
   écrasait les suivantes et coupait la dernière. */
.ai-page .supervision-grid .data-table { table-layout: auto; }

.ai-page .supervision-grid .data-table th,
.ai-page .supervision-grid .data-table td {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
}

.ai-page .supervision-grid .data-table th:first-child,
.ai-page .supervision-grid .data-table td:first-child { width: auto; }

/* La dernière colonne garde sa marge intérieure. Elle avait été mise à zéro
   pour gagner de la place quand les cartes étaient étroites : la valeur
   venait alors coller au bord du tableau, sans respiration. Les cartes sont
   désormais assez larges pour ne pas avoir à l'économiser. */

/* Colonnes chiffrées : juste assez pour « 100 % » ou « 252 min ». */
.ai-page .supervision-grid .data-table .num { width: 1%; white-space: nowrap; }

.ai-page .motif-list { list-style: none; margin: 0; padding: 0; }

.ai-page .motif-list li {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
}

.ai-page .motif-list li:last-child { border-bottom: none; }
.ai-page .motif-list strong { color: var(--brand); font-variant-numeric: tabular-nums; }

/* Aucun texte n'est tronqué dans une carte : un mot trop long se coupe
   plutôt que de déborder, et la carte grandit pour le contenir. */
.ai-page .card,
.ai-page .stat-card,
.ai-page .optional-item,
.ai-page .config-link {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Les paragraphes explicatifs cessent d'être bridés dans une carte étroite :
   la limite de lisibilité ne doit pas créer de colonne maigre. */
.ai-page .card-note,
.ai-page .setup-why,
.ai-page .setup-consequence { max-width: none; }

/* Une carte grandit avec son contenu ; elle ne le comprime jamais. */
.ai-page .supervision-grid > .card { min-width: 0; height: auto; }

/* Dans une carte à deux colonnes — un libellé, une valeur — la valeur est
   toujours à droite, même sans classe explicite. Un seul chiffre aligné
   autrement que ses voisins se remarque immédiatement, et rien ne le
   justifie. */
.ai-page .supervision-grid .data-table td:last-child,
.ai-page .card > table.data-table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sauf le libellé lui-même quand la ligne n'a qu'une cellule. */
.ai-page .data-table td:only-child { text-align: left; }

/* ==========================================================================
   Aperçu avant exécution
   ==========================================================================
   Rien ne s'exécute sans que le gestionnaire ait vu ce qui sera fait — et ce
   qui ne le sera pas. La séparation entre les deux est le cœur du panneau :
   confondre « c'est fait » et « il vous reste à le faire » ferait croire
   qu'un acte est posé dans Brio alors qu'il ne l'est pas.
   -------------------------------------------------------------------------- */

.ai-page .do-it-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border: 1px solid #bfe4e5;
    background: linear-gradient(135deg, #f0fafa 0%, #ffffff 70%);
    border-radius: var(--r-md);
}

.ai-page .do-it-bar strong { display: block; color: var(--brand); font-size: var(--fs-base); }
.ai-page .do-it-bar span { font-size: var(--fs-sm); color: var(--ink-soft); }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 34, 0.55);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-backdrop.is-open { display: flex; }

.modal-panel {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(10, 22, 34, 0.3);
    animation: modal-in 0.16s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e3e9ee;
}

.modal-head h2 { margin: 0; font-size: 1.05rem; font-weight: 640; color: #123A63; }
.modal-body { padding: 20px 22px; overflow-y: auto; }

.plan-block { margin-bottom: 20px; }
.plan-block:last-child { margin-bottom: 0; }

.plan-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.plan-auto .plan-head { color: #1e7f4f; }
.plan-manual .plan-head { color: #b9770e; }

.plan-block ul { margin: 0; padding-left: 20px; }

.plan-block li {
    font-size: 0.86rem;
    line-height: 1.75;
    color: #17222e;
}

.plan-auto li::marker { color: #1e7f4f; }
.plan-manual li::marker { color: #b9770e; }

.plan-note { font-size: 0.75rem; color: #8a99a8; margin: 0 0 8px; line-height: 1.5; }

.plan-path {
    display: block;
    font-size: 0.72rem;
    color: #1c4f70;
    background: #f2f7fb;
    border: 1px solid #dbe8f2;
    border-radius: 5px;
    padding: 2px 7px;
    margin-top: 3px;
    width: fit-content;
}

.modal-body input[type="number"] {
    width: 68px;
    padding: 3px 7px;
    border: 1px solid #cfd8e0;
    border-radius: 5px;
    font-size: 0.85rem;
    font-family: inherit;
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 22px;
    border-top: 1px solid #e3e9ee;
    background: #f6f8fa;
    border-radius: 0 0 14px 14px;
}

.modal-foot .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid #cfd8e0;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.modal-foot .btn-primary { background: #123A63; border-color: #123A63; color: #fff; }

@media (max-width: 640px) {
    .modal-panel { max-height: 92vh; }
    .modal-foot { flex-direction: column-reverse; }
    .modal-foot .btn, .modal-foot form { width: 100%; }
    .modal-foot .btn-primary { width: 100%; justify-content: center; }
}

/* ==========================================================================
   File volumineuse : recherche, filtres, pagination
   --------------------------------------------------------------------------
   Quarante boîtes courtier produisent une file qui se compte en milliers.
   Trois conséquences de mise en page :

   * la barre de filtres se replie en colonne sous 720 px, mais la recherche
     garde toute la largeur — c'est le champ qu'on utilise en premier ;
   * la pagination reste atteignable au pouce (44 px de cible tactile) ;
   * aucun conteneur ne défile verticalement de lui-même : un défilement
     imbriqué sur une longue liste est le meilleur moyen de perdre sa place.
   ========================================================================== */

.ai-page .queue-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.ai-page .queue-search {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.ai-page .queue-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ai-text-muted, #8a94a6);
    font-size: 13px;
    pointer-events: none;
}

.ai-page .queue-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--ai-surface, #fff);
    color: inherit;
}

.ai-page .queue-search input:focus {
    outline: none;
    border-color: var(--ai-accent, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14);
}

.ai-page .queue-filters select {
    padding: 9px 10px;
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--ai-surface, #fff);
    color: inherit;
    max-width: 190px;
}

/* Pagination ------------------------------------------------------------- */

.ai-page .pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.ai-page .pager-status {
    font-size: 13px;
    color: var(--ai-text-muted, #6b7280);
}

.ai-page .pager-status-alone {
    margin-top: 14px;
    text-align: right;
}

.ai-page .pager-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.ai-page .pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: inherit;
    background: var(--ai-surface, #fff);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.ai-page a.pager-link:hover {
    background: var(--ai-surface-alt, #f4f6fa);
    border-color: var(--ai-accent, #2f6fed);
}

.ai-page .pager-link.is-current {
    background: var(--ai-accent, #2f6fed);
    border-color: var(--ai-accent, #2f6fed);
    color: #fff;
    font-weight: 600;
}

.ai-page .pager-link.is-disabled {
    opacity: 0.4;
    cursor: default;
}

.ai-page .pager-gap {
    padding: 0 2px;
    color: var(--ai-text-muted, #8a94a6);
}

@media (max-width: 720px) {
    .ai-page .queue-filters select { max-width: none; flex: 1 1 140px; }
    .ai-page .queue-search { flex: 1 1 100%; }
    .ai-page .pager { justify-content: center; }
    .ai-page .pager-status { width: 100%; text-align: center; }
}

/* ==========================================================================
   Bandeau de prise de vue « en tant que »
   --------------------------------------------------------------------------
   Hors `.ai-page` — c'est la seule exception au cloisonnement du style, et
   elle est délibérée : le bandeau doit apparaître sur toutes les pages de
   WikiDesk, y compris celles qui ignorent le module. Il ne modifie rien
   d'existant, il s'ajoute au-dessus.
   ========================================================================== */

.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 9px 16px;
    background: #92400e;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.impersonation-bar strong { font-weight: 700; }

.impersonation-bar form { margin: 0; }

.impersonation-bar button {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.impersonation-bar button:hover {
    background: rgba(255, 255, 255, 0.26);
}

@media (max-width: 560px) {
    .impersonation-bar { justify-content: space-between; text-align: left; }
}

/* ==========================================================================
   Essai de mail et guide de branchement
   ========================================================================== */

.ai-page .trial-samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.ai-page .trial-sample {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--ai-surface, #fff);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ai-page .trial-sample:hover { border-color: var(--ai-accent, #2f6fed); }

.ai-page .trial-sample.is-chosen {
    border-color: var(--ai-accent, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.14);
}

.ai-page .trial-sample strong { display: block; margin-bottom: 4px; font-size: 14px; }

.ai-page .trial-sample span {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ai-text-muted, #6b7280);
}

.ai-page .trial-result { border-left: 3px solid var(--ai-accent, #2f6fed); }

.ai-page .trial-steps { list-style: none; margin: 0; padding: 0; }

.ai-page .trial-step {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ai-border-soft, #eef1f5);
}

.ai-page .trial-step:last-child { border-bottom: none; }

.ai-page .trial-step p {
    margin: 3px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ai-text-muted, #55606f);
}

.ai-page .trial-mark {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.ai-page .trial-step.is-ok .trial-mark { background: #16a34a; }
.ai-page .trial-step.is-warn .trial-mark { background: #d97706; }

.ai-page .trial-explainer { padding-left: 20px; margin: 0; }

.ai-page .trial-explainer li {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Guide de branchement --------------------------------------------------- */

.ai-page .guide-step {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ai-border-soft, #eef1f5);
}

.ai-page .guide-step:last-child { border-bottom: none; }

.ai-page .guide-number {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ai-accent, #2f6fed);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-page .guide-body { min-width: 0; flex: 1; }

.ai-page .guide-body h3 { margin: 2px 0 6px; font-size: 15px; }

.ai-page .guide-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }

.ai-page .guide-body code {
    display: block;
    padding: 8px 10px;
    margin: 6px 0;
    background: var(--ai-surface-alt, #f4f6fa);
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 6px;
    font-size: 12.5px;
    overflow-x: auto;
    white-space: pre;
}

.ai-page .guide-note {
    padding: 10px 12px;
    border-left: 3px solid #d97706;
    background: rgba(217, 119, 6, 0.07);
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0 6px 6px 0;
}

.ai-page .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.ai-page .inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.ai-page tr.is-reverted { opacity: 0.62; }
.ai-page tr.is-reverted strong { text-decoration: line-through; }

/* ==========================================================================
   Aide contextuelle des champs de réglage
   --------------------------------------------------------------------------
   Repliée par défaut : un écran de configuration où chaque champ porte un
   paragraphe devient illisible, et l'on cesse alors de lire les paragraphes
   qui comptent. Le bouton « Afficher toute l'aide » sert la première fois.

   `<details>` natif : accessible au clavier, imprimable, et fonctionnel même
   si le script de la page échoue.
   ========================================================================== */

.ai-page .field-guide {
    margin-top: 6px;
    font-size: 12.5px;
}

.ai-page .field-guide > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--ai-accent, #2f6fed);
    list-style: none;
    padding: 2px 0;
    user-select: none;
}

/* La flèche par défaut de Safari et Chrome n'est pas retirée par
   list-style seul. */
.ai-page .field-guide > summary::-webkit-details-marker { display: none; }

.ai-page .field-guide > summary:hover { text-decoration: underline; }

.ai-page .field-guide > summary:focus-visible {
    outline: 2px solid var(--ai-accent, #2f6fed);
    outline-offset: 2px;
    border-radius: 4px;
}

.ai-page .field-guide[open] > summary { margin-bottom: 6px; }

.ai-page .field-guide-body {
    padding: 10px 12px;
    border-left: 3px solid var(--ai-accent, #2f6fed);
    background: var(--ai-surface-alt, #f4f6fa);
    border-radius: 0 8px 8px 0;
    line-height: 1.55;
}

.ai-page .field-guide-body p { margin: 0 0 7px; }
.ai-page .field-guide-body p:last-child { margin-bottom: 0; }

.ai-page .field-guide-what { font-weight: 600; }

.ai-page .field-guide-risk {
    padding: 7px 9px;
    background: rgba(217, 119, 6, 0.09);
    border-radius: 6px;
}

.ai-page .field-guide-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    font-size: 12px;
    color: var(--ai-text-muted, #6b7280);
}

.ai-page .field-guide-example code {
    padding: 1px 6px;
    background: var(--ai-surface, #fff);
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 4px;
}

.ai-page .field-guide-ref { font-style: italic; }

@media print {
    /* À l'impression, l'aide repliée n'existerait pas sur le papier. */
    .ai-page .field-guide[data-guide] > .field-guide-body { display: block; }
}

.ai-page .field-guide-group { margin: 0 0 14px; font-size: 13px; }

.ai-page .field-guide-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ai-border, #dfe3ea);
}

.ai-page .field-guide-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.ai-page .sample-block {
    padding: 11px 13px;
    margin: 0 0 12px;
    background: var(--ai-surface-alt, #f4f6fa);
    border: 1px solid var(--ai-border, #dfe3ea);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    color: var(--ai-text-muted, #55606f);
}

/* ==========================================================================
   Constats : ce qui demande une action
   --------------------------------------------------------------------------
   Une carte cliquable dans son entier, pas un encart avec un lien dedans :
   le constat *est* l'action. Le liseré de gauche porte la gravité, ce qui
   évite une colonne « priorité » répétant le même mot sur chaque ligne.
   ========================================================================== */

.ai-page .finding {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--ai-border, #dfe3ea);
    border-left: 4px solid var(--ai-text-muted, #8a94a6);
    border-radius: 10px;
    background: var(--ai-surface, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ai-page .finding:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.ai-page .finding.is-urgent { border-left-color: #dc2626; }
.ai-page .finding.is-important { border-left-color: #d97706; }

.ai-page .finding-count {
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.ai-page .finding.is-urgent .finding-count { color: #dc2626; }
.ai-page .finding.is-important .finding-count { color: #d97706; }

.ai-page .finding-body { flex: 1 1 auto; min-width: 0; }
.ai-page .finding-body strong { display: block; font-size: 14.5px; }

.ai-page .finding-body span {
    font-size: 13px;
    color: var(--ai-text-muted, #6b7280);
}

.ai-page .finding-action {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-accent, #2f6fed);
    white-space: nowrap;
}

/* Le dossier suivant ------------------------------------------------------ */

.ai-page .next-dossier { border-top: 3px solid var(--ai-accent, #2f6fed); }

.ai-page .next-dossier-tag {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    background: var(--ai-accent, #2f6fed);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ai-page .next-dossier h2 { margin: 0 0 8px; font-size: 19px; }
.ai-page .next-dossier h2 a { color: inherit; text-decoration: none; }
.ai-page .next-dossier h2 a:hover { text-decoration: underline; }

.ai-page .next-dossier-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 13px;
    color: var(--ai-text-muted, #6b7280);
    margin-bottom: 10px;
}

.ai-page .next-dossier-summary {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--ai-surface-alt, #f4f6fa);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 14px;
}

/* Barre de charge --------------------------------------------------------- */

.ai-page .load-bar {
    display: inline-block;
    vertical-align: middle;
    width: 96px;
    height: 8px;
    border-radius: 999px;
    background: var(--ai-surface-alt, #eef1f5);
    overflow: hidden;
}

.ai-page .load-fill {
    height: 100%;
    background: #16a34a;
    border-radius: 999px;
}

.ai-page .load-fill.is-high { background: #d97706; }
.ai-page .load-fill.is-over { background: #dc2626; }

.ai-page .load-label {
    margin-left: 8px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .ai-page .finding { flex-wrap: wrap; }
    .ai-page .finding-action { width: 100%; text-align: right; }
}

/* Filtre venu d'un constat : arriver sur une file réduite sans savoir
   pourquoi est aussi déroutant qu'une file vide. */
.ai-page .active-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(47, 111, 237, 0.08);
    border: 1px solid rgba(47, 111, 237, 0.25);
    font-size: 13.5px;
}

.ai-page .active-filter i { color: var(--ai-accent, #2f6fed); }
.ai-page .active-filter span { flex: 1 1 auto; }
.ai-page .active-filter a { font-weight: 600; white-space: nowrap; }

/* Traduction du mail : les langues à droite de l'en-tête, la traduction
   au-dessus de l'original — jamais à sa place. */
.ai-page h2 .translate-bar { font-weight: 400; font-size: 13px; }

.ai-page .translate-bar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}
.ai-page .translate-bar form { margin: 0; }

.ai-page .translated {
    margin: 10px 0 12px;
    border: 1px solid rgba(47, 111, 237, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.ai-page .translated-tag {
    padding: 6px 12px;
    background: rgba(47, 111, 237, 0.1);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ai-accent, #2f6fed);
}

.ai-page .translated .mail-body { margin: 0; }

/* Constats de facturation : le montant en jeu à droite, parce que c'est lui
   qui décide de l'ordre dans lequel on traite. */
.ai-page .issue { border-left: 4px solid var(--ai-text-muted, #8a94a6); }
.ai-page .issue.is-grave { border-left-color: #dc2626; }
.ai-page .issue.is-attention { border-left-color: #d97706; }

.ai-page .issue-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ai-page .issue-head h2 { margin: 0 0 4px; font-size: 16px; }
.ai-page .issue-head p { margin: 0; font-size: 13.5px; line-height: 1.55; }

.ai-page .issue-figure {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.ai-page .issue.is-grave .issue-figure strong { color: #dc2626; }
.ai-page .issue.is-attention .issue-figure strong { color: #d97706; }

@media (max-width: 620px) {
    .ai-page .issue-head { flex-wrap: wrap; }
    .ai-page .issue-figure { margin-left: 0; text-align: left; }
}

/* Pourquoi ce gestionnaire : replié par défaut, la question ne se pose pas
   à chaque dossier — mais quand elle se pose, elle doit trouver réponse
   sans quitter l'écran. */
.ai-page .why-assigned { margin-top: 8px; font-size: 12.5px; }

.ai-page .why-assigned > summary {
    cursor: pointer;
    color: var(--ai-accent, #2f6fed);
    list-style: none;
    padding: 3px 0;
}
.ai-page .why-assigned > summary::-webkit-details-marker { display: none; }
.ai-page .why-assigned > summary:hover { text-decoration: underline; }

.ai-page .why-body {
    padding: 10px 12px;
    margin-top: 6px;
    background: var(--ai-surface-alt, #f4f6fa);
    border-radius: 8px;
}

.ai-page .why-factors { list-style: none; margin: 0 0 8px; padding: 0; }

.ai-page .why-factors li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.ai-page .why-label { flex: 0 0 130px; }

.ai-page .why-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--ai-border, #dfe3ea);
    overflow: hidden;
}
.ai-page .why-bar > span {
    display: block;
    height: 100%;
    background: var(--ai-accent, #2f6fed);
    border-radius: 999px;
}

.ai-page .why-value {
    flex: 0 0 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-page .why-others { margin: 0 0 6px; color: var(--ai-text-muted, #6b7280); }

/* Traduire prend plusieurs secondes : le dire évite le second clic. */
.ai-page .translate-progress {
    font-size: 12.5px;
    color: var(--ai-accent, #2f6fed);
    white-space: nowrap;
}
.ai-page .translate-bar button[disabled] { opacity: 0.5; cursor: default; }

/* ==========================================================================
   « Vous répondez au nom de … »
   --------------------------------------------------------------------------
   Le cabinet traite pour le compte du courtier : au téléphone comme par
   écrit, le gestionnaire parle au nom du courtier, jamais au sien. C'est
   donc la première chose à savoir en ouvrant un dossier — avant même la
   demande — et répondre au nom du mauvais courtier est une faute vis-à-vis
   du client, pas une maladresse d'affichage.
   ========================================================================== */

.ai-page .on-behalf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--ai-accent, #2f6fed);
    color: #fff;
}

.ai-page .on-behalf-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.ai-page .on-behalf-name {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
}

.ai-page .on-behalf-sep { opacity: 0.5; }

.ai-page .on-behalf-extra { font-size: 13.5px; opacity: 0.95; }
.ai-page .on-behalf-extra strong { font-weight: 600; }

@media (max-width: 560px) {
    .ai-page .on-behalf-sep { display: none; }
    .ai-page .on-behalf-extra { width: 100%; }
}

/* L'heure de réception est le seul fait dur de la ligne : le délai interne
   est un calcul, et se présente comme tel. */
.ai-page .next-dossier-when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
}
.ai-page .next-dossier-when > i { color: var(--ai-accent, #2f6fed); }

/* ------------------------------------------------------------------ */
/* Engagements : ce que le cabinet a promis                            */
/*                                                                     */
/* La citation est traitée comme une citation — filet à gauche, texte  */
/* en italique — parce que c'en est une : le texte exact envoyé au     */
/* client. La reformuler à l'écran, fût-ce par la mise en forme,       */
/* ferait relire autre chose que ce qu'on a écrit.                     */
/* ------------------------------------------------------------------ */

.ai-page .promise-quote {
    margin: 6px 0;
    padding: 6px 0 6px 12px;
    border-left: 3px solid var(--ai-border, #d9dee7);
    font-style: italic;
    color: var(--ai-text, #1f2733);
}

.ai-page .promise-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ai-page .promise-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
    font-weight: 600;
}
.ai-page .promise-form input[type="date"] { min-width: 160px; }

.ai-page .engagement-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--ai-border, #eef1f5);
    flex-wrap: wrap;
}
.ai-page .engagement-row:last-of-type { border-bottom: 0; }
.ai-page .engagement-row.is-closed { opacity: 0.6; }
.ai-page .engagement-body { flex: 1 1 320px; min-width: 0; }
.ai-page .engagement-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .ai-page .engagement-actions { width: 100%; }
    .ai-page .promise-form { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------ */
/* Mails à rattacher                                                   */
/* ------------------------------------------------------------------ */

.ai-page .unrouted-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--ai-border, #eef1f5);
}
.ai-page .unrouted-item:last-child { border-bottom: 0; }
.ai-page .unrouted-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.ai-page .unrouted-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.ai-page .unrouted-actions select { max-width: 260px; }
.ai-page .mail-body {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    font-size: 0.85rem;
    background: var(--ai-surface-alt, #f7f9fc);
    padding: 10px;
    border-radius: 6px;
}

/* Demande de pièces : deux colonnes sur large, empilées sur mobile. */
.ai-page .doc-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}
.ai-page .doc-references th {
    text-align: left;
    font-weight: 600;
    color: var(--ai-text-muted, #5a6675);
}
.ai-page .piece-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.ai-page .piece-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 6px 0;
    border-bottom: 1px solid var(--ai-border, #eef1f5);
}
.ai-page .piece-list li:last-child { border-bottom: 0; }
.ai-page .piece-list i { margin-top: 3px; opacity: 0.55; }

/* ------------------------------------------------------------------ */
/* Écran d'appel                                                       */
/*                                                                     */
/* En bas à droite, sans voile ni capture de focus : le téléphone      */
/* sonne pendant qu'on écrit, et perdre sa phrase pour un appel qu'on  */
/* n'a pas encore pris serait un mauvais échange.                      */
/* ------------------------------------------------------------------ */

.call-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: min(360px, calc(100vw - 40px));
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-left: 4px solid #2f6fed;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 30, 54, 0.18);
    padding: 14px 16px;
    font-size: 0.92rem;
    animation: call-in 0.18s ease-out;
}
@keyframes call-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.call-popup-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.call-popup-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2f6fed;
}
.call-popup-close {
    border: 0;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: #8a94a3;
    padding: 0 4px;
}
.call-popup-close:hover { color: #1f2733; }

.call-popup-behalf {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 6px;
}
.call-popup-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a94a3;
}
.call-popup-behalf strong { font-size: 1.12rem; color: #1f2733; }

.call-popup-number {
    font-variant-numeric: tabular-nums;
    color: #5a6675;
}
.call-popup-assure { font-weight: 600; margin-top: 4px; }
.call-popup-reason {
    font-size: 0.8rem;
    color: #8a94a3;
    margin-top: 4px;
}

.call-popup-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #eef1f5;
}
.call-popup-list li { padding: 3px 0; }
.call-popup-when { color: #8a94a3; font-size: 0.8rem; }

/* Le bouton qui mène au poste. Séparé de la liste des dossiers par un
   filet : c'est une action, pas une ligne de plus à lire. */
.call-popup-actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef1f5;
}
.call-popup-actions .btn { width: 100%; }

/* La transcription sous la fiche à encoder. Repliée par défaut : quinze
   minutes de conversation ne se lisent pas, on lit la synthèse. */
.encode-transcript { margin: 8px 0 4px; }
.encode-transcript > summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #5b6675;
}
.encode-transcript .mail-body { margin-top: 6px; max-height: 260px; overflow: auto; }

/* -- Le dossier : pour qui l'on travaille, en grand -----------------------
   Deux cellules de même poids — courtier, assuré — sous l'objet du mail.
   C'est ce qu'on lit avant le message, et c'est écrit assez grand pour
   qu'on n'ait pas à le chercher. */
.ai-page.dossier .ticket-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ai-page.dossier .ticket-head h1 { margin: 4px 0 14px; font-size: 1.35rem; }
.ai-page.dossier .ticket-identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}
.ai-page.dossier .ticket-identity > * { min-width: 0; }
.ai-page.dossier .identity-cell { display: flex; flex-direction: column; gap: 2px; }
.ai-page.dossier .identity-name {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: #1f2733;
    overflow-wrap: anywhere;
}
.ai-page.dossier .identity-sub { font-size: 0.88rem; color: #5b6675; }
.ai-page.dossier .identity-meta {
    grid-column: 1 / -1;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #8a94a3;
    padding-top: 8px;
    border-top: 1px solid #eef1f5;
}
.ai-page.dossier .card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ai-page.dossier .card-title-row h2 { margin: 0; }
.ai-page.dossier .card-title-sub { font-weight: 400; font-size: 0.85rem; color: #5b6675; margin-left: 8px; }
.ai-page.dossier .mail-card { border-left: 3px solid #2f6fed; }

/* La fiche du dossier : des lignes « Libellé : valeur », alignées, par
   groupe — Client, Contrat, ce qui est relevé dans le mail. Les champs se
   lisent comme des valeurs et se corrigent sur place. */
.ai-page.dossier .ticket-identity { margin: 0; }
.ai-page.dossier .identity-cell dt, .ai-page.dossier .identity-cell dd { margin: 0; }
.ai-page.dossier .identity-meta b { font-weight: 600; color: #5b6675; margin-right: 4px; }
.ai-page.dossier .fiche-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
    margin-top: 8px;
}
.ai-page.dossier .fiche-groups > * { min-width: 0; }
.ai-page.dossier .fiche-group-wide { grid-column: 1 / -1; }
.ai-page.dossier .fiche-group h3 {
    margin: 0 0 4px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #8a94a3;
}
.ai-page.dossier .fiche-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid #f1f4f8;
}
.ai-page.dossier .fiche-row > * { min-width: 0; }
.ai-page.dossier .fiche-row:last-child { border-bottom: 0; }
.ai-page.dossier .fiche-row label, .ai-page.dossier .fiche-label {
    font-size: 0.86rem; color: #5b6675;
}
.ai-page.dossier .fiche-row label::after, .ai-page.dossier .fiche-label:not(:empty)::after { content: ' :'; }
.ai-page.dossier .fiche-value { font-size: 0.95rem; color: #1f2733; overflow-wrap: anywhere; }
.ai-page.dossier .fiche-input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.95rem;
    color: #1f2733;
    background: transparent;
}
.ai-page.dossier .fiche-input:hover { border-color: #e3e7ee; background: #fff; }
.ai-page.dossier .fiche-input:focus { border-color: #2f6fed; background: #fff; outline: none; }
.ai-page.dossier .fiche-item .fiche-value { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ai-page.dossier .fiche-item-field { color: #5b6675; font-size: 0.85rem; }
.ai-page.dossier .fiche-item.is-pending .fiche-value > strong::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; margin-right: 6px; vertical-align: middle;
}
.ai-page.dossier .fiche-item-remove {
    border: 0; background: transparent; color: #8a94a3; font-size: 1.05rem;
    line-height: 1; cursor: pointer; padding: 0 4px;
}
.ai-page.dossier .fiche-item-remove:hover { color: #b91c1c; }
.ai-page.dossier .fiche-link { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
/* Encoder le temps : les durées d'un clic sous le champ. */
.duree-rapide { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* La fiche client s'ouvre par un bouton, pas un lien bleu souligné. */
.ai-page.dossier a.fiche-link.btn { text-decoration: none; }
.ai-page.dossier .identity-link { color: inherit; }
.ai-page.dossier .identity-link:hover { color: var(--brand); text-decoration: none; }
.ai-page .count-pill {
    display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
    background: var(--surface-sunken); color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; text-align: center;
}
.dossier-filtre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.dossier-filtre .form-control { flex: 1 1 240px; }
.filtre-chips { display: flex; gap: 6px; }
.filtre-chip {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.filtre-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.dossier-liste { list-style: none; margin: 0; padding: 0; }
.dossier-item {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dossier-item > * { min-width: 0; }
.dossier-item:last-child { border-bottom: 0; }
.dossier-item .dossier-sujet, .dossier-item .dossier-meta { grid-column: 1; }
.dossier-item .pill { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.ai-page.dossier .fiche-value { overflow-wrap: anywhere; }
.dossier-sujet { font-weight: 600; color: var(--ink); }
.dossier-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-soft); }
.chip { white-space: nowrap; }
.clients-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.clients-filter .form-control { width: auto; min-width: 200px; }

/* Le fil d'étapes : quatre numéros, l'étape en cours ouverte, les autres
   repliées en une ligne. Tout ce qui n'est pas le travail vit sous « Plus ». */
.ai-page.dossier { max-width: 980px; }
.ai-page.dossier .steps {
    display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; flex-wrap: wrap;
}
.ai-page.dossier .steps li a {
    display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 0.82rem;
    color: #5b6675; background: #eef1f5; text-decoration: none;
}
.ai-page.dossier .steps li.is-current a { background: #2f6fed; color: #fff; }
.ai-page.dossier .steps li.is-done a { background: #dcfce7; color: #166534; }
.ai-page.dossier details.step { margin-bottom: 10px; padding: 0; }
.ai-page.dossier details.step > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
}
.ai-page.dossier details.step > summary::-webkit-details-marker { display: none; }
.ai-page.dossier details.step[open] > summary { border-bottom: 1px solid #eef1f5; }
.ai-page.dossier .step-num {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: #eef1f5; color: #5b6675; font-weight: 700; font-size: 0.8rem;
}
.ai-page.dossier .step-num.is-done { background: #dcfce7; color: #166534; }
.ai-page.dossier details.step[open] .step-num:not(.is-done) { background: #2f6fed; color: #fff; }
.ai-page.dossier .step-title { font-weight: 650; color: #1f2733; }
.ai-page.dossier .step-state { margin-left: auto; font-size: 0.85rem; color: #5b6675; text-align: right; }
.ai-page.dossier .step-body { padding: 14px 18px 18px; }
.ai-page.dossier .step-body .mail-card { border-left: 3px solid #2f6fed; padding-left: 12px; margin-bottom: 14px; }
.ai-page.dossier .step-body .mail-card h2 { font-size: 0.95rem; margin: 0; }
.ai-page.dossier .synthesis { margin: 0 0 14px; color: #1f2733; }
.ai-page.dossier .mail-more > summary { cursor: pointer; color: #2f6fed; font-size: 0.85rem; }
.ai-page.dossier .promises { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.ai-page.dossier .cloturer-body { display: flex; flex-direction: column; gap: 12px; }
.ai-page.dossier .cloturer-facts { display: flex; gap: 18px; flex-wrap: wrap; color: #5b6675; font-size: 0.9rem; }
.ai-page.dossier .cloturer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ai-page.dossier .step-more > summary .step-num { background: transparent; color: #8a94a3; font-size: 1rem; }
.ai-page.dossier .more-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px;
}
.ai-page.dossier .more-grid > * { min-width: 0; }
.ai-page.dossier .more-grid h3 {
    margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #8a94a3;
}

/* Répondre : on choisit d'abord, on relit ensuite. */
.ai-page.dossier .reply-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.ai-page.dossier .reply-choices > * { min-width: 0; }
.ai-page.dossier .reply-choice {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid #e3e7ee; border-radius: 10px;
    background: #fff; text-align: left; cursor: pointer; font: inherit; color: #1f2733;
}
.ai-page.dossier .reply-choice:hover:not(:disabled) { border-color: #2f6fed; }
.ai-page.dossier .reply-choice:disabled { opacity: 0.55; cursor: default; }
.ai-page.dossier .reply-choice.is-pieces { border-color: #f59e0b; background: #fffbeb; }
.ai-page.dossier .reply-choice span { font-size: 0.85rem; color: #5b6675; }
.ai-page.dossier .reply-legend { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a94a3; margin: 6px 0 4px; }
.ai-page.dossier .reply-advanced { margin-top: 8px; font-size: 0.85rem; color: #5b6675; }
.ai-page.dossier .reply-advanced > summary { cursor: pointer; color: #2f6fed; }
.ai-page.dossier .reply-advanced ul { margin: 6px 0 0; padding-left: 18px; }

.ai-page.dossier .fiche-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef1f5;
}
.ai-page.dossier .fiche-pending { font-size: 0.85rem; color: #b45309; display: inline-flex; align-items: center; gap: 6px; }
.ai-page.dossier .fiche-pending .dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.ai-page.dossier .fiche-add { margin-left: auto; font-size: 0.85rem; }
.ai-page.dossier .fiche-add > summary { cursor: pointer; color: #2f6fed; }
.ai-page.dossier .fiche-add-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ai-page.dossier .fiche-add-row .form-control { width: auto; min-width: 140px; }
@media (max-width: 720px) {
    .ai-page.dossier .fiche-groups { grid-template-columns: minmax(0, 1fr); }
    .ai-page.dossier .fiche-row { grid-template-columns: 100px minmax(0, 1fr) auto; }
}

/* -- Aujourd'hui : une liste de ce qu'il y a à faire ----------------------
   Une seule colonne, bornée en largeur : une liste se lit de haut en bas.
   Trois cartes, toujours dans le même ordre — à faire, ensuite, fait. */
.ai-page.jour { max-width: 860px; }
.ai-page.jour .jour-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--sp-5);
}
.ai-page.jour .jour-head h1 { margin: 2px 0 0; font-size: 1.5rem; }
.ai-page.jour .card > h2 { margin: 0 0 12px; font-size: 1rem; }

.todo-list { list-style: none; margin: 0; padding: 0; }
.todo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
}
.todo:last-child { border-bottom: 0; }
.todo-rank {
    flex: 0 0 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef1f5;
    color: #5b6675;
    font-weight: 700;
    font-size: 0.85rem;
}
.todo.is-urgent .todo-rank { background: #fee2e2; color: #b91c1c; }
.todo.is-important .todo-rank { background: #fef3c7; color: #b45309; }
.todo-body { flex: 1 1 auto; min-width: 0; }
.todo-text { display: block; font-size: 0.98rem; }
.todo-detail { display: block; margin-top: 2px; font-size: 0.85rem; color: #5b6675; }
.todo .btn { flex: 0 0 auto; white-space: nowrap; }

.jour-libre-text { margin: 0 0 12px; color: #5b6675; }
.jour-libre-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.jour-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 0;
}
.jour-chiffres > * { min-width: 0; }
.jour-chiffres > div {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
    border: 1px solid #e3e9ee; border-radius: 6px; background: #f6f8fa;
}
.jour-chiffres dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a94a3; }
.jour-chiffres dd { margin: 2px 0 0; font-size: 1.4rem; font-weight: 650; color: #1f2733; text-align: left; }

@media (max-width: 560px) {
    .todo { flex-wrap: wrap; }
    .todo .btn { margin-left: 44px; }
}

/* Les postes : un métier, un clic. */
.poste-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
/* Un élément de grille vaut `min-width: auto` et refuse de rétrécir sous
   son contenu : un libellé long se superposerait à la carte voisine. */
.poste-grid > * { min-width: 0; }
.poste-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    background: #fff;
}
.poste-card.is-current { border-color: #2f6fed; box-shadow: inset 0 0 0 1px #2f6fed; }
.poste-card strong { font-size: 1rem; }
.poste-why { flex: 1 1 auto; font-size: 0.85rem; color: #5b6675; line-height: 1.45; }
.poste-card .btn { align-self: flex-start; margin-top: 4px; }

/* Ce qui s'est branché : une ligne par fait. */
.branchement-list { list-style: none; margin: 0; padding: 0; }
.branchement {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f5;
}
.branchement:last-child { border-bottom: 0; }
.branchement-mark { width: 1.2em; text-align: center; font-weight: 700; color: #8a94a3; }
.branchement.is-ok .branchement-mark { color: #15803d; }
.branchement-text { flex: 1 1 auto; }
details.card > summary { cursor: pointer; font-weight: 650; color: #1f2733; }

/* Chacun, ce matin : une phrase par personne. */
/* Chacun, ce matin : des cartes, pas des phrases. */
.equipe-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.equipe-grid > * { min-width: 0; }
.equipe-carte {
    display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--surface);
}
.equipe-carte.ton-danger { border-left: 3px solid var(--danger); }
.equipe-carte.ton-warn { border-left: 3px solid var(--warn); }
.equipe-carte.ton-ok { border-left: 3px solid var(--ok); }
.equipe-avatar {
    flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
    text-decoration: none; letter-spacing: 0.02em;
}
.equipe-avatar:hover { background: var(--brand-soft); text-decoration: none; }
.equipe-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.equipe-ligne1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.equipe-nom { font-weight: 650; color: var(--ink); text-decoration: none; }
.equipe-nom:hover { color: var(--brand); }
.equipe-poste { font-size: var(--fs-meta); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.equipe-vu { font-size: var(--fs-sm); color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.equipe-vu .presence { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.equipe-vu .presence.is-on { background: var(--ok); }
.equipe-chiffres { display: flex; gap: 12px; font-size: var(--fs-sm); color: var(--ink-soft); flex-wrap: wrap; }
.equipe-chiffres b { color: var(--ink); }
.equipe-etat { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: var(--fs-sm); background: var(--surface-sunken); color: var(--ink-soft);
}
.chip-danger { background: var(--danger-bg); color: var(--danger); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-ok { background: var(--ok-bg); color: var(--ok); }

/* Supervision : le tableau des personnes, et les rapports repliés. */
.equipe-cell { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.equipe-cell:hover { text-decoration: none; color: var(--brand); }
.equipe-cell > span:last-child { display: flex; flex-direction: column; }
.equipe-avatar-sm { flex-basis: 32px; width: 32px; height: 32px; font-size: var(--fs-sm); }
.equipe-table td { vertical-align: middle; }
.equipe-table tr.ton-danger td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.equipe-table tr.ton-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.stat-card.is-warn .stat-value { color: var(--warn); }
.ai-page details.rapport { padding: 0; margin-bottom: 12px; }
.ai-page details.rapport.card > summary,
.ai-page details.rapport > summary {
    list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 650; color: var(--ink);
    display: flex; align-items: center; gap: 10px; text-align: left; margin: 0;
}
.ai-page details.rapport.card > summary i { display: inline; font-size: 1em; margin: 0; }
.equipe-table td:first-child { white-space: nowrap; }
.equipe-table .equipe-presence { font-size: var(--fs-meta); color: var(--ink-faint); font-weight: 400; }
.equipe-table .equipe-presence .presence { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); margin-right: 4px; vertical-align: middle; }
.equipe-table .equipe-presence .presence.is-on { background: var(--ok); }
.equipe-table td.equipe-point { white-space: nowrap; }
.chip-action { margin-left: 8px; font-size: var(--fs-sm); white-space: nowrap; }
.equipe-table .equipe-cell strong { white-space: nowrap; }
/* Un pli qui ouvre un formulaire se présente comme un petit bouton, pas
   comme un lien bleu posé dans la page. */
.ai-page .promises .field-guide > summary,
.ai-page .pli > summary,
.ai-page .reply-advanced > summary {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-sm);
    color: var(--ink-soft); background: var(--surface); cursor: pointer; list-style: none;
}
.ai-page .promises .field-guide > summary::-webkit-details-marker,
.ai-page .pli > summary::-webkit-details-marker,
.ai-page .reply-advanced > summary::-webkit-details-marker { display: none; }
/* Un pli ouvert respire : sans cela son contenu colle au bouton qui vient
   de le déplier, et l'on ne voit plus lequel des deux on lit. */
.ai-page .pli { margin: var(--sp-3) 0; }
.ai-page .pli[open] > summary { margin-bottom: var(--sp-3); }
.ai-page .promises .field-guide > summary:hover,
.ai-page .reply-advanced > summary:hover { border-color: var(--brand); color: var(--brand); }
.ai-page details.rapport > summary::-webkit-details-marker { display: none; }
.ai-page details.rapport > summary i { color: var(--brand-soft); }
.ai-page details.rapport[open] > summary { border-bottom: 1px solid var(--line); }
.ai-page .rapport-hint { margin-left: auto; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-faint); }
.ai-page .rapport-body { padding: 14px 18px 18px; }
.ai-page .rapport-body h3 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 14px 0 6px; }
.ai-page .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.ai-page .two-col > * { min-width: 0; }
.ai-page .plain-list { list-style: none; margin: 0; padding: 0; }
.ai-page .plain-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }

/* La fiche d'une personne : en-tête, cellules, deux colonnes de cartes. */
.ai-page.personne .personne-head {
    display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; flex-wrap: wrap;
}
.ai-page.personne .personne-identite { flex: 1; min-width: 240px; }
.ai-page.personne .personne-identite h1 { margin: 0; font-size: var(--fs-title); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-page.personne .personne-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-page.personne .personne-sub .sep { color: var(--ink-faint); }
.ai-page.personne .presence { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ai-page.personne .presence.is-on { background: var(--ok); }
.ai-page.personne .presence.is-off { background: var(--danger); }
.equipe-avatar-lg { flex-basis: 56px; width: 56px; height: 56px; font-size: 1.1rem; }
.ai-page.personne .personne-etat { margin: 0; }
.ai-page.personne .personne-chiffres { margin-bottom: 16px; }
.ai-page.personne .personne-chiffres > div.is-due { border-color: var(--warn); background: var(--warn-bg); }
.ai-page.personne .personne-chiffres dd small { font-size: var(--fs-sm); font-weight: 500; color: var(--warn); margin-left: 4px; }
.ai-page.personne .personne-grid {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start;
}
.ai-page.personne .personne-grid > * { min-width: 0; }
.ai-page.personne .personne-main, .ai-page.personne .personne-side { display: flex; flex-direction: column; gap: 14px; }
.ai-page.personne .card { margin: 0; }
.ai-page.personne .card h2 { font-size: var(--fs-lg); margin: 0 0 10px; }
.ai-page.personne .gestes { list-style: none; margin: 0; padding: 0; }
.ai-page.personne .gestes li {
    display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 2px 12px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
}
.ai-page.personne .gestes li > * { min-width: 0; }
.ai-page.personne .gestes li:last-child { border-bottom: 0; }
.ai-page.personne .geste-quand { color: var(--ink-faint); font-size: var(--fs-sm); white-space: nowrap; grid-row: 1 / span 2; padding-top: 2px; }
.ai-page.personne .geste-quoi { font-weight: 600; color: var(--ink); }
.ai-page.personne .geste-objet { font-size: var(--fs-sm); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-page.personne .poste-actuel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ai-page.personne .poste-form { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ai-page.personne .poste-form select { flex: 1 1 auto; width: auto; min-width: 0; }
.ai-page.personne .poste-form .btn { flex: 0 0 auto; }
.ai-page.personne .modules-list li { padding: 3px 0; border-bottom: 0; font-size: var(--fs-sm); }
.ai-page.personne .modules-list i { color: var(--ok); margin-right: 6px; }
.ai-page.personne .side-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); flex-wrap: wrap; }
.ai-page.personne .side-pairs { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: var(--fs-sm); }
.ai-page.personne .side-pairs > * { min-width: 0; margin: 0; }
.ai-page.personne .side-pairs dt { color: var(--ink-faint); text-transform: uppercase; font-size: var(--fs-meta); letter-spacing: 0.05em; padding-top: 2px; }
.ai-page.personne .connexions { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.ai-page.personne .connexions li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ai-page.personne .connexions li:last-child { border-bottom: 0; }
.ai-page.personne .connexion-quand { color: var(--ink-faint); white-space: nowrap; }
.ai-page.personne .connexion-detail { color: var(--ink-soft); }
.chip-brand { background: #e8f0fb; color: var(--brand); }
@media (max-width: 900px) {
    .ai-page.personne .personne-grid { grid-template-columns: 1fr; }
}
/* Un titre de carte avec son bouton à droite, sur toute page du module. */
.ai-page .card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-page .card-title-row h2 { margin: 0; }

/* Configuration : des lignes — numéro, titre, pastille, bouton. */
.ai-page.configuration .regl-chiffres { margin-bottom: 16px; }
.ai-page.configuration .regl-chiffres > div.is-due { border-color: var(--warn); background: var(--warn-bg); }
.ai-page.configuration .regl-chiffres dd .chip { font-size: var(--fs-sm); }
.ai-page.configuration .regl-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.configuration .regl-ligne {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 12px 10px; border-bottom: 1px solid var(--line);
}
.ai-page.configuration .regl-ligne > * { min-width: 0; }
.ai-page.configuration .regl-ligne:last-child { border-bottom: 0; }
.ai-page.configuration .regl-ligne.is-current { background: #f3f7fd; box-shadow: inset 3px 0 0 var(--brand); border-radius: var(--r-sm); }
.ai-page.configuration .regl-ligne.is-done .regl-titre strong { color: var(--ink-soft); font-weight: 500; }
.ai-page.configuration .regl-ligne .step-num {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-sunken); color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm);
}
.ai-page.configuration .regl-ligne.is-current .step-num { background: var(--brand); color: #fff; }
.ai-page.configuration .regl-ligne .step-num.is-done { background: var(--ok-bg); color: var(--ok); }
.ai-page.configuration .regl-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-page.configuration .regl-detail { font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 2px; }
.ai-page.configuration .regl-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ai-page.configuration .regl-ok { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ai-page.configuration .regl-ok i { color: var(--ok); }
.ai-page.configuration .regl-band { margin: 0; }
.ai-page.configuration .regl-note { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--ink-soft); }
.ai-page.configuration .regl-foot { margin: 10px 0 0; }
.ai-page.configuration .rapport-body h3 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 12px 0 6px; }
.ai-page.configuration .rapport-body h3:first-child { margin-top: 0; }
.ai-page.configuration details.rapport { margin-bottom: 12px; }
/* Facturation : la période en pastilles, les totaux en cellules, les
   onglets comme le fil d'un dossier. Les sélecteurs sont doublés pour
   passer devant la feuille de style héritée, restée dans le gabarit. */
.ai-page.facturation.billing-page { max-width: 1180px; margin: 0 auto; }
.ai-page.facturation .period-selector { display: flex; gap: 6px; background: transparent; padding: 0; box-shadow: none; flex-wrap: wrap; }
.ai-page.facturation .period-btn {
    padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
    color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.ai-page.facturation .period-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-page.facturation .fact-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 14px; }
.ai-page.facturation .fact-chiffres > * { min-width: 0; }
.ai-page.facturation .fact-chiffres > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); }
.ai-page.facturation .fact-chiffres dd { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--ink); text-align: left; }
.ai-page.facturation .fact-chiffres small { font-size: var(--fs-sm); color: var(--ink-soft); }
.ai-page.facturation .tab-navigation { border-bottom: 0; margin-bottom: 12px; gap: 6px; }
.ai-page.facturation .tab-btn {
    padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
    color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); font-weight: 500;
}
.ai-page.facturation .tab-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-page.facturation .card { margin-bottom: 14px; box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.ai-page.facturation .card h2 { font-size: var(--fs-lg); margin: 0; }
.ai-page.facturation .search-section { margin: 0; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
.ai-page.facturation .fact-filtre { margin: 0 0 12px; }
.ai-page.facturation .search-input.form-control { width: auto; min-width: 220px; }
.ai-page.facturation .results-count { font-size: var(--fs-sm); color: var(--ink-faint); }
.ai-page.facturation .fact-rapide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ai-page.facturation .fact-rapide > * { min-width: 0; }
.ai-page.facturation .fact-rapide label { display: block; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 4px; }
.ai-page.facturation .quick-input-group { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.ai-page.facturation .quick-input-group .form-control { width: auto; }
.ai-page.facturation .btn-cancel-dirty { display: none; }
.ai-page.facturation .btn-cancel-dirty.visible { display: inline-flex; }
.ai-page.facturation .name-cell small { display: none; }
.ai-page.facturation .name-cell strong { white-space: nowrap; }
.ai-page.facturation .config-column, .ai-page.facturation .config-column.full-width { background: transparent; box-shadow: none; padding: 0; border: 0; }
.ai-page.facturation .table-wrapper { overflow-x: auto; }
.ai-page.facturation .tariff-cell, .ai-page.facturation .cost-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ai-page.facturation .tariff-cell .rate-input, .ai-page.facturation .cost-cell .rate-input { width: 72px; }
.ai-page.facturation .currency { white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-faint); }
.ai-page.facturation .date-input { width: 96px; }
.ai-page.facturation #tariff-table th, .ai-page.facturation #user-table th { white-space: nowrap; }
/* Boîtes mail : une ligne par boîte, deux boutons, le reste sous « Plus ». */
.ai-page.boites .boites-chiffres { margin-bottom: 16px; }
.ai-page.boites .boites-chiffres > div.is-due { border-color: var(--warn); background: var(--warn-bg); }
.ai-page.boites .mailbox-row { padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.ai-page.boites .mailbox-row:last-child { border-bottom: 0; }
.ai-page.boites .boite-ligne { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ai-page.boites .boite-ligne > * { min-width: 0; }
.ai-page.boites .boite-ligne .mailbox-state { margin-top: 0; }
.ai-page.boites .boite-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-page.boites .boite-titre .chip { font-size: var(--fs-meta); padding: 2px 8px; }
.ai-page.boites .boite-actions { display: flex; align-items: center; gap: 6px; position: relative; }
.ai-page.boites .boite-actions .mailbox-actions { display: flex; gap: 6px; margin: 0; }
.ai-page.boites .boite-plus { position: relative; }
.ai-page.boites .boite-plus > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ai-page.boites .boite-plus > summary::-webkit-details-marker { display: none; }
.ai-page.boites .boite-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(23, 34, 46, 0.12); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.ai-page.boites .boite-menu form { display: contents; }
.ai-page.boites .boite-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px;
    border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-sm); border-radius: var(--r-sm); cursor: pointer;
}
.ai-page.boites .boite-menu button:hover { background: var(--surface-sunken); }
.ai-page.boites .boite-menu button.is-danger { color: var(--danger); }
.ai-page.boites .boite-menu i { width: 14px; color: var(--ink-faint); }
.ai-page.boites .boite-plis { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 0 24px; }
.ai-page.boites .boite-plis > details > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-soft); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ai-page.boites .boite-plis > details > summary::-webkit-details-marker { display: none; }
.ai-page.boites .boite-plis > details > summary i { color: var(--ink-faint); }
.ai-page.boites .boite-plis > details[open] { flex-basis: 100%; }
.ai-page.boites .boite-plis > details[open] > form { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken); }
.ai-page.boites .imap-cell .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ai-page.boites .imap-cell .form-grid > * { min-width: 0; }
.ai-page.boites .imap-cell label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--ink-soft); }
.ai-page.boites .mode-option span { display: block; }
.ai-page.boites .regl-note { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-page.boites details.rapport { margin-top: 14px; }
.ai-page.boites .form-row-wide:has(> .host-verdict[hidden]) { display: none; }
/* Cellules d'en-tête génériques : le libellé au-dessus, l'alerte en orange. */
.ai-page .page-chiffres { margin-bottom: 14px; }
.ai-page .jour-chiffres > div.is-due { border-color: var(--warn); background: var(--warn-bg); }
/* Un formulaire de mode masqué le reste, même s'il porte .form-grid. */
.ai-page .mode-form[hidden] { display: none !important; }
.ai-page.integrations .regl-note { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--ink-soft); }
.ai-page.integrations .regl-note i { color: var(--ink-faint); margin-right: 4px; }
/* Mails à rattacher : la cause en lignes, les messages en lignes. */
.ai-page.rattacher .alias-liste, .ai-page.rattacher .rattacher-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.rattacher .alias-ligne {
    display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.ai-page.rattacher .alias-ligne:last-child { border-bottom: 0; }
.ai-page.rattacher .alias-ligne .btn { margin-left: auto; }
.ai-page.rattacher .rattacher-ligne {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ai-page.rattacher .rattacher-ligne > * { min-width: 0; }
.ai-page.rattacher .rattacher-ligne:last-child { border-bottom: 0; }
.ai-page.rattacher .rattacher-geste { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ai-page.rattacher .rattacher-geste .form-control { width: auto; min-width: 180px; }
.ai-page.rattacher .queue-meta code { font-size: var(--fs-sm); }
/* Téléphonie : les adresses à coller, et les deux essais côte à côte. */
.ai-page.telephonie .webhook-bloc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ai-page.telephonie .webhook-url { display: inline-block; padding: 6px 10px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--fs-sm); overflow-wrap: anywhere; max-width: 100%; }
.ai-page.telephonie .regl-note { display: block; }
.ai-page.telephonie .essai-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.ai-page.telephonie .essai-grille > * { min-width: 0; }
.ai-page.telephonie .essai-bloc { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai-page.telephonie .essai-bloc h3 { margin: 0; font-size: var(--fs-base); }
.ai-page.telephonie .essai-bloc h3 i { color: var(--brand-soft); }
.ai-page.telephonie .essai-bloc label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--ink-soft); }
.ai-page.telephonie .essai-bloc .form-actions { margin-top: auto; }
.ai-page.telephonie .page-chiffres dd .chip { font-size: var(--fs-sm); }
/* Partenariats : une ligne par courtier, ses compagnies en pastilles. */
.ai-page.partenariats .partenaires-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.partenariats .partenaire-ligne {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 16px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ai-page.partenariats .partenaire-ligne > * { min-width: 0; }
.ai-page.partenariats .partenaire-ligne:last-child { border-bottom: 0; }
.ai-page.partenariats .partenaire-nom { padding-top: 3px; }
@media (max-width: 700px) {
    .ai-page.partenariats .partenaire-ligne { grid-template-columns: 1fr; }
}

/* Le dossier clôturé : un bilan, une coche par chose faite. */
.ai-page.dossier .bilan-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.dossier .bilan-liste li {
    display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.ai-page.dossier .bilan-liste li:last-child { border-bottom: 0; }
.ai-page.dossier .bilan-liste li > i {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; background: var(--surface-sunken); color: var(--ink-faint);
}
.ai-page.dossier .bilan-liste li.is-ok > i { background: var(--ok-bg); color: var(--ok); }
.ai-page.dossier .bilan-liste li.is-warn > i { background: var(--warn-bg); color: var(--warn); }
.ai-page.dossier .bilan-liste li > span { flex: 1; min-width: 0; }
.ai-page.dossier .bilan-liste li.is-off > span { color: var(--ink-soft); }
.ai-page.dossier .bilan-liste .btn { flex: 0 0 auto; }
/* Compétences : une ligne par personne, le formulaire replié dessous. */
.ai-page.competences .matrice-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.competences .matrice-personne { border-bottom: 1px solid var(--line); }
.ai-page.competences .matrice-personne:last-child { border-bottom: 0; }
.ai-page.competences .matrice-personne > details > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
    padding: 12px 4px; flex-wrap: wrap;
}
.ai-page.competences .matrice-personne > details > summary::-webkit-details-marker { display: none; }
.ai-page.competences .matrice-personne .step-num {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: var(--surface-sunken);
    color: var(--ink-soft); font-weight: 700; font-size: var(--fs-sm);
}
.ai-page.competences .matrice-personne .step-num.is-done { background: var(--ok-bg); color: var(--ok); }
.ai-page.competences .matrice-nom { min-width: 160px; }
.ai-page.competences .matrice-resume { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ai-page.competences .matrice-plier { margin-left: auto; }
.ai-page.competences .matrice-personne > details[open] > summary .matrice-plier { visibility: hidden; }
.ai-page.competences .matrice-corps {
    padding: 4px 4px 16px 42px; border-top: 1px dashed var(--line);
}
@media (max-width: 700px) {
    .ai-page.competences .matrice-corps { padding-left: 4px; }
}
/* Rapports : les icônes des lignes, et des cellules d'en-tête. */
.ai-page.rapports .regl-ligne .step-num i { font-size: 0.75rem; }
.ai-page.rapports .regl-actions .btn { white-space: nowrap; }
/* Calendrier : la période en cellules, les promesses sans date en lignes. */
.ai-page.cal-page .cal-chiffres { margin-bottom: 14px; }
.ai-page.cal-page .cal-undated { margin-bottom: 14px; }
.ai-page.cal-page .cal-undated-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.cal-page .cal-undated-ligne {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.ai-page.cal-page .cal-undated-ligne:last-child { border-bottom: 0; }
.ai-page.cal-page .cal-undated-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-page.cal-page .cal-undated-ligne .btn { flex: 0 0 auto; }
/* Notifications : une ligne compacte par alerte, le lu replié. */
.ai-page.notifs .notif-liste { list-style: none; margin: 0; padding: 0; }
.ai-page.notifs .notif-ligne {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px;
    align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ai-page.notifs .notif-ligne > * { min-width: 0; }
.ai-page.notifs .notif-ligne:last-child { border-bottom: 0; }
.ai-page.notifs .notif-icone {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--surface-sunken); color: var(--ink-faint); font-size: 0.8rem;
}
.ai-page.notifs .notif-ligne.is-unread .notif-icone { background: var(--warn-bg); color: var(--warn); }
.ai-page.notifs .notif-corps { display: flex; flex-direction: column; gap: 1px; }
.ai-page.notifs .notif-detail { font-size: var(--fs-sm); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-page.notifs .notif-meta { font-size: var(--fs-meta); color: var(--ink-faint); }
.ai-page.notifs .notif-action { justify-self: end; }
/* Sessions : les filtres dans l'en-tête, les pavés en cellules. */
.ai-page.sessions-page .sessions-filtres { display: flex; gap: 8px; align-items: center; }
.ai-page.sessions-page .sessions-filtres .form-control { width: auto; min-width: 160px; }
.ai-page.sessions-page .chart-container, .ai-page.sessions-page .sessions-table-container {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: none; padding: 16px 18px; margin-bottom: 14px;
}
.ai-page.sessions-page .chart-title { color: var(--ink); font-size: var(--fs-lg); }
/* Profil : le même squelette que la fiche d'une personne. */
.ai-page.profil .profil-pairs { grid-template-columns: 160px minmax(0, 1fr); font-size: var(--fs-base); }
.ai-page.profil .personne-side .plain-list li { padding: 6px 0; }
/* Mon espace : des groupes titrés dans le pli, pas des cartes gigognes. */
.ai-page .module-groupe { margin-bottom: 14px; }
.ai-page .module-groupe h3 {
    font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); margin: 0 0 6px;
}
/* Fiche courtier : l'état d'une boîte sur sa ligne. */
.ai-page.courtier-page .boite-etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-page.courtier-page .boite-etat .rail-mailbox-address { font-weight: 600; }
/* Guide mail : le code à recopier, lisible dans sa ligne. */
.ai-page.guide-mail .guide-code {
    display: block; white-space: pre; overflow-x: auto; margin: 8px 0;
    padding: 8px 12px; background: var(--surface-sunken); border: 1px solid var(--line);
    border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.ai-page.guide-mail .regl-ligne { align-items: start; }
.ai-page.guide-mail .regl-ligne .step-num { margin-top: 2px; }
.ai-page.guide-mail .rapport-body h3 {
    font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-faint); margin: 14px 0 6px;
}
.personne-etat { margin: 0 0 14px; }
.suivi-liste { list-style: none; margin: 0; padding: 0; }
.suivi-ligne { padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.suivi-ligne:last-child { border-bottom: 0; }
.suivi-ligne.rang-0 .suivi-constat, .suivi-ligne.rang-2 .suivi-constat,
.suivi-ligne.rang-3 .suivi-constat, .suivi-ligne.rang-4 .suivi-constat { color: #b91c1c; }
.suivi-ligne.rang-5 .suivi-constat, .suivi-ligne.rang-6 .suivi-constat,
.suivi-ligne.rang-7 .suivi-constat { color: #b45309; }
.suivi-constat { margin: 2px 0; }
.suivi-chiffres { margin: 0; font-size: 0.82rem; color: #8a94a3; display: flex; gap: 12px; flex-wrap: wrap; }

/* Les derniers gestes et connexions d'une personne. */
.journal-personne { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.journal-personne li { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid #f1f4f8; }
.journal-personne .journal-quand { color: #8a94a3; white-space: nowrap; }
.journal-personne .journal-quoi { font-weight: 600; }
.inline-form { display: flex; gap: 6px; align-items: center; }

/* L'état de l'abonnement aux notifications, sous le bouton. */
.push-status { margin: 8px 0; font-size: 0.9rem; color: #5b6675; }
.push-status.is-ok { color: #15803d; }
.push-status.is-warn { color: #b45309; }

/* Le choix des modules. Une ligne par module, avec ce qu'il apporte sous
   son nom : c'est la phrase qui fait décider, pas l'intitulé. */
.module-list { list-style: none; margin: 0; padding: 0; }
.module-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
}
.module-row:last-child { border-bottom: 0; }
.module-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.module-label input { margin-top: 3px; }
.module-why {
    display: block;
    font-size: 0.85rem;
    color: #5b6675;
    margin-top: 2px;
}

@media (max-width: 560px) {
    .call-popup { right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* L'étiquette du courtier en tête de dossier. Le nom était collé à
   l'adresse de l'expéditeur, sans rien qui dise lequel était lequel. */
.ai-page .origin-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ai-text-muted, #8a94a3);
    margin-right: 6px;
}
.ai-page .origin-sep { color: var(--ai-text-muted, #b3bcc7); margin: 0 4px; }

/* Quarante courtiers à cocher : la liste défile plutôt que d'allonger la
   page au point qu'on ne voie plus le reste du formulaire. */
.ai-page .checkbox-group-scroll {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--ai-border, #e3e8ef);
    border-radius: 6px;
    padding: 8px 10px;
}

/* L'étape suivante : une phrase, portée par la couleur de la marque.
   Volontairement plus sobre qu'une alerte — c'est un cap, pas un
   problème. */
.ai-page .next-step {
    display: flex;
    /* Plutôt que de comprimer chaque élément jusqu'à l'illisible, la rangée
       passe à la ligne quand la place manque. */
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    padding: 10px 14px;
    margin: 0 0 14px;
    border-left: 3px solid var(--ai-accent, #2f6fed);
    background: rgba(47, 111, 237, 0.06);
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
}
.ai-page .next-step i { color: var(--ai-accent, #2f6fed); }

/* Barre de commande : en-têtes de groupe et surlignage, façon Spotlight.
   L'œil cherche d'abord la bonne famille, puis la bonne ligne. */
.cmd-group {
    padding: 8px 14px 3px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a94a3;
    pointer-events: none;
}
.cmd-group:first-child { padding-top: 4px; }
.cmd-item mark {
    background: rgba(47, 111, 237, 0.16);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* ------------------------------------------------------------------ */
/* Les bulles : ce que Wikipro vient de décider                        */
/*                                                                     */
/* Même place et même grammaire que la fenêtre d'appel — c'est le seul  */
/* élément de l'application qui se soit jamais manifesté de lui-même,   */
/* et le seul qu'on ait trouvé vivant. Les bulles en sont la           */
/* généralisation, pas un second langage.                              */
/* ------------------------------------------------------------------ */

.bubble-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 880;                 /* sous l'appel : le téléphone prime */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 40px));
    pointer-events: none;
}
.bubble-stack .bubble { pointer-events: auto; }

.bubble {
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-left: 3px solid #2f6fed;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 30, 54, 0.14);
    padding: 11px 13px;
    font-size: 0.9rem;
    animation: bubble-rise 180ms ease-out;
}
.bubble.is-leaving { animation: bubble-leave 180ms ease-in forwards; }

@keyframes bubble-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes bubble-leave {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(6px); }
}

.bubble-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.bubble-what {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2f6fed;
}
.bubble-close {
    border: 0;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #8a94a3;
    padding: 0 2px;
}
.bubble-close:hover { color: #1f2733; }

.bubble-subject { font-weight: 600; margin-top: 3px; color: #1f2733; }
.bubble-why { color: #5a6675; margin-top: 3px; font-size: 0.85rem; }
.bubble-meta { color: #8a94a3; margin-top: 2px; font-size: 0.8rem; }
.bubble-action {
    display: inline-block;
    margin-top: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2f6fed;
    text-decoration: none;
}
.bubble-action:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .bubble, .bubble.is-leaving { animation: none; }
}
@media (max-width: 560px) {
    .bubble-stack { right: 10px; left: 10px; bottom: 10px; width: auto; }
}

/* ------------------------------------------------------------------ */
/* Le tiroir d'activité et le bandeau de file                          */
/*                                                                     */
/* Une bulle effacée au bout de douze secondes est perdue pour qui     */
/* était en réunion. Le tiroir garde ; la poignée dit qu'il y a        */
/* quelque chose à garder, et rien de plus.                            */
/* ------------------------------------------------------------------ */

.activity-handle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 870;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid #d9dee7;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 30, 54, 0.12);
    font-size: 0.82rem;
    font-weight: 600;
    color: #5a6675;
    cursor: pointer;
}
.activity-handle:hover { color: #1f2733; border-color: #b9c2cf; }
.activity-handle.is-empty { opacity: 0.55; }

.activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b9c2cf;
    flex: 0 0 auto;
}
.activity-handle.has-unseen .activity-dot { background: #2f6fed; }
.activity-count {
    font-variant-numeric: tabular-nums;
    color: #2f6fed;
}
.activity-count:empty { display: none; }

/* La pile de bulles se pose au-dessus de la poignée, pas dessus. */
.bubble-stack { bottom: 66px; }

.activity-drawer {
    position: fixed;
    right: 20px;
    bottom: 66px;
    z-index: 875;
    width: min(380px, calc(100vw - 40px));
    max-height: min(60vh, 520px);
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(16, 30, 54, 0.20);
    overflow: hidden;
}
.activity-drawer.is-open { display: flex; }

.activity-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #eef1f5;
}
.activity-drawer-close {
    border: 0;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: #8a94a3;
}

.activity-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
}
.activity-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    border-bottom: 1px solid #f3f5f8;
}
.activity-row:last-child { border-bottom: 0; }
.activity-what {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #2f6fed;
}
.activity-subject { font-weight: 600; color: #1f2733; text-decoration: none; }
a.activity-subject:hover { text-decoration: underline; }
.activity-detail { font-size: 0.84rem; color: #5a6675; }
.activity-empty { padding: 18px 14px; color: #8a94a3; text-align: center; }

/* Le bandeau : prévenir sans réordonner ce qu'on est en train de lire. */
.ai-page .queue-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: rgba(47, 111, 237, 0.08);
    border: 1px solid rgba(47, 111, 237, 0.22);
    font-size: 0.9rem;
}
.ai-page .queue-banner-action {
    border: 0;
    background: none;
    font-weight: 600;
    color: #2f6fed;
    cursor: pointer;
    padding: 0;
}
.ai-page .queue-banner-action:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .activity-handle { right: 10px; bottom: 10px; }
    .activity-drawer { right: 10px; left: 10px; width: auto; bottom: 56px; }
}

/* Le renvoi au tutoriel : « voir comment faire », au bon moment. */
.ai-page .tutorial-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(47, 111, 237, 0.08);
    color: #2f6fed;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.ai-page .tutorial-link:hover { background: rgba(47, 111, 237, 0.14); }
.ai-page .tutorial-source {
    font-weight: 400;
    color: #5a6675;
    font-size: 0.8rem;
}

/* L'adresse du webhook : longue, à copier, jamais à retaper. */
.ai-page .webhook-url {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 9px;
    background: var(--ai-surface-alt, #f4f6fa);
    border-radius: 6px;
    font-size: 0.8rem;
    vertical-align: middle;
}

/* La suite de la journée --------------------------------------------------

   Volontairement plus sobre que la carte « À traiter maintenant » : ces
   dossiers sont à voir, pas à décider. Leur donner le même poids visuel
   rendrait le premier indiscernable, et l'écran redeviendrait le tableau
   qu'il remplace.                                                          */

.ai-page .day-queue { margin-top: var(--sp-4); }

.ai-page .day-queue-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.ai-page .day-queue-head h2 { margin: 0; font-size: 15px; }

.ai-page .day-queue-progress {
    font-size: 12.5px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.ai-page .day-queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ai-page .day-queue-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px 4px;
    border-top: 1px solid var(--line);
}

.ai-page .day-queue-item:first-child { border-top: none; }

.ai-page .day-queue-rank {
    flex: 0 0 auto;
    width: 22px;
    text-align: right;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.ai-page .day-queue-item.is-urgent .day-queue-rank { color: #dc2626; }

.ai-page .day-queue-body { flex: 1 1 auto; min-width: 0; }

.ai-page .day-queue-subject {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-page .day-queue-subject:hover { text-decoration: underline; }

.ai-page .day-queue-meta {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.ai-page .day-queue-when {
    flex: 0 0 auto;
    font-size: 12.5px;
    text-align: right;
    white-space: nowrap;
}

.ai-page .day-queue-beyond {
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: 12.5px;
}

/* Absence -----------------------------------------------------------------

   Un état qu'on doit être incapable d'oublier : tant qu'il dure, plus rien
   n'arrive, et quelqu'un qui l'ignore croirait simplement sa file vide.    */

.ai-page .absence-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    border-left: 4px solid #d97706;
    background: #fffbeb;
}

.ai-page .absence-banner-text { flex: 1 1 260px; min-width: 0; }
.ai-page .absence-banner-text strong { font-size: 14.5px; }
.ai-page .absence-banner-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
}

.ai-page .inline-form { display: inline; }

@media (prefers-color-scheme: dark) {
    .ai-page .absence-banner { background: rgba(217, 119, 6, 0.12); }
}

/* Calendrier ==============================================================

   Trois échelles, trois questions différentes — pas la même vue à trois
   zooms. La grille reste sobre : ce sont les entrées qui doivent porter la
   couleur, et une grille chargée redevient le tableau qu'on remplace.

   Un seul accent par nature d'entrée, et il est sémantique :
   engagement (envers un client) > objectif interne > contexte.            */

.cal-page {
    --cal-engagement: #b45309;
    --cal-echeance: #2f6fed;
    --cal-absence: #7c6f9f;
    --cal-presence: #cbd5e1;
    --cal-cell: 108px;
}

/* -- barre --------------------------------------------------------------- */

.cal-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.cal-scales {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-sunken);
}

.cal-scale {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

.cal-scale:hover { color: var(--brand); }

.cal-scale.is-active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
}

.cal-move {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.cal-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
    text-decoration: none;
}

.cal-arrow:hover { border-color: var(--line-strong); color: var(--brand); }

.cal-title {
    min-width: 168px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cal-today {
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ai-accent, #2f6fed);
}

.cal-filter { margin-left: auto; }
.cal-filter select { min-width: 180px; font-size: 13px; }

/* -- disposition --------------------------------------------------------- */

.cal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 980px) {
    .cal-layout { grid-template-columns: minmax(0, 1fr); }
    .cal-side { order: -1; }
}

/* -- grille mensuelle ---------------------------------------------------- */

.cal-weekdays,
.cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-weekdays { margin-bottom: 4px; }
.cal-week { margin-bottom: 4px; }

.cal-weekday {
    padding: 4px 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: var(--cal-cell);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cal-cell:hover { border-color: var(--line-strong); }

.cal-cell:focus-visible {
    outline: 2px solid var(--ai-accent, #2f6fed);
    outline-offset: 1px;
}

.cal-cell.is-outside { background: var(--surface-sunken); opacity: 0.62; }

.cal-cell.is-today .cal-cell-number {
    background: var(--ai-accent, #2f6fed);
    color: #fff;
}

.cal-cell.is-selected {
    border-color: var(--ai-accent, #2f6fed);
    box-shadow: 0 0 0 1px var(--ai-accent, #2f6fed);
}

.cal-cell-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
}

.cal-cell-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cal-chip {
    padding: 2px 6px;
    border-left: 3px solid var(--cal-echeance);
    border-radius: 4px;
    background: var(--surface-sunken);
    font-size: 11.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip.is-engagement { border-left-color: var(--cal-engagement); }
.cal-chip.is-absence { border-left-color: var(--cal-absence); }
.cal-chip.lvl-urgent {
    border-left-color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.cal-chip-more { font-size: 11px; color: var(--ink-soft); padding-left: 3px; }

/* -- vue semaine --------------------------------------------------------- */

.cal-week-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

@media (max-width: 760px) {
    .cal-week-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cal-day-column {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.cal-day-column.is-today { border-color: var(--ai-accent, #2f6fed); }

.cal-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
    font: inherit;
    cursor: pointer;
    width: 100%;
}

.cal-day-head.is-selected { background: rgba(47, 111, 237, 0.1); }
.cal-day-name { font-size: 11.5px; text-transform: uppercase; color: var(--ink-soft); }
.cal-day-number { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La barre de présence : 6 h à 20 h, soit 14 heures de large. */
.cal-presence {
    position: relative;
    height: 5px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.cal-presence.is-empty { opacity: 0.4; }

.cal-presence-band {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    background: var(--ai-accent, #2f6fed);
    opacity: 0.5;
    border-radius: 2px;
}

.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    min-height: 90px;
}

.cal-event {
    display: block;
    padding: 5px 7px;
    border-left: 3px solid var(--cal-echeance);
    border-radius: 5px;
    background: var(--surface-sunken);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
}

.cal-event:hover { background: rgba(47, 111, 237, 0.08); }
.cal-event.is-engagement { border-left-color: var(--cal-engagement); }
.cal-event.is-absence { border-left-color: var(--cal-absence); }
.cal-event.lvl-urgent { border-left-color: #dc2626; }

.cal-event-time {
    display: block;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

.cal-event-title { display: block; font-weight: 600; }
.cal-event-detail { display: block; font-size: 11.5px; color: var(--ink-soft); }
.cal-day-quiet { margin: 0; text-align: center; color: var(--ink-soft); }

/* -- vue année ----------------------------------------------------------- */

.cal-year {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
}

.cal-year-month { min-width: 0; }

.cal-year-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-decoration: none;
}

.cal-year-label:hover { color: var(--brand); }

.cal-year-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.cal-year-day {
    display: block;
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
}

a.cal-year-day:hover { outline: 2px solid var(--ai-accent, #2f6fed); }
.cal-year-day.is-void { visibility: hidden; }
.cal-year-day.d1 { background: rgba(47, 111, 237, 0.22); border-color: transparent; }
.cal-year-day.d2 { background: rgba(47, 111, 237, 0.42); border-color: transparent; }
.cal-year-day.d3 { background: rgba(47, 111, 237, 0.66); border-color: transparent; }
.cal-year-day.d4 { background: rgba(47, 111, 237, 0.88); border-color: transparent; }
.cal-year-day.is-late { background: rgba(220, 38, 38, 0.72); border-color: transparent; }

.cal-year-legend {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
}

.cal-year-legend .cal-year-day { width: 11px; aspect-ratio: 1; }
.cal-year-legend-late { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--sp-4); }

/* -- panneau du jour ----------------------------------------------------- */

.cal-side {
    position: sticky;
    top: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: var(--sp-4);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.cal-side-inner[data-loading] { opacity: 0.5; }
.cal-side-hint { margin: 0; font-size: 13px; color: var(--ink-soft); }

.cal-day-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.cal-day-panel-head h3 { margin: 0; font-size: 14.5px; }
.cal-day-count { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

.cal-day-list { list-style: none; margin: 0; padding: 0; }

.cal-day-item {
    display: flex;
    gap: 9px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}

.cal-day-item:first-child { border-top: none; }
.cal-day-kind { flex: 0 0 auto; width: 16px; color: var(--cal-echeance); }
.cal-day-item.is-engagement .cal-day-kind { color: var(--cal-engagement); }
.cal-day-item.is-absence .cal-day-kind { color: var(--cal-absence); }
.cal-day-item.lvl-urgent .cal-day-kind { color: #dc2626; }

.cal-day-body { min-width: 0; flex: 1 1 auto; }
.cal-day-title { font-size: 13px; font-weight: 600; color: inherit; }
a.cal-day-title:hover { text-decoration: underline; }
.cal-day-detail { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cal-day-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
.cal-day-owner { font-size: 11.5px; color: var(--ink-soft); }
.cal-day-empty { margin: 0; font-size: 13px; color: var(--ink-soft); }

.cal-day-presence {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.cal-day-presence h4 {
    margin: 0 0 5px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.cal-day-presence ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cal-day-presence li { padding: 2px 0; font-variant-numeric: tabular-nums; }

/* -- reste --------------------------------------------------------------- */

.cal-undated { border-left: 4px solid var(--cal-engagement); }
.cal-undated ul { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: 13px; }
.cal-undated li { padding: 2px 0; }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    font-size: 12px;
    color: var(--ink-soft);
}

.cal-legend i { margin-right: 4px; }
.cal-legend span:nth-child(1) i { color: var(--cal-engagement); }
.cal-legend span:nth-child(2) i { color: var(--cal-echeance); }
.cal-legend span:nth-child(3) i { color: var(--cal-absence); }

@media (prefers-reduced-motion: reduce) {
    .cal-scale, .cal-cell, .cal-event { transition: none; }
}

/* Raccourcis d'échéance ---------------------------------------------------

   Un raccourci propose, il ne décide pas : le champ date reste modifiable
   après un clic.                                                          */

.due-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 var(--sp-3);
}

.due-preset {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.due-preset:hover { border-color: var(--line-strong); }

.due-preset span {
    font-size: 11px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.due-preset.is-chosen {
    border-color: var(--ai-accent, #2f6fed);
    background: rgba(47, 111, 237, 0.09);
}

.due-preset.is-chosen span { color: inherit; }

/* Pouls de la relève -------------------------------------------------------

   Discret par construction : c'est un état de fond, pas une alerte. Il
   répond à une question qu'on se pose une fois par matinée — « est-ce que
   ça tourne ? » — et ne doit pas la reposer en permanence.              */

.ai-page .poll-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--sp-2) 0 0;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-sunken);
    font-size: 12px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.ai-page .poll-pill i { color: var(--ai-accent, #2f6fed); font-size: 11px; }
.ai-page .poll-pill.is-idle i { color: #d97706; }

/* Bande d'état des intégrations -------------------------------------------

   Une pastille par service, le nécessaire d'abord. Le point de couleur
   porte l'information ; le mot la répète pour qui ne distingue pas les
   couleurs — une pastille muette serait illisible pour un daltonien, et
   c'est la moitié de l'intérêt de la bande.                             */

.ai-page .int-band {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.ai-page .int-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease;
}

.ai-page .int-chip:hover { border-color: var(--line-strong); }

.ai-page .int-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}

.ai-page .int-chip.is-ok .int-dot { background: #16a34a; }
.ai-page .int-chip.is-erreur .int-dot { background: #dc2626; }
.ai-page .int-chip.is-a-tester .int-dot { background: #d97706; }
.ai-page .int-chip.is-desactivee { opacity: 0.68; }

.ai-page .int-body { display: flex; flex-direction: column; min-width: 0; }

.ai-page .int-name {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-page .int-required {
    padding: 0 5px;
    border-radius: 3px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.ai-page .int-state { font-size: 11.5px; color: var(--ink-soft); }

/* Scans ===================================================================

   Le dépôt est le geste principal : il occupe la place, en haut, et se
   voit avant la liste. Une page qui ouvrirait sur un tableau demanderait
   de chercher où déposer, ce qui est la seule chose qu'on vient y faire. */

.ai-page .scan-drop { padding: 0; overflow: hidden; }

.ai-page .scan-drop.is-hovered { outline: 2px dashed var(--ai-accent, #2f6fed); }

.ai-page .scan-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: var(--sp-5) var(--sp-4);
    margin: var(--sp-4) var(--sp-4) 0;
    border: 2px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--surface-sunken);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.ai-page .scan-drop-zone:hover {
    border-color: var(--ai-accent, #2f6fed);
    background: rgba(47, 111, 237, 0.05);
}

.ai-page .scan-drop-zone i {
    font-size: 26px;
    color: var(--ai-accent, #2f6fed);
    margin-bottom: 3px;
}

.ai-page .scan-drop-zone strong { font-size: 14.5px; }
.ai-page .scan-drop-zone span { font-size: 12.5px; }

/* Le champ natif est masqué mais reste focalisable au clavier : le cacher
   avec `display:none` le retirerait de l'ordre de tabulation. */
.ai-page .scan-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ai-page .scan-drop-zone:focus-within {
    border-color: var(--ai-accent, #2f6fed);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18);
}

.ai-page .scan-drop-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4) 0;
}

.ai-page .scan-drop-chosen { font-size: 13px; color: var(--ink-soft); }

.ai-page .scan-drop-note {
    margin: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    font-size: 12.5px;
}

/* -- liste --------------------------------------------------------------- */

.ai-page .scan-list { list-style: none; margin: 0; padding: 0; }

.ai-page .scan-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
}

.ai-page .scan-row:first-child { border-top: none; }
.ai-page .scan-row.is-unreadable { background: rgba(217, 119, 6, 0.05); }

.ai-page .scan-icon {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    color: var(--ink-soft);
    padding-top: 2px;
}

.ai-page .scan-row.is-unreadable .scan-icon { color: #d97706; }

.ai-page .scan-body { flex: 1 1 auto; min-width: 0; }

.ai-page .scan-name {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.ai-page .scan-name:hover { text-decoration: underline; }

.ai-page .scan-meta {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.ai-page .scan-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.ai-page .scan-source { font-size: 11.5px; color: var(--ink-soft); }

.ai-page .scan-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.ai-page .scan-state {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    font-size: 11.5px;
    white-space: nowrap;
}

.ai-page .scan-state.s-encode { border-color: #16a34a; color: #15803d; }
.ai-page .scan-state.s-dossier-cree { border-color: #2f6fed; color: #1d4ed8; }
.ai-page .scan-state.s-ecarte { opacity: 0.6; }
.ai-page .scan-when { font-size: 11.5px; color: var(--ink-soft); }

/* -- détail -------------------------------------------------------------- */

.ai-page .scan-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 980px) {
    .ai-page .scan-detail { grid-template-columns: minmax(0, 1fr); }
}

.ai-page .scan-text {
    max-height: 380px;
    overflow: auto;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-sunken);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-page .scan-missing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-3);
    font-size: 12.5px;
}

.ai-page .scan-summary {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--sp-3);
}

.ai-page .scan-choice {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.ai-page .scan-option {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: var(--sp-3);
}

.ai-page .scan-option[open] { border-color: var(--line-strong); }

.ai-page .scan-option summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
}

.ai-page .scan-option summary i {
    margin-right: 5px;
    color: var(--ai-accent, #2f6fed);
}

.ai-page .scan-option .form-grid { margin-top: var(--sp-3); }

.ai-page .scan-dismiss {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.ai-page .scan-dismiss .form-control { flex: 1 1 auto; font-size: 12.5px; }

/* Raccourci suggéré --------------------------------------------------------

   Amicale et discrète : en bas à gauche, hors du chemin de la souris et du
   regard, et elle s'efface seule. Une aide qui interrompt coûte plus cher
   que le détour qu'elle prétend éviter.                                   */

.shortcut-tip {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 340px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e3e9ee);
    border-left: 3px solid #d97706;
    border-radius: 12px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
    animation: shortcut-rise 260ms ease-out;
}

@keyframes shortcut-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.shortcut-tip.is-gone {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

.shortcut-tip > i { color: #d97706; margin-top: 2px; }
.shortcut-tip-body strong { display: block; font-size: 13.5px; }

.shortcut-tip-body p {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft, #5b6b7c);
}

.shortcut-tip kbd {
    padding: 1px 5px;
    border: 1px solid var(--line-strong, #cfd8e0);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface-sunken, #f6f8fa);
    font-family: inherit;
    font-size: 11px;
}

.shortcut-tip-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
    padding: 0 2px;
}

@media (prefers-reduced-motion: reduce) {
    .shortcut-tip { animation: none; }
    .shortcut-tip.is-gone { transition: none; }
}

/* Comment faire ============================================================

   Au même endroit sur tous les écrans — c'est le point : on doit savoir où
   la chercher sans avoir à la chercher. Fermée par défaut, parce qu'une
   aide qui s'impose est une aide qu'on apprend à fermer.                  */

.howto-open {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 880;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line, #e3e9ee);
    border-radius: 999px;
    background: var(--surface, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    font: inherit;
    font-size: 12.5px;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.howto-open:hover,
.howto-open.is-open {
    border-color: var(--ai-accent, #2f6fed);
    color: var(--ai-accent, #2f6fed);
}

.howto-open i { font-size: 14px; }

.howto-panel {
    position: fixed;
    right: 18px;
    bottom: 62px;
    z-index: 890;
    width: min(380px, calc(100vw - 36px));
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--line, #e3e9ee);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
}

.howto-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.howto-head strong { font-size: 14.5px; }

.howto-head p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--ink-soft, #5b6b7c);
}

.howto-close {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
    padding: 0 2px;
}

.howto-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: howto;
}

.howto-step {
    position: relative;
    counter-increment: howto;
    padding: 10px 0 10px 30px;
    border-top: 1px solid var(--line, #e3e9ee);
}

.howto-step:first-child { border-top: none; }

.howto-step::before {
    content: counter(howto);
    position: absolute;
    left: 0;
    top: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-sunken, #f6f8fa);
    border: 1px solid var(--line, #e3e9ee);
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    color: var(--ink-soft, #5b6b7c);
}

/* Un pas hors de Wikipro ne se montre pas, il se décrit : le distinguer
   évite de chercher ici un bouton qui n'y sera jamais. */
.howto-step.is-external::before {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(217, 119, 6, 0.4);
    color: #b45309;
}

.howto-place {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #5b6b7c);
    margin-bottom: 2px;
}

.howto-step.is-external .howto-place { color: #b45309; }

.howto-text { display: block; font-size: 13px; line-height: 1.45; }

.howto-detail {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-soft, #5b6b7c);
}

.howto-outside,
.howto-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line, #e3e9ee);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-soft, #5b6b7c);
}

.howto-outside i { color: #b45309; margin-right: 4px; }

/* Le raccourci suggéré se pose à gauche, la bulle d'aide à droite : elles
   ne doivent jamais se recouvrir. */
@media (max-width: 820px) {
    .howto-open span { display: none; }
    .howto-open { padding: 10px; }
}

.ai-page .draft-sent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #15803d;
}

/* Actions d'une boîte mail -------------------------------------------------

   Écrites, pas seulement dessinées. Quatre icônes dont le sens n'apparaît
   qu'au survol sont invisibles pour qui ne sait pas déjà qu'il y a quelque
   chose à survoler — et une commande qu'on ne trouve pas n'existe pas.   */

.ai-page .mailbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ai-page .mailbox-actions .btn {
    white-space: nowrap;
    font-size: 12px;
}

.ai-page .btn-danger-ghost {
    border-color: rgba(220, 38, 38, 0.35);
    color: #b91c1c;
    background: transparent;
}

.ai-page .btn-danger-ghost:hover {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.07);
}

/* Ajouter une boîte : une seule question ===================================

   L'écran proposait deux formulaires côte à côte qui faisaient presque la
   même chose. Rien ne disait lequel choisir, et la différence — y a-t-il un
   mot de passe à donner — n'apparaissait qu'en lisant les champs.       */

.ai-page .mode-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.ai-page .mode-option {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.ai-page .mode-option:hover { border-color: var(--line-strong); }

.ai-page .mode-option.is-chosen {
    border-color: var(--ai-accent, #2f6fed);
    box-shadow: 0 0 0 1px var(--ai-accent, #2f6fed);
    background: rgba(47, 111, 237, 0.04);
}

.ai-page .mode-option i {
    color: var(--ai-accent, #2f6fed);
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
}

.ai-page .mode-option strong { display: block; font-size: 14px; }

.ai-page .mode-option span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-soft);
}

/* -- la liste des boîtes -------------------------------------------------- */

.ai-page .mailbox-list { list-style: none; margin: 0; padding: 0; }

.ai-page .mailbox-row {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: var(--sp-3);
    background: var(--surface);
}

.ai-page .mailbox-row.is-off { background: var(--surface-sunken); }

.ai-page .mailbox-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.ai-page .mailbox-identity { display: flex; gap: 10px; align-items: flex-start; }

/* Le point d'état : vert relevée, gris éteinte. Doublé par le badge
   « désactivée », pour qui ne distingue pas les couleurs. */
.ai-page .mailbox-state {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border-radius: 50%;
    background: #16a34a;
}

.ai-page .mailbox-row.is-off .mailbox-state { background: var(--line-strong); }

.ai-page .mailbox-address { font-size: 14.5px; }

.ai-page .mailbox-meta {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 2px;
}

.ai-page .mailbox-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.ai-page .badge-off {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #b91c1c;
}

.ai-page .mailbox-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: flex-start;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    font-size: 12.5px;
}

.ai-page .mailbox-cell { min-width: 0; }
.ai-page .mailbox-cell-actions { margin-left: auto; }

.ai-page .text-warn { color: #b45309; }

/* Signaler ================================================================

   En bas à gauche, au même endroit partout. Le bouton doit être trouvable
   au moment où quelque chose ne marche pas — c'est-à-dire sans avoir à le
   chercher, puisqu'on cherche déjà autre chose.                          */

.report-open {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 880;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line, #e3e9ee);
    border-radius: 999px;
    background: var(--surface, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
    font: inherit;
    font-size: 12.5px;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
}

.report-open:hover {
    border-color: #b45309;
    color: #b45309;
}

.report-panel {
    position: fixed;
    left: 18px;
    bottom: 62px;
    z-index: 890;
    width: min(360px, calc(100vw - 36px));
    padding: 16px;
    border: 1px solid var(--line, #e3e9ee);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
}

.report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.report-close {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
}

.report-kinds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 12.5px;
}

.report-kinds label { display: flex; align-items: center; gap: 6px; }
.report-panel textarea { width: 100%; font-size: 13px; }

.report-note {
    margin: 8px 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-soft, #5b6b7c);
}

/* La bulle de raccourci occupe le même coin : on la décale quand les deux
   peuvent apparaître ensemble. */
.shortcut-tip { left: 18px; bottom: 70px; }

/* -- l'écran des signalements -------------------------------------------- */

.ai-page .support-list { list-style: none; margin: 0; padding: 0; }

.ai-page .support-row {
    border-top: 1px solid var(--line);
    padding: var(--sp-3) 0;
}

.ai-page .support-row:first-child { border-top: none; }
.ai-page .support-row.is-closed { opacity: 0.72; }

.ai-page .support-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-soft);
}

.ai-page .support-kind {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
}

.ai-page .support-kind.k-anomalie { border-color: rgba(220,38,38,.35); color: #b91c1c; }
.ai-page .support-kind.k-question { border-color: rgba(217,119,6,.35); color: #b45309; }

.ai-page .support-message {
    margin: 6px 0 4px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.ai-page .support-origin,
.ai-page .support-resolution {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 4px 0 0;
}

.ai-page .support-close {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.ai-page .support-close .form-control { flex: 1 1 auto; font-size: 12.5px; }

/* Poser un événement depuis le panneau du jour --------------------------- */

.cal-add {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.cal-add summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ai-accent, #2f6fed);
}

.cal-add form { margin-top: var(--sp-3); }
.cal-add label { display: block; font-size: 12px; margin-bottom: 8px; }
.cal-add .form-control { font-size: 12.5px; margin-top: 2px; }
.cal-add-row { display: flex; gap: 8px; }
.cal-add-row label { flex: 1 1 0; }
.cal-add-note { font-size: 11.5px; margin: 0 0 8px; }

.cal-chip.is-evenement,
.cal-event.is-evenement { border-left-color: #0f766e; }
.cal-day-item.is-evenement .cal-day-kind { color: #0f766e; }

/* Partenariat sans document ------------------------------------------------

   Un partenariat vers une compagnie absente du corpus ne produit aucune
   erreur : il n'ouvre simplement aucun document, et le dossier s'analyse
   sans source. Rien ne le distinguait d'un partenariat qui marche.       */

.ai-page .partnership-chip.is-empty {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.07);
}

.ai-page .partnership-chip.is-empty i.fa-triangle-exclamation {
    color: #b45309;
    margin: 0 3px;
    font-size: 11px;
}

/* Compagnies proposées : on clique au lieu de taper. */
.ai-page .chip-suggest {
    display: inline-block;
    margin: 2px 3px 0 0;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.ai-page .chip-suggest:hover {
    border-color: var(--ai-accent, #2f6fed);
    color: var(--ai-accent, #2f6fed);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mise en service, dite partout ============================================

   Elle ne vivait que sur l'écran de configuration : il fallait y retourner
   pour savoir où l'on en était. Discrète, jamais bloquante, et elle
   disparaît le jour où tout est en place.                                */

/* La barre flotte au-dessus de la page : il faut donc lui faire de la
   place, sinon elle recouvre la fin du contenu.

   Vu à l'écran, jamais par un test : la barre masquait la dernière phrase
   du formulaire des boîtes, un bloc du guide et la rangée de compteurs des
   rapports. Rien ne casse — le texte est simplement caché, ce qui est la
   pire des deux situations, puisqu'on ne sait pas qu'on ne le lit pas.

   La marge vit ici plutôt que sur `.main-content` : elle n'a de raison
   d'être que quand la barre existe, et la barre disparaît d'elle-même une
   fois la mise en service terminée. */
body.has-setup-bar .main-content { padding-bottom: 96px; }

.setup-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    z-index: 870;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Largeur définie, non « au plus ». Avec `max-width` seul, la barre se
       dimensionnait sur son contenu : il n'y avait aucune place à répartir,
       le `flex: 1 1 auto` du texte n'avait rien à prendre, et le message
       s'empilait sur trois lignes dans une colonne de 170 px pendant que la
       barre en faisait 640. */
    width: min(680px, calc(100vw - 300px));
    /* Centrée sur la zone de travail, pas sur la fenêtre : `left: 50%` la
       rapporte au viewport, dont la barre latérale de 260 px occupe déjà la
       gauche. Une fois élargie, son bord passait sous le menu. */
    margin-left: 130px;
    padding: 10px 16px;
    border: 1px solid var(--line, #e3e9ee);
    border-left: 3px solid #2f6fed;
    /* Rectangle à coins adoucis, **pas** une pastille.
       `border-radius: 999px` convient à une ligne unique ; ici le contenu
       tient sur quatre ou cinq lignes, et le rayon transformait la barre en
       grosse bulle blanche posée sur le formulaire — vérifié à l'écran sur
       le tableau de bord et sur la facturation, où elle masquait le libellé
       « Courtier » et sa liste déroulante. */
    border-radius: 12px;
    background: var(--surface, #fff);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
    font-size: 12.5px;
    line-height: 1.4;
}

.setup-bar.is-here { border-left-color: #16a34a; }
.setup-bar > i { color: #2f6fed; flex: 0 0 auto; }
.setup-bar.is-here > i { color: #16a34a; }
/* Le texte prend la place restante. Sans `flex: 1 1 auto`, sa base reste
   `auto` : il se comprimait à moins de 200 px pendant que la barre en
   faisait 640, et le message s'empilait sur cinq lignes dans une colonne
   étroite alors que la largeur était disponible juste à côté. */
.setup-bar > span { min-width: 0; flex: 1 1 auto; }

.setup-bar-why {
    color: var(--ink-soft, #5b6b7c);
    /* Deux lignes au plus. L'explication complète est derrière « Toute la
       marche à suivre » ; la barre annonce, elle n'enseigne pas. Sans cette
       borne, un texte de cinq lignes fait monter la barre jusqu'au milieu
       de l'écran et recouvre ce qu'on est en train de remplir. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.setup-bar .btn { flex: 0 0 auto; white-space: nowrap; }

.setup-bar-all {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--ink-soft, #5b6b7c);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .setup-bar { display: none; }
}

/* Une entrée qui dure ------------------------------------------------------

   Une absence d'une semaine trace un trait sur ses jours au lieu de
   répéter son libellé sept fois : répété, il remplirait la semaine et
   rendrait le reste de la grille illisible.                              */

.cal-chip.is-starting {
    border-radius: 4px 0 0 4px;
    margin-right: -7px;
    position: relative;
    z-index: 1;
}

.cal-chip.is-continued {
    border-left-width: 0;
    border-radius: 0;
    margin-left: -7px;
    margin-right: -7px;
    min-height: 18px;
    background: rgba(124, 111, 159, 0.22);
}

.cal-chip.is-continued.is-ending {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
}

.cal-chip.is-absence.is-continued { background: rgba(124, 111, 159, 0.22); }
.cal-chip.is-evenement.is-continued { background: rgba(15, 118, 110, 0.18); }

.cal-event.is-continued { opacity: 0.72; border-left-style: dashed; }

/* Barre de commande : le fond devient inerte ------------------------------

   Tant qu'elle est ouverte, on ne doit pouvoir ni cliquer, ni faire
   défiler, ni tabuler derrière elle. Une palette qui laisse atteindre la
   page qu'elle recouvre donne l'impression de deux écrans superposés — et
   l'on finit par cliquer dans le mauvais.                                */

body.cmd-locked {
    overflow: hidden;
}

/* Tout ce qui n'est pas la barre cesse de répondre à la souris. La barre
   elle-même la reprend, sans quoi elle deviendrait inerte avec le reste. */
body.cmd-locked > *:not(.cmd-overlay) {
    pointer-events: none;
}

body.cmd-locked .cmd-overlay {
    pointer-events: auto;
}

/* Un seul coin, une seule pile ============================================

   Constat du cabinet : « il faut que ce soit assez simple pour un bébé, pas
   d'infos partout ». C'est mérité, et c'est de mon fait : cinq éléments
   flottants se sont ajoutés un par un au cours de la même session —
   Activité, Comment faire, Signaler, la mise en service, le raccourci
   suggéré. Chacun se justifiait seul ; ensemble ils encombrent, et deux
   paires se recouvraient franchement (Signaler sous le raccourci, Comment
   faire sous Activité).

   Ils sont désormais empilés dans un ordre fixe, en bas à droite, du plus
   permanent au plus passager. On sait où regarder, et rien ne cache rien.

   Les surcharges viennent après les définitions d'origine : c'est
   volontaire, la cascade tranche ici plutôt que de réécrire cinq blocs
   éparpillés.                                                            */

.howto-open   { right: 18px; bottom: 18px; left: auto; }
.report-open  { right: 152px; bottom: 18px; left: auto; }

/* Le tiroir d'activité garde son coin, décalé au-dessus des deux boutons. */
.activity-handle { right: 18px; bottom: 62px; left: auto; }

/* Ce qui s'ouvre se pose au-dessus de sa propre poignée. */
.howto-panel  { right: 18px; bottom: 106px; left: auto; }
.report-panel { right: 18px; bottom: 106px; left: auto; }

/* Les messages du système rejoignent la pile. Ils y manquaient : le tri de
   ce commit portait sur cinq éléments du module, et les toasts venaient de
   `style.css`, resté en `top: 2rem; right: 2rem`. Résultat vérifié à
   l'écran — « Bonjour Dorian » recouvrait deux des cartes de chiffres du
   jour à chaque connexion, précisément celles qu'on vient lire.

   Ils se posent au-dessus du reste : ce sont eux qui comptent quand ils
   apparaissent, et ils s'en vont seuls. */
.flash-messages {
    top: auto;
    right: 18px;
    bottom: 212px;
    left: auto;
    max-width: min(380px, calc(100vw - 36px));
}

/* Les deux bandeaux passagers, empilés au-dessus du reste et centrés :
   ils parlent d'un état, pas d'un outil. */
.setup-bar    { bottom: 106px; }
.shortcut-tip { left: 50%; transform: translateX(-50%); bottom: 168px; }
.shortcut-tip.is-gone { transform: translateX(-50%) translateY(10px); }

@media (max-width: 900px) {
    /* Sur un écran étroit, on garde l'essentiel : signaler et l'aide. Le
       reste se retrouve dans les écrans eux-mêmes. */
    .activity-handle, .shortcut-tip { display: none; }
    .report-open { right: auto; left: 18px; }
}

/* Démarrer : une chose à la fois ==========================================

   Douze écrans ouverts en même temps, chacun posant des questions dont rien
   ne dit si elles sont urgentes ou déjà réglées : c'est ce qui rend
   l'arrivée impossible. Ici, une seule chose au centre, le reste en gris.  */

.start-page { max-width: 720px; margin: 0 auto; }

.start-head { text-align: center; margin-bottom: var(--sp-5); }
.start-head h1 { font-size: 26px; margin: 0 0 6px; }
.start-sub { margin: 0; color: var(--ink-soft); font-size: 14px; }

.start-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--sp-4);
}

.start-tick {
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
}

.start-tick.is-done { background: #16a34a; }
.start-tick.is-current { background: var(--ai-accent, #2f6fed); }

.start-current { text-align: center; padding: var(--sp-5); }

.start-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--ai-accent, #2f6fed);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.start-badge.is-ready { background: #16a34a; }

/* Ce qu'un dossier apprend. Une forme unique pour cinq notions : ce qui
   attend une décision se distingue, le reste s'efface. */

.fact-list { margin: 0; padding: 0; list-style: none; }

.fact {
    padding: var(--sp-3);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    font-size: var(--fs-sm);
}

.fact + .fact { margin-top: 8px; }

/* Proposé : il demande une décision, il se voit. Confirmé : c'est de la
   matière acquise, elle n'a plus à réclamer l'attention. */
.fact.is-propose { background: var(--warn-bg); border-color: var(--warn); }
.fact.is-confirme { background: var(--surface-sunken); }

.fact-head { display: flex; gap: 8px; align-items: baseline; }
.fact-detail { margin: 6px 0 0; color: var(--ink-soft); }

.fact-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px 12px;
    margin: 8px 0 0;
}

.fact-fields dt {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.fact-fields dd { margin: 0; }

.fact-missing { margin: 8px 0 0; color: var(--warn); font-size: var(--fs-meta); }

.fact-quote > summary {
    margin-top: 8px;
    cursor: pointer;
    font-size: var(--fs-meta);
    color: var(--ink-faint);
}

.fact-quote blockquote {
    margin: 6px 0 0;
    padding-left: 10px;
    border-left: 2px solid var(--line-strong);
    color: var(--ink-soft);
    white-space: pre-wrap;
}

.fact-actions { display: flex; gap: 8px; margin-top: 10px; }
.fact-reread { margin-top: var(--sp-3); }

.fact-add > summary {
    margin-top: var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--brand);
}

.fact-add form { display: grid; gap: 8px; margin-top: 8px; }

/* Le poste de travail.

   Une seule surface qui suit ce qui se passe : l'appel qui court d'abord,
   ce qui est fait mais pas encodé ensuite, ce qui presse après. L'ordre
   visuel est l'ordre des priorités — c'est tout le propos. */

.poste { max-width: 780px; }

.call-live {
    border-left: 3px solid var(--ok);
    background: var(--ok-bg);
}

.call-live-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-3);
}

/* Le point qui bat : on doit voir d'un coup d'œil, depuis l'autre bout du
   bureau, que la ligne est ouverte et que le temps court. */
.call-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ok);
    animation: call-pulse 1.6s ease-in-out infinite;
}

@keyframes call-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .call-dot { animation: none; }
}

.call-timer {
    margin-left: auto;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}

.call-who { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.call-notes { min-height: 120px; font-size: var(--fs-base); }
.call-saved { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--ok); }

.call-start-row { display: flex; gap: 10px; align-items: center; }
.call-start-row input { flex: 1; }

.to-encode .encode-row {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
}

.encode-head { display: flex; gap: 10px; align-items: baseline; }
.encode-head strong { font-size: var(--fs-lg); }

.encode-notes {
    margin: 6px 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    white-space: pre-wrap;
}

.encode-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 12px;
    margin-top: 10px;
    align-items: end;
}
.encode-fields > * { min-width: 0; }
.encode-field { display: flex; flex-direction: column; gap: 4px; }
.encode-field > span {
    font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ink-faint);
}
.encode-field .form-control { width: 100%; min-width: 0; }
.encode-field-minutes { max-width: 110px; }
.encode-field-action .btn { width: 100%; white-space: nowrap; }
.encode-fiche { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.encode-fiche > summary { cursor: pointer; font-weight: 600; color: var(--brand); font-size: var(--fs-sm); }
.encode-fiche .encode-fields { margin-top: 8px; }
.encode-fiche textarea { resize: vertical; }
.encode-fiche .inline-check { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.outcome-eyebrow { margin: 12px 0 6px; }

@media (max-width: 700px) {
    .encode-fields { grid-template-columns: 1fr; }
    .call-timer { font-size: 22px; }
}

/* L'équipe, une fiche par personne. La question posée est binaire — cette
   personne peut-elle travailler — et la mise en page le dit avant de le
   détailler : les incomplètes portent une bordure, les autres non. */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
}

.person { border-left: 3px solid var(--warn); }
.person.is-ready { border-left-color: var(--ok); }

.person-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-3);
}

.person-head h2 { margin: 0; }
.person-head p { margin: 2px 0 0; font-size: var(--fs-sm); }

.pill-ok { background: var(--ok-bg); color: var(--ok); }

.person-state { margin: var(--sp-3) 0; color: var(--ok); font-size: var(--fs-sm); }
.person-state i { margin-right: 6px; }

.person-gaps { margin: var(--sp-3) 0; padding: 0; list-style: none; }

.person-gaps li {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.person-gaps li + li { margin-top: 8px; }
.person-gaps li.is-blocking { background: var(--warn-bg); }
.person-gaps strong { display: block; }
.person-gaps span { color: var(--ink-soft); }
.person-gaps a { display: inline-block; margin-top: 4px; }

.person-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.person-facts dt {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.person-facts dd { margin: 2px 0 0; font-size: var(--fs-sm); }

.person-phone { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.person-phone label { font-size: var(--fs-sm); font-weight: 600; }
.person-phone-row { display: flex; gap: 8px; margin-top: 6px; }
.person-phone-row input { flex: 1; }

/* Les schémas des écrans d'en face (app/ai/sketch.py).

   Dessinés et non capturés : une capture d'un portail tiers ment le jour où
   Microsoft déplace un bouton. Le schéma ne prétend pas montrer l'écran, il
   montre où regarder — ce qui reste vrai plus longtemps.

   Aucune couleur propre : uniquement les jetons de la feuille, pour que le
   dessin suive le thème sans avoir deux versions à tenir. */

.sketch {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: var(--sp-3) 0;
    font-family: inherit;
}

.sketch .sk-window { fill: var(--surface); stroke: var(--line-strong); }
.sketch .sk-chrome { fill: var(--surface-sunken); }
.sketch .sk-dot { fill: var(--line-strong); }
.sketch .sk-url { fill: var(--surface); stroke: var(--line); }
.sketch .sk-url-text { fill: var(--ink-faint); font-size: 9px; }

.sketch .sk-panel { fill: var(--surface-sunken); stroke: var(--line); }
.sketch .sk-item { fill: var(--ink-soft); font-size: 10px; }
.sketch .sk-item.is-on { fill: var(--brand); font-weight: 700; }
.sketch .sk-hit { fill: var(--ok-bg); stroke: var(--ok); }

.sketch .sk-field { fill: var(--surface); stroke: var(--line-strong); }
.sketch .sk-field.is-marked { stroke: var(--ok); stroke-width: 2; }
.sketch .sk-value { fill: var(--ink); font-size: 10px; }
.sketch .sk-small { fill: var(--ink-soft); font-size: 9.5px; }
.sketch .sk-text { fill: var(--ink); font-size: 11px; }

.sketch .sk-btn { fill: var(--surface); stroke: var(--line-strong); }
.sketch .sk-btn.is-primary { fill: var(--brand); stroke: var(--brand); }
.sketch .sk-btn.is-marked { stroke: var(--ok); stroke-width: 2; }
.sketch .sk-btn-text { fill: var(--ink); font-size: 10px; text-anchor: middle; }
.sketch .sk-btn-text.is-primary { fill: #fff; }

.guide-inline { margin: var(--sp-3) 0; }
.guide-inline > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--brand);
}

.sketch .sk-callout { fill: var(--ok); }
.sketch .sk-callout-text {
    fill: #fff;
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}

/* Ce qui s'est réglé tout seul. Discret : c'est une bonne nouvelle, elle
   n'a pas à prendre la place de ce qui reste à faire. */

.start-auto {
    max-width: 52ch;
    margin: 0 auto var(--sp-5);
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--ok-bg);
    border: 1px solid var(--ok);
}

.start-auto h3 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ok);
}

.start-auto ul { margin: 0; padding-left: 0; list-style: none; }

.start-auto li {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.start-auto li + li { margin-top: 6px; }
.start-auto li i { margin-top: 3px; color: var(--ok); }
.start-auto li.is-fail i { color: var(--warn); }

/* Faire sortir un dossier. Deux gestes volontairement inégaux : le
   classement sans suite se prend sans réfléchir puisqu'il se défait, la
   suppression définitive est repliée et se lit avant de se cliquer. */

.ticket-exit input[type="text"] { margin-bottom: var(--sp-2); }

.ticket-exit .danger-zone {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.ticket-exit .danger-zone > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}

.ticket-exit .danger-zone > summary:hover { color: var(--danger); }

.ticket-exit .danger-zone p {
    margin: var(--sp-3) 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.ticket-exit .refusal {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--warn-bg);
    border: 1px solid var(--warn);
}

.ticket-exit .refusal i { color: var(--warn); margin-right: 6px; }

/* Ce que le domaine dit de lui-même, avant qu'on demande un mot de passe.
   Trois tons : ce qui va marcher, ce qui ne marchera pas, et ce qu'on n'a
   pas pu savoir — ce dernier volontairement discret, l'ignorance n'étant
   pas une mauvaise nouvelle ici : les essais de connexion suivent. */

.host-verdict {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.5;
}

.host-verdict p { margin: 6px 0 0; }
.host-verdict i { margin-right: 6px; }

.host-verdict.is-ok { background: var(--ok-bg); border-color: var(--ok); }
.host-verdict.is-ok i { color: var(--ok); }

.host-verdict.is-attention {
    background: var(--warn-bg);
    border-color: var(--warn);
}

.host-verdict.is-attention i { color: var(--warn); }

.host-verdict.is-neutre { background: var(--surface-sunken); }

.host-verdict-switch { margin-top: 10px; }

/* Le titre de la carte est un `display: flex` hérité de `.ai-page .card > h2`
   — plus spécifique que ce sélecteur ne l'était, si bien qu'une boîte flex
   pleine largeur alignait le titre à gauche pendant que la pastille, elle,
   suivait le `text-align: center` de la carte. Les deux se disputaient la
   même ligne. On centre le contenu de la boîte, au lieu de la défaire. */
.ai-page .start-current > h2 {
    margin: var(--sp-3) 0 8px;
    font-size: 22px;
    justify-content: center;
}

.start-why {
    margin: 0 auto var(--sp-4);
    max-width: 48ch;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.start-cost {
    display: flex;
    gap: 10px;
    text-align: left;
    max-width: 52ch;
    margin: 0 auto var(--sp-4);
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.25);
}

.start-cost i { color: #b45309; margin-top: 2px; }
.start-cost strong { font-size: 13px; }
.start-cost p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; }

.start-detail {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-4);
}

.btn-lg { padding: 11px 22px; font-size: 14.5px; }

.start-back {
    margin: var(--sp-4) 0 0;
    font-size: 12px;
    color: var(--ink-soft);
}

/* Ce qui vient après : visible, pas actionnable. Rendre ces lignes
   cliquables ramènerait douze portes ouvertes et aucune indication. */
.start-later { margin-top: var(--sp-5); }

.start-later h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-3);
}

.start-later ol {
    margin: 0;
    padding-left: 20px;
    color: var(--ink-soft);
}

.start-later li { padding: 6px 0; font-size: 13px; }
.start-later strong { color: var(--ink); }
.start-later span { display: block; font-size: 12.5px; }

.start-done { margin-top: var(--sp-5); font-size: 13px; }
.start-done summary { cursor: pointer; color: var(--ink-soft); }
.start-done ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.start-done li { padding: 4px 0; }
.start-done i { color: #16a34a; margin-right: 6px; }
.start-done span { color: var(--ink-soft); }

.start-escape {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-soft);
}

/* Les intertitres du menu.

   Vingt entrées à plat, toutes de même poids : il fallait les relire pour
   trouver la bonne, tous les jours. Quatre intertitres suffisent à rendre
   la colonne parcourable — on lit « Piloter » et l'on saute les six lignes
   qui ne concernent pas ce qu'on cherche.

   Discrets à dessein : un intertitre plus visible que les entrées qu'il
   coiffe déplacerait le problème au lieu de le résoudre. */

.sidebar .nav-group {
    margin: 18px 0 4px;
    padding: 0 22px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.38);
    list-style: none;
}

.sidebar .nav-group:first-child { margin-top: 4px; }

/* Le bouton qui referme la barre de mise en service.

   Elle flotte : quelle que soit la place réservée en bas du document, elle
   recouvre ce qui passe sous elle pendant qu'on fait défiler — sur un
   dossier, le milieu du message reçu. Pouvoir la refermer est la seule
   réponse honnête ; elle revient quand l'étape change. */

.setup-bar-close {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ink-faint, #8a99a8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.setup-bar-close:hover { color: var(--ink, #17222e); }
.setup-bar[hidden] { display: none; }

/* La description dans « Mes entrées ».

   Deux défauts, l'un après l'autre, et le second créé en corrigeant le
   premier :

   1. la cellule portait `text-overflow: ellipsis` **sans** `white-space:
      nowrap` — l'ellipse ne s'applique jamais dans ce cas, le texte revient
      à la ligne, et une description un peu longue étirait toute la rangée ;
   2. l'envelopper dans un élément pour la replier a volé la cible du clic :
      la description a cessé d'être modifiable, sur l'écran qui sert
      précisément à corriger.

   D'où `pointer-events: none` sur l'enveloppe : elle borne l'affichage et
   laisse passer le clic jusqu'à la cellule, qui reste ce qu'on édite. Deux
   lignes dans le tableau, tout le texte dans la zone d'édition. */

.desc-cell { max-width: 280px; }

.desc-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    /* La cellule reste la cible : sans cela, `makeEditable` ne se
       déclenche plus et la description devient la seule colonne du tableau
       qu'on ne peut pas corriger. */
    pointer-events: none;
}


.edit-textarea {
    width: 100%;
    min-height: 5.5em;
    resize: vertical;
    font: inherit;
    line-height: 1.4;
}

/* Ce qui n'est pas un réglage, replié.

   La page de configuration alignait huit cartes de même poids : les étapes
   à faire, les compléments, les pondérations, deux jeux de données de
   démonstration, la liste des écrans. Tout au même niveau, tout en prose —
   on la parcourait en lisant, ce qui est le contraire d'une page de
   réglages. */

.tools-fold { margin: var(--sp-4) 0; }

.tools-fold > summary {
    cursor: pointer;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

.tools-fold > summary:hover { color: var(--brand); border-color: var(--line-strong); }
.tools-fold[open] > summary { margin-bottom: var(--sp-3); }

/* Le poste de travail : deux colonnes ======================================

   À gauche ce qui demande une action maintenant, à droite ce à quoi on
   revient. La colonne de droite est étroite à dessein : elle se consulte
   d'un coup d'œil entre deux appels, elle ne se lit pas.

   En dessous de 1100 px les deux colonnes s'empilent, les rappels dus en
   premier — c'est la seule chose de la journée qui ne se retrouve nulle
   part ailleurs si on l'oublie.                                            */

.ai-page.poste .poste-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: var(--sp-5);
    align-items: start;
}

.ai-page.poste .poste-main,
.ai-page.poste .poste-side {
    /* Élément de grille : sans ceci il refuse de rétrécir sous son contenu
       et pousse la page — le défaut déjà rencontré sur la facturation. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

@media (max-width: 1100px) {
    .ai-page.poste .poste-layout { grid-template-columns: minmax(0, 1fr); }
    .ai-page.poste .poste-side { order: -1; }
}

/* -- Les rappels dus ----------------------------------------------------- */

.ai-page.poste .callbacks.is-due {
    border-left: 3px solid var(--warn);
}

.ai-page.poste .callback-list,
.ai-page.poste .journal-list,
.ai-page.poste .presence-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-page.poste .callback-list > li {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
}
.ai-page.poste .callback-list > li:first-child { border-top: 0; }

.ai-page.poste .callback-when {
    font-size: var(--fs-meta);
    color: var(--ink-soft);
}
.ai-page.poste .callback-when.is-asap {
    color: var(--warn);
    font-weight: 600;
}
.ai-page.poste .callback-note {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.ai-page.poste .callback-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.ai-page.poste .callback-actions form { margin: 0; }

/* -- Le journal du jour -------------------------------------------------- */

.ai-page.poste .journal-list > li {
    display: grid;
    grid-template-columns: 16px auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
}
.ai-page.poste .journal-list > li:first-child { border-top: 0; }
.ai-page.poste .journal-list > li.is-running { color: var(--brand); font-weight: 600; }
.ai-page.poste .journal-sens { color: var(--ink-faint); font-size: var(--fs-meta); }
.ai-page.poste .journal-heure { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ai-page.poste .journal-qui {
    /* Un nom long ne doit pas casser la grille du journal. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-page.poste .journal-duree {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -- L'équipe ------------------------------------------------------------ */

.ai-page.poste .presence-list > li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
}
.ai-page.poste .presence-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ok);
}
.ai-page.poste .presence-list > li.is-busy .presence-dot { background: var(--warn); }
.ai-page.poste .presence-name { flex: 1 1 auto; min-width: 0; }
.ai-page.poste .presence-state {
    font-size: var(--fs-meta);
    color: var(--ink-soft);
}

/* -- Qualifier l'appel --------------------------------------------------- */

.ai-page.poste .outcome-row {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
}
.ai-page.poste .outcome-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.ai-page.poste .outcome-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--fs-sm);
    cursor: pointer;
}
/* Le bouton radio reste dans le document — il porte le nom et la valeur, et
   c'est lui que lit le clavier. Seule son apparence disparaît. */
.ai-page.poste .outcome-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ai-page.poste .outcome-choice:hover { border-color: var(--brand); }
.ai-page.poste .outcome-choice.is-picked {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
/* Le parcours au clavier doit rester visible malgré le radio masqué. */
.ai-page.poste .outcome-choice:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.ai-page.poste .outcome-callback {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.ai-page.poste .outcome-callback[hidden] { display: none; }

.ai-page.poste .empty-note {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}

/* La barre de démarrage : le champ prend la place, les boutons la leur.
   Avec `flex` par défaut le champ se comprimait sous 130 px dès qu'un second
   bouton est apparu, et le mot « appelant » ne tenait plus. */
.ai-page.poste .call-start-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}
.ai-page.poste .call-start-row .form-control {
    flex: 1 1 220px;
    min-width: 0;
}
.ai-page.poste .call-start-row .btn { flex: 0 0 auto; }

.ai-page.poste .empty-hints {
    margin: var(--sp-3) 0 var(--sp-4);
    padding-left: var(--sp-4);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.ai-page.poste .empty-hints > li { margin-bottom: var(--sp-2); }

/* La pastille du journal passe à la ligne suivante — la grille n'a que
   quatre colonnes et l'auto-placement la renvoyait dans la première, large
   de 16 px : « à » s'y retrouvait seul, « encoder » débordant à côté. */
.ai-page.poste .journal-list > li .pill {
    grid-column: 3 / -1;
    justify-self: start;
    margin-top: 2px;
}

/* ==========================================================================
   La scène et le rail — voir docs/DESIGN.md

   Constat du cabinet : « on dirait un bloc ajouté à une page, avec un tas de
   réglages ». Mon poste comptait 11 cartes, l'écran de configuration 14,
   toutes du même poids, chacune coiffée d'un titre à icône décorative. Rien
   ne disait où regarder, et trois cartes servaient à annoncer qu'elles
   étaient vides.

   Une page a désormais deux zones, et une seule peut réclamer l'attention.
   ========================================================================== */

/* -- L'étiquette de section ------------------------------------------------
   Remplace `h2 + icône`. Elle nomme sans crier : c'est un repère pour l'œil
   qui balaie, pas un titre de chapitre. */
.ai-page .eyebrow {
    margin: 0 0 var(--sp-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.ai-page .eyebrow .eyebrow-count {
    font-size: 0.68rem;
    letter-spacing: 0;
    color: var(--ink-soft);
}

/* -- La ligne d'état -------------------------------------------------------
   Une ligne au lieu de trois cartes disant « aucun ». Elle absorbe tout ce
   qui n'a rien à montrer. */
.ai-page .statusline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    padding: 0 0 var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.ai-page .statusline b {
    color: var(--ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.ai-page .statusline .status-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
/* Le segment qui appelle une action est le seul accentué de la ligne. */
.ai-page .statusline .status-item.is-due b { color: var(--warn); }
.ai-page .statusline a.status-item:hover { color: var(--ink); }

/* -- La scène --------------------------------------------------------------
   Ce qu'on fait maintenant. Sans cadre : la page est le cadre. */
.ai-page .stage {
    margin-bottom: var(--sp-6);
}
.ai-page .stage-title {
    margin: 0 0 var(--sp-2);
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.ai-page .stage-lead {
    margin: 0 0 var(--sp-4);
    max-width: 62ch;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* -- Le rail ---------------------------------------------------------------
   Ce qu'on consulte du coin de l'œil. Dense, sans cadre, sans icône. */
.ai-page .rail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    font-size: var(--fs-sm);
}
.ai-page .rail-group + .rail-group {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.ai-page .rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ai-page .rail .rail-empty {
    margin: 0;
    color: var(--ink-faint);
    font-size: var(--fs-meta);
}

/* Les nombres s'alignent : une colonne de durées se compare d'un coup
   d'œil, ou ne se compare pas. */
.ai-page .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* -- Densité ---------------------------------------------------------------
   24 px de marge intérieure conviennent à une page qu'on lit une fois ; pas
   à un écran qu'on refait cinquante fois par jour. La carte reste — pour un
   objet autonome qu'on manipule — mais cesse d'être la réponse à tout. */
.ai-page .card { padding: 18px; }
.ai-page .card > .eyebrow:first-child { margin-top: 0; }

/* Les champs reliés ========================================================
   La liste se pose sous le champ, sans décaler la page : un formulaire qui
   se réorganise pendant qu'on tape fait perdre le fil.                      */

.ai-page .lookup-list,
.lookup-list {
    position: absolute;
    z-index: 60;
    min-width: 260px;
    max-width: 420px;
    max-height: 280px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--surface, #fff);
    border: 1px solid var(--line-strong, #cfd8e0);
    border-radius: var(--r-sm, 6px);
    box-shadow: 0 6px 20px rgba(16, 32, 48, 0.14);
}
.lookup-list[hidden] { display: none; }

.lookup-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 9px;
    border-radius: 4px;
    cursor: pointer;
}
.lookup-item:hover,
.lookup-item.is-active { background: var(--surface-sunken, #f6f8fa); }

.lookup-name { font-size: 0.9rem; color: var(--ink, #17222e); }
.lookup-match { font-weight: 700; color: var(--brand, #123A63); }
.lookup-meta { font-size: 0.72rem; color: var(--ink-faint, #8a99a8); }
.lookup-empty { padding: 8px 10px; font-size: 0.8rem; color: var(--ink-soft, #5b6b7c); font-style: italic; }
/* L'ancre : la liste prend toute la largeur du champ qu'elle prolonge. */
.lookup-note { margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-soft, #5b6b7c); font-style: italic; }
.lookup-note[hidden] { display: none; }
.lookup-anchor { position: relative; }
.lookup-anchor .lookup-list { left: 0; right: 0; min-width: 0; max-width: none; }
/* Le <select> source de vérité, caché quand le champ de frappe le pilote. */
.lookup-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Ce qu'on sait déjà de la personne choisie. Sous le champ, discret : c'est
   une information, pas un avertissement. */
.lookup-context {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft, #5b6b7c);
}
.lookup-context[hidden] { display: none; }

/* Le second chemin d'une étape de mise en service : présent, mais clairement
   secondaire. Le bouton porte le chemin court, ce lien le chemin long. */
.ai-page .setup-alt {
    display: inline-block;
    margin-left: var(--sp-3);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    text-decoration: underline;
}
.ai-page .setup-alt:hover { color: var(--ink); }

/* Les pastilles de type d'acte : ce que les cinq grandes tuiles faisaient,
   à côté du champ qu'elles remplissent plutôt qu'au-dessus du formulaire. */
.type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

/* Les pastilles vivent **au-dessus** de la grille, pas dans une de ses
   cellules.

   Trois tentatives ont échoué avant celle-ci, et chacune enseigne quelque
   chose : dans une colonne de 250 px elles s'empilaient une par ligne ;
   forcées à `max-content` elles écrasaient leurs voisines (« Date » affichait
   « 14, ») ; et `grid-column: 1 / -1` se comporte mal avec `auto-fit`, les
   champs se chevauchant franchement. Hors de la grille, la question ne se
   pose plus — et c'est d'ailleurs leur place : on choisit la nature de
   l'acte avant de remplir le reste. */

.type-chip {
    padding: 5px 12px;
    border: 1px solid var(--line-strong, #cfd8e0);
    border-radius: 999px;
    background: none;
    font: inherit;
    font-size: 0.82rem;
    color: var(--ink-soft, #5b6b7c);
    cursor: pointer;
}
.type-chip:hover { border-color: var(--brand, #123A63); }
.type-chip.is-picked {
    border-color: var(--brand, #123A63);
    background: var(--brand, #123A63);
    color: #fff;
}

/* ==========================================================================
   Aucune cellule de grille ne déborde sur sa voisine

   Un élément de grille vaut `min-width: auto` : il refuse de devenir plus
   étroit que son contenu. Un texte sans espace où se couper — une référence
   de police `SL/HEALTH/2022/4587`, une adresse mail longue, un nom de
   fichier — élargit donc sa colonne au-delà de sa part et se superpose à la
   suivante.

   Le défaut est apparu deux fois : la facturation débordait de 260 px, et la
   ligne d'identité d'un dossier écrivait la référence par-dessus le nom de
   l'assuré. Deux corrections ponctuelles auraient appelé une troisième — la
   règle vaut donc pour toutes les grilles d'un coup.

   `min-width: 0` n'autorise qu'une chose : rétrécir. Rien ne change pour une
   grille dont le contenu tenait déjà.
   ========================================================================== */

.ai-page .config-links > *,
.ai-page .doc-columns > *,
.ai-page .fact-row > *,
.ai-page .form-grid > *,
.ai-page .mode-picker > *,
.ai-page .month-stats > *,
.ai-page .optional-grid > *,
.ai-page .supervision-grid > *,
.ai-page .trial-samples > *,
.ai-page dl.qualification > *,
.cal-year > *,
.cal-year-days > *,
.encode-fields > *,
.fact-fields > *,
.person-facts > *,
.team-grid > * { min-width: 0; }

/* Les demandes d'un mail, une par ligne.

   Elles arrivaient en un paragraphe qui enchaînait « (1) … (2) … (3) … ».
   Le gestionnaire les traite pourtant une par une : lues ainsi, il devait
   les redécouper de tête à chaque ouverture du dossier. */
.ai-page .demandes {
    margin: 0 0 var(--sp-3);
    padding-left: 22px;
}
.ai-page .demandes > li {
    margin-bottom: var(--sp-2);
    line-height: 1.5;
}
.ai-page .demande-objet {
    display: block;
    font-weight: 600;
    color: var(--ink);
}
.ai-page .demande-detail {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* Ce qu'on consulte rarement se replie ======================================

   La fiche d'un dossier comptait 14 sections, 902 mots et 42 boutons, toutes
   dépliées et de même poids — sur l'écran où un gestionnaire passe sa
   journée. Le journal, les sources consultées et les faits relevés ne se
   lisent pas à chaque ouverture : ils se consultent quand une action
   surprend, ou quand on cherche qui a fait quoi.

   Rien n'est retiré — c'est un clic, et le résumé dit ce qu'on y trouve.  */

.ai-page .fold { margin-bottom: var(--sp-4); }
.ai-page .fold > summary {
    cursor: pointer;
    padding: var(--sp-2) 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-page .fold > summary::-webkit-details-marker { display: none; }
.ai-page .fold > summary::before {
    content: '▸';
    position: absolute;
    margin-left: -14px;
    color: var(--ink-faint);
}
.ai-page .fold[open] > summary::before { content: '▾'; }
.ai-page .fold > summary { position: relative; padding-left: 0; }

.ai-page .fold-titre {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* L'aide ne s'affiche que replié : une fois ouvert, le contenu parle. */
.ai-page .fold-aide {
    font-size: var(--fs-meta);
    color: var(--ink-faint);
}
.ai-page .fold[open] > summary .fold-aide { display: none; }

/* ---- Attribution en lot ------------------------------------------------
   La barre n'apparaît qu'une fois quelque chose coché (`hidden` posé par le
   gabarit, retiré par le script). Elle est collante en haut de la liste :
   sur une file longue on coche en bas et le bouton doit rester atteignable
   sans remonter. */
.bulk-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem .9rem;
    margin-bottom: .5rem;
    background: var(--surface-raised, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-left: 3px solid var(--accent, #2563eb);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.bulk-bar[hidden] { display: none; }

.bulk-count {
    font-size: .875rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.bulk-bar .form-control {
    width: auto;
    min-width: 12rem;
    margin: 0;
}

/* La colonne de cases : assez étroite pour ne rien prendre au sujet, assez
   large pour que la case soit cliquable au doigt. */
.queue-table .col-pick {
    width: 2.5rem;
    text-align: center;
    padding-right: 0;
}

.queue-table .col-pick input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--accent, #2563eb);
}

/* En pile, les cellules portent leur intitulé et s'empilent. La case n'a
   pas d'intitulé : laissée dans le flux, elle occupait une ligne entière et
   vide en haut de chaque fiche.

   Elle se pose donc dans l'angle, là où on la cherche sur une fiche. La
   masquer aurait été plus simple et faux : un superviseur sur un portable
   de 1024 px aurait perdu l'attribution en lot, alors que c'est
   exactement lui qui distribue le courrier du lundi. Le seuil est celui du
   repliement du tableau — les deux doivent changer ensemble. */
@media (max-width: 1150px) {
    .ai-page .queue-table tr { position: relative; }
    .ai-page .queue-table td.col-pick {
        position: absolute;
        top: var(--sp-3);
        right: var(--sp-3);
        width: auto;
        padding: 0;
    }
    /* La barre suit la page : collée en haut d'une liste de fiches, elle
       masquerait la première. */
    .bulk-bar { position: static; }
}

/* Le bouton « Je le prends » dans la file : discret tant qu'on ne le
   cherche pas, franc au survol. Il occupe la place du nom du gestionnaire,
   donc il ne doit pas élargir la colonne. */
.btn-xs {
    padding: .2rem .5rem;
    font-size: .75rem;
    line-height: 1.4;
    border-radius: 5px;
}

.claim-inline {
    white-space: nowrap;
    color: var(--accent, #2563eb);
    border: 1px dashed var(--border, #cbd5e1);
    background: transparent;
    cursor: pointer;
}

.claim-inline:hover,
.claim-inline:focus-visible {
    border-style: solid;
    border-color: var(--accent, #2563eb);
    background: var(--accent-soft, #eff6ff);
}

.claim-form { margin-top: .5rem; }

/* Le lien d'un bandeau d'alerte : il hérite de la couleur du bandeau
   plutôt que de la couleur de lien par défaut, qui jurerait sur fond
   rouge. Souligné en permanence — sur un fond déjà coloré, le seul
   changement de teinte ne suffit pas à dire « cliquable ». */
.alert-action {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.alert-action:hover,
.alert-action:focus-visible { text-decoration-thickness: 2px; }

/* ---- Fiche courtier ------------------------------------------------------
   Une scène (les dossiers) et un rail (ce qu'on consulte). Le rail passe
   dessous en écran étroit plutôt que de comprimer le tableau : une colonne
   d'échéances qui se replie sur deux lignes ne se compare plus. */
.ai-page.courtier-page .courtier-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--sp-6, 28px);
    align-items: start;
}

/* Sans cela, la colonne de gauche prend la largeur de son tableau et
   pousse le rail hors de l'écran : un élément de grille vaut `min-width:
   auto` par défaut, c'est-à-dire « aussi large que mon contenu ». */
.ai-page.courtier-page .courtier-main { min-width: 0; }

/* Même seuil que le repliement de la file, et pour la même raison : c'est
   la zone de contenu qui compte, pas la fenêtre, et le menu latéral lui
   prend 308 px. À 1000 px de fenêtre, la colonne principale tombait à
   400 px et « Dossier » à 177 — un objet d'assurance s'y pliait sur quatre
   lignes. Le rail passe donc dessous plus tôt. Un seul nombre pour les deux
   écrans : deux seuils voisins mais différents finissent par diverger. */
@media (max-width: 1150px) {
    .ai-page.courtier-page .courtier-layout { grid-template-columns: 1fr; }
}

/* Les paires du rail : l'étiquette à gauche, la valeur à droite, alignées
   sur une seule colonne d'étiquettes pour qu'on les balaie sans lire. */
.ai-page .rail-pairs {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--sp-3, 10px);
    margin: 0;
}

.ai-page .rail-pairs dt {
    color: var(--ink-faint);
    font-size: var(--fs-meta);
    white-space: nowrap;
}

.ai-page .rail-pairs dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;   /* une adresse longue casse plutôt que déborde */
}

.ai-page .rail-note {
    margin: var(--sp-3, 10px) 0 0;
    padding-left: var(--sp-3, 10px);
    border-left: 2px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-meta);
    white-space: pre-line;
}

.ai-page .rail-mailbox {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2, 6px);
    padding: 3px 0;
}

.ai-page .rail-mailbox-address {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* -- Aujourd'hui, revue de l'équipe (2026-09) --------------------------------
   Une salutation plutôt qu'un compteur, une recherche en tête de page qui
   ouvre la barre de commande, des tuiles qui sont des portes, deux petits
   graphiques dessinés par le serveur. Tout est préfixé `.jour-` pour ne
   rien toucher aux autres pages.                                          */
.ai-page.jour .jour-recherche {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: var(--sp-4);
    border: 1px solid #d9e0e7; border-radius: 8px; background: #fff;
    color: #8a94a3; cursor: text;
}
.ai-page.jour .jour-recherche:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.ai-page.jour .jour-recherche-input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 0.98rem; color: #1f2733;
}
.ai-page.jour .jour-recherche kbd {
    font-size: 0.72rem; color: #8a94a3; border: 1px solid #d9e0e7;
    border-radius: 4px; padding: 1px 6px; background: #f6f8fa; white-space: nowrap;
}

.ai-page.jour .jour-bandeau {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; margin-bottom: var(--sp-4);
    border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #1e3a8a;
}
.ai-page.jour .jour-bandeau .btn { margin-left: auto; }

.ai-page.jour .jour-head h1.jour-salut { font-size: 1.35rem; font-weight: 650; }
.ai-page.jour .jour-sous-titre { margin: 4px 0 0; color: #5b6675; }
.ai-page.jour .jour-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-page.jour .jour-voir { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #5b6675; }
.ai-page.jour .jour-voir select { width: auto; padding: 4px 8px; font-size: 0.88rem; }

/* Une tuile-lien : même dessin que la tuile d'avant, le pointeur en plus.
   Pas de bleu ni de soulignement — c'est une carte qu'on ouvre, pas un
   lien dans une phrase. */
.ai-page.jour .jour-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.ai-page.jour .jour-tuiles > * { min-width: 0; }
.ai-page.jour .jour-tuile {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
    border: 1px solid #e3e9ee; border-radius: 6px; background: #f6f8fa;
    color: inherit; text-decoration: none; min-width: 0;
    transition: border-color 0.12s, background 0.12s;
}
.ai-page.jour .jour-tuile:hover,
.ai-page.jour .jour-tuile:focus-visible { border-color: #2563eb; background: #eef4ff; text-decoration: none; }
.ai-page.jour .jour-tuile-titre { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a94a3; }
.ai-page.jour .jour-tuile-valeur { font-size: 1.4rem; font-weight: 650; color: #1f2733; text-align: left; }

.ai-page.jour .jour-graphes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin-top: 16px;
}
.ai-page.jour .jour-graphes > * { min-width: 0; }
.ai-page.jour .jour-graphe { margin: 0; padding: 10px 14px; border: 1px solid #e3e9ee; border-radius: 6px; }
.ai-page.jour .jour-graphe figcaption { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a94a3; margin-bottom: 6px; }
.ai-page.jour .jour-graphe svg { width: 100%; height: auto; display: block; }
.ai-page.jour .jour-graphe-barre { fill: #2563eb; }
.ai-page.jour .jour-graphe-barre.is-vide { fill: #e3e9ee; }
.ai-page.jour .jour-graphe-label { font-size: 11px; fill: #5b6675; }
.ai-page.jour .jour-graphe-valeur { font-size: 11px; font-weight: 600; fill: #1f2733; }

@media (max-width: 560px) {
    .ai-page.jour .jour-head { flex-direction: column; align-items: stretch; }
}

/* Les pièces jointes d'un dossier (app/models/ticket_piece.py). */
.pieces-recues { margin: 0 0 1rem; }
.pieces-recues h3 { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--ai-ink, #1f2d3d); }
.pieces-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.pieces-list .piece { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem;
    border: 1px solid #e3e8ee; border-radius: 8px; background: #fff; min-width: 0; flex-wrap: wrap; }
.pieces-list.is-compact .piece { padding: 0.35rem 0.6rem; background: #f7f9fb; }
.piece-icon { font-size: 1.2rem; color: #4b6478; flex: 0 0 auto; }
.piece-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.piece-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-meta { font-size: 0.8rem; color: #6b7c8c; }
.piece-unread { color: #9a6700; }
.piece-actions { display: flex; gap: 0.3rem; flex: 0 0 auto; margin-left: auto; }

/* Compétences éditables sur la fiche d'une personne. */
.competences-form .eyebrow { margin: 0.8rem 0 0.3rem; }
.competences-form .modules-list.is-inline { display: flex; gap: 1rem; flex-wrap: wrap; }
.competences-form .chip-picker { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0; }
.competences-form .chip-pick { cursor: pointer; border: 1px solid #d5dde5; background: #f4f7fa; }
.competences-form .competences-nums { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-top: 0.8rem; }
.competences-form .competences-nums label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.competences-form .competences-nums input[type=number] { width: 6rem; }

/* ---------------------------------------------------------------------------
   Facturation — retours du 17 septembre 2026 (vague C).
   Le haut de page se resserre pour que la page commence par l'essentiel ;
   la grille des tarifs n'affiche plus que le prix facturé, en champ texte
   sans flèches, et gagne un groupe « Facturation » (budget, minimum, fee,
   licence) ; la synthèse et les rapports d'appels précèdent le tableau.
   --------------------------------------------------------------------------- */
.ai-page.facturation .page-header { margin-bottom: 10px; }
.ai-page.facturation .page-header h1 { font-size: 1.35rem; }
.ai-page.facturation .page-subtitle { margin: 0; }
.ai-page.facturation .fact-chiffres { margin: 0 0 10px; gap: 10px; }
.ai-page.facturation .fact-chiffres > div { padding: 8px 14px; }
.ai-page.facturation .fact-chiffres dd { font-size: 1.3rem; }
.ai-page.facturation .tab-navigation { margin-bottom: 10px; }

/* Les champs de tarif : un nombre, sans flèches ni unité répétée à chaque
   cellule — l'unité est dans l'en-tête de colonne. */
.ai-page.facturation #tariff-table .rate-input {
    width: 4.6rem; padding: 0.25rem 0.35rem; font-size: 0.85rem;
    text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.ai-page.facturation #tariff-table .rate-input::-webkit-outer-spin-button,
.ai-page.facturation #tariff-table .rate-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ai-page.facturation #tariff-table th small { display: block; font-weight: 500; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.ai-page.facturation #tariff-table td { padding: 0.3rem 0.45rem; vertical-align: middle; }

/* Deux rangées d'en-tête collantes : la première fait 24 px de haut, la
   seconde se cale juste en dessous. */
.ai-page.facturation #tariff-table thead tr.group-row th {
    top: 0; height: 24px; padding: 0 0.45rem; line-height: 24px;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    text-align: center; color: var(--ink-faint); background: var(--surface-sunken, #f4f7fa);
}
.ai-page.facturation #tariff-table thead tr.col-row th { top: 24px; }

/* Le groupe « Facturation », séparé d'un filet à gauche et à droite. */
.ai-page.facturation #tariff-table .group-terms:first-of-type,
.ai-page.facturation #tariff-table th.group-terms + th:not(.group-terms),
.ai-page.facturation #tariff-table td.group-terms + td:not(.group-terms) { border-left: 1px solid var(--line, #dbe2ea); }
.ai-page.facturation #tariff-table tr.group-row th.group-terms { color: var(--brand); border-left: 1px solid var(--line, #dbe2ea); border-right: 1px solid var(--line, #dbe2ea); }
.ai-page.facturation #tariff-table th.group-terms { background: rgba(0, 169, 170, 0.06); }
.ai-page.facturation .terms-cell { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ai-page.facturation .terms-cell .terms-input { width: 3.6rem; }
.ai-page.facturation .terms-cell .currency { margin: 0; font-size: 0.72rem; color: var(--ink-faint); }

/* Synthèse et rapports, en tête de l'onglet Rapport. */
.ai-page.facturation .fact-synthese-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; }
.ai-page.facturation .fact-synthese-form > label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.ai-page.facturation .fact-synthese-form > label .form-control { width: auto; min-width: 8rem; text-transform: none; letter-spacing: 0; }
/* `hidden` doit l'emporter sur le `display: flex` juste au-dessus. Sans
   cela, passer la synthèse en « Année » laissait le choix du mois à
   l'écran : une règle de classe bat l'attribut, qui n'a que la priorité
   de la feuille du navigateur. */
.ai-page.facturation .fact-synthese-form > label[hidden] { display: none; }
.ai-page.facturation .fact-synthese-mode { display: flex; gap: 6px; }
.ai-page.facturation .fact-rapports-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #dbe2ea); }
.ai-page.facturation .fact-rapports-label { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }

/* Les lignes de fee et de licence : un supplément, pas un gestionnaire. */
.ai-page.facturation .billing-table tr.fact-supplement td { color: var(--ink-soft); font-style: italic; }
.ai-page.facturation .billing-table tr.fact-supplement td.amount { font-style: normal; }


/* ==========================================================================
   Retours de l'équipe du 17 septembre 2026 — rapports et supervision
   ========================================================================== */

/* L'en-tête de page qui reste visible en défilant. Il colle au haut de la
   fenêtre, prend le fond de la page pour couvrir ce qui passe dessous, et
   se signale par un filet. Il vit dans `.main-content`, à droite du menu :
   il ne le recouvre donc jamais. Sous 700 px, la barre du menu mobile
   occupe déjà le haut de l'écran : l'en-tête redevient ordinaire. */
.ai-page .page-header--fixe {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0 -1.5rem var(--sp-5);
    padding: var(--sp-3) 1.5rem;
    background: #f4f6f9;   /* --main-bg est un dégradé : un aplat couvre mieux */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 14px -12px rgba(10, 22, 34, 0.35);
}
@media (max-width: 700px) {
    .ai-page .page-header--fixe {
        position: static;
        margin: 0 0 var(--sp-5);
        padding: 0;
        border-bottom: 0;
        box-shadow: none;
    }
}

/* Rapports : le mois en cours, le mois précédent et l'année, chacun dans
   sa carte. */
.ai-page.rapports .rapports-periodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.ai-page.rapports .rapports-periodes > * { min-width: 0; }
.ai-page.rapports .periode-card { margin-bottom: 0; }
.ai-page.rapports .periode-card .card-title-row { margin-bottom: var(--sp-3); }
.ai-page.rapports .periode-card .jour-chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-page.rapports .periode-card.is-annee .jour-chiffres > div { background: #fff; }

/* La fenêtre « Rapport d'activité » : le choix de la période en boutons. */
/* `.form-grid` pose display:grid et gagnerait sur l'attribut hidden. */
.rapport-periode [hidden] { display: none !important; }
.rapport-periode .rp-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.rapport-periode .rp-choix label { position: relative; }
.rapport-periode .rp-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.rapport-periode .rp-choix span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    border: 1px solid #cfd8e0; border-radius: 6px;
    background: #fff; color: #17222e;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.rapport-periode .rp-choix span i { color: #8a99a8; }
.rapport-periode .rp-choix input:checked + span {
    background: #123A63; border-color: #123A63; color: #fff;
}
.rapport-periode .rp-choix input:checked + span i { color: #CDEEF0; }
.rapport-periode .rp-choix input:focus-visible + span { outline: 2px solid #00A9AA; outline-offset: 2px; }
.rapport-periode .modal-body .form-group { margin-bottom: 14px; }
.rapport-periode .modal-body .form-group:last-child { margin-bottom: 0; }
.rapport-periode .modal-body .form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.rapport-periode .modal-body input[type="number"].form-control { width: 100%; padding: 8px 10px; font-size: 0.9rem; }
.rapport-periode .modal-body .form-label { display: block; margin-bottom: 4px; font-size: 0.82rem; font-weight: 600; color: #5b6b7c; }
.rapport-periode .modal-head .btn { margin: 0; }
@media (max-width: 560px) {
    .rapport-periode .modal-body .form-grid { grid-template-columns: 1fr; }
}

/* Un en-tête collant ne colle qu'à l'ancêtre qui défile. `.ai-page` porte
   `overflow-x: hidden` (contre le débordement horizontal), ce qui en fait
   un conteneur de défilement à lui seul — et l'en-tête restait donc en
   place. `clip` coupe sans créer de conteneur : la fenêtre reste ce qui
   défile, et l'en-tête colle. */
.ai-page.rapports, .ai-page.supervision { overflow-x: clip; overflow-y: visible; }

/* Facturation, plus serrée : le tableau des tarifs tenait sur 2 000 px et
   obligeait à faire défiler pour lire une ligne. Unités dans l'en-tête,
   champs étroits, marges courtes — treize colonnes sur un écran. */
.ai-page.facturation .card { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.ai-page.facturation .page-header { margin-bottom: 0.5rem; }
.ai-page.facturation .month-stats { gap: 0.6rem; margin-bottom: 0.6rem; }
.ai-page.facturation .month-stats .stat-card { padding: 0.55rem 0.8rem; }
.ai-page.facturation .card-title-row { margin-bottom: 0.5rem; }
.ai-page.facturation #tariff-table { font-size: 0.84rem; }
.ai-page.facturation #tariff-table th { padding: 0.3rem 0.3rem; font-size: 0.68rem; line-height: 1.15; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.ai-page.facturation #tariff-table th:first-child { text-align: left; }
.ai-page.facturation #tariff-table th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.ai-page.facturation #tariff-table tr.group-row th { padding: 0.2rem 0.35rem; }
.ai-page.facturation #tariff-table td { padding: 0.2rem 0.3rem; vertical-align: middle; text-align: center; }
.ai-page.facturation #tariff-table td:first-child { text-align: left; max-width: 13rem; }
.ai-page.facturation #tariff-table .name-cell { display: flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; overflow: hidden; }
.ai-page.facturation #tariff-table .name-cell strong { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ai-page.facturation #tariff-table .effective-date-badge { font-size: 0.68rem; flex: 0 0 auto; }
.ai-page.facturation #tariff-table .rate-input { width: 3.7rem; padding: 0.2rem 0.3rem; font-size: 0.82rem; text-align: right; }
.ai-page.facturation #tariff-table .terms-input { width: 3.4rem; }
.ai-page.facturation #tariff-table .date-input { width: 5.4rem; padding: 0.2rem 0.3rem; font-size: 0.82rem; }
.ai-page.facturation #tariff-table .action-cell { justify-content: center; }
.ai-page.facturation #tariff-table .btn-history { width: 1.7rem; height: 1.7rem; padding: 0; font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ai-page.facturation #tariff-table .btn-history i { margin: 0; }
.ai-page.facturation .quick-tariff-form, .ai-page.facturation .advanced-config .form-row { margin-bottom: 0.4rem; }

/* Les documents à joindre au brouillon, en boutons sous le texte. */
.ai-page .reply-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-page .reply-attachments-label { font-size: var(--fs-sm); color: var(--ink-soft); margin-right: 4px; }

/* Le canal WhatsApp d'un dossier : la pastille dans la liste et l'en-tête,
   la note sous le formulaire de réponse. Vert WhatsApp atténué, pour qu'on
   reconnaisse le canal sans qu'il crie. */
.pill.pill-whatsapp { background: #e6f6ec; color: #1f7a45; border: 1px solid #bfe6cd; }
.pill.pill-whatsapp i { margin-right: 2px; }
.ai-page .reply-whatsapp-note i { color: #25d366; margin-right: 4px; }
.fiche-grid .whatsapp-canal-note { display: block; }
/* Le logo du courtier à la place des initiales, sur sa page. */
.personne-head .courtier-logo { flex-basis: 48px; width: 48px; height: 48px; object-fit: cover; border-radius: 10px; padding: 0; }

/* --------------------------------------------------------------------------
   Le tableau de bord de la facturation
   --------------------------------------------------------------------------
   Rempli par `app/static/js/facturation-tableau.js`. Les couleurs des parts
   viennent du serveur (`NATURES` dans `app/utils/synthese_facturation.py`) :
   elles disent quelle part est quoi, et deux listes séparées finiraient par
   se contredire. Ne pas les redéclarer ici.

   Les animations sont des transitions, jamais des `@keyframes` : le
   navigateur interpole entre deux états réels, donc un changement de
   période en cours d'animation repart de là où l'on en est au lieu de
   sauter au début. */

.ai-page .tdb { margin-top: var(--sp-5); }
.ai-page .tdb.is-chargement { opacity: 0.55; transition: opacity 0.15s ease; }

.ai-page .tdb-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
/* Une cellule de grille vaut `min-width: auto` : elle refuse de devenir
   plus étroite que son contenu, et un montant sans espace où se couper
   pousse alors sa voisine hors de la carte. */
.ai-page .tdb-cartes > * { min-width: 0; }

.ai-page .tdb-carte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    /* Un liseré de couleur plutôt qu'un fond teinté : la carte reste
       lisible, et la couleur ne se dispute pas avec le nombre. */
    border-top: 3px solid var(--line-strong);
}
.ai-page .tdb-carte--hausse { border-top-color: var(--ok); }
.ai-page .tdb-carte--baisse { border-top-color: var(--warn); }

.ai-page .tdb-carte-libelle {
    font-size: var(--fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}
.ai-page .tdb-carte-valeur {
    font-size: 1.55rem;
    font-weight: 660;
    color: var(--brand);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ai-page .tdb-carte-detail {
    margin-top: 6px;
    font-size: var(--fs-meta);
    color: var(--ink-soft);
}

/* -- les blocs -- */

.ai-page .tdb-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.ai-page .tdb-grille > * { min-width: 0; }
.ai-page .tdb-bloc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    min-width: 0;
}
/* L'évolution a besoin de largeur : un mois fait trente et une barres. */
.ai-page .tdb-bloc--large { grid-column: span 2; }
.ai-page .tdb-bloc-titre {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 650;
    color: var(--ink);
}
.ai-page .tdb-note {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    line-height: 1.5;
}

/* -- l'anneau --
   Le total tient **dans** le disque, sans jamais toucher la couronne. Le
   centre est donc une boîte posée à 21 % de chaque bord : à l'intérieur du
   rayon libre quel que soit le diamètre rendu. Laisser le texte occuper
   tout le cadre le faisait déborder sur l'anneau dès qu'un montant passait
   la dizaine de milliers, et l'on ne lisait plus ni l'un ni l'autre. */

.ai-page .tdb-anneau-cadre {
    position: relative;
    width: min(240px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
}
.ai-page .tdb-anneau-svg {
    width: 100%; height: 100%; display: block;
    /* Le zéro est en haut, pas à trois heures. */
    transform: rotate(-90deg);
}
.ai-page .tdb-anneau-fond {
    fill: none; stroke: var(--surface-sunken); stroke-width: 13;
}
.ai-page .tdb-anneau-part {
    fill: none; stroke-width: 13; stroke-linecap: butt;
    transition: stroke-dasharray 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-page .tdb-anneau-centre {
    position: absolute; inset: 21%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    /* Rien ne déborde sur l'anneau, même si un montant devenait plus long
       que prévu : mieux vaut un chiffre coupé qu'un anneau illisible. */
    overflow: hidden;
    pointer-events: none; text-align: center;
}
.ai-page .tdb-anneau-total {
    /* 1,05 rem et pas davantage : « 131 144,32 € » fait alors environ
       110 px, pour 139 px de boîte à 240 px de cadre. Le montant le plus
       long que cette facturation produise tient donc sans toucher la
       couronne. */
    font-size: 1.05rem;
    font-weight: 660; color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; line-height: 1.15;
}
.ai-page .tdb-anneau-note {
    font-size: 0.68rem; color: var(--ink-faint);
    white-space: nowrap; line-height: 1.2;
}

.ai-page .tdb-legende { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.ai-page .tdb-legende li {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line);
}
/* Le nom d'une nature se coupe plutôt que de repousser son montant. */
.ai-page .tdb-legende li > * { min-width: 0; }
.ai-page .tdb-legende li:last-child { border-bottom: none; }
.ai-page .tdb-pastille { width: 11px; height: 11px; border-radius: 3px; }
.ai-page .tdb-legende-nom {
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-page .tdb-legende-part {
    color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.ai-page .tdb-legende-montant {
    font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums;
    min-width: 86px; text-align: right;
}

/* -- l'évolution -- */

/* Le cadre porte les repères derrière les barres : une barre se lit alors
   en euros, et non seulement par comparaison avec sa voisine. */
.ai-page .tdb-cadre { position: relative; padding-left: 58px; }
.ai-page .tdb-reperes {
    position: absolute; inset: 0 0 22px 58px; pointer-events: none;
}
.ai-page .tdb-repere {
    position: absolute; left: 0; right: 0;
    border-top: 1px dashed var(--line);
}
.ai-page .tdb-repere:first-child { border-top-style: solid; }
.ai-page .tdb-repere-valeur {
    position: absolute; right: 100%; transform: translateY(-50%);
    padding-right: 8px;
    font-size: 0.65rem; color: var(--ink-faint);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ai-page .tdb-barres {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 230px;
}
.ai-page .tdb-barre {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}
.ai-page .tdb-barre-pile {
    display: flex;
    flex-direction: column-reverse;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    min-height: 2px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-page .tdb-barre-part { flex-basis: 0; min-height: 0; }
.ai-page .tdb-barre:hover .tdb-barre-pile { filter: brightness(1.12); }
.ai-page .tdb-barre-nom {
    margin-top: 5px;
    font-size: 0.65rem;
    color: var(--ink-faint);
    text-align: center;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    white-space: nowrap;
}

/* -- les classements -- */

.ai-page .tdb-rang { list-style: none; margin: 0; padding: 0; }
.ai-page .tdb-rang li { margin-bottom: var(--sp-3); }
.ai-page .tdb-rang li:last-child { margin-bottom: 0; }
.ai-page .tdb-rang-entete {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-2); font-size: var(--fs-sm); margin-bottom: 4px;
}
.ai-page .tdb-rang-nom {
    color: var(--ink); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cliquable, mais pas un lien bleu souligné : la couleur arrive au
   survol, comme partout ailleurs dans l'application. */
.ai-page a.tdb-rang-lien {
    text-decoration: none; cursor: pointer;
    transition: color 0.12s ease;
}
.ai-page a.tdb-rang-lien:hover,
.ai-page a.tdb-rang-lien:focus-visible { color: var(--brand); }
.ai-page .tdb-rang li:hover .tdb-rang-piste { background: #e6ecf2; }
.ai-page .tdb-rang-valeur {
    font-weight: 650; color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ai-page .tdb-rang-piste {
    height: 8px; border-radius: 999px;
    background: var(--surface-sunken); overflow: hidden;
}
/* La barre est découpée comme l'anneau, avec les mêmes couleurs : on voit
   du même coup qui est le plus gros et de quoi il vit. Les couleurs sont
   posées par le script, d'après ce que le serveur envoie. */
.ai-page .tdb-rang-barre {
    height: 100%; border-radius: 999px; overflow: hidden;
    display: flex;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-page .tdb-rang-part { flex-basis: 0; min-width: 0; }
.ai-page .tdb-rang-detail {
    margin-top: 4px; font-size: var(--fs-meta); color: var(--ink-faint);
}

/* -- le détail, replié -- */

.ai-page .tdb-detail { margin-top: var(--sp-3); }
.ai-page .tdb-detail > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 1px solid var(--line-strong);
    border-radius: 999px; font-size: var(--fs-sm);
    color: var(--ink-soft); background: var(--surface);
    cursor: pointer; list-style: none;
}
.ai-page .tdb-detail > summary::-webkit-details-marker { display: none; }
.ai-page .tdb-detail[open] > summary { margin-bottom: var(--sp-3); }
.ai-page .tdb-table td.num, .ai-page .tdb-table th.num {
    text-align: right; font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .ai-page .tdb-bloc--large { grid-column: span 1; }
    .ai-page .tdb-barres { height: 170px; }
    .ai-page .tdb-cadre { padding-left: 46px; }
    .ai-page .tdb-reperes { inset: 0 0 22px 46px; }
    /* Trente et une étiquettes de jour ne tiennent pas sur un téléphone :
       une sur cinq suffit à situer, et les barres restent lisibles. */
    .ai-page .tdb-barre-nom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-page .tdb-anneau-part,
    .ai-page .tdb-barre-pile,
    .ai-page .tdb-rang-barre { transition: none; }
}

/* --------------------------------------------------------------------------
   Reprise de la grille tarifaire
   -------------------------------------------------------------------------- */

.ai-page .tarifs-import .fact-synthese-form { align-items: flex-end; }
.ai-page .tarifs-import input[type="file"] { min-width: 18rem; }
.ai-page .tarifs-resume { margin-top: var(--sp-4); }
.ai-page .tarifs-bloc { margin-top: var(--sp-4); }
.ai-page .tarifs-actions {
    display: flex; gap: var(--sp-2); margin-top: var(--sp-4);
}
.ai-page .tarifs-detail { margin-top: var(--sp-4); }
.ai-page .tarifs-detail > summary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 1px solid var(--line-strong);
    border-radius: 999px; font-size: var(--fs-sm);
    color: var(--ink-soft); background: var(--surface);
    cursor: pointer; list-style: none;
}
.ai-page .tarifs-detail > summary::-webkit-details-marker { display: none; }
.ai-page .tarifs-detail[open] > summary { margin-bottom: var(--sp-3); }
/* Ce qui bouge se voit : un tarif identique n'a pas à attirer l'œil. */
.ai-page .tarifs-change { font-weight: 660; color: var(--brand); }

/* Un tarif non réglé se lit comme tel : la case est vide, le repli est en
   filigrane. Afficher le repli comme une valeur réglée rendait les deux
   indiscernables dans une grille de soixante-quatorze lignes. */
.ai-page.facturation .rate-input.rate-defaut { color: var(--ink-faint); }
.ai-page.facturation .rate-input.rate-defaut::placeholder {
    color: var(--ink-faint); font-style: italic;
}
.ai-page.facturation .effective-date-badge.sans-tarif {
    background: var(--warn-bg); color: var(--warn); border-color: #f0dcb4;
}