/* Jeux · Jardin et Maison : habillage commun, dans le style de L'Agenda (pétrole + vert, Noto Sans).
   Actif seulement quand jeux.js a posé la classe "jx" sur <body>. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --jx-bg:#f7f8f2; --jx-petrol:#003d56; --jx-petrol2:#0a5273; --jx-green:#89ad32; --jx-green2:#5c7a1b; --jx-green3:#486014;
  --jx-mint50:#f5f8ea; --jx-mint100:#e9f1d0; --jx-line:#e4e8d9; --jx-text:#13242c; --jx-text2:#46575e; --jx-muted:#7f9097;
  --jx-side-w:232px; --jx-tabs-h:64px;
  /* Variables utilisées par les pages de jeux */
  --jx-bg1:#f7f8f2; --jx-bg2:#f5f8ea; --jx-card:#ffffffd9; --jx-fg:#13242c;
  --jx-accent:#5c7a1b; --jx-accent2:#486014; --jx-bar:#003d56; --jx-bar-fg:#ffffff;
  --jx-shadow:0 4px 16px -4px #003d561a, 0 2px 4px #00000008;
}
body.jx {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  color:var(--jx-fg);
  background:radial-gradient(at 0% 0%,#89ad321a 0,transparent 45%),radial-gradient(at 100% 100%,#003d560d 0,transparent 50%),var(--jx-bg);
  background-attachment:fixed;
}
.jx-main { flex:1 0 auto; width:100%; }
.jx-side, .jx-top, .jx-tabs, .jx-sheet, .jx-footer, .jx-share { font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif; }
.jx-ic { width:22px; text-align:center; font-size:1rem; line-height:1; flex:none; }
.jx-logo { display:block; height:40px; width:auto; border-radius:12px; background:#fff; padding:3px; flex:none; }
.jx-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.jx-brand-t { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.jx-brand-n { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-.2px; }
.jx-brand-by { font-size:.7rem; font-weight:600; color:#b7cf6a; white-space:nowrap; }

/* Mobile : en-tête pétrole en haut, barre d'onglets en bas */
.jx-side { display:none; }
.jx-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 12px 0; padding:10px 14px; background:var(--jx-petrol); border-radius:16px; box-shadow:var(--jx-shadow); }
.jx-top-site { color:#d6e5a6; font-size:.75rem; font-weight:600; text-decoration:none; padding:6px 4px; flex:none; }
.jx-top-site:hover { color:#fff; text-decoration:underline; }
.jx-tabs { position:fixed; left:0; right:0; bottom:0; z-index:1003; display:flex; align-items:stretch; height:calc(var(--jx-tabs-h) + env(safe-area-inset-bottom)); padding:4px 4px env(safe-area-inset-bottom); border-top:1px solid var(--jx-line); background:#fffffff5; box-shadow:0 -4px 20px #003d5614; }
.jx-tabs a, .jx-tabs button { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 2px; border:0; background:none; color:var(--jx-text2); text-decoration:none; font:600 .68rem 'Noto Sans',system-ui,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.jx-tab-i { display:inline-grid; place-items:center; width:52px; height:30px; border-radius:99px; font-size:1.2rem; line-height:1; transition:background .18s; }
.jx-tab-l { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jx-tabs .active, .jx-tabs [aria-expanded="true"] { color:var(--jx-petrol); font-weight:800; }
.jx-tabs .active .jx-tab-i, .jx-tabs [aria-expanded="true"] .jx-tab-i { background:var(--jx-mint100); }
.jx-backdrop { position:fixed; inset:0; z-index:1001; background:#001e2c66; }
.jx-backdrop[hidden], .jx-sheet[hidden] { display:none; }
.jx-sheet { position:fixed; left:0; right:0; bottom:calc(var(--jx-tabs-h) + env(safe-area-inset-bottom)); z-index:1002; max-height:70vh; overflow-y:auto; padding:14px 12px 16px; background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -10px 40px #003d5640; }
.jx-sheet-t { margin:0 0 8px 8px; font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--jx-muted); }
.jx-sheet-g { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
.jx-sheet a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; color:var(--jx-text2); text-decoration:none; font-weight:600; font-size:.9rem; }
.jx-sheet a:hover { background:var(--jx-mint50); color:var(--jx-petrol); }
.jx-sheet a[aria-current="page"] { background:var(--jx-petrol); color:#fff; }
@media (max-width:899px) { body.jx { padding-bottom:calc(var(--jx-tabs-h) + env(safe-area-inset-bottom)); } }

/* Mobile : tout le jeu (zone de jeu + commandes) doit tenir entre l'en-tête et la barre d'onglets.
   Blocs compacts communs ; chaque jeu garde ses réglages propres dans sa page. */
@media (max-width:600px) {
  :root { --jx-tabs-h:56px; }
  .jx-top { margin:6px 8px 0; padding:6px 12px; border-radius:14px; }
  .jx-logo { height:30px; border-radius:9px; }
  .jx-brand-n { font-size:1rem; }
  .jx-brand-by { font-size:.62rem; }
  .jx-tab-i { height:26px; font-size:1.1rem; }
  .jx-tabs a, .jx-tabs button { gap:1px; font-size:.64rem; }
  .jx-footer { margin-top:16px; }
  .jx-share { margin-top:14px; }

  /* Jeux « maison » (pendu, memory, arrosoir, attrape-fleurs, chasse, tri, tango) */
  body.jx .jx-main { padding:6px 8px 12px; gap:6px; }
  body.jx .jx-main .sub { display:none; }
  body.jx .jx-main h1 { font-size:1.45rem; letter-spacing:.02em; line-height:1.15; }
  body.jx .jx-main .card { padding:10px; border-radius:18px; }
  body.jx .bar { gap:6px; margin-bottom:8px; }
  body.jx .bar .chips { gap:4px; }
  body.jx .bar .chip { padding:3px 9px; font-size:.8rem; white-space:nowrap; }
  body.jx .bar .stats { gap:4px; }
  body.jx .bar .stat { min-width:0; padding:2px 7px; border-radius:10px; }
  body.jx .bar .stat b { font-size:1rem; }
  body.jx .bar .stat small { font-size:.65rem; }
  body.jx #lives { font-size:1.05rem; min-height:1.3rem; margin-bottom:4px; letter-spacing:.1em; }
  body.jx #tip { min-height:2.2rem; margin-top:6px; font-size:.85rem; line-height:1.25; }
  body.jx #cover h2 { font-size:1.2rem; }
  body.jx #cover p { font-size:.85rem; }
  body.jx #cover { gap:6px; padding:10px; }
  body.jx #msg { min-height:1.4rem; font-size:1.05rem; margin-top:6px; }
  body.jx #start, body.jx #restart, body.jx #next, body.jx .btn { padding:8px 22px; font-size:.95rem; }
  body.jx #restart { margin-top:8px; }

  /* Jeux en Tailwind (Devine la plante, Quiz) */
  body.jx .jx-wrap { padding:8px; }
  body.jx .jx-wrap > .border-4 { padding:12px; }
  body.jx .jx-wrap h1 { font-size:1.4rem; line-height:1.2; margin-bottom:2px; }
  /* Devine la plante : sous-titre masqué, boutons côte à côte, image plus basse */
  body.jx .jx-wrap > .border-4 > p.text-gray-600 { display:none; }
  body.jx .jx-wrap #imgBox { margin-bottom:8px; max-height:34svh; margin-left:auto; margin-right:auto; }
  body.jx .jx-wrap #guessForm > div { flex-direction:row; gap:8px; margin-bottom:6px; }
  body.jx .jx-wrap #guessForm > div > button { flex:1 1 0; width:auto; padding:10px 8px; }
  body.jx .jx-wrap #guessInput { padding:8px; margin-bottom:8px; }
  body.jx .jx-wrap #nextButton { width:100%; padding:10px; }
  body.jx .jx-wrap #hintButton { font-size:.8rem; }
  /* Quiz : écran de question plus dense */
  body.jx .jx-wrap #quiz-screen { padding:12px; }
  body.jx .jx-wrap #quiz-screen > .mb-6 { margin-bottom:10px; }
  body.jx .jx-wrap #question-text { font-size:1.1rem; line-height:1.3; margin-bottom:6px; }
  body.jx .jx-wrap #answer-options { gap:6px; }
  body.jx .jx-wrap .answer-btn { padding:8px 12px; font-size:.95rem; line-height:1.25; }
  body.jx .jx-wrap #start-screen { padding:16px; }
  body.jx .jx-wrap #start-screen h1 { font-size:1.5rem; }
  body.jx .jx-wrap #start-screen p { font-size:.95rem; margin-bottom:8px; }
}

/* Ordinateur : barre latérale à gauche, comme L'Agenda */
@media (min-width:900px) {
  body.jx { padding-left:var(--jx-side-w); }
  .jx-top, .jx-tabs, .jx-sheet, .jx-backdrop { display:none !important; }
  .jx-side { display:flex; flex-direction:column; gap:2px; position:fixed; top:0; bottom:0; left:0; z-index:900; width:var(--jx-side-w); padding:16px 12px; overflow-y:auto; background:#ffffffeb; border-right:1px solid var(--jx-line); }
  .jx-side .jx-brand { padding:10px; margin-bottom:10px; background:var(--jx-petrol); border-radius:16px; }
  .jx-side a:not(.jx-brand) { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px; color:var(--jx-text2); text-decoration:none; font-weight:600; font-size:.9rem; transition:background .18s, color .18s; }
  .jx-side a:not(.jx-brand):hover { background:var(--jx-mint50); color:var(--jx-petrol); }
  .jx-side a[aria-current="page"] { background:var(--jx-petrol); color:#fff; }
  .jx-side a[aria-current="page"]:hover { background:var(--jx-petrol2); color:#fff; }
  .jx-group { margin:0; padding:14px 10px 4px; font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--jx-muted); }
  .jx-side .jx-back { margin-top:auto; font-weight:800; color:var(--jx-petrol2); border:1px solid var(--jx-line); justify-content:center; }
}

/* Partage */
.jx-share { max-width:1000px; margin:24px auto 0; padding:0 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.jx-share[hidden], .jx-share-b[hidden] { display:none; }
.jx-share-t { font-weight:700; color:var(--jx-petrol); margin-right:4px; }
.jx-share-b { font:inherit; font-weight:600; font-size:.85rem; cursor:pointer; padding:6px 14px; border-radius:99px; border:1px solid var(--jx-line); background:#fff; color:var(--jx-petrol); text-decoration:none; box-shadow:0 1px 2px #00283805; transition:background .18s, color .18s; }
.jx-share-b:hover, .jx-share-b:focus-visible { background:var(--jx-petrol); color:#fff; outline:none; }

/* Pied de page */
.jx-footer { flex:none; margin-top:32px; background:var(--jx-petrol); color:#fff; }
.jx-footer-in { max-width:1000px; margin:0 auto; padding:20px 16px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; font-size:.9rem; }
.jx-footer a { color:inherit; opacity:.9; text-decoration:none; }
.jx-footer a:hover { opacity:1; text-decoration:underline; }
.jx-footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
/* Éléments communs réutilisables par les jeux */
.jx-wrap { max-width:1000px; margin:0 auto; padding:24px 16px; }
.jx-card { background:var(--jx-card); backdrop-filter:blur(8px); border-radius:22px; box-shadow:var(--jx-shadow); padding:22px; }
.jx-title { text-align:center; margin:0 0 6px; font-size:clamp(1.8rem,5vw,2.6rem); }
.jx-title span { color:var(--jx-accent); }
.jx-sub { text-align:center; color:var(--jx-muted); margin:0 0 20px; }
.jx-btn { display:inline-block; border:0; border-radius:99px; padding:10px 22px; background:var(--jx-accent); color:#fff; font:600 1rem 'Fredoka',sans-serif; cursor:pointer; text-decoration:none; transition:background .15s, transform .1s; }
.jx-btn:hover { background:var(--jx-accent2); }
.jx-btn:active { transform:translateY(1px); }
/* ===== Cartes et contenu des jeux : palette de L'Agenda =====
   Les jeux définissent leurs couleurs avec les variables --bg1, --card, --accent… (et --tlm-* pour Trouve le mot).
   On les redéfinit sur <body> : plus proches des éléments, elles l'emportent sur celles de :root, mode sombre compris. */
body.jx {
  --bg1:#f7f8f2; --bg2:#f5f8ea; --card:#ffffff; --fg:#13242c; --muted:#5f7279;
  --accent:#5c7a1b; --accent2:#486014; --gold:#e8a93a; --bad:#dc2626;
  --tile:#f5f8ea; --key:#ffffff; --keyline:#dce1cf; --shadow:0 4px 16px -4px #003d561a, 0 2px 4px #00000008;
  --back1:#0a5273; --back2:#003d56;
  --tlm-vert:#003d56; --tlm-vert-fonce:#0a5273; --tlm-olive:#5c7a1b; --tlm-lime:#89ad32;
  --tlm-lime-clair:#e9f1d0; --tlm-lime-bord:#d3e3a6; --tlm-encre:#13242c; --tlm-gris:#46575e;
  --tlm-beige:#e4e8d9; --tlm-beige-fonce:#dce1cf; --tlm-creme:#f7f8f2; --tlm-touche:#f5f8ea;
  --tlm-police-titre:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.jx button, body.jx input, body.jx select, body.jx textarea { font-family:inherit !important; }
body.jx h1, body.jx h2 { color:var(--jx-petrol); font-weight:800; letter-spacing:-.3px; }
body.jx h1 span { color:var(--jx-green2); }
body.jx .card, body.jx .jx-card { background:#fff; backdrop-filter:none; border:1px solid var(--jx-line); border-radius:22px; box-shadow:var(--shadow); }
body.jx .motus-game-container { border-radius:22px; border-color:var(--jx-line); box-shadow:var(--shadow); }
/* Boutons pleins : à plat, avec ombre douce, comme L'Agenda */
body.jx #restart, body.jx .btn, body.jx .jx-btn { box-shadow:0 4px 14px -4px #486014a6; }
body.jx .chip { border-width:1px; font-weight:600; }

/* Jeux en Tailwind (Devine la plante, Quiz) : la palette verte/grise devient celle de L'Agenda */
body.jx .border-4.border-green-700 { border-width:1px; border-color:var(--jx-line); border-radius:22px; box-shadow:var(--shadow); }
body.jx .text-green-900, body.jx .text-green-800, body.jx .text-gray-900, body.jx .text-gray-800 { color:var(--jx-petrol); }
body.jx .text-green-700 { color:var(--jx-green2); }
body.jx .text-green-600 { color:var(--jx-green2); }
body.jx .text-gray-700, body.jx .text-gray-600 { color:var(--jx-text2); }
body.jx .bg-green-600 { background-color:var(--jx-green2); }
body.jx .hover\:bg-green-700:hover { background-color:var(--jx-green3); }
body.jx .bg-green-100, body.jx .bg-green-50 { background-color:var(--jx-mint100); }
body.jx .hover\:bg-green-50:hover { background-color:var(--jx-mint50); }
body.jx .border-green-500, body.jx .border-green-400, body.jx .border-green-300 { border-color:var(--jx-green); }
body.jx .bg-gray-200 { background-color:var(--jx-line); }
body.jx .bg-gray-100, body.jx .bg-gray-50 { background-color:var(--jx-mint50); }
body.jx .rounded-2xl { border-radius:22px; }
body.jx .rounded-full.bg-green-600, body.jx button.bg-green-600, body.jx button.bg-yellow-500 { border-radius:9999px; }
/* Bouton « Installer l'appli » (PWA) */
.jx-install { display:flex; align-items:center; gap:10px; width:100%; margin-top:6px; padding:8px 10px; border:1px dashed var(--jx-green); border-radius:12px; background:var(--jx-mint50); color:var(--jx-green3); font:700 .9rem 'Noto Sans',system-ui,sans-serif; cursor:pointer; text-align:left; }
.jx-install[hidden] { display:none; }
.jx-install:hover { background:var(--jx-mint100); }
@media (min-width:900px) { .jx-side .jx-install { margin-top:auto; } .jx-side .jx-install + .jx-back { margin-top:8px; } }