@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700;800;900&family=Noto+Sans+Symbols+2&family=Noto+Sans+Math&display=swap');
:root{
  --bg-1:#5f74e3;
  --bg-2:#7b56d6;

  /* Surfaces (glass) en bleu, pas blanc */
  --panel: rgba(18, 34, 110, .38);
  --panel-2: rgba(38, 82, 190, .32);

  /* Texte (blanc) */
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.74);

  --border: rgba(255,255,255,.22);
  --shadow: 0 18px 55px rgba(0,0,0,.22);

  --accent:#4b5cff;
  --accent-hover:#3649ff;
  --accent-ink:#ffffff;
  --radius:18px;
  --max:1150px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

html[data-theme="dark"]{
  --panel: rgba(14,16,28,.58);
  --panel-2: rgba(14,16,28,.74);
  --text:#f2f4ff;
  --muted: rgba(242,244,255,.72);
  --border: rgba(255,255,255,.16);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
  --accent:#8b96ff;
  --accent-hover:#a6afff;
  --accent-ink:#0b0d16;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
  min-height:100vh;
}

/* Page d'accueil : fond "matrix" de signes */
body.home{
  background:
    linear-gradient(135deg, rgba(20,22,58,.82), rgba(25,31,95,.68)),
    url("assets/bg/home-symbols.jpeg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
a{color:inherit}
.container{width:min(1120px, calc(100% - 44px)); margin:0 auto;}
header{
  position:sticky; top:0; z-index:50;
  /* Toujours "glass" bleu/violet (meme en mode clair) */
  background: linear-gradient(135deg, rgba(43,52,191,.42), rgba(138,85,255,.22));
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  font-weight:900; letter-spacing:.02em;
}
.brand img{width:40px; height:40px; border-radius:999px; object-fit:contain; background:var(--panel-2); border:1px solid var(--border);}
.navlinks{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:center;}
.navlinks a{ text-decoration:none; font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.92);}
.navlinks a:hover{ color:var(--accent); }

.hero{padding:38px 0 28px;}
.hero-inner{
  padding: 74px 0;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px;
  align-items:center;
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; padding:56px 0; }
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.28)),
    url('assets/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05) brightness(.85);
  transform: scale(1.04);
  pointer-events:none;
}
.hero-bg::after{ pointer-events:none; }

/* Accueil : on utilise le même fond que le body, et on passe en 1 colonne (pas d'image "spirale") */
body.home .hero-inner{ grid-template-columns: 1fr; }
body.home .hero-bg{
  background:
    linear-gradient(135deg, rgba(20,22,58,.55), rgba(25,31,95,.25)),
    url("assets/bg/home-symbols.jpeg");
  background-size: cover;
  background-position: center;
  filter: none;
  opacity: .9;
}

/* Accueil : garder un contraste élevé (background très chargé) */
body.home .hero-card{
  background: var(--panel-2);
  border:1px solid var(--border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body.home .hero-card h1,
body.home .hero-card h2,
body.home .hero-card h3{ color: rgba(255,255,255,.96); }
body.home .hero-card .hero-sub{ color: rgba(255,255,255,.78); }

[data-theme="dark"] body.home .hero-card{
  background: rgba(8,12,28,.70);
}
[data-theme="dark"] body.home .hero-card h1,
[data-theme="dark"] body.home .hero-card h2,
[data-theme="dark"] body.home .hero-card h3{ color: #f3f5ff; }
[data-theme="dark"] body.home .hero-card .hero-sub{ color: rgba(255,255,255,.78); }
.hero-card{
  background: var(--panel-2);
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid var(--border);
  color:var(--muted);
  letter-spacing:.12em;font-size:12px;font-weight:800;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
h1{
  margin:14px 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.lead{margin:0 0 18px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.6; max-width:56ch;}
.actions{display:flex; gap:12px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius: 14px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background: var(--accent);
  color:#fff;
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{ background: rgba(255,255,255,.06); }

.section{padding:54px 0;}
.section h2{
  margin:0 0 10px;
  font-size: clamp(22px, 2.3vw, 30px);
  letter-spacing:-.01em;
}
.sub{margin:0 0 18px; color:var(--muted); max-width:70ch; line-height:1.55;}
.grid-3{display:grid; gap:14px; grid-template-columns: repeat(3, 1fr);}
.grid-4{display:grid; gap:14px; grid-template-columns: repeat(4, 1fr);}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns: repeat(2, 1fr);} }

/* Accès + Ressources : évite le rendu "2 + 1" sur mobile/tablette */
.resources-grid{display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); align-items:stretch}
@media (max-width:980px){ .resources-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .grid-4{grid-template-columns:1fr;} }

.card{
  background: var(--panel-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card h3{margin:0 0 6px; font-size:15px;}
.card p{margin:0; color:var(--muted); line-height:1.5;}

.pill{
  display:inline-flex; align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel-2);
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

footer{padding:28px 0 40px; color:var(--muted); border-top:1px solid var(--border);}
.small{font-size:13px; color:var(--muted); line-height:1.6;}
hr.sep{border:none; border-top:1px solid var(--border); margin:14px 0;}

.input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  font:inherit;
  background:var(--panel-2);
}
label{font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; display:block; margin:0 0 8px;}
.result{
  border-radius: 22px;
  border:1px dashed rgba(122,31,43,.35);
  padding:16px;
  background: rgba(122,31,43,.06);
}
.result .big{font-size:28px; font-weight:900; letter-spacing:.02em;}
.result .small{margin-top:8px; color:var(--muted);}

.sign-controls{ display:grid; gap:12px; margin-bottom: -9px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:999px; border:1px solid var(--border); background:var(--panel-2);
  font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
}
.filter-btn:hover{ border-color: rgba(122,31,43,.35); }
.filter-btn.active{ background: rgba(122,31,43,.10); border-color: rgba(122,31,43,.45); color: var(--accent); }
.glyph{
  width: 120px; height:120px;
  border-radius: 20px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(122,31,43,.10), rgba(0,0,0,.02));
  display:grid; place-items:center;
  font-weight:700; /* was 900 (too épais) */
  font-stretch: normal;
  letter-spacing: 0;
  color:var(--accent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sign-foot{ margin-top:12px; color:var(--muted); font-weight:700; }
.modal{ position:fixed; inset:0; display:none; z-index:120; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal-card{position:relative;width:min(780px, calc(100% - 24px));margin: 60px auto;background:var(--panel-2);border:1px solid var(--border);border-radius:18px;box-shadow: var(--shadow);padding:18px;backdrop-filter: blur(18px);-webkit-backdrop-filter: blur(18px);}
.modal-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--border);background: rgba(255,255,255,.18);color:var(--text);font-size:22px;font-weight:900;cursor:pointer;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.modal-top{ display:flex; gap:14px; align-items:center; padding-top: 8px; }
.modal-glyph{ width: 120px; height:120px; border-radius:22px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(122,31,43,.12), rgba(0,0,0,.02)); display:grid; place-items:center; font-weight:900; color:var(--accent); font-size:32px; }
.modal-id{ font-weight:900; letter-spacing:.12em; font-size:12px; color:var(--muted); text-transform:uppercase; }
.modal-title{ font-size:20px; font-weight:900; letter-spacing:-.2px; }
.modal-cat{ color: var(--accent); font-weight:900; }
.modal-desc{ margin:12px 0 0; color: var(--muted); }
.modal-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

/* Glyph formatting: base + indice (ex: Eₚ, Fₓ) */
.glyph .g-base{ font-size: 50px; line-height:1; font-weight:700; }
.glyph .g-sub{
  font-size: 20px;
  line-height:1;
  font-weight:700;
  margin-left:2px;
  transform: translateY(12px);
  letter-spacing:0;
}
.modal-glyph .g-base{ font-size: 48px; line-height:1; }
.modal-glyph .g-sub{
  font-size: 18px;
  position:relative;
  bottom:-8px;
  margin-left:3px;
}


/* Ensure base+indice stay on one line even if .glyph uses flex-column */
.glyph .g-code{display:inline-flex;align-items:flex-end;justify-content:center;line-height:1;}
.modal-glyph .g-code{display:inline-flex;align-items:flex-start;justify-content:center;}
.glyph .g-base,.glyph .g-sub,.modal-glyph .g-base,.modal-glyph .g-sub{display:inline-block;}


/* Periodic table layout */
.ptable-wrap{overflow:auto;border-radius:18px;box-shadow:var(--shadow);background:var(--panel-2);padding:14px;border:1px solid var(--border);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);}
.ptable{position:relative;width:min(900px, 100%);margin:0 auto;aspect-ratio:1612/1912;background:transparent;}
.ptile{position:absolute;border:2px solid rgba(0,0,0,.75);border-radius:0; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ptile:focus{outline:3px solid rgba(122,31,43,.35); outline-offset:2px;}
.ptile .pnum{position:absolute; top:4px; right:6px; font-size:11px; font-weight:700; color:rgba(0,0,0,.75);}
.ptile .psym{font-weight:900; color:#111; line-height:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:clamp(30px, 4.2vw, 78px);}
/* Make SVG icons black in periodic view (like your reference) */
.ptable .psym img{filter:grayscale(1) brightness(0); width:78%; height:78%; object-fit:contain;}
/* Subscript formatting inside periodic tiles */
.ptable .psym .g-code{display:inline-flex;align-items:flex-start;justify-content:center;}
.ptable .psym .g-base{font-size:clamp(30px, 4.5vw, 82px); line-height:1; display:inline-block;}
.ptable .psym .g-sub{font-size:clamp(16px, 2.4vw, 40px); position:relative; bottom:-10px; margin-left:4px; display:inline-block;}
/* Bottom reference table: same look but not clickable */
.ptable-bottom .ptile{cursor:default; pointer-events:none;}


/* Card ID badge */
.glyph{position:relative;}
/* Legend */
.legend{
  margin-top:10px;
  padding:18px;
  border-radius:18px;
  background:var(--panel-2);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.legend h3{margin:0 0 12px 0;}
.legend-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.legend-row{display:flex;align-items:center;gap:14px;}
.swatches{display:flex;gap:10px;}
.swatch{width:34px;height:34px;border:4px solid #000;border-radius:4px;display:inline-block;}
.legend .label{font-weight:900;letter-spacing:.02em;}

/* Card ID badge (small, top-right, does NOT cover the symbol) */
.id-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  font-size:9px;
  font-weight:800;
  color:rgba(255,255,255,.90);
  background: rgba(8, 14, 40, .55);
  border:1px solid rgba(255,255,255,.22);
  padding:2px 5px;
  border-radius:999px;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  pointer-events:none;
}

.ptable .psym svg{width:78%; height:78%;}


/* Exact periodic table (image + invisible hotspots) */
.ptable-image-wrap{display:flex;justify-content:center;}
.ptable-image{
  position:relative;
  width:min(1100px, 100%);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  background:var(--panel-2);
}
.ptable-image img{display:block;width:100%;height:auto;}
.ptable-overlay{position:absolute;inset:0;}
.hotspot{
  position:absolute;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.hotspot:focus{
  outline:3px solid rgba(122,31,43,.35);
  outline-offset:2px;
}
.hotspot:hover{
  box-shadow: inset 0 0 0 3px rgba(122,31,43,.25);
}
.legend-image-wrap{display:flex;justify-content:center;}
.legend-image-wrap img{width:min(680px,100%);height:auto;display:block;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* Hide category filter chips on the Signs page (user requested cleaner UI) */
/* Signs page: category tabs */
#signFilters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.sign-tab{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(10,16,46,.28);
  color:rgba(255,255,255,.92);
  padding:9px 12px;
  border-radius:14px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.sign-tab:hover{transform:translateY(-1px);}
.sign-tab.active{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

/* In light theme, keep tabs readable */
[data-theme="light"] .sign-tab{
  background:rgba(255,255,255,.60);
  color:rgba(10,16,46,.92);
  border-color:rgba(10,16,46,.12);
}
[data-theme="light"] .sign-tab.active{
  background:rgba(255,255,255,.85);
  border-color:rgba(10,16,46,.18);
}


.periodic-img{width:100%;max-width:980px;height:auto;display:block;margin:18px auto;}
.legend-img{width:100%;max-width:520px;height:auto;display:block;margin:18px auto 40px;}

.brand-title{font-weight:900;letter-spacing:.08em;font-size:18px;}
@media(min-width:900px){.brand-title{font-size:20px;}}


/* Sign picker row */
.sign-pick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
#symbolSelect{
  min-width: 260px;
}

/* Palette keyboard modal */
.palette-controls{
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}
.palette-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap:10px;
  padding-top: 8px;
}
.palette-btn{
  border:1px solid var(--border);
  background:var(--panel-2);
  border-radius:16px;
  padding: 10px 8px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.palette-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}
.palette-g{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 46px;
  font-weight:900;
  color: var(--accent);
  font-size: 28px;
}
.palette-n{
  text-align:center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}


/* --- Glyph typography (consistency) --- */
.glyph, .modal-glyph, .ptable .tile .g, .ptable .tile .g-code, .glyph .g-code, .g-code, .g-base, .g-sub, .palette button{
  font-family: var(--font-glyph);
  font-variant-ligatures: none;
  text-rendering: geometricPrecision;
}
.glyph{
  font-size: 42px;
  line-height: 1;
}
.modal-glyph{
  font-size: 72px;
  line-height: 1;
}
.brand-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
@media (max-width: 680px){
  .brand-title{ font-size: 20px; }
}


/* --- Header tools (right side) --- */
.nav{ gap:14px; }
.navtools{display:flex; align-items:center; gap:10px;}
@media (max-width: 980px){
  .navtools{display:flex; align-items:center; gap:10px;}
}

/* --- Quick palette grid --- */
.palette{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap:10px;
}
.palette button,
.palette a{
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-2);
  padding:12px 10px;
  cursor:pointer;
  display:grid;
  place-items:center;
  min-height:74px;
  text-decoration:none;
}
.palette button:hover,
.palette a:hover{ border-color: rgba(122,31,43,.35); }
.palette .p-id{
  position:absolute; top:10px; right:10px;
  font-size:12px; font-weight:800;
  color:rgba(255,255,255,.92);
  background: rgba(8, 14, 40, .55);
  border: 1px solid rgba(255,255,255,.22);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.palette .p-glyph{
  font-size:44px; line-height:1;
  color:var(--accent);
  font-weight:700;
  font-stretch: normal;
  letter-spacing: 0;
  transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.palette img{ width:40px; height:40px; object-fit:contain; }

/* --- Composer --- */
.composer-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border:1px dashed rgba(0,0,0,.18);
  border-radius:18px;
  background: rgba(0,0,0,.015);
  min-height:64px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-2);
  cursor:grab;
  user-select:none;
}
.chip:active{ cursor:grabbing; }
.chip .chip-g{ display:grid; place-items:center; min-width:42px; }
.chip .chip-id{ font-size:11px; font-weight:900; color:rgba(20,20,20,.55); }
.chip .chip-x{
  border:none; background:rgba(0,0,0,.04);
  border-radius:12px; padding:6px 8px;
  cursor:pointer; font-weight:900;
}
.chip .chip-x:hover{ background:rgba(122,31,43,.10); color:var(--accent); }


/* --- Hero visual replacement --- */
.hero-inner{ gap: 22px; }
.hero-visual{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 26px 80px rgba(0,0,0,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  justify-self:end;
  width:100%;
  max-width: 560px;
  min-height: 280px;
}
.hero-visual img{
  width: 100%;
  height: auto;
  display:block;
  max-width: 520px; /* <= image is 968px wide, so this stays sharp */
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@media (max-width: 980px){
  .hero-visual{ padding: 14px; }
  .hero-visual img{ max-width: 640px; }
}


/* --- Hero visual (responsive) --- */
@media (max-width: 980px){
  .hero-inner{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 46px 0;
  }
  .hero-visual{
    justify-self:stretch;
    max-width: none;
    min-height: 220px;
    padding: 18px;
  }
  .hero-visual img{
    max-width: 520px;
  }
}
@media (max-width: 520px){
  .hero-visual{
    border-radius: 22px;
    padding: 14px;
  }
}

/* --- Header wrap --- */
.nav{ flex-wrap:wrap; }
@media (max-width: 980px){
  .nav{ justify-content:center; }
  .navlinks{ justify-content:center; }
}


/* --- Nav hover: no layout shift --- */
.navlinks a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 18px;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 14px;
  transition: color .15s ease, background .15s ease;
  transform: none !important;
}
.navlinks a:hover{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.98);
}


/* --- Glyph font stack --- */
.glyph, .p-glyph, .g-base, .g-sub{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", "Arial Unicode MS", Arial, sans-serif;
  font-synthesis: none;
}


/* --- Tableau périodique page --- */
.page-title{
  font-size: 46px;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
}
.tableau-wrap{
  margin-top: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
}
.tableau-img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 14px;
}
.legende-wrap{
  margin-top: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}
.legende-img{
  width: 100%;
  max-width: 820px;
  height: auto;
  display:block;
}


/* --- v23: Glyph rendering locked (subscript/superscript like PDF) --- */
.glyph .g-code, .quick-glyph .g-code, .modal-glyph .g-code{
  position: relative;
  display: inline-block;
  line-height: 1;
}
.glyph .g-base, .quick-glyph .g-base, .modal-glyph .g-base{
  font-size: 50px;
  line-height: 1;
  font-weight: 700;
}
.glyph .g-sub, .quick-glyph .g-sub, .modal-glyph .g-sub{
  position: absolute;
  right: -6px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.glyph .g-code:not(.g-super) .g-sub,
.quick-glyph .g-code:not(.g-super) .g-sub,
.modal-glyph .g-code:not(.g-super) .g-sub{
  bottom: 2px; /* indice */
}
.glyph .g-code.g-super .g-sub,
.quick-glyph .g-code.g-super .g-sub,
.modal-glyph .g-code.g-super .g-sub{
  top: 0px; /* exposant */
}
.glyph-img{width:68px;height:68px;object-fit:contain;display:block;}
.quick-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;color:inherit;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.55);}
.quick-item:hover{border-color: rgba(0,0,0,.12);background:rgba(255,255,255,.75);}
.quick-glyph{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);}
.quick-meta{display:flex;flex-direction:column;gap:2px;}
.quick-id{font-size:12px;opacity:.7;}
.quick-name{font-weight:700;}

/* Build stamp (debug) */
.build-stamp{
  position: fixed;
  left: 12px;
  top: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  color: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 9999;
  border: 1px solid rgba(0,0,0,0.08);
}

.modal-glyph .glyph-img{width:90px;height:90px;}
.nav a[aria-current="page"]{color:var(--accent);}


/* Theme toggle (header) */
.theme-toggle{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background: rgba(255,255,255,.16);
  border:1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.theme-toggle span{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);}
.theme-switch{position:relative;width:48px;height:26px;display:inline-block;}
.theme-switch input{opacity:0;width:0;height:0;}
.slider{
  position:absolute;inset:0;border-radius:999px;
  background: rgba(8, 14, 40, .35);
  border:1px solid var(--border);
  transition: .2s;
}
.slider:before{
  content:"";
  position:absolute;height:20px;width:20px;left:3px;top:2px;
  border-radius:50%;
  background: var(--panel-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition:.2s;
}
.theme-switch input:checked + .slider{background: rgba(0,0,0,.25);}
.theme-switch input:checked + .slider:before{transform: translateX(22px);}