/* V20 — HAUTE MATIÈRE NUMÉRIQUE : poussière d'or, SDF, lentille, guilloché, gravure */
#gold-dust{position:fixed;inset:0;z-index:97;pointer-events:none;mix-blend-mode:screen}

/* — Typographie cinétique variable — */
.eyebrow,.stage-eyebrow,.hero-eyebrow,.stage-band span,.po-list>div{font-family:'Instrument Sans',Instrument,sans-serif}

/* — Lentille de réfraction du héros — */
.hero-lens{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .55s var(--ease)}
.hero-lens.on{opacity:1}

/* — Fond ray-marché de la philosophie — */
.philosophy{position:relative;overflow:hidden}
.philosophy .sdf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.philosophy .olympe-colonne{position:absolute;right:clamp(18px,4vw,64px);top:50%;transform:translateY(-50%);height:88%;width:auto;opacity:.85;filter:drop-shadow(0 0 5px oklch(.7003 calc(var(--ol-c-pat)*.866) var(--ol-h-pat) / .4));z-index:1;pointer-events:none}
@media (max-width:900px){.philosophy .olympe-colonne{display:none}}
.philosophy .philosophy-grid{position:relative;z-index:1}

/* — Guilloché génératif du Private Office — */
.private-office{position:relative;overflow:hidden}
.private-office .guilloche{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.14;pointer-events:none}
.private-office .po-media,.private-office .po-body{position:relative;z-index:1}

/* — Gravure sur laiton — */
.engraving{margin-top:30px;padding-top:24px;border-top:1px solid oklch(.9418 calc(var(--ol-c-pat)*.225) var(--ol-h-pat) / .14);display:grid;gap:14px}
.eng-eyebrow{font-family:'Instrument Sans',Instrument,sans-serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft)}
.engraving p{margin:6px 0 0;font-family:Cardo,serif;font-style:italic;font-size:15.5px;color:oklch(.9418 calc(var(--ol-c-pat)*.225) var(--ol-h-pat) / .62);max-width:46ch}
.eng-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
#eng-canvas{width:min(340px,100%);aspect-ratio:26/15;border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 0 0 1px oklch(.9451 calc(var(--ol-c-pat)*.695) var(--ol-h-pat) / .18);cursor:crosshair}
#eng-input{width:96px;background:transparent;border:0;border-bottom:1px solid oklch(.7581 calc(var(--ol-c-pat)*.907) var(--ol-h-pat) / .45);
  font-family:Gloock,serif;font-size:34px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);
  padding:4px 2px 8px;text-align:center;outline:none;transition:border-color .3s}
#eng-input:focus{border-color:var(--gold-soft)}
#eng-input::selection{background:oklch(.6789 calc(var(--ol-c-pat)*1.1) var(--ol-h-pat) / .35)}

/* — Bascule du son — */
.sound-toggle{display:inline-flex;align-items:center;gap:8px;color:oklch(.7105 calc(var(--ol-c-sang)*.258) var(--ol-h-sang));transition:color .3s}
.sound-toggle:hover{color:var(--gold-soft)}
.sound-toggle svg{width:12px;height:12px;stroke:currentColor}
.sound-toggle .snd-off{display:inline}
.sound-toggle .snd-on{display:none}
.sound-toggle[aria-pressed="true"]{color:var(--gold-soft)}
.sound-toggle[aria-pressed="true"] .snd-off{display:none}
.sound-toggle[aria-pressed="true"] .snd-on{display:inline}

/* — Ambiance du Portail — */
.ambiance-btn{margin-top:26px;display:inline-flex;align-items:center;gap:12px;border:1px solid oklch(.7581 calc(var(--ol-c-pat)*.907) var(--ol-h-pat) / .4);
  border-radius:999px;padding:11px 22px;color:var(--gold-soft);
  font-family:'Instrument Sans',Instrument,sans-serif;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  transition:border-color .3s,color .3s,background .3s}
.ambiance-btn:hover{border-color:var(--gold-soft);color:oklch(.8868 calc(var(--ol-c-pat)*.658) calc(var(--ol-h-pat) + 6.4));background:oklch(.6789 calc(var(--ol-c-pat)*1.1) var(--ol-h-pat) / .06)}
.ambiance-btn svg{width:14px;height:14px;stroke:currentColor}
.ambiance-btn[aria-pressed="true"] svg{animation:ambPulse 1.6s ease-in-out infinite}
@keyframes ambPulse{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:900px){
  .engraving{margin-top:22px}
  #eng-canvas{width:min(300px,100%)}
}