/* =====================================================================
   Project Horizon — public.css
   Layout public partagé (Foundation / Apollo Archives) :
   shell global, header sticky, nav, lang switcher, footer, grain pellicule.
   ===================================================================== */

.ph-body {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%,
                        rgba(232, 163, 61, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 100%,
                        rgba(90, 168, 176, 0.04) 0%, transparent 60%),
        var(--bg-warm);
    background-attachment: fixed;
    color: var(--c-bone);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

/* Grain pellicule (overlay statique, non animé) — global toutes pages publiques */
.ph-body::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.90 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    opacity: 0.18;
    mix-blend-mode: overlay;
}

/* ---------- Skip link (a11y) ----------------------------------------- */

.ph-skip {
    position: absolute; top: -48px; left: 16px; z-index: 200;
    padding: 8px 18px;
    background: var(--c-amber); color: var(--bg-warm);
    font-family: var(--font-tech); font-weight: 600;
    font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
    transition: top var(--t-fast);
}
.ph-skip:focus { top: 0; outline: 0; }

/* ---------- Header sticky -------------------------------------------- */

.ph-header {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background: rgba(10, 14, 26, 0.78);
    border-bottom: 1px solid rgba(232, 163, 61, 0.10);
}
.ph-header__inner {
    max-width: 1280px; margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; gap: 24px;
}

.ph-brand {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-tech);
    font-weight: 500; font-size: 12px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-bone);
}
.ph-brand__mark {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--c-amber);
    box-shadow: none;
    position: relative;
    overflow: visible;
}
.ph-brand__mark::before,
.ph-brand__mark::after {
    content: '';
    position: absolute;
    background: var(--c-amber);
}
.ph-brand__mark::before {
    inset: 6px; border-radius: 50%;
}
.ph-brand__mark::after {
    top: 50%; left: -4px; right: -4px;
    height: 1px; transform: translateY(-50%);
    opacity: 0.7;
}
.ph-brand__name { font-size: 12px; }

.ph-nav { display: flex; gap: 4px; margin: 0 auto; }
.ph-nav a {
    padding: 6px 12px;
    font-family: var(--font-tech);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-bone-dim);
    transition: color var(--t-fast), box-shadow var(--t-fast);
}
.ph-nav a:hover {
    color: var(--c-bone);
    background: transparent;
}
.ph-nav a.is-active {
    color: var(--c-amber);
    background: transparent;
    box-shadow: inset 0 -1px 0 var(--c-amber);
}

/* Switcher 3 langues : EN | FR | 中 */
.ph-lang {
    display: inline-flex; align-items: center;
    gap: 2px; padding: 2px;
    border: 1px solid rgba(232, 163, 61, 0.20);
    background: transparent;
}
.ph-nav + .ph-lang { margin-left: 0; }
.ph-header__inner > .ph-brand + .ph-lang { margin-left: auto; }

.ph-lang__btn {
    padding: 5px 10px; min-width: 32px;
    color: var(--c-bone-dim);
    font-family: var(--font-tech);
    font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
    text-align: center; line-height: 1.4;
    transition: color var(--t-fast), background var(--t-fast);
}
.ph-lang__btn:hover {
    color: var(--c-bone);
    background: rgba(232, 163, 61, 0.08);
}
.ph-lang__btn.is-active {
    background: var(--c-amber);
    color: var(--bg-warm);
    box-shadow: none;
}
.ph-lang__btn[lang="zh"] { font-size: 13px; letter-spacing: 0; }

.ph-main {
    flex: 1;
    position: relative;
    z-index: 2;   /* au-dessus du grain */
}

/* ---------- Footer --------------------------------------------------- */

.ph-footer {
    margin-top: auto;
    border-top: 1px solid rgba(244, 239, 230, 0.08);
    padding: 24px 0;
    color: var(--c-bone-dim);
    font-family: var(--font-tech);
    font-size: 11px; letter-spacing: 0.08em;
    position: relative; z-index: 2;
}
.ph-footer__inner {
    max-width: 1280px; margin: 0 auto;
    padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.ph-footer__copy { text-transform: uppercase; }
.ph-footer__links a { color: var(--c-bone-dim); text-transform: uppercase; }
.ph-footer__links a:hover { color: var(--c-amber); }

/* ---------- Responsive ----------------------------------------------- */

@media (max-width: 720px) {
    .ph-header__inner { gap: 12px; padding: 12px 16px; }
    .ph-nav { display: none; }
    .ph-brand__name { display: none; }
    .ph-footer__inner { flex-direction: column; gap: 8px; padding: 0 16px; }
}