/* =========================================================
   Signaler un bug — page /signaler-un-bug
   Portée du POC design-poc/signaler-un-bug.html. Scopé .bug-report.
   Les segments Type/Gravité stylent le markup Bootstrap (.form-check)
   généré par EnumType expanded, via :has().
   ========================================================= */

.bug-report { padding-top: .4rem; }

.bug-report .eyebrow {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold); font-weight: 600; margin: 0 0 .1rem;
}

/* ---- Carte ---- */
.bug-report .br-card {
    background: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}
.bug-report .br-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .7;
}

.bug-report .br-head {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--border);
}
.bug-report .br-ico {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--gold-soft); border: 1px solid var(--border-strong); color: var(--gold-strong);
}
.bug-report .br-ico .ui-ic { width: 22px; height: 22px; }
.bug-report .br-title { font-size: 1.3rem; font-weight: 600; margin: .05rem 0 .2rem; }
.bug-report .br-sub { font-size: .88rem; color: var(--text-muted); margin: 0; }

.bug-report .br-body { padding: 1.2rem 1.4rem; }
.bug-report .br-field { margin-bottom: 1.15rem; }
.bug-report .br-field:last-child { margin-bottom: 0; }
.bug-report .br-label {
    display: block; font-size: .84rem; font-weight: 600; color: var(--text); margin: 0 0 .5rem;
}
.bug-report .br-label .opt { color: var(--text-faint); font-weight: 500; font-size: .78rem; }
.bug-report .br-hint { font-size: .78rem; color: var(--text-faint); margin: .45rem 0 0; }

/* ---- Segments Type (form-check → pills) ---- */
.bug-report .br-seg { display: flex; flex-wrap: wrap; gap: .45rem; }
/* EnumType expanded enrobe les choix dans un conteneur : on le neutralise pour que
   les .form-check deviennent les items flex directs (sinon ils s'empilent). */
.bug-report .br-seg > div:not(.form-check),
.bug-report .br-sev > div:not(.form-check) { display: contents; }
.bug-report .br-seg .form-check { margin: 0; padding: 0; min-height: 0; flex: 1 1 auto; min-width: max-content; }
.bug-report .br-seg .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.bug-report .br-seg .form-check-label {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    cursor: pointer; text-align: center;
    font-size: .85rem; font-weight: 500; color: var(--text-muted);
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .55rem .8rem; transition: .12s;
}
.bug-report .br-seg .form-check:hover .form-check-label { color: var(--text); border-color: var(--border-strong); }
.bug-report .br-seg .form-check:has(.form-check-input:checked) .form-check-label {
    color: var(--gold-strong); background: var(--gold-soft); border-color: var(--gold); font-weight: 600;
}
.bug-report .br-seg .form-check-input:focus-visible ~ .form-check-label { box-shadow: 0 0 0 3px var(--gold-soft); }

/* ---- Gravité (pastille colorée via ::before selon la valeur) ---- */
.bug-report .br-sev { display: flex; flex-wrap: wrap; gap: .45rem; }
.bug-report .br-sev .form-check { margin: 0; padding: 0; min-height: 0; flex: 1 1 auto; min-width: max-content; }
.bug-report .br-sev .form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.bug-report .br-sev .form-check-label {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    cursor: pointer; font-size: .82rem; font-weight: 500; color: var(--text-muted);
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .5rem .7rem; transition: .12s;
}
.bug-report .br-sev .form-check-label::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto;
}
.bug-report .br-sev .form-check-input[value="blocking"] ~ .form-check-label::before { background: var(--danger); }
.bug-report .br-sev .form-check-input[value="annoying"] ~ .form-check-label::before { background: var(--warning); }
.bug-report .br-sev .form-check-input[value="minor"]    ~ .form-check-label::before { background: var(--success); }
.bug-report .br-sev .form-check:has(.form-check-input:checked) .form-check-label {
    color: var(--text); border-color: var(--border-strong); background: var(--surface-2); font-weight: 600;
}
.bug-report .br-sev .form-check-input:focus-visible ~ .form-check-label { box-shadow: 0 0 0 3px var(--gold-soft); }

/* ---- Champs texte ---- */
.bug-report .br-textarea,
.bug-report textarea {
    width: 100%; background: var(--surface-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .9rem;
    padding: .65rem .8rem; line-height: 1.5; resize: vertical; min-height: 100px;
}
.bug-report textarea::placeholder { color: var(--text-faint); }
.bug-report textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

.bug-report .br-input {
    width: 100%; background: var(--surface-3); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .9rem; padding: .6rem .8rem;
}
.bug-report .br-input::placeholder { color: var(--text-faint); }
.bug-report .br-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* Honeypot anti-spam : hors écran, hors tabulation */
.bug-report .br-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Zone de dépôt ---- */
.bug-report .br-drop {
    display: block; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-3); padding: 1.15rem 1rem; transition: .14s;
}
.bug-report .br-drop:hover,
.bug-report .br-drop.is-over { border-color: var(--gold); background: var(--gold-soft); }
.bug-report .br-drop-ico {
    width: 40px; height: 40px; margin: 0 auto .5rem; border-radius: 12px;
    display: grid; place-items: center; background: var(--surface-2);
    border: 1px solid var(--border-strong); color: var(--gold-strong);
}
.bug-report .br-drop-ico .ui-ic { width: 19px; height: 19px; }
.bug-report .br-drop-t { display: block; font-size: .88rem; color: var(--text); font-weight: 500; }
.bug-report .br-drop-t b { color: var(--gold-strong); font-weight: 600; }
.bug-report .br-drop-m { display: block; font-size: .75rem; color: var(--text-faint); margin-top: .28rem; }
.bug-report .br-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---- Aperçus des pièces jointes ---- */
.bug-report .br-previews {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: .6rem; margin-top: .7rem;
}
.bug-report .br-previews:empty { margin-top: 0; }
.bug-report .br-prev {
    position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border-strong); background: var(--surface-2);
}
.bug-report .br-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bug-report .br-prev.is-file { display: grid; place-items: center; gap: .3rem; padding: .4rem; text-align: center; }
.bug-report .br-prev-film {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--gold-strong); font-size: .7rem;
}
.bug-report .br-prev-name { font-size: .64rem; color: var(--text-muted); word-break: break-word; line-height: 1.2; }
.bug-report .br-prev-rm {
    position: absolute; top: .3rem; right: .3rem; width: 22px; height: 22px; border-radius: 6px;
    border: none; cursor: pointer; background: rgba(12, 15, 37, .82); color: #fff;
    display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0;
}
.bug-report .br-prev-rm:hover { background: var(--danger); }

/* ---- Contexte technique (repliable) ---- */
.bug-report .br-ctx {
    background: var(--surface-3); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
}
.bug-report .br-ctx > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
    padding: .65rem .85rem; font-size: .82rem; color: var(--text-muted);
}
.bug-report .br-ctx > summary::-webkit-details-marker { display: none; }
.bug-report .br-ctx > summary b { color: var(--text); font-weight: 600; }
.bug-report .br-ctx-ic {
    width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--gold-strong);
}
.bug-report .br-ctx-ic .ui-ic { width: 13px; height: 13px; }
.bug-report .br-ctx-chev { margin-left: auto; color: var(--text-faint); transition: transform .15s; }
.bug-report .br-ctx-chev .ui-ic { width: 14px; height: 14px; }
.bug-report .br-ctx[open] > summary .br-ctx-chev { transform: rotate(180deg); }
.bug-report .br-ctx-grid {
    display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem;
    padding: .1rem .9rem .8rem; font-size: .8rem; margin: 0;
}
.bug-report .br-ctx-grid dt { color: var(--text-faint); }
.bug-report .br-ctx-grid dd { margin: 0; color: var(--text-muted); word-break: break-word; }

/* ---- Pied ---- */
.bug-report .br-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .95rem 1.4rem; border-top: 1px solid var(--border); background: var(--surface-3);
}
.bug-report .br-note {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .77rem; color: var(--text-faint);
}
.bug-report .br-note .ui-ic { width: 13px; height: 13px; }
.bug-report .br-actions { display: flex; align-items: center; gap: .55rem; }

/* Erreurs de formulaire (liste Bootstrap) */
.bug-report .invalid-feedback,
.bug-report .form-error-message,
.bug-report ul.list-unstyled { color: var(--danger); font-size: .78rem; margin: .4rem 0 0; padding: 0; list-style: none; }

@media (max-width: 560px) {
    .bug-report .br-foot { flex-direction: column; align-items: stretch; }
    .bug-report .br-actions { justify-content: flex-end; }
}