/* ============================================================
   hub.css — L'ÉCRAN DU JEU (index.html, onglet ⚔️ Jouer).
   Un seul écran, à la hauteur du téléphone : rien ne défile, sauf l'intérieur d'un panneau.
   En haut : toi (niveau, anneau d'XP), tes pièces, les réglages.
   Au centre : le titre, discret, et PLONGER (l'action principale). Dessous : trois grandes portes, Classement · Coffres · Mini-jeux.
   En bas, une ligne secondaire discrète : le Bestiaire et le poème du jour (l'autre dimension, calme).
   Octave et Mousse vivent dans la bande libre de la scène, entre le titre et Plonger (data-mascottes-zone).
   Derrière : la scène sous-marine (accueil-scene.js) et, pendant l'événement, Nacre (ocean-portail.js).
   Les panneaux montent du bas, au-dessus de la barre de navigation, qui reste toujours là.
   ============================================================ */
html:has(body.hub-page), body.hub-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.hub-page { padding-bottom: 0 !important; background: #070b26; }
body.hub-page .hub-entete { display: none !important; }
body.hub-page .aller-contenu:not(:focus) { position: absolute; left: -9999px; }

/* ---------- l'écran ---------- */
#hub {
  --hub-bas: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px));
  --coin: 62px;                       /* la place d'Octave (à gauche) et de Mousse (à droite), en bas */
  position: fixed; left: 0; right: 0; top: 0; bottom: var(--hub-bas);
  z-index: auto; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto auto auto auto;
  justify-items: center; align-content: stretch; gap: 0;
  width: auto; max-width: none; min-height: 0; margin: 0;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) clamp(8px, 1.6dvh, 16px) max(14px, env(safe-area-inset-left, 0px));
  overflow: hidden; text-align: center; color: #f0faff; background: #070b26;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#hub > * { min-width: 0; }
/* la scène occupe tout l'écran (et s'efface à peine en haut, sous les compteurs) */
#hub .ac-scene { inset: 0; left: 0; width: 100%; height: 100%; transform: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, #000 9%, #000 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, #000 9%, #000 100%); }
#hub .ac-scene::before { top: 12%; height: 42%; }
html.ocean-portail #hub::before { top: 0; }
html.ocean-portail #hub .oc-p-cv { top: 0; height: 100%; }
/* un voile très doux en bas : les portes et le poème restent lisibles sur les nuages */
#hub::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 30, 0), rgba(5, 8, 30, .5) 55%, rgba(5, 8, 30, .78)); }
#hub .oc-p-passer { display: none; }   /* (les deux phrases de l'Océan passent sous le titre : rien à passer) */

/* ---------- en haut : toi, tes pièces, les réglages ---------- */
.hub-page .hub-hud { position: relative; z-index: 2; display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 54px; }
.hub-page .hub-moi { display: flex; align-items: center; gap: .55rem; min-width: 0; min-height: 50px; padding: 2px .35rem 2px 2px; border-radius: 999px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.hub-page .hub-moi:active { transform: scale(.95); }
.hub-page .hub-av { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.hub-page .hub-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hub-page .hub-anneau circle { fill: none; stroke-width: 3.6; }
.hub-page .hub-anneau .fond { stroke: rgba(169, 180, 255, .2); }
.hub-page .hub-anneau .xp { stroke: #ff9ec4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 120, 170, .8)); transition: stroke-dasharray .9s cubic-bezier(.3, .9, .3, 1); }
.hub-page .hub-av-in { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #378ba0, #193c46); }
.hub-page .hub-av-in .cpt-av { --t: 42px; }
.hub-page .hub-niv { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); min-width: 24px; height: 19px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #ffb3cd, #d84a7e); color: #fff; font: 800 .74rem/19px var(--f-ui); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px #0a0d2a; }
.hub-page .hub-moi-txt { display: grid; min-width: 0; text-align: left; line-height: 1.1; }
.hub-page .hub-moi-txt b { font: 400 1.12rem/1.1 var(--f-titre); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.hub-page .hub-moi-txt em { font: 600 .75rem/1.3 var(--f-ui); font-style: normal; color: #b9c3ef; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-page .hub-rang { display: block; font: 800 .68rem/1.35 var(--f-ui); color: #ffe39a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.hub-page .hub-rang[hidden] { display: none; }
.hub-page .hub-hud-d { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }
.hub-page .hub-pieces { position: relative; display: inline-flex; align-items: center; gap: .4rem; height: 44px; padding: 0 .9rem 0 .45rem; border-radius: 999px; border: 1px solid rgba(255, 207, 92, .38); background: rgba(8, 12, 40, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #ffe9a0; text-decoration: none; font: 800 1rem/1 var(--f-ui); font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.hub-page .hub-pieces:active { transform: scale(.94); }
.hub-page .hub-piece { display: grid; place-items: center; width: 26px; height: 26px; font-size: 1.2rem; }
.hub-page .hub-pieces.gain { animation: hub-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
/* 3.1 — les pièces mènent à la boutique : la même petite échoppe que l'onglet « Boutique » du Trésor, dans la même pastille
   (aucun bouton de plus sur l'écran du jeu : une seule cible de 44 px, un trait fin la sépare du compteur) */
.hub-page .hub-boutique { display: grid; place-items: center; width: 24px; height: 24px; margin-left: .05rem; padding-left: .45rem; border-left: 1px solid rgba(255, 207, 92, .3); box-sizing: content-box; }
.hub-page .hub-boutique svg { width: 22px; height: 22px; display: block; }
@keyframes hub-pop { 40% { transform: scale(1.14); } }
.hub-page .hub-rond { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(169, 180, 255, .3); background: rgba(8, 12, 40, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #dfe6ff; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.hub-page .hub-rond:active { transform: scale(.9) rotate(30deg); }
.hub-page .hub-rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ---------- le titre, discret ---------- */
.hub-page .hub-tete { position: relative; z-index: 1; align-self: start; display: grid; justify-items: center; gap: clamp(.15rem, .9dvh, .55rem); width: 100%; padding: clamp(.2rem, 1.4dvh, 1.2rem) 0; }
.hub-page .hub-tete .sur { margin: 0; max-width: 22rem; font: 800 .75rem/1.35 var(--f-ui); letter-spacing: .13em; text-wrap: balance;   /* 3.1 : 12 px au moins (lisibilité) ; deux lignes équilibrées si besoin */ text-transform: uppercase; color: #ffa9c6; }
.hub-page #hub .nom { margin: 0; font: 400 clamp(2.05rem, 6.2dvh, 3.3rem)/1 var(--f-titre); letter-spacing: -.005em; white-space: nowrap; }
.hub-page #hub .nom .ligne { display: inline-block; }
.hub-page #hub .nom .ligne + .ligne { margin-left: .26em; }
.hub-page .hub-devise { position: relative; width: min(100%, 21rem); min-height: 2.7em; font: italic 400 clamp(.98rem, 2.3dvh, 1.14rem)/1.35 var(--f-vers); }
.hub-page #hub .devise { margin: 0; font: inherit; }
html.ocean-portail .hub-page #hub .devise { visibility: hidden; }
.hub-page #hub .hub-devise .oc-p-msg { position: absolute; inset: 0; width: auto; min-height: 0; margin: 0; font: inherit; color: #dfe6ff; text-shadow: 0 1px 14px rgba(4, 8, 30, .9); }
.hub-page .hub-ev { position: relative; display: inline-flex; align-items: center; gap: .4rem; height: 44px; padding: 0 .6rem 0 .75rem; margin-bottom: .1rem; border-radius: 999px; border: 1px solid rgba(160, 190, 255, .4); background: rgba(10, 20, 60, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #dfe9ff; font: 800 .75rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 22px -6px rgba(110, 160, 255, .75); -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.hub-page .hub-ev::after { content: ""; position: absolute; inset: -4px -2px; }   /* (une zone de toucher plus grande) */
.hub-page .hub-ev:active { transform: scale(.95); border-color: rgba(190, 215, 255, .85); background: rgba(40, 60, 130, .75); }   /* 3.1 : le toucher se voit (même en mouvements réduits) */
.hub-page .hub-ev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hub-page .hub-ev > span:first-child { font-size: 1rem; letter-spacing: 0; }
.hub-page .goutte-entree { display: none !important; }

/* ---------- PLONGER ---------- */
.hub-page .hub-coeur { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3rem; width: 100%; }
.hub-page .hub-plonger { position: relative; isolation: isolate; display: flex; align-items: center; gap: .7rem; width: min(100%, 23rem); min-height: clamp(76px, 10.8dvh, 94px); padding: .55rem .95rem .55rem .65rem; border-radius: 999px; color: #fff; text-decoration: none; text-align: left;
  background: radial-gradient(120% 170% at 26% 0%, #86ddff 0%, #42a5cc 30%, #1d6684 64%, #0e394a 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 170, 210, .6), 0 0 0 7px rgba(110, 211, 255, .13), 0 20px 44px -14px rgba(90, 198, 255, .95), inset 0 2px 0 rgba(255, 255, 255, .32), inset 0 -12px 24px rgba(0, 26, 46, .5);
  -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), filter .2s; }
.hub-page .hub-plonger::before { content: ""; position: absolute; z-index: -1; inset: -9px; border-radius: inherit; border: 2px solid rgba(255, 158, 196, .5); opacity: 0; animation: hub-onde 3s ease-out infinite; pointer-events: none; }
.hub-page .hub-plonger::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; animation: hub-reflet 5.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes hub-onde { 0% { opacity: .75; transform: scale(.97); } 70%, 100% { opacity: 0; transform: scale(1.07, 1.16); } }
@keyframes hub-reflet { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
.hub-page .hub-plonger:active { transform: scale(.955); filter: brightness(1.15) saturate(1.1); }
.hub-page .hub-plonger:focus-visible { outline: 3px solid #ffd1e2; outline-offset: 4px; }
.hub-page .hp-goutte { flex: none; display: grid; place-items: center; width: clamp(48px, 7dvh, 60px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.hub-page .hp-goutte svg { width: 52%; height: auto; overflow: visible; filter: drop-shadow(0 0 9px rgba(255, 111, 156, .85)); animation: hub-goutte 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes hub-goutte { 0%, 100% { transform: translateY(-1px) scale(1); } 55% { transform: translateY(3px) scale(.93, 1.07); } }
.hub-page .hp-mots { display: grid; flex: 1; min-width: 0; line-height: 1; }
.hub-page .hp-mots b { font: 400 clamp(1.75rem, 4.6dvh, 2.3rem)/1 var(--f-titre); letter-spacing: .01em; text-shadow: 0 2px 16px rgba(0, 30, 60, .7); }
.hub-page .hp-mots small { margin-top: .3rem; font: 700 clamp(.78rem, 1.85dvh, .86rem)/1.2 var(--f-ui); color: #ffd6e6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-page .hp-fl { flex: none; width: 24px; height: 24px; margin-left: -.2rem; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.hub-page .hub-jeu { margin: 0; min-height: 1.1em; font: 700 .72rem/1.1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #a9b6ea; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

/* ---------- dessous : trois grandes portes ---------- */
.hub-page .hub-portes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; width: min(100%, 22rem); margin-top: clamp(.35rem, 2dvh, 1.3rem); }
.hub-page .hub-porte { --m: clamp(62px, 9.4dvh, 80px); position: relative; display: grid; justify-items: center; align-content: start; gap: .32rem; padding: .15rem 0; color: #eef0ff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hub-page .hub-med { position: relative; display: grid; place-items: center; width: var(--m); height: var(--m); border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .17), rgba(255, 255, 255, .03) 62%), radial-gradient(circle at 50% 108%, var(--halo) 0%, transparent 72%), rgba(12, 16, 50, .66);
  box-shadow: inset 0 0 0 1px rgba(200, 210, 255, .24), inset 0 -6px 14px rgba(0, 17, 20, .35), 0 12px 24px -14px rgba(0, 0, 0, .9), 0 0 26px -10px var(--halo);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.hub-page .hub-med svg { width: 76%; height: 76%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.hub-page .hub-porte:active .hub-med { transform: scale(.88) rotate(-5deg); box-shadow: inset 0 0 0 1.5px rgba(255, 220, 240, .5), 0 0 30px -4px var(--halo); }
.hub-page .hub-porte:focus-visible { outline: none; }
.hub-page .hub-porte:focus-visible .hub-med { outline: 3px solid #ffd1e2; outline-offset: 3px; }
.hub-page .hub-lib { font: 700 clamp(.74rem, 1.8dvh, .86rem)/1.1 var(--f-ui); letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hub-page .hp-classement { --halo: rgba(255, 207, 92, .5); }
.hub-page .hp-coffres { --halo: rgba(255, 150, 80, .48); }
.hub-page .hp-mini { --halo: rgba(255, 111, 156, .55); }
.hub-page .hp-bestiaire { --halo: rgba(120, 140, 255, .58); }
.hub-page .hub-bdg { position: absolute; top: -2px; left: calc(50% + var(--m) / 2 - 16px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #ff7aa6, #e0346c); color: #fff; font: 800 .74rem/22px var(--f-ui); font-style: normal; box-shadow: 0 0 0 2px #0a0d2a, 0 0 12px rgba(255, 80, 130, .7); }
.hub-page .hp-coffres .hm-eclat { opacity: .9; }

/* ---------- une ligne secondaire, discrète : le Bestiaire et le poème du jour (l'autre dimension, calme) ---------- */
.hub-page .hub-second { position: relative; z-index: 1; display: flex; align-items: stretch; gap: .45rem; width: min(100%, 23rem); margin-top: clamp(.4rem, 1.8dvh, 1.1rem); }
.hub-page .hub-lien { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: 0 .8rem 0 .3rem; border-radius: 999px; border: 1px solid rgba(169, 180, 255, .24); background: rgba(12, 16, 50, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #dfe4ff; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), border-color .2s; }
.hub-page .hub-lien:active { transform: scale(.96); border-color: rgba(169, 180, 255, .5); }
.hub-page .hub-lien .hub-med { --m: 36px; width: 36px; height: 36px; box-shadow: inset 0 0 0 1px rgba(200, 210, 255, .2); }
.hub-page .hub-lien .hub-lib { font: 700 .8rem/1.1 var(--f-ui); text-shadow: none; }
.hub-page .hub-second .hub-poeme { flex: 1; width: auto; min-width: 0; min-height: 46px; margin-top: 0; padding: .25rem .6rem .25rem .3rem; gap: .5rem; border-radius: 999px; border-color: rgba(255, 169, 198, .22); background: linear-gradient(100deg, rgba(20, 39, 72, .55), rgba(14, 48, 52, .55)); }
.hub-page .hub-second .hub-plume { width: 34px; height: 34px; box-shadow: none; }
.hub-page .hub-second .hub-plume svg { width: 18px; height: 18px; }
.hub-page .hub-second .hub-poeme-txt b { font-size: .94rem; }
.hub-page .hub-second .hub-poeme-fl { width: 16px; height: 16px; }
.hub-page .hub-poeme { position: relative; z-index: 1; display: flex; align-items: center; gap: .65rem; width: min(calc(100% - 2 * var(--coin) + 28px), 23rem); min-height: 54px; margin-top: clamp(.4rem, 2dvh, 1.3rem); padding: .4rem .75rem .4rem .45rem; border-radius: 20px; border: 1px solid rgba(255, 169, 198, .3); background: linear-gradient(100deg, rgba(20, 39, 72, .78), rgba(14, 48, 52, .78)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f0faff; text-align: left; box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .95); -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), border-color .2s; }
.hub-page .hub-poeme:active { transform: scale(.97); border-color: rgba(255, 169, 198, .6); }
.hub-page .hub-plume { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffc0d6, #d8467c 72%, #8a2456); box-shadow: 0 0 16px -4px rgba(255, 110, 160, .8); }
.hub-page .hub-plume svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; }
.hub-page .hub-poeme-txt { display: grid; flex: 1; min-width: 0; line-height: 1.15; }
.hub-page .hub-poeme-txt small { font: 800 .75rem/1.35 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #ffa9c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-page .hub-poeme-txt b { font: 400 1.06rem/1.2 var(--f-titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-page .hub-poeme-fl { flex: none; width: 20px; height: 20px; fill: none; stroke: #ffa9c6; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- la place d'Octave et de Mousse : la bande libre de la scène (data-place=scene, mesurée par hub.js) et les deux coins du bas ---------- */
.hub-page .hub-places { position: absolute; inset: 0; pointer-events: none; }
.hub-page .hub-places * { pointer-events: none; }
.hub-page .hub-place { position: absolute; bottom: 0; width: var(--coin); height: 86px; }
.hub-page .hub-place[data-place="octave"] { left: 0; }
.hub-page .hub-place[data-place="mousse"] { right: 0; }

/* ---------- les panneaux (une feuille qui monte du bas, au-dessus de la barre) ---------- */
.hub-page .hub-voile { position: fixed; inset: 0; z-index: 55; background: rgba(4, 6, 22, .58); opacity: 0; transition: opacity .3s ease; }
.hub-page .hub-voile.on { opacity: 1; }
.hub-page .hub-panneau {
  --fond: #102328; --surface: #193a42; --papier: #1a373e; --encre: #ebf5f8; --brume: #abc7d0; --trait: rgba(235, 245, 248, .13); --rose: #ff7ba4; --rose-voile: rgba(255, 123, 164, .12); --sur-rose: #2a0b1c; --heure: #a3f5ff; --plume: #68c7e0;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -18px rgba(0, 0, 0, .75);
  color-scheme: dark;
  position: fixed; z-index: 56; left: 0; right: 0; bottom: var(--hub-bas, calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px)));
  width: min(100%, 40rem); margin: 0 auto;
  max-height: calc(100dvh - var(--nav-h, 64px) - env(safe-area-inset-bottom, 0px) - max(26px, env(safe-area-inset-top, 0px)) - 10px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #1a424c 0, #112c32 120px, #102328 100%); color: var(--encre);
  box-shadow: 0 -22px 54px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(190, 234, 255, .2);
  text-align: left; -webkit-user-select: text; user-select: text;
  transform: translateY(calc(100% + 90px)); visibility: hidden;
  transition: transform .36s cubic-bezier(.2, 1, .3, 1), visibility 0s linear .36s;
}
.hub-page .hub-panneau.ouvert { transform: none; visibility: visible; transition: transform .36s cubic-bezier(.2, 1, .3, 1), visibility 0s linear 0s; }
.hub-page .hp-poignee { width: 42px; height: 5px; margin: 8px auto 0; border-radius: 4px; background: rgba(235, 245, 248, .26); }
.hub-page .hp-tete { display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem .55rem 1.2rem; }
.hub-page .hp-tete h2 { flex: 1; min-width: 0; margin: 0; font: 400 1.5rem/1.15 var(--f-titre); color: #fff; }
.hub-page .hp-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--trait); background: rgba(255, 255, 255, .06); color: var(--encre); }
.hub-page .hp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hub-page .hp-x:active { transform: scale(.9); }
.hub-page .hp-corps { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(1.4rem + 8px); }
/* ce qui vivait sur l'ancienne page d'accueil, rangé dans le panneau « Lire aujourd'hui » */
.hub-page .hp-lire .bandeau { margin: 0 0 .8rem; border-radius: 14px; }
.hub-page .hp-lire .reprendre { display: flex; width: 100%; max-width: none; margin: 0 0 .9rem; animation: none; }
.hub-page .hp-lire .reprendre[hidden] { display: none; }
.hub-page .hp-lire .une { margin: 0; padding: .2rem 0 1rem; width: auto; max-width: none; }
.hub-page .hp-lire .une-tete .sur { display: none; }
.hub-page .hp-lire .ressens { padding: .6rem 0 1.2rem; }
.hub-page .hp-lire .ressens .titre-section { margin-bottom: .6rem; }
.hub-page .hp-lire .ressens h2 { font-size: 1.5rem; }
.hub-page .hp-lire [data-maree-jour] .mj { max-width: none; margin: 0 0 1.2rem; }
.hub-page .hp-lire .monde-une { margin: 0 0 1rem; }
.hub-page .hp-lire .monde-carte, .hub-page .hp-lire .monde-txt { min-height: 12.5rem; }
.hub-page .hp-biblio { display: flex; align-items: center; gap: .8rem; min-height: 60px; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 18px; border: 1px solid var(--trait); background: rgba(255, 255, 255, .05); color: var(--encre); text-decoration: none; }
.hub-page .hp-biblio > span:first-child { font-size: 1.5rem; }
.hub-page .hp-biblio > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.hub-page .hp-biblio b { font: 400 1.12rem/1.2 var(--f-titre); }
.hub-page .hp-biblio small { font: 500 .82rem/1.35 var(--f-ui); color: var(--brume); }
.hub-page .hp-biblio svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.hub-page .hp-lire .pied.pied-commun { margin: .4rem 0 0; padding: 1.2rem 0 .4rem; border-top: 1px solid var(--trait); }
.hub-page .hp-lire .pied .musique { height: auto; margin: 0; gap: .45rem; }
.hub-page .hp-lire .pied .musique .musique-txt { display: inline; }
/* le panneau de l'événement */
.hub-page .hp-ocean { background: radial-gradient(120% 70% at 50% 0%, #17306e 0%, #0a1438 55%, #060b26 100%); }
.hub-page .hp-ocean .hp-corps { display: grid; justify-items: center; gap: .6rem; padding-top: .2rem; text-align: center; }
.hub-page .hp-ocean-sous { margin: 0; font: italic 400 1.08rem/1.4 var(--f-vers); color: #c9d4ff; }
.hub-page .hub-ancre { display: contents; }
.hub-page .hp-ocean .oc-p-bloc { margin-top: .2rem; }
/* dans son panneau, l'appel de l'événement redevient l'action principale */
.hub-page .hp-ocean .oc-p-bloc .oc-p-cta { min-height: 3.2rem; padding: .85rem 1.6rem; font-size: .9rem; color: #070b20; background: linear-gradient(160deg, #dfe6ff, #8f9cff 55%, #4fb6d8); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 14px 40px -10px rgba(120, 243, 255, .7); }
.hub-page .hp-ocean .oc-p-mini a, .hub-page .hp-ocean .oc-p-mini button { min-height: 44px; }
.hub-page .hp-ocean .oc-p-retour { margin: .4rem auto; min-height: 44px; padding: .5rem 1rem; font-size: .9rem; background: rgba(255, 255, 255, .08); color: #dfe6ff; border-color: rgba(185, 198, 255, .3); }
/* un grand panneau ouvert : la scène se repose (display:none → les observateurs l'arrêtent, rien ne se dessine dessous) */
html.hub-scene-off #hub .ac-scene, html.hub-scene-off #hub .oc-p-cv { display: none; }
/* la petite proposition « Read in English? » (langue.js) se pose sur le grand titre (décoratif), jamais sur un bouton
   ni dans la bande de la scène (Octave, Mousse et leurs bulles y vivent) — hub.js mesure --hub-titre-y */
body.hub-page:has(#hub) .langue-pilule { top: var(--hub-titre-y, 18vh) !important; }
/* quand un panneau est ouvert, Octave et Mousse s'écartent (ils ne passent jamais par-dessus) */
html.hub-panneau-on .mascotte, html.hub-panneau-on .loutre, html.hub-panneau-on .m-bulle, html.hub-panneau-on .m-effets { opacity: 0 !important; visibility: hidden !important; }

/* ---------- l'arrivée : rapide (moins d'une demi-seconde) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.mvt-reduit) .hub-page .hub-hud { animation: hub-in .38s cubic-bezier(.2, .9, .3, 1) both; }
  html:not(.mvt-reduit) .hub-page .hub-coeur { animation: hub-in .42s cubic-bezier(.2, .9, .3, 1) .06s both; }
  html:not(.mvt-reduit) .hub-page .hub-portes { animation: hub-in .42s cubic-bezier(.2, .9, .3, 1) .12s both; }
  html:not(.mvt-reduit) .hub-page .hub-second { animation: hub-in .42s cubic-bezier(.2, .9, .3, 1) .18s both; }
}
@keyframes hub-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- les grands téléphones : le titre monte un peu, la scène respire entre lui et Plonger (Nacre y passe) ---------- */
@media (min-height: 760px) {
  .hub-page .hub-tete { align-self: start; padding-top: clamp(1rem, 6.5dvh, 4.2rem); }
}
/* ---------- les petits écrans (iPhone SE…) : on resserre, on ne cache rien d'important ---------- */
@media (max-height: 720px) {
  html.hub-ev-on .hub-page #devise-haut { display: none; }
  .hub-page .hub-tete .sur { letter-spacing: .08em; }   /* (12 px au moins, même ici : on resserre seulement les lettres) */
  /* une seule ligne pour la devise (et les deux phrases de l'Océan) : la scène garde de la place pour Octave et Mousse */
  .hub-page .hub-devise { min-height: 1.45em; }
  .hub-page #hub .devise, .hub-page #hub .hub-devise .oc-p-msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-height: 640px) {
  .hub-page .hub-hud { min-height: 50px; }
  .hub-page .hub-av { width: 50px; height: 50px; }
  .hub-page .hub-av-in { width: 38px; height: 38px; }
  .hub-page .hub-av-in .cpt-av { --t: 38px; }
  .hub-page .hub-jeu { display: none; }
}
@media (max-width: 359px) {
  #hub { --coin: 48px; }
  .hub-page .hub-moi-txt b { max-width: 6.5rem; }
  .hub-page .hub-pieces { padding-right: .7rem; font-size: .92rem; }
}
/* très peu de hauteur (téléphone couché) : l'écran défile à l'intérieur plutôt que de couper */
@media (max-height: 520px) {
  #hub { overflow-y: auto; grid-template-rows: auto auto auto auto auto auto; }
  .hub-page .hub-tete { padding: .4rem 0; }
}
/* ---------- grand écran : la navigation flotte en haut, au milieu ; l'écran se centre ---------- */
@media (min-width: 960px) {
  #hub { padding-top: 14px; }
  .hub-page .hub-hud { max-width: 72rem; }
  .hub-page .hub-panneau { bottom: 0; max-height: min(88dvh, 54rem); }
}

/* ---------- mouvements réduits : rien ne pulse, rien ne glisse ---------- */
@media (prefers-reduced-motion: reduce) {
  .hub-page .hub-plonger::before, .hub-page .hub-plonger::after, .hub-page .hp-goutte svg { animation: none; }
  .hub-page .hub-panneau, .hub-page .hub-panneau.ouvert { transition: visibility 0s; }
  .hub-page .hub-anneau .xp { transition: none; }
}
html.mvt-reduit .hub-page .hub-plonger::before, html.mvt-reduit .hub-page .hub-plonger::after, html.mvt-reduit .hub-page .hp-goutte svg { animation: none; }
html.mvt-reduit .hub-page .hub-panneau, html.mvt-reduit .hub-page .hub-panneau.ouvert { transition: visibility 0s; }

/* ---------- 3.3 : la lecture d'abord — « Comment tu te sens ? » et le poème du jour, avant Plonger et les jeux ---------- */
.hub-page .hub-lecture { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(.3rem, 1.1dvh, .6rem); width: min(100%, 23rem); margin-top: clamp(.45rem, 1.4dvh, .8rem); }
.hub-page .hl-t { margin: 0; font: 400 clamp(1.08rem, 2.4dvh, 1.3rem)/1.1 var(--f-titre); color: #fff; text-shadow: 0 2px 12px rgba(5, 8, 30, .8); }
.hub-page .hl-humeurs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; width: 100%; }
.hub-page .hl-humeur { display: grid; justify-items: center; gap: .18rem; min-width: 0; min-height: 44px; padding: .2rem 0; border: 0; background: none; color: #f0faff; font: 700 .72rem/1.1 var(--f-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1); }
.hub-page .hl-humeur .bille { display: grid; place-items: center; width: clamp(34px, 5.6dvh, 44px); height: clamp(34px, 5.6dvh, 44px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2)); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .9), inset 0 -3px 6px rgba(0, 0, 0, .18); }
.hub-page .hl-humeur .bille svg { width: 78%; height: 78%; }
.hub-page .hl-humeur > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px rgba(5, 8, 30, .9); }
.hub-page .hl-humeur:active { transform: scale(.93); }
.hub-page .hl-humeur:focus-visible { outline: 2px solid #ffa9c6; outline-offset: 2px; border-radius: 12px; }
.hub-page .hub-lecture .hub-poeme { width: 100%; margin-top: .1rem; min-height: 50px; }
.hub-page .hub-second { justify-content: center; }
.hub-page .hub-second .hub-lien { flex: 0 1 auto; }
@media (prefers-reduced-motion: no-preference) { html:not(.mvt-reduit) .hub-page .hub-lecture { animation: hub-in .42s cubic-bezier(.2, .9, .3, 1) .03s both; } }
/* la place pour ce bloc : le haut descend moins sur les grands téléphones ; ailleurs, la devise tient sur une ligne,
   le « bonjour » s'efface quand l'Océan interdit est affiché, et le nom du jeu sous Plonger se cache sur les petits écrans */
@media (min-height: 760px) { .hub-page .hub-tete { padding-top: clamp(.6rem, 3.2dvh, 2.6rem); } }
@media (max-height: 860px) { html.hub-ev-on .hub-page #devise-haut { display: none; } }
@media (max-height: 760px) {
  .hub-page .hub-jeu { display: none; }
  .hub-page .hub-devise { min-height: 1.45em; }
  .hub-page #hub .devise, .hub-page #hub .hub-devise .oc-p-msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-height: 720px) { .hub-page .hl-t { font-size: 1rem; } .hub-page .hub-lecture .hub-poeme { min-height: 44px; } .hub-page .hl-humeur { font-size: .68rem; } }
@media (max-height: 640px) { .hub-page .hl-humeur > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hub-page .hl-humeur { min-height: 40px; } }   /* (le mot reste lu par les lecteurs d'écran) */