/* css/theoremes-jeux.css — mise en page commune des jeux « théorèmes »
   (theoreme/trigocote, trigoangle, pytagore, pytagorer, thales).
   Carte CLAIRE quel que soit le thème du site (les thèmes ne changent que le fond),
   figure grande sur tablette, grosses cases et gros boutons tactiles. */

body.thj-page{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background-image:url('/theoreme/fond.png');color:#1f2a44}
.thj{position:relative;z-index:10;max-width:1120px;margin:0 auto;padding:94px 14px 28px;box-sizing:border-box}
.thj *{box-sizing:border-box}
.thj h1{margin:6px 0 10px;text-align:center;font-size:1.55rem;color:#1f2a44;
  background:rgba(255,255,255,.82);border-radius:14px;padding:6px 14px;width:fit-content;max-width:100%;margin-inline:auto}
.thj-barre{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:0 0 12px}
.thj-barre > div{background:#fff;border:1px solid #d6deeb;border-radius:999px;padding:6px 16px;font-weight:800;font-size:1.05rem;color:#1f2a44;box-shadow:0 2px 6px rgba(20,30,60,.08)}
.thj-carte{--fig-fond:#fbfcff;--fig-trait:#1f2a44;--fig-connu:#1565c0;--fig-cherche:#d84315;--fig-angle:#2e7d32;--fig-parallele:#c2185b;
  background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(20,30,60,.18);padding:16px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,1fr);gap:18px;align-items:start;color:#1f2a44}
@media (max-width:820px){.thj-carte{grid-template-columns:1fr}}
.thj-figure{min-height:260px;display:flex;align-items:center;justify-content:center;background:#fbfcff;
  border:1px solid #e3e8f2;border-radius:16px;padding:8px;overflow:hidden}
.thj-jeu{display:flex;flex-direction:column;gap:12px;font-size:1.15rem;min-width:0}
.thj-consigne{margin:0;font-weight:700;font-size:1.18rem;line-height:1.4}
.thj-consigne b{color:#d84315}
.thj-info{margin:0;color:#4a5878;font-size:1rem}
.thj-zone{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:1.35rem;font-weight:700}
.thj-zone[hidden]{display:none}
.thj-case{font:700 1.3rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;width:4.6em;padding:8px 6px;text-align:center;
  border:2px solid #b8c4d8;border-radius:10px;background:#fff;color:#1f2a44}
.thj-case.large{width:7em}
.thj-case:focus{outline:3px solid #f59e0b;outline-offset:1px;border-color:#f59e0b}
.thj-case[readonly]{background:#eef2f8;border-color:#d6deeb}
.thj-frac{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.thj-frac hr{width:100%;border:0;border-top:3px solid #1f2a44;margin:0}
.thj-choix{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.thj-choix button{font:800 1.3rem/1 system-ui,sans-serif;padding:14px 22px;min-width:88px;border-radius:14px;cursor:pointer;
  border:2px solid #b8c4d8;background:linear-gradient(180deg,#fff,#eef2f7);color:#1f2a44;touch-action:manipulation}
.thj-choix button.choisi{border-color:#1565c0;background:#e3efff;box-shadow:0 0 0 3px rgba(21,101,192,.25)}
.thj-choix button.bonne{border-color:#2e7d32;background:#e3f6e5}
.thj-choix button.fausse{border-color:#c62828;background:#fdecea}
.thj-props{display:flex;flex-direction:column;gap:10px}
.thj-props button{font:700 1.25rem/1.3 system-ui,sans-serif;padding:12px;border-radius:14px;cursor:pointer;border:2px solid #b8c4d8;
  background:#fff;color:#1f2a44;display:flex;justify-content:center;align-items:center;gap:10px;touch-action:manipulation}
.thj-props button.choisi{border-color:#1565c0;background:#e3efff}
.thj-props button.bonne{border-color:#2e7d32;background:#e3f6e5}
.thj-props button.fausse{border-color:#c62828;background:#fdecea}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.15}
.fr > span:first-child{border-bottom:2px solid currentColor;padding:0 3px}
.thj-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.thj-valider,.thj-suivant{font:800 1.2rem/1 system-ui,sans-serif;padding:14px 28px;border-radius:14px;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#4ade80,#16a34a);box-shadow:0 4px 0 #166534;touch-action:manipulation}
.thj-suivant{background:linear-gradient(180deg,#60a5fa,#2563eb);box-shadow:0 4px 0 #1e40af}
.thj-valider:disabled{opacity:.55;cursor:default}
.thj-valider[hidden],.thj-suivant[hidden]{display:none}
.thj-retour{min-height:1.4em;font-weight:700;text-align:center;border-radius:12px;padding:0}
.thj-retour.ok{background:#e3f6e5;color:#1b5e20;padding:10px}
.thj-retour.ko{background:#fdecea;color:#8e1b1b;padding:10px}
.thj-retour.info{background:#eef2f8;color:#1f2a44;padding:10px}
.thj-sol{margin-top:6px;font-weight:600;color:#1f2a44;font-size:1.02rem;line-height:1.45}
.thj-fin{text-align:center;font-size:1.3rem;font-weight:800}
.thj-pave[hidden]{display:none}
.thj-pave .pave-rep{margin-top:4px}
/* calculatrice */
.thj-btn-calc{display:block;margin:0 auto;padding:10px 16px;border:none;border-radius:12px;cursor:pointer;font-weight:700;font-size:1rem;color:#333;
  background:linear-gradient(180deg,#fff,#f1f1f1);box-shadow:0 4px 10px rgba(0,0,0,.12)}
.thj-calc{background:#f6f8fc;border:1px solid #d6deeb;border-radius:14px;padding:10px;max-width:360px;margin:8px auto 0}
.thj-calc[hidden]{display:none}
.thj-calc input{width:100%;padding:8px;font-size:1.3rem;text-align:right;border:none;border-radius:8px;box-shadow:inset 0 2px 5px rgba(0,0,0,.1);background:#fff;color:#111}
.thj-calc-touches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.thj-calc-touches button{padding:11px 4px;font-size:1.05rem;border:none;border-radius:8px;cursor:pointer;background:#e6e6e6;color:#222;touch-action:manipulation}
.thj-calc-touches .op{background:#ffb347;color:#fff;font-weight:700}
.thj-calc-touches .eg{background:#4caf50;color:#fff;font-weight:800}
.thj-calc-touches .eff{background:#d9534f;color:#fff;font-weight:800}
.thj-calc-touches .fn{background:#dbe7ff;color:#123;font-weight:700}
.thj-calc-inserer{margin-top:8px;width:100%;padding:10px;border-radius:10px;border:1px solid #b8c4d8;background:#fff;font-weight:700;cursor:pointer;color:#1f2a44}
.toast{position:fixed;bottom:20px;right:20px;background-color:#fbc12d79;color:#fff;padding:15px 20px;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,.2);
  font-weight:bold;opacity:0;transition:opacity .5s ease;z-index:9999;border:1px solid #000}
.toast.show{opacity:1}
.thj-lignes{display:flex;flex-direction:column;gap:10px}
.thj-lignes[hidden]{display:none}
.thj-lignes .thj-zone{justify-content:flex-start}
.thj-zone .thj-info{font-weight:600;font-size:1rem}
/* l'attribut hidden l'emporte toujours sur les display:flex/grid ci-dessus */
.thj [hidden]{display:none !important}
/* Moyen mnémotechnique CAH SOH TOA (trigocote, trigoangle) — couleurs fixes : lisible sous tous les thèmes */
.thj-cst{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:2px 0 12px}
.thj-cst .mn{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:#f1f5ff;border:1px solid #d6e0f5;color:#1f2a44}
.thj-cst .mot{font-weight:900;font-size:1.15rem;letter-spacing:.06em;color:#1f2a44}
.thj-cst .eg{font-weight:700;font-size:.95rem;color:#1f2a44;display:flex;align-items:center;gap:5px}
.thj-cst .fr{display:inline-flex;flex-direction:column;align-items:center;font-size:.85rem;line-height:1.2}
.thj-cst .fr span:first-child{border-bottom:2px solid currentColor;padding:0 2px}
.thj-cst .o{color:#c2410c}.thj-cst .a{color:#1d4ed8}.thj-cst .h{color:#7c3aed}
body[class*="theme-"] .thj-cst .mn,body[class*="theme-"] .thj-cst .mot,body[class*="theme-"] .thj-cst .eg{color:#1f2a44!important;-webkit-text-fill-color:#1f2a44!important}
body[class*="theme-"] .thj-cst .o{color:#c2410c!important;-webkit-text-fill-color:#c2410c!important}
body[class*="theme-"] .thj-cst .a{color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important}
body[class*="theme-"] .thj-cst .h{color:#7c3aed!important;-webkit-text-fill-color:#7c3aed!important}
/* Thalès : lettres du petit triangle (orange), du grand (bleu), sommet commun (moitié-moitié) — mêmes couleurs que la figure */
.thj-tp{color:#b45309;font-weight:800}.thj-tg{color:#0369a1;font-weight:800}
.thj-ts{color:#1f2a44;font-weight:900;background:linear-gradient(90deg,#fcdca0 50%,#d3ecfb 50%);border-radius:4px;padding:0 .08em}
.thj-commun{margin-top:6px;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;color:#1f2a44;font-weight:600}
body[class*="theme-"] .thj-tp{color:#b45309!important;-webkit-text-fill-color:#b45309!important}
body[class*="theme-"] .thj-tg{color:#0369a1!important;-webkit-text-fill-color:#0369a1!important}
body[class*="theme-"] .thj-ts,body[class*="theme-"] .thj-commun{color:#1f2a44!important;-webkit-text-fill-color:#1f2a44!important}