/* =====================================================================
   P0 — la Home / le hall. MOBILE D'ABORD : tout est pensé pour un pouce
   sur un téléphone, l'écran large n'est qu'un élargissement.
   ===================================================================== */

.p0h2 {
    --noir:  #05080A;
    --nuit:  #0A1418;
    --bord:  #14484A;
    --teal:  #1E6E6A;
    --vert:  #5BC98A;
    --vertv: #7DF0A8;
    --or:    #E0B24C;
    --orl:   #FFE9B0;
    --rouge: #E0453C;
    --cyan:  #4FE8FF;
    --gris:  #6E7F74;
    --blanc: #E6EDE8;

    /* 100svh et jamais 100vh/100dvh : la barre d'URL mobile se rétracte
       et ferait sauter toute la grille. */
    min-height: 100svh;
    background: var(--noir);
    color: var(--vert);
    font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 0 10px calc(72px + env(safe-area-inset-bottom));
    max-width: 760px;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
}
.p0h2 * { box-sizing: border-box; }

/* --- ligne 0 --- */
.p0h2-top {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 4px 10px;
    position: sticky; top: 0; z-index: 5;
    background: linear-gradient(var(--noir) 72%, transparent);
}
.p0h2-logo {
    font-size: 22px; font-weight: 700; letter-spacing: .1em; color: var(--vertv);
    border: 2px solid var(--vertv); padding: 1px 7px;
}
.p0h2-bin { font-size: 10px; color: var(--teal); flex: 1; }
.p0h2-statut { font-size: 11px; letter-spacing: .1em; display: flex; align-items: center; gap: 6px; }
.p0h2-statut i {
    width: 9px; height: 9px; background: var(--vert); display: inline-block;
    animation: p0h2-clign 2.4s steps(1) infinite;
}
@keyframes p0h2-clign { 0%, 70% { opacity: 1 } 71%, 100% { opacity: .25 } }

/* --- panneaux --- */
.p0h2-panneau {
    border: 1px solid var(--bord);
    background: rgba(10, 20, 24, .72);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.p0h2-panneau h1 {
    margin: 0 0 8px; font-size: 17px; letter-spacing: .1em; color: var(--vertv); font-weight: 700;
}
.p0h2-panneau h2 {
    margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; color: var(--gris); font-weight: 400;
}
.p0h2-h2b { margin-top: 16px !important; }
.p0h2-panneau p { margin: 0 0 8px; }
.p0h2-dim { color: var(--teal); }

.p0h2-perso header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.p0h2-perso header h2 { flex: 1; margin: 0; color: var(--orl); letter-spacing: .12em; }
.p0h2-fermer {
    background: none; border: 1px solid var(--bord); color: var(--gris);
    font: inherit; cursor: pointer; padding: 0 8px; line-height: 1.6;
    min-width: 32px; min-height: 32px;      /* cible tactile */
}
.p0h2-perso-corps { display: flex; gap: 12px; align-items: flex-start; }
.p0h2-portrait {
    width: 96px; height: auto; flex: none;
    image-rendering: pixelated;              /* sans ça, le pixel art devient une bouillie */
    border: 1px solid var(--bord);
}
.p0h2-replique { min-height: 5.2em; color: var(--blanc); }
.p0h2-replique::after {
    content: "▌"; color: var(--vert);
    animation: p0h2-curs 1s steps(1) infinite;
}
.p0h2-replique.fini::after { animation-delay: .4s; }
@keyframes p0h2-curs { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }

/* --- la scène isométrique --- */
.p0h2-scene {
    position: relative;
    border: 1px solid var(--bord);
    margin-bottom: 10px;
    background: var(--noir);
    overflow: hidden;
}
.p0h2-scene canvas {
    display: block; width: 100%;
    height: 46svh; min-height: 240px; max-height: 460px;
    touch-action: none;                      /* le glissement pilote la caméra */
    cursor: grab;
}
.p0h2-scene-etq {
    position: absolute; left: 8px; bottom: 8px;
    background: var(--vert); color: var(--noir);
    font-size: 11px; letter-spacing: .08em; padding: 2px 8px;
}

/* --- menus --- */
.p0h2-menu { list-style: none; margin: 0; padding: 0; }
.p0h2-menu li { border-bottom: 1px solid rgba(20, 72, 74, .5); }
.p0h2-menu li:last-child { border-bottom: 0; }
.p0h2-menu a {
    display: block; padding: 9px 2px 9px 16px; position: relative;
    text-decoration: none; color: inherit;
    min-height: 44px;                        /* cible tactile confortable */
}
.p0h2-menu a::before { content: ">"; position: absolute; left: 0; color: var(--or); }
.p0h2-menu a:hover, .p0h2-menu a:focus-visible { background: rgba(30, 110, 106, .18); }
.p0h2-menu b { display: block; color: var(--blanc); font-weight: 400; letter-spacing: .06em; }
.p0h2-menu span { display: block; font-size: 11px; color: var(--gris); }

.p0h2-conn { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 12px; }
.p0h2-conn dt { color: var(--gris); font-size: 11px; letter-spacing: .08em; }
.p0h2-conn dd { margin: 0; color: var(--blanc); }
.p0h2-conn dd.on { color: var(--vertv); }
.p0h2-conn dd.on::before { content: "✓ "; }

.p0h2-btn {
    display: block; text-align: left; padding: 10px 12px; min-height: 44px;
    border: 1px solid var(--bord); color: var(--vert); text-decoration: none;
}
.p0h2-btn:hover { background: var(--vert); color: var(--noir); }

/* --- champ 3615 --- */
.p0h2-code { display: flex; gap: 6px; }
.p0h2-code input {
    flex: 1; min-width: 0; background: var(--nuit); border: 1px solid var(--bord);
    color: var(--orl); font: inherit; letter-spacing: .4em; padding: 10px;
    min-height: 44px;
}
.p0h2-code input:focus { outline: none; border-color: var(--or); }
.p0h2-code button {
    background: var(--or); border: 0; color: var(--noir); font: inherit; font-weight: 700;
    padding: 0 14px; min-height: 44px; cursor: pointer; letter-spacing: .08em;
}
.p0h2-code-rep { min-height: 1.5em; font-size: 11px; margin: 6px 0 0; }
/* Un préfixe caractère, jamais la couleur seule : les Minitel monochromes
   rendaient les 8 couleurs en 8 gris, et WCAG 1.4.1 dit la même chose. */
.p0h2-code-rep.ok { color: var(--vertv); }
.p0h2-code-rep.ok::before { content: "✓ "; }
.p0h2-code-rep.ko { color: var(--rouge); }
.p0h2-code-rep.ko::before { content: "! "; }

/* --- barre de navigation basse : le pouce y arrive sans étirer la main --- */
.p0h2-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--nuit); border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom);
}
.p0h2-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px; min-height: 56px;
    color: var(--gris); text-decoration: none;
}
.p0h2-nav a.on { color: var(--vertv); box-shadow: inset 0 2px 0 var(--vertv); }
.p0h2-nav b { font-size: 17px; font-weight: 400; }
.p0h2-nav span { font-size: 10px; letter-spacing: .1em; }

/* --- large : deux colonnes, jamais avant --- */
@media (min-width: 680px) {
    .p0h2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
    .p0h2-portrait { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .p0h2-statut i, .p0h2-replique::after { animation: none; }
}