/* Outils de tous les jours (quotidien.js) : phrases à trous, jauge, convertisseur, mot de passe, pseudos. */
.qt-large { grid-column: 1 / -1; }

/* Phrases à trous */
.qt-pile { gap: 12px; }
.qt-carte { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--soft); }
.qt-carte.qt-top { background: var(--tint); box-shadow: inset 0 0 0 1.5px rgba(238, 47, 59, .32); }
.qt-q { font: 600 18px/52px var(--head); color: var(--ink); }
.qt-q .inp { vertical-align: middle; margin: 0 2px; }
.inp.qt-n { width: 104px; height: 44px; padding: 0 10px; text-align: center; font-weight: 600; }
.inp.qt-n-l { width: 100%; height: 54px; font-size: 22px; text-align: left; padding: 0 14px; }
.inp.qt-s { width: auto; height: 44px; padding: 0 30px 0 12px; font-weight: 600; }
.qt-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.qt-rep { font: 700 34px/1.15 var(--head); letter-spacing: -.02em; color: var(--red-deep); overflow-wrap: anywhere; }
.qt-det { font-size: 15px; font-weight: 600; color: var(--text); }
.qt-for { font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.qt-for.qt-err { color: var(--red-deep); font-weight: 600; }

/* Règle de trois : le tableau en croix */
.qt-croix { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 12px; align-items: center; max-width: 380px; margin: 4px auto; text-align: center; }
.qt-croix span { padding: 12px 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 20px/1.2 var(--head); color: var(--ink); overflow-wrap: anywhere; }
.qt-croix span.qt-x { background: var(--tint); color: var(--red-deep); box-shadow: 0 0 0 1.5px rgba(238, 47, 59, .45); }
.qt-croix i { font-style: normal; font-size: 18px; color: var(--muted); }

/* Petits tableaux de repères */
.qt-table { display: grid; gap: 10px; }
.qt-table-t { font: 600 15px/1.3 var(--head); color: var(--ink); }
.qt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qt-grille span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.qt-grille small { font-size: 13px; color: var(--muted); }
.qt-grille b { font: 600 16px/1.3 var(--head); color: var(--ink); overflow-wrap: anywhere; }

/* IMC : la jauge */
.qt-jauge { display: grid; gap: 14px; }
.qt-barre { position: relative; display: flex; gap: 3px; height: 14px; margin: 8px 6px 0; }
.qt-barre span { border-radius: 4px; }
.qt-barre span:first-child { border-radius: 8px 4px 4px 8px; }
.qt-barre span:nth-child(4) { border-radius: 4px 8px 8px 4px; }
.qt-maigreur { --c: #5aa9e6; }
.qt-normale { --c: #3bb273; }
.qt-surpoids { --c: #f2b134; }
.qt-obesite { --c: #ef8354; }
.qt-barre span, .qt-leg i { background: var(--c); }
.qt-cur { position: absolute; top: -6px; width: 6px; height: 26px; margin-left: -3px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px #fff; transition: left .3s var(--ease); }
.qt-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; list-style: none; margin: 0; padding: 0; }
.qt-leg li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 15px; color: var(--text); }
.qt-leg li.on { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; color: var(--ink); }
.qt-leg i { width: 12px; height: 12px; border-radius: 50%; }
.qt-leg small { font-size: 14px; color: var(--muted); }

/* Convertisseur */
.qt-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.qt-onglets button { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--soft); font: 600 15px/1 var(--body); color: var(--text); cursor: pointer; transition: background .2s, color .2s; }
.qt-onglets button:hover { background: #ececf1; }
.qt-onglets button.on { background: var(--ink); color: #fff; }
.qt-paire { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.qt-cote { display: grid; gap: 8px; }
.qt-inv { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); cursor: pointer; }

/* Mot de passe */
.qt-mdp { display: block; padding: 20px 18px; border-radius: 16px; background: var(--soft); font: 600 24px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); text-align: center; overflow-wrap: anywhere; user-select: all; }
.qt-force { display: grid; gap: 8px; }
.qt-force-b { display: block; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.qt-force-b i { display: block; height: 100%; border-radius: 4px; transition: width .3s var(--ease), background .3s; }
.qt-force-b .qt-faible { background: #ef5350; }
.qt-force-b .qt-moyen { background: #f2b134; }
.qt-force-b .qt-solide { background: #3bb273; }
.qt-force-b .qt-top { background: #12824a; }
.qt-force p { font-size: 15px; color: var(--muted); }
.qt-force p b { color: var(--ink); }
.qt-pass .acts .btn { flex: 1; }
.qt-pass .tick { min-height: 32px; }

/* Pseudos */
.qt-pseudos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qt-pseudos button { min-height: 50px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 16px/1.25 var(--head); color: var(--ink); cursor: pointer; overflow-wrap: anywhere; transition: background .2s, box-shadow .2s; }
.qt-pseudos button:hover { background: var(--tint); box-shadow: 0 0 0 1.5px rgba(238, 47, 59, .5); }

@media (max-width: 600px) {
  .qt-q { font-size: 17px; line-height: 50px; }
  .inp.qt-n:not(.qt-n-l) { width: 86px; }
  .qt-rep { font-size: 30px; }
  .qt-paire { grid-template-columns: minmax(0, 1fr); }
  .qt-inv { justify-self: center; transform: rotate(90deg); }
  .qt-leg { grid-template-columns: 1fr; }
  .qt-pseudos { grid-template-columns: 1fr 1fr; }
  .qt-mdp { font-size: 20px; }
  .qt-grille { grid-template-columns: 1fr 1fr; }
}