/* ==========================================================================
   Le moteur de mots — feuille propre (cahier § 5.4, contrat mots/cli/OUTILS.md)
   Préfixe `mots-`, tokens du portail uniquement (--bg, --surface, --ink,
   --ink-soft, --line, --radius, --c-mot, --c-anagrammes, --c-pendu) : le thème
   sombre est hérité sans rien redéclarer. Mobile d'abord : outil en haut pleine
   largeur, chips de 44 px, barre de filtres collante sous l'en-tête du site.
   Trois couleurs propres (message d'erreur, message ok, champ « présentes »), en
   tokens déclinés par thème avec les mêmes sélecteurs que portal.css : les
   valeurs absolues d'origine (#C0392B, #2FA86E, #D8A32B) tombaient sous 3:1
   sur l'un des deux fonds.
   ========================================================================== */
:root{--mots-erreur:#B03A2E;--mots-ok:#1E7F52;--mots-j:#B8860B;--mots-x:#5F6B7D;--mots-btn:#11869A}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--mots-erreur:#F1948A;--mots-ok:#6FD3A0;--mots-j:#D8A32B;--mots-x:#8A94A6}
}
:root[data-theme="dark"]{--mots-erreur:#F1948A;--mots-ok:#6FD3A0;--mots-j:#D8A32B;--mots-x:#8A94A6}

.mots-main{padding:22px 18px 30px}
.mots-main h1{font-size:1.65rem;font-weight:600;line-height:1.2;margin:6px 0 10px}
@media(min-width:720px){.mots-main h1{font-size:2.1rem}}
.mots-intro{max-width:70ch;margin-bottom:18px}
.mots-intro b{color:var(--ink);font-weight:600}
.mots-intro-hub .clm-intro{max-width:70ch;margin-bottom:18px}
.mots-page .kbd{
  display:inline-block;padding:1px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.85em;font-family:ui-monospace,monospace;
}
.mots-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- fil d'Ariane ---------- */
.mots-fil{font-size:.86rem;color:var(--ink-soft);margin-bottom:4px}
.mots-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.mots-fil li+li::before{content:"›";margin:0 7px;opacity:.6}
.mots-fil a{text-decoration:underline;text-underline-offset:3px}
.mots-fil [aria-current]{color:var(--ink);font-weight:500}

/* ---------- barre de sauts / filtres collante ---------- */
.mots-filtres{
  position:sticky;top:var(--header-h,61px);z-index:5;
  background:var(--bg);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  padding:8px 0;margin:6px 0 4px;border-bottom:1px solid var(--line);
}
.mots-sauts a{
  font-size:.86rem;font-weight:500;color:var(--ink-soft);
  min-height:40px;display:inline-flex;align-items:center;
  padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
}
.mots-sauts a:hover{color:var(--ink);border-color:var(--ink-soft)}
.mots-compte{font-weight:600}
/* la barre construite par mots.js à l'intérieur de l'outil se colle sous l'en-tête aussi ;
   sur une page liste, elle passe SOUS la barre de sauts (elle-même collante, 58 px) */
.mots-outil .mots-filtres{background:var(--surface);top:var(--header-h,61px)}
.mots-sauts ~ * .mots-outil .mots-filtres{top:calc(var(--header-h,61px) + 58px)}

/* ---------- blocs et tableaux ---------- */
.mots-bloc{padding:24px 0 4px}
.mots-bloc h2{font-size:1.25rem}
.mots-tableau{margin-top:8px;overflow-x:auto}
.mots-tableau .clm-table td:first-child{font-weight:600}
.mots-tableau .clm-table th:last-child,.mots-tableau .clm-table td:last-child,
.mots-tableau .clm-table th:nth-child(2),.mots-tableau .clm-table td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}
.mots-tableau .clm-table th:first-child,.mots-tableau .clm-table td:first-child{text-align:left}

/* grille de 26 cases (première lettre, deuxième lettre, longueurs, positions) */
.mots-repartition{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  margin-top:10px;
}
.mots-case-r{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:64px;padding:6px 4px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  line-height:1.2;text-align:center;
}
.mots-case-r b{font-family:'Fredoka','Outfit',sans-serif;font-size:1.15rem;font-weight:600}
.mots-case-r .mots-n{font-size:.86rem;font-variant-numeric:tabular-nums}
.mots-case-r .mots-c{font-size:.7rem;color:var(--ink-soft)}
a.mots-case-r{border-color:var(--c-mot);box-shadow:inset 0 -3px 0 var(--c-mot)}
a.mots-case-r b{color:var(--c-mot)}
@media(hover:hover){a.mots-case-r:hover{transform:translateY(-2px)}}
.mots-case-r.vide{opacity:.7}

/* grille 26 × N */
.mots-positions{margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.mots-positions table{border-collapse:collapse;font-size:.84rem;min-width:100%;font-variant-numeric:tabular-nums}
.mots-positions th,.mots-positions td{padding:5px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.mots-positions thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:500}
.mots-positions tbody th{text-align:left;font-family:'Fredoka','Outfit',sans-serif;font-weight:600;position:sticky;left:0;background:var(--surface)}
.mots-positions tr:last-child td,.mots-positions tr:last-child th{border-bottom:none}
.mots-positions td.z{color:var(--ink-soft);opacity:.75}
.mots-positions td.top{font-weight:600;color:var(--c-mot);background:color-mix(in srgb,var(--c-mot) 12%,transparent)}

/* ---------- listes de chips ---------- */
.mots-liste{padding-top:24px}
.mots-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mots-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:.95rem;line-height:1.2;
}
.mots-chip.b2{border-color:var(--c-mot);font-weight:600}
.mots-chip.b1{font-weight:500}
.mots-chip.b0{color:var(--ink-soft);border-style:dashed}
.mots-chip small{font-size:.78em;color:var(--ink-soft);font-weight:400}
a.mots-chip{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-mot)}
.mots-plafond,.mots-vide{color:var(--ink-soft);font-size:.9rem;margin-top:10px}
.mots-plafond a{text-decoration:underline;text-underline-offset:3px}
.mots-rares{
  margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;
}
.mots-rares summary{font-weight:600;cursor:pointer;font-family:'Fredoka','Outfit',sans-serif;font-size:1rem;min-height:28px}
.mots-rares .sub{margin:8px 0 0}
.mots-section{margin-top:22px;scroll-margin-top:calc(var(--header-h,61px) + 56px)}
.mots-section h3{font-size:1.05rem;font-weight:600;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mots-section h3 small{font-size:.8rem;color:var(--ink-soft);font-weight:500}
.mots-bloc,.mots-liste,.mots-bloc-outil{scroll-margin-top:calc(var(--header-h,61px) + 56px)}

/* ---------- pastilles, sœurs ---------- */
.mots-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mots-pills .pill{min-height:44px;display:inline-flex;align-items:center}
.mots-pills a.pill:hover{border-color:var(--ink-soft);color:var(--ink)}
.mots-pills span.pill{opacity:.7}
.mots-soeurs{padding-top:26px}
.mots-soeurs h2{font-size:1.15rem}

/* ---------- hub ---------- */
.mots-outils-grille .tile{min-height:132px}
.mots-longueurs{grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.mots-longueurs{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1180px){.mots-longueurs{grid-template-columns:repeat(7,1fr)}}
.mots-longueur{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 14px 12px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  min-height:88px;transition:transform .15s ease;
}
.mots-longueur b{font-family:'Fredoka','Outfit',sans-serif;font-size:1.15rem;font-weight:600;color:var(--c-mot)}
.mots-longueur span{font-size:.92rem}
.mots-longueur small{font-size:.78rem;color:var(--ink-soft)}
a.mots-longueur{box-shadow:inset 0 -3px 0 var(--c-mot)}
@media(hover:hover){a.mots-longueur:hover{transform:translateY(-3px)}}
.mots-longueur.inerte b{color:var(--ink-soft)}
.mots-autres-longueurs{margin-top:12px}
.mots-rares-pills .pill b{font-family:'Fredoka','Outfit',sans-serif;font-size:1.05rem;color:var(--c-mot)}
.mots-chiffres{display:flex;flex-wrap:wrap;gap:10px 26px;margin:6px 0 10px}
.mots-chiffres div{display:flex;flex-direction:column;line-height:1.15}
.mots-chiffres b{font-family:'Fredoka','Outfit',sans-serif;font-size:1.6rem;font-weight:600;color:var(--ink);box-shadow:inset 0 -3px 0 var(--c-mot)}
.mots-chiffres span{font-size:.86rem;color:var(--ink-soft)}
.mots-texte{padding-left:0;padding-right:0}
.mots-texte h2{margin-top:0}
.mots-texte details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:8px}
.mots-texte summary{font-weight:600;cursor:pointer;font-family:'Fredoka','Outfit',sans-serif;font-size:1rem;min-height:28px}
.mots-texte details p{margin:8px 0 0}
.mots-texte cite{font-style:italic}
.mots-texte a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.mots-export{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.mots-retour{margin-top:22px}

/* ---------- bloc jeux ---------- */
.mots-jeux{padding-top:30px}
.mots-jeux-grille .tile{min-height:160px}
.mots-jeu-accroche{font-size:.86rem;line-height:1.35;opacity:.92;margin:0}
.mots-jeux-tirage{margin-top:14px}

/* ---------- attribution ---------- */
.mots-source{
  margin-top:28px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:.82rem;max-width:80ch;line-height:1.5;
}
.mots-source a{text-decoration:underline;text-underline-offset:3px}

/* ---------- outil (conteneur serveur + éléments construits par mots.js) ---------- */
.mots-bloc-outil{padding:20px 0 4px}
.mots-bloc-outil h2{font-size:1.2rem}
.mots-outil{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:14px 0}
.mots-outil-repli{color:var(--ink-soft);margin:0}
.mots-outil-repli a{text-decoration:underline;text-underline-offset:3px}
.mots-pret .mots-outil-repli{display:none}
.mots-charge{opacity:.75}
.mots-saisie{display:flex;flex-direction:column;gap:10px}
.mots-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mots-ligne label{font-size:.9rem;color:var(--ink-soft);min-width:9em}
.mots-champ,.mots-select{
  flex:1;min-width:8em;min-height:44px;padding:8px 12px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);font:inherit;text-transform:lowercase;
}
.mots-champ:focus-visible,.mots-select:focus-visible{outline:3px solid var(--c-mot);outline-offset:1px}
.mots-champ.j{border-color:var(--mots-j)}
.mots-champ.x{border-color:var(--mots-x)}
.mots-champ.c{border-color:var(--c-mot)}
.mots-curseur{flex:1;min-width:8em;accent-color:var(--c-mot)}
.mots-longueur-val{font-weight:600;min-width:6em}
.mots-cases{display:flex;flex-wrap:wrap;gap:6px}
.mots-case{
  width:44px;height:48px;border:2px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);
  font:600 1.3rem 'Fredoka','Outfit',sans-serif;text-transform:uppercase;
  cursor:pointer;
}
.mots-case.pleine{background:var(--c-mot);border-color:var(--c-mot);color:#fff}
.mots-case.active{outline:3px solid var(--c-mot);outline-offset:2px}
.mots-clavier{display:flex;flex-direction:column;gap:6px;max-width:520px}
.mots-rangee{display:flex;gap:5px;justify-content:center}
.mots-touche{
  flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink);
  font:600 .95rem 'Fredoka','Outfit',sans-serif;text-transform:uppercase;cursor:pointer;
}
.mots-touche.large{flex:1.7}
.mots-touche:active,.mots-case:active{transform:translateY(1px)}
.mots-options,.mots-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px}
.mots-check,.mots-radio{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--ink-soft);min-height:44px;cursor:pointer}
.mots-check input,.mots-radio input{accent-color:var(--c-mot);width:18px;height:18px}
.mots-actions .btn-play{background:var(--mots-btn);color:#fff}
/* cibles tactiles ≥ 44 px pour les boutons et pastilles construits par mots.js */
.mots-outil .btn-sm,.mots-hub-propositions .pill,.mots-graphies .pill{min-height:44px;display:inline-flex;align-items:center}
.mots-groupe{margin-top:12px}
.mots-groupe-title,.mots-groupe-titre{font-size:1rem;margin:14px 0 6px;color:var(--ink-soft);font-weight:600}
.mots-resultats .mots-chips{margin-top:6px}
.mots-message{margin:10px 0;color:var(--ink-soft);font-size:.92rem}
.mots-message:empty{display:none}
.mots-message.erreur{color:var(--mots-erreur)}
.mots-message.ok{color:var(--mots-ok)}
.mots-valeur{font-size:.9rem;color:var(--ink-soft);margin:6px 0}
.mots-pauvre{color:var(--ink-soft);font-size:.9rem}
.mots-jouer{background:var(--c-anagrammes)}
.mots-graphies{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.mots-graphies .pill{cursor:pointer}

/* barre unique du hub */
.mots-outil-hub{padding:12px}
.mots-hub-ligne{display:flex;gap:8px}
.mots-hub-ligne input{
  flex:1;min-width:0;min-height:48px;padding:8px 14px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;
}
.mots-hub-ligne input:focus-visible{outline:3px solid var(--c-mot);outline-offset:1px}
.mots-hub-ligne .btn{background:var(--mots-btn);color:#fff}
.mots-hub-propositions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mots-hub-propositions a.pill{cursor:pointer}

/* ---------- 404 ---------- */
.mots-main-404 .mots-outils-grille{margin-top:16px}