/*!
 * Anagramme et trouveur de mots - sutomjeu.fr - v1.1.0
 * Tous les selecteurs sont limites a .sj-mots. Aucun reset global.
 * Les controles (boutons, champs) portent :not(#sj-z) : astuce de specificite (+1 id)
 * pour resister aux styles de formulaire du theme / d'Elementor (ex. .elementor-kit-5 input:not(...)).
 */
.sj-mots {
  --sj-ink: #1b2332;
  --sj-muted: #5b6577;
  --sj-faint: #8a93a3;
  --sj-line: #d6dce6;
  --sj-bg: #ffffff;
  --sj-soft: #f1f4f9;
  --sj-blue: #0a5fb4;
  --sj-blue-d: #084b8e;
  --sj-blue-l: #e7f0fa;
  --sj-red: #d7193a;
  --sj-red-l: #fff1f3;
  --sj-red-b: #f2b3bf;
  --sj-yellow: #ffd23f;
  --sj-focus: #ffab00;
  --sj-tile-blue: #0077c7;
  --sj-tile-red: #e7002a;
  --sj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Hauteur du premier affichage (onglet Anagrammes, vide). Reservee AVANT que app.js
     (charge en pied de page) monte l'outil : le texte de la page sous l'outil ne bouge pas (CLS).
     La carte garde cette hauteur minimale une fois montee, donc montage = meme hauteur exacte
     tant que le contenu tient dedans (verifie par tools/test-navigateur.js). */
  --sj-mots-h: 600px;
}
.sj-mots:not([data-sj-mounted]) {
  min-height: var(--sj-mots-h);
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  background: var(--sj-bg);
}
.sj-mots:not([data-sj-mounted])::before {
  content: "Chargement de l\2019outil\2026";
  display: block;
  padding: 22px;
  color: var(--sj-muted);
  font-size: 15px;
}
@media (max-width: 899px) { .sj-mots { --sj-mots-h: 622px; } }
@media (max-width: 767px) { .sj-mots { --sj-mots-h: 646px; } }
@media (max-width: 639px) { .sj-mots { --sj-mots-h: 716px; } }
@media (max-width: 560px) { .sj-mots { --sj-mots-h: 696px; } }
@media (max-width: 449px) { .sj-mots { --sj-mots-h: 718px; } }
@media (max-width: 419px) { .sj-mots { --sj-mots-h: 740px; } }
@media (max-width: 389px) { .sj-mots { --sj-mots-h: 815px; } }
@media (max-width: 339px) { .sj-mots { --sj-mots-h: 880px; } }
.sj-mots *,
.sj-mots *::before,
.sj-mots *::after {
  box-sizing: border-box;
}
.sj-mots [hidden] {
  display: none !important;
}
/* Neutralise les regles generiques du theme (span, p, b, a...) sur nos propres elements.
   Specificite (0,1,1) : bat « span {} » / « p {} », mais nos classes (0,2,0) restent prioritaires. */
.sj-mots span,
.sj-mots b,
.sj-mots strong {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  text-shadow: none;
  vertical-align: baseline;
}
.sj-mots .sj-app p,
.sj-mots .sj-app h2,
.sj-mots .sj-app h3,
.sj-mots .sj-app ul,
.sj-mots .sj-app li,
.sj-mots .sj-app label,
.sj-mots .sj-app legend {
  text-indent: 0;
  text-decoration: none;
  word-spacing: normal;
  float: none;
}

/* ---------- carte ---------- */
.sj-mots .sj-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--sj-mots-h);
  margin: 0;
  padding: 22px;
  background: var(--sj-bg);
  border: 1px solid var(--sj-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06);
  overflow: hidden;
}
.sj-mots .sj-head {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}
.sj-mots .sj-title {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 24px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
}
.sj-mots .sj-title::before,
.sj-mots .sj-title::after,
.sj-mots .sj-gh::before,
.sj-mots .sj-gh::after {
  content: none;
  display: none;
}
.sj-mots .sj-sub {
  margin: 0;
  padding: 0;
  color: var(--sj-muted);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}

/* ---------- onglets ---------- */
.sj-mots .sj-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  background: var(--sj-soft);
  border-radius: 12px;
}
.sj-mots .sj-tab:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--sj-muted);
  font-family: var(--sj-font);
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  cursor: pointer;
  float: none;
  outline: none;
  transition: background-color .15s, color .15s;
}
.sj-mots .sj-tab-main {
  display: block;
}
.sj-mots .sj-tab-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sj-faint);
}
.sj-mots .sj-tab:not(#sj-z)[aria-selected="true"] {
  background: var(--sj-bg);
  color: var(--sj-blue);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .14);
}
.sj-mots .sj-tab:not(#sj-z):focus-visible {
  outline: 3px solid var(--sj-focus);
  outline-offset: 1px;
}

/* ---------- formulaires ---------- */
.sj-mots .sj-panel {
  display: block;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
.sj-mots .sj-field {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.sj-mots .sj-label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}
.sj-mots .sj-inrow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.sj-mots .sj-inrow .sj-input:not(#sj-z) {
  flex: 1 1 auto;
}
.sj-mots .sj-inrow .sj-btn:not(#sj-z) {
  flex: 0 0 auto;
}
.sj-mots .sj-input:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  float: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid var(--sj-line);
  border-radius: 10px;
  background: var(--sj-bg);
  background-image: none;
  box-shadow: none;
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  text-indent: 0;
  text-shadow: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.sj-mots .sj-input-big:not(#sj-z) {
  min-height: 54px;
  font-size: 22px;
}
.sj-mots .sj-input:not(#sj-z)::placeholder {
  color: var(--sj-faint);
  opacity: 1;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.sj-mots .sj-input:not(#sj-z):focus {
  border-color: var(--sj-blue);
  box-shadow: 0 0 0 3px rgba(10, 95, 180, .2);
  outline: none;
}
.sj-mots .sj-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
}
.sj-mots .sj-count {
  display: inline-block;
  color: var(--sj-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.sj-mots .sj-count[data-warn="1"] {
  color: var(--sj-red);
}
.sj-mots .sj-hint {
  margin: 10px 0 0;
  padding: 0;
  color: var(--sj-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}
.sj-mots .sj-hint b {
  color: var(--sj-ink);
  font-weight: 800;
}
.sj-mots .sj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}
.sj-mots .sj-grid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sj-mots .sj-fs {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.sj-mots .sj-fs > .sj-label {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
.sj-mots .sj-lens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  margin: 0;
}
.sj-mots .sj-len {
  position: relative;
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}
.sj-mots .sj-radio:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.sj-mots .sj-len-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 2px solid var(--sj-line);
  border-radius: 10px;
  background: var(--sj-bg);
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sj-mots .sj-radio:not(#sj-z):checked + .sj-len-box {
  background: var(--sj-blue);
  border-color: var(--sj-blue);
  color: #fff;
}
.sj-mots .sj-radio:not(#sj-z):focus-visible + .sj-len-box {
  outline: 3px solid var(--sj-focus);
  outline-offset: 2px;
}

/* ---------- cases du motif ---------- */
.sj-mots .sj-tiles {
  --sj-n: 5;
  display: grid;
  grid-template-columns: repeat(var(--sj-n), minmax(0, 40px));
  gap: 4px;
  margin: 12px 0 0;
}
.sj-mots .sj-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 4px;
  background: var(--sj-tile-blue);
  color: #fff;
  font-family: var(--sj-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.sj-mots .sj-tile-ok {
  background: var(--sj-tile-red);
}

/* ---------- boutons ---------- */
.sj-mots .sj-btn:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--sj-soft);
  background-image: none;
  box-shadow: none;
  color: var(--sj-blue);
  font-family: var(--sj-font);
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sj-mots .sj-btn:not(#sj-z):focus-visible,
.sj-mots .sj-seg:not(#sj-z):focus-visible,
.sj-mots .sj-link:not(#sj-z):focus-visible {
  outline: 3px solid var(--sj-focus);
  outline-offset: 2px;
}
.sj-mots .sj-btn-primary:not(#sj-z) {
  background: var(--sj-blue);
  color: #fff;
  padding-left: 18px;
  padding-right: 18px;
}
.sj-mots .sj-btn-soft:not(#sj-z) {
  background: var(--sj-soft);
  border-color: var(--sj-soft);
  color: var(--sj-blue);
}
.sj-mots .sj-btn-ex:not(#sj-z) {
  background: var(--sj-bg);
  border-color: var(--sj-line);
  color: var(--sj-ink);
  letter-spacing: .03em;
  white-space: normal;
}
.sj-mots .sj-btn-more:not(#sj-z) {
  margin-top: 10px;
  background: var(--sj-blue-l);
  border-color: var(--sj-blue-l);
  color: var(--sj-blue);
}
@media (hover: hover) {
  .sj-mots .sj-btn-primary:not(#sj-z):hover { background: var(--sj-blue-d); }
  .sj-mots .sj-btn-soft:not(#sj-z):hover,
  .sj-mots .sj-btn-more:not(#sj-z):hover { border-color: var(--sj-blue); }
  .sj-mots .sj-btn-ex:not(#sj-z):hover { border-color: var(--sj-blue); color: var(--sj-blue); }
  .sj-mots .sj-tab:not(#sj-z):hover { color: var(--sj-blue); }
  .sj-mots .sj-len:hover .sj-len-box { border-color: var(--sj-blue); }
}

/* ---------- barre de resultats ---------- */
.sj-mots .sj-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 20px 0 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--sj-line);
}
.sj-mots .sj-status {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--sj-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.sj-mots .sj-status:empty {
  display: none;
}
.sj-mots .sj-status[data-busy]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 8px -2px 0;
  border: 2px solid var(--sj-line);
  border-top-color: var(--sj-blue);
  border-radius: 50%;
  animation: sj-mots-spin .8s linear infinite;
}
@keyframes sj-mots-spin {
  to { transform: rotate(360deg); }
}
.sj-mots .sj-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.sj-mots .sj-sort {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
}
.sj-mots .sj-share:not(#sj-z) {
  padding-left: 14px;
  padding-right: 14px;
  font-size: 14px;
}
.sj-mots .sj-sr,
.sj-mots .sj-sr:not(#sj-z) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.sj-mots .sj-sort-l {
  margin: 0 8px 0 0;
  color: var(--sj-muted);
  font-size: 14px;
  font-weight: 600;
}
.sj-mots .sj-seg:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--sj-line);
  border-radius: 0;
  background: var(--sj-bg);
  background-image: none;
  box-shadow: none;
  color: var(--sj-muted);
  font-family: var(--sj-font);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.sj-mots .sj-seg:not(#sj-z):first-of-type {
  border-radius: 10px 0 0 10px;
}
.sj-mots .sj-seg:not(#sj-z):last-of-type {
  margin-left: -1px;
  border-radius: 0 10px 10px 0;
}
.sj-mots .sj-seg:not(#sj-z)[aria-pressed="true"] {
  position: relative;
  background: var(--sj-blue-l);
  border-color: var(--sj-blue);
  color: var(--sj-blue);
}

/* ---------- resultats ---------- */
.sj-mots .sj-results {
  display: block;
  flex: 1 0 auto;
  margin: 0;
  padding: 0;
}
.sj-mots .sj-legend {
  margin: 0 0 12px;
  padding: 0;
  color: var(--sj-muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.sj-mots .sj-leg-rare {
  color: var(--sj-faint);
  font-weight: 700;
}
.sj-mots .sj-group {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.sj-mots .sj-group:last-child {
  margin-bottom: 0;
}
.sj-mots .sj-gh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 16px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-shadow: none;
  outline: none;
}
.sj-mots .sj-group-exact .sj-gh {
  color: var(--sj-red);
}
.sj-mots .sj-badge {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sj-soft);
  color: var(--sj-muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.sj-mots .sj-none {
  margin: 0 0 4px;
  padding: 0;
  color: var(--sj-muted);
  font-size: 14px;
  line-height: 1.45;
}
.sj-mots .sj-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sj-mots .sj-w {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--sj-line);
  border-radius: 8px;
  background: var(--sj-bg);
  color: var(--sj-ink);
  font-family: var(--sj-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .05em;
  list-style: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sj-mots .sj-w::before,
.sj-mots .sj-w::after {
  content: none;
  display: none;
}
.sj-mots .sj-wm {
  font-weight: 800;
}
.sj-mots .sj-wv {
  font-weight: 500;
  color: var(--sj-muted);
}
.sj-mots .sj-sep {
  color: var(--sj-faint);
  font-weight: 400;
  letter-spacing: 0;
}
.sj-mots .sj-group-exact .sj-w {
  background: var(--sj-red-l);
  border-color: var(--sj-red-b);
}
.sj-mots .sj-rare {
  background: #fafbfd;
  color: var(--sj-faint);
}
.sj-mots .sj-rare .sj-wv {
  color: var(--sj-faint);
}
.sj-mots .sj-j {
  display: inline;
  padding: 0 1px;
  border-radius: 3px;
  background: var(--sj-yellow);
  color: var(--sj-ink);
  text-transform: uppercase;
}
.sj-mots .sj-empty {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--sj-soft);
}
.sj-mots .sj-empty-t {
  margin: 0 0 12px;
  padding: 0;
  color: var(--sj-ink);
  font-size: 15px;
  line-height: 1.5;
}
.sj-mots .sj-empty-t:last-child {
  margin-bottom: 0;
}
.sj-mots .sj-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.sj-mots .sj-ex-l {
  margin: 0 4px 0 0;
  color: var(--sj-muted);
  font-size: 14px;
  font-weight: 700;
}
.sj-mots .sj-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sj-red-l);
  color: var(--sj-red);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- credits ---------- */
.sj-mots .sj-foot {
  display: block;
  margin: 18px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--sj-line);
}
.sj-mots .sj-link:not(#sj-z) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  float: none;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--sj-muted);
  font-family: var(--sj-font);
  font-size: 13.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-shadow: none;
  cursor: pointer;
  outline: none;
}
.sj-mots .sj-credits {
  margin: 0 0 4px;
  padding: 0;
  color: var(--sj-muted);
  font-size: 13px;
  line-height: 1.5;
}
.sj-mots .sj-credits a {
  color: var(--sj-blue);
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: 0;
}

/* ---------- petits ecrans ---------- */
@media (max-width: 560px) {
  .sj-mots .sj-app { padding: 16px 14px; border-radius: 14px; }
  .sj-mots .sj-title { font-size: 21px; }
  .sj-mots .sj-sub { font-size: 14px; }
  .sj-mots .sj-tab-sub { display: none; }
  .sj-mots .sj-tab:not(#sj-z) { min-height: 52px; font-size: 14px; padding: 6px 4px; }
  .sj-mots .sj-grid3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sj-mots .sj-tile { font-size: 16px; }
  .sj-mots .sj-btn-more:not(#sj-z) { width: 100%; }
  .sj-mots .sj-actions { display: flex; width: 100%; flex-wrap: nowrap; }
  .sj-mots .sj-sort { flex: 1 1 auto; min-width: 0; }
  .sj-mots .sj-sort-l { display: none; }
  .sj-mots .sj-seg:not(#sj-z) { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .sj-mots .sj-share:not(#sj-z) { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-mots *,
  .sj-mots *::before,
  .sj-mots *::after {
    transition: none !important;
    animation-duration: 0s !important;
  }
}