/* Feuille de style des RETOURS D'UTILISATEURS (v0.6.169).

   DEUX CONTRAINTES, les mêmes que community.css et auth.css :

   1. MODE LOCAL INTACT. Chaque sélecteur — y compris à l'intérieur d'un `@media` —
      descend d'un `#fb-*` ou d'une classe `.fb-*` que seul feedback.js crée, et
      feedback.js ne crée RIEN quand `/auth/state` rend `mode: "off"`. Ce fichier est
      donc chargé sur l'app de bureau, où il reste sans effet : pas un pixel ne bouge.
   2. TOKENS SEULEMENT (règle de conception 3). Aucune couleur littérale : les cinq
      thèmes commutent à chaud, et une valeur en dur deviendrait illisible dans quatre
      d'entre eux.

   Z-INDEX : 4150, entre le menu utilisateur (4050) et la zone admin (4200). Ce volet
   s'ouvre DEPUIS le menu, il doit donc passer devant lui ; il n'a en revanche aucune
   raison de recouvrir l'administration des comptes. */

.fb-modal{
  position:fixed;inset:0;z-index:4150;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--overlay);
}
.fb-modal[hidden]{display:none}
.fb-box{
  width:100%;max-width:640px;max-height:84vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 48px var(--shadow);
}
.fb-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.fb-title{margin:0;font-size:16px;color:var(--txt)}
.fb-x{
  background:transparent;border:0;color:var(--mut);font-size:20px;line-height:1;
  cursor:pointer;padding:0 4px;
}
.fb-x:hover{color:var(--txt)}
.fb-body{padding:12px 14px 16px;overflow:auto}

/* Bandeau de message. `:empty` plutôt qu'un `hidden` piloté en JS — un message vide ne
   doit pas laisser un cadre vide. `.ok` distingue la réussite du refus : une confirmation
   en teinte d'erreur se lit comme un échec (leçon de `CLES_SUCCES`, auth.js). */
.fb-msg{
  margin:10px 14px 0;padding:8px 10px;font-size:12.5px;border-radius:6px;
  color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-line);
}
.fb-msg:empty{display:none}
.fb-msg.ok{color:var(--ok);background:var(--panel2);border-color:var(--line)}

.fb-lead{margin:0 0 10px;font-size:12.5px;color:var(--txt2);line-height:1.5}
.fb-sec{
  margin:18px 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);
}
.fb-empty{font-size:12.5px;color:var(--mut);padding:6px 0}

.fb-input,.fb-reply-in,.fb-edit-in{
  display:block;width:100%;box-sizing:border-box;
  padding:8px 10px;font:inherit;font-size:13px;
  background:var(--input);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;resize:vertical;
}
.fb-input:focus,.fb-reply-in:focus,.fb-edit-in:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--focus);
}
/* Rappel des trois marqueurs, sous la zone de saisie : le style n'est pas devinable, et
   un utilisateur qui ne sait pas qu'il existe ne l'utilisera jamais. */
.fb-help{margin-top:5px;font-size:11px;color:var(--mut)}
.fb-act{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.fb-btn{
  font:inherit;font-size:13px;padding:7px 14px;border-radius:6px;cursor:pointer;
  background:var(--input);color:var(--txt);border:1px solid var(--line);
}
.fb-btn:hover{border-color:var(--acc)}
.fb-btn:disabled{opacity:.55;cursor:default}
.fb-btn.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}
/* Action SECONDAIRE (« Corriger le texte ») : un bouton déguisé en lien, jamais un
   `<a href>` — il ne navigue nulle part, et un ancrage sans destination est un piège
   pour le clavier comme pour le lecteur d'écran. */
.fb-link{
  background:transparent;border:0;padding:2px 0;margin-top:2px;
  color:var(--txt2);font:inherit;font-size:11.5px;text-decoration:underline;cursor:pointer;
}
.fb-link:hover{color:var(--acc)}

.fb-item{
  margin-bottom:10px;padding:9px 11px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
}
.fb-item-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.fb-date{font-size:11px;color:var(--mut)}
/* « Texte corrigé par l'administrateur » : `--warn`, pas `--bad`. Ce n'est pas une
   erreur, c'est un état inhabituel que l'AUTEUR doit voir — corriger les mots de
   quelqu'un sans le lui dire serait le vrai défaut. */
.fb-tag{
  font-size:10.5px;padding:0 6px;border-radius:999px;
  color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);
}
/* LE texte de l'utilisateur. `pre-wrap` : ses retours à la ligne sont significatifs et
   les perdre collerait le message en un bloc — c'est aussi ce qui évite de fabriquer le
   moindre `<br>`, donc une balise de moins à introduire dans du texte d'inconnu.
   `overflow-wrap:anywhere` : une URL de 300 caractères ne doit pas élargir le modal. */
.fb-text{
  font-size:13px;color:var(--txt);line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.fb-reply{
  margin-top:8px;padding:7px 9px;
  background:var(--panel);border-left:3px solid var(--acc);border-radius:0 6px 6px 0;
}
.fb-reply-lbl{margin-top:9px;font-size:11px;color:var(--mut)}
/* Marque « nouveau » sur une réponse pas encore vue, et liseré d'accent sur le bloc.
   `--acc` et non `--warn` : une réponse n'est ni une erreur ni un avertissement, c'est
   ce qu'on attendait. La marque DISPARAÎT au rechargement suivant — le serveur aura
   noté la réponse comme vue — et c'est voulu : elle signale la nouveauté, pas un état. */
.fb-new{
  margin-left:7px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:600;
  color:var(--on-acc);background:var(--acc);
}
.fb-reply.neuve{border-left-width:4px;background:var(--panel2)}
.fb-await{margin-top:7px;font-size:11.5px;color:var(--mut);font-style:italic}
.fb-reply-in,.fb-edit-in{margin-top:7px}

.fb-group{margin-bottom:18px}
.fb-group-head{
  display:flex;align-items:baseline;gap:9px;margin-bottom:7px;
  padding-bottom:5px;border-bottom:1px solid var(--line);
}
.fb-user{font-weight:600;color:var(--txt);font-size:13.5px}
.fb-pending{
  font-size:11px;padding:0 7px;border-radius:999px;
  color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);
}

/* Mobile : couche AJOUTÉE en fin de fichier et uniquement sous requête média, comme les
   neuf feuilles historiques (v0.6.162). Au-dessus de 560 px, pas une règle ne s'applique. */
@media (max-width:560px){
  .fb-modal{padding:0;align-items:flex-end}
  .fb-box{max-width:none;max-height:92dvh;border-radius:12px 12px 0 0}
  /* 16 px : sous ce seuil, iOS zoome sur le champ focalisé et décadre la page. */
  .fb-input,.fb-reply-in,.fb-edit-in{font-size:16px}
}
@media (hover:none){
  .fb-btn{min-height:40px}
  .fb-x{min-width:40px;min-height:40px}
  .fb-link{min-height:32px}
}