/* Décodeur JWT */
.o-jwt { --jwt-e: #c92a5a; --jwt-p: #7a3fd6; --jwt-g: #0b7bb8; --jwt-cle: #0b6e7f; --jwt-chaine: #2b7a2b; --jwt-nombre: #b35c00; --jwt-attention-fond: #fff4d6; --jwt-attention-texte: #6b4a00; }
:root[data-theme="dark"] .o-jwt { --jwt-e: #ff7aa2; --jwt-p: #c3a2ff; --jwt-g: #6cc6ff; --jwt-cle: #6fd6e6; --jwt-chaine: #9be29b; --jwt-nombre: #ffb870; --jwt-attention-fond: #3d3110; --jwt-attention-texte: #ffe08a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-jwt { --jwt-e: #ff7aa2; --jwt-p: #c3a2ff; --jwt-g: #6cc6ff; --jwt-cle: #6fd6e6; --jwt-chaine: #9be29b; --jwt-nombre: #ffb870; --jwt-attention-fond: #3d3110; --jwt-attention-texte: #ffe08a; }
}
.o-jwt-avert { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--rayon-petit); border: 2px solid var(--erreur-texte); background: var(--erreur-fond); color: var(--erreur-texte); }
.o-jwt-avert strong { display: block; font-size: 1.02rem; }
.o-jwt-avert p { margin: 4px 0 0; font-size: .93rem; }
.o-jwt-champ { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-2); font-weight: 600; }
.o-jwt-jeton { width: 100%; min-height: 96px; font-family: var(--mono); font-size: .92rem; line-height: 1.45; word-break: break-all; }
.o-jwt-aide { margin: 4px 0 0; color: var(--texte-2); font-size: .86rem; }
.o-jwt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.o-jwt-actions .btn { min-height: 40px; }
.o-jwt-etat, .o-jwt-verdict, .o-jwt-validite { display: block; padding: 10px 14px; border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte-2); font-weight: 600; }
.o-jwt-verdict:empty { display: none; }
.o-jwt .ok { background: var(--ok-fond); color: var(--ok-texte); }
.o-jwt .erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.o-jwt .attention { background: var(--jwt-attention-fond); color: var(--jwt-attention-texte); }
.o-jwt-alerte { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--rayon-petit); background: var(--erreur-fond); color: var(--erreur-texte); font-weight: 700; border-left: 5px solid var(--erreur-texte); }
.o-jwt-alerte[hidden], .o-jwt-colore[hidden], .o-jwt-parties[hidden], .o-jwt [hidden] { display: none; }
.o-jwt-colore { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--rayon-petit); border: 1px solid var(--bord); font: 500 .9rem/1.5 var(--mono); word-break: break-all; }
.o-jwt-colore .e { color: var(--jwt-e); }
.o-jwt-colore .p { color: var(--jwt-p); }
.o-jwt-colore .g { color: var(--jwt-g); }
.o-jwt-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.o-jwt-large { grid-column: 1 / -1; }
.o-jwt-panneau { padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); border-top: 4px solid var(--bord); min-width: 0; }
.o-jwt-p-entete { border-top-color: var(--jwt-e); }
.o-jwt-p-charge { border-top-color: var(--jwt-p); }
.o-jwt-p-signature { border-top-color: var(--jwt-g); }
.o-jwt-titre { margin: 0 0 8px; font-size: 1.05rem; color: var(--texte); }
.o-jwt-json { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font: .9rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; color: var(--texte); }
.o-jwt-json .k { color: var(--jwt-cle); }
.o-jwt-json .k.std { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.o-jwt-json .s { color: var(--jwt-chaine); }
.o-jwt-json .n { color: var(--jwt-nombre); }
.o-jwt-json .b { color: var(--jwt-e); }
.o-jwt-json .c { color: var(--texte-2); font-style: italic; }
.o-jwt-sig { display: block; font: .88rem/1.5 var(--mono); color: var(--jwt-g); word-break: break-all; }
.o-jwt-validite { margin-bottom: 10px; }
.o-jwt-defile { overflow-x: auto; }
.o-jwt-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.o-jwt-table th, .o-jwt-table td { padding: 6px 10px; border: 1px solid var(--bord); text-align: left; vertical-align: top; }
.o-jwt-table thead th { background: var(--surface-2); color: var(--texte-2); }
.o-jwt-table tbody th { font-family: var(--mono); color: var(--jwt-cle); }
.o-jwt-table .mono { font-family: var(--mono); word-break: break-all; }
.o-jwt-date { color: var(--texte-2); font-size: .86rem; }
.o-jwt-bloc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-jwt-bloc input[type="text"], .o-jwt-bloc textarea { font-family: var(--mono); font-size: .92rem; }
.o-jwt-case { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .92rem; }
.o-jwt-case input { width: 20px; height: 20px; accent-color: var(--marque); }
.o-jwt-creer summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--marque); padding: 4px 0; }
.o-jwt-creer-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 4px; }
.o-jwt-creer textarea { min-height: 90px; }
.o-jwt textarea[readonly] { background: var(--surface-2); }
.o-jwt button:focus-visible, .o-jwt input:focus-visible, .o-jwt textarea:focus-visible, .o-jwt summary:focus-visible, .o-jwt .k.std:focus-visible { outline: 3px solid var(--marque); outline-offset: 1px; }

@media (max-width: 700px) {
  .o-jwt-parties, .o-jwt-creer-grille { grid-template-columns: 1fr; }
  .o-jwt-json { font-size: .82rem; }
}