/* Thèmes visuels (voir themes.js). Chargé après style.css.
   Sélecteurs posés sur <html> par themes.js :
   - data-theme="classique|etang|mine|monstres"
   - data-page="menu|labyrinthe|cube|pixel|…"
   - data-cases="chemins" sur le labyrinthe et le cube seulement : l'habillage des cases ne touche
     jamais le pixel art, dont les couleurs restent celles des dessins.
   Les couleurs dont dépend la lisibilité arrivent en variables --t-… (THEMES[].couleurs, testées).
   Les couleurs des chemins (Okabe-Ito) arrivent par case en --teinte / --lueur (copie du style en
   ligne posé par labyrinthe.js) et data-motif (numéro du chemin). */

@font-face {
  font-family: 'Fredoka';
  src: url(themes/fredoka-latin.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lilita One';
  src: url(themes/lilita-one-latin.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* =====================================================================
   Communs à tous les thèmes illustrés
   ===================================================================== */

:root[data-theme='etang'] {
  --t-police-titre: 'Fredoka', system-ui, sans-serif;
  --t-police-cases: 'Fredoka', system-ui, sans-serif;
  --t-graisse-cases: 600;
  --t-mascotte-image: url(themes/grenouille-mascotte.webp);
  --t-mascotte-fond: #fbf3e2;
  --t-anneau: #78bf57;
  --t-cadrage: center 30%;
}
:root[data-theme='mine'] {
  --t-police-titre: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --t-police-cases: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --t-graisse-cases: 400;
  --t-mascotte-image: url(themes/mine-mascotte.webp);
  --t-mascotte-fond: #c9d0d9;
  --t-anneau: #8a7b6c;
  --t-cadrage: center 50%;
}
:root[data-theme='monstres'] {
  --t-police-titre: 'Fredoka', system-ui, sans-serif;
  --t-police-cases: 'Fredoka', system-ui, sans-serif;
  --t-graisse-cases: 600;
  --t-mascotte-image: url(themes/monstres-mascotte.webp);
  --t-mascotte-fond: #ece6f3;
  --t-anneau: #d9c5ee;
  --t-cadrage: center 62%;
}

:root:not([data-theme='classique']) body { color: var(--t-texte); }
:root:not([data-theme='classique']) h1,
:root:not([data-theme='classique']) h2,
:root:not([data-theme='classique']) .tuile .nom,
:root:not([data-theme='classique']) .pastille,
:root:not([data-theme='classique']) .etiquette,
:root:not([data-theme='classique']) .barre button,
:root:not([data-theme='classique']) .bouton { font-family: var(--t-police-titre); }
:root:not([data-theme='classique']) .tuile .nom { font-weight: 600; }
:root[data-theme='mine'] h1, :root[data-theme='mine'] h2, :root[data-theme='mine'] .tuile .nom,
:root[data-theme='mine'] .pastille, :root[data-theme='mine'] .etiquette,
:root[data-theme='mine'] .barre button, :root[data-theme='mine'] .bouton { font-weight: 400; letter-spacing: 0.02em; }

/* nombres des cases (labyrinthe, cube) dans la police du thème */
:root:not([data-theme='classique'])[data-cases] .case { font-family: var(--t-police-cases); font-weight: var(--t-graisse-cases); }

/* --- Mascotte des pages de jeu --- */

.mascotte-theme { z-index: 6; display: flex; gap: 8px; pointer-events: none; }
.mascotte-theme.au-coin {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 180px;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.mascotte-theme.dans-flux {
  position: relative;
  flex-direction: row;
  align-items: center;
  width: max-content;
  max-width: 94vw;
  margin: 6px auto 24px;
}
.mascotte-theme img {
  display: block;
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--t-mascotte-fond);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--t-anneau), 0 6px 14px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 90%;
}
.bulle-mascotte {
  position: relative;
  margin: 0;
  max-width: 180px;
  padding: 7px 12px;
  border-radius: 14px;
  background: #fff;
  color: #1f2430;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.bulle-mascotte:empty { display: none; }
.au-coin .bulle-mascotte { margin-left: 4px; margin-bottom: 4px; }
.au-coin .bulle-mascotte::after {
  content: '';
  position: absolute;
  left: 30px;
  bottom: -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
}
.dans-flux .bulle-mascotte { max-width: min(240px, 60vw); }
.dans-flux .bulle-mascotte::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left: 0;
  border-right-color: #fff;
}
.mascotte-theme.replie .bulle-mascotte { display: none; }
.bulle-mascotte.nouvelle { animation: theme-bulle 0.3s ease-out; }

/* humeurs : attend (respire), content (petit saut), oups (hochement), bravo (applaudit) */
.mascotte-theme[data-humeur='attend'] img { animation: theme-respire 3.2s ease-in-out infinite; }
.mascotte-theme[data-humeur='content'] img { animation: theme-saute 0.6s ease-out; }
.mascotte-theme[data-humeur='oups'] img { animation: theme-hoche 0.6s ease-in-out; }
.mascotte-theme[data-humeur='bravo'] img { animation: theme-bravo 0.45s ease-in-out 6 alternate; }

@keyframes theme-respire { 50% { transform: scale(1.04) translateY(-1px); } }
@keyframes theme-saute {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(2px) scale(1.06, 0.94); }
  55% { transform: translateY(-16px) scale(0.97, 1.04); }
}
@keyframes theme-hoche {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  55% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
}
@keyframes theme-bravo {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-12px) rotate(5deg) scale(1.05); }
}
@keyframes theme-bulle { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* --- Carte de victoire : la mascotte en haut de la carte (dans le flux : la carte peut défiler) --- */

:root:not([data-theme='classique']) .victoire::before {
  content: '';
  display: block;
  width: 96px;
  height: 96px;
  margin: 2px auto 8px;
  border-radius: 50%;
  background: var(--t-mascotte-image) center / cover no-repeat, var(--t-mascotte-fond);
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--t-anneau), 0 6px 14px rgba(0, 0, 0, 0.22);
  animation: theme-bravo 0.45s ease-in-out 0.5s 6 alternate both;
}
:root:not([data-theme='classique']) .victoire h2 { font-size: 1.7rem; }

/* --- Menu : bandeau du thème --- */

.heros-theme {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  margin: 16px 0 4px;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 40, 0.18);
}
.heros-fond { position: absolute; inset: 0; background-size: cover; background-position: var(--t-cadrage, center); }
.heros-fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.55) 100%); }
.heros-texte { position: relative; flex: 1; padding: 18px 22px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.heros-titre { display: block; font-family: var(--t-police-titre); font-weight: 700; font-size: 2rem; line-height: 1.1; }
:root[data-theme='mine'] .heros-titre { font-weight: 400; color: #F0E442; }
.heros-texte small { display: block; font-weight: 700; font-size: 1rem; margin-top: 2px; }
.heros-mascotte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px 16px; }
.heros-mascotte img {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--t-mascotte-fond);
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px var(--t-anneau), 0 8px 18px rgba(0, 0, 0, 0.3);
  animation: theme-respire 3.2s ease-in-out infinite;
}
.bulle-heros {
  background: #fff;
  color: #1f2430;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

/* tuiles : illustration du thème, et le « lieu » du jeu sous son nom */
.illustration.dessin-theme svg { width: 150px; height: 150px; }
.lieu-theme { font-weight: 700; font-size: 0.9rem; opacity: 0.85; margin-top: -6px; }

/* bouton « 🎨 Thèmes » du menu */
.tete-menu .bouton-themes { font-weight: 700; white-space: nowrap; }

/* --- Panneau des thèmes --- */

dialog.panneau-themes { width: min(94vw, 580px); }
.total-themes { margin: 6px 0 12px; }
.liste-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-theme {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 10px;
  text-align: left;
  color: #2b2b2b;
  background: #fff;
  border: 3px solid #e6e0d6;
  border-radius: 16px;
  cursor: pointer;
}
.carte-theme:hover { border-color: #b9b0a2; }
.carte-theme.choisi { border-color: #2b2b2b; box-shadow: 0 0 0 2px #2b2b2b; }
.carte-theme.verrouille { cursor: default; background: #f4f2ee; border-style: dashed; }
.carte-theme.verrouille:hover { border-color: #e6e0d6; }
.apercu-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 96px;
  border-radius: 12px;
  margin-bottom: 4px;
}
.apercu-theme svg { width: 70px; height: 70px; }
.apercu-theme img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
[data-apercu='classique'] { background: #f6f3ee; }
[data-apercu='etang'] { background: linear-gradient(180deg, #bfe9f4, #5fbfd6); }
[data-apercu='etang'] img { background: #fbf3e2; }
[data-apercu='mine'] { background: radial-gradient(ellipse at 50% 35%, #5a4636 0, #2b2026 75%); }
[data-apercu='mine'] img { background: #c9d0d9; border-color: #8a7b6c; }
[data-apercu='monstres'] { background: linear-gradient(180deg, #fff4fb, #e5d8f6); }
[data-apercu='monstres'] img { background: #ece6f3; }
.verrouille .apercu-theme { filter: grayscale(1); opacity: 0.55; }
.nom-theme { font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.resume-theme { font-size: 0.82rem; color: #5f584c; line-height: 1.3; }
.etat-theme { font-weight: 800; margin-top: auto; padding-top: 4px; }
.choisi .etat-theme { color: #00845f; }
.progres-theme { display: block; height: 10px; border-radius: 99px; background: #e2ddd4; overflow: hidden; }
.progres-theme > span { display: block; height: 100%; border-radius: 99px; background: #f0b400; }
.manque-theme { color: #5f584c; font-weight: 700; }

/* --- Annonce « Nouveau thème débloqué » (en haut, loin de la carte de victoire) --- */

.annonce-theme {
  position: fixed;
  top: 66px;
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(94vw, 540px);
  padding: 10px 12px;
  color: #2b2b2b;
  background: #fffdf5;
  border: 3px solid #f0b400;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  animation: theme-descend 0.45s ease-out both;
}
.annonce-image { flex: none; font-size: 2rem; }
.annonce-image img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #f6f3ee; }
.annonce-texte { flex: 1; font-weight: 700; line-height: 1.3; }
.annonce-actions { display: flex; align-items: center; gap: 6px; }
.annonce-actions .fermer { border: none; background: transparent; }
@keyframes theme-descend { from { opacity: 0; transform: translate(-50%, -24px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =====================================================================
   L'étang de Sautille : eau claire, nénuphars ronds
   ===================================================================== */

[data-theme='etang'] body { background: linear-gradient(180deg, #d9f2f7 0, #bfe7f0 600px, #a8dceb 1000px) no-repeat #a8dceb; }
[data-theme='etang'][data-page='menu'] body {
  background:
    radial-gradient(ellipse 30% 4% at 20% 80%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(ellipse 22% 3% at 80% 92%, rgba(255, 255, 255, 0.25), transparent),
    linear-gradient(180deg, #c8edf6 0, #a3dceb 500px, #74c8dc 1000px) no-repeat #74c8dc;
}
[data-theme='etang'] .tete-menu h1 { color: #0d4f3c; text-shadow: 0 2px 0 #fff; }

[data-theme='etang'] .barre { background: rgba(255, 255, 255, 0.6); box-shadow: 0 2px 0 rgba(0, 90, 90, 0.12); }
[data-theme='etang'] .barre h1 { color: #0f4a50; }
[data-theme='etang'] .etiquette { background: #fff; color: #0f4a50; }
[data-theme='etang'] .barre button, [data-theme='etang'] .bouton, [data-theme='etang'] .icone {
  border: none;
  background: #fff;
  color: #0f3b33;
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(0, 90, 90, 0.22);
}
[data-theme='etang'] .barre button.principal, [data-theme='etang'] .bouton.principal {
  background: var(--t-accent);
  color: var(--t-accent-texte);
  box-shadow: 0 4px 0 #04533f;
}
[data-theme='etang'] .tete-panneau .fermer, [data-theme='etang'] .annonce-actions .fermer { box-shadow: none; background: transparent; }

[data-theme='etang'] .tuile {
  background: rgba(255, 255, 255, 0.88);
  color: #0f3b33;
  border-radius: 24px;
  box-shadow: 0 4px 0 rgba(0, 70, 60, 0.22);
}
[data-theme='etang'] .defi { background: linear-gradient(120deg, #fffbe6, #ffe9a6); box-shadow: 0 4px 0 rgba(0, 70, 60, 0.18); }
[data-theme='etang'] .defi.fait { background: linear-gradient(120deg, #e3f4d8, #c6ecb0); }
[data-theme='etang'] .defi .aller { background: var(--t-accent); }

/* plateau : l'eau, avec quelques ronds dans l'eau */
[data-theme='etang'] .plateau {
  padding: 6px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 14% 6% at 22% 30%, transparent 70%, rgba(255, 255, 255, 0.35) 72% 80%, transparent 82%),
    radial-gradient(ellipse 10% 4% at 80% 74%, transparent 70%, rgba(255, 255, 255, 0.3) 72% 80%, transparent 82%),
    radial-gradient(ellipse 12% 5% at 60% 12%, transparent 70%, rgba(255, 255, 255, 0.25) 72% 80%, transparent 82%),
    linear-gradient(160deg, #6fcbe0, #3c9fc0);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 8px 24px rgba(10, 70, 90, 0.18);
}

/* cases : nénuphars ronds, avec leur encoche ; la couleur du chemin passe par --teinte */
[data-theme='etang'][data-cases] .case {
  background: transparent !important;
  box-shadow: none;
  isolation: isolate;
  color: var(--t-case-texte);
}
[data-theme='etang'][data-cases] .case::before {
  content: '';
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, rgba(20, 70, 20, 0.12) 0 1.5deg, transparent 1.5deg 32deg),
    var(--teinte, radial-gradient(circle at 38% 32%, #a6dc79 0, #7cc152 55%, #5ea43c 100%));
  -webkit-mask: conic-gradient(from 22deg, transparent 0 30deg, #000 30deg);
  mask: conic-gradient(from 22deg, transparent 0 30deg, #000 30deg);
  transition: transform 0.15s;
}
[data-theme='etang'][data-cases] .case.tracee::before {
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.28), transparent 55%),
    repeating-conic-gradient(from 8deg, rgba(255, 255, 255, 0.12) 0 1.5deg, transparent 1.5deg 32deg),
    var(--teinte);
}
/* départs et arrivées : nénuphars entiers, cerclés de la couleur du chemin */
[data-theme='etang'][data-cases] .case.depart::before,
[data-theme='etang'][data-cases] .case.arrivee::before {
  inset: 8%;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 0 0 4px var(--bord), 0 0 0 6px rgba(255, 255, 255, 0.8);
}
[data-theme='etang'][data-cases] .case.tracee { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
[data-theme='etang'][data-cases] .case.texte-fonce { text-shadow: none; }
[data-theme='etang'][data-cases] .marque.m1 { top: 15%; left: 17%; }
[data-theme='etang'][data-cases] .marque.m2 { bottom: 15%; right: 17%; }
[data-theme='etang'][data-cases] .badge { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); z-index: 1; }

/* tête du chemin : un cercle pointillé qui tourne autour du nénuphar */
[data-theme='etang'][data-cases] .case.tete { outline: none; }
[data-theme='etang'][data-cases] .case.tete::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px dashed #fff;
  box-shadow: 0 0 0 1px rgba(0, 60, 80, 0.5), inset 0 0 0 1px rgba(0, 60, 80, 0.5);
  animation: theme-tourne 6s linear infinite;
}
@keyframes theme-tourne { to { transform: rotate(360deg); } }

/* départs qui attendent : le nénuphar grossit doucement */
[data-theme='etang'][data-cases] .attente .case.depart { animation: theme-pulse-rond 1.4s ease-in-out infinite; }
@keyframes theme-pulse-rond { 50% { transform: scale(1.08); } }
/* erreur : le nénuphar rougit un instant ; indice : il luit en jaune */
[data-theme='etang'][data-cases] .case.secousse::before { animation: theme-rouge-rond 0.35s; }
@keyframes theme-rouge-rond { 20%, 40% { box-shadow: 0 0 0 4px #d50000; filter: brightness(1.15) sepia(0.4); } }
[data-theme='etang'][data-cases] .case.indice { animation: none; }
[data-theme='etang'][data-cases] .case.indice::before { animation: theme-lueur-rond 1s ease-in-out 2; }
@keyframes theme-lueur-rond { 50% { box-shadow: 0 0 0 5px #f5c400, 0 0 16px 5px rgba(245, 196, 0, 0.85); filter: brightness(1.15); } }

/* cube : l'île-dé, de l'eau bordée de sable */
[data-theme='etang'] .face {
  background:
    radial-gradient(ellipse 30% 10% at 30% 30%, transparent 70%, rgba(255, 255, 255, 0.3) 72% 80%, transparent 82%),
    linear-gradient(160deg, #6fcbe0, #3c9fc0);
  border-radius: 10px;
  box-shadow: inset 0 0 0 4px #f0d49a, inset 0 0 0 6px #d9b06c;
}
[data-theme='etang'] .scene { background: radial-gradient(ellipse 45% 40% at 50% 55%, rgba(255, 255, 255, 0.45), transparent 70%); }
[data-theme='etang'] .mini { border-color: #9fd3df; border-radius: 10px; }
[data-theme='etang'] .mini.devant { border-color: #00785a; background: #e3f4d8; }

/* pixel art (tous thèmes) : cases blanches à nombres foncés, comme en classique */
:root:not([data-theme='classique'])[data-page='pixel'] .plateau .case { color: #2b2b2b; }

/* pixel art : seul le cadre change */
[data-theme='etang'][data-page='pixel'] .plateau { background: linear-gradient(160deg, #6fcbe0, #3c9fc0); }
[data-theme='etang'] .pinceau { border-color: #bfe0e8; border-radius: 14px; }
[data-theme='etang'] .pinceau.choisi { border-color: #00785a; box-shadow: 0 0 0 2px #00785a; }

/* victoire */
[data-theme='etang'] .victoire { background: #fffdf5; color: #173b2c; border: 4px solid #78bf57; border-radius: 26px; }
[data-theme='etang'] .victoire h2 { color: #0d4f3c; }

/* =====================================================================
   La mine aux cristaux : roche sombre, gemmes qui brillent
   ===================================================================== */

[data-theme='mine'] body {
  background:
    radial-gradient(circle at 12% 18%, rgba(86, 180, 233, 0.18) 0 2%, transparent 7%),
    radial-gradient(circle at 88% 32%, rgba(204, 121, 167, 0.18) 0 2%, transparent 6%),
    radial-gradient(circle at 78% 86%, rgba(0, 158, 115, 0.16) 0 2%, transparent 7%),
    radial-gradient(ellipse 90% 700px at 50% 0, #4d3c30, #231b20) no-repeat #231b20;
}
[data-theme='mine'] .tete-menu h1 { color: #F0E442; text-shadow: 0 3px 0 #6b4a12, 0 0 18px rgba(240, 228, 66, 0.35); }
[data-theme='mine'] button:focus-visible, [data-theme='mine'] a:focus-visible { outline-color: #8fd4ff; }

[data-theme='mine'] .barre { background: #1c1418; box-shadow: 0 2px 0 #3b2e28; }
[data-theme='mine'] .barre h1 { color: #fbf3e4; }
[data-theme='mine'] .barre button, [data-theme='mine'] .bouton, [data-theme='mine'] .icone {
  color: #fff8ec;
  border: none;
  border-radius: 10px;
  background: linear-gradient(160deg, #8a7d70, #5f554b);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.18), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 3px 0 #120d10;
}
[data-theme='mine'] .barre button.principal, [data-theme='mine'] .bouton.principal {
  background: linear-gradient(180deg, #fff27a, var(--t-accent));
  color: var(--t-accent-texte);
  box-shadow: 0 4px 0 #a59a1d, 0 0 18px rgba(240, 228, 66, 0.35);
}
/* les panneaux restent clairs : boutons d'icône sobres dedans */
[data-theme='mine'] dialog .icone, [data-theme='mine'] .annonce-theme .icone { background: transparent; color: #2b2b2b; box-shadow: none; }
[data-theme='mine'] dialog .bouton:not(.principal) { background: #fff; color: #2b2b2b; border: 1px solid #c9c2b6; box-shadow: none; }

[data-theme='mine'] .pastille.actif { outline-color: #fff; }
[data-theme='mine'] .consigne b { color: #F0E442; }

[data-theme='mine'] .tuile {
  color: #fff8ec;
  border-radius: 12px;
  background: linear-gradient(160deg, #8a7d70, #62574c);
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.18), inset -3px -3px 0 rgba(0, 0, 0, 0.3), 0 5px 0 #120d10;
}
[data-theme='mine'] .reglages-tuile { color: #f1e8d8; }
[data-theme='mine'] .score { color: #ffd76a; }
[data-theme='mine'] .lieu-theme { color: #ffe9b0; opacity: 1; }
[data-theme='mine'] .defi { border-radius: 12px; box-shadow: 0 0 22px rgba(240, 228, 66, 0.25); }
/* éléments à fond clair posés sur la page sombre : ils gardent un texte foncé */
[data-theme='mine'] .defi, [data-theme='mine'] .lien-trophees, [data-theme='mine'] .annonce-theme { color: #2b2b2b; }

/* plateau : le fond noir de la galerie */
[data-theme='mine'] .plateau {
  padding: 5px;
  border-radius: 12px;
  background: #1c1418;
  box-shadow: 0 0 0 4px #3b2e28, inset 0 0 30px rgba(0, 0, 0, 0.6), 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* cases : blocs de roche (nombres clairs, contraste ≥ 4,5:1 testé) ; tracées : gemmes taillées */
[data-theme='mine'][data-cases] .case {
  border-radius: 6px;
  color: var(--t-case-texte);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  background:
    radial-gradient(circle at 20% 75%, rgba(0, 0, 0, 0.2) 0 0.09em, transparent 0.11em),
    radial-gradient(circle at 80% 24%, rgba(255, 255, 255, 0.1) 0 0.08em, transparent 0.1em),
    radial-gradient(circle at 72% 82%, rgba(0, 0, 0, 0.16) 0 0.07em, transparent 0.09em),
    linear-gradient(150deg, var(--t-case-fond-clair), var(--t-case-fond) 60%, #4f463e) !important;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.14), inset -3px -3px 0 rgba(0, 0, 0, 0.32);
}
[data-theme='mine'][data-cases] .case.tracee {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0 16%, transparent 16% 50%, rgba(0, 0, 0, 0.14) 50% 68%, transparent 68%),
    var(--teinte) !important;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.35), inset -3px -3px 0 rgba(0, 0, 0, 0.3), 0 0 12px 1px var(--lueur);
  z-index: 1;
}
[data-theme='mine'][data-cases] .case.texte-fonce { text-shadow: none; }
[data-theme='mine'][data-cases] .case.depart,
[data-theme='mine'][data-cases] .case.arrivee {
  box-shadow: inset 0 0 0 3px var(--bord), inset 4px 4px 0 rgba(255, 255, 255, 0.16), 0 0 10px var(--bord);
}
[data-theme='mine'][data-cases] .case.tete { outline: 3px solid #fff; outline-offset: 1px; z-index: 2; animation: theme-brille 1.6s ease-in-out infinite; }
@keyframes theme-brille { 50% { outline-color: #F0E442; } }
[data-theme='mine'][data-cases] .case.secousse { animation: secousse 0.35s, theme-alerte 0.35s; }
@keyframes theme-alerte { 20%, 40% { box-shadow: inset 0 0 0 3px #ff8a80, 0 0 12px #ff5252; } }
[data-theme='mine'][data-cases] .badge { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

/* cube : la planète-cube, flottant parmi les étincelles */
[data-theme='mine'] .face {
  background: #1c1418;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #3b2e28;
}
[data-theme='mine'] .scene {
  background:
    radial-gradient(circle at 15% 25%, #F0E442 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 18%, #56B4E9 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 78%, #CC79A7 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 25% 82%, #009E73 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(240, 228, 66, 0.12), transparent 70%);
}
[data-theme='mine'] .mini { background: #3a3042; color: #fbf3e4; border-color: #6b5d50; }
[data-theme='mine'] .mini.devant { background: #F0E442; color: #2b2000; border-color: #fff27a; }

/* pixel art : cadre de pierre ; les cases et les couleurs du dessin ne changent pas */
[data-theme='mine'][data-page='pixel'] .plateau { background: #3b2e28; }
[data-theme='mine'] .pinceau { background: #fff8ec; border-color: #8a7b6c; }
[data-theme='mine'] .pinceau.choisi { border-color: #F0E442; box-shadow: 0 0 0 3px #F0E442; }

/* victoire */
[data-theme='mine'] .victoire { background: linear-gradient(170deg, #4a3c33, #2f2529); color: #fbf3e4; border: 3px solid #8a7b6c; border-radius: 18px; }
[data-theme='mine'] .victoire h2 { color: #F0E442; }
[data-theme='mine'] .victoire .record { color: #8fd4ff; }
[data-theme='mine'] .victoire .record small, [data-theme='mine'] .victoire .bilan { color: #e0d6c6; }
[data-theme='mine'] .victoire .defi-ok { color: #7fe0b8; }
/* bandeaux de trophées (clairs) dans la carte sombre : texte foncé */
[data-theme='mine'] .victoire .trophee-gagne { color: #2b2b2b; }
[data-theme='mine'] .victoire .trophees-autres { color: #ffd76a; }
[data-theme='mine'] .etoile:not(.gagnee) { color: #6b5d50; }
[data-theme='mine'] .victoire::before { border-radius: 24px; }
[data-theme='mine'] .heros-mascotte img, [data-theme='mine'] .mascotte-theme img { border-radius: 22px; }

/* =====================================================================
   Les Monstres des tables : des cases-monstres qui dorment, puis s'éveillent
   ===================================================================== */

[data-theme='monstres'] body {
  background:
    radial-gradient(circle at 10% 16%, rgba(204, 121, 167, 0.18) 0 50px, transparent 52px),
    radial-gradient(circle at 92% 28%, rgba(86, 180, 233, 0.18) 0 40px, transparent 42px),
    radial-gradient(circle at 84% 92%, rgba(230, 159, 0, 0.14) 0 60px, transparent 62px),
    linear-gradient(180deg, #fff6fb 0, #efe6fb 900px) no-repeat #efe6fb;
}
[data-theme='monstres'] .tete-menu h1 { color: #5b2f7a; }

[data-theme='monstres'] .barre { background: rgba(255, 255, 255, 0.75); box-shadow: 0 2px 0 #e4d6f2; }
[data-theme='monstres'] .barre h1 { color: #3a2a52; }
[data-theme='monstres'] .etiquette { background: #efe4fa; color: #4d3a66; }
[data-theme='monstres'] .barre button, [data-theme='monstres'] .bouton, [data-theme='monstres'] .icone {
  border: none;
  background: #fff;
  color: #2e2440;
  border-radius: 99px;
  box-shadow: 0 3px 0 #d9c5ee;
}
[data-theme='monstres'] .barre button.principal, [data-theme='monstres'] .bouton.principal {
  background: var(--t-accent);
  color: var(--t-accent-texte);
  box-shadow: 0 4px 0 #9b4f80;
}
[data-theme='monstres'] .tete-panneau .fermer, [data-theme='monstres'] .annonce-actions .fermer { box-shadow: none; background: transparent; }

[data-theme='monstres'] .tuile { color: #3a2a52; border-radius: 26px 26px 26px 10px; box-shadow: 0 4px 0 #d9c5ee; }
[data-theme='monstres'] .defi { border-radius: 99px; box-shadow: 0 4px 0 #ecd9a0; }
[data-theme='monstres'] .defi .aller { background: #5b2f7a; }

[data-theme='monstres'] .plateau {
  padding: 6px;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(140, 110, 180, 0.14) 0 3px, transparent 3.5px) 0 0 / 22px 22px, #fbf7ff;
  box-shadow: inset 0 0 0 3px #e4d6f2, 0 8px 24px rgba(80, 40, 110, 0.12);
}

/* cases-monstres : yeux fermés (deux traits) tant qu'elles ne sont pas tracées */
[data-theme='monstres'][data-cases] .case {
  --oeil-g: calc(50% - 0.32em);
  --oeil-d: calc(50% + 0.32em);
  --oeil-y: 0.55em;
  padding-top: 0.45em;
  border-radius: 42% 42% 36% 36%;
  color: var(--t-case-texte);
  background:
    radial-gradient(0.17em 0.06em at var(--oeil-g) var(--oeil-y), #9d90b0 0 92%, transparent 100%),
    radial-gradient(0.17em 0.06em at var(--oeil-d) var(--oeil-y), #9d90b0 0 92%, transparent 100%),
    var(--t-case-fond) !important;
  box-shadow: inset 0 -3px 0 rgba(90, 60, 130, 0.14);
  transition: border-radius 0.25s, transform 0.15s;
}
/* tracées : les yeux s'ouvrent, et chaque chemin a sa forme et son motif (en plus du symbole) */
[data-theme='monstres'][data-cases] .case.tracee {
  background:
    radial-gradient(circle at var(--oeil-g) var(--oeil-y), #1b1b1b 0 0.075em, #fff 0.085em 0.17em, rgba(0, 0, 0, 0.25) 0.18em 0.2em, transparent 0.21em),
    radial-gradient(circle at var(--oeil-d) var(--oeil-y), #1b1b1b 0 0.075em, #fff 0.085em 0.17em, rgba(0, 0, 0, 0.25) 0.18em 0.2em, transparent 0.21em),
    var(--motif-fond, linear-gradient(transparent, transparent)),
    var(--teinte) !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 8px rgba(60, 30, 90, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme='monstres'][data-cases] .case.texte-fonce { text-shadow: none; }
[data-theme='monstres'][data-cases] .case[data-motif='0'] { border-radius: 50%; --motif-fond: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 0.08em, transparent 0.1em) 0 0 / 0.45em 0.45em; }
[data-theme='monstres'][data-cases] .case[data-motif='1'] { border-radius: 26%; --motif-fond: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 0.09em, transparent 0.09em 0.26em); }
[data-theme='monstres'][data-cases] .case[data-motif='2'] { border-radius: 14%; --motif-fond: conic-gradient(rgba(255, 255, 255, 0.15) 25%, transparent 0 50%, rgba(255, 255, 255, 0.15) 0 75%, transparent 0) 0 0 / 0.5em 0.5em; }
[data-theme='monstres'][data-cases] .case[data-motif='3'] { border-radius: 50% 14%; --motif-fond: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.16) 0 0.07em, transparent 0.07em 0.3em); }
[data-theme='monstres'][data-cases] .case[data-motif='4'] { border-radius: 38%; --motif-fond: radial-gradient(circle at 50% 100%, transparent 0.11em, rgba(255, 255, 255, 0.2) 0.12em 0.16em, transparent 0.17em) 0 0 / 0.4em 0.3em; }
[data-theme='monstres'][data-cases] .case[data-motif='x'] { border-radius: 40%; }
/* départs et arrivées : les nids, sans yeux (le badge y est), cerclés de la couleur du chemin */
[data-theme='monstres'][data-cases] .case.depart,
[data-theme='monstres'][data-cases] .case.arrivee { padding-top: 0.2em; box-shadow: inset 0 0 0 3px var(--bord), inset 0 -4px 0 rgba(90, 60, 130, 0.14); }
[data-theme='monstres'][data-cases] .case.depart:not(.tracee),
[data-theme='monstres'][data-cases] .case.arrivee:not(.tracee) { background: var(--t-case-fond) !important; }
[data-theme='monstres'][data-cases] .case.depart.tracee,
[data-theme='monstres'][data-cases] .case.arrivee.tracee { background: var(--motif-fond, linear-gradient(transparent, transparent)), var(--teinte) !important; }
[data-theme='monstres'][data-cases] .badge { z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
/* symboles des chemins rentrés dans le corps du monstre (sinon ils débordent des formes rondes) */
[data-theme='monstres'][data-cases] .marque.m2 { bottom: 9%; right: 12%; }
[data-theme='monstres'][data-cases] .marque.m1 { top: auto; bottom: 9%; left: 12%; }

/* tête du chemin : le monstre ouvre la bouche et sautille */
[data-theme='monstres'][data-cases] .case.tete { outline-color: #2e2440; animation: theme-sautille 1.2s ease-in-out infinite; z-index: 3; }
[data-theme='monstres'][data-cases] .case.tete::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.16em;
  width: 0.5em;
  height: 0.22em;
  margin-left: -0.25em;
  border-radius: 0 0 0.5em 0.5em;
  background: #3a1020;
}
@keyframes theme-sautille { 50% { transform: translateY(-3px) scale(1.06); } }
[data-theme='monstres'][data-cases] .case.secousse { animation: secousse 0.35s, theme-alerte-monstre 0.35s; }
@keyframes theme-alerte-monstre { 20%, 40% { box-shadow: inset 0 0 0 3px #d50000; } }

/* cube : le monstre-cube, tout en fourrure violette */
[data-theme='monstres'] .face {
  border-radius: 14px;
  background:
    repeating-conic-gradient(from 0deg at 30% 40%, rgba(255, 255, 255, 0.06) 0 4deg, transparent 4deg 12deg),
    linear-gradient(160deg, #a77dd3, #7d4fae);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
[data-theme='monstres'] .scene { background: radial-gradient(ellipse 45% 40% at 50% 55%, rgba(204, 121, 167, 0.18), transparent 70%); }
[data-theme='monstres'] .mini { border-color: #d9c5ee; border-radius: 10px; }
[data-theme='monstres'] .mini.devant { border-color: #5b2f7a; background: #f3e6ff; }

/* pixel art : cadre à pois ; dessins inchangés */
[data-theme='monstres'][data-page='pixel'] .plateau { background: #d9c5ee; }
[data-theme='monstres'] .pinceau { border-color: #d9c5ee; border-radius: 99px; }
[data-theme='monstres'] .pinceau.choisi { border-color: #5b2f7a; box-shadow: 0 0 0 2px #5b2f7a; }

/* victoire */
[data-theme='monstres'] .victoire {
  color: #2e2440;
  border-radius: 28px;
  background:
    radial-gradient(circle at 14% 7%, #F0E442 0 4px, transparent 5px),
    radial-gradient(circle at 88% 9%, #56B4E9 0 5px, transparent 6px),
    radial-gradient(circle at 80% 17%, #CC79A7 0 4px, transparent 5px),
    radial-gradient(circle at 22% 16%, #009E73 0 5px, transparent 6px),
    #fff;
  box-shadow: 0 0 0 4px #d9c5ee, 0 10px 30px rgba(60, 30, 90, 0.3);
}
[data-theme='monstres'] .victoire h2 { color: #5b2f7a; }

/* =====================================================================
   Petits écrans
   ===================================================================== */

@media (max-width: 700px) {
  .heros-theme { min-height: 150px; margin-top: 12px; border-radius: 20px; }
  .heros-titre { font-size: 1.35rem; }
  .heros-texte { padding: 12px 14px; }
  .heros-texte small { font-size: 0.85rem; }
  .heros-mascotte { padding: 10px 12px 12px; }
  .heros-mascotte img { width: 76px; height: 76px; border-width: 4px; }
  .bulle-heros { font-size: 0.78rem; white-space: normal; max-width: 120px; text-align: center; }
  .illustration.dessin-theme svg { width: 96px; height: 96px; }
  :root:not([data-theme='classique']) .tuile[data-jeu] { grid-template-areas: 'ill nom' 'ill lieu' 'ill infos'; }
  .tuile .lieu-theme { grid-area: lieu; margin-top: 0; font-size: 0.82rem; }
  :root:not([data-theme='classique']) .victoire::before { width: 68px; height: 68px; margin-bottom: 4px; }
  .mascotte-theme img { width: 60px; height: 60px; border-width: 3px; box-shadow: 0 0 0 3px var(--t-anneau), 0 4px 10px rgba(0, 0, 0, 0.25); }
  .bulle-mascotte { font-size: 0.82rem; }
  .annonce-theme { top: 56px; gap: 8px; padding: 6px 8px; font-size: 0.9rem; }
  .annonce-image { display: none; }
  .annonce-actions .essayer { padding: 6px 12px; }
}
@media (max-width: 600px) {
  .tete-menu .bouton-themes { min-width: 44px; padding: 6px 10px; font-size: 1.2rem; }
  /* mot masqué à l'écran, gardé pour les lecteurs d'écran */
  .bouton-themes .mot-themes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 420px) {
  .liste-themes { grid-template-columns: 1fr; }
  .apercu-theme { height: 80px; }
}

/* =====================================================================
   Mouvements réduits : ni rebond, ni rotation, ni pulsation ; seulement des fondus
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mascotte-theme img,
  .heros-mascotte img,
  :root:not([data-theme='classique']) .victoire::before,
  [data-cases] .case.tete,
  [data-cases] .case.tete::after,
  [data-cases] .attente .case.depart,
  [data-theme='etang'][data-cases] .case.indice::before { animation: none !important; }
  [data-theme='etang'][data-cases] .case.indice::before { box-shadow: 0 0 0 5px #f5c400; }
  [data-theme='etang'][data-cases] .case.secousse::before { animation: theme-fondu-rouge 0.35s; }
  [data-theme='mine'][data-cases] .case.secousse,
  [data-theme='monstres'][data-cases] .case.secousse { animation: theme-alerte 0.35s; }
  .bulle-mascotte.nouvelle { animation: fondu 0.3s ease-out; }
  .annonce-theme { animation: theme-fondu 0.3s ease-out both; transform: translateX(-50%); }
  [data-theme='monstres'][data-cases] .case { transition: none; }
}
@keyframes theme-fondu-rouge { 0%, 60% { box-shadow: 0 0 0 4px #d50000; } }
@keyframes theme-fondu { from { opacity: 0; } to { opacity: 1; } }