/* ============================================================
   QreaLAB V01 — overlays.css
   ------------------------------------------------------------
   Tout ce qui se pose PAR-DESSUS le monde : bandeau système, Journal
   coulissant, Terminal de coin, modale plein écran, notifications.

   ── Principe commun ────────────────────────────────────────
   Les surcouches appartiennent au système, pas à un site web. Donc :
   fonds très sombres et translucides, bordures d'un pixel, aucun
   coin très arrondi, aucune ombre colorée, typographie monospace
   pour tout ce qui est état ou identifiant.

   Le monde doit toujours rester perceptible derrière : c'est lui le
   sujet, les surcouches ne sont que des outils.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. HUD
   ══════════════════════════════════════════════════════════ */

.hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-hud);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    height: calc(var(--hud-height) + var(--safe-top));
    padding: var(--safe-top) calc(var(--space-lg) + var(--safe-right))
             0 calc(var(--space-lg) + var(--safe-left));
    /* Pas de fond plein : un dégradé qui s'éteint. Le monde continue
       derrière le bandeau. */
    background: linear-gradient(180deg,
        rgba(4, 6, 8, 0.88) 0%,
        rgba(4, 6, 8, 0.55) 62%,
        rgba(4, 6, 8, 0) 100%);
    /* Le bandeau ne doit pas voler les gestes destinés au monde :
       seuls ses enfants interactifs sont cliquables. */
    pointer-events: none;
    /* `visibility` en plus de l'opacité : sinon les boutons resteraient
       cliquables et focusables au clavier alors qu'ils sont invisibles,
       avant même d'être entré dans le monde. */
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease-out),
                visibility var(--t-slow) linear;
}

/* Le HUD n'existe qu'une fois entré dans le monde. */
.is-in-world .hud {
    visibility: visible;
    opacity: 1;
}

.hud button {
    pointer-events: auto;
}

.hud__side {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    /* Les deux côtés prennent un poids égal : le bouton JOURNAL du
       centre est alors réellement au milieu du bandeau. */
    flex: 1 1 0;
}

.hud__side--end {
    justify-content: flex-end;
}

/* ── Identification du lieu ─────────────────────────────── */

.hud__place {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-xs);
    transition: background var(--t-fast) var(--ease-out);
}

.hud__place:hover,
.hud__place:focus-visible {
    background: rgba(255, 255, 255, 0.04);
}

/* Une petite diode : le système est alimenté. C'est l'unique
   indicateur d'état permanent du bandeau. */
.hud__place-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px rgba(88, 210, 238, 0.7);
    animation: hud-pulse 3.6s var(--ease-in-out) infinite;
}

.hud__place-name {
    font-size: var(--fs-xs);
    color: var(--text-primary);
}

@keyframes hud-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.42; }
}

/* ── Le bouton Journal (centre du bandeau) ────────────────
   Le Journal est désormais un vrai élément du HUD, pas un onglet
   latéral. Titre sur une ligne, deux compteurs dessous sur une
   ligne, badge de nouveauté. Réglette système : sobre, jamais un
   bouton marketing. ───────────────────────────────────────── */

.hud__journal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px var(--space-md);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-full);
    background: rgba(4, 6, 10, 0.5);
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}

.hud__journal-title {
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
    line-height: 1.2;
}

.hud__journal-counters {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hud__journal-count {
    font-size: 9px;
    letter-spacing: var(--ls-label);
    color: var(--text-dim);
    line-height: 1.2;
    transition: color var(--t-fast) var(--ease-out),
                text-shadow var(--t-fast) var(--ease-out);
}

/* Séparateur entre les deux compteurs : une simple marque, pas un
   caractère décoratif. */
.hud__journal-count + .hud__journal-count {
    position: relative;
}

.hud__journal-count + .hud__journal-count::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-sm) / 2 - 0.5px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--metal-600);
}

/* Badge de nouveauté : une pastille, sans chiffre agressif. */
.hud__journal-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: -10px;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--bg-void);
    background: var(--anomaly-hot);
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(162, 107, 255, 0.55);
}

.hud__journal-badge.is-visible {
    display: grid;
}

.hud__journal:hover,
.hud__journal:focus-visible,
.hud__journal.is-active {
    color: var(--text-bright);
    border-color: var(--line);
    background: rgba(11, 15, 23, 0.92);
}

.hud__journal:hover .hud__journal-title,
.hud__journal:focus-visible .hud__journal-title,
.hud__journal.is-active .hud__journal-title {
    color: var(--text-bright);
}

/* Du nouveau : le bouton reste légèrement éclairé tant qu'il y a des
   LOG ou des fragments non consultés. */
.hud__journal.has-news {
    border-color: var(--line-signal);
    box-shadow: 0 0 16px rgba(88, 210, 238, 0.14);
}

.hud__journal.has-news .hud__journal-title {
    color: var(--text-bright);
}

/* Réaction ponctuelle : une brève montée de lumière à l'ajout. */
.hud__journal.is-pulsing {
    animation: hud-journal-pulse 1.2s var(--ease-out);
}

@keyframes hud-journal-pulse {
    0% { box-shadow: 0 0 0 0 rgba(88, 210, 238, 0); }
    30% { box-shadow: 0 0 0 1px rgba(88, 210, 238, 0.45), 0 0 26px rgba(88, 210, 238, 0.32); }
    100% { box-shadow: 0 0 16px rgba(88, 210, 238, 0.14); }
}

/* Pulse d'un compteur à l'arrivée d'une révélation : le chiffre
   s'allume brièvement dans le registre de sa famille (cyan LOG,
   violet SECRETS). */
.hud__journal-count.is-pulsing--log {
    animation: hud-count-log 0.9s var(--ease-out);
}

.hud__journal-count.is-pulsing--secret {
    animation: hud-count-secret 0.9s var(--ease-out);
}

@keyframes hud-count-log {
    0% { color: var(--text-dim); text-shadow: none; }
    35% { color: var(--q-cyan); text-shadow: 0 0 12px rgba(95, 232, 255, 0.6); }
    100% { color: var(--text-dim); text-shadow: none; }
}

@keyframes hud-count-secret {
    0% { color: var(--text-dim); text-shadow: none; }
    35% { color: var(--anomaly-hot); text-shadow: 0 0 12px rgba(201, 164, 255, 0.6); }
    100% { color: var(--text-dim); text-shadow: none; }
}

/* ── Langue ─────────────────────────────────────────────── */

.hud__lang {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex: none;
}

.hud__lang-btn {
    flex: none;
    padding: 5px var(--space-xs);
    font-size: 10px;
    color: var(--text-dim);
    transition: color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}

.hud__lang-btn:hover {
    color: var(--text-secondary);
}

.hud__lang-btn.is-active {
    color: var(--text-bright);
    background: rgba(88, 210, 238, 0.12);
}

/* ── Boutons ────────────────────────────────────────────── */

.hud__group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.hud__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 5px var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}

.hud__btn:hover,
.hud__btn:focus-visible {
    color: var(--text-bright);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.04);
}

.hud__btn--icon {
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: var(--fs-sm);
}

.hud__btn--terminal {
    border-color: var(--line-subtle);
}

.hud__btn-glyph {
    color: var(--signal);
}

/* ══════════════════════════════════════════════════════════
   2. JOURNAL — tiroir latéral droit
   ══════════════════════════════════════════════════════════
   L'ouverture se fait désormais par le bouton JOURNAL du HUD
   (.hud__journal). Ici ne vit que le tiroir lui-même.
   ══════════════════════════════════════════════════════════ */

/* ── Fond ───────────────────────────────────────────────── */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) + 1);
    background: rgba(2, 3, 4, 0.5);
    opacity: 0;
    transition: opacity var(--t-normal) var(--ease-out);
}

.drawer-backdrop.is-visible {
    opacity: 1;
}

/* ── Le tiroir ──────────────────────────────────────────── */

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: calc(var(--z-drawer) + 2);
    display: flex;
    flex-direction: column;
    width: var(--drawer-width);
    max-width: 100vw;
    /* dvh, et non vh : sur mobile la barre d'adresse ne coupe plus
       le bas du tiroir. */
    height: 100dvh;
    background: linear-gradient(180deg, #090d14 0%, #05070c 100%);
    border-left: 1px solid var(--line-subtle);
    box-shadow: var(--shadow-xl);
    /* Fermé : entièrement hors champ. */
    transform: translateX(100%);
    transition: transform var(--t-normal) var(--ease-out);
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding: calc(var(--space-lg) + var(--safe-top)) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--line-subtle);
}

.drawer__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xs);
    color: var(--text-muted);
}

.drawer__led {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 7px rgba(88, 210, 238, 0.7);
    animation: hud-pulse 3.6s var(--ease-in-out) infinite;
}

.drawer__title {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--text-bright);
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-lg) calc(var(--space-2xl) + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ── Sections ───────────────────────────────────────────── */

.jr-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.jr-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--line-subtle);
}

.jr-section__title {
    font-size: var(--fs-2xs);
    color: var(--text-secondary);
}

.jr-section__count {
    font-size: 10px;
    color: var(--text-dim);
}

.jr-empty {
    font-size: var(--fs-sm);
    color: var(--text-dim);
}

/* ── Entrées de log ─────────────────────────────────────── */

.jr-log {
    padding-left: var(--space-md);
    /* Un filet à gauche, pas une carte : l'entrée est une ligne de
       mémoire, pas un objet. */
    border-left: 2px solid var(--line-signal);
}

.jr-log__id {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--ls-label);
    color: var(--signal-dim);
}

/* Le texte narratif est en sans-serif : le monospace partout
   tuerait la lisibilité et le ton. `pre-line` respecte les retours
   à la ligne écrits dans les LOG (plusieurs phrases = plusieurs
   lignes, comme dans la mémoire du système). */
.jr-log__text {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-primary);
    white-space: pre-line;
}

/* Non débloquée : illisible, pas absente. */
.jr-log.is-locked {
    border-left-color: var(--metal-800);
}

.jr-log.is-locked .jr-log__id {
    color: var(--text-dim);
}

/* ── Contenu corrompu ─────────────────────────────────────
   Un LOG verrouillé ne montre pas de texte statique : un signal de
   glyphes instable. Trois variantes sont précalculées au rendu
   (js/ui/journal.js) et empilées ; le CSS les fait alterner en pur,
   sur un cycle lent. Aucune boucle JS active — c'est essentiel pour
   ne pas coûter de CPU/batterie sur mobile.
   ───────────────────────────────────────────────────────── */

.jr-log__corrupt {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-relaxed);
    color: var(--text-dim);
    white-space: pre-line;
    user-select: none;
}

/* Les trois variantes partagent la même case : la première définit la
   hauteur, les deux autres se superposent. */
.jr-log__corrupt span {
    display: block;
}

.jr-log__corrupt span:nth-child(n + 2) {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* Cycle lent (7,5 s) : chaque variante est visible un tiers du temps,
   les délais négatifs décalent simplement la même keyframe. */
.jr-log__corrupt span {
    animation: jr-corrupt 7.5s linear infinite;
}

.jr-log__corrupt span:nth-child(2) {
    animation-delay: -2.5s;
}

.jr-log__corrupt span:nth-child(3) {
    animation-delay: -5s;
}

@keyframes jr-corrupt {
    0%, 33.3% { opacity: 1; }
    33.4%, 100% { opacity: 0; }
}

/* Tiroir fermé : le scintillement est en pause. Inutile d'animer ce
   que personne ne regarde. */
.drawer:not(.is-open) .jr-log__corrupt span {
    animation-play-state: paused;
}

/* ── Fragments ──────────────────────────────────────────── */

.jr-fragments {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.jr-fragment {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.014);
}

.jr-fragment__letter {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    color: var(--text-dim);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-xs);
}

.jr-fragment.is-found {
    border-color: var(--line-anomaly);
}

.jr-fragment.is-found .jr-fragment__letter {
    color: var(--anomaly-hot);
    border-color: rgba(162, 107, 255, 0.42);
    background: rgba(162, 107, 255, 0.08);
    text-shadow: 0 0 10px rgba(162, 107, 255, 0.5);
}

.jr-fragment__content {
    min-width: 0;
}

.jr-fragment__id {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--ls-label);
    color: var(--text-dim);
}

.jr-fragment__phrase {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
}

.jr-fragment:not(.is-found) .jr-fragment__phrase {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label);
    color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════
   3. TERMINAL — surcouche de coin
   ══════════════════════════════════════════════════════════
   Outil SECONDAIRE. Le PROTO l'affichait en plein écran, ce qui en
   faisait de facto l'interface principale. Ici il occupe un coin et
   laisse le monde visible.
   ══════════════════════════════════════════════════════════ */

.terminal {
    position: fixed;
    left: calc(var(--space-lg) + var(--safe-left));
    bottom: calc(var(--space-lg) + var(--safe-bottom));
    z-index: var(--z-terminal);
    display: flex;
    flex-direction: column;
    width: var(--terminal-width);
    max-width: calc(100vw - var(--space-xl));
    height: var(--terminal-height);
    background: rgba(4, 6, 10, 0.9);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    font-family: var(--font-mono);
    transform-origin: 0 100%;
    animation: terminal-in var(--t-normal) var(--ease-out);
}

.terminal.hidden {
    display: none !important;
}

@keyframes terminal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.terminal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--line-subtle);
}

.terminal__title {
    font-size: 10px;
    color: var(--text-muted);
}

.terminal__output {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
    font-size: var(--fs-xs);
    line-height: 1.65;
}

.terminal__line {
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal__line--command {
    color: var(--text-bright);
}

.terminal__line--output {
    color: var(--text-secondary);
}

.terminal__line--error {
    color: #e8836f;
}

.terminal__prompt-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
    border-top: 1px solid var(--line-subtle);
}

.terminal__prompt {
    flex: none;
    font-size: var(--fs-2xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--signal);
}

.terminal__input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-bright);
    caret-color: var(--signal);
}

/* ══════════════════════════════════════════════════════════
   4. MODALE — expériences et Q-ARCHIVE
   ══════════════════════════════════════════════════════════ */

.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal) var(--ease-out);
}

.modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    /* Le monde reste deviné derrière : on n'a pas quitté
       l'installation, on est entré dans un de ses modules. */
    background: rgba(2, 3, 4, 0.82);
    backdrop-filter: blur(6px);
}

.modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 940px;
    max-height: calc(100dvh - var(--space-2xl));
    background: linear-gradient(180deg, #0a0e15 0%, #05070c 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    transform: scale(0.98);
    transition: transform var(--t-normal) var(--ease-out);
}

.modal[aria-hidden="false"] .modal__panel {
    transform: scale(1);
}

.modal--experience .modal__panel {
    border-width: 2px;
    border-color: var(--metal-500);
    background: linear-gradient(165deg,
        rgba(20, 26, 36, 0.98) 0%,
        rgba(8, 11, 17, 0.98) 42%,
        rgba(3, 5, 9, 0.99) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(185, 201, 217, 0.14),
        var(--shadow-xl);
}

.modal--experience .modal__head {
    background: rgba(3, 5, 9, 0.62);
    border-bottom-color: var(--metal-700);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--line-subtle);
}

.modal__title {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--text-bright);
}

.modal__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

/* ── Contenu de Q-ARCHIVE ─────────────────────────────────
   Une entrée d'archive, pas une page de fin. Le bandeau supérieur
   rappelle un terminal ; la zone [CONTENU À VENIR] est en réserve.
   ─────────────────────────────────────────────────────────── */

.qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 560px;
    padding: 0 0 var(--space-md) 0;
}

/* Bandeau : accès accordé + session complete, comme un terminal. */
.qa__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-xs) var(--space-md);
    border-bottom: 1px solid var(--line);
    background: rgba(4, 6, 12, 0.5);
}

.qa__bar-kicker {
    font-size: var(--fs-2xs);
    color: var(--signal);
}

.qa__bar-session {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* QREANOV : le point focal de l'archive. En dégradé des couleurs du
   système (bleu/violet), volontairement plus grand que tout le reste. */
.qa__name {
    font-family: var(--font-mono);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    line-height: 1.05;
    background: linear-gradient(112deg,
        var(--q-cyan) 0%,
        #7fd0ff 38%,
        var(--q-violet) 78%,
        var(--anomaly-hot) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(169, 112, 255, 0.3));
}

.qa__lines {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
}

.qa__line {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-primary);
}

/* Chaque ligne porte une teinte différente, sans surcharge. */
.qa__line--1 { color: var(--text-primary); }
.qa__line--2 { color: var(--signal); }
.qa__line--3 { color: var(--text-primary); }
.qa__line--4 { color: var(--anomaly-hot); }
.qa__line--5 { color: var(--text-secondary); }
.qa__line--6 { color: var(--q-cyan); }

/* Zone réservée : le contenu définitif viendra là. */
.qa__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-xs) 0;
    border: 1px dashed var(--line-signal);
    border-radius: var(--radius-sm);
    background: rgba(88, 210, 238, 0.03);
}

.qa__placeholder-label {
    font-size: var(--fs-2xs);
    color: var(--text-dim);
}

.qa__end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--line-subtle);
}

.qa__standby {
    font-size: var(--fs-2xs);
    color: var(--text-dim);
}

/* ══════════════════════════════════════════════════════════
   5. BOUTON ICÔNE (partagé)
   ══════════════════════════════════════════════════════════ */

.icon-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}

.icon-btn:hover,
.icon-btn:focus-visible {
    color: var(--text-bright);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.05);
}

/* ══════════════════════════════════════════════════════════
   6. NOTIFICATIONS
   ══════════════════════════════════════════════════════════
   Brèves, jamais bloquantes. Elles annoncent un événement du
   système, elles ne demandent rien.
   ══════════════════════════════════════════════════════════ */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-xl) + var(--safe-bottom));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    max-width: min(460px, calc(100vw - var(--space-xl)));
    padding: var(--space-sm) var(--space-lg);
    text-align: center;
    background: rgba(4, 6, 10, 0.92);
    border: 1px solid var(--line-signal);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
    transform: translate(-50%, 14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal) var(--ease-out),
                transform var(--t-normal) var(--ease-out);
}

.toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast__title {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-bright);
}

/* La phrase narrative d'un fragment : en sans-serif, car c'est du
   récit et non un état système. */
.toast__sub {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════
   6bis. DÉCOUVERTE D'UN FRAGMENT
   ══════════════════════════════════════════════════════════
   Le moment où une lettre QREANOV apparaît en très grand plan,
   avec sa phrase. C'est l'annonce privilégiée d'un fragment :
   immersive, et pourtant discrète (le monde reste perceptible
   derrière le voile).
   Fermeture : clic, Échap, ou ~4,5 s. ─────────────────────── */

.discovery {
    position: fixed;
    inset: 0;
    z-index: var(--z-discovery);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    text-align: center;
    background: radial-gradient(90% 80% at 50% 45%,
        rgba(8, 11, 17, 0.82) 0%,
        rgba(3, 5, 9, 0.94) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal) var(--ease-out);
}

/* Le flou d'arrière-plan n'est appliqué que visible : sinon il
   resterait actif (et coûteux) même derrière une opacité nulle. */
.discovery.is-visible {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(6px);
}

/* La lettre : signature violette des fragments (cohérente avec le
   HUD et le Journal), en JetBrains Mono comme les lettres ailleurs. */
.discovery__letter {
    font-family: var(--font-mono);
    font-size: clamp(5rem, 20vmin, 12rem);
    font-weight: var(--fw-medium);
    line-height: 1;
    background: linear-gradient(180deg, var(--anomaly-hot) 0%, var(--anomaly) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 30px rgba(162, 107, 255, 0.45));
    animation: discovery-letter 0.95s var(--ease-out) both;
}

.discovery__label {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-dim);
}

.discovery__phrase {
    max-width: 34em;
    font-size: var(--fs-md);
    font-weight: var(--fw-light);
    line-height: var(--lh-normal);
    /* Le texte du fragment est lui aussi violet : il appartient au
       même registre « anomalie / secret » que la lettre. */
    color: var(--anomaly-hot);
    animation: discovery-phrase 1.15s var(--ease-out) 0.25s both;
}

@keyframes discovery-letter {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes discovery-phrase {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   6ter. RÉVÉLATION D'UN LOG (mémoire retrouvée)
   ──────────────────────────────────────────────────────────
   Même principe que la découverte d'un fragment, mais dans le
   registre cyan/frost : un LOG est le système qui fonctionne encore
   et se souvient. Le texte s'écrit comme au Gatekeeper (monospace,
   curseur), puis glisse vers le bouton Journal du HUD (la position
   réelle est animée par ui/discovery.js via transform).
   ══════════════════════════════════════════════════════════ */

.reveal {
    position: fixed;
    inset: 0;
    z-index: var(--z-discovery);
    display: grid;
    place-items: center;
    padding: var(--space-lg);
    background: radial-gradient(90% 80% at 50% 45%,
        rgba(8, 11, 17, 0.82) 0%,
        rgba(3, 5, 9, 0.94) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal) var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(6px);
}

/* Le bloc qui vole vers le bouton Journal : il est repositionné en
   transform par le JS (transition réglée inline). */
.reveal__stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 620px;
    text-align: left;
    will-change: transform, opacity;
}

.reveal__id {
    font-size: var(--fs-2xs);
    color: var(--signal);
}

.reveal__boot {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reveal__line {
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--frost-200);
    white-space: pre-wrap;
}

.reveal__line::before {
    content: '> ';
    color: var(--signal-dim);
}

.reveal__cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    background: var(--signal);
    vertical-align: text-bottom;
    animation: gate-caret 1s steps(1, end) infinite;
}

/* ══════════════════════════════════════════════════════════
   7. RESPONSIVE
   ══════════════════════════════════════════════════════════
   Ce ne sont pas des réductions : chaque palier a sa propre
   composition.
   ══════════════════════════════════════════════════════════ */

/* ── Tablette ───────────────────────────────────────────── */

@media (max-width: 1023px) {
    .hud {
        padding-left: calc(var(--space-md) + var(--safe-left));
        padding-right: calc(var(--space-md) + var(--safe-right));
        gap: var(--space-sm);
    }

    /* Le libellé du terminal disparaît, le glyphe suffit. */
    .hud__btn--terminal .hud__btn-text {
        display: none;
    }

    .terminal {
        width: min(var(--terminal-width), calc(100vw - var(--space-xl)));
    }
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* Le bandeau se resserre : lieu + fragments + langue + terminal.
       Les commandes de cadrage disparaissent — au doigt, on pince. */
    .hud {
        top: auto;
        bottom: 0;
        gap: var(--space-xs);
        height: calc(var(--hud-height) + var(--safe-bottom));
        padding: 0 calc(var(--space-sm) + var(--safe-right)) var(--safe-bottom)
                 calc(var(--space-sm) + var(--safe-left));
        background: linear-gradient(0deg,
            rgba(4, 6, 8, 0.94) 0%,
            rgba(4, 6, 8, 0.68) 64%,
            rgba(4, 6, 8, 0) 100%);
    }

    .hud__group {
        display: none;
    }

    .hud__place-name {
        display: none;
    }

    /* Le bouton Journal reste lisible mais discret dans le bandeau. */
    .hud__journal {
        padding: 3px var(--space-sm);
        gap: 1px;
        min-height: 44px;
    }

    .hud__journal-count {
        font-size: 8px;
    }

    /* Le tiroir occupe tout l'écran : une surcouche partielle est
       inutilisable sur un téléphone. */
    .drawer {
        width: 100vw;
        border-left: none;
    }

    .drawer__head {
        padding: calc(var(--space-md) + var(--safe-top)) var(--space-md) var(--space-sm);
    }

    .drawer__body {
        padding: var(--space-md) var(--space-md) calc(var(--space-2xl) + var(--safe-bottom));
        gap: var(--space-lg);
    }

    /* Le terminal devient une feuille ancrée en bas. */
    .terminal {
        left: 0;
        right: 0;
        bottom: calc(var(--hud-height) + var(--safe-bottom) + var(--keyboard-offset, 0px));
        width: 100vw;
        max-width: none;
        height: min(var(--terminal-height),
                    calc(100dvh - var(--hud-height) - var(--safe-bottom) - var(--safe-top) - var(--keyboard-offset, 0px)));
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        padding-bottom: 0;
    }

    .modal {
        padding: 0;
    }

    /* Plein écran : un module doit être réellement jouable. */
    .modal__panel {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: none;
        border-radius: 0;
    }

    .modal__head {
        padding: calc(var(--space-sm) + var(--safe-top)) var(--space-sm) var(--space-sm) var(--space-md);
    }

    /* Les croix de fermeture restent faciles à viser au doigt. */
    .modal__head .icon-btn,
    .terminal__head .icon-btn,
    .drawer__head .icon-btn {
        width: 40px;
        height: 40px;
        font-size: var(--fs-base);
    }

    .modal__title {
        font-size: var(--fs-sm);
    }

    .modal__body {
        padding: var(--space-md) var(--space-sm) calc(var(--space-md) + var(--safe-bottom));
    }

    /* La notification reste lisible, sans coller au bord inférieur. */
    .toast {
        bottom: calc(var(--hud-height) + var(--safe-bottom) + var(--space-md));
        max-width: calc(100vw - var(--space-md));
        padding: var(--space-xs) var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hud__place-mark,
    .drawer__led {
        animation: none !important;
    }

    /* La découverte reste lisible : la lettre et la phrase s'affichent
       sans animation. */
    .discovery__letter,
    .discovery__phrase {
        animation: none;
    }

    /* Le contenu corrompu se fige sur sa première variante : lisible
       sans scintillement. */
    .jr-log__corrupt span {
        animation: none !important;
    }

    /* Le curseur de la révélation LOG ne clignote pas. */
    .reveal__cursor {
        animation: none !important;
    }

    /* Plus de pulse sur le bouton Journal ni ses compteurs. */
    .hud__journal.is-pulsing,
    .hud__journal-count[class*='is-pulsing'] {
        animation: none !important;
    }
}