/* =========================================================
   ATLAS — l'assistant de papa : le noyau (IA de film), ambre sur noir
   ========================================================= */
:root {
  --bg: #07080a;
  --ambre: #ffb547;
  --ambre2: #ffcf8a;
  --texte: #f4ece0;
  --doux: rgba(255, 217, 160, .55);
  --carte: #121317;
  --ligne: rgba(255, 181, 71, .28);
  --alerte: #ff7a45;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--texte); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow: hidden; }
#face { display: none; } /* l'état d'Atlas (écoute, réflexion, parole…) : lu par le noyau, jamais affiché */

/* ---------- le noyau et l'affichage de bord ---------- */
#papa-hud { position: fixed; inset: 0; z-index: 3; overflow: hidden; color: #ffd9a0; font-family: ui-monospace, 'DejaVu Sans Mono', 'Roboto Mono', monospace;
  background: radial-gradient(70% 55% at 50% 45%, rgba(255, 181, 71, .07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 181, 71, .025) 0 1px, transparent 1px 4px), var(--bg);
  transition: opacity .5s, filter .5s; }
#papa-hud[hidden] { display: none; }
#papa-hud::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .75)); }
#papa-hud.off { opacity: 0; filter: brightness(2) blur(2px); }
#noyau { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(88vw, 64vh, 620px); height: min(88vw, 64vh, 620px); }
.hud-coin { position: absolute; top: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; letter-spacing: .28em; color: rgba(255, 217, 160, .62); }
.hud-coin b { font-size: 13px; letter-spacing: .42em; color: var(--ambre2); font-weight: 700; }
.hud-tl { left: 22px; } .hud-tr { right: 22px; text-align: right; align-items: flex-end; }
.hud-tr b { font-size: clamp(18px, 4vmin, 26px); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.hud-panneau { position: absolute; top: 45%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; font-size: 10px; letter-spacing: .24em; }
.hud-panneau p { margin: 0; display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 1px solid rgba(255, 181, 71, .35); }
.hud-panneau i { font-style: normal; color: rgba(255, 217, 160, .45); }
.hud-panneau em { font-style: normal; color: #ffe2b5; font-size: 12px; letter-spacing: .12em; text-shadow: 0 0 8px rgba(255, 181, 71, .45); }
.hud-panneau em.alerte { color: var(--alerte); text-shadow: 0 0 8px rgba(255, 110, 60, .6); }
.hud-l { left: 22px; } .hud-r { right: 22px; text-align: right; }
.hud-r p { padding: 0 10px 0 0; border-left: 0; border-right: 1px solid rgba(255, 181, 71, .35); align-items: flex-end; }
#hud-etat { position: absolute; left: 50%; top: calc(45% + min(44vw, 32vh, 310px)); transform: translateX(-50%); font-size: 11px; letter-spacing: .6em; padding-left: .6em; color: var(--ambre2); text-shadow: 0 0 10px rgba(255, 181, 71, .6); white-space: nowrap; }
#papa-hud[data-etat="think"] #hud-etat { animation: hudClign 1s steps(2) infinite; }
#papa-hud[data-etat="oops"] #hud-etat { color: var(--alerte); }
@keyframes hudClign { 50% { opacity: .35; } }
.hud-cadre { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; }
.hud-cadre path { fill: none; stroke: rgba(255, 181, 71, .5); vector-effect: non-scaling-stroke; stroke-width: 1.4; }
#papa-hud.boot .hud-coin, #papa-hud.boot .hud-panneau, #papa-hud.boot #hud-etat { animation: hudBoot 1.6s ease-out both; }
#papa-hud.boot .hud-panneau { animation-delay: .35s; }
@keyframes hudBoot { 0%, 25% { opacity: 0; } 32% { opacity: 1; } 38% { opacity: .15; } 50%, 100% { opacity: 1; } }

/* ---------- le détail à l'écran (seulement si on le demande : « affiche-le ») ---------- */
.board { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; max-width: min(92vw, 900px); max-height: 86vh; overflow: auto; overflow-x: hidden;
  padding: 18px 22px; border-radius: 22px; border: 2px solid #e0a040; background: rgba(16, 13, 9, .96); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.board[hidden] { display: none; }
.board .papa-txt { width: min(80vw, 720px); max-width: 100%; text-align: left; color: var(--texte); font-size: clamp(15px, 2.6vmin, 18px); line-height: 1.55; }
.board .papa-txt h3 { margin: 0 0 8px; color: var(--ambre2); font-size: clamp(16px, 3vmin, 21px); letter-spacing: .06em; }
.board .papa-txt h4 { margin: 14px 0 6px; color: var(--ambre2); }
.board .papa-txt p { margin: 0 0 10px; }
.board .papa-txt ul, .board .papa-txt ol { margin: 0 0 10px; padding-left: 22px; }
.board .papa-txt li { margin: 3px 0; }
.board .papa-txt code { font-family: ui-monospace, 'DejaVu Sans Mono', monospace; font-size: .92em; background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 5px; }
.board .papa-txt .pcode { position: relative; margin: 8px 0 12px; }
.board .papa-txt .pcode button { position: absolute; top: 6px; right: 6px; }
.board .papa-txt pre { margin: 0; padding: 12px 14px; overflow: auto; background: #07090c; border: 1px solid var(--ligne); border-radius: 10px; }
.board .papa-txt pre code { background: none; padding: 0; white-space: pre; }

/* ---------- le démarrage (un toucher : le son et le micro ont besoin d'un geste) ---------- */
#demarrer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(60% 45% at 50% 45%, rgba(255, 181, 71, .1), transparent 70%), var(--bg); cursor: pointer; }
#demarrer[hidden] { display: none; }
#demarrer .porte { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--ambre2); font-family: ui-monospace, 'DejaVu Sans Mono', monospace; text-align: center; }
#demarrer .anneau { width: 130px; height: 130px; border-radius: 50%; border: 1px solid rgba(255, 181, 71, .5); display: grid; place-items: center; box-shadow: 0 0 40px rgba(255, 181, 71, .18), inset 0 0 30px rgba(255, 181, 71, .12); animation: respire 3s ease-in-out infinite; }
#demarrer .anneau i { width: 18px; height: 18px; border-radius: 50%; background: #fff3dd; box-shadow: 0 0 22px 8px rgba(255, 181, 71, .7); }
#demarrer b { font-size: 18px; letter-spacing: .6em; padding-left: .6em; }
#demarrer small { font-size: 11px; letter-spacing: .3em; color: var(--doux); }
@keyframes respire { 50% { transform: scale(1.06); box-shadow: 0 0 60px rgba(255, 181, 71, .28), inset 0 0 40px rgba(255, 181, 71, .18); } }

/* ---------- réglages ---------- */
#btn-reglages { position: fixed; right: calc(env(safe-area-inset-right) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 9; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--ligne); background: rgba(18, 19, 23, .7); color: var(--ambre2); font-size: 18px; cursor: pointer; opacity: .55; }
#btn-reglages:hover { opacity: 1; }
dialog { border: 1px solid var(--ligne); border-radius: 18px; background: var(--carte); color: var(--texte); padding: 0; width: min(94vw, 620px); max-height: 90vh; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
.dlg { padding: 18px 20px; overflow: auto; max-height: 90vh; }
.dlg h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: .3em; color: var(--ambre2); font-family: ui-monospace, monospace; }
fieldset { border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; margin: 12px 0; padding: 10px 14px 14px; }
legend { color: var(--ambre); font-size: 13px; letter-spacing: .12em; padding: 0 6px; text-transform: uppercase; }
label { display: block; margin: 10px 0 0; font-size: 14px; }
label input:not([type=checkbox]), label select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0b0c0f; color: var(--texte); font-size: 15px; }
label.check { display: flex; gap: 10px; align-items: flex-start; }
label.check input { margin-top: 3px; }
.small { font-size: 12.5px; } .muted { color: rgba(244, 236, 224, .55); }
button { font: inherit; }
.go, .ghost { border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; }
.go { border: 0; background: var(--ambre); color: #1a1206; font-weight: 700; }
.ghost { border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: var(--texte); }
.ghost.sm { padding: 4px 10px; font-size: 12px; }
.danger { color: #ff9b85; border-color: rgba(255, 120, 90, .35); }
.ligne { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 14px; }
menu { display: flex; justify-content: flex-end; gap: 10px; margin: 14px 0 0; padding: 0; }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%); z-index: 30; padding: 9px 16px; border-radius: 999px; background: #1d1a14; border: 1px solid var(--ligne); color: var(--ambre2); font-size: 14px; }
#toast[hidden] { display: none; }

@media (max-width: 560px) {
  .hud-coin { top: 14px; font-size: 8px; } .hud-coin b { font-size: 11px; } .hud-tr b { font-size: 18px; }
  .hud-tl { left: 16px; } .hud-tr { right: 16px; }
  #noyau { top: 36%; width: min(92vw, 52vh); height: min(92vw, 52vh); }
  #hud-etat { top: calc(36% + min(46vw, 26vh) + 4px); font-size: 10px; }
  .hud-panneau { top: auto; transform: none; bottom: calc(env(safe-area-inset-bottom) + 70px); gap: 7px; font-size: 8px; }
  .hud-panneau em { font-size: 10px; }
  .hud-l { left: 16px; } .hud-r { right: 16px; }
}
@supports not (width: min(1px, 2px)) { #noyau { width: 88vw; height: 88vw; } .board .papa-txt { width: 80vw; } }

.carnet-h { margin: 12px 0 4px; color: var(--ambre); letter-spacing: .08em; }

/* le graphique des marchés : un zigzag et un canal, rien d'autre */
.board.graphe-board { padding: 14px 16px; }
.graphe { width: min(88vw, 860px); display: flex; flex-direction: column; gap: 6px; }
.graphe small { font-family: ui-monospace, 'DejaVu Sans Mono', monospace; letter-spacing: .4em; font-size: 11px; color: rgba(255, 217, 160, .6); }
.graphe canvas { width: 100%; height: auto; display: block; }