/* Styles propres à l'écran de Virgile.
   Les tokens (--pp-*) et les polices viennent de /css/app.css, la feuille du hub.
   Rien n'est redéfini ici de ce qui appartient à la charte. */

/* Le header vient de la feuille du hub (.nc-*), comme chez les trois autres
   agents. Seule la largeur est reprise ici : les pages de Sophia, Adèle et
   Prosper tiennent dans 840 px, l'écran de Virgile est en deux colonnes sur
   1240 px, et un header à 840 laisserait le logo décroché des colonnes. */
.nc-header-inner { max-width: 1240px; }

.vg-main {
    max-width: 1240px; margin: 32px auto 60px; padding: 0 24px;
    display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 28px; align-items: start;
}
@media (max-width: 900px) {
    .vg-main { grid-template-columns: 1fr; }
    /* Sur mobile le mur passe devant : c'est la valeur, l'arborescence est le
       contexte. */
    .vg-col-runs { order: 2; }
    .vg-col-mur { order: 1; }
}

/* Le titre de colonne et sa bascule sur la même ligne, alignés sur la ligne de
   base du titre : la bascule est une précision du titre, pas un contrôle à
   part. */
.vg-col-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.vg-filtre { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--pp-bg); border: 1px solid var(--pp-border); }
.vg-filtre-bouton {
    font-family: 'Lato', sans-serif; font-size: 0.72rem; line-height: 1;
    padding: 5px 9px; border: 0; border-radius: 7px; background: none;
    color: var(--pp-muted); cursor: pointer;
}
.vg-filtre-bouton:hover { color: var(--pp-ink); }
.vg-filtre-bouton[aria-pressed="true"] { background: #fff; color: var(--pp-ink); font-weight: 700; box-shadow: var(--pp-shadow); }

.vg-col-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-muted);
    margin: 0 0 14px;
}
.vg-attente, .vg-vide { color: var(--pp-muted); font-size: 0.9rem; margin: 0; }

/* ---------------------------------------------------------- arborescence */

.vg-runs {
    background: #fff; border: 1px solid var(--pp-border); border-radius: 16px;
    box-shadow: var(--pp-shadow); padding: 8px; overflow: hidden;
}
.vg-run + .vg-run { border-top: 1px solid var(--pp-border); }

.vg-run-tete {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: 0; padding: 12px 10px; cursor: pointer;
    font-family: inherit; font-size: 0.92rem; color: var(--pp-ink); text-align: left;
    border-radius: 10px;
}
.vg-run-tete:hover { background: var(--pp-bg); }
.vg-run-tete[aria-expanded="true"] { background: var(--pp-accent-light); }
.vg-run-jour { font-weight: 700; flex: 1; }
.vg-chevron { color: var(--pp-muted); font-size: 0.7rem; width: 10px; transition: transform 0.15s; }
.vg-run-tete[aria-expanded="true"] .vg-chevron { transform: rotate(90deg); }

.vg-compte {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.7rem;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.vg-compte-plein { background: var(--pp-green-bg); color: var(--pp-green); border: 1px solid var(--pp-green-border); }
.vg-compte-vide { background: var(--pp-bg); color: var(--pp-muted); border: 1px solid var(--pp-border); }
.vg-compte-echec { background: var(--pp-red-bg); color: var(--pp-red); border: 1px solid var(--pp-red-border); }

.vg-run-corps { padding: 2px 10px 10px 22px; }
.vg-run-corps[hidden] { display: none; }

/* Le trait vertical de l'arborescence : un simple bord gauche, pas une image. */
.vg-passage { border-left: 2px solid var(--pp-border); padding: 6px 0 6px 14px; position: relative; }
.vg-passage-nom {
    font-size: 0.85rem; font-weight: 700; color: var(--pp-ink);
    display: flex; align-items: center; gap: 8px;
}
.vg-passage-nom::before {
    content: ''; position: absolute; left: -2px; top: 15px;
    width: 12px; height: 2px; background: var(--pp-border);
}
.vg-passage-rien { font-size: 0.82rem; color: var(--pp-muted); font-style: italic; }
.vg-passage-echec { font-size: 0.82rem; color: var(--pp-red); }

.vg-feuille {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    padding: 5px 6px; margin: 3px 0 0; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 0.82rem; color: var(--pp-ink); line-height: 1.35;
}
.vg-feuille:hover { background: var(--pp-accent-light); }
.vg-feuille-cible { background: var(--pp-accent-light); }

/* ------------------------------------------------------------------- mur */

.vg-mur { display: flex; flex-direction: column; gap: 14px; }

.vg-carte {
    position: relative;
    background: #fff; border: 1px solid var(--pp-border); border-left: 4px solid var(--pp-muted);
    border-radius: 14px; box-shadow: var(--pp-shadow); overflow: hidden;
    transition: box-shadow 0.15s;
}
.vg-carte:hover { box-shadow: 0 1px 2px rgba(20,18,31,.05), 0 12px 32px rgba(20,18,31,.11); }
.vg-carte.vg-visee { outline: 2px solid var(--pp-midnight-2); outline-offset: 2px; }
.vg-carte[data-etat="ecarte"] { opacity: 0.55; }

/* Un liseré par profil, pour repérer d'un coup d'œil d'où vient la trouvaille. */
.vg-carte[data-profil="reglementaire"] { border-left-color: #2f4f7a; }
.vg-carte[data-profil="prospection"]  { border-left-color: #2d5a27; }
.vg-carte[data-profil="clients"]      { border-left-color: #8d2d3e; }
.vg-carte[data-profil="livre"]        { border-left-color: #5b3f8c; }
.vg-carte[data-profil="formation"]    { border-left-color: #a15c1e; }
.vg-carte[data-profil="linkedin"]     { border-left-color: #0a66c2; }

.vg-carte-tete {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    /* La marge à droite réserve la place de la croix : sans elle, un titre long
       passe dessous et on clique « déplier » en visant « écarter ». */
    padding: 14px 46px 14px 16px; cursor: pointer; font-family: inherit;
}

/* Discrète au repos, franche au survol : c'est un geste courant, pas un bouton
   d'alerte, et il se rattrape pendant six secondes. */
.vg-carte-croix {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    width: 26px; height: 26px; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px;
    color: var(--pp-muted); opacity: 0.45; font-size: 1.15rem; cursor: pointer;
    font-family: inherit; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.vg-carte:hover .vg-carte-croix { opacity: 0.8; }
.vg-carte-croix:hover, .vg-carte-croix:focus-visible {
    opacity: 1; background: var(--pp-red-bg); color: var(--pp-red);
}

/* Ce qui reste à la place de la carte le temps de pouvoir revenir en arrière. */
.vg-ecarte {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px dashed var(--pp-border); border-radius: 12px;
    font-size: 0.82rem; color: var(--pp-muted);
}
.vg-carte-haut {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 7px; font-size: 0.72rem; color: var(--pp-muted);
}
.vg-etiquette {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.63rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 6px; background: var(--pp-accent-light); color: var(--pp-midnight);
}
.vg-carte-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;
    color: var(--pp-ink); line-height: 1.3; margin: 0 0 5px;
}
.vg-carte-pourquoi { font-size: 0.88rem; color: var(--pp-muted); margin: 0; line-height: 1.45; }
.vg-carte-plus { font-size: 0.72rem; color: var(--pp-muted); margin-top: 8px; }

.vg-carte-corps { border-top: 1px solid var(--pp-border); padding: 16px; background: var(--pp-bg); }
.vg-carte-corps[hidden] { display: none; }

.vg-bloc-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-muted);
    margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.vg-brouillon {
    background: #fff; border: 1px solid var(--pp-border); border-radius: 10px;
    padding: 14px; margin: 0 0 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem;
    line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    max-height: 420px; overflow-y: auto; color: var(--pp-ink);
}
.vg-verifier {
    background: var(--pp-red-bg); border: 1px solid var(--pp-red-border); border-radius: 10px;
    padding: 12px 14px; margin: 0 0 16px; font-size: 0.85rem; line-height: 1.5; color: var(--pp-ink);
    white-space: pre-wrap;
}
.vg-source { font-size: 0.8rem; color: var(--pp-muted); margin: 0 0 16px; }
.vg-source a { color: var(--pp-ink); }

.vg-bouton {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.72rem;
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--pp-border);
    background: #fff; color: var(--pp-ink); cursor: pointer;
}
.vg-bouton:hover { background: var(--pp-accent-light); }
.vg-etats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vg-etats-libelle { font-size: 0.72rem; color: var(--pp-muted); margin-right: 2px; }
/* Écarté à l'écart des deux autres : ce n'est pas un troisième état à cocher,
   c'est la sortie. */
.vg-bouton-ecarter { margin-left: auto; color: var(--pp-muted); }
.vg-bouton-ecarter:hover { background: var(--pp-red-bg); color: var(--pp-red); border-color: var(--pp-red-border); }
.vg-bouton[aria-pressed="true"] {
    background: var(--pp-midnight); color: #fff; border-color: var(--pp-midnight);
}

/* Envoi d'une fiche de financement vers le catalogue de Sophia. Encadré à
   part des boutons d'état : ce n'est pas un changement d'avis sur la
   trouvaille, c'est une sortie vers un autre outil. */
.vg-sophia {
    margin-top: 16px; padding: 14px 16px; border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-midnight); border-radius: 12px;
    background: var(--pp-accent-light);
}
.vg-sophia-resume { font-size: 0.88rem; margin-bottom: 10px; }
.vg-bouton-primaire {
    background: var(--pp-midnight); color: #fff; border-color: var(--pp-midnight); font-weight: 700;
}
.vg-bouton-primaire:hover:not(:disabled) { background: var(--pp-midnight-2); }
.vg-bouton-primaire:disabled { opacity: 0.55; cursor: default; }

.vg-erreur {
    background: var(--pp-red-bg); border: 1px solid var(--pp-red-border); border-radius: 12px;
    padding: 16px; color: var(--pp-ink); font-size: 0.9rem;
}
.vg-erreur a { color: var(--pp-red); font-weight: 700; }

/* Urgence. Le liseré rouge passe devant la couleur de profil : sur le mur, on
   doit repérer une procédure collective sans lire une ligne. */
.vg-carte[data-urgence="haute"] { border-left-color: var(--pp-red); border-left-width: 6px; }
.vg-etiquette-urgent {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.63rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 6px;
    background: var(--pp-red-bg); color: var(--pp-red); border: 1px solid var(--pp-red-border);
}
.vg-feuille-urgent { font-weight: 700; }
.vg-feuille-urgent::before { content: '● '; color: var(--pp-red); }
.vg-compte-urgent { background: var(--pp-red-bg); color: var(--pp-red); border: 1px solid var(--pp-red-border); }


/* ------------------------------------------------------------- campagne */

.vg-campagne {
    background: #fff; border: 1px solid var(--pp-border); border-radius: 16px;
    box-shadow: var(--pp-shadow); padding: 14px 16px;
}
.vg-camp-compteurs {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    font-size: 0.82rem; color: var(--pp-muted); margin: 0 0 12px;
}
.vg-camp-compteurs b { color: var(--pp-ink); font-weight: 700; }

.vg-camp-alerte {
    background: var(--pp-red-bg); border: 1px solid var(--pp-red-border);
    border-radius: 10px; padding: 9px 11px; margin: 0 0 10px;
    font-size: 0.84rem; color: var(--pp-ink);
}
.vg-camp-ok {
    background: var(--pp-green-bg); border: 1px solid var(--pp-green-border);
    border-radius: 10px; padding: 9px 11px; margin: 0 0 10px;
    font-size: 0.84rem; color: var(--pp-ink);
}

.vg-camp-bloc { border-top: 1px solid var(--pp-border); padding-top: 10px; margin-top: 10px; }
.vg-camp-bloc > summary {
    cursor: pointer; font-size: 0.86rem; font-weight: 700; color: var(--pp-ink);
    list-style: none; display: flex; align-items: baseline; gap: 7px;
}
.vg-camp-bloc > summary::-webkit-details-marker { display: none; }
.vg-camp-bloc > summary::before { content: '▸'; color: var(--pp-muted); font-size: 0.7rem; }
.vg-camp-bloc[open] > summary::before { content: '▾'; }
.vg-camp-quoi { font-weight: 400; color: var(--pp-muted); font-size: 0.78rem; }

.vg-camp-liste { list-style: none; margin: 9px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.vg-camp-liste li {
    display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
    font-size: 0.82rem; border-top: 1px solid var(--pp-bg);
}
.vg-camp-liste li:first-child { border-top: 0; }
.vg-camp-dep {
    font-size: 0.68rem; font-weight: 700; color: var(--pp-muted);
    background: var(--pp-bg); border-radius: 5px; padding: 1px 5px; flex: none;
    min-width: 24px; text-align: center;
}
.vg-camp-liste a { color: var(--pp-ink); text-decoration: none; }
.vg-camp-liste a:hover { color: var(--pp-red); text-decoration: underline; }
.vg-camp-note { font-size: 0.76rem; color: var(--pp-muted); margin: 9px 0 0; }
.vg-camp-pied { font-size: 0.74rem; color: var(--pp-muted); margin: 12px 0 0; }

/* ------------------------------------------------- Newsletter Hammer */

.vg-lien-hammer {
    color: rgba(255,255,255,0.85); text-decoration: none; margin-right: 16px;
    font-size: 0.86rem;
}
.vg-lien-hammer:hover { color: #fff; text-decoration: underline; }

.vg-hammer { max-width: 1240px; margin: 32px auto 60px; padding: 0 24px; }
.vg-hammer-tete { margin-bottom: 28px; }
.vg-hammer-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem;
    color: var(--pp-ink); margin: 0 0 6px;
}
.vg-hammer-sous { color: var(--pp-muted); font-size: 0.92rem; margin: 0; max-width: 60ch; }
.vg-hammer-bloc { margin-bottom: 34px; }

.vg-vague {
    background: #fff; border: 1px solid var(--pp-border); border-radius: 16px;
    box-shadow: var(--pp-shadow); padding: 16px 18px; margin-bottom: 16px;
}
.vg-vague-tete { display: flex; align-items: baseline; gap: 10px; }
.vg-vague-numero {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--pp-muted); background: var(--pp-bg); border-radius: 6px; padding: 2px 7px;
}
.vg-vague-mois {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem;
    color: var(--pp-ink); margin: 0; text-transform: capitalize;
}
.vg-vague-intention {
    font-size: 0.85rem; color: var(--pp-muted); margin: 8px 0 0; max-width: 68ch;
}

/* Deux colonnes, un seul axe de dates au milieu : à gauche le hammer (un
   courriel à un client), à droite ce qui part dehors. C'est l'axe central qui
   répond à la question de l'écran — à quel moment parle-t-on dedans, à quel
   moment dehors — d'où les entrées triées par date toutes colonnes confondues
   (voir construireMois dans hammer.js).

   Une grille par ligne, et non une grande grille commune sur le mois : les
   colonnes restent alignées puisque le gabarit est le même partout, la date se
   place sans dépendre de l'ordre du DOM, et l'écran étroit n'a qu'à repasser la
   ligne en `display: block`. Une grande grille commune obligerait à calculer
   des `grid-row` en JS, donc à poser des styles en ligne qu'aucune media query
   ne pourrait défaire. */
.vg-ligne {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 112px 1fr;
    align-items: start;
}
/* Le fil vertical est porté par chaque ligne, donc continu de l'une à l'autre
   puisqu'elles se touchent. Sous l'en-tête il ne part que de la mi-hauteur :
   le temps commence à la première entrée. */
.vg-ligne::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; margin-left: -0.5px; background: var(--pp-border);
}
.vg-ligne-entete::before { top: 60%; }

.vg-ligne > .vg-axe-date { grid-column: 2; grid-row: 1; }
.vg-ligne-h > .vg-sujet { grid-column: 1; grid-row: 1; }
.vg-ligne-e > .vg-jalon { grid-column: 3; grid-row: 1; }
.vg-ligne-entete > .vg-col-h { grid-column: 1; grid-row: 1; }
.vg-ligne-entete > .vg-col-e { grid-column: 3; grid-row: 1; }

.vg-col-entete { padding: 14px 0 9px; border-bottom: 1px solid var(--pp-border); }
.vg-col-nom {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.72rem;
    letter-spacing: 0.08em; text-transform: uppercase; margin-right: 9px;
}
.vg-col-h .vg-col-nom { color: var(--pp-red); }
.vg-col-e .vg-col-nom { color: var(--pp-muted); }
.vg-col-quoi { font-size: 0.76rem; color: var(--pp-muted); }
.vg-col-vide { font-size: 0.82rem; color: var(--pp-muted); font-style: italic; margin: 9px 0 0; }

.vg-axe-date { display: flex; flex-direction: column; align-items: center; padding: 18px 6px 0; }
/* Opaque, pour couper le fil au lieu de le chevaucher. */
.vg-axe-jour {
    position: relative; z-index: 1; white-space: nowrap; text-align: center;
    font-size: 0.7rem; font-weight: 700; color: var(--pp-ink); background: #fff;
    border: 1px solid var(--pp-border); border-radius: 999px; padding: 2px 9px;
}
/* La date d'un courriel client est en rouge sur l'axe, celle d'un jalon externe
   reste neutre. C'est ce qui permet de descendre la seule colonne du milieu et
   de voir tout de suite quand on parle à un client — sans avoir à remonter aux
   en-têtes pour savoir de quel côté on est. */
.vg-ligne-h .vg-axe-jour {
    color: var(--pp-red); background: var(--pp-red-bg); border-color: var(--pp-red-border);
}
/* Sur deux colonnes, le côté est dit par les en-têtes et par la couleur de la
   date. Ni l'un ni l'autre ne se restitue à la lecture d'écran : les en-têtes
   sont loin, la couleur ne se lit pas, et la position en colonne ne s'entend
   pas. `display: none` sortait de l'arbre d'accessibilité le seul mot qui
   restait. L'étiquette est donc masquée à l'œil et gardée au texte. */
.vg-axe-cote {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Un jalon externe : une date, un canal, ce qui part. Volontairement plus sobre
   qu'un sujet hammer — il n'y a rien à y décider, c'est un repère. */
.vg-jalon { border-top: 1px solid var(--pp-bg); margin-top: 14px; padding-top: 14px; }
.vg-jalon-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vg-jalon-canal {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--pp-muted); background: var(--pp-bg); border-radius: 6px; padding: 2px 7px;
    flex: none;
}
.vg-jalon-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem;
    color: var(--pp-ink); margin: 0;
}
.vg-jalon-attendu { font-size: 0.84rem; color: var(--pp-muted); margin: 7px 0 0; max-width: 60ch; }

/* Sous 980 px les deux colonnes s'empilent. La ligne redevient un flux, et
   comme la date précède sa carte dans le DOM, elle se retrouve au-dessus sans
   qu'il y ait rien à réordonner. Le fil vertical disparaît : il ne veut plus
   rien dire dans une colonne unique, et c'est l'étiquette du côté qui reprend
   son rôle. */
@media (max-width: 980px) {
    .vg-ligne { display: block; }
    .vg-ligne::before { display: none; }
    .vg-axe-date { flex-direction: row; align-items: baseline; gap: 8px;
                   justify-content: flex-start; padding: 16px 0 0; }
    /* Colonne unique : l'étiquette redevient visible, c'est elle qui dit alors
       si la date part dedans ou dehors. */
    .vg-axe-cote {
        position: static; width: auto; height: auto; overflow: visible;
        clip: auto; clip-path: none;
        font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .vg-ligne-h .vg-axe-cote { color: var(--pp-red); }
    .vg-ligne-e .vg-axe-cote { color: var(--pp-muted); }
    .vg-ligne-entete > .vg-col-e { margin-top: 16px; }
    .vg-sujet, .vg-jalon { border-top: 0; margin-top: 4px; padding-top: 4px; }
}

.vg-sujet { border-top: 1px solid var(--pp-bg); margin-top: 14px; padding-top: 14px; }
.vg-sujet-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vg-sujet-titre {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.95rem;
    color: var(--pp-ink); margin: 0;
}
.vg-sujet-chiffres { font-size: 0.85rem; color: var(--pp-muted); margin: 8px 0 4px; }
.vg-sujet-chiffres b { color: var(--pp-ink); }
.vg-sujet-note { color: var(--pp-muted); }
.vg-sujet-regle {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem; color: var(--pp-ink); background: var(--pp-bg);
    border-radius: 8px; padding: 6px 9px; margin: 0 0 6px;
}
/* La « règle » d'un sujet hors Odoo n'est pas un filtre, c'est une phrase qui
   dit d'où vient sa liste. En monospace, elle passerait pour un ciblage
   machine — exactement ce qu'elle n'est pas. */
.vg-sujet-hors .vg-sujet-regle {
    font-family: 'Lato', sans-serif; font-size: 0.82rem; font-style: italic;
    color: var(--pp-muted);
}
.vg-sujet-angle { font-size: 0.84rem; color: var(--pp-muted); margin: 0 0 8px; max-width: 68ch; }
.vg-sujet-sanstexte { font-size: 0.82rem; color: var(--pp-muted); font-style: italic; margin: 6px 0 0; }
.vg-sujet-texte {
    white-space: pre-wrap; font-family: 'Lato', sans-serif; font-size: 0.86rem;
    line-height: 1.55; color: var(--pp-ink); background: var(--pp-bg);
    border-radius: 10px; padding: 14px 16px; margin: 10px 0 0; overflow-x: auto;
}
.vg-sujet-manque { margin: 6px 0 0; padding-left: 18px; font-size: 0.82rem; }

/* Qui est visé, et comment on en retire quelqu'un. La ligne décochée reste
   affichée, barrée : un effectif qui baisse sans qu'on voie qui en est sorti ne
   se conteste pas — et c'est justement pour pouvoir contester la liste que
   celle-ci existe. */
.vg-camp-liste li.vg-cible { align-items: center; }
.vg-cible-nom {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    flex: 1; min-width: 0; color: var(--pp-ink);
}
.vg-cible-case { accent-color: var(--pp-red); width: 14px; height: 14px; flex: none; cursor: pointer; }
.vg-cible-case:disabled { cursor: progress; }
.vg-cible-exclue .vg-cible-nom { color: var(--pp-muted); text-decoration: line-through; }
/* Sélecteur qualifié : `.vg-camp-liste a` plus haut fixe déjà la couleur des
   liens de ces listes, et l'emporterait sur une classe seule. */
.vg-camp-liste a.vg-cible-fiche { font-size: 0.72rem; color: var(--pp-muted); flex: none; }
.vg-cible-echec {
    font-size: 0.72rem; font-weight: 700; color: var(--pp-red);
    background: var(--pp-red-bg); border-radius: 5px; padding: 1px 6px; flex: none;
}

/* Les adresses, demandées à la ligne du bouton et posées sous chaque société.
   `flex-wrap` sur la ligne plutôt qu'un second conteneur : les adresses
   appartiennent à leur société, elles doivent suivre ses classes — barrée,
   décochée, retirée du DOM avec elle. */
.vg-cible-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
/* Les deux marges de `vg-bouton-fin` sont remises à zéro. `margin-left: auto` est
   sa place dans la ligne d'une version, où il termine la ligne ; ici il ouvre la
   liste, il vient donc devant. Et le `margin-top: 28px` ne vient pas de lui mais
   du sélecteur `button` nu de la feuille du hub, que rien ne neutralise ici : dans
   une ligne flex il décale le bouton seul, et le compteur d'à côté se retrouve
   au-dessus de lui. */
.vg-cible-barre > .vg-bouton-fin { margin: 0; }
.vg-camp-liste li.vg-cible { flex-wrap: wrap; }
.vg-cible-adresses { flex: 0 0 100%; list-style: none; margin: 2px 0 3px; padding: 0 0 0 22px; }
.vg-camp-liste .vg-cible-adresses li {
    border-top: 0; padding: 1px 0; font-size: 0.78rem;
}
.vg-adresse-mail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; }
.vg-cible-rien { flex: none; font-style: italic; }

/* Écrire et réécrire le texte d'un sujet, depuis l'écran.

   Le texte vit désormais en base et plus dans `campagnes/textes/*.md` : dès
   qu'on peut le réécrire ici, le fichier ne peut plus faire foi — le conteneur
   est reconstruit à chaque déploiement. D'où le versionnage affiché avec le
   texte, et l'historique repliable en dessous : un modèle qui réécrit, ça se
   compare, sinon on ne voit pas le paragraphe qu'il a fait disparaître. */

.vg-texte-version {
    font-size: 0.76rem; color: var(--pp-muted); margin: 10px 0 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.vg-texte-version b { color: var(--pp-ink); }
.vg-version-consigne { font-style: italic; color: var(--pp-muted); font-size: 0.76rem; }

.vg-redac { margin-top: 12px; }
.vg-redac-champ {
    width: 100%; box-sizing: border-box; resize: vertical;
    font-family: 'Lato', sans-serif; font-size: 0.84rem; line-height: 1.45;
    color: var(--pp-ink); background: #fff;
    border: 1px solid var(--pp-border); border-radius: 10px; padding: 8px 10px;
}
.vg-redac-champ:focus { outline: 2px solid var(--pp-midnight-2); outline-offset: 1px; }
.vg-redac-champ:disabled { background: var(--pp-bg); color: var(--pp-muted); }
.vg-redac-barre { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.vg-redac-etat { font-size: 0.76rem; color: var(--pp-muted); }
.vg-redac-echec { color: var(--pp-red); font-weight: 700; }
.vg-bouton:disabled { opacity: 0.55; cursor: progress; }

.vg-versions { margin-top: 14px; border-top: 1px solid var(--pp-border); padding-top: 10px; }
.vg-versions > summary {
    cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--pp-muted);
    list-style: none; display: flex; align-items: baseline; gap: 7px;
}
.vg-versions > summary::-webkit-details-marker { display: none; }
.vg-versions > summary::before { content: '▸'; font-size: 0.7rem; }
.vg-versions[open] > summary::before { content: '▾'; }
.vg-version { border-top: 1px solid var(--pp-bg); padding: 9px 0 0; margin-top: 9px; }
.vg-version:first-of-type { border-top: 0; }
.vg-version-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.76rem; }
.vg-version-active {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--pp-midnight); background: var(--pp-accent-light); border-radius: 5px; padding: 1px 6px;
}
.vg-bouton-fin {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.65rem;
    padding: 3px 8px; border-radius: 6px; border: 1px solid var(--pp-border);
    background: #fff; color: var(--pp-muted); cursor: pointer; margin-left: auto;
}
.vg-bouton-fin:hover { color: var(--pp-ink); background: var(--pp-accent-light); }
.vg-bouton-fin:disabled { opacity: 0.55; cursor: progress; }
/* L'aperçu est plafonné : l'historique sert à comparer des versions, pas à
   relire cinq courriels entiers empilés. Celui qu'on retient s'affiche en
   entier au-dessus, une fois choisi. */
.vg-version-corps {
    white-space: pre-wrap; font-family: 'Lato', sans-serif; font-size: 0.78rem;
    line-height: 1.5; color: var(--pp-muted); background: var(--pp-bg);
    border-radius: 8px; padding: 9px 11px; margin: 7px 0 0;
    max-height: 170px; overflow-y: auto;
}
.vg-version-retenue .vg-version-corps { color: var(--pp-ink); }

/* L'export ferme la relecture d'un sujet : on a vu qui est visé, on a lu le
   texte, on emporte le fichier. Rien ne part d'ici — l'import Brevo est un
   geste à la main, et c'est ce que dit le compteur à côté du bouton. */
.vg-sujet-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pp-border);
}