/* fresken/epok.css — style commun des 5 pages d'époque [nuit du 13 juil.]
   L'arborescence de la grande fresque : chaque époque = sa sous-fresque. */
:root{ --creme:#faf7f2; --encre:#26241f; --ligne:#e2d9c0; --accent:#8a5a2b;
  --bleu:#1d3a8f; --ok:#1a8f4d; --radius:14px; }
*{box-sizing:border-box}
body{margin:0; font-family:Georgia,'Times New Roman',serif; background:var(--creme);
  color:var(--encre); font-size:17px; line-height:1.6}
header{color:#fff; padding:26px 16px 20px; text-align:center}
header h1{margin:0; font-size:26px; text-shadow:0 2px 4px rgba(0,0,0,.35)}
header .sous{font-size:15px; opacity:.95; font-style:italic}
header a{color:#fff; font-size:13.5px; text-decoration:none; font-family:system-ui,sans-serif}
main{max-width:680px; margin:0 auto; padding:14px 12px 60px}
.hem{position:fixed; top:10px; left:10px; z-index:1200; background:#fff; border:2px solid var(--ligne);
  border-radius:12px; padding:6px 10px; text-decoration:none; font-size:18px}
.fresk{position:fixed; top:10px; right:10px; z-index:1200; background:#fff; border:2px solid var(--ligne);
  border-radius:12px; padding:6px 10px; text-decoration:none; font-size:13px; font-family:system-ui,sans-serif; color:var(--encre)}
.idee{background:#fff; border:3px double var(--accent); border-radius:var(--radius);
  padding:14px 16px; margin:14px 0; font-size:17.5px}
.idee b{color:var(--accent)}
section.salle{background:#fff; border:2px solid var(--ligne); border-radius:var(--radius);
  padding:14px 16px; margin:16px 0}
section.salle h2{margin:0 0 8px; font-size:19px; color:var(--accent)}
.sv{display:block}
.fr{display:block; font-style:italic; color:#6d675c; font-size:.95em; margin-top:2px}
.perso{display:flex; gap:10px; margin:10px 0; align-items:flex-start}
.perso .tete{font-size:26px; min-width:36px; text-align:center}
.karta{height:300px; border-radius:12px; border:2px solid var(--ligne); margin:10px 0; z-index:1}
.verk{display:block; width:100%; max-width:460px; margin:10px auto; border-radius:10px; border:2px solid var(--ligne)}
.legende{font-size:13px; color:#8a7a55; text-align:center; font-family:system-ui,sans-serif; margin-top:-4px}
.mer{background:#fffdf6; border:2px dashed var(--accent); border-radius:12px; padding:10px 14px; margin:12px 0; font-size:15px}
.mer a{color:var(--bleu); font-family:system-ui,sans-serif; font-size:14px}
.portes{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:18px 0}
.portes a{background:#fff; border:2px solid var(--ligne); border-radius:12px; padding:9px 13px;
  text-decoration:none; color:var(--encre); font-family:system-ui,sans-serif; font-size:14px; font-weight:700}
.portes a.ici{border-color:var(--accent); background:#fdf3e3}

body[data-lang="sv"] .fr{display:none}
body[data-lang="fr"] .sv{display:none}
body[data-lang="fr"] .fr{font-style:normal; color:var(--encre); font-size:1em}
.langval{display:flex; gap:8px; justify-content:center; margin:10px 0 2px; font-family:system-ui,sans-serif}
.langval button{border:2px solid var(--ligne); background:#fff; border-radius:12px; padding:7px 14px;
  font-size:13.5px; font-weight:700; cursor:pointer; color:var(--encre)}
.langval button.on{border-color:var(--accent); background:#fdf3e3}