/* Charte Fonetix : bleu #15B1AB.
   Contraste : le bleu sert de fond (texte foncé dessus) ; pour le texte sur fond clair on utilise une version plus sombre. */
.fx-dialogue, .fx-search {
  --fx-accent: #15B1AB; --fx-on-accent: #06302E; --fx-accent-text: #0B6E69;
  --fx-tint: rgba(21,177,171,.14); --fx-line: rgba(127,127,127,.35); --fx-bg: rgba(127,127,127,.10);
}
@media (prefers-color-scheme: dark) { .fx-dialogue, .fx-search { --fx-accent-text: #5FD8D2; } }

.fx-badges { margin: 0 0 .6em; }
.fx-badge, .fx-chip, .fx-code { display: inline-block; padding: .1em .65em; margin: 0 .25em .25em 0; border: 1px solid var(--fx-line); border-radius: 1em; background: var(--fx-bg); font-size: .85em; line-height: 1.6; }
.fx-cecrl { font-weight: 700; background: var(--fx-accent); border-color: var(--fx-accent); color: var(--fx-on-accent); }
.fx-pros { border-color: var(--fx-accent); background: var(--fx-tint); }
.fx-chip { border-color: var(--fx-accent); background: var(--fx-tint); }
.fx-chip a, .fx-card a, .fx-legend summary, .fx-build summary, .fx-apibox summary { color: var(--fx-accent-text); }
.fx-chip a { text-decoration: none; }
.fx-chip a:hover, .fx-chip a:focus { text-decoration: underline; }

.fx-controls, .fx-filters fieldset { border: 1px solid var(--fx-line); border-top: 3px solid var(--fx-accent); border-radius: 6px; margin: 0 0 1em; padding: .5em .9em; }
.fx-controls legend, .fx-filters legend { color: var(--fx-accent-text); font-weight: 700; padding: 0 .4em; }
.fx-controls label, .fx-filters label { margin-right: 1em; white-space: nowrap; }
.fx-dialogue input[type=checkbox], .fx-filters input[type=checkbox] { accent-color: var(--fx-accent); }
.fx-filters button { background: var(--fx-accent); color: var(--fx-on-accent); border: 0; border-radius: 4px; padding: .45em 1em; font-weight: 700; cursor: pointer; }
.fx-filters button:hover { filter: brightness(.93); }
.fx-sgroup { margin: .3em 0; }
.fx-sgroup label { display: inline-block; }

.fx-lines { list-style: none; margin: 1em 0; padding: 0; }
.fx-line { display: flex; gap: .8em; padding: .6em 0; border-bottom: 1px solid var(--fx-line); }
.fx-who { flex: 0 0 2em; height: 2em; line-height: 2em; text-align: center; border-radius: 50%; background: var(--fx-accent); color: var(--fx-on-accent); font-weight: 700; }
.fx-txt { flex: 1; min-width: 0; }
.fx-txt p { margin: 0 0 .2em; }
.fx-ortho { font-size: 1.1em; }
.fx-api, .fx-syll { font-family: "Charis SIL", "Noto Sans", "Segoe UI", "DejaVu Sans", sans-serif; opacity: .85; }
.fx-hide-api .fx-api, .fx-hide-syll .fx-syll, .fx-hide-ortho .fx-ortho, .fx-hide-codes .fx-codes { display: none; }
.fx-code { font-size: .78em; }

/* Phrases découpées en groupes rythmiques */
.fx-groups { display: inline; }
.fx-g { background: var(--fx-tint); border-bottom: 2px solid var(--fx-accent); padding: 0 .25em; border-radius: 3px; }
.fx-sep { color: var(--fx-accent-text); font-weight: 700; }
.fx-build { margin: .4em 0; }
.fx-build summary, .fx-apibox summary { cursor: pointer; font-size: .9em; }
.fx-build ol { margin: .4em 0 .4em 1.4em; padding: 0; }
.fx-build li { margin: .15em 0; }
.fx-build li:last-child { font-weight: 600; }

.fx-legend ul { list-style: none; padding: 0; }
.fx-legend li { margin: .3em 0; }
.fx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; }
.fx-cards.fx-wide { grid-template-columns: 1fr; }
.fx-card { border: 1px solid var(--fx-line); border-top: 4px solid var(--fx-accent); border-radius: 8px; padding: .8em 1em; }
.fx-card:hover { border-color: var(--fx-accent); }
.fx-card[hidden] { display: none; }
.fx-card h3 { margin: 0 0 .4em; font-size: 1.05em; }
.fx-extrait { font-style: italic; margin: .4em 0; }
.fx-meta { opacity: .8; font-size: .85em; margin: .3em 0 0; }
.fx-count { font-weight: 600; color: var(--fx-accent-text); }
.fx-filters input:focus-visible, .fx-filters select:focus-visible, .fx-filters button:focus-visible, .fx-controls input:focus-visible,
.fx-build summary:focus-visible, .fx-card a:focus-visible { outline: 3px solid var(--fx-accent-text); outline-offset: 2px; }
@media print {
  .fx-controls, .fx-filters { display: none; }
  .fx-hide-api .fx-api, .fx-hide-syll .fx-syll { display: block; }
  .fx-line { break-inside: avoid; }
  .fx-cecrl, .fx-who { background: none; color: inherit; border: 1px solid currentColor; }
}