/* themes-v1 : trois thèmes de plus dans le système de modes — Clair, Bleuté, Sous l'eau.
   Chargé dans <head> (avant le premier dessin) : aucune image d'un autre thème ne passe à l'écran.
   Le mode est posé par appliqueSaison() : html[data-saison="clair|bleute|sousleau"] + html.theme-<clé>.
   Variables communes (à utiliser dans tout nouveau HTML) : --th-fond, --th-carte, --th-bord, --th-texte,
   --th-gris, --th-accent, --th-sur-accent, --th-titre — elles existent dans TOUS les modes. */

:root{--th-fond:var(--brume);--th-carte:var(--voile);--th-bord:var(--trait);--th-texte:var(--encre);--th-gris:var(--encre-douce);--th-accent:var(--sauge-profond);--th-sur-accent:var(--brume);--th-titre:var(--encre)}
html[data-saison="presence"]{--th-fond:#1B122F;--th-carte:#241938;--th-bord:#3A2C55;--th-texte:#F2E9E4;--th-gris:#B9AEA9;--th-accent:#3DF5E6;--th-sur-accent:#1B122F;--th-titre:#E64DFF}

/* ---------- les palettes (plus spécifiques que [data-theme="nuit"][data-saison] : le fond ne change jamais) ---------- */
html[data-saison="clair"],html[data-saison="clair"][data-theme]{
  --brume:#FFFFFF;--voile:#FFFFFF;--ciel:#0B7A72;--ciel-clair:#C6F7F0;--sauge:#2EC4B6;--sauge-profond:#0B7A72;
  --encre:#1B122F;--encre-douce:#5C5468;--trait:#E8E4EE;--nav-fond:#FFFFFF;--message-fond:#FFFFFF;
  --parchemin:#FFFFFF;--parchemin-bord:#E8E4EE;--parchemin-fil:#FFFFFF;
  --th-fond:#FFFFFF;--th-carte:#FFFFFF;--th-bord:#E8E4EE;--th-texte:#1B122F;--th-gris:#5C5468;--th-accent:#0B7A72;--th-sur-accent:#FFFFFF;--th-titre:#1B122F}
html[data-saison="bleute"],html[data-saison="bleute"][data-theme]{
  --brume:#0E1A33;--voile:#17274A;--ciel:#4DE3F0;--ciel-clair:#8FB4FF;--sauge:#4DE3F0;--sauge-profond:#4DE3F0;
  --encre:#EAF0FA;--encre-douce:#9FB0CC;--trait:#2A3C63;--nav-fond:#0E1A33;--message-fond:#17274A;
  --parchemin:#17274A;--parchemin-bord:#2A3C63;--parchemin-fil:#1C2B52;
  --th-fond:#0E1A33;--th-carte:#17274A;--th-bord:#2A3C63;--th-texte:#EAF0FA;--th-gris:#9FB0CC;--th-accent:#4DE3F0;--th-sur-accent:#0E1A33;--th-titre:#8FB4FF}
html[data-saison="sousleau"],html[data-saison="sousleau"][data-theme]{
  --brume:#0C3A4D;--voile:#0B3550;--ciel:#5CE8D8;--ciel-clair:#9FD6E0;--sauge:#5CE8D8;--sauge-profond:#5CE8D8;
  --encre:#EAF6FA;--encre-douce:#A9CFDD;--trait:rgba(140,220,230,.22);--nav-fond:rgba(5,30,45,.97);--message-fond:rgba(8,44,66,.82);
  --parchemin:#0B3550;--parchemin-bord:rgba(140,220,230,.3);--parchemin-fil:#0E3D5A;
  --th-fond:#0C3A4D;--th-carte:rgba(8,44,66,.82);--th-bord:rgba(140,220,230,.22);--th-texte:#EAF6FA;--th-gris:#A9CFDD;--th-accent:#5CE8D8;--th-sur-accent:#063247;--th-titre:#BFF3EE}

/* ---------- fond : uni, fixe, ne bouge pas ---------- */
html[data-saison="clair"] body{isolation:isolate;background:#FFFFFF;color:#1B122F}
html[data-saison="bleute"] body{isolation:isolate;background:#0E1A33;color:#EAF0FA}
html[data-saison="sousleau"] body{isolation:isolate;background:#1E4F60;color:#EAF6FA}

/* ---------- cartes, barre du bas, titres : sans aucune ombre ---------- */
html[data-saison="clair"] .carte{background:#FFFFFF;border:1px solid #E8E4EE;box-shadow:none}
html[data-saison="bleute"] .carte{background:#17274A;border:1px solid #2A3C63;box-shadow:none}
html[data-saison="sousleau"] .carte{background:rgba(8,44,66,.82);border:1px solid rgba(140,220,230,.22);box-shadow:none}
html[data-saison="clair"] .carte.message{border-color:#BFE9E4}
html[data-saison="bleute"] .carte.message{border-color:rgba(77,227,240,.4)}
html[data-saison="sousleau"] .carte.message{border-color:rgba(92,232,216,.42)}
html[data-saison="clair"] .nav{background:#FFFFFF;border-top:1px solid #E8E4EE;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html[data-saison="bleute"] .nav{background:#0E1A33;border-top:1px solid #2A3C63;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html[data-saison="sousleau"] .nav{background:rgba(5,30,45,.97);border-top:1px solid rgba(140,220,230,.22);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html[data-saison="clair"] .nav button{color:#5C5468}
html[data-saison="bleute"] .nav button{color:#9FB0CC}
html[data-saison="sousleau"] .nav button{color:#A9CFDD}
html[data-saison="clair"] .nav button[aria-current="page"]{color:#0B7A72}
html[data-saison="bleute"] .nav button[aria-current="page"]{color:#4DE3F0}
html[data-saison="sousleau"] .nav button[aria-current="page"]{color:#5CE8D8}
html[data-saison="clair"] h2{color:#1B122F}
html[data-saison="bleute"] h2{color:#8FB4FF}
html[data-saison="sousleau"] h2{color:#BFF3EE}
html[data-saison="clair"] #anneau{stroke:#0B7A72}
html[data-saison="bleute"] #anneau{stroke:#4DE3F0}
html[data-saison="sousleau"] #anneau{stroke:#5CE8D8}
html[data-saison="clair"] .champ input,html[data-saison="clair"] .porte input{background:#FFFFFF;color:#1B122F;border-color:#E8E4EE}
html[data-saison="bleute"] .champ input,html[data-saison="bleute"] .porte input,html[data-saison="sousleau"] .champ input,html[data-saison="sousleau"] .porte input{background:var(--voile);color:var(--encre)}
html[data-saison="clair"] .action:not(.petite){background:#0B7A72;color:#FFFFFF}
html[data-saison="bleute"] .action:not(.petite){background:#4DE3F0;color:#0E1A33}
html[data-saison="sousleau"] .action:not(.petite){background:#5CE8D8;color:#063247}
/* aucune ombre portée (règle de David) — les anneaux de sélection restent */
html.theme-clair .carte,html.theme-clair .action,html.theme-clair .palettes button,html.theme-clair .annonce-saison,html.theme-clair .repli,html.theme-clair .entree,html.theme-clair .acs-b,html.theme-clair .tuile,html.theme-clair .tuile-e,
html.theme-bleute .carte,html.theme-bleute .action,html.theme-bleute .palettes button,html.theme-bleute .annonce-saison,html.theme-bleute .repli,html.theme-bleute .entree,html.theme-bleute .acs-b,html.theme-bleute .tuile,html.theme-bleute .tuile-e,
html.theme-sousleau .carte,html.theme-sousleau .action,html.theme-sousleau .palettes button,html.theme-sousleau .annonce-saison,html.theme-sousleau .repli,html.theme-sousleau .entree,html.theme-sousleau .acs-b,html.theme-sousleau .tuile,html.theme-sousleau .tuile-e,
html.theme-clair .lecteur-inner,html.theme-bleute .lecteur-inner,html.theme-sousleau .lecteur-inner,html.theme-clair .installer .icone-app img,html.theme-bleute .installer .icone-app img,html.theme-sousleau .installer .icone-app img{box-shadow:none !important}
html.theme-clair .marque,html.theme-clair .salut,html.theme-bleute .marque,html.theme-bleute .salut,html.theme-sousleau .marque,html.theme-sousleau .salut,
html.theme-clair h1,html.theme-bleute h1,html.theme-sousleau h1,html.theme-clair h2,html.theme-bleute h2,html.theme-sousleau h2{text-shadow:none}

/* ---------- l'en-tête du haut (marque, salut, bouton lune) ---------- */
html[data-saison="clair"] .entete{color:#1B122F}
html[data-saison="bleute"] .entete{color:#EAF0FA}
html[data-saison="sousleau"] .entete{color:#063247}
html[data-saison="clair"] .bascule{background:#FFFFFF;color:#1B122F;border:1px solid #E8E4EE;box-shadow:none;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-saison="bleute"] .bascule{background:#17274A;color:#EAF0FA;border:1px solid #2A3C63;box-shadow:none;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-saison="sousleau"] .bascule{background:rgba(255,255,255,.35);color:#063247;border:1px solid rgba(255,255,255,.5);box-shadow:none;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-saison="clair"] .bascule,html[data-saison="bleute"] .bascule,html[data-saison="sousleau"] .bascule{width:44px;height:44px}

/* ---------- le bandeau du haut : pas de paysage chargé ---------- */
html[data-saison="clair"] .paysage[data-decor],html[data-saison="bleute"] .paysage[data-decor]{height:124px;background:none;border-radius:0;overflow:visible;margin-bottom:10px}
html[data-saison="sousleau"] .paysage[data-decor]{height:170px;background:none;border-radius:0;overflow:visible;margin-bottom:12px}
html[data-saison="clair"] .paysage[data-decor] svg,html[data-saison="bleute"] .paysage[data-decor] svg,html[data-saison="sousleau"] .paysage[data-decor] svg{display:none}
html[data-saison="clair"] .paysage[data-decor]::before,html[data-saison="bleute"] .paysage[data-decor]::before,html[data-saison="sousleau"] .paysage[data-decor]::before,
html[data-saison="clair"] .paysage[data-decor]::after,html[data-saison="bleute"] .paysage[data-decor]::after,html[data-saison="sousleau"] .paysage[data-decor]::after{display:none !important}
html[data-saison="clair"] .paysage[data-decor] h1,html[data-saison="clair"] .paysage[data-decor] .etape,
html[data-saison="bleute"] .paysage[data-decor] h1,html[data-saison="bleute"] .paysage[data-decor] .etape,
html[data-saison="sousleau"] .paysage[data-decor] h1,html[data-saison="sousleau"] .paysage[data-decor] .etape{display:none}
html[data-saison="clair"] .paysage[data-decor] .titre,html[data-saison="bleute"] .paysage[data-decor] .titre{bottom:8px}
html[data-saison="sousleau"] .paysage[data-decor] .titre{bottom:6px}
html[data-saison="clair"] .paysage .citation-mode{color:#5C5468;background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:.95rem}
html[data-saison="bleute"] .paysage .citation-mode{color:#9FB0CC;background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:.95rem}
html[data-saison="sousleau"] .paysage .citation-mode{color:#063247;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:none;backdrop-filter:none;font-size:.95rem}

/* ---------- Sous l'eau : le décor de fond fixe (étang du jeu « L'étang ») ---------- */
.th-eau{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none;contain:strict}
html[data-saison="sousleau"] .th-eau{display:block}
.th-eau>*{position:absolute}
.th-eau-fond{inset:0;background:linear-gradient(180deg,#9FD6E0 0,#7EC3D3 calc(env(safe-area-inset-top) + 112px),#4D97AA calc(env(safe-area-inset-top) + 200px),#367C90 38%,#2C6B7E 70%,#1E4F60 100%)}
.th-rayon{top:-40px;height:62vh;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));opacity:.12;transform-origin:top center;animation:th-rayon var(--d) ease-in-out var(--r) infinite}
@keyframes th-rayon{0%,100%{opacity:.08}50%{opacity:.15}}
.th-surface{left:0;right:0;top:calc(env(safe-area-inset-top) + 112px);height:2px;background:rgba(255,255,255,.55)}
.th-surface2{left:0;right:0;top:calc(env(safe-area-inset-top) + 114px);height:26px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0))}
.th-nenuphar,.th-fleur,.th-grenouille{top:calc(env(safe-area-inset-top) + var(--y))}
.th-nenuphar svg,.th-fleur svg,.th-grenouille svg{display:block}
.th-grenouille{animation:th-surface 4s ease-in-out infinite}
@keyframes th-surface{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.th-reflet{border-radius:50%;background:rgba(255,255,255,.06)}
.th-algue{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) - 4px);width:18px;transform-origin:bottom center;animation:th-ondule 6s ease-in-out var(--r) infinite alternate}
.th-algue svg{display:block;width:18px;height:100%}
@keyframes th-ondule{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.th-fondvase{left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) - 10px);height:70px;background:linear-gradient(180deg,rgba(8,40,60,0),#0A3A4D)}
.th-sable{left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) - 6px);height:28px;background:#1F6A6C;border-radius:50% 50% 0 0/100% 100% 0 0;opacity:.8}
.th-galet{border-radius:50%;background:rgba(20,60,70,.45);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--b))}
/* les poissons : la tête devant, toujours (le dessin regarde à gauche ; scaleX(-1) quand il va vers la droite) */
.th-poisson{left:0;top:var(--y);width:92px;height:34px;transform:translateX(var(--x0)) scaleX(var(--s0)) scale(var(--t));animation:var(--sens) var(--d) linear var(--r) infinite}
.th-poisson svg{display:block;animation:th-flotte 5s ease-in-out infinite}
.th-poisson .th-queue{transform-origin:64px 17px;animation:th-bat 1.6s ease-in-out infinite}
@keyframes th-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes th-bat{0%,100%{transform:skewY(-6deg)}50%{transform:skewY(6deg)}}
@keyframes th-nageD{0%{transform:translateX(-110px) scaleX(-1) scale(var(--t))}48%{transform:translateX(calc(100vw + 20px)) scaleX(-1) scale(var(--t))}50%{transform:translateX(calc(100vw + 20px)) scaleX(1) scale(var(--t))}98%{transform:translateX(-110px) scaleX(1) scale(var(--t))}100%{transform:translateX(-110px) scaleX(-1) scale(var(--t))}}
@keyframes th-nageG{0%{transform:translateX(calc(100vw + 20px)) scaleX(1) scale(var(--t))}48%{transform:translateX(-110px) scaleX(1) scale(var(--t))}50%{transform:translateX(-110px) scaleX(-1) scale(var(--t))}98%{transform:translateX(calc(100vw + 20px)) scaleX(-1) scale(var(--t))}100%{transform:translateX(calc(100vw + 20px)) scaleX(1) scale(var(--t))}}
.th-bulle{bottom:-20px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);opacity:0;animation:th-monte var(--d) linear var(--r) infinite}
@keyframes th-monte{0%{transform:translateY(0);opacity:0}10%{opacity:.8}100%{transform:translateY(-105vh);opacity:0}}
/* la tortue (dessin fourni par window.tortueSvg) : elle regarde à droite */
.th-tortue{left:0;top:64vh;transform:translateX(18vw);animation:th-tortueNage 150s linear -40s infinite}
.th-tortue>svg{display:block;animation:th-flotteT 6s ease-in-out infinite}
@keyframes th-tortueNage{0%{transform:translateX(-170px) scaleX(1)}46%{transform:translateX(calc(100vw + 10px)) scaleX(1)}50%{transform:translateX(calc(100vw + 10px)) scaleX(-1)}96%{transform:translateX(-170px) scaleX(-1)}100%{transform:translateX(-170px) scaleX(1)}}
@keyframes th-flotteT{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){.th-eau *,.th-eau{animation:none !important}.th-bulle{opacity:.5}}

/* ---------- Moi › Ambiance : le choix du thème, avec un petit aperçu ---------- */
.th-choix{margin:6px 0 12px}
.th-choix-titre{margin:0 0 8px;font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.th-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
button.th-carte{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:6px 2px 8px;min-height:44px;width:auto;height:auto;border-radius:16px;border:1px solid var(--trait);background:none;color:var(--encre);font:inherit;font-size:13px;font-weight:600;line-height:1.15;text-align:center;cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
button.th-carte[aria-pressed="true"]{border:2px solid var(--sauge-profond);padding:5px 1px 7px}
.th-apercu{position:relative;display:block;width:100%;max-width:62px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:1px solid rgba(128,128,140,.35)}
.th-apercu i{position:absolute;display:block}
.th-apercu .c1{left:16%;right:16%;top:34%;height:20%;border-radius:5px}
.th-apercu .c2{left:16%;right:16%;top:60%;height:20%;border-radius:5px}
.th-apercu .ac{left:16%;top:14%;width:22%;aspect-ratio:1;border-radius:50%}
.th-apercu .tx{left:44%;right:16%;top:18%;height:7%;border-radius:3px}
@media (max-width:359px){.th-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}