/* Le seuil d'Astrid — hub d'accueil : le Cabinet en grand, deux pièces en bas.
   Réutilise les tokens du Seuil de Minuit (style.css). */

.corridor-page main { position: relative; z-index: 1; }

.hub {
    min-height: calc(100vh - 58px);
    max-width: 780px;
    margin: 0 auto;
    padding: 22px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Barre du bas auto-masquée (mobile) : le hub lui réserve sa place, EN
   PERMANENCE. Les tuiles sont en flex (1.25 / 0.85) et remplissent l'écran :
   une réserve qui va et vient les REDIMENSIONNAIT toutes les 2,6 s — la page
   semblait respirer/buguer. Réserve stable → plus rien ne bouge, et la barre
   ne recouvre jamais la rangée du bas. box-sizing:border-box → le padding
   rentre dans la min-height, donc pas de barre de défilement. */
body.footer-auto .hub { padding-bottom: calc(28px + var(--footer-h, 64px)); }

/* Entrée en douceur au chargement */
.hub .tile { opacity: 0; transform: translateY(22px) scale(0.985); animation: hubrise 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) forwards; }
.hub-cabinet { animation-delay: 0.05s; }
.hub-row .hub-mini:nth-child(1) { animation-delay: 0.22s; }
.hub-row .hub-mini:nth-child(2) { animation-delay: 0.34s; }
@keyframes hubrise { to { opacity: 1; transform: none; } }

.tile {
    border: 1px solid var(--border-gold);
    border-radius: 22px;
    background: linear-gradient(200deg, rgba(46, 30, 74, 0.55), rgba(13, 7, 32, 0.62));
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(244, 192, 87, 0.10);
    backdrop-filter: blur(4px);
    text-decoration: none;
    color: var(--fg);
    transition: transform 0.25s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
}
.tile:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), 0 0 30px rgba(244, 192, 87, 0.14);
}

/* ---------- Le Cabinet : grande tuile du haut ---------- */
.hub-cabinet {
    flex: 1.25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    gap: 6px;
}
.cab-emblem { position: relative; width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.cab-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 0 6px rgba(217, 169, 66, 0.08), inset 0 0 22px rgba(244, 192, 87, 0.18);
    background: radial-gradient(circle at 50% 40%, rgba(106, 73, 166, 0.5), transparent 65%);
    animation: breathe 5.5s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } }
.cab-sigil { font-family: var(--font-grave); font-size: 3.1rem; color: var(--accent-bright); text-shadow: 0 0 24px var(--accent-glow); position: relative; }
.hub-cabinet h1 {
    font-family: var(--font-display); font-weight: 600; margin: 0.15em 0 0.1em;
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    background: linear-gradient(180deg, #fbeecb, #d9a942 82%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub-lead { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 1.2rem; line-height: 1.5; max-width: 420px; margin: 0 0 6px; }
.hub-enter {
    font-family: var(--font-grave); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.7rem;
    color: var(--bg-deep); padding: 12px 26px; border-radius: 999px; margin-top: 6px;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    box-shadow: 0 6px 22px var(--accent-glow);
}

/* ---------- Deux pièces du bas ---------- */
.hub-row { flex: 0.85; display: flex; gap: 18px; }
.hub-mini {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px; padding: 22px 16px;
}
.mini-ico { display: flex; align-items: center; justify-content: center; height: 70px; margin-bottom: 2px; }
.mini-ico .ico { width: 46px; height: 46px; color: var(--accent-bright); filter: drop-shadow(0 0 14px var(--accent-glow)); }
.mini-moon { font-size: 3rem; color: var(--accent-bright); text-shadow: 0 0 18px var(--accent-glow); }

.mini-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.mini-sub { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 0.92rem; }
.hub-mini[aria-disabled="true"] .mini-sub { color: var(--accent); opacity: 0.8; }

/* ---------- Overlay : la carte vivante ---------- */
.jour-overlay {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: stretch; justify-content: center;
    overflow-y: auto;                       /* défile si l'écran est court : la lecture ne déborde plus */
    overflow-x: hidden;                     /* jamais de défilement horizontal */
    overscroll-behavior: contain;           /* le scroll de l'overlay ne "fuit" pas vers la page */
    /* OPAQUE (le pied de page ne doit pas transparaître) MAIS avec la même
       variation de couleur que le fond du Cabinet : halo améthyste en haut,
       braise en bas, sur le dégradé nuit — plus de « couleur unie ». */
    background:
        radial-gradient(ellipse 85% 55% at 50% 118%, rgba(192, 67, 47, 0.20) 0%, transparent 62%),
        radial-gradient(ellipse 70% 50% at 50% -12%, rgba(106, 73, 166, 0.34) 0%, transparent 62%),
        linear-gradient(175deg, #1d1333 0%, #130b22 100%);
    opacity: 0; transition: opacity 0.4s;
}
.jour-overlay.show { opacity: 1; }
.jour-overlay[hidden] { display: none; }
/* Carte du jour ouverte : on fige le défilement de la page derrière (sinon on
   voit la scrollbar du menu principal et la page bouge sous l'overlay). */
html.jour-ouvert, html.jour-ouvert body { overflow: hidden; }
/* PC (pied de page permanent, dans le flux) : la carte du jour est un plein
   écran qui recouvrait la mention légale — elle disparaissait complètement, et
   de toute façon le pied de page vit en fin de document, donc sous la ligne de
   flottaison. On la FIXE au bas de la vue, au-dessus de l'overlay, et on
   raccourcit l'overlay d'autant : rien n'est masqué, exactement comme en vue
   mobile. Le padding sur le corps remplace la place que la barre libère dans le
   flux — sans lui le document rétrécirait et la vue sauterait à la fermeture.
   (En vue mobile, c'est footer-auto.js qui pilote : `:not(.footer-auto)`.) */
html.jour-ouvert body:not(.footer-auto) { padding-bottom: var(--footer-h, 64px); }
html.jour-ouvert body:not(.footer-auto) footer.disclaimer {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 70;                             /* au-dessus de l'overlay (z60) */
    background: var(--bg-deep);              /* opaque : l'overlay ne transparaît pas */
}
html.jour-ouvert body:not(.footer-auto) .jour-overlay { bottom: var(--footer-h, 64px); }
.jour-close {
    position: absolute; top: 18px; right: 20px; z-index: 2;
    background: none; border: 1px solid var(--border-gold); color: var(--accent);
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.1rem;
    transition: background 0.25s;
}
.jour-close:hover { background: var(--accent-soft); }
.jour-close .ico { width: 20px; height: 20px; color: var(--accent); }
.jour-inner {
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
    min-height: 100%; justify-content: center; box-sizing: border-box;
    padding: 64px 20px 44px;                /* place pour le ✕ en haut et une respiration en bas */
    transform: scale(0.92); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative; z-index: 1;         /* au-dessus de la poussière (.jour-dust, z 0) */
}
/* Poussière d'arcanes DANS l'overlay (il est opaque et masquerait sinon la
   poussière ambiante globale) — comme le Seuil. Au-dessus du fond, sous la
   lecture. width/height 100% IMPÉRATIFS : le canvas a une taille intrinsèque
   énorme (backing-store en pixels device) qui déborderait sinon l'overlay. */
.jour-dust {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; z-index: 0; pointer-events: none;
}
.jour-overlay.show .jour-inner { transform: scale(1); }
.jour-eyebrow { font-family: var(--font-grave); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
.jour-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* Couche de poussière propre au Seuil (opaque), derrière son texte (z 2) */
.seuil-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* touch-action:none → le reflet suit le doigt sur mobile (pas de scroll parasite) */
.jour-card { width: auto; height: min(326px, 46vh); aspect-ratio: 210 / 326; position: relative; cursor: pointer; transition: transform 0.12s ease-out; transform-style: preserve-3d; touch-action: none; }
.jc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); }
.jour-card.flip .jc-inner { transform: rotateY(180deg); }
.jc-face { position: absolute; inset: 0; border-radius: 15px; backface-visibility: hidden; overflow: hidden; border: 1px solid rgba(217, 169, 66, 0.5); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; }
.jc-back { background: repeating-linear-gradient(45deg, rgba(217, 169, 66, 0.10) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 42%, rgba(244, 192, 87, 0.22), transparent 55%), linear-gradient(160deg, #2c1c4c, #160c28); }
.jc-back span { font-family: var(--font-grave); color: var(--accent-bright); font-size: 3rem; text-shadow: 0 0 18px var(--accent-glow); }
.jc-front { flex-direction: column; gap: 12px; padding: 20px; text-align: center; transform: rotateY(180deg); background: linear-gradient(160deg, #efe7d1, #e6d9b8); color: #2a1c10; }
.jc-front .jc-k { font-family: var(--font-grave); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; color: #7a2016; }
.jc-img { max-width: 82%; max-height: 70%; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
/* Lecture d'Astrid sous la carte (révélée au retournement) */
.jour-reading {
    max-width: 320px; margin: 8px auto 0; text-align: center;
    font-family: var(--font-display); font-style: italic; color: var(--fg);
    line-height: 1.5; font-size: 1.12rem;
    opacity: 0; transition: opacity 0.55s ease;
}
.jour-reading.show { opacity: 1; }
/* Reflet nacré SANS mix-blend-mode (le blend provoquait des glitches de
   contraste qui apparaissaient/disparaissaient sur la carte en 3D). Simple
   voile clair qui suit le doigt — jamais d'artefact. */
.jc-foil { position: absolute; inset: 0; border-radius: 15px; pointer-events: none; z-index: 3; opacity: 0.22; transition: opacity 0.25s; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.55), rgba(255, 236, 190, 0.4), transparent 64%); background-size: 220% 220%; background-position: var(--mx, 50%) var(--my, 50%); }
/* Masqué pendant la bascule (rotation 3D). */
.jour-card.flipping .jc-foil { opacity: 0; }
.jour-hint { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 1rem; }

@media (max-width: 560px) {
    /* Les deux pièces du bas restent côte à côte, même sur mobile. */
    .hub-row { gap: 12px; }
    .hub-mini { padding: 18px 10px; gap: 6px; }
    .mini-ico { height: 56px; }
    .mini-ico .ico { width: 38px; height: 38px; }
    .mini-moon { font-size: 2.4rem; }
    .mini-name { font-size: 1.12rem; }
    .mini-sub { font-size: 0.82rem; }
    .cab-emblem { width: 92px; height: 92px; }
    .cab-sigil { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hub .tile { opacity: 1; transform: none; animation: none; }
    .cab-ring { animation: none; }
    .jc-inner, .jour-inner, .jour-overlay { transition: none; }
}