/* css/poemes-monde.css — les poèmes en 3D (2026-10-24) : la cellule plein écran (includes/poemes-monde.js), les titres
   sous les manuscrits, et la feuille de lecture par-dessus. Sans WebGL (pas de pm-3d sur body) : la page classique de
   poem.css, le poème ouvert s'affiche sous la liste. */

body.pm-3d{background:#030202;overflow:hidden}
body.pm-3d .theme-btn,body.pm-3d footer{display:none}
.pm-stage,.pm-top,.pm-hint{display:none}
body.pm-3d .pm-stage{display:block;position:fixed;inset:0}
.pm-stage canvas{display:block;width:100%;height:100%}
.pm-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.1;mix-blend-mode:overlay;animation:pm-grain 1s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes pm-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}}

.pm-marks{position:absolute;inset:0;pointer-events:none}
.pm-mark{position:absolute;left:0;top:0;margin:10px 0 0 -90px;width:180px;display:grid;gap:2px;padding:0;border:0;background:none;
  text-align:center;pointer-events:auto;cursor:pointer;color:rgba(240,230,212,.72);font-family:var(--font);text-shadow:0 1px 8px #000}
.pm-mark span{font-size:14px}
.pm-mark small{font-size:12px;opacity:.6}
.pm-mark.on,.pm-mark:hover{color:#fff}
.pm-mark:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:4px}

body.pm-3d .pm-top{display:block;position:fixed;left:clamp(18px,3vw,36px);top:clamp(16px,3vh,32px);z-index:5;color:#ece3d2}
.pm-back{color:rgba(236,227,210,.65);font-size:14px}
.pm-back:hover{color:#fff}
.pm-titre{margin-top:12px;font-size:30px;font-weight:400;letter-spacing:-.02em}
.pm-sous{margin-top:6px;font-size:13px;line-height:1.5;color:rgba(236,227,210,.5)}
body.pm-3d .pm-hint{display:block;position:fixed;left:0;right:0;bottom:24px;z-index:5;text-align:center;font-size:13px;letter-spacing:.04em;color:rgba(236,227,210,.45);pointer-events:none}
body.pm-lit .pm-hint{opacity:0}

/* avec 3D : la liste et les poèmes fermés hors de l'écran (clavier, moteurs) ; la liste réapparaît au clavier */
body.pm-3d .pm-page{position:fixed;inset:0;z-index:30;max-width:none;padding:0;pointer-events:none}   /* au-dessus du voile (z 25) */
body.pm-3d .pm-page > .back-link,body.pm-3d .pm-page > .page-title,body.pm-3d .pm-page > .page-sub{display:none}
body.pm-3d .pm-liste{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:auto}
body.pm-3d .pm-liste:focus-within{left:clamp(18px,3vw,36px);bottom:60px;z-index:6;width:min(420px,90vw);height:auto;clip-path:none;padding:12px 16px;border-radius:6px;background:rgba(3,2,2,.92);color:#ece3d2}

/* la feuille de lecture */
.pm-poeme{margin-top:40px}
.pm-fermer{display:none}
.pm-poeme-titre{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--fg)}
.pm-poeme-date{margin:4px 0 20px;font-size:13px;color:var(--muted)}
body.pm-3d .pm-poeme{position:fixed;left:50%;top:50%;z-index:30;width:min(640px,calc(100vw - 32px));max-height:min(86vh,900px);margin:0;overflow:auto;
  transform:translate(-50%,-50%) rotate(-.4deg);padding:34px clamp(22px,5vw,56px) 44px;pointer-events:auto;
  background:#ebe1cb;color:#2a1b10;box-shadow:0 30px 80px rgba(0,0,0,.7);
  background-image:radial-gradient(ellipse at 20% 10%,rgba(255,250,235,.5),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(150,110,60,.18),transparent 55%)}
body.pm-3d .pm-poeme[hidden]{display:none}
body.pm-3d .pm-fermer{display:inline-block;margin-bottom:22px;padding:0;border:0;background:none;color:#6a4a2c;font:inherit;font-size:14px;cursor:pointer}
body.pm-3d .pm-fermer:hover{color:#2a1b10}
body.pm-3d .pm-fermer:focus-visible{outline:1px solid #6a4a2c;outline-offset:4px}
body.pm-3d .pm-poeme-titre{font-size:26px;color:#2a1b10}
body.pm-3d .pm-poeme-date{color:#7a5a3a}
body.pm-3d .pm-poeme .prose{color:#2a1b10;font-size:17px;line-height:1.85}
.pm-voile{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.55)}
.pm-voile[hidden]{display:none}
body:not(.pm-3d) .pm-voile{display:none}

@media(prefers-reduced-motion:reduce){.pm-grain{animation:none}}