/* Densité de mots-clés (/outils-seo/densite-mots-cles/, /en/seo-tools/keyword-density/), Nemo Ciment
   Après styles.css, landing.css et outils.css, dont il reprend .outil, .champ, .source et
   .verdicts. Tableaux : .lp-table de landing.css. */

.zones { border: 0; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.zones legend { font-size: 14px; color: var(--muted); margin: 0 0 6px; padding: 0; }
.zones label, .options label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #d0d0d4; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--font-body); margin: 0; }
/* Boutons radio : même charte que les cases à cocher communes de outils.css */
.zones input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; cursor: pointer; width: 20px; height: 20px; margin: 0; background: #0d0d0f; border: 1.5px solid rgba(255,255,255,.28); border-radius: 50%; display: inline-grid; place-content: center; transition: border-color .15s, box-shadow .15s; }
.zones input[type="radio"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); transform: scale(0); transition: transform .12s ease-out; }
.zones input[type="radio"]:hover { border-color: rgba(34,197,94,.6); }
.zones input[type="radio"]:checked { border-color: var(--pink); }
.zones input[type="radio"]:checked::after { transform: scale(1); }
.zones input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,.3); }
.zones[hidden] { display: none; }

.champ textarea.grand { min-height: 180px; }
.options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 22px; }

.resultats h2 { margin-top: 38px; }
.stats { font-size: 15px; color: var(--muted); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.resultats h3 { font-size: 19px; margin: 26px 0 10px; }
.resultats .lp-table td:nth-child(n+2), .resultats .lp-table th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* break-word : on ne coupe un mot que s'il ne tient pas seul sur sa ligne (anywhere coupait
   « consultant » en deux dès que la colonne rétrécissait). */
.resultats .lp-table td:first-child { overflow-wrap: break-word; min-width: 8.5em; }
.resultats .lp-table { min-width: 0; }
.resultats [hidden] { display: none; }

.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.onglets button { font: 14px var(--font-body); color: #d0d0d4; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.onglets button:hover { border-color: rgba(34,197,94,.5); }
.onglets button[aria-selected="true"] { background: rgba(34,197,94,.14); border-color: var(--pink); color: var(--ink); }
.r-note { font-size: 14px; color: var(--muted-2); margin: 8px 0 0; }

@media (max-width: 500px) {
  .resultats .lp-table th, .resultats .lp-table td { padding: 10px 8px; font-size: 13.5px; }
}

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