/*  L'assistant : le lanceur present partout, la fenetre, et la page pleine.
 *
 *  Un seul fichier pour les trois, parce que le fil de conversation est le
 *  meme objet dans les deux cadres. Charge globalement depuis base.html.twig :
 *  le lanceur vit sur tous les ecrans de l'application.
 *
 *  Tout est ecrit contre les jetons de tokens.css. La teinte est celle du
 *  module (`--mod-assistant`), et non `--accent` : ouverte depuis Paiements,
 *  la fenetre heriterait sinon du vert de Paiements.  */

/*  Les valeurs des maquettes AssistantV2 et AssistantModal qui n'ont pas de
 *  jeton dans tokens.css (le 14 px des libelles, les rayons de 8, 12, 16 et
 *  20 px, l'ombre et le voile de la fenetre). Nommees ici une fois, pour ne
 *  pas semer de valeurs brutes dans le fichier.  */
.as,
.as-modale {
    --as-text-md: 14px;
    --as-text-chiffre: 22px;
    --as-radius-sm: 8px;
    --as-radius-md: 12px;
    --as-radius-carte: 16px;
    --as-radius-fenetre: 20px;
    --as-ombre-fenetre: 0 32px 80px rgba(22, 24, 29, 0.28);
    --as-voile: rgba(22, 24, 29, 0.38);
    --as-fond-doux: #FAFAFB;          /* colonne « Sur cet ecran », en-tete de carte */
    --as-filet-ligne: #F0F1F4;        /* entre les lignes d'une carte */
    --as-conseil-fond: #F8F5F9;       /* encadre « Par ou commencer » */
    --as-conseil-bord: #EDE3F0;
    --as-largeur-ecran: calc(280px + 2 * 18px + 1px);  /* 280 de contenu, padding, filet */
}

/*  Les icones tracees au trait (chemins de la maquette). */
.as-svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-svg--epais { stroke-width: 2; }
.as-svg--etoile { width: 17px; height: 17px; stroke-linecap: butt; }

/* ── Le lanceur ─────────────────────────────────────────────────────────── */

/*  UNE LANGUETTE COLLEE AU BORD DROIT, A MI-HAUTEUR, SUR GRAND ECRAN.
 *
 *  Elle dit ce qu'elle est sans qu'on la survole : l'icone en haut, le nom
 *  ecrit dans le sens de la hauteur. Elle porte la teinte du module, celle de
 *  son icone dans la barre laterale. Ancree a `right: 0`, elle grandit vers
 *  l'interieur au survol, sans glisser sous le pointeur.
 *
 *  ELLE PASSE SOUS LE VOILE DU MENU MOBILE. Le voile est a `--z-sticky - 1` ;
 *  la languette etait a 1040 et restait vive par-dessus le menu ouvert.  */

.as-lanceur {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: calc(var(--z-sticky) - 2);

    width: 27px;
    padding: var(--space-4) 0 var(--space-5);
    border: none;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    background: var(--mod-assistant);
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-2);
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);

    transition: width var(--duration) var(--ease), background var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.as-lanceur > i { font-size: var(--text-body-lg); line-height: 1; }

/*  `vertical-rl` puis demi-tour : les onglets de bord se lisent de bas en haut. */
.as-lanceur-mot {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/*  Anneau pose a l'interieur : la languette touche le bord de l'ecran. */
.as-lanceur:focus-visible { outline: 2px solid var(--ink-on-dark); outline-offset: -5px; }

@media (hover: hover) and (pointer: fine) {
    .as-lanceur:hover,
    .as-lanceur:focus-visible {
        width: 48px;
        background: var(--mod-assistant-ink);
        box-shadow: var(--shadow-3);
    }
}

/*  SUR TELEPHONE ET TABLETTE, UN BOUTON ROND EN BAS A DROITE.
 *
 *  A mi-hauteur, la languette large de 44 px (plancher tactile) recouvrait le
 *  bord droit des cartes, en plein milieu de la lecture. Le coin bas est la
 *  place que tous les telephones reservent a l'action flottante : on n'y lit
 *  rien, et le contenu s'y prolonge d'autant pour ne rien laisser dessous.  */
@media (max-width: 992px) {
    .as-lanceur,
    .as-lanceur:hover,
    .as-lanceur:focus-visible {
        top: auto;
        right: var(--space-4);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        transform: none;
        width: var(--control-lg);
        height: var(--control-lg);
        padding: 0;
        border-radius: var(--radius-pill);
        justify-content: center;
    }

    .as-lanceur:focus-visible { outline-offset: 3px; outline-color: var(--mod-assistant-ink); }
    .as-lanceur-mot { display: none; }

    body:has(> .as-lanceur) .content-wrapper {
        padding-bottom: calc(var(--control-lg) + var(--space-8));
    }

    /*  Menu ouvert : le bouton n'a plus rien a faire a l'ecran. */
    body:has(.mobile-overlay.is-visible) .as-lanceur { display: none; }

    /*  Pendant la descente, il sort par le bas (assistant.js) : il ne
        recouvre plus ce qui defile dessous. */
    .as-lanceur { transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease); }
    .as-lanceur.as-lanceur--retire {
        transform: translateY(calc(100% + var(--space-4) + env(safe-area-inset-bottom, 0px)));
        opacity: 0;
        pointer-events: none;
    }

    /*  Un lien atteint au clavier ne s'arrete pas sous le bouton. */
    html:has(body > .as-lanceur) { scroll-padding-bottom: calc(var(--control-lg) + var(--space-8)); }
}

@media (prefers-reduced-motion: reduce) {
    .as-lanceur { transition: none; }
}

/*  Pendant que la fenetre est ouverte, le lanceur n'a plus de role. */
body:has(.as-modale:not([hidden])) .as-lanceur { display: none; }

/* ── La fenetre : ouverture et fermeture ────────────────────────────────── */

@keyframes as-voile-entre   { from { opacity: 0; } to { opacity: 1; } }
@keyframes as-voile-sort    { from { opacity: 1; } to { opacity: 0; } }
@keyframes as-dialogue-entre {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@keyframes as-dialogue-sort {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(8px) scale(.99); }
}

.as-modale .ui-modal-backdrop { animation: as-voile-entre var(--duration-fast) var(--ease) both; }
.as-modale .ui-modal-dialog   { animation: as-dialogue-entre var(--duration) var(--ease) both; }

.as-modale.est-en-fermeture .ui-modal-backdrop { animation: as-voile-sort var(--duration-fast) var(--ease) both; }
.as-modale.est-en-fermeture .ui-modal-dialog   { animation: as-dialogue-sort var(--duration-fast) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    .as-modale .ui-modal-backdrop,
    .as-modale .ui-modal-dialog,
    .as-modale.est-en-fermeture .ui-modal-backdrop,
    .as-modale.est-en-fermeture .ui-modal-dialog {
        animation-duration: .01ms;
    }
}

/* ── La fenetre : grande, centree ───────────────────────────────────────
   Ce n'est pas un volet lateral : on y lit une reponse structuree, avec la
   colonne « Sur cet ecran » a cote. 1120 px au plus, 40 px de marge en haut
   et en bas — le tableau de l'outil reste devine derriere le voile. */

.as-modale { z-index: var(--z-modal); padding: var(--space-10) 0; }
.as-modale .ui-modal-backdrop { background: var(--as-voile); }

.as-modale .ui-modal-dialog {
    width: min(1120px, calc(100vw - 2 * var(--space-6)));
    max-width: none;
    padding: 0;
}

.as-modale .ui-modal-content {
    height: calc(100vh - 2 * var(--space-10));
    height: calc(100dvh - 2 * var(--space-10));
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: var(--as-radius-fenetre);
    box-shadow: var(--as-ombre-fenetre);
}

/*  L'en-tete de la fenetre : 14 / 16 / 14 / 22, icone, nom, origine,
    puis « Lecture seule », plein ecran et fermeture, a droite.  */
.as-modale-tete {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4) 14px 22px;
    border-bottom: 1px solid var(--border);
}

.as-modale-titre {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    line-height: var(--lh-snug);
    color: var(--ink);
}

.as-modale-espace { flex: 1; }

/*  « Ouvert depuis Paiements · En retard » : dans la teinte de l'outil d'ou
    l'on vient (vert sur Paiements, comme la maquette).  */
.as-origine {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-tint);
    color: var(--accent-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  Depuis Paiements, le vert des pastilles de statut (#E6F4EC / #1F7A4D),
    celui de la maquette, plutot que la teinte transparente du module.  */
body[data-module="finance"] .as-origine { background: var(--success-tint); color: var(--success-ink); }

.as-origine[hidden] { display: none; }

.as-origine > [data-as-origine-texte] { overflow: hidden; text-overflow: ellipsis; }

.as-origine-marque {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--accent);
}

.as-fermer {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    border: none;
    border-radius: var(--radius-field);
    background: var(--surface-sunken);
    color: var(--ink-secondary);
    cursor: pointer;
}

.as-fermer .as-svg { stroke-width: 2; }
.as-fermer:hover { background: var(--border); color: var(--ink); }
.as-fermer:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-modale-corps {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.as-modale .as { height: 100%; }

/*  Plein ecran sur telephone : chaque ligne compte. */
@media (max-width: 768px) {
    .as-modale { padding: 0; align-items: stretch; }
    .as-modale .ui-modal-dialog { width: 100%; margin: 0; }
    .as-modale .ui-modal-content {
        height: 100dvh;
        max-height: none;
        border: none;
        border-radius: 0;
    }
}

/* ── Le cadre commun ────────────────────────────────────────────────────── */

.as {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 0;
}

.as--modale { grid-template-columns: var(--as-largeur-ecran) minmax(0, 1fr); }

.as:has(.as-indisponible) { grid-template-columns: 1fr; }

/*  Petite etiquette de section : casse normale, encre attenuee. */
.as-etiquette {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--ink-muted);
}

/* ── La page : historique a gauche, conversation dans une carte ─────────── */

/*  La maquette pose la carte a 20 px du haut et 24 px du bas de la fenetre,
    contre 28 et 40 pour les autres ecrans : la conversation occupe toute la
    hauteur. On reprend donc la difference sur les marges du cadre.  */
.as-page {
    margin-top: calc(var(--space-5) - var(--content-pad-top));
    margin-bottom: calc(var(--space-6) - var(--space-10));
}

.as--page {
    gap: var(--space-4);
    height: max(480px, calc(100vh - var(--space-5) - var(--space-6)));
    height: max(480px, calc(100dvh - var(--space-5) - var(--space-6)));
}

.as-historique {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    min-height: 0;
    padding-top: var(--space-2);
}

.as-neuf {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    margin-bottom: var(--space-3);
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--as-text-md);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
}

.as-neuf:hover { border-color: var(--mod-assistant); color: var(--mod-assistant-ink); }
.as-neuf:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.as-neuf:disabled { opacity: .55; cursor: progress; }

.as-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/*  Les marges s'ajoutent a l'ecart de 4 px de la liste : 6 px au-dessus
    du premier groupe, 12 px au-dessus des suivants, 2 px dessous.  */
.as-liste-groupe {
    margin: var(--space-3) 10px 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
    color: var(--ink-muted);
}

.as-liste-groupe:first-child { margin-top: 6px; }

.as-liste-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: var(--as-radius-sm);
    background: none;
    color: var(--ink-secondary);
    font-family: inherit;
    font-size: var(--as-text-md);
    line-height: var(--lh-snug);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.as-liste-item:hover { background: var(--surface-sunken); color: var(--ink); }
.as-liste-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.as-liste-item.is-courante {
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--ink);
    font-weight: var(--weight-medium);
}

/*  La jauge des 30 jours, en bas de l'historique : le plafond se voit avant
    d'etre atteint, au lieu de tomber sous forme d'erreur.  */
.as-jauge {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--as-radius-md);
    background: var(--surface);
}

.as-jauge-ligne {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-secondary);
}

.as-jauge-ligne strong {
    color: var(--ink);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.as-jauge-barre {
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}

.as-jauge-barre::-webkit-progress-bar   { background: var(--surface-sunken); border-radius: var(--radius-pill); }
.as-jauge-barre::-webkit-progress-value { background: var(--mod-assistant); border-radius: var(--radius-pill); }
.as-jauge-barre::-moz-progress-bar      { background: var(--mod-assistant); border-radius: var(--radius-pill); }

/* ── La fenetre : « Sur cet ecran » ─────────────────────────────────────── */

.as-ecran {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    border-right: 1px solid var(--border);
    background: var(--as-fond-doux);
}

.as-ecran-resume {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.as-ecran-resume[hidden] { display: none; }

.as-ecran-chiffre {
    font-family: var(--font-display);
    font-size: var(--as-text-chiffre);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
    line-height: var(--lh-snug);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.as-ecran-chiffre:empty { display: none; }
.as-ecran-resume[data-ton="alerte"] .as-ecran-chiffre { color: var(--danger-ink); }
.as-ecran-resume[data-ton="attention"] .as-ecran-chiffre { color: var(--warning-ink); }

.as-ecran-phrase {
    font-size: var(--as-text-md);
    line-height: 1.5;
    color: var(--ink-secondary);
}

/*  Promesses et litiges : la marque de forme du vocabulaire .ui-status
    (tirets = en pause, losange = litige), dans la couleur de l'etat.  */
.as-ecran-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    color: var(--ink-secondary);
}

.as-ecran-notes[hidden] { display: none; }

.as-ecran-note { display: flex; gap: var(--space-2); }
.as-ecran-note-marque { margin-top: 4px; }
.as-ecran-note-marque--tirets  { color: var(--warning-ink); }
.as-ecran-note-marque--losange { color: var(--danger); background: var(--danger); }

.as-etiquette--questions { margin-top: 6px; }

.as-ecran-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.as-ecran-lien {
    margin-top: auto;
    padding-top: var(--space-3);
    align-self: flex-start;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--mod-assistant-ink);
}

.as-ecran-lien:hover { color: var(--ink); }

/*  Une question proposee : dans la colonne, une carte qu'on lit d'un coup
    d'oeil ; sous l'etat vide de la page, une pastille.  */
.as-question {
    padding: 10px var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-field);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--as-text-md);
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.as-question:hover {
    border-color: var(--mod-assistant);
    background: var(--mod-assistant-tint);
    color: var(--mod-assistant-ink);
}

.as-question:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── La conversation ────────────────────────────────────────────────────── */

.as-colonne {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface);
}

.as--page .as-colonne {
    border: 1px solid var(--border);
    border-radius: var(--as-radius-carte);
    overflow: hidden;
}

.as-conv-tete {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px var(--space-6);
    border-bottom: 1px solid var(--border);
}

.as-conv-titre {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-snug);
    letter-spacing: 0;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  L'engagement de lecture seule, visible en permanence : c'est ce qui
    distingue un analyste d'un outil qui agirait a votre place.  */
.as-lecture {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.as-lecture .as-svg { stroke-width: 2; }

/*  Dans l'en-tete de la fenetre : le texte seul, en gris.  */
.as-lecture--sobre {
    height: auto;
    padding: 0;
    background: none;
    color: var(--ink-muted);
}

.as-pleinecran {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    border-radius: var(--radius-field);
    color: var(--ink-muted);
    text-decoration: none;
}

.as-pleinecran:hover { background: var(--surface-sunken); color: var(--ink); }
.as-pleinecran:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-flux {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 28px var(--space-6) var(--space-3);
    scroll-behavior: smooth;
}

.as--modale .as-flux { padding: 26px var(--space-8) var(--space-3); }

@media (prefers-reduced-motion: reduce) {
    .as-flux { scroll-behavior: auto; }
}

/*  La ligne de texte ne s'elargit pas avec l'ecran : au-dela d'une
    soixantaine de caracteres, l'oeil perd le debut de la ligne suivante.  */
.as-flux-corps {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.as--modale .as-flux-corps { max-width: 700px; gap: var(--space-5); }

.as-tour { display: flex; gap: 14px; align-items: flex-start; }
.as-tour--moi { justify-content: flex-end; }

.as-tour--moi .as-bulle {
    max-width: 75%;
    padding: 11px var(--space-4);
    border-radius: var(--as-radius-carte) var(--as-radius-carte) var(--space-1) var(--as-radius-carte);
    background: var(--surface-sunken);
    color: var(--ink);
    line-height: var(--lh-snug);
}

/*  Le fond est la teinte de l'assistant posee sur blanc : opaque (#F3EDF5),
    pour rester la meme sur le fond gris de la colonne.  */
.as-avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-field);
    background: linear-gradient(var(--mod-assistant-tint), var(--mod-assistant-tint)), var(--surface);
    color: var(--mod-assistant);
}

.as--modale .as-tour .as-avatar { width: 30px; height: 30px; border-radius: 9px; }
.as--modale .as-tour .as-svg--etoile { width: 16px; height: 16px; }

.as-avatar--grand { width: 44px; height: 44px; }
.as-avatar--grand .as-svg--etoile { width: 22px; height: 22px; }

.as-reponse {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.as--modale .as-reponse { gap: 14px; }

.as-bulle {
    font-size: var(--text-body);
    line-height: var(--lh-normal);
    color: var(--ink);
    overflow-wrap: anywhere;
}

/*  La synthese d'abord : la premiere phrase d'une reponse est son resultat,
    elle se lit plus grosse que le detail qui la justifie (18 px sur la page,
    17 dans la fenetre).  */
.as-tour--assistant .as-bulle > p:first-child {
    font-size: var(--text-title-2);
    line-height: 1.45;
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.as--modale .as-tour--assistant .as-bulle > p:first-child { font-size: var(--text-body-lg); }

/*  La mise en forme que le modele produit : du gras, des listes, des
    paragraphes. Rien d'autre n'est interprete — voir assistant.js.  */
.as-bulle strong { color: var(--ink); font-weight: var(--weight-semibold); }
.as-bulle p { margin: 0; }
.as-bulle p + p,
.as-bulle ul + p,
.as-bulle ol + p { margin-top: var(--space-3); }
.as-bulle ul,
.as-bulle ol { margin: var(--space-3) 0 0; padding-left: var(--space-6); }
.as-bulle li + li { margin-top: var(--space-2); }
.as-bulle li p { margin-top: var(--space-2); }
.as-bulle li > ul,
.as-bulle li > ol { margin-top: var(--space-2); padding-left: var(--space-5); }
.as-bulle ol > li { margin-top: var(--space-4); }
.as-bulle ol > li:first-child { margin-top: 0; }
.as-bulle li::marker { color: var(--ink-muted); font-weight: var(--weight-semibold); }
.as-bulle hr { margin: var(--space-5) 0 var(--space-4); border: none; border-top: 1px solid var(--border); }

/* ── La carte d'une reponse ──────────────────────────────────────────────
   « Qui me doit de l'argent ? » (page) et « Qui relancer en premier ? »
   (fenetre) : les chiffres de Paiements, mis en forme comme les maquettes
   AssistantV2 et AssistantModal ; le modele n'ecrit que le conseil. */

.as-reponse--carte { font-size: var(--text-body); line-height: var(--lh-normal); }

.as-carte-tete {
    margin: 0;
    font-size: var(--text-title-2);
    line-height: 1.45;
    font-weight: var(--weight-medium);
    color: var(--ink);
}

.as-carte-tete a { font-weight: var(--weight-semibold); color: var(--mod-assistant-ink); }
.as-carte-tete a.as-carte-retard,
.as-carte-tete strong.as-carte-retard { color: var(--danger); }
.as-carte-tete a:hover { color: var(--ink); }

/*  La barre du / en retard : deux parts, en vingtiemes.  */
.as-barre { display: flex; flex-direction: column; gap: var(--space-2); }
.as-barre-piste { display: flex; height: 12px; gap: 2px; }
.as-barre-part { flex: 1 1 0; min-width: 0; }
.as-barre-part--ok { background: var(--mod-finance); border-radius: 4px 0 0 4px; }
.as-barre-part--retard { background: var(--danger); border-radius: 0 4px 4px 0; }
.as-barre-part:only-child { border-radius: 4px; }
.as-part--1 { flex-grow: 1; }   .as-part--2 { flex-grow: 2; }   .as-part--3 { flex-grow: 3; }
.as-part--4 { flex-grow: 4; }   .as-part--5 { flex-grow: 5; }   .as-part--6 { flex-grow: 6; }
.as-part--7 { flex-grow: 7; }   .as-part--8 { flex-grow: 8; }   .as-part--9 { flex-grow: 9; }
.as-part--10 { flex-grow: 10; } .as-part--11 { flex-grow: 11; } .as-part--12 { flex-grow: 12; }
.as-part--13 { flex-grow: 13; } .as-part--14 { flex-grow: 14; } .as-part--15 { flex-grow: 15; }
.as-part--16 { flex-grow: 16; } .as-part--17 { flex-grow: 17; } .as-part--18 { flex-grow: 18; }
.as-part--19 { flex-grow: 19; } .as-part--20 { flex-grow: 20; }

.as-barre-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    color: var(--ink-secondary);
}

.as-legende { display: inline-flex; align-items: center; gap: 6px; }
.as-legende-marque { flex: none; width: 8px; height: 8px; }
.as-legende-marque--ok { border-radius: 2px; background: var(--mod-finance); }
.as-legende-marque--retard { transform: rotate(45deg); background: var(--danger); }

/*  « Les plus gros retards ».  */
.as-carte {
    border: 1px solid var(--border);
    border-radius: var(--as-radius-md);
    overflow: hidden;
}

.as-carte-titre {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--as-fond-doux);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--lh-normal);
    color: var(--ink-muted);
}

.as-carte-ligne,
.as-classement-ligne {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    border-bottom: 1px solid var(--as-filet-ligne);
}

.as-initiales {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.as-carte-qui {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.as-carte-client {
    font-weight: var(--weight-medium);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.as-carte-client:hover { color: var(--mod-assistant-ink); }

.as-carte-detail {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-carte-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--mod-assistant-ink);
}

a.as-carte-num:hover { color: var(--ink); }
/*  Sans acces a Devis et factures, le numero n'est pas un lien : il ne
    doit pas en avoir la couleur.  */
span.as-carte-num { color: var(--ink-secondary); }

.as-carte-montant {
    flex: none;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.as-etat {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.as-etat--danger    { background: var(--danger-tint);  color: var(--danger-ink); }
.as-etat--attention { background: var(--warning-tint); color: var(--warning-ink); }
.as-etat--neutre    { background: var(--surface-sunken); color: var(--ink-secondary); }

/*  « Par ou commencer » : le conseil du modele, puis les actions.  */
.as-conseil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-4);
    border: 1px solid var(--as-conseil-bord);
    border-radius: var(--as-radius-md);
    background: var(--as-conseil-fond);
}

.as-conseil-titre {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--mod-assistant-ink);
}

.as-tour--assistant .as-conseil-texte > p:first-child,
.as-conseil-texte {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-normal);
}

.as-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.as-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--as-text-md);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.as-action:hover { border-color: var(--mod-assistant); color: var(--mod-assistant-ink); }
.as-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-action--plein {
    border-color: var(--mod-assistant);
    background: var(--mod-assistant);
    color: var(--ink-on-dark);
}

.as-action--plein:hover { background: var(--mod-assistant-ink); border-color: var(--mod-assistant-ink); color: var(--ink-on-dark); }
.as-action--grand { height: var(--control-md); padding: 0 var(--space-4); white-space: nowrap; }

.as-conseil-note { font-size: var(--text-xs); color: var(--ink-muted); }

/*  La fenetre : liste classee, et l'encadre sur une ligne.  */
.as-classement {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--as-radius-md);
    overflow: hidden;
}

.as-classement-ligne { padding: 11px 14px; }
.as-classement .as-carte-detail { white-space: normal; }

.as-rang {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(var(--mod-assistant-tint), var(--mod-assistant-tint)), var(--surface);
    color: var(--mod-assistant-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.as-conseil--ligne {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px var(--space-4);
}

.as-conseil-phrase { flex: 1 1 260px; font-size: var(--as-text-md); color: var(--ink-secondary); }

/* ── Les sources ────────────────────────────────────────────────────────── */

.as-sources {
    /*  La regle `footer` de style.css (marge, padding, fond) ne vaut pas ici.  */
    margin-top: 0;
    padding: 0;
    background: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/*  Base de 16rem : au telephone, les sources prennent toute la ligne et les
    boutons (copier, avis) passent dessous, a droite. Avec une base nulle,
    la liste se reduisait a « D'apres » et l'heure tombait seule en bas.  */
.as-sources-liste {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.as-source {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
}

/*  Dans la fenetre, les sources se lisent en ligne : « D'apres 6 factures
    en retard, 4 relances · a 10 h 12 », des liens soulignes, sans pastille
    ni bouton de copie.  */
.as--modale .as-sources-liste { display: block; }
.as--modale .as-source {
    display: inline;
    height: auto;
    padding: 0;
    background: none;
    color: var(--mod-assistant-ink);
    text-decoration: underline;
}
/*  Le separateur « , » est un vrai texte (span.as-source-sep), pose entre
    les sources par le gabarit et par assistant.js : sur la page, l'ecart des
    pastilles le remplace.  */
.as-source-sep { display: none; }
.as--modale .as-source-sep { display: inline; }
.as--modale span.as-source { color: var(--ink-muted); text-decoration: none; }
.as--modale a.as-source:hover { background: none; color: var(--ink); }
.as--modale .as-copier,
.as--modale .as-outils { display: none; }
.as--modale .as-sources-heure { margin-left: .3em; }

a.as-source:hover { background: var(--mod-assistant-tint); color: var(--mod-assistant-ink); }
a.as-source:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-sources-heure { font-variant-numeric: tabular-nums; white-space: nowrap; }

.as-outils {
    margin-left: auto;
    display: flex;
    gap: var(--space-1);
}

.as-outil,
.as-copier {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--as-radius-sm);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

.as-copier { margin-left: auto; }
.as-outil--retourne { transform: rotate(180deg); }

.as-outil:hover,
.as-copier:hover { background: var(--surface-sunken); color: var(--ink); }
.as-outil:focus-visible,
.as-copier:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.as-outil.est-copie,
.as-copier.est-copie { color: var(--success-ink); }
.as-outil[aria-pressed="true"] { background: var(--mod-assistant-tint); color: var(--mod-assistant-ink); }

/*  Les questions pour continuer, sous la derniere reponse de la page :
    alignees sur le texte de la reponse (avatar 32 + ecart 14).  */
.as-suites {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-left: 46px;
}

.as-suite {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-secondary);
    font-family: inherit;
    font-size: var(--as-text-md);
    font-weight: var(--weight-regular);
    cursor: pointer;
}

.as-suite:hover { border-color: var(--mod-assistant); color: var(--mod-assistant-ink); }
.as-suite:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.as-suite:disabled { opacity: .55; cursor: progress; }

/* ── L'etat vide ────────────────────────────────────────────────────────── */

.as-vide {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
}

.as-vide[hidden] { display: none; }

.as-vide-titre {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-title-3);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-title);
    color: var(--ink);
    text-wrap: balance;
}

.as-vide-texte {
    margin: 0;
    max-width: 48ch;
    color: var(--ink-secondary);
    font-size: var(--text-body);
}

.as-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    max-width: 640px;
}

.as-suggestions .as-question { border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }

.as-point {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding: 0 var(--space-5);
    border: none;
    border-radius: var(--radius-button);
    background: var(--mod-assistant);
    color: var(--ink-on-dark);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.as-point:hover { background: var(--mod-assistant-ink); }
.as-point:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-vide-note { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }

/*  Etat vide affiche : le fil n'a rien a montrer et s'efface. */
.as-colonne:has(.as-vide:not([hidden])) .as-flux { flex: 0 0 auto; padding: 0; }

/* ── L'attente ──────────────────────────────────────────────────────────── */

.as-attente {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 32px;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.as-attente-points { display: inline-flex; gap: var(--space-1); }

.as-attente-points i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mod-assistant);
    animation: as-pulse 1.1s ease-in-out infinite;
}

.as-attente-points i:nth-child(2) { animation-delay: .18s; }
.as-attente-points i:nth-child(3) { animation-delay: .36s; }

@keyframes as-pulse {
    0%, 60%, 100% { opacity: .25; }
    30%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .as-attente-points i { animation: none; opacity: .6; }
}

/* ── La saisie ──────────────────────────────────────────────────────────── */

.as-saisie {
    flex: none;
    padding: var(--space-3) var(--space-6) 18px;
}

.as-saisie-cadre {
    /*  760 de contenu, comme le fil, plus le padding et le contour.  */
    max-width: calc(760px + 26px + 2px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 10px 10px 10px var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

/*  La fenetre : une seule ligne, champ et bouton cote a cote.  */
.as--modale .as-saisie { padding: var(--space-3) var(--space-8) var(--space-5); }
.as--modale .as-saisie-cadre {
    max-width: calc(700px + 24px + 2px);
    flex-direction: row;
    align-items: center;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    box-shadow: none;
}
.as--modale .as-champ { flex: 1; min-width: 0; min-height: var(--control-md); padding: 10px 0; line-height: 20px; }
.as--modale .as-saisie-pied { flex: none; }
.as--modale .as-saisie-aide { display: none; }
.as--modale .as-champ::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as--modale .as-pied,
.as--modale .as-erreur { max-width: 700px; }

.as-saisie-cadre:focus-within { border-color: var(--mod-assistant); box-shadow: 0 0 0 3px var(--mod-assistant-tint); }

.as-champ {
    width: 100%;
    max-height: 9rem;
    resize: none;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-body);
    line-height: var(--lh-normal);
}

.as-champ:focus { outline: none; }
.as-champ::placeholder { color: var(--ink-muted); }

.as-saisie-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.as-saisie-aide { font-size: var(--text-xs); color: var(--ink-muted); }

.as-envoyer {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    border: none;
    border-radius: var(--radius-button);
    background: var(--mod-assistant);
    color: var(--ink-on-dark);
    cursor: pointer;
}

.as-envoyer .as-svg { stroke-width: 2; }
.as--modale .as-envoyer { width: var(--control-md); height: var(--control-md); }

.as-envoyer:hover { background: var(--mod-assistant-ink); }
.as-envoyer:disabled { opacity: .45; cursor: not-allowed; }
.as-envoyer:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.as-pied[hidden] { display: none; }

.as-pied {
    max-width: 760px;
    margin: var(--space-2) auto 0;
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

/* ── Indisponible, et les erreurs ───────────────────────────────────────── */

.as-indisponible {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    color: var(--ink-secondary);
    font-size: var(--text-body);
    background: var(--surface);
}

.as--page .as-indisponible { border: 1px solid var(--border-subtle); border-radius: var(--radius-card-lg); }
.as-indisponible i { font-size: var(--text-title-3); color: var(--ink-muted); flex: none; }
.as-indisponible p { margin: 0; }
.as-indisponible-titre { font-weight: var(--weight-semibold); color: var(--ink); }
.as-indisponible-titre + p { margin-top: var(--space-2); }

/*  Une erreur de saisie ou un plafond atteint : au-dessus du champ, dans la
    teinte d'alerte douce, sans rouge vif — ce n'est pas une panne.  */
.as-erreur {
    max-width: 760px;
    margin: 0 auto var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-field);
    background: var(--warning-tint);
    color: var(--warning-ink);
    font-size: var(--text-sm);
}

/* ── Telephone ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .as,
    .as--modale {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    /*  Le haut de l'ecran est deja pris par le bouton du menu : le panneau
        prend le reste, saisie comprise, sans defilement de page.  */
    .as--page { gap: var(--space-3); height: calc(100dvh - var(--space-24)); min-height: 440px; }
    .as-page { margin: 0; }

    /*  L'historique devient une bande horizontale au-dessus du fil : sous lui,
        il le repousserait hors de l'ecran.  */
    .as-historique {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        padding-top: 0;
    }

    .as-neuf { flex: none; margin: 0; }
    .as-neuf-libelle { display: none; }

    .as-liste {
        display: flex;
        flex-direction: row;
        gap: var(--space-2);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .as-liste-groupe,
    .as-jauge { display: none; }

    .as-liste li { flex: none; max-width: 60vw; }
    .as-liste-item { border: 1px solid var(--border-subtle); background: var(--surface); }
    /*  Toutes les pastilles sont blanches ici : la courante se distingue par
        la couleur de l'outil, comme un onglet actif.  */
    .as-liste-item.is-courante {
        border-color: var(--mod-assistant);
        background: var(--mod-assistant-tint-2);
        color: var(--mod-assistant-ink);
        box-shadow: none;
    }

    /*  « Sur cet ecran » se resserre : le resume et les questions en bande,
        le fil garde l'essentiel de la hauteur.  */
    .as-ecran {
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        overflow: visible;
    }

    .as-ecran-resume { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: 0; }
    .as-ecran-chiffre { font-size: var(--text-body-lg); }
    .as-ecran-questions { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-1); }
    .as-ecran-questions .as-question { flex: none; white-space: nowrap; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); }
    /*  Les notes (promesse, litige) restent : ce sont elles qui disent
        pourquoi ne pas relancer, au telephone comme ailleurs.  */
    .as-ecran > .as-etiquette:nth-of-type(2),
    .as-ecran-lien { display: none; }
    .as-ecran-notes { gap: var(--space-1); font-size: var(--text-sm); }
    .as-neuf--ecran { margin: 0; align-self: flex-start; }
    /*  Le compteur reste lisible au telephone, en une ligne sous l'historique.  */
    .as--page .as-pied[hidden] { display: block; }
    .as-liste-date { display: none; }

    .as-modale-tete { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); gap: var(--space-2); }
    .as-modale-tete .as-lecture { display: none; }
    .as-suites { padding-left: 0; }

    .as-conv-tete { padding-inline: var(--space-4); }
    .as-lecture-suite,
    .as-saisie-aide,
    .as-pied-echap { display: none; }

    .as-flux { padding: var(--space-4); }
    .as-tour { gap: var(--space-3); }
    .as-tour--assistant .as-avatar { display: none; }
    .as-tour--moi .as-bulle { max-width: 88%; }
    .as-carte-ligne { flex-wrap: wrap; row-gap: var(--space-1); }
    .as-carte-ligne .as-carte-qui { flex-basis: calc(100% - 42px); }
    .as-carte-ligne .as-carte-montant { margin-left: 42px; }
    .as-carte-ligne .as-etat { margin-left: auto; }
    .as-saisie { padding: var(--space-2) var(--space-3) var(--space-3); }
}


/* ── Historique : date, renommer, supprimer ─────────────────────────────── */

/*  La date a droite du titre : deux fils du meme nom se distinguent.  */
.as-liste-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.as-liste-titre {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-liste-date {
    flex: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

.as-conv-gestes[hidden] { display: none; }
.as-conv-gestes { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); }

.as-outil--danger:hover { background: var(--danger-tint); color: var(--danger-ink); }

/*  Premier clic : le bouton s'elargit et demande confirmation.  */
.as-outil--danger.est-arme {
    display: inline-flex;
    width: auto;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--danger-tint);
    color: var(--danger-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.as-confirmer-texte[hidden] { display: none; }

.as-titre-champ {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--mod-assistant);
    border-radius: var(--as-radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.as-titre-champ:focus { outline: none; box-shadow: var(--focus-ring); }

/*  « Nouvelle question » dans la colonne de la fenetre.  */
.as-neuf--ecran { margin-bottom: var(--space-2); }

/* ── Plafond atteint ───────────────────────────────────────────────────── */

.as--epuise .as-question:disabled,
.as--epuise .as-suite:disabled,
.as--epuise .as-point:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.as--epuise .as-question:disabled:hover { background: inherit; border-color: inherit; color: inherit; }

/* ── Cartes sans modele : demande d'action ─────────────────────────────── */

.as-gestes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-geste {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 14px var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--as-radius-md);
    background: var(--surface);
}

.as-geste-titre { font-weight: var(--weight-semibold); color: var(--ink); }
.as-geste-texte { font-size: var(--as-text-md); color: var(--ink-secondary); line-height: var(--lh-normal); }