/* ── Composeur d'annonces — disposition G ────────────────────────────────────
   Jetons issus du skill ui-ux-pro-max, pas d'un choix esthétique :
     · style « data-dense-dashboard » → padding 12px, écart 8px, corps 12–14px,
       hauteur de ligne 36px, en-tête 56px, grille 12 colonnes ;
     · palette « Financial Dashboard » (sombre) → fond #020617, carte #0E1223,
       muet #1A1E2F, bordure #334155, secondaire #94A3B8, accent #22C55E ;
     · appairage « Dashboard Data » → monospace pour libellés et chiffres.
   Les polices Fira sont volontairement NON chargées depuis Google : le dashboard
   n'a pas besoin d'une dépendance externe pour ça, on retombe sur le monospace
   système, qui tient le même rôle.

   Tout est préfixé `an-` et vit dans ce fichier : `style.css` (446 Ko) n'est pas
   touché, et retirer la fonctionnalité revient à enlever deux balises. */
#view-annonce {
  --an-bg: #020617;
  --an-card: #0E1223;
  --an-muted: #1A1E2F;
  --an-br: #1E293B;
  --an-br2: #263041;
  --an-fg: #F8FAFC;
  --an-mfg: #94A3B8;
  --an-dim: #64748B;
  --an-ac: #22C55E;
  --an-on-ac: #0F172A;
  --an-wa: #F59E0B;
  --an-de: #EF4444;
  --an-gap: 8px;
  --an-pad: 12px;
  --an-row: 36px;
  --an-hd: 56px;
  --an-mono: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
}

#view-annonce .an-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--an-gap); align-items: start; }
#view-annonce .an-main { grid-column: span 8; }
#view-annonce .an-rail { grid-column: span 4; display: flex; flex-direction: column; gap: var(--an-gap); }
@media (max-width: 1240px) {
  #view-annonce .an-main, #view-annonce .an-rail { grid-column: span 12; }
}

#view-annonce .an-card { background: var(--an-card); border: 1px solid var(--an-br); border-radius: 8px; }
#view-annonce .an-hd { min-height: var(--an-hd); display: flex; align-items: center; gap: var(--an-gap);
  padding: 0 var(--an-pad); border-bottom: 1px solid var(--an-br); flex-wrap: wrap; }
#view-annonce .an-hd.an-sm { min-height: 40px; }
#view-annonce .an-tt { font: 600 13px/1 var(--an-mono); letter-spacing: .05em; color: var(--an-fg); }
#view-annonce .an-k { font: 500 11px/1 var(--an-mono); letter-spacing: .1em; color: var(--an-mfg); text-transform: uppercase; }
#view-annonce .an-num { font: 12px/1 var(--an-mono); color: var(--an-mfg); font-variant-numeric: tabular-nums; }
#view-annonce .an-num.an-trop { color: var(--an-de); font-weight: 700; }

/* Outils : hauteur fixe 26px, jamais de retour à la ligne accidentel — c'est ce
   qui laissait les deux boutons IA orphelins dans la version précédente. */
#view-annonce .an-barre { display: flex; align-items: center; gap: 4px; margin-bottom: var(--an-gap); flex-wrap: wrap; }
#view-annonce .an-outil { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border-radius: 5px; background: var(--an-muted); border: 1px solid var(--an-br2); color: #CBD5E1;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .16s, background .16s; }
#view-annonce .an-outil:hover { border-color: #334155; background: #202A3C; }
#view-annonce .an-outil:focus-visible { outline: 2px solid var(--an-ac); outline-offset: 1px; }
#view-annonce .an-outil.an-ia { margin-left: auto; background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.42); color: #4ADE80; font-weight: 600; }
#view-annonce .an-outil.an-ia:hover { background: rgba(34,197,94,.2); }
#view-annonce .an-outil.an-undo { border-style: dashed; background: transparent; color: var(--an-dim); margin-left: 0; }
#view-annonce .an-sep { width: 1px; align-self: stretch; background: var(--an-br2); margin: 3px 3px; }

/* Bascule Éditer / Aperçu : les deux occupent la MÊME surface. Deux colonnes à
   moitié vides ne servent personne, et l'écriture récupère toute la largeur. */
#view-annonce .an-seg { display: inline-flex; height: 26px; background: var(--an-muted);
  border: 1px solid var(--an-br2); border-radius: 5px; padding: 2px; }
#view-annonce .an-seg button { display: flex; align-items: center; padding: 0 11px; border: 0; border-radius: 4px;
  background: transparent; color: var(--an-mfg); font-size: 12px; font-weight: 600; cursor: pointer; }
#view-annonce .an-seg button.is-on { background: var(--an-card); color: var(--an-fg); }

#view-annonce #an-texte { width: 100%; height: 300px; resize: vertical; display: block;
  background: #060B1A; border: 1px solid var(--an-br); border-radius: 6px; padding: var(--an-pad) 14px;
  font: 13.5px/1.7 var(--an-mono); color: #E2E8F0; }
#view-annonce #an-texte:focus { outline: 2px solid var(--an-ac); outline-offset: -1px; border-color: transparent; }

/* Aperçu fidèle : avatar, pseudo, badge APP, heure. Voir le message tel qu'un
   membre le verra vaut mieux qu'un bloc de texte gris. */
#view-annonce #an-apercu { height: 300px; overflow-y: auto; background: #313338; border-radius: 6px;
  padding: 14px; font: 15px/1.375 "gg sans", "Helvetica Neue", sans-serif; color: #dbdee1; }
#view-annonce .an-dc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#view-annonce .an-dc-av { width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #22d3ee, #22C55E); }
#view-annonce .an-dc-n { font-weight: 600; color: #f2f3f5; }
#view-annonce .an-dc-b { font: 700 9.5px/1 var(--an-mono); background: #5865f2; color: #fff;
  border-radius: 3px; padding: 3px 4px; }
#view-annonce .an-dc-t { font-size: 11px; color: #949ba4; }
#view-annonce .an-dc-body { margin-left: 40px; word-break: break-word; }
#view-annonce .an-dc-body strong { color: #fff; }
#view-annonce .an-dc-body blockquote { border-left: 4px solid #4e5058; padding: 0 10px; margin: 3px 0; }
#view-annonce .an-dc-body code { background: #2b2d31; border-radius: 4px; padding: 1px 4px; font: 13px var(--an-mono); }
#view-annonce .an-dc-body pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 5px;
  padding: 8px 10px; overflow-x: auto; font: 13px var(--an-mono); }
#view-annonce .an-dc-body a { color: #00a8fc; text-decoration: none; }
#view-annonce .an-dc-body li { margin-left: 18px; }
#view-annonce .an-mention { background: rgba(34,197,94,.25); color: #86EFAC; border-radius: 3px;
  padding: 0 2px; font-weight: 600; }
#view-annonce .an-spoiler { background: #202225; color: #202225; border-radius: 3px; padding: 0 3px; }
#view-annonce .an-spoiler:hover { color: #dbdee1; }
#view-annonce .an-vide { color: #72767d; font-style: italic; }

/* Lignes du rail : 36px, la hauteur prescrite par le style dense. */
#view-annonce .an-row { display: flex; align-items: center; gap: 9px; min-height: var(--an-row);
  padding: 0 var(--an-pad); font-size: 13px; border-bottom: 1px solid #151E2E; }
#view-annonce .an-row:last-child { border-bottom: 0; }
#view-annonce .an-row.an-hs { opacity: .45; }
#view-annonce .an-row svg { width: 14px; height: 14px; flex: none; }
#view-annonce .an-row .an-src { margin-left: auto; }
#view-annonce .an-pt { width: 5px; height: 5px; border-radius: 50%; background: var(--an-ac); flex: none; }
#view-annonce .an-row input[type=checkbox] { accent-color: var(--an-ac); width: 14px; height: 14px; cursor: pointer; }
#view-annonce .an-ok svg { stroke: var(--an-ac); }
#view-annonce .an-warn svg { stroke: var(--an-wa); }
#view-annonce .an-warn { color: var(--an-wa); }
#view-annonce .an-neutre svg { stroke: var(--an-dim); }
#view-annonce .an-ko svg { stroke: var(--an-de); }
#view-annonce .an-ko { color: var(--an-de); }

#view-annonce .an-sw { width: 32px; height: 18px; border-radius: 99px; background: var(--an-br2);
  position: relative; flex: none; cursor: pointer; border: 0; transition: background .16s; }
#view-annonce .an-sw:after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: left .16s; }
#view-annonce .an-sw.is-on { background: var(--an-ac); }
#view-annonce .an-sw.is-on:after { left: 16px; }

#view-annonce .an-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px;
  border: 0; border-radius: 6px; background: var(--an-ac); color: var(--an-on-ac);
  font: 700 12.5px/1 var(--an-mono); letter-spacing: .04em; cursor: pointer; }
#view-annonce .an-btn svg { width: 13px; height: 13px; }
#view-annonce .an-btn:disabled { background: var(--an-muted); color: var(--an-dim); cursor: not-allowed; }
#view-annonce .an-btn:not(:disabled):hover { background: #16A34A; }

#view-annonce .an-retour { font-size: 12.5px; padding: 0 var(--an-pad) var(--an-pad); min-height: 16px; }
#view-annonce .an-retour.an-r-ok { color: var(--an-ac); font-weight: 600; }
#view-annonce .an-retour.an-r-ko { color: var(--an-de); font-weight: 600; }
#view-annonce .an-retour.an-r-part { color: var(--an-wa); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  #view-annonce * { transition: none !important; }
}