/* ===================================================================
   EOS — Gabarit du cadre terminal
   ===================================================================
   La console centrale commune aux trois ensembles : un cadre de 980 px
   posé au-dessus des effets d'ambiance, contenant l'en-tête, la zone
   de contenu défilante et le pied de page.

   Chargé par :
     - Eos/index.php, Eos_db/index.html   (les deux accueils)
     - Eos_db/Crea_Perso/index-crea.php   (création narrative)
     - Phobos_Campaign/**.html            (Station Point Zéro, 17 pages)

   Requiert eos.css (tokens et ambiance), à charger avant.
   =================================================================== */

/* -------------------------------------------------------------------
   Le cadre

   z-index: 210 est le mécanisme central du gabarit. Il place le cadre
   ENTRE le faisceau de scan (200) et les scanlines (500) définis dans
   eos.css : la grille et le faisceau restent visibles en défilant dans
   les marges autour, tandis que les scanlines couvrent tout l'écran,
   cadre compris. Toute valeur strictement entre 200 et 500 conviendrait.
   ------------------------------------------------------------------- */
.terminal-frame {
    position: relative;
    z-index: 210;
    max-width: var(--frame-width, 980px);
    /* 100dvh suit la barre d'URL rétractable des navigateurs mobiles ;
       100vh, qui ne la suit pas, sert de repli aux navigateurs anciens. */
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    margin: 16px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-hairline);
    border-radius: 6px;
    background: linear-gradient(180deg, #0a121a 0%, #060b11 100%);
    box-shadow:
        0 0 0 1px rgba(76, 143, 209, 0.05),
        0 30px 90px rgba(0, 0, 0, 0.6);
}

/* Variante large, pour Station Point Zéro.

   Trois de ses pages — la carte de la station, le plan du Centre-Station
   et le réseau de transport — juxtaposent une carte et son panneau
   d'information : à 980 px, leur contenu en réclame 1017 et se trouve
   tronqué. 1100 px supprime le débordement et laisse en plus la carte
   atteindre sa taille naturelle, qui est bornée par la hauteur (656 px)
   et non plus par la largeur.

   Appliquée à l'ensemble des pages de Point Zéro, et non aux seules
   trois concernées, pour que le cadre ne change pas de largeur d'une
   page à l'autre au fil de la navigation. */
.terminal-frame--large { --frame-width: 1100px; }

/* Hauteur que le cadre prélève en plus de ce que le plein écran prenait
   déjà : ses marges (2×16) plus l'en-tête et le pied qu'il contient
   désormais, moins les 51+28 px que le contenu réservait auparavant en
   `position: fixed`. Les pages de cartographie dimensionnent leur carte
   par un calcul sur 100vh ; elles y ajoutent cette variable, qui vaut
   zéro hors cadre et laisse donc leur calcul d'origine intact. */
.terminal-frame { --cadre-supplement: 33px; }

/* Filigrane institutionnel : logo en fond, très discret, mêlé au
   panneau par soustraction (le fond blanc de l'image disparaît).
   Le z-index négatif ne fuit pas hors du cadre parce que celui-ci est
   un contexte d'empilement (position + z-index). */
.base-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    max-width: 460px;
    z-index: -1;
    opacity: 0.05;
    filter: invert(1) brightness(1.35);
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
}

/* Coins HUD du cadre.
   Nommés `frame-corner` et non `corner` : ce dernier désigne déjà deux
   choses incompatibles dans le projet — les coins du viewport côté
   Point Zéro (fixed, 30 px) et les équerres internes aux écrans de la
   création de personnage (absolute, 22 px, en `.corner--tl`). */
.frame-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 3;
    opacity: 0.7;
    border: 1px solid var(--border-hairline-bright);
    pointer-events: none;
}
.frame-corner.tl { top: 12px;    left: 12px;  border-right: none; border-bottom: none; }
.frame-corner.tr { top: 12px;    right: 12px; border-left: none;  border-bottom: none; }
.frame-corner.bl { bottom: 12px; left: 12px;  border-right: none; border-top: none; }
.frame-corner.br { bottom: 12px; right: 12px; border-left: none;  border-top: none; }

/* -------------------------------------------------------------------
   En-tête du cadre
   ------------------------------------------------------------------- */
.terminal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--border-hairline);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: linear-gradient(to bottom, var(--panel-steel), transparent);
}

.terminal-header__left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.terminal-header__right { display: flex; align-items: center; gap: 8px; color: var(--accent-ice); }

.terminal-header__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.terminal-header__back:hover {
    color: var(--accent-ice);
    border-color: var(--border-hairline-bright);
}
.terminal-header__back:focus-visible {
    outline: none;
    color: var(--accent-ice);
    border-color: var(--accent-ice);
}
.terminal-header__back svg { width: 12px; height: 12px; flex-shrink: 0; }

.terminal-header__sep {
    width: 1px;
    height: 14px;
    background: var(--border-hairline);
    flex-shrink: 0;
}

.un-emblem {
    color: var(--accent-un-blue);
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(76, 143, 209, 0.55));
}

.terminal-header__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-un-blue);
    box-shadow: 0 0 6px 1px var(--accent-un-blue);
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* -------------------------------------------------------------------
   Bandeau supérieur et vignette — hors du cadre, sur toute la largeur
   ------------------------------------------------------------------- */
.header-strip {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 220;
    background: linear-gradient(90deg,
        transparent 0%, var(--accent-alert) 20%, var(--accent-un-blue) 50%,
        var(--accent-alert) 80%, transparent 100%);
    animation: stripGlow 4s ease-in-out infinite;
}
@keyframes stripGlow { 0%, 100% { opacity: 0.7 } 50% { opacity: 1 } }

.vignette {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.8) 100%);
}

/* -------------------------------------------------------------------
   Barre de navigation et pied de page

   Apparence seulement : le positionnement vient du cadre, dont ils sont
   des enfants flex. Les 17 pages de Point Zéro portent leur propre copie
   de ces règles en CSS local ; elle prévaut sur celle-ci, ce qui est
   sans conséquence puisque les deux sont alignées sur la charte.
   ------------------------------------------------------------------- */
.top-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 48px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-hairline);
    background: linear-gradient(to bottom, var(--panel-steel), transparent);
}
.nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-back:hover { color: var(--accent-ice); border-color: var(--border-hairline-bright); }
.nav-back:focus-visible { outline: none; color: var(--accent-ice); border-color: var(--accent-ice); }
.nav-back svg { width: 12px; height: 12px; flex-shrink: 0; }

.nav-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.nav-status {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ice);
}

footer.footer, .terminal-frame > .footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 30px;
    padding: 0 20px;
    border-top: 1px solid var(--border-hairline);
    background: linear-gradient(to top, var(--panel-steel), transparent);
}
.footer-item {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.footer-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 5px;
    background: var(--accent-success);
    box-shadow: 0 0 5px var(--accent-success);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }

#clock { color: var(--accent-ice); }

/* -------------------------------------------------------------------
   Adaptation des pages de Station Point Zéro

   Ces pages posent leur barre de navigation, leur contenu et leur pied
   de page en `position: fixed`, calés sur le viewport. Plutôt que de
   réécrire ces règles dans 17 fichiers, on les surcharge ici par des
   sélecteurs enfant direct, de spécificité supérieure (0,2,0 contre
   0,1,0). Le CSS local de chaque page reste donc intact.
   ------------------------------------------------------------------- */
.terminal-frame > .top-nav {
    position: static;
    top: auto; left: auto; right: auto;
    flex-shrink: 0;
}

.terminal-frame > .footer,
.terminal-frame > footer.footer {
    position: static;
    bottom: auto; left: auto; right: auto;
    flex-shrink: 0;
}

/* La zone de contenu : seul élément qui défile, comme dans la création
   de personnage où seul `.screen-scroll` défile. `min-height: 0` est
   indispensable — sans lui, la valeur `auto` par défaut des enfants
   flex empêcherait le rétrécissement et ferait déborder le cadre. */
.terminal-frame > .stage,
.terminal-frame > .page-wrap,
.terminal-frame > #page-wrap {
    position: static;
    inset: auto;
    top: auto; left: auto; right: auto; bottom: auto;
    flex: 1;
    min-height: 0;
    max-width: none;
    /* 100% et non auto : ces conteneurs portent un `margin: 0 auto` hérité
       de leur mise en page plein écran. Sur l'axe transversal d'un flex,
       une marge automatique neutralise l'étirement — le conteneur se
       réduirait alors à la largeur de son contenu au lieu d'occuper le
       cadre, et chaque onglet prendrait une largeur différente. */
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* La zone de contenu de Crea_Perso gère elle-même son défilement écran
   par écran : elle ne doit pas en ajouter un second niveau. */
.terminal-frame > .screens {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Barre de défilement discrète, alignée sur celle des écrans d'Eos. */
.terminal-frame > .stage::-webkit-scrollbar,
.terminal-frame > .page-wrap::-webkit-scrollbar,
.terminal-frame > #page-wrap::-webkit-scrollbar { width: 8px; }
.terminal-frame > .stage::-webkit-scrollbar-track,
.terminal-frame > .page-wrap::-webkit-scrollbar-track,
.terminal-frame > #page-wrap::-webkit-scrollbar-track { background: transparent; }
.terminal-frame > .stage::-webkit-scrollbar-thumb,
.terminal-frame > .page-wrap::-webkit-scrollbar-thumb,
.terminal-frame > #page-wrap::-webkit-scrollbar-thumb {
    background: var(--border-hairline-bright);
    border-radius: 4px;
}

/* -------------------------------------------------------------------
   Petits écrans

   Le gabarit d'origine n'a aucune media query : son padding de 40/48 px
   consommerait 96 px sur un téléphone de 360 px. Ce palier est un ajout,
   pas une reprise.
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .terminal-frame {
        margin: 8px auto;
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        border-radius: 4px;
    }
    .terminal-header { padding: 10px 14px; gap: 8px; }
    .terminal-header__back { padding: 4px 6px; }
    .frame-corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .header-strip, .terminal-header__dot { animation: none !important; }
}