/* Convertisseur et inspecteur Unicode : styles propres à l'outil. */
.o-unicode [hidden] { display: none !important; }
.o-unicode-bloc + .o-unicode-bloc { margin-top: 26px; padding-top: 8px; border-top: 1px solid var(--bord); }
.o-unicode-bloc h2 { margin: 12px 0 8px; font-size: 1.25rem; }
.o-unicode h3 { margin: 0 0 8px; font-size: 1.02rem; }
.o-unicode .o-unicode-soustitre { margin-top: 22px; }
.o-unicode .o-unicode-aide { margin: 0 0 12px; font-size: .92rem; line-height: 1.5; }
.o-unicode-libelle { display: block; margin: 0 0 5px; font-weight: 600; font-size: .95rem; }
.o-unicode textarea, .o-unicode input[type="text"], .o-unicode input[type="search"] { width: 100%; min-width: 0; font: 500 1.05rem/1.5 var(--mono); }
.o-unicode textarea { min-height: 96px; }
.o-unicode input[type="text"], .o-unicode input[type="search"] { min-height: 46px; }
.o-unicode textarea:focus-visible, .o-unicode input:focus-visible, .o-unicode select:focus-visible, .o-unicode button:focus-visible { outline: 3px solid var(--marque); outline-offset: 1px; }
.o-unicode-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.o-unicode .o-unicode-exemples { margin-top: 10px; padding-bottom: 6px; }
.o-unicode-note { display: block; margin: 6px 0 0; color: var(--texte-2); font-size: .92rem; line-height: 1.5; }
.o-unicode-note:empty { display: none; }

/* Chiffres clés */
.o-unicode-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.o-unicode-stats div { padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-unicode-stats dt { color: var(--texte-2); font-size: .84rem; line-height: 1.3; }
.o-unicode-stats dd { margin: 4px 0 0; font: 700 1.35rem/1.2 var(--mono); }

/* Signalements */
.o-unicode-alertes { padding: 14px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-unicode-ok { margin: 0; padding: 8px 12px; border-radius: var(--rayon-petit); background: var(--ok-fond); color: var(--ok-texte); font-size: .95rem; }
.o-unicode-alertes ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.o-unicode-alerte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: var(--rayon-petit); background: var(--erreur-fond); color: var(--erreur-texte); }
.o-unicode-alerte.espace, .o-unicode-alerte.prive { background: var(--surface-2); color: var(--texte); }
.o-unicode-alerte .o-unicode-code { grid-row: span 2; }
.o-unicode-alerte-titre { font-weight: 600; font-size: .94rem; overflow-wrap: anywhere; }
.o-unicode-alerte-pos { font-size: .86rem; opacity: .85; }
.o-unicode-alertes .o-unicode-actions { margin-top: 12px; }

/* Glyphes et boutons de code */
.o-unicode-glyphe { font-size: 1.25em; line-height: 1; }
.o-unicode-glyphe.abrege { display: inline-block; padding: 2px 4px; border: 1px dashed currentColor; border-radius: 4px; font: 700 .7rem/1.2 var(--mono); letter-spacing: .02em; vertical-align: middle; }
.o-unicode-code { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 9px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font: 600 .92rem/1.2 var(--mono); cursor: pointer; white-space: nowrap; }
.o-unicode-code:hover { border-color: var(--marque); }
.o-unicode-code[aria-pressed="true"] { border-color: var(--marque); background: var(--marque); color: var(--sur-marque); }

/* Tableau */
.o-unicode-table { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-unicode-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.o-unicode-table th { position: sticky; top: 0; padding: 7px 10px; border-bottom: 2px solid var(--bord); background: var(--surface-2); color: var(--texte-2); font-size: .82rem; text-align: left; white-space: nowrap; }
.o-unicode-table td { padding: 5px 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.o-unicode-table tbody:nth-of-type(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.o-unicode-table .col-n { color: var(--texte-2); font-variant-numeric: tabular-nums; text-align: right; width: 1%; }
.o-unicode-table td.col-car { font-size: 1.5rem; text-align: center; width: 1%; white-space: nowrap; }
.o-unicode-table .col-nom { font: 500 .82rem/1.35 var(--mono); overflow-wrap: anywhere; min-width: 160px; }
.o-unicode-table .col-nom.vide { color: var(--texte-2); font-family: var(--police); }
.o-unicode-table .col-cat { color: var(--texte-2); font-size: .84rem; }
.o-unicode-table .col-utf8, .o-unicode-table .col-utf16 { font: 600 .86rem/1.3 var(--mono); white-space: nowrap; }
.o-unicode-table tr.signale td:not(.col-n):not(.col-car) { background: var(--erreur-fond); color: var(--erreur-texte); }
.o-unicode-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 10px; font-size: .92rem; }

/* Fiche */
.o-unicode-fiche { margin-top: 18px; padding: 14px; border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-unicode-fiche .o-unicode-note { margin: 0 0 10px; }
.o-unicode-fiche-corps { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.o-unicode-fiche-glyphe { display: grid; place-items: center; min-height: 120px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); font-size: 3.4rem; line-height: 1; overflow: hidden; }
.o-unicode-fiche-glyphe .o-unicode-glyphe.abrege { font-size: 1rem; }
.o-unicode-fiche dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; }
.o-unicode-fiche-ligne { min-width: 0; }
.o-unicode-fiche dt { color: var(--texte-2); font-size: .82rem; }
.o-unicode-fiche dd { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; min-width: 0; }
.o-unicode-fiche dd code { flex: 1; min-width: 0; font: 600 .95rem/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; }
.o-unicode-fiche dd .btn { flex: none; min-height: 32px; padding: 2px 10px; font-size: .84rem; }
.o-unicode-fiche dd .btn.copie, .o-unicode-actions .btn.copie, .o-unicode-champ .btn.copie, .o-unicode-choisis .btn.copie { background: var(--ok-fond); border-color: var(--ok-texte); color: var(--ok-texte); }

/* Conversion */
.o-unicode-conv { display: grid; gap: 14px; }
.o-unicode-champ { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; align-items: start; }
.o-unicode-champ label { font-weight: 600; font-size: .95rem; align-self: center; }
.o-unicode-champ select { justify-self: end; width: auto; min-height: 38px; font-size: .9rem; }
.o-unicode-champ textarea { grid-column: 1; min-height: 64px; overflow-wrap: anywhere; }
.o-unicode-champ .btn { min-height: 46px; }
.o-unicode [aria-invalid="true"] { border-color: var(--erreur-texte); background: var(--erreur-fond); }
.o-unicode-erreur { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: var(--rayon-petit); background: var(--erreur-fond); color: var(--erreur-texte); font-size: .93rem; }
.o-unicode-erreur:empty { display: none; }
.o-unicode .o-unicode-options { margin-top: 8px; }

/* Normalisation */
.o-unicode-normes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.o-unicode-norme { min-width: 0; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-unicode-norme-tete strong { font: 700 1.05rem var(--mono); color: var(--marque); }
.o-unicode-norme-tete span { color: var(--texte-2); font-size: .86rem; }
.o-unicode-norme-texte { display: block; min-height: 40px; max-height: 120px; margin: 8px 0; padding: 8px 10px; overflow: auto; border-radius: var(--rayon-petit); background: var(--surface-2); font: 500 1.05rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.o-unicode-norme-infos { margin: 0; font-size: .88rem; color: var(--texte-2); }
.o-unicode-norme-codes { display: block; font: 600 .84rem/1.4 var(--mono); color: var(--texte); overflow-wrap: anywhere; }
.o-unicode-norme-comp { margin: 6px 0 0; padding: 4px 8px; border-radius: 6px; background: var(--ok-fond); color: var(--ok-texte); font-size: .88rem; }
.o-unicode-norme-comp.diff { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.o-unicode-comparaison p { margin: 6px 0 0; }
.o-unicode-comparaison .oui strong { color: var(--ok-texte); }
.o-unicode-comparaison .non strong { color: var(--erreur-texte); }

/* Recherche et palette */
.o-unicode-resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.o-unicode-car { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; padding: 4px 8px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font: inherit; cursor: pointer; }
.o-unicode-car:hover { border-color: var(--marque); background: var(--surface-2); }
.o-unicode-car.copie { border-color: var(--ok-texte); background: var(--ok-fond); color: var(--ok-texte); }
.o-unicode-car .o-unicode-glyphe { font-size: 1.45rem; }
.o-unicode-resultats .o-unicode-car { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; gap: 0 8px; text-align: left; }
.o-unicode-resultats .o-unicode-car .o-unicode-glyphe { grid-row: span 2; justify-self: center; }
.o-unicode-car-nom { font: 500 .78rem/1.3 var(--mono); overflow-wrap: anywhere; }
.o-unicode-car-cp { color: var(--texte-2); font: 600 .78rem var(--mono); }
.atelier .o-unicode-themes .btn[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.o-unicode-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.o-unicode-choisis { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.o-unicode-choisis .btn { min-height: 46px; }
.o-unicode-message { display: block; min-height: 1.5em; margin-top: 8px; color: var(--ok-texte); font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.o-unicode .o-unicode-prive { margin-top: 20px; text-align: center; }

@media (max-width: 760px) {
  .o-unicode-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-unicode-fiche dl, .o-unicode-normes { grid-template-columns: minmax(0, 1fr); }
  .o-unicode-fiche-corps { grid-template-columns: minmax(0, 1fr); }
  .o-unicode-fiche-glyphe { min-height: 90px; }
}
@media (max-width: 600px) {
  .o-unicode-table .col-n, .o-unicode-table .col-cat, .o-unicode-table .col-utf16 { display: none; }
  .o-unicode-table th, .o-unicode-table td { padding-inline: 6px; }
  .o-unicode-table .col-nom { min-width: 0; }
  .o-unicode-table .col-utf8 { white-space: normal; min-width: 64px; }
  .o-unicode-champ { grid-template-columns: minmax(0, 1fr); }
  .o-unicode-champ select { justify-self: stretch; width: 100%; }
  .o-unicode-champ .btn { justify-self: start; min-height: 40px; }
  .o-unicode-choisis { grid-template-columns: minmax(0, 1fr) auto; }
  .o-unicode-choisis input { grid-column: 1 / -1; }
  .o-unicode textarea, .o-unicode input[type="text"], .o-unicode input[type="search"] { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .o-unicode * { transition: none !important; scroll-behavior: auto !important; } }