* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: #1a1a18;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  color: #d3d1c7;
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */
.top-bar {
  height: auto;
  min-height: 46px;
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;             /* le bandeau lui-même ne s'enroule pas sur desktop :
                                    seule .search-wrap (dernière dans le DOM, cf. plus
                                    bas) retombe sur une 2e ligne quand ça manque de
                                    place — pas de réarrangement du titre/nav/boutons. */
  row-gap: 4px;
  align-items: center;
  padding: 6px 14px;
  gap: 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
  background: #1a1a18;
  position: relative;
  z-index: 100;
}
.site-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #d3d1c7;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-right: 8px;
  /* bouton réinitialisé + affordance cliquable */
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s;
}
.site-title:hover { color: #fff; }

/* Navigation disciplines — un seul bouton ovale, séparé en segments */
.disc-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: rgba(255,255,255,0.045);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  flex-shrink: 0;   /* toute la pression de compression doit retomber sur .top-tools */
}
.disc-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  /* zone cliquable = tout le segment (carré jusqu'aux séparateurs) ;
     le halo rond de survol/actif est peint par ::before, pas par le bouton */
  border-radius: 0;
  border: none;
  background: none;
  font-size: 12px;
  color: #777;
  cursor: pointer;
  text-decoration: none;
  transition: color .12s;
  white-space: nowrap;
  position: relative;
}
/* extrémités : suivent le bout arrondi de la pilule (le coin hors courbe
   n'est pas cliquable, il est en dehors de l'ovale visible) */
.disc-nav-item:first-child { border-radius: 999px 0 0 999px; }
.disc-nav-item:last-child  { border-radius: 0 999px 999px 0; }
/* halo rond (aspect inchangé), découplé de la zone de clic */
.disc-nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transition: background .12s;
}
.disc-nav-icon { position: relative; }
/* séparateur fin entre segments (masqué autour du segment actif/survolé) */
.disc-nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1px; top: 26%; bottom: 26%;
  width: 1px;
  background: rgba(255,255,255,0.12);
}
.disc-nav-item.active::after, .disc-nav-item:has(+ .active)::after,
.disc-nav-item:hover::after, .disc-nav-item:has(+ :hover)::after { opacity: 0; }
.disc-nav-item:hover  { color: #ccc; }
.disc-nav-item:hover::before  { background: rgba(255,255,255,0.07); }
.disc-nav-item.active { color: #e0ddd6; font-weight: 500; }
.disc-nav-item.active::before { background: rgba(255,255,255,0.12); }
.disc-nav-icon { font-size: 15px; line-height: 1; display: inline-flex; }
.disc-nav-icon svg { width: 18px; height: 18px; display: block; }

/* Outils à droite : recherche + bouton femmes */
.top-tools {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;               /* la recherche (dernier enfant, cf. index.html) est
                                     seule à retomber sur une 2e ligne quand ça ne
                                     tient plus, les boutons restent groupés en haut */
  justify-content: flex-end;
  row-gap: 6px;
  align-items: center;
  gap: 8px;
  /* PAS de flex-shrink:0 ici : comme .top-bar est en nowrap, il faut que .top-tools
     puisse être compressé en largeur par le parent pour que son propre flex-wrap
     interne s'active (sinon il garde sa largeur « tout sur une ligne » et déborde
     ou entraîne tout le bloc — recherche + boutons — vers le bas d'un coup). Les
     boutons eux-mêmes restent figés (.tool-btn a son propre flex-shrink:0).
     .disc-nav a le sien pour ne jamais rogner sur son espace à la place. */
}
.search-wrap { position: relative; }
#search {
  width: 170px;
  max-width: 40vw;
  padding: 5px 10px;
  border-radius: 16px;
  border: 0.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  color: #d3d1c7;
  outline: none;
  transition: width .18s, background .12s, border-color .12s;
}
#search:focus { background: #252523; border-color: rgba(255,255,255,0.3); width: 210px; }
#search::placeholder { color: #777; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  max-width: 78vw;
  max-height: 320px;
  overflow-y: auto;
  background: #252523;
  border: 0.5px solid #3a3a38;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 4px;
  display: none;
  z-index: 200;
}
.search-results.open { display: block; }
.search-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.search-item:hover, .search-item.sel { background: rgba(255,255,255,0.08); }
.si-name { font-size: 12.5px; color: #e0ddd6; line-height: 1.3; }
.si-disc { font-size: 10px; color: #777; white-space: nowrap; flex-shrink: 0; }

.tool-btn {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-size: 15px;
  line-height: 1;
  color: #aaa;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.tool-btn:hover { background: rgba(255,255,255,0.1); color: #ddd; }
.tool-icon { width: 17px; height: 17px; display: block; }
.lang-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
.tool-btn.active {
  background: #d9a23a; border-color: #d9a23a; color: #1a1a18;
}

/* ══════════════════════════════════════════
   CHART AREA  (remplit l'espace entre les deux bandes)
══════════════════════════════════════════ */
#chart-area {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

/* ══════════════════════════════════════════
   CHART WRAPPER — remplit la zone, le SVG est
   positionné/dimensionné en absolu puis déplacé
   par transform (pan + zoom).
══════════════════════════════════════════ */
#wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* vignette : centre légèrement plus clair, bords « espace profond » */
  background: radial-gradient(circle at 50% 47%,
    #26242c 0%, #1a1a1e 46%, #0c0c10 100%);
}

#wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#wrap svg.panning { cursor: grabbing; }

/* Fondu de la mise en valeur (liens / points / étiquettes) */
#links line      { transition: opacity .3s ease, stroke-width .3s ease; }
#dots g          { transition: opacity .3s ease; }
#labels text     { transition: opacity .3s ease; }
/* Points/liens filtrés (type, secteur, période) : fondu on/off via la transition ci-dessus */
#dots > g.flt-off  { opacity: 0; pointer-events: none; }
#links line.flt-off { opacity: 0; pointer-events: none; }
#dots circle     { transition: r .15s ease, opacity .3s ease, fill .3s ease, stroke .3s ease; }

/* ── Tooltip ── */
.tt {
  position: absolute;
  background: #252523;
  border: 0.5px solid #3a3a38;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  max-width: 220px;
  z-index: 20;
  line-height: 1.55;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.tt strong { font-size: 13px; color: #e0ddd6; }
.tt .yr    { color: #888; font-size: 11px; display: block; margin-top: 1px; }
.tt .desc  { color: #888; font-size: 11.5px; display: block; margin-top: 4px; }

/* ── Zoom controls ── */
.zoom-ctrl {
  position: absolute;
  bottom: 10px;
  right: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 10;
}
.zoom-ctrl button {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(37,37,35,0.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #ccc;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.zoom-ctrl button:hover  { background: #2e2e2c; }
.zoom-ctrl button:active { transform: scale(0.94); }

/* ══════════════════════════════════════════
   FICHE DÉROULANTE  (glisse depuis le bord)
══════════════════════════════════════════ */
#parchment {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 300px;
  max-height: calc(100% - 28px);
  z-index: 30;
  /* fermé : hors écran à droite ; ouvert : glisse vers la gauche */
  transform: translateX(calc(100% + 28px));
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
#parchment.open { transform: translateX(0); pointer-events: auto; }

.parch-inner { height: 100%; }

.parch-card {
  width: 100%;
  background: #252523;
  border-radius: 12px;
  border: 0.5px solid #3a3a38;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  overflow: hidden;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.parch-header {
  padding: 14px 16px 12px;
  border-bottom: 2px solid;
}
.parch-disc {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 5px;
}
.parch-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #e0ddd6;
  line-height: 1.35;
}
.parch-year {
  font-size: 11.5px;
  color: #777;
  margin-top: 3px;
}
.parch-body {
  padding: 12px 16px 16px;
  font-size: 12.5px;
  color: #aaa8a2;
  line-height: 1.6;
}
.parch-context {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid #333331;
  font-size: 12px;
  color: #888;
  line-height: 1.6;
}
.parch-links {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.parch-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 20px;
  border: 0.5px solid rgba(255,255,255,0.18);
  opacity: 0.8;
  transition: opacity .12s;
}
.parch-link:hover { opacity: 1; }

/* Connexions interdisciplinaires */
.parch-cross {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 0.5px solid #333331;
}
.parch-cross-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 8px;
}
.cross-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 0.5px solid var(--cc);
  background: transparent;
  color: inherit;
  font-size: 11.5px;
  line-height: 1.25;
  cursor: pointer;
  transition: background .12s;
}
.cross-chip:last-child { margin-bottom: 0; }
.cross-chip:hover { background: rgba(255,255,255,0.08); }
.cc-ic { color: var(--cc); font-size: 14px; flex-shrink: 0; }
.cc-tx { color: #aaa8a2; }

/* Mention de connexion dans l'infobulle */
.tt-cross { display: block; margin-top: 5px; font-size: 10.5px; color: #5bb8c6; }

/* Badge Nobel — survol (petit, à côté du nom) et fiche (avec l'année) */
.tt-nobel {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2a2310;
  background: linear-gradient(135deg, #f4cf6b, #d9a934);
  vertical-align: middle;
  white-space: nowrap;
}
.parch-nobel {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2a2310;
  background: linear-gradient(135deg, #f4cf6b, #d9a934);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Points de contexte : badge de type, citation, image de fiche */
.parch-typebadge {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--tc); border: 1px solid var(--tc); opacity: 0.85; vertical-align: middle;
}
.parch-quote {
  margin: 0 0 10px; padding: 8px 0 8px 13px;
  border-left: 3px solid; border-radius: 1px;
  font-size: 14.5px; font-style: italic; line-height: 1.5; color: #d8d5ce;
}
.parch-quote::before { content: "« "; opacity: 0.55; }
.parch-quote::after  { content: " »"; opacity: 0.55; }
html[lang="en"] .parch-quote::before { content: "\201C"; }
html[lang="en"] .parch-quote::after  { content: "\201D"; }
.parch-figure { margin: 0 0 12px; }
.parch-imgclip { overflow: hidden; border-radius: 8px; border: 0.5px solid #3a3a38; }
.parch-img {
  display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover;
}
.parch-img.full { max-height: none; }  /* image entière, dimensions exactes (ex. Solvay) */
.parch-imgcredit {
  margin-top: 3px; text-align: right; font-size: 9.5px; line-height: 1.3;
  color: #8a877f; letter-spacing: 0.02em;
}
.parch-imgcredit a { color: inherit; text-decoration: none; opacity: 0.9; }
.parch-imgcredit a:hover { text-decoration: underline; opacity: 1; }

/* ══════════════════════════════════════════
   FICHE ÉLÉMENT (tableau périodique)
══════════════════════════════════════════ */
.elem-headrow { display: flex; align-items: center; gap: 13px; }
.elem-symbol  { font-size: 32px; font-weight: 700; line-height: 1; flex-shrink: 0; }
/* ♀/♂ ont un trait plus fin que les autres symboles → on l'épaissit pour harmoniser */
.elem-symbol.sym-thick { -webkit-text-stroke: 1.4px currentColor; text-stroke: 1.4px currentColor; }
.elem-namez   { min-width: 0; }
.elem-props   { display: flex; flex-direction: column; }
.prop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 0.5px solid #333331;
}
.prop:last-child { border-bottom: none; padding-bottom: 0; }
.prop .pl { font-size: 11px; color: #888; flex-shrink: 0; }
.prop .pv { font-size: 12.5px; color: #d3d1c7; font-weight: 500; text-align: right; }
.prop-cfg { flex-direction: column; align-items: flex-start; gap: 6px; }
.prop-cfg .pv {
  font-size: 14.5px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  color: #e0ddd6;
  text-align: left;
}
/* Cœur gaz noble cliquable ([Ne], [Ar]…) : déplie la forme développée */
.cfg-core {
  cursor: pointer;
  border-bottom: 1px dotted #888;
  transition: color .12s, border-color .12s;
}
.cfg-core:hover { color: #fff; border-bottom-color: #ccc; }

/* Cellules de la table périodique */
#ptable .pcell, #ptable .pcell-empty { transition: opacity .25s ease; }
#ptable .pcell rect { transition: fill .12s ease, stroke-opacity .12s ease; }

/* En mode périodique, la légende (10 familles) peut passer sur deux lignes */
body.periodic .bottom-bar { height: auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
body.periodic .leg        { flex-wrap: wrap; gap: 5px 14px; }

/* ══════════════════════════════════════════
   FICHES SYSTÈME SOLAIRE
══════════════════════════════════════════ */
.card-section { margin-top: 14px; }
.card-section:first-child { margin-top: 0; }
.card-section-h {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid #333331;
}
.moon-chips, .star-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.moon-chip, .star-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 0.5px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #c8c5bd;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.moon-chip:hover, .star-chip:hover { background: rgba(255,255,255,0.08); border-color: var(--cc); }
.moon-chip .mc-dot, .star-chip .sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); flex-shrink: 0; }

/* estompage des corps via la légende */
#solar .sbody, #moons .smoon { transition: opacity .25s ease; }

/* étoiles (mode ciel) : fondu du liseré blanc au survol/sélection */
.sky-star circle { transition: stroke .18s ease, stroke-width .18s ease; }

/* noms des constellations : fondu à l'affichage/masquage (bouton « Noms ») */
#sky-const-labels { opacity: 0; transition: opacity .25s ease; }
#sky-const-labels.on { opacity: 1; }

/* filtre « Principales » : fondu des constellations secondaires (classe .sky-hidden) */
.sky-star, #sky-lines line, #sky-const-labels text { transition: opacity .3s ease; }
.sky-hidden { opacity: 0; pointer-events: none; }

/* Quiz étoiles — « Repérer sur la carte » (Clear the Map) : constellations hors du
   pool choisi estompées (pas masquées, à la différence de .sky-hidden) et non
   cliquables, même logique que applyFamilyDim()/applySolarDim(). */
.stm-dim { opacity: 0.12; pointer-events: none; }
/* Flash de réponse sur le vrai trait d'astérisme (sphère/œil nu) : une classe CSS
   a priorité sur le stroke posé en attribut par drawSky(), pas besoin de !important
   (même remarque que .pcl-flash-correct/-incorrect sur la grille périodique). */
.stm-flash-correct { stroke: #4cbb7a; stroke-width: 2.2; }
.stm-flash-incorrect { stroke: #e0645a; stroke-width: 2.2; }
/* Même flash, variante carte du catalogue */
.skycat-card.stm-flash-correct { border-color: #4cbb7a; background: rgba(76,187,122,0.18); }
.skycat-card.stm-flash-incorrect { border-color: #e0645a; background: rgba(224,100,90,0.18); }

/* Barre flottante de la partie (prompt + progression + Quitter), toutes vues
   confondues (y compris par-dessus le catalogue, d'où le z-index élevé). */
.stm-bar {
  position: absolute; left: 16px; bottom: 16px; z-index: 45;
  display: flex; align-items: center; gap: 14px;
  background: rgba(20,20,18,0.92); border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 8px 10px 8px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.stm-bar[hidden] { display: none; }
.stm-bar-main { display: flex; flex-direction: column; gap: 1px; }
.stm-bar-prompt { font-size: 13px; color: #c8c5bd; }
.stm-bar-prompt strong { color: #ece9e1; font-weight: 700; }
.stm-bar-progress { font-size: 11px; color: #8a877f; }
.stm-bar-quit {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  border: 0.5px solid rgba(255,255,255,0.18); background: transparent; color: #ccc8c0;
  transition: background .12s;
}
.stm-bar-quit:hover { background: rgba(255,255,255,0.08); }
@media (max-width: 640px) {
  .stm-bar { left: 8px; right: 8px; bottom: auto; top: 8px; border-radius: 12px; }
}

/* ── Catalogue des constellations (sous-onglet du mode ciel) ── */
.sky-catalog {
  position: absolute; inset: 0; z-index: 35;
  background: rgba(20,20,18,0.97);
  display: flex; flex-direction: column;
}
.sky-catalog[hidden] { display: none; }
.skycat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 0.5px solid #333331; flex-shrink: 0;
}
.skycat-title { font-size: 14px; font-weight: 600; color: #dedbd3; letter-spacing: 0.04em; }
.skycat-count { font-weight: 400; color: #8a877f; font-size: 12px; margin-left: 4px; }
.skycat-hemi { margin-left: auto; margin-right: 12px; flex-shrink: 0; }
.skycat-close {
  font: inherit; font-size: 20px; line-height: 1; color: #aaa8a2; cursor: pointer;
  background: transparent; border: none; padding: 2px 8px; border-radius: 6px;
}
.skycat-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.skycat-body { display: flex; flex: 1; min-height: 0; }
.skycat-grid {
  flex: 1; overflow-y: auto; padding: 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; align-content: start;
}
.skycat-card {
  font: inherit; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 8px;
  background: rgba(255,255,255,0.03); color: #c8c5bd;
  border: 0.5px solid rgba(255,255,255,0.12); border-radius: 10px;
  transition: background .15s, border-color .15s;
}
.skycat-card:hover { background: rgba(255,255,255,0.07); }
.skycat-card.sel { border-color: rgba(232,229,220,0.75); background: rgba(255,255,255,0.08); }
.skycat-mini { width: 100%; max-width: 130px; }
.skycat-mini line { stroke: rgba(200,205,215,0.35); stroke-width: 0.7; }
.skycat-mini circle { fill: #e8edf5; }
.skycat-name { font-size: 12px; font-weight: 600; color: #dedbd3; }
.skycat-sub { font-size: 10px; color: #8a877f; }
.skycat-detail {
  width: 315px; flex-shrink: 0; overflow-y: auto;
  border-left: 0.5px solid #333331; padding: 14px 16px;
}
.skycat-detail[hidden] { display: none; }
.skycat-detail-name { font-size: 17px; font-weight: 700; color: #ece9e1; }
.skycat-detail-sub { font-size: 11.5px; color: #8a877f; font-style: italic; margin: 2px 0 8px; }
.skycat-fly-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.skycat-fly { font-size: 11.5px; padding: 5px 11px; border-radius: 16px; }
.skycat-detail-fig { margin-bottom: 10px; background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.10); border-radius: 10px; }
.skycat-detail-fig .skycat-mini { max-width: 100%; }

/* figures du quiz étoiles (identification + clique-sur-l'étoile) */
.stq-fig {
  max-width: 330px; margin: 0 auto 10px; padding: 6px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.10); border-radius: 10px;
}
.stq-fig .skycat-mini { max-width: 100%; }
.stq-fig-hit circle:not(.stq-hit) { transition: stroke .15s ease, fill .15s ease; }
.stq-fig-hit .stq-hit:hover { stroke: rgba(255,255,255,0.45); stroke-width: 1; }   /* anneau au survol */
.stq-const-hint { color: #8a877f; font-weight: 400; font-size: 0.85em; }
@media (max-width: 640px) {
  .skycat-body { flex-direction: column; }
  .skycat-detail {
    order: -1; width: auto; max-height: 46%;
    border-left: none; border-bottom: 0.5px solid #333331;
  }
  .skycat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* image HD du corps sélectionné : fondu d'apparition et de disparition */
.focus-grp image, .focus-grp circle { transition: opacity .5s ease; }

/* ══════════════════════════════════════════
   BARRES DE DÉFILEMENT (panneaux sombres)
══════════════════════════════════════════ */
.parch-card, .about-modal, .search-results, .skycat-grid, .skycat-detail {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: #46453f transparent;
}
.parch-card::-webkit-scrollbar,
.about-modal::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.skycat-grid::-webkit-scrollbar,
.skycat-detail::-webkit-scrollbar { width: 8px; height: 8px; }
.parch-card::-webkit-scrollbar-track,
.about-modal::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.skycat-grid::-webkit-scrollbar-track,
.skycat-detail::-webkit-scrollbar-track { background: transparent; }
.parch-card::-webkit-scrollbar-thumb,
.about-modal::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.skycat-grid::-webkit-scrollbar-thumb,
.skycat-detail::-webkit-scrollbar-thumb {
  background: #46453f;
  border-radius: 5px;
  border: 2px solid transparent;               /* marge → thumb plus fin */
  background-clip: padding-box;
}
.parch-card::-webkit-scrollbar-thumb:hover,
.about-modal::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover,
.skycat-grid::-webkit-scrollbar-thumb:hover,
.skycat-detail::-webkit-scrollbar-thumb:hover {
  background: #5a584f;
  background-clip: padding-box;
}

/* ══════════════════════════════════════════
   BOTTOM BAR  (légende)
══════════════════════════════════════════ */
.bottom-bar {
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-top: 0.5px solid rgba(255,255,255,0.07);
  background: #1a1a18;
  position: relative;
  z-index: 100;
}
.leg {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 16px;
  justify-content: center;
  align-items: center;
}
.li  { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #777; cursor: pointer; user-select: none; white-space: nowrap; }
.li.muted { opacity: 0.35; }
.ld  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Disques — légende sur deux lignes (secteurs / filtres type + période) */
body:not(.periodic):not(.solar):not(.standard) .bottom-bar { height: auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
body:not(.periodic):not(.solar):not(.standard) .leg { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.leg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; align-items: center; }
.flt-chip {
  font: inherit; font-size: 11px; color: #aaa8a2; cursor: pointer; white-space: nowrap;
  padding: 1px 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: transparent;
  transition: opacity .12s, background .12s;
}
.flt-chip:hover { background: rgba(255,255,255,0.06); }
.flt-chip.muted { opacity: 0.35; }
.flt-chip.active { background: #d9a23a; border-color: #d9a23a; color: #1a1a18; }
/* curseur de période (double poignée) */
.cent { display: flex; align-items: center; gap: 8px; }
.cent .leg-grouplabel { font-size: 10.5px; color: #777; }
.cent-lab { font-size: 10.5px; color: #b3b0a8; min-width: 30px; }
.cent-lab[data-lo] { text-align: right; }
.cent-track { position: relative; width: 120px; height: 16px; }
.cent-rail { position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); }
.cent-fill { position: absolute; top: 7px; height: 3px; border-radius: 2px; background: #9b988f; }
.cent-track input { position: absolute; left: 0; top: 0; width: 100%; height: 16px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cent-track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 13px; height: 13px; border-radius: 50%; background: #cfccc3; border: 1px solid #1a1a18; cursor: pointer; }
.cent-track input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #cfccc3; border: 1px solid #1a1a18; cursor: pointer; }
.cent-track input::-moz-range-track { background: none; }

/* ══════════════════════════════════════════
   MODÈLE STANDARD — légende (familles + bascules d'interaction) & fiche
══════════════════════════════════════════ */
body.standard .bottom-bar { height: auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
body.standard .leg        { flex-wrap: wrap; gap: 6px 12px; }
.leg-sep { width: 1px; align-self: stretch; min-height: 15px; background: rgba(255,255,255,0.12); margin: 0 2px; }
.leg-grouplabel { font-size: 10.5px; color: #666; white-space: nowrap; }

/* Tableau périodique — sélecteur de colorisations (ligne 1) + légende (ligne 2) */
body.periodic .bottom-bar { height: auto; min-height: 40px; padding-top: 5px; padding-bottom: 5px; }
body.periodic .leg { flex-direction: column; flex-wrap: nowrap; gap: 7px; align-items: center; }
.pt-viewbar, .pt-legendrow { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; align-items: center; }
.pt-view {
  font: inherit; font-size: 11px; color: #aaa8a2; cursor: pointer;
  padding: 2px 9px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.18);
  background: transparent; white-space: nowrap; transition: background .12s, color .12s;
}
.pt-view:hover { background: rgba(255,255,255,0.06); }
.pt-view.on { background: rgba(232,229,220,0.92); color: #1a1a18; font-weight: 600; border-color: transparent; }
/* toggle segmenté sphère céleste / œil nu (mode ciel) : deux segments joints, un seul actif */
.sky-seg { display: inline-flex; border: 1px solid rgba(255,255,255,0.18); border-radius: 11px; overflow: hidden; }
.sky-seg-btn {
  font: inherit; font-size: 11px; color: #aaa8a2; cursor: pointer;
  padding: 2px 9px; border: none; background: transparent; white-space: nowrap;
  transition: background .12s, color .12s;
}
.sky-seg-btn + .sky-seg-btn { border-left: 1px solid rgba(255,255,255,0.18); }
.sky-seg-btn:hover { background: rgba(255,255,255,0.06); }
.sky-seg-btn.on { background: rgba(232,229,220,0.92); color: #1a1a18; font-weight: 600; }
.pt-grad-wrap { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #b3b0a8; }
.pt-grad-bar { width: 130px; height: 9px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.18);
  background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; }
.pt-grad-unit { color: #777; }
.pt-grad-na { color: #777; font-style: italic; }
.sm-force {
  font: inherit; font-size: 11px; color: #aaa8a2; cursor: pointer;
  padding: 2px 9px; border-radius: 11px; border: 1px solid var(--fc); background: transparent;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: background .12s, color .12s;
}
.sm-force::before { content:''; width: 8px; height: 8px; border-radius: 50%; background: var(--fc); flex-shrink: 0; }
.sm-force:hover { background: rgba(255,255,255,0.06); }
.sm-force.on { background: var(--fc); color: #1a1a18; font-weight: 600; }
.sm-force.on::before { background: #1a1a18; }

/* Bascule matière ⇄ antimatière */
.sm-anti {
  font: inherit; font-size: 11px; color: #cfe9e6; cursor: pointer;
  padding: 2px 11px; border-radius: 11px; border: 1px solid rgba(54,184,178,0.7); background: transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.sm-anti .sm-anti-ic { font-size: 12px; line-height: 1; }
.sm-anti:hover { background: rgba(54,184,178,0.12); }
.sm-anti.on {
  background: linear-gradient(90deg, rgb(54,184,178), rgb(214,92,168));
  background-origin: border-box; background-clip: border-box; background-repeat: no-repeat;
  color: #14201f; font-weight: 600; border-color: transparent;
}
/* Bascule Hadrons (assemblages de quarks) */
.sm-hadron {
  font: inherit; font-size: 11px; color: #e7c9b3; cursor: pointer;
  padding: 2px 11px; border-radius: 11px; border: 1px solid rgba(222,114,55,0.7); background: transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.sm-hadron .sm-hadron-ic { font-size: 12px; line-height: 1; }
.sm-hadron:hover { background: rgba(222,114,55,0.12); }
.sm-hadron.on { background: rgb(222,114,55); color: #1a1a18; font-weight: 600; border-color: transparent; }
/* Barre d'antiparticule dans la fiche : trait épousant la largeur du symbole,
   posé juste au-dessus du glyphe (pas en haut du cadratin). */
.antibar { position: relative; }
.antibar::before {
  content: ''; position: absolute; left: -0.04em; right: -0.04em; top: 0.40em;
  height: 0.08em; background: currentColor; border-radius: 1px;
}
.antibar.tall::before { top: 0.18em; }   /* b, d, t : hampe plus haute → barre remontée */
/* anticouleurs (lettres barrées) dans les caractéristiques d'un antiquark */
.ovl { text-decoration: overline; }

/* Système solaire — bascule « distances réelles » */
.solar-toggle {
  font: inherit; font-size: 11px; color: #b9c6dc; cursor: pointer;
  padding: 2px 11px; border-radius: 11px; border: 1px solid rgba(150,175,215,0.5); background: transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.solar-toggle .solar-toggle-ic { font-size: 12px; line-height: 1; }
.solar-toggle:hover { background: rgba(150,175,215,0.12); }
.solar-toggle.on {
  background: rgba(186,205,235,0.92); color: #14202f; font-weight: 600; border-color: transparent;
}
.solar-note { font-size: 10.5px; color: #8a877f; font-style: italic; white-space: nowrap; }

/* Transitions en fondu lors des bascules d'interaction (estompage + halo) */
body.standard .pcell      { transition: opacity .32s ease; }
body.standard .pcell rect { transition: fill .16s ease, stroke .32s ease, stroke-width .32s ease, stroke-opacity .32s ease; }
/* Halo de la case d'une particule quand une interaction est active */
.pcell.sm-glow rect { stroke: var(--glow); stroke-width: 2.6; stroke-opacity: 1; }
/* Indice du symbole (νe, νμ, ντ) dans la fiche */
.elem-symbol sub { font-size: 0.5em; vertical-align: -0.12em; }

/* Fiche particule : chips d'interactions, rôle, note */
.sm-fchips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.sm-fchip  { font-size: 10px; padding: 1px 7px; border-radius: 9px; color: var(--fc); border: 1px solid var(--fc); }
.sm-role   { font-size: 12px; color: #aaa8a2; line-height: 1.5; }
.sm-desc   { margin-top: 12px; }
.sm-note   { font-style: italic; opacity: 0.9; }

/* ══════════════════════════════════════════
   PARCOURS GUIDÉS — barre de progression + menu d'entrée
══════════════════════════════════════════ */
#tour-btn { font-size: 12.5px; }

.tour-bar {
  position: absolute;
  left: 16px; bottom: 16px; right: 330px;   /* réserve la place du panneau de fiche à droite */
  display: flex; justify-content: flex-start;
  z-index: 40; pointer-events: none;
}
.tour-panel {
  pointer-events: auto;
  width: 100%; max-width: 480px;
  background: rgba(28,28,26,0.95);
  border: 0.5px solid #3c3c39; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 11px 14px 12px;
}
.tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tour-title { font-size: 12.5px; font-weight: 600; color: #e0ddd6; flex: 1; }
.tour-progress { font-size: 11px; color: #8a8a86; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-x { background: none; border: none; color: #8a8a86; font-size: 14px; cursor: pointer; padding: 2px 3px; line-height: 1; }
.tour-x:hover { color: #ddd; }
.tour-note { font-size: 12.5px; color: #b8b5ae; line-height: 1.5; margin-bottom: 10px; }
.tour-nav { display: flex; gap: 8px; }
.tour-nav button {
  font: inherit; font-size: 12px; cursor: pointer; flex: 1;
  padding: 5px 12px; border-radius: 8px;
  border: 0.5px solid #4a4a47; background: transparent; color: #ccc8c0;
  transition: background .12s;
}
.tour-nav button:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.tour-nav button:disabled { opacity: 0.3; cursor: default; }
.tour-next { font-weight: 600; }

.tour-menu {
  position: fixed; z-index: 300;
  background: #252523; border: 0.5px solid #3a3a38; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 6px; min-width: 240px; max-width: 300px;
}
.tour-menu-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: #777; padding: 4px 8px 6px; }
.tour-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 9px; border-radius: 7px; }
.tour-menu-item:hover { background: rgba(255,255,255,0.06); }
.tm-title { display: block; font-size: 12.5px; font-weight: 600; color: #e0ddd6; }
.tm-desc { display: block; font-size: 11px; color: #999; line-height: 1.35; margin-top: 2px; }

/* ══════════════════════════════════════════
   NOTIFICATION MOBILE — bandeau "pensé pour ordinateur"
   Affiché/masqué en JS (largeur d'écran + localStorage), pas par media query.
══════════════════════════════════════════ */
.mobile-notice {
  position: fixed;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 500;
  display: flex; align-items: center; gap: 10px;
  background: rgba(28,28,26,0.97);
  border: 0.5px solid #3c3c39; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 10px 10px 10px 14px;
}
.mobile-notice[hidden] { display: none; }
.mobile-notice-text { flex: 1; font-size: 12.5px; line-height: 1.4; color: #d3d1c7; }
.mobile-notice-close {
  flex-shrink: 0;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 8px;
  border: 0.5px solid #4a4a47; background: rgba(255,255,255,0.06); color: #e0ddd6;
}
.mobile-notice-close:hover { background: rgba(255,255,255,0.12); }

/* ══════════════════════════════════════════
   RESPONSIVE / TACTILE (mobile)
══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* parcours : barre en haut, pleine largeur (la fiche occupe le bas en mobile) */
  .tour-bar { left: 8px; right: 8px; top: 8px; bottom: auto; }
  .tour-panel { max-width: none; }
  .top-bar {
    height: auto;
    min-height: 46px;
    padding: 6px 10px;
    gap: 6px;
  }

  /* fiche en panneau bas, pleine largeur ; bornée à la zone visible + scroll interne */
  #parchment {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100% - 16px);   /* tient dans #wrap (qui découpe) */
    display: flex;
    flex-direction: column;
  }
  .parch-inner { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; }
  .parch-card  { flex: 1; min-height: 0; max-height: none; }   /* overflow-y:auto hérité → scrolle */

  /* légende compacte */
  .bottom-bar { height: auto; min-height: 40px; padding: 6px 10px; }
  .leg { flex-wrap: wrap; gap: 5px 12px; }
  .li { font-size: 11px; }

  /* commandes de zoom un peu plus grandes au doigt */
  .zoom-ctrl button { width: 34px; height: 34px; font-size: 17px; }
}

/* Seuil plus étroit, dédié à .top-bar : en dessous de ~640px, title+nav+boutons
   pleine taille tiennent encore ensemble (nowrap + cascade interne de .top-tools,
   cf. règles de base) jusqu'à ~530-560px. En dessous, même à taille réduite, ils
   ne rentrent plus ensemble sur une ligne : on revient au bloc .top-tools qui
   bascule entier sur sa propre ligne (agencement compact, pensé pour un vrai
   téléphone) plutôt que de le laisser se fragmenter en grille interne étroite. */
@media (max-width: 560px) {
  .top-bar { flex-wrap: wrap; }
  .site-title { font-size: 12px; margin-right: 4px; }
  .tool-btn { width: 27px; height: 27px; font-size: 13px; }
  .tool-icon { width: 15px; height: 15px; }
  #search { width: 96px; }
  #search:focus { width: 130px; }
}

/* Respecter la préférence « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
  #parchment, .parch-inner, #links line, #dots g, #dots circle, #labels text,
  body.standard .pcell, body.standard .pcell rect {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════
   MODALE « À PROPOS » (ouverte par le titre)
══════════════════════════════════════════ */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,10,12,0.66);
  backdrop-filter: blur(3px);
}
.about-overlay[hidden] { display: none; }

.about-modal {
  position: relative;
  width: 540px;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: #252523;
  border: 0.5px solid #3a3a38;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 26px 30px 30px;
}
.about-close, .quiz-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #aaa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.about-close:hover, .quiz-close:hover { background: rgba(255,255,255,0.12); color: #eee; }

.about-content h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e7e4dc;
  margin-bottom: 14px;
}
.about-content p { font-size: 13.5px; line-height: 1.7; color: #b3b0a8; }
.about-content p + p { margin-top: 12px; }

/* ══════════════════════════════════════════
   QUIZ — onglet indépendant, plein écran (overlay façon « à propos »)
══════════════════════════════════════════ */
.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,10,12,0.66);
  backdrop-filter: blur(3px);
}
.quiz-overlay[hidden] { display: none; }

.quiz-modal {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: #252523;
  border: 0.5px solid #3a3a38;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  padding: 26px 30px 30px;
}
.quiz-modal-question { width: 520px; }

.quiz-heading { font-size: 20px; font-weight: 700; letter-spacing: 0.04em; color: #e7e4dc; margin-bottom: 6px; }
.quiz-intro { font-size: 13px; color: #b3b0a8; margin-bottom: 20px; }

.quiz-setup-section { margin-bottom: 18px; }
.quiz-setup-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8a8a86; margin-bottom: 9px; display: flex; align-items: center; gap: 8px;
}
.quiz-all-link {
  font: inherit; font-size: 10.5px; text-transform: none; letter-spacing: 0;
  color: #9fbfd9; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;
}
.quiz-all-link:hover { color: #c7dced; }

.quiz-disc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-disc-item {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #ccc8c0;
  padding: 6px 11px; border-radius: 9px; border: 0.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04); cursor: pointer;
}
.quiz-disc-item input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 4px; border: 0.5px solid rgba(255,255,255,0.3);
  background: #1a1a18; cursor: pointer; position: relative;
  transition: border-color .12s;
}
.quiz-disc-item input:checked { border-color: #d9a23a; }
.quiz-disc-item input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #d9a23a; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.quiz-disc-ic { font-size: 13px; }

.quiz-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-pill {
  font: inherit; font-size: 12px; cursor: pointer; padding: 6px 14px; border-radius: 20px;
  border: 0.5px solid rgba(255,255,255,0.18); background: transparent; color: #ccc8c0;
  transition: background .12s, color .12s, border-color .12s;
}
.quiz-pill:hover { background: rgba(255,255,255,0.08); }
.quiz-pill.active { background: #d9a23a; border-color: #d9a23a; color: #1a1a18; font-weight: 600; }

.quiz-error { font-size: 12px; color: #e0645a; margin-bottom: 12px; }
.quiz-error[hidden] { display: none; }

.quiz-btn {
  font: inherit; font-size: 13px; cursor: pointer; padding: 9px 18px; border-radius: 9px;
  border: 0.5px solid #4a4a47; background: transparent; color: #ccc8c0; transition: background .12s;
}
.quiz-btn:hover { background: rgba(255,255,255,0.08); }
.quiz-btn.primary { background: #d9a23a; border-color: #d9a23a; color: #1a1a18; font-weight: 600; }
.quiz-btn.primary:hover { background: #e5ad45; }
.quiz-btn.primary:disabled { opacity: 0.35; cursor: default; background: #d9a23a; }
.quiz-start-btn { width: 100%; margin-top: 4px; padding: 11px; font-size: 14px; }

/* ── Écran question ── */
.quiz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.quiz-progress, .quiz-score { font-size: 11.5px; color: #8a8a86; font-variant-numeric: tabular-nums; }
.quiz-score { margin-right: auto; }
.quiz-end-link {
  font: inherit; font-size: 11px; color: #9fbfd9; background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 0;
}
.quiz-head .quiz-close { position: static; width: 26px; height: 26px; font-size: 16px; flex-shrink: 0; }

.quiz-prompt { font-size: 13px; color: #8a8a86; margin-bottom: 6px; }
.quiz-subject { font-size: 16px; font-weight: 600; color: #e0ddd6; line-height: 1.4; margin-bottom: 18px; }
.quiz-quote {
  font-size: 14.5px; font-style: italic; line-height: 1.5; color: #d8d5ce;
  border-left: 3px solid #d9a23a; padding: 4px 0 4px 14px; margin-bottom: 18px;
}

.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.quiz-opt {
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; padding: 11px 14px;
  border-radius: 10px; border: 0.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03);
  color: #ccc8c0; transition: background .12s, border-color .12s;
}
.quiz-opt:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.quiz-opt.sel { border-color: #d9a23a; background: rgba(217,162,58,0.14); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.correct { border-color: #4cbb7a; background: rgba(76,187,122,0.18); color: #dff5e6; }
.quiz-opt.incorrect { border-color: #e0645a; background: rgba(224,100,90,0.18); color: #fbdcd9; }

.quiz-tf { display: flex; gap: 12px; }
.quiz-tf-btn { flex: 1; text-align: center; font-weight: 600; font-size: 14px; padding: 14px; }

.quiz-input-row { margin-bottom: 8px; }
.quiz-year-input {
  font: inherit; font-size: 15px; width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: #e0ddd6;
}
.quiz-year-input:focus { outline: none; border-color: #d9a23a; background: #252523; }
.quiz-year-input.quiz-input-correct { border-color: #4cbb7a; }
.quiz-year-input.quiz-input-almost { border-color: #d9a23a; }
.quiz-year-input.quiz-input-incorrect { border-color: #e0645a; }
.quiz-year-input:disabled { opacity: 0.85; }
/* Flèches de défilement natives (type=number) : par défaut un widget clair du navigateur,
   qui jure sur le thème sombre. Chromium : fond sombre + inversion pour des flèches
   claires sur fond sombre (seule personnalisation possible du widget natif). Firefox ne
   permet aucune personnalisation de ce widget (contrairement au thumb du curseur de
   siècles, cf. .cent-track) → on le masque proprement plutôt que de laisser un widget
   clair non stylable. */
.quiz-year-input::-webkit-inner-spin-button,
.quiz-year-input::-webkit-outer-spin-button {
  appearance: auto; -webkit-appearance: auto;
  background: #1a1a18;
  filter: invert(0.7);
  opacity: 1;
}
.quiz-year-input { -moz-appearance: textfield; }

.quiz-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.quiz-foot .quiz-validate[hidden] { display: none; }

.quiz-feedback {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  border-left: 3px solid; background: rgba(255,255,255,0.03);
}
.quiz-feedback.correct { border-color: #4cbb7a; }
.quiz-feedback.almost { border-color: #d9a23a; }
.quiz-feedback.incorrect { border-color: #e0645a; }
.quiz-feedback-title { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.quiz-feedback.correct .quiz-feedback-title { color: #7fd9a3; }
.quiz-feedback.almost .quiz-feedback-title { color: #f0c26a; }
.quiz-feedback.incorrect .quiz-feedback-title { color: #ef8f86; }
.quiz-feedback-answer, .quiz-feedback-delta { font-size: 12.5px; color: #b3b0a8; margin-bottom: 4px; }
.quiz-feedback-desc { font-size: 12.5px; color: #aaa8a2; line-height: 1.55; margin-top: 6px; }
.quiz-feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ── Écran résultat ── */
.quiz-modal-result { text-align: center; }
.quiz-result-score { font-size: 42px; font-weight: 700; color: #e7e4dc; margin: 18px 0 8px; font-variant-numeric: tabular-nums; }
.quiz-result-msg { font-size: 14px; color: #b3b0a8; margin-bottom: 24px; }
.quiz-result-actions { display: flex; justify-content: center; gap: 12px; }

@media (max-width: 640px) {
  .quiz-modal, .quiz-modal-question { width: 100%; padding: 20px 18px 22px; max-height: 90vh; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-disc-list { gap: 6px; }
  .quiz-result-actions { flex-direction: column; }
}

/* Bouton flottant "Reprendre le quiz" — affiché quand l'overlay est masqué (pas fermé)
   pendant un "Voir sur le disque", pour ne jamais perdre score/progression. */
.quiz-resume-btn {
  position: fixed;
  left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 900;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 10px 20px; border-radius: 999px;
  border: 0.5px solid #d9a23a; background: #d9a23a; color: #1a1a18;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transition: background .12s;
}
.quiz-resume-btn:hover { background: #e5ad45; }
.quiz-resume-btn[hidden] { display: none; }

/* Menu déroulant des portées du quiz (bouton `?`) — même style que .tour-menu, classes
   propres pour ne pas coupler les deux fonctionnalités. */
.quiz-scope-menu {
  position: fixed; z-index: 300;
  background: #252523; border: 0.5px solid #3a3a38; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 6px; min-width: 240px; max-width: 300px;
}
.qsm-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: #777; padding: 4px 8px 6px; }
.quiz-scope-item {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 8px 9px; border-radius: 7px;
}
.quiz-scope-item:hover { background: rgba(255,255,255,0.06); }
.qsm-ic { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.qsm-txt { display: flex; flex-direction: column; min-width: 0; }
.qsm-title { font-size: 12.5px; font-weight: 600; color: #e0ddd6; }
.qsm-desc { font-size: 11px; color: #999; line-height: 1.35; margin-top: 2px; }

/* ══════════════════════════════════════════
   QUIZ — TABLEAU PÉRIODIQUE (quiz classique + Clear the Table)
══════════════════════════════════════════ */
.pt-mode-tabs { margin-bottom: 20px; }
.pcl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Flash de case sur la vraie grille SVG (Clear the Table) — override du fill/stroke
   posés en attribut par drawPeriodicTable() ; une classe CSS a priorité sur un
   attribut de présentation SVG, pas besoin de !important. */
.pcl-flash-correct { fill: rgba(76,187,122,0.55); stroke: #4cbb7a; }
.pcl-flash-incorrect { fill: rgba(224,100,90,0.55); stroke: #e0645a; }

/* ══════════════════════════════════════════
   QUIZ — SYSTÈME SOLAIRE (question image « quel est ce corps céleste »)
══════════════════════════════════════════ */
.quiz-body-image {
  display: block; height: 220px; width: auto; max-width: 100%; object-fit: cover;
  border-radius: 10px; margin: 0 auto 18px; border: 0.5px solid #3a3a38; background: #000;
}
.about-sign { text-align: right; margin-top: 18px; color: #8a877f; font-style: italic; }