/* ============================================================
   NeoSystem — Bibliothèque de quêtes & objectifs
   DA « neochrome » : fluides de couleur animés, dégradés
   continus, touches orangées — reliée au design system
   pixel-art par : police display, bordures 3px, ombres dures.
   ============================================================ */

/* ---------- Fond neochrome ---------- */
.lib-body{
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(242,157,53,.10), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, rgba(64,150,190,.14), transparent 60%),
    radial-gradient(900px 900px at 60% 110%, rgba(155,101,34,.12), transparent 55%),
    var(--blue-deep);
}
.neo-fluids{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.fluid{
  position:absolute;width:55vmax;height:55vmax;border-radius:50%;
  filter:blur(90px);opacity:.35;will-change:transform;
}
.fluid--a{
  background:radial-gradient(circle at 30% 30%, #2b7ea1, transparent 65%);
  top:-20vmax;left:-12vmax;animation:drift-a 26s ease-in-out infinite alternate;
}
.fluid--b{
  background:radial-gradient(circle at 60% 60%, rgba(242,157,53,.75), transparent 62%);
  right:-18vmax;top:22%;width:44vmax;height:44vmax;opacity:.22;
  animation:drift-b 32s ease-in-out infinite alternate;
}
.fluid--c{
  background:radial-gradient(circle at 50% 50%, #1c5d7d, transparent 65%);
  bottom:-22vmax;left:20%;animation:drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(9vmax,6vmax) rotate(40deg)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vmax,8vmax) scale(1.15)}}
@keyframes drift-c{from{transform:translate(0,0) rotate(0deg)}to{transform:translate(6vmax,-7vmax) rotate(-30deg)}}
@media (prefers-reduced-motion: reduce){
  .fluid{animation:none}
}

main#lib-main{position:relative;z-index:1;padding-top:calc(var(--nav-h) + 48px);min-height:70vh}
.lib-home,.lib-detail{padding-bottom:90px}

/* ---------- En-tête ---------- */
.lib-intro{max-width:640px;margin:18px auto 0;color:var(--text-dim)}

/* ---------- Recherche ---------- */
.lib-search{position:relative;max-width:640px;margin:0 auto 26px}
#lib-search-input{
  width:100%;padding:16px 20px;font:600 1.05rem var(--font-body);
  color:var(--sand);background:rgba(11,34,46,.82);
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
  outline:none;
}
#lib-search-input:focus{border-color:var(--orange-deep)}
#lib-search-input::placeholder{color:var(--blue-soft)}
.lib-suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  list-style:none;margin:0;padding:6px;
  background:rgba(11,34,46,.97);border:3px solid var(--blue-mid);
  box-shadow:var(--shadow-hard-lg);max-height:320px;overflow:auto;
}
.lib-suggest .suggest-group{
  padding:8px 12px 4px;font-family:var(--font-display);font-size:.55rem;
  color:var(--blue-soft);text-transform:uppercase;letter-spacing:.08em;
}
.lib-suggest .suggest-item{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border:2px solid transparent;cursor:pointer;
  background:none;color:var(--sand);font:600 1rem var(--font-body);
}
.lib-suggest .suggest-item .sub{color:var(--blue-pale);font-weight:400;font-size:.9rem}
.lib-suggest .suggest-item[aria-selected="true"],
.lib-suggest .suggest-item:hover{border-color:var(--orange-deep);background:rgba(242,157,53,.08)}

/* ---------- Chips catégories ---------- */
.lib-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.chip{
  padding:.5em 1em;font:600 .95rem var(--font-body);cursor:pointer;
  color:var(--blue-light);background:rgba(17,53,71,.75);
  border:2px solid var(--blue-mid);box-shadow:3px 3px 0 rgba(7,20,27,.9);
}
.chip:hover{color:var(--orange-hi)}
.chip[aria-pressed="true"]{
  color:var(--charcoal, #111);background:linear-gradient(135deg,var(--orange-hi),var(--orange));
  border-color:var(--orange-deep);
}

/* ---------- Grille d'arcs (niveau 2) ---------- */
.lib-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.arc-card{
  display:flex;flex-direction:column;gap:10px;min-height:190px;
  padding:22px;text-decoration:none;
  background:linear-gradient(160deg, rgba(17,53,71,.92), rgba(11,34,46,.92));
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
  transition:transform .15s ease, border-color .15s ease;
}
.arc-card:hover,.arc-card:focus-visible{transform:translate(-2px,-2px);border-color:var(--orange-deep)}
.arc-card .arc-cat{
  font-family:var(--font-display);font-size:.55rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.08em;
}
.arc-card h3{
  color:var(--sand);font-size:.85rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.arc-card .arc-subs{display:flex;flex-wrap:wrap;gap:6px}
.arc-card .arc-subs span{
  font:400 .8rem var(--font-body);color:var(--blue-pale);
  padding:2px 8px;border:1px solid var(--blue-mid);background:rgba(11,34,46,.6);
}
.arc-card .arc-count{
  margin-top:auto;font:600 .9rem var(--font-body);color:var(--orange-hi);
}

/* ---------- Squelettes ---------- */
.skeleton{
  position:relative;overflow:hidden;background:rgba(17,53,71,.6);
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(160,174,181,.10), transparent);
  transform:translateX(-100%);animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){ .skeleton::after{animation:none} }
.skeleton--arc{min-height:190px}
.skeleton--quest{min-height:170px}

/* ---------- États ---------- */
.lib-state{text-align:center;padding:60px 20px;display:grid;gap:18px;justify-items:center}
.lib-state h2{font-size:1rem;color:var(--sand)}
.lib-state p{color:var(--text-dim);max-width:480px}
.lib-sentinel{height:2px}

/* ---------- Détail (niveau 3) ---------- */
.detail-head{max-width:820px;margin:0 auto 34px;display:grid;gap:14px;justify-items:start}
.detail-back{font-size:.95rem}
.detail-cat{
  font-family:var(--font-display);font-size:.6rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.08em;
}
.detail-head h1{font-size:1.3rem;color:var(--sand)}
.detail-desc{color:var(--text-dim);max-width:640px}

.detail-tabs{
  display:flex;gap:0;max-width:820px;margin:0 auto 30px;
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
  background:rgba(11,34,46,.85);
}
.detail-tab{
  flex:1;padding:14px 10px;cursor:pointer;background:none;border:none;
  font:600 1.05rem var(--font-body);color:var(--blue-pale);
  border-bottom:3px solid transparent;
}
.detail-tab[aria-selected="true"]{
  color:var(--sand);
  background:linear-gradient(180deg, rgba(242,157,53,.14), transparent);
  border-bottom-color:var(--orange);
}
.detail-tab .tab-count{color:var(--orange-hi);font-size:.9rem}

/* Sous-filtres de sous-arcs */
.detail-subarcs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.detail-subarcs .chip{font-size:.85rem}

/* ---------- Quêtes : grille de cartes ---------- */
.quests-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quest-card{
  display:flex;flex-direction:column;gap:10px;min-height:170px;padding:20px;
  background:linear-gradient(165deg, rgba(17,53,71,.94), rgba(11,34,46,.94));
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
}
.quest-card h4{
  font-family:var(--font-display);font-size:.7rem;line-height:1.6;color:var(--sand);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.9em;
}
.quest-card p{
  color:var(--text-dim);font-size:.95rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:4.05em;
}
.quest-meta{
  margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font:600 .8rem var(--font-body);
}
.quest-meta .meta{
  padding:2px 8px;border:1px solid var(--blue-mid);color:var(--blue-pale);
  background:rgba(11,34,46,.6);
}
.quest-meta .meta--xp{color:var(--orange);border-color:var(--orange-deep)}
.quest-meta .meta--rarete-rare{color:#7fd4e8}
.quest-meta .meta--rarete-epique{color:#c79bf2}
.quest-meta .meta--rarete-legendaire{color:var(--orange-hi);border-color:var(--orange-deep)}

/* ---------- Objectifs : piste verticale ---------- */
.obj-track{
  list-style:none;max-width:680px;margin:0 auto;padding:0 0 0 34px;
  position:relative;display:grid;gap:22px;
}
.obj-track::before{
  content:"";position:absolute;left:11px;top:8px;bottom:8px;width:4px;
  background:linear-gradient(180deg, #2b7ea1 0%, #4096be 35%, var(--orange) 85%, var(--orange-hi) 100%);
  box-shadow:2px 2px 0 rgba(7,20,27,.9);
}
.obj-item{
  position:relative;padding:18px 20px;
  background:linear-gradient(160deg, rgba(17,53,71,.94), rgba(11,34,46,.94));
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
}
.obj-item::before{
  content:attr(data-num);
  position:absolute;left:-34px;top:16px;width:26px;height:26px;
  display:grid;place-items:center;
  font:700 .8rem var(--font-body);color:var(--charcoal,#111);
  background:var(--orange);border:2px solid var(--orange-deep);
  box-shadow:2px 2px 0 rgba(7,20,27,.9);
}
.obj-item h4{
  font-family:var(--font-display);font-size:.65rem;line-height:1.6;
  color:var(--sand);margin-bottom:8px;
}
.obj-item .obj-row{display:flex;gap:8px;align-items:baseline;font-size:.95rem;margin-top:4px}
.obj-item .obj-row .lbl{
  flex:none;font:600 .75rem var(--font-body);color:var(--orange);
  text-transform:uppercase;letter-spacing:.05em;
}
.obj-item .obj-row .val{color:var(--text-dim)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .lib-grid,.quests-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lib-grid,.quests-grid{grid-template-columns:1fr}
  .detail-head h1{font-size:1.05rem}
  .fluid{filter:blur(60px)}
}

/* ---------- Adaptations schéma codex (v7) ---------- */
.obj-item .obj-text{color:var(--blue-light);font-size:1rem;line-height:1.6}
.quest-card{min-height:110px}
.quest-card h4{min-height:0}
.quest-card p{min-height:0}

/* ---------- Filtres en cascade (v8) ---------- */
.lib-filters{
  display:grid;grid-template-columns:1fr 1.4fr .8fr;gap:14px;
  max-width:760px;margin:0 auto 36px;
}
.lib-filter{display:grid;gap:6px}
.lib-filter label{
  font-family:var(--font-display);font-size:.55rem;color:var(--blue-soft);
  text-transform:uppercase;letter-spacing:.08em;
}
.lib-filter select{
  width:100%;padding:12px 38px 12px 14px;cursor:pointer;
  font:600 1rem var(--font-body);color:var(--sand);
  background:rgba(11,34,46,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F29D35' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:3px solid var(--blue-mid);box-shadow:var(--shadow-hard);
  appearance:none;-webkit-appearance:none;
}
.lib-filter select:focus{outline:none;border-color:var(--orange-deep)}
.lib-filter select option,.lib-filter select optgroup{
  background:var(--blue-deep);color:var(--sand);
}
@media (max-width:760px){
  .lib-filters{grid-template-columns:1fr}
}

/* ---------- Correctif v9 : l'attribut hidden gagne TOUJOURS ----------
   (display:grid/flex sur .lib-state etc. écrasait le hidden natif,
   rendant les panneaux d'état visibles en permanence) */
[hidden]{display:none !important}