/* Compteur de mots et de caractères, Nemo Ciment. Se charge après outils.css, dont il reprend
   .outil, .champ, .source et .verdicts. */

.compteur .champ textarea#f-texte { min-height: 260px; }
.compteur-outils { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 10px 0 0; }
.compteur-outils[hidden] { display: none; }
.compteur-outils label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.compteur-outils .vider { font: 14px var(--font-body); color: var(--muted); background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.compteur-outils .vider:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }

/* Résultats : deux chiffres principaux, puis le détail. */
.chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 12px; }
.chiffres div, .details-compte div { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: rgba(255,255,255,.02); }
.chiffres b { display: block; font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.chiffres span, .details-compte span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.details-compte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 4px; }
.details-compte b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.details-compte small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted-2); }
.compteur-resultats { position: sticky; top: 96px; }

@media (min-width: 1024px) {
  .compteur-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
  .compteur-grille .chiffres, .compteur-grille .details-compte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .compteur-resultats { position: static; margin-top: 18px; }
}
@media (max-width: 560px) {
  .details-compte { grid-template-columns: 1fr 1fr; }
}

/* Mobile : 16 px minimum dans les champs (pas de zoom automatique sur iOS), cibles d'au moins 40 px */
.compteur-outils .vider { min-height: 40px; }
@media (max-width: 768px) {
  .outil-body .compteur-outils select { font-size: 16px; min-height: 44px; }
  .compteur-outils label { flex-wrap: wrap; }
}