/* ART CONSTRUCTION - Generateur / validateur de QR-facture suisse (hub /outils/generateur-qr-facture-suisse/). Prefixe .qrf-. Mobile d'abord : 375 px sans defilement lateral. */
.qrf { display: grid; gap: 18px; min-width: 0; max-width: 100%; }
.qrf *, .qrf *::before, .qrf *::after { box-sizing: border-box; }
.qrf-panneau { display: grid; gap: 18px; min-width: 0; }
.qrf-panneau[hidden] { display: none; }
.qrf-carte { min-width: 0; padding: 16px; border: 1px solid var(--ot-bord, #E2E8F0); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10); }
@media (min-width: 640px) { .qrf-carte { padding: 24px; } }
.qrf-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ot-txt, #1E293B); font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.qrf-etape { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1D4ED8; color: #fff; font-size: 15px; font-weight: 700; }
.qrf-sous { margin: 14px 0 6px; color: var(--ot-sec, #475569); font-size: 12.5px; font-weight: 600; }

/* messages */
.qrf-statut { margin: 0; padding: 12px 14px; border: 1px solid #BFDBFE; border-radius: 12px; background: #EFF6FF; color: #1E3A8A; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.qrf-statut[hidden] { display: none; }
.qrf-statut-info { border-color: #BFDBFE; }
.qrf-statut-ok { border-color: #BBF7D0; background: #F0FDF4; color: #166534; }
.qrf-statut-attention { border-color: #FDE68A; background: #FFFBEB; color: #92400E; }
.qrf-statut-erreur { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.qrf-liste { margin: 12px 0 0; padding: 12px 14px; border: 1px solid; border-radius: 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.qrf-liste[hidden] { display: none; }
.qrf-liste ul { margin: 6px 0 0; padding-left: 20px; }
.qrf-liste li + li { margin-top: 4px; }
.qrf-liste-titre { margin: 0; font-weight: 700; }
.qrf-liste-err { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }
.qrf-liste-av { border-color: #FDE68A; background: #FFFBEB; color: #92400E; }

/* onglets */
.qrf-onglets { display: flex; gap: 8px; min-width: 0; }
.qrf-onglet { flex: 1 1 0; min-height: 48px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 12px; background: #fff; color: var(--ot-txt, #1E293B); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.qrf-onglet[aria-selected="true"] { border-color: #1D4ED8; background: #1D4ED8; color: #fff; }
.qrf-onglet:focus-visible, .qrf button:focus-visible, .qrf summary:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.qrf-barre { display: grid; gap: 10px; min-width: 0; }
@media (min-width: 640px) { .qrf-barre { grid-template-columns: minmax(0, 1fr) auto; } }

/* formulaire */
.qrf-form { display: grid; gap: 18px; min-width: 0; }
.qrf-grille { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 560px) { .qrf-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .qrf-form .qrf-carte:nth-child(2) .qrf-grille, .qrf-form .qrf-carte:nth-child(3) .qrf-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qrf-large { grid-column: 1 / -1; }
.qrf-champ { display: grid; align-content: start; gap: 4px; min-width: 0; }
.qrf-champ > label { color: var(--ot-sec, #475569); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.qrf input[type="text"], .qrf select, .qrf textarea {
  display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; color: var(--ot-txt, #1E293B); font: inherit; font-size: 16px; line-height: 1.4; }
.qrf textarea { resize: vertical; min-height: 66px; overflow-wrap: anywhere; }
.qrf input:focus, .qrf select:focus, .qrf textarea:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.qrf [aria-invalid="true"] { border-color: #DC2626; background: #FFF7F7; }
.qrf-aide { margin: 4px 0 0; color: var(--ot-mut, #64748B); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.qrf-err { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.qrf-err[hidden] { display: none; }
.qrf-err-erreur { color: #B91C1C; }
.qrf-err-avert { color: #92400E; }
.qrf-type-compte { color: #1E3A8A; font-weight: 600; }
.qrf-radios { display: grid; gap: 8px; }
.qrf-radio, .qrf-case { display: flex; align-items: flex-start; gap: 10px; color: var(--ot-txt, #1E293B); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.qrf-radio { min-height: 44px; align-items: center; padding: 6px 10px; border: 1px solid var(--ot-bord, #E2E8F0); border-radius: 10px; }
.qrf-radio input, .qrf-case input { flex: none; width: 22px; height: 22px; margin: 0; }
.qrf-case { margin-top: 12px; color: var(--ot-sec, #475569); font-size: 14px; }
.qrf-case input { margin-top: 1px; }
.qrf-ref { margin-top: 12px; }
.qrf-ref[hidden] { display: none; }
.qrf-calc { justify-self: start; }
.qrf-avance { margin-top: 10px; border: 1px solid var(--ot-bord, #E2E8F0); border-radius: 12px; background: #F8FAFC; }
.qrf-avance > summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }
.qrf-avance > .qrf-grille, .qrf-avance > textarea { margin: 0 14px 14px; width: calc(100% - 28px); }

/* sortie */
.qrf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.qrf-actions > .ot-btn { flex: 1 1 100%; }
@media (min-width: 640px) { .qrf-actions > .ot-btn { flex: 0 1 auto; } }
.qrf-vide { margin: 12px 0 0; color: var(--ot-mut, #64748B); font-style: italic; }
.qrf-vide[hidden] { display: none; }
.qrf-apercu { margin-top: 14px; max-width: 100%; overflow-x: auto; border: 1px solid var(--ot-bord, #E2E8F0); border-radius: 10px; background: #fff; }
.qrf-apercu[hidden] { display: none; }
.qrf-apercu svg { display: block; width: 100%; height: auto; }
.qrf-apercu-grand svg { width: 980px; max-width: none; }
.qrf-payload { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13px !important; line-height: 1.45 !important; white-space: pre; overflow: auto; }
.qrf-res { display: grid; gap: 12px; min-width: 0; }
.qrf-res[hidden] { display: none; }
.qrf-table-boite { max-width: 100%; overflow-x: auto; border: 1px solid var(--ot-bord, #E2E8F0); border-radius: 10px; }
.qrf-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qrf-tab th, .qrf-tab td { padding: 7px 9px; border-bottom: 1px solid var(--ot-bord, #E2E8F0); text-align: left; vertical-align: top; }
.qrf-tab th { background: #F1F5F9; font-weight: 700; }
.qrf-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.qrf-tr-err td { background: #FEF2F2; }
@media (max-width: 640px) { .qrf-tab th, .qrf-tab td { padding: 6px 6px; font-size: 12.5px; } }

/* tableaux du guide : tiennent dans 375 px sans defilement lateral */
@media (max-width: 640px) { .qrf-tabg { table-layout: fixed; width: 100%; } .ot-guide .qrf-tabg th, .ot-guide .qrf-tabg td { padding: 8px 7px; font-size: 13px; overflow-wrap: anywhere; hyphens: auto; } }