/* RETOURS-01 — la remontée des retours : la pastille « Un souci ? », le repère de la page
   « Un pépin », et la liste de la console. Couleurs, rayons et ombres par les jetons seulement. */

/* La pastille flottante, sur toutes les pages membre.
   En bas à droite, AU-DESSUS de la tab bar (fixed, bottom 16px, hauteur ~60px) pour ne jamais
   recouvrir un onglet ; sur bureau la tab bar disparaît, la pastille redescend. */
.feedback-badge {
    position: fixed;
    right: 14px;
    bottom: calc(92px + var(--safe-lift)); /* AJUST-09 : suit la tab bar au-dessus de la barre d'accueil */
    z-index: 29;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .95rem;
    border-radius: var(--brand-radius-pill);
    border: 1px solid var(--brand-line);
    background: color-mix(in srgb, var(--brand-surface) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--brand-shadow-card);
    color: var(--brand-secondary);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.feedback-badge:hover, .feedback-badge:focus-visible { border-color: var(--brand-accent); color: var(--brand-accent); }
.feedback-badge__emoji { font-size: 1rem; line-height: 1; }
@media (min-width: 992px) { .feedback-badge { bottom: 24px; right: 24px; } }
/* La variante DANS la barre d'app (`in_bar`, rendue par _partials/app_bar à la place des stats) : sur la page
   du fil, la zone de saisie collante occupe le bas de l'écran et la pastille flottante recouvrait « Envoyer »
   (RM-231, 24/09). Statique, plus petite, sans ombre — un élément de la barre parmi les autres, que le flex
   range sans jamais chevaucher la marque. La flottante est éteinte sur cette page en mobile (messages.css). */
.feedback-badge--bar { position: static; padding: .22rem .55rem; gap: .25rem; font-size: .66rem; box-shadow: none; backdrop-filter: none; }
.feedback-badge--bar .feedback-badge__emoji { font-size: .8rem; }

/* Le formulaire : le rappel discret de l'erreur déjà jointe. */
.feedback-error-note {
    padding: .6rem .8rem;
    border-radius: var(--brand-radius-card);
    border: 1px solid var(--brand-line);
    background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
    color: var(--brand-secondary);
}

/* La page « Un pépin » : le repère et le bouton de signalement. */
.error-reference { margin-top: 1.2rem; text-align: center; }
.error-reference__line { margin-bottom: .8rem; }
.error-reference__line code { padding: .15rem .45rem; border-radius: 6px; background: color-mix(in srgb, var(--brand-secondary) 8%, transparent); font-weight: 700; letter-spacing: .08em; }
.error-reference__hint { margin-top: .6rem; color: var(--brand-muted); }

/* La console : un retour = une carte qui se balaye. */
.feedback-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.feedback-card__category { font-size: .78rem; font-weight: 700; color: var(--brand-muted); }
.feedback-card__text { margin-bottom: .8rem; white-space: pre-line; }
.feedback-card__meta { list-style: none; padding: 0; margin: 0 0 .8rem; }
.feedback-card__meta li { margin-bottom: .15rem; }

.feedback-card__shots { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.feedback-card__shots img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--brand-radius-card); border: 1px solid var(--brand-line); }

.feedback-card__error { margin-bottom: .8rem; }
.feedback-card__error summary { cursor: pointer; font-weight: 700; }
.feedback-card__error ul { margin-top: .5rem; }
.feedback-card__trace { max-height: 260px; overflow: auto; padding: .6rem; border-radius: 8px; background: color-mix(in srgb, var(--brand-secondary) 6%, transparent); font-size: .72rem; }

.feedback-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.feedback-card__failure { color: var(--brand-danger, #e74c3c); }

.console-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.console-filters .form-label { margin-bottom: .2rem; }
.console-filters .form-select { width: auto; min-width: 160px; }

/* Les captures jointes, vues avant l'envoi (collage Ctrl+V, glisser-déposer ou sélecteur).
   Sans cet aperçu, une image collée ne se voit nulle part : on ne sait pas si ça a marché. */
.feedback-paste-hint { margin-top: .35rem; color: var(--brand-muted); }

.feedback-shots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.feedback-shot { position: relative; }
.feedback-shot img {
    width: 84px; height: 84px; object-fit: cover;
    border-radius: var(--brand-radius-card); border: 1px solid var(--brand-line);
}
.feedback-shot__remove {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; padding: 0; line-height: 1;
    border: 1px solid var(--brand-line); border-radius: 50%;
    background: var(--brand-surface); color: var(--brand-secondary);
    font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: var(--brand-shadow-card);
}
.feedback-shot__remove:hover { border-color: var(--brand-accent); color: var(--brand-accent); }