/* atlas-theme.css — thème « manuel d'anatomie moderne » (clair) et variante sombre pour les atlas IBODE */
:root {
  --atlas-bg1: #f7f5f0; --atlas-bg2: #e3dfd6; --atlas-brume: #ece8e1;
  --atlas-panel: rgba(234, 229, 220, .94); --atlas-fg: #23252a; --atlas-muted: #5f6167; --atlas-line: #c8c1b4;
  --atlas-accent: #b5533f; --atlas-accent2: #8f3a2a; --atlas-input: #f6f3ee; --atlas-hover: #e2dccf; --atlas-ombre: 0 6px 24px rgba(40, 30, 20, .16);
}
:root[data-theme="sombre"] {
  --atlas-bg1: #26272c; --atlas-bg2: #141518; --atlas-brume: #1f2024;
  --atlas-panel: rgba(28, 29, 34, .94); --atlas-fg: #e8e6e1; --atlas-muted: #9a9890; --atlas-line: #33353b;
  --atlas-accent: #c96a5f; --atlas-accent2: #f0c9c0; --atlas-input: #121316; --atlas-hover: #2a2d33; --atlas-ombre: 0 6px 24px rgba(0, 0, 0, .4);
}
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--atlas-fg); font: 14px/1.4 "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 50% 30%, var(--atlas-bg1) 0%, var(--atlas-bg2) 100%); }
:root[data-rendu="classique"] body { background: #1b1c20; }
canvas#c { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#atlas-status { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); color: var(--atlas-muted); font-size: 13px; pointer-events: none; }
#atlas-ariane { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--atlas-muted); font-size: 12px; letter-spacing: .02em;
  background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 999px; padding: 4px 12px; pointer-events: none; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#atlas-ariane:empty { display: none; }
.atlas-panneau { position: fixed; top: 12px; left: 12px; width: 288px; max-height: calc(100% - 24px); overflow: auto; background: var(--atlas-panel);
  border: 1px solid var(--atlas-line); border-radius: 12px; padding: 12px 14px; box-sizing: border-box; box-shadow: var(--atlas-ombre); backdrop-filter: blur(6px); }
.atlas-panneau.replie > *:not(h1):not(.atlas-plier) { display: none; }   /* le bouton + reste visible pour rouvrir */
.atlas-panneau.replie { width: auto; min-width: 200px; padding-right: 44px; }
.atlas-panneau h1 { font-size: 15px; margin: 0 0 6px; padding-right: 28px; }
.atlas-plier { position: absolute; top: 8px; right: 10px; width: 32px; height: 28px; background: var(--atlas-accent); border: none; color: #fff;
  border-radius: 8px; padding: 0; font-size: 18px; line-height: 28px; font-weight: 600; cursor: pointer; margin: 0; text-align: center; }
.atlas-plier:hover { background: var(--atlas-accent2); color: #fff; }
#atlas-btn-menu { font-weight: 600; }
.atlas-sub { color: var(--atlas-muted); font-size: 12px; margin-bottom: 8px; }
.atlas-section { border-top: 1px solid var(--atlas-line); padding-top: 6px; margin-top: 8px; }
.atlas-section > h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--atlas-muted); margin: 0 0 4px; cursor: pointer; user-select: none; }
.atlas-section > h2::before { content: "▾ "; }
.atlas-section.replie > h2::before { content: "▸ "; }
.atlas-section.replie > *:not(h2) { display: none; }
.atlas-famille { margin: 4px 0 6px; }
.atlas-famille .tete { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 3px 0; }
.atlas-famille .tete .n { color: var(--atlas-muted); margin-left: auto; font-weight: 400; font-size: 12px; }
.atlas-famille .tete .repli { background: none; border: none; color: var(--atlas-muted); padding: 0 4px; margin: 0; cursor: pointer; font-size: 13px; }
.atlas-famille.replie label.sys { display: none; }
.atlas-famille.replie .tete .repli { transform: rotate(-90deg); }
label.sys { display: flex; align-items: center; gap: 8px; padding: 3px 0 3px 18px; cursor: pointer; }
label.sys .pastille { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
label.sys .n { color: var(--atlas-muted); margin-left: auto; font-size: 12px; }
label.sys.sous { padding-left: 40px; font-size: 13px; }
label.sys.verrou { opacity: .5; }
.coupe { margin: 6px 0; }
.coupe .ligne, .ligne { display: flex; align-items: center; gap: 6px; }
.ligne .lib { font-size: 12px; color: var(--atlas-muted); width: 76px; flex: none; }
.coupe .ligne span.val { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; color: var(--atlas-muted); font-size: 12px; }
input[type=range] { width: 100%; accent-color: var(--atlas-accent); }
input[type=checkbox] { accent-color: var(--atlas-accent); }
button { background: var(--atlas-input); color: var(--atlas-fg); border: 1px solid var(--atlas-line); border-radius: 6px; padding: 4px 8px; cursor: pointer; margin: 2px 4px 2px 0; font: inherit; font-size: 13px; }
button:hover { border-color: var(--atlas-accent); color: var(--atlas-accent); }
button.mini { padding: 1px 7px; font-size: 12px; }
.atlas-boutons { margin-top: 4px; }
#atlas-recherche { width: 100%; box-sizing: border-box; background: var(--atlas-input); color: var(--atlas-fg); border: 1px solid var(--atlas-line); border-radius: 8px; padding: 6px 10px; font: inherit; }
#atlas-resultats .res { padding: 3px 6px; cursor: pointer; border-radius: 4px; font-size: 13px; }
#atlas-resultats .res:hover { background: var(--atlas-hover); color: var(--atlas-accent); }
.atlas-fiche { position: fixed; top: 16px; right: 16px; width: min(340px, 80vw); background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 12px;
  padding: 12px 14px; box-sizing: border-box; display: none; box-shadow: var(--atlas-ombre); backdrop-filter: blur(6px); max-height: calc(100% - 32px); overflow: auto; }
.atlas-fiche.visible { display: block; }
.atlas-fiche h2 { margin: 0 0 4px; font-size: 17px; color: var(--atlas-accent2); padding-right: 22px; font-family: "Crimson Pro", Georgia, serif; }
.atlas-fiche .type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--atlas-muted); margin-bottom: 6px; }
.atlas-fiche p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.atlas-fiche p.bloc { color: #8a5a00; }
:root[data-theme="sombre"] .atlas-fiche p.bloc { color: #f0c674; }
.atlas-fiche p.src { color: var(--atlas-muted); font-size: 12px; }
.atlas-fiche a { color: var(--atlas-accent); display: inline-block; margin-top: 4px; }
.atlas-fiche .atlas-historique { margin-top: 8px; border-top: 1px solid var(--atlas-line); padding-top: 6px; }
.atlas-fiche .atlas-historique:empty { display: none; }
.atlas-fermer { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--atlas-muted); font-size: 16px; cursor: pointer; margin: 0; }
#atlas-hud { position: fixed; right: 16px; bottom: 16px; display: flex; gap: 6px; }
.hud-btn { background: var(--atlas-panel); border: 1px solid var(--atlas-line); color: var(--atlas-fg); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px; min-width: 44px; min-height: 36px; margin: 0; }
.hud-btn:hover, .hud-btn.actif { border-color: var(--atlas-accent); color: var(--atlas-accent); }
#atlas-bandeau { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); background: var(--atlas-panel); border: 1px solid var(--atlas-accent);
  border-radius: 10px; padding: 8px 14px; font-size: 13px; display: none; }
#atlas-bandeau.visible { display: block; }
#atlas-bandeau a { color: var(--atlas-accent); }
#atlas-traits { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .2s; }
#atlas-traits line { stroke: var(--atlas-fg); stroke-width: 1; opacity: .7; }
#atlas-etiquettes { position: fixed; inset: 0; pointer-events: none; transition: opacity .2s; }
#atlas-etiquettes .etq { position: absolute; left: 0; top: 0; background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 6px; padding: 2px 6px; font-size: 12px; white-space: nowrap; box-shadow: var(--atlas-ombre); }
#atlas-accueil { position: fixed; inset: 0; background: rgba(20, 18, 16, .45); display: flex; align-items: center; justify-content: center; z-index: 10; }
#atlas-accueil .boite { background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 14px; padding: 20px 22px; max-width: 640px; width: calc(100% - 32px); box-shadow: var(--atlas-ombre); }
#atlas-accueil h2 { margin: 0 0 12px; font-family: "Crimson Pro", Georgia, serif; font-size: 22px; }
#atlas-accueil .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
#atlas-accueil .tuile { border: 1px solid var(--atlas-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--atlas-muted); }
#atlas-accueil .tuile b { color: var(--atlas-fg); font-size: 13px; }
#atlas-accueil .tuile .ico { font-size: 26px; color: var(--atlas-accent); animation: atlas-pulse 2.4s ease-in-out infinite; }
@keyframes atlas-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#atlas-accueil .commencer { margin-top: 14px; background: var(--atlas-accent); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; }
@media (max-width: 720px) {
  .atlas-panneau { width: calc(100% - 24px); max-height: 46%; }
  .atlas-fiche { top: auto; bottom: 60px; left: 12px; right: 12px; width: auto; max-height: 45%; }
  #atlas-hud { bottom: 12px; }
  #atlas-ariane { display: none; }
  button, .hud-btn { min-height: 36px; }
}