/* ═══════════════════════════════════════════════════════════════════════════
   💬 LE FORUM
   ───────────────────────────────────────────────────────────────────────────
   Préfixe « fo- ». Rien n'est redéfini ici de ce que theme.css et membre.css
   savent déjà faire : les cartes, les avatars, les badges de succès, les
   boutons et la pagination viennent de là. Cette feuille n'ajoute QUE ce que
   le forum a en propre — la liste des sujets, le fil, les réactions.

   ⚠️ AUCUNE COULEUR EN DUR. Tout passe par les variables du thème, sinon le
   forum resterait clair quand le reste du site passe en sombre — et c'est
   exactement le genre d'écart qu'on ne voit qu'une fois en ligne.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Deux tailles d'avatar qui manquaient : la liste et les entêtes compacts. */
.mb-ava--s  { --taille: 40px; }
.mb-ava--xs { --taille: 26px; }

.fo-tete .pg-page__t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fo-titre { font-size: clamp(22px, 3.4vw, 32px); line-height: 1.25; }
.fo-ico { font-size: .85em; }
.fo-compte { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

.fo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.fo-note {
    font-size: 13px; color: var(--ink-2);
    padding: 8px 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--ligne);
}

.fo-h2 { margin: 30px 0 14px; font-size: 17px; font-weight: 750; }
.fo-h2:first-child { margin-top: 0; }

/* ── La barre de chiffres ─────────────────────────────────────────────
   Elle dit en une ligne si le forum est vivant. Un forum dont on ne voit pas
   l'activité passe pour mort, même quand il ne l'est pas.                  */
.fo-barre__in {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    justify-content: space-between;
}
.fo-chiffres { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fo-chiffres li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.fo-chiffres b { font-size: 15px; font-weight: 750; }
.fo-chiffres i { font-style: normal; color: var(--ink-3); }

/* ── La mise en page de l'accueil ───────────────────────────────────── */
.fo-grille {
    display: grid; gap: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
}
/* min-width: 0 — sans lui, un titre de sujet sans espace (une adresse collée)
   élargit la colonne au lieu d'être coupé, et pousse la barre latérale hors
   de l'écran. C'est le défaut des grilles, pas une précaution superflue. */
.fo-corps { min-width: 0; }
.fo-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; min-width: 0; }
.fo-side__dernier { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.fo-side__d { min-width: 0; display: flex; flex-direction: column; }
.fo-side__d > a { font-weight: 650; line-height: 1.35; }
.fo-side__dernier i {
    display: block; margin-top: 3px; font-style: normal;
    color: var(--ink-3); font-size: 12.5px;
}
.fo-side__dernier i a { color: var(--ink-2); font-weight: 600; }
.fo-side__dernier .fo-role { padding: 0 5px; }

.fo-regles ul, .fo-conseils ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.fo-regles li, .fo-conseils li { margin-bottom: 5px; }
.fo-vivant p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.fo-vivant b { font-size: 20px; color: var(--ink); }

.fo-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fo-top li { display: flex; align-items: center; gap: 9px; }
.fo-top__r {
    width: 20px; flex: none; text-align: center;
    font-size: 12px; font-weight: 800; color: var(--ink-3);
}
.fo-top__c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fo-top__c a, .fo-top__c b { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-top__c i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.fo-top__n { font-size: 13px; font-weight: 750; color: var(--accent); }

/* ── Les catégories ─────────────────────────────────────────────────── */
.fo-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fo-cat {
    --fo-c: var(--accent);
    display: grid; gap: 14px; align-items: center;
    grid-template-columns: 54px minmax(0, 1fr) minmax(0, 230px);
    padding: 14px 16px; border-radius: var(--radius);
    background: var(--carte); border: 1px solid var(--ligne);
    transition: border-color .15s, box-shadow .15s;
}
.fo-cat:hover { border-color: color-mix(in srgb, var(--fo-c) 55%, transparent); box-shadow: var(--ombre); }
.fo-cat--off { opacity: .6; border-style: dashed; }
.fo-cat__e {
    width: 54px; height: 54px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; font-size: 25px;
    background: color-mix(in srgb, var(--fo-c) 14%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--fo-c) 32%, transparent);
    text-decoration: none;
}
.fo-cat__c { min-width: 0; }
.fo-cat__c h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 750; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fo-cat__c h3 a { color: inherit; text-decoration: none; }
.fo-cat__c h3 a:hover { color: var(--fo-c); }
.fo-cat__c p { margin: 0 0 5px; font-size: 13px; color: var(--ink-2); }
.fo-cat__n { font-size: 12px; color: var(--ink-3); }

.fo-cat__dernier { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12.5px; }
.fo-cat__d { min-width: 0; display: flex; flex-direction: column; }
.fo-cat__d a { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-cat__d i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.fo-cat__dernier--vide { color: var(--ink-3); font-style: italic; }

.fo-tag {
    padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 650;
    background: var(--surface); border: 1px solid var(--ligne); color: var(--ink-2);
}
.fo-tag--off { background: color-mix(in srgb, var(--ambre) 14%, transparent); color: var(--ambre); border-color: transparent; }

/* ── La liste des sujets ────────────────────────────────────────────── */
.fo-sujets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fo-sujet {
    display: grid; gap: 14px; align-items: center;
    grid-template-columns: 40px minmax(0, 1fr) 130px minmax(0, 170px);
    padding: 12px 16px; border-radius: 14px;
    background: var(--carte); border: 1px solid var(--ligne);
    transition: border-color .15s, box-shadow .15s;
}
.fo-sujet:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--ombre); }
.fo-sujet--pin { border-left: 3px solid var(--accent); }
.fo-sujet--masque { opacity: .62; border-style: dashed; }

.fo-sujet__c { min-width: 0; }
.fo-sujet__t { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.fo-sujet__t a { color: inherit; text-decoration: none; }
.fo-sujet__t a:hover { color: var(--accent); }
.fo-sujet__m {
    margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: 12px; color: var(--ink-3);
}
.fo-sujet__m b { font-weight: 650; color: var(--ink-2); }
.fo-sujet__cat { font-weight: 600; }

.fo-sujet__n { display: flex; gap: 14px; justify-content: center; text-align: center; }
.fo-sujet__n span { display: flex; flex-direction: column; }
.fo-sujet__n b { font-size: 15px; font-weight: 750; }
.fo-sujet__n i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.fo-chaud b { color: var(--ambre); }

.fo-sujet__d { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.fo-sujet__d b { font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-sujet__d i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }

.fo-bas { margin-top: 22px; text-align: center; }

/* ── L'étiquette d'un rôle ───────────────────────────────────────────
   ⚠️ ELLE DOIT SE VOIR SANS LA CHERCHER. Un administrateur qui ressemble à
   tout le monde, c'est un avis pris pour une décision — ou l'inverse.      */
.fo-role {
    --fo-r: var(--accent);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 99px;
    font-style: normal; font-size: 11px; font-weight: 750; letter-spacing: .01em;
    color: var(--fo-r);
    background: color-mix(in srgb, var(--fo-r) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--fo-r) 40%, transparent);
}
.fo-role--bloc { margin-top: 2px; }

/* ── Le fil ──────────────────────────────────────────────────────────── */
.fo-fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: fo; }
/* ⚠️ PAS DE « overflow: hidden » ICI, ET C'EST UNE RÉPARATION.
   Il servait à faire suivre au fond de la colonne auteur les coins arrondis de
   la carte. Mais il ROGNE tout ce qui dépasse — et l'infobulle d'un succès
   dépasse, par construction : elle fait 260 px de large et sort d'une colonne
   de 178. Elle se retrouvait coupée net, comme glissée SOUS le message.
   Les coins sont donc posés sur la colonne elle-même, ci-dessous. */
.fo-msg {
    display: grid; gap: 0;
    grid-template-columns: 178px minmax(0, 1fr);
    border-radius: var(--radius);
    background: var(--carte); border: 1px solid var(--ligne);
    scroll-margin-top: 90px;
}
.fo-msg--ouverture { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fo-msg--masque { opacity: .7; border-style: dashed; }
.fo-msg:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.fo-auteur {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 12px; text-align: center;
    background: var(--surface); border-right: 1px solid var(--ligne);
    /* Les coins, posés ici plutôt que par un rognage sur la carte. « -1px »
       parce que la bordure de la carte occupe déjà un pixel. */
    border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
    /* Positionnée, pour que l'infobulle d'un succès passe AU-DESSUS des
       messages suivants au lieu de disparaître derrière eux. */
    position: relative; z-index: 1;
}
.fo-auteur__n { font-size: 14px; font-weight: 750; line-height: 1.3; word-break: break-word; }
.fo-auteur__n a { color: inherit; text-decoration: none; }
.fo-auteur__n a:hover { color: var(--accent); text-decoration: underline; }
.fo-auteur__niv { font-size: 11.5px; color: var(--ink-3); }
.fo-auteur__m { margin-top: 4px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.fo-auteur__m i { display: block; font-style: normal; }
.fo-badges { margin: 6px 0 0; justify-content: center; gap: 5px; }
/* Dans la colonne, le badge se réduit à son emoji : le nom du succès est dans
   l'infobulle, et trois noms complets prendraient toute la hauteur. */
.fo-badges .mb-badge-s { padding: 4px; }
.fo-badges .mb-badge-s > span:not(.mb-bulle) { width: 22px; height: 22px; font-size: 12px; }

.fo-corps-msg { padding: 16px 20px 12px; min-width: 0; display: flex; flex-direction: column; }
.fo-msg__tete {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ligne);
    font-size: 12px; color: var(--ink-3);
}
.fo-msg__n { font-weight: 750; color: var(--ink-3); text-decoration: none; }
.fo-msg__n:hover { color: var(--accent); }
.fo-msg__e { font-style: italic; }
.fo-msg__c { margin-left: auto; }

.fo-retire {
    margin-bottom: 12px; padding: 10px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--rouge) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--rouge) 28%, transparent);
    font-size: 12.5px; color: var(--ink-2);
}
.fo-retire b { display: block; color: var(--rouge); }

.fo-texte { flex: 1; font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.fo-texte > :first-child { margin-top: 0; }
.fo-texte > :last-child { margin-bottom: 0; }
.fo-texte img { max-width: 100%; height: auto; border-radius: 10px; }

.fo-images { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fo-images img {
    max-height: 230px; max-width: 100%; border-radius: 12px;
    border: 1px solid var(--ligne); display: block;
}

.fo-videos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fo-video { position: relative; width: min(420px, 100%); aspect-ratio: 16 / 9; }
.fo-video__b {
    width: 100%; height: 100%; padding: 0; border: 1px solid var(--ligne);
    border-radius: 12px; overflow: hidden; cursor: pointer; background: #000;
    display: block; position: relative;
}
.fo-video__b img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.fo-video__b span {
    position: absolute; inset: 0; margin: auto;
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: 20px; padding-left: 4px;
}
.fo-video__b:hover img { opacity: 1; }
.fo-video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* ── Les réactions ───────────────────────────────────────────────────── */
.fo-msg__pied {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ligne);
}
.fo-reacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fo-react {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 99px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--ligne);
    color: var(--ink-2); font-size: 12.5px; font-weight: 650;
    transition: border-color .14s, background .14s, transform .14s;
}
.fo-react:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.fo-react:disabled { cursor: default; }
.fo-react--moi {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.fo-palette { position: relative; }
.fo-palette summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 1px;
    padding: 3px 9px; border-radius: 99px; font-size: 12.5px;
    background: var(--surface); border: 1px dashed var(--ligne); color: var(--ink-3);
}
.fo-palette summary::-webkit-details-marker { display: none; }
.fo-palette summary:hover { border-color: var(--accent); color: var(--accent); }
.fo-palette__l {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
    display: flex; gap: 2px; padding: 6px;
    background: var(--carte); border: 1px solid var(--ligne);
    border-radius: 12px; box-shadow: var(--ombre-f);
}
.fo-palette__l button {
    width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
    background: none; font-size: 18px; line-height: 1;
}
.fo-palette__l button:hover { background: var(--surface); transform: scale(1.15); }

.fo-msg__actes { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.fo-acte {
    padding: 4px 9px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    color: var(--ink-3); font: inherit; font-size: 12px; text-decoration: none;
}
.fo-acte:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.fo-acte:disabled { opacity: .55; cursor: default; }
.fo-acte--signal:hover:not(:disabled) { color: var(--rouge); }

/* ── La barre de modération ──────────────────────────────────────────── */
.fo-modo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 10px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    font-size: 13px;
}
.fo-modo > b { margin-right: 4px; }
.fo-modo__d { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.fo-modo__d select {
    padding: 5px 9px; border-radius: 8px; font: inherit; font-size: 12.5px;
    background: var(--carte); border: 1px solid var(--ligne); color: var(--ink);
}

/* ── Les avis ────────────────────────────────────────────────────────── */
.fo-flash {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 18px 0 0; padding: 12px 16px; border-radius: 12px;
    background: color-mix(in srgb, var(--vert) 9%, var(--carte));
    border: 1px solid color-mix(in srgb, var(--vert) 30%, transparent);
    font-size: 13.5px;
}
.fo-flash p, .fo-flash ul { margin: 0; }
.fo-flash ul { padding-left: 18px; }
.fo-flash--erreur {
    background: color-mix(in srgb, var(--rouge) 9%, var(--carte));
    border-color: color-mix(in srgb, var(--rouge) 30%, transparent);
}
.fo-flash--ferme {
    background: color-mix(in srgb, var(--ambre) 10%, var(--carte));
    border-color: color-mix(in srgb, var(--ambre) 32%, transparent);
}

/* ── Les champs ──────────────────────────────────────────────────────
   ⚠️ ILS SONT DÉFINIS ICI, ET C'EST TOUTE L'HISTOIRE. Les gabarits portaient
   « form-control » et « ui-field-label » — deux classes de L'ADMINISTRATION,
   qui n'existent nulle part dans le thème public. Résultat : des champs
   entièrement nus, sans bordure, sans hauteur, sans police.
   Le thème public n'a pas de classe de champ générique : l'espace membre
   style ses champs par le contenu de ses cartes. Le forum a donc la sienne. */
.fo-champ {
    width: 100%; padding: 11px 14px; border-radius: 11px;
    background: var(--carte); color: var(--ink);
    border: 1px solid var(--ligne);
    font: inherit; font-size: 14px; line-height: 1.5;
    transition: border-color .15s, box-shadow .15s;
}
.fo-champ::placeholder { color: var(--ink-3); }
.fo-champ:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea.fo-champ { resize: vertical; min-height: 120px; line-height: 1.6; }
select.fo-champ { cursor: pointer; }

.fo-label {
    display: block; margin: 0 0 6px;
    font-size: 13px; font-weight: 650; color: var(--ink-2);
}
.fo-label + .fo-champ { margin-bottom: 4px; }

/* ── L'éditeur ───────────────────────────────────────────────────────── */
.fo-formulaire {
    display: grid; gap: 22px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    align-items: start;
}
.fo-formulaire > form { min-width: 0; }
.fo-titre-champ { font-size: 16px; font-weight: 600; }

.fo-ed {
    margin-top: 16px; border-radius: 14px; overflow: hidden;
    background: var(--carte); border: 1px solid var(--ligne);
}
.fo-ed__barre {
    display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
    padding: 7px 9px; background: var(--surface); border-bottom: 1px solid var(--ligne);
}
.fo-ed__barre button {
    min-width: 30px; height: 28px; padding: 0 8px;
    border: 1px solid transparent; border-radius: 7px; cursor: pointer;
    background: none; color: var(--ink-2); font: inherit; font-size: 12.5px;
}
.fo-ed__barre button:hover { background: var(--carte); border-color: var(--ligne); color: var(--ink); }
.fo-ed__sep { width: 1px; height: 18px; margin: 0 5px; background: var(--ligne); }
.fo-ed__aide { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }

/* La zone de saisie remplit le cadre de l'éditeur : c'est LUI qui porte la
   bordure et le coin arrondi, sinon on verrait deux cadres imbriqués. */
.fo-ed__z {
    min-height: 190px; padding: 14px 16px;
    border: 0; border-radius: 0;
    font-size: 14.5px;
}
.fo-ed__z:focus { outline: none; box-shadow: none; }
.fo-ed:focus-within { border-color: var(--accent); }
.fo-ed__pied {
    display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;
    padding: 13px 14px; background: var(--surface); border-top: 1px solid var(--ligne);
}
.fo-ed__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fo-ed__t { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.fo-ed__f input[type="url"] { min-width: min(280px, 100%); font-size: 13px; padding: 9px 12px; }

/* ── Le choix des images ──────────────────────────────────────────────
   Le champ natif est posé par-dessus, transparent : il garde le clic, la
   tabulation et le dépôt de fichiers, et c'est l'étiquette qu'on voit. */
.fo-fichier {
    position: relative; display: inline-flex; align-items: center;
    gap: 10px; flex-wrap: wrap; cursor: pointer;
}
.fo-fichier input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.fo-fichier__b {
    padding: 9px 14px; border-radius: 10px;
    background: var(--carte); border: 1px dashed var(--ligne);
    font-size: 13px; font-weight: 650; color: var(--ink-2);
    transition: border-color .15s, color .15s, background .15s;
}
.fo-fichier:hover .fo-fichier__b,
.fo-fichier input[type="file"]:focus-visible ~ .fo-fichier__b {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--carte));
}
.fo-fichier__n { font-size: 12px; color: var(--ink-3); }
.fo-fichier--plein .fo-fichier__b { border-style: solid; border-color: var(--vert); color: var(--vert); }
.fo-fichier--trop .fo-fichier__b { border-style: solid; border-color: var(--rouge); color: var(--rouge); }
.fo-fichier--trop ~ .fo-vignettes .fo-vignette--hors { opacity: .4; }

/* L'aperçu : voir ce qu'on joint évite de poster la mauvaise capture. */
.fo-vignettes { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fo-vignettes[hidden] { display: none; }
.fo-vignette {
    position: relative; width: 74px; height: 56px; border-radius: 9px;
    overflow: hidden; border: 1px solid var(--ligne); background: var(--carte);
}
.fo-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fo-vignette__x {
    position: absolute; top: 2px; right: 2px;
    width: 19px; height: 19px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(15, 23, 42, .68); color: #fff; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.fo-vignette__x:hover { background: var(--rouge); }

.fo-envoi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

.fo-cite {
    display: flex; align-items: center; gap: 8px; margin: 0 0 -6px;
    padding: 7px 12px; border-radius: 10px; width: fit-content;
    background: var(--surface); border: 1px solid var(--ligne); font-size: 12.5px;
}
.fo-cite button { border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--ink-3); line-height: 1; }
.fo-cite button:hover { color: var(--rouge); }

.fo-repondre { margin-top: 34px; }
.fo-repondre--non {
    padding: 22px; border-radius: var(--radius); text-align: center;
    background: var(--surface); border: 1px dashed var(--ligne);
}
.fo-repondre--non p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.fo-repondre--non .fo-actions { justify-content: center; margin: 0; }

.fo-pieces { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; }
.fo-pieces legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fo-pieces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.fo-pieces li { display: flex; flex-direction: column; gap: 5px; align-items: center; font-size: 11.5px; }
.fo-pieces img { width: 92px; height: 68px; object-fit: cover; border-radius: 9px; border: 1px solid var(--ligne); }
.fo-pieces i { font-style: normal; color: var(--ink-3); }

.fo-vide { padding: 44px 20px; }

/* ── La fenêtre de signalement ───────────────────────────────────────── */
.fo-dial {
    width: min(460px, calc(100vw - 32px)); padding: 22px 24px;
    border: 1px solid var(--ligne); border-radius: var(--radius);
    background: var(--carte); color: var(--ink); box-shadow: var(--ombre-f);
}
.fo-dial::backdrop { background: rgba(15, 23, 42, .5); }
.fo-dial h2 { margin: 0 0 4px; font-size: 17px; }
.fo-dial .fo-label { margin-top: 14px; }
.fo-dial .fo-champ { font-size: 13.5px; padding: 9px 12px; }
.fo-dial textarea.fo-champ { min-height: 80px; }
.fo-dial__b { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ═════════════════════════ ÉCRANS ÉTROITS ═════════════════════════
   ⚠️ LA COLONNE DE L'AUTEUR REPASSE AU-DESSUS DU MESSAGE. À 178 px de large
   sur un téléphone, elle ne laisserait au texte que la moitié de l'écran :
   on lirait le forum par la tranche.                                      */
@media (max-width: 1040px) {
    .fo-grille { grid-template-columns: minmax(0, 1fr); }
    .fo-side { position: static; }
    .fo-formulaire { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* La pastille se cale sur le TITRE, pas au milieu du bloc : centrée, elle
       flotte à hauteur de la description et l'on ne sait plus à quoi elle se
       rapporte. */
    .fo-cat { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
    .fo-cat__e { width: 46px; height: 46px; font-size: 21px; }
    .fo-cat__dernier { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--ligne); }

    .fo-sujet { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
    .fo-sujet__n { grid-column: 2; justify-content: flex-start; gap: 18px; }
    .fo-sujet__d { grid-column: 2; }
}

@media (max-width: 860px) {
    .fo-msg { grid-template-columns: minmax(0, 1fr); }
    .fo-auteur {
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
        text-align: left; padding: 11px 14px;
        border-right: 0; border-bottom: 1px solid var(--ligne);
        /* Empilée, la colonne devient le HAUT de la carte : les coins changent
           de côté avec elle. */
        border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    }
    .fo-auteur .mb-ava--m { --taille: 40px; }
    .fo-auteur__m { margin: 0 0 0 auto; text-align: right; }
    .fo-badges { margin: 0; }
    .fo-corps-msg { padding: 14px 16px 10px; }
    .fo-msg__actes { margin-left: 0; width: 100%; }
}