/* === Retour en un clic sur une ressource (js/result-feedback.js) ===
   Barre compacte « Utile / Pas utile / Signaler » ajoutée à toute carte
   portant [data-resource-url] et à la modale de fiche.
   - Aucune dépendance à une police d'icônes : pictogrammes SVG en ligne.
   - Le menu « Signaler » est un panneau déroulant DANS le flux (jamais en
     position absolue) : les cartes ont overflow:hidden, une bulle flottante
     serait rognée.
   - Sélecteurs volontairement plus spécifiques que css/accessibility.css
     (button[aria-pressed], button[aria-expanded]::after) pour garder la main
     sur l'état « pressé » et sur la flèche du bouton Signaler. */

.rf-bar {
    --rf-fg: var(--on-surface, #040404);
    --rf-muted: #4a4f57;
    --rf-border: #8a919a;
    --rf-bg: var(--surface, #ffffff);
    --rf-bg-hover: var(--surface-container-high, #f0f1f2);
    --rf-focus: var(--primary-color, #193461);
    --rf-up: #1b5e20;
    --rf-down: #37474f;
    --rf-warn-bg: #fff3e0;
    --rf-warn-border: #e65100;
    --rf-warn-fg: #7a2e00;

    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--outline-variant, #e0e4e8);
    color: var(--rf-fg);
    font-family: var(--font-family, inherit);
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: default;
}

.rf-bar[hidden],
.rf-bar[data-rf-state="unavailable"] {
    display: none !important;
}

.rf-bar *,
.rf-bar *::before,
.rf-bar *::after {
    box-sizing: border-box;
}

.rf-bar .rf-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* --- Boutons ------------------------------------------------------------ */
.rf-bar button.rf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--rf-border);
    border-radius: 18px;
    background: var(--rf-bg);
    color: var(--rf-fg);
    font: 500 13px/1.2 var(--font-family, inherit);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.rf-bar button.rf-btn:hover {
    background: var(--rf-bg-hover);
    border-color: var(--rf-fg);
}

.rf-bar button.rf-btn:focus {
    outline: none;
    box-shadow: none;
}

.rf-bar button.rf-btn:focus-visible {
    outline: 3px solid var(--rf-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--rf-bg);
}

/* La flèche générique de accessibility.css sur [aria-expanded] est remplacée
   par notre propre chevron SVG. */
.rf-bar button.rf-btn[aria-expanded]::after,
.rf-bar button.rf-btn[aria-expanded="true"]::after,
.rf-bar button.rf-btn[aria-expanded="false"]::after {
    content: none;
    display: none;
}

.rf-bar .rf-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.rf-bar .rf-caret {
    width: 14px;
    height: 14px;
    transition: transform 120ms ease;
}

.rf-bar button[aria-expanded="true"] .rf-caret {
    transform: rotate(180deg);
}

.rf-bar .rf-count {
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.rf-bar .rf-count[hidden] {
    display: none;
}

/* --- État « pressé » : ne repose pas que sur la couleur (pictogramme plein
   + texte en gras) ------------------------------------------------------- */
.rf-bar button.rf-btn[aria-pressed="true"] {
    font-weight: 700;
}

.rf-bar button.rf-btn[aria-pressed="true"] .rf-icon {
    fill: currentColor;
}

.rf-bar button.rf-btn.rf-up[aria-pressed="true"] {
    background: var(--rf-up);
    border-color: var(--rf-up);
    color: #ffffff;
}

.rf-bar button.rf-btn.rf-down[aria-pressed="true"] {
    background: var(--rf-down);
    border-color: var(--rf-down);
    color: #ffffff;
}

.rf-bar button.rf-btn.rf-flag[aria-pressed="true"] {
    background: var(--rf-warn-fg);
    border-color: var(--rf-warn-fg);
    color: #ffffff;
}

.rf-bar button.rf-btn.rf-flag[aria-pressed="true"]::before {
    content: "\2713";
    font-weight: 700;
}

/* Bouton « Signaler » : teinté dès qu'un signalement de l'utilisateur existe. */
.rf-bar button.rf-btn.rf-report.rf-has-reports {
    background: var(--rf-warn-bg);
    border-color: var(--rf-warn-border);
    color: var(--rf-warn-fg);
}

.rf-bar .rf-badge {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: var(--rf-warn-fg);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.rf-bar .rf-badge[hidden] {
    display: none;
}

/* --- Chargement / occupé ------------------------------------------------ */
/* Atténué seulement pendant le premier chargement des états ; une écriture en
   cours (aria-busy) ne fait que changer le curseur, pour éviter un clignotement. */
.rf-bar[data-rf-state="loading"] button.rf-btn {
    opacity: 0.6;
    cursor: progress;
}

.rf-bar[aria-busy="true"] button.rf-btn {
    cursor: progress;
}

.rf-bar button.rf-btn.rf-send[aria-disabled="true"],
.rf-bar button.rf-btn.rf-send[aria-disabled="true"]:hover {
    cursor: not-allowed;
    background: var(--rf-bg);
    border-color: var(--rf-border);
}

/* --- Messages ------------------------------------------------------------ */
.rf-bar .rf-msg {
    margin: 0;
    padding: 0;
    color: var(--rf-fg);
    font-size: 12.5px;
    font-weight: 500;
}

.rf-bar .rf-msg[hidden] {
    display: none;
}

.rf-bar .rf-msg.rf-msg-error {
    color: #8b1a1a;
}

.rf-bar .rf-flagged {
    margin: 0;
    padding: 6px 8px;
    border-left: 3px solid var(--rf-warn-border);
    background: var(--rf-warn-bg);
    color: var(--rf-warn-fg);
    font-size: 12.5px;
}

.rf-bar .rf-flagged[hidden] {
    display: none;
}

/* --- Panneau « Signaler » ----------------------------------------------- */
.rf-bar .rf-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--rf-border);
    border-radius: 12px;
    background: var(--surface-container, #f8f9fa);
}

.rf-bar .rf-panel[hidden] {
    display: none !important;
}

.rf-bar .rf-panel-title {
    margin: 0;
    color: var(--rf-fg);
    font-size: 13px;
    font-weight: 700;
}

.rf-bar .rf-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rf-bar .rf-field-label {
    display: block;
    margin: 0;
    color: var(--rf-fg);
    font-size: 12.5px;
    font-weight: 600;
}

.rf-bar textarea.rf-text {
    display: block;
    width: 100%;
    min-height: 56px;
    max-height: 160px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--rf-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--rf-fg);
    font: 400 13px/1.4 var(--font-family, inherit);
    resize: vertical;
}

.rf-bar textarea.rf-text:focus {
    outline: 3px solid var(--rf-focus);
    outline-offset: 1px;
    border-color: var(--rf-focus);
}

.rf-bar .rf-hint {
    margin: 0;
    color: var(--rf-muted);
    font-size: 12px;
}

.rf-bar .rf-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* --- Variante compacte (lignes de collections, listes denses) ----------- */
.rf-bar.rf-compact {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0;
    font-size: 12px;
}

.rf-bar.rf-compact button.rf-btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
}

.rf-bar.rf-compact .rf-vote .rf-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Une ligne de collection est un flex en ligne : la barre passe dessous. */
.collection-article-item[data-resource-url] {
    flex-wrap: wrap;
}

.collection-article-item[data-resource-url] > .rf-bar {
    flex: 1 1 100%;
}

/* Dans la modale de fiche : emplacement dédié entre le corps et le pied. */
.rf-modal-slot {
    flex-shrink: 0;
    max-height: 50vh;
    padding: 0 24px 12px;
    overflow-y: auto;
    background: var(--surface, #ffffff);
}

.rf-modal-slot:empty {
    display: none;
}

.rf-modal-slot > .rf-bar {
    margin-top: 0;
    padding-top: 12px;
}

/* --- Texte réservé aux lecteurs d'écran (région live) ------------------- */
.rf-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Petits écrans (360 px) : cibles tactiles confortables, pas de zoom iOS */
@media (max-width: 640px) {
    .rf-bar textarea.rf-text {
        font-size: 16px;
    }

    .rf-modal-slot {
        padding: 0 16px 10px;
    }
}

@media (pointer: coarse) {
    .rf-bar button.rf-btn {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rf-bar button.rf-btn,
    .rf-bar .rf-caret {
        transition: none;
    }
}

/* --- Mode contraste forcé : on s'appuie sur les couleurs système -------- */
@media (forced-colors: active) {
    .rf-bar button.rf-btn {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .rf-bar button.rf-btn[aria-pressed="true"],
    .rf-bar button.rf-btn.rf-report.rf-has-reports {
        border-width: 3px;
        background: Highlight;
        color: HighlightText;
    }

    .rf-bar .rf-badge {
        background: ButtonText;
        color: ButtonFace;
    }
}