/* ============================================================
   SCREENS — styles propres à chaque écran
   ============================================================ */

/* ============================================================
   QUÊTES — carte Mon Héros
   ============================================================ */
.carte-heros { position: relative; overflow: hidden; }
.carte-heros::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
}
.carte-heros.elo::before  { background: radial-gradient(ellipse at 100% 0%, var(--elo), transparent 62%); }
.carte-heros.miko::before { background: radial-gradient(ellipse at 100% 0%, var(--miko), transparent 62%); }
.carte-heros.ju::before   { background: radial-gradient(ellipse at 100% 0%, var(--ju), transparent 62%); }
.carte-heros > * { position: relative; }

.heros-haut { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.heros-avatar { font-size: 2.5rem; line-height: 1; }
.heros-ident { flex: 1; min-width: 0; }
.heros-ident strong { display: block; font-family: 'Cinzel', serif; font-size: 1.2rem; }
.heros-ident small { color: var(--muted); font-size: .76rem; }
.heros-familier {
  font-size: 1.8rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
}
.heros-familier.oeuf { opacity: .55; filter: grayscale(.5); }
.heros-familier.eclos { border-color: var(--food); box-shadow: 0 0 16px -4px rgba(217,141,92,.7); }

.heros-xp { margin-bottom: 13px; }
.heros-xp-legende, .fiche-xp-legende {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .7rem;
  color: var(--faint);
  margin-top: 6px;
}

.heros-res { display: flex; gap: 8px; margin-bottom: 13px; }

.heros-jour {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .76rem;
  color: var(--muted);
  padding: 9px 12px;
  background: rgba(0,0,0,.26);
  border-radius: var(--r-s);
  margin-bottom: 13px;
}

.btn-fiche { margin-top: 0; }

/* ---------- Aperçu des autres héros — côte à côte ---------- */
.apercu-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.apercu-heros {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: var(--r-m);
  min-width: 0;
}
.apercu-heros.elo  { border-top-color: var(--elo); }
.apercu-heros.miko { border-top-color: var(--miko); }
.apercu-heros.ju   { border-top-color: var(--ju); }

.apercu-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.apercu-avatar { font-size: 1.7rem; line-height: 1; }
.apercu-pct { font-size: 1.1rem; font-weight: 800; color: var(--gold); }

.apercu-nom {
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apercu-niv  { color: var(--muted); font-size: .68rem; display: block; }
.apercu-heros .bar { height: 6px; margin: 5px 0 3px; }
.apercu-sous { font-size: .64rem; color: var(--faint); display: block; }

/* Sur écran très étroit, on empile plutôt que de tout écraser */
@media (max-width: 340px) {
  .apercu-grille { grid-template-columns: 1fr; }
}

/* ---------- Dé ---------- */
.carte-de { border-color: var(--goldDim); }
.carte-de.de-echec    { border-color: rgba(196,92,82,.5); }
.carte-de.de-faveur   { border-color: rgba(201,168,76,.55); }
.carte-de.de-critique { border-color: var(--gold); box-shadow: 0 0 30px -12px rgba(201,168,76,.7); }

.de-resultat { display: flex; align-items: center; gap: 15px; }
.de-face {
  width: 58px; height: 58px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--border-fort);
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--gold);
}
.de-verdict strong { display: block; font-family: 'Cinzel', serif; font-size: .95rem; margin-bottom: 3px; }
.de-verdict small { color: var(--muted); font-size: .78rem; line-height: 1.5; }

.de-tirage {
  margin-top: 14px;
  padding: 10px 13px;
  background: rgba(201,168,76,.1);
  border: 1px solid var(--goldDim);
  border-radius: var(--r-s);
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.de-tirage strong { color: var(--gold); }
.de-tire {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(201,168,76,.14);
  border: 1px solid var(--goldDim);
  color: var(--gold);
  font-weight: 700;
  font-size: .82rem;
}

.de-apercu {
  margin-top: 15px;
  padding: 12px;
  background: rgba(0,0,0,.26);
  border-radius: var(--r-s);
}
.de-apercu-titre { font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.de-apercu-ligne { display: flex; justify-content: space-between; font-size: .82rem; padding: 3px 0; }
.gain  { color: var(--greenGlow); font-weight: 700; }
.perte { color: var(--danger); font-weight: 700; }

.de-scene { text-align: center; padding: 20px 0 10px; }
.de-cube {
  width: 92px; height: 92px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--panel2);
  border: 2px solid var(--border-fort);
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--gold);
}
.de-cube.roulant { animation: roule .45s linear infinite; }
@keyframes roule {
  0%   { transform: rotate(0) scale(1); }
  50%  { transform: rotate(9deg) scale(1.06); }
  100% { transform: rotate(0) scale(1); }
}
.de-cube.pose { animation: pose .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes pose { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.de-cube.de-echec    { border-color: var(--danger); color: var(--danger); }
.de-cube.de-critique { border-color: var(--gold); box-shadow: 0 0 40px -6px rgba(201,168,76,.75); }
.de-attente { color: var(--muted); font-size: .85rem; line-height: 1.6; }

/* ---------- Quêtes du jour ---------- */
.quete-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.quete-tete .card-title { margin: 0; }
.quete-meta { font-size: .7rem; color: var(--faint); white-space: nowrap; }

.taches { margin-top: 13px; display: flex; flex-direction: column; gap: 3px; }

.tache {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(42,74,44,.4);
}
.tache:last-child { border-bottom: none; }
.tache.faite { opacity: .45; }
.tache.faite .tache-corps strong { text-decoration: line-through; }
.tache.detestee { border-left: 2px solid var(--reput); padding-left: 10px; margin-left: -12px; }

.tache-check {
  width: 26px; height: 26px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--border-fort);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: .85rem;
  font-weight: 900;
  color: transparent;
  transition: background .16s, border-color .16s, transform .12s;
}
.tache-check:active { transform: scale(.86); }
.tache-check.coche { background: var(--green); border-color: var(--green); color: #06120a; }

.tache-corps { flex: 1; min-width: 0; }
.tache-corps strong { display: block; font-size: .89rem; line-height: 1.35; margin-bottom: 3px; }
.tache-corps small { display: block; color: var(--faint); font-size: .72rem; line-height: 1.5; }

.tache-domaine {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size: .66rem;
}
.prio-haute    { color: var(--warn); }
.prio-critique { color: var(--danger); font-weight: 700; }
.prio-basse    { color: var(--faint); }
.tag-oracle    { color: var(--don); }

.badge-deteste {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(199,143,209,.12);
  border: 1px solid rgba(199,143,209,.32);
  color: var(--reput);
  font-size: .66rem;
  font-weight: 700;
}

.tache-gains { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gain-xp   { color: var(--greenGlow); font-size: .8rem; font-weight: 800; }
.gain-kama { color: var(--kama);      font-size: .8rem; font-weight: 800; }

.zone-sceau { margin-bottom: var(--gap); }

/* ---------- Domaines bouclés, repliés ---------- */
.quete-bouclee {
  background: rgba(15,26,16,.5);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  margin-bottom: 8px;
  overflow: hidden;
}
.quete-bouclee.ouverte { background: var(--panel); border-color: var(--goldDim); }

.quete-bouclee-tete {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
}
.bouclee-coche {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #06120a;
  font-size: .72rem;
  font-weight: 900;
}
.bouclee-nom {
  flex: 1;
  min-width: 0;
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bouclee-meta { font-size: .68rem; color: var(--faint); white-space: nowrap; }
.bouclee-chevron {
  color: var(--faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .2s;
}
.quete-bouclee.ouverte .bouclee-chevron { transform: rotate(180deg); }
.quete-bouclee .taches { padding: 0 14px 10px; margin-top: 0; }

/* ---------- Quêtes annexes ---------- */
.note-annexe { margin: -4px 2px 12px; }
.carte-annexe { border-color: var(--goldDim); }
.annexe-tete { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 9px; }
.annexe-icone {
  font-size: 1.6rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(201,168,76,.1);
  flex-shrink: 0;
}
.annexe-tete .card-title { margin-bottom: 3px; }
.annexe-gains { display: flex; gap: 10px; }

/* ============================================================
   FICHE DE HÉROS
   ============================================================ */
.fiche-identite { position: relative; overflow: hidden; }
.fiche-identite::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.fiche-identite.elo::before  { background: radial-gradient(ellipse at 20% 0%, var(--elo), transparent 60%); }
.fiche-identite.miko::before { background: radial-gradient(ellipse at 20% 0%, var(--miko), transparent 60%); }
.fiche-identite.ju::before   { background: radial-gradient(ellipse at 20% 0%, var(--ju), transparent 60%); }
.fiche-identite > * { position: relative; }

.fiche-tete { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.fiche-avatar { font-size: 3rem; line-height: 1; }
.fiche-nom { font-size: 1.35rem; margin-bottom: 2px; }
.fiche-titre { color: var(--gold); font-size: .84rem; font-weight: 700; }
.fiche-role  { color: var(--faint); font-size: .72rem; margin-top: 2px; }

.fiche-niveau {
  margin-left: auto;
  text-align: center;
  padding: 8px 14px;
  border-radius: var(--r-m);
  background: rgba(0,0,0,.32);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.fiche-niveau-num { display: block; font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 900; color: var(--gold); line-height: 1; }
.fiche-niveau-lbl { display: block; font-size: .56rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* ---------- Bonus ---------- */
.card-bonus { border-color: var(--goldDim); }
.card-bonus em { color: var(--warn); font-style: normal; }
.liste-bonus { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.liste-bonus li {
  font-size: .82rem;
  color: var(--muted);
  padding: 7px 11px;
  background: rgba(0,0,0,.24);
  border-radius: var(--r-s);
}
.liste-bonus strong { color: var(--text); }

.sources-bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.source-bonus {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .68rem;
  border: 1px solid var(--border);
}
.source-bonus.perm { background: rgba(95,168,98,.1);  border-color: rgba(95,168,98,.35);  color: #b8dcb8; }
.source-bonus.temp { background: rgba(217,154,78,.1); border-color: rgba(217,154,78,.35); color: #e8cba0; }

/* ---------- Familier ---------- */
.carte-familier { border-color: rgba(217,141,92,.35); }
.familier-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.familier-icone {
  font-size: 2.1rem;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(217,141,92,.1);
  border: 1px solid rgba(217,141,92,.3);
  flex-shrink: 0;
}
.familier-ident { flex: 1; min-width: 0; }
.familier-ident strong { display: block; font-family: 'Cinzel', serif; font-size: 1.05rem; }
.familier-ident small { color: var(--muted); font-size: .74rem; }

.familier-bonus {
  margin-top: 11px;
  padding: 8px 12px;
  background: rgba(217,141,92,.1);
  border-radius: var(--r-s);
  font-size: .78rem;
  color: #e8b795;
}
.familier-nourrir { margin-top: 13px; }
.familier-nourrir .note-fine { margin-bottom: 9px; margin-top: 0; }

.carte-familier.oeuf { border-color: var(--border); }
.carte-familier.eclos { border-color: rgba(217,141,92,.55); }

.familier-dormant {
  margin-top: 11px;
  padding: 10px 13px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--border-fort);
  border-radius: var(--r-s);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
}
.familier-dormant strong { color: var(--text); }

.familier-texte {
  margin-top: 10px;
  font-size: .76rem;
  font-style: italic;
  color: var(--faint);
  line-height: 1.5;
}

.familier-icone.frissonne { animation: frissonne 3.4s ease-in-out infinite; }
@keyframes frissonne {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-7deg); }
  94% { transform: rotate(6deg); }
  97% { transform: rotate(-3deg); }
}

/* ------------------------------------------------------------
   MA VOIE — les 20 pouvoirs de classe
   Une colonne de paliers : acquis, prochain, verrouillés.
   (L'ancien arbre Domaines / Endurance / Fortune a disparu avec
   la Saison 1 ; ses styles aussi.)
   ------------------------------------------------------------ */
.note-arbre { margin: -4px 2px 14px; }

.carte-voie { border-color: color-mix(in srgb, var(--gold) 30%, transparent); }

.voie-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.voie-icone { font-size: 2rem; }
.voie-ident { display: flex; flex-direction: column; gap: 2px; }
.voie-ident strong { font-size: 1.05rem; color: var(--gold); }
.voie-ident small { color: var(--muted); font-size: .82rem; }

.voie-compte {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
  font-size: .85rem;
}
.voie-prochain { color: var(--muted); }

.voie-ressource {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-top: 8px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: rgba(0,0,0,.18);
  font-size: .85rem;
}
.voie-ressource strong { color: var(--don); }
.voie-ressource small { flex-basis: 100%; color: var(--muted); font-size: .78rem; line-height: 1.4; }

.voie-regles {
  margin: 10px 0 0; padding-left: 18px;
  color: var(--muted); font-size: .8rem; line-height: 1.5;
}

.voie-pouvoirs { display: grid; gap: 8px; }

.pouvoir {
  display: grid;
  /* La dernière colonne porte tantôt une coche, tantôt un bouton
     « Utiliser » : elle se dimensionne sur son contenu. */
  grid-template-columns: 34px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  background: var(--panel);
}

.pouvoir-niveau {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-fort);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.pouvoir-tete { display: flex; align-items: center; gap: 6px; }
.pouvoir-corps small { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.pouvoir-etat { text-align: right; color: var(--faint); min-width: 20px; }
.pouvoir-etat .btn-mini { white-space: nowrap; }

.pouvoir.acquis { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.pouvoir.acquis .pouvoir-niveau { border-color: var(--green); color: var(--greenGlow); }
.pouvoir.acquis .pouvoir-etat { color: var(--green); }

.pouvoir.verrouille { opacity: .55; }

.pouvoir.suivant {
  opacity: 1;
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent);
}
.pouvoir.suivant .pouvoir-etat { color: var(--gold); }

.pouvoir.majeur .pouvoir-tete strong { color: var(--gold); }
.pouvoir-etoile { color: var(--gold); font-size: .8rem; }

/* ---------- Objets (usage unique) ---------- */
.grille-equip { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--gap); }

.rappel-usage { border-color: rgba(217,154,78,.4); background: rgba(217,154,78,.06); }
.rappel-usage .card-sub { margin-bottom: 0; }

.objet {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  transition: opacity .18s, border-color .18s;
}
.objet.actif  { border-color: var(--warn); background: rgba(217,154,78,.07); }
.objet.epuise { opacity: .38; }
.objet-equipe { border-left: 3px solid var(--don); }

.objet-icone {
  font-size: 1.5rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  flex-shrink: 0;
}
.objet.epuise .objet-icone { filter: grayscale(1); }

.objet-corps { flex: 1; min-width: 0; }
.objet-corps strong { display: block; font-size: .88rem; margin-bottom: 3px; }
.objet-effet { display: block; color: var(--greenGlow); font-size: .73rem; line-height: 1.45; }

.objet-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.objet-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: var(--faint);
  font-size: .64rem;
  white-space: nowrap;
}
.objet-tag.ok { color: var(--greenGlow); background: rgba(95,168,98,.1); }
.objet-tag.tag-equipe { color: var(--don); background: rgba(127,199,192,.1); }

.objet-action { flex-shrink: 0; }
.objet-etat { font-size: .7rem; color: var(--faint); white-space: nowrap; }
.objet-etat.actif { color: var(--warn); font-weight: 700; }

/* Choix d'une tâche à retirer */
.choix-taches { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.choix-tache {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  text-align: left;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  transition: border-color .16s, background .16s;
}
.choix-tache:hover { border-color: var(--gold); background: var(--panel3); }
.choix-tache-nom { font-size: .88rem; font-weight: 700; }
.choix-tache-meta { font-size: .7rem; color: var(--faint); }

/* ---------- Trophées ---------- */
.liste-trophees { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--gap); }

.trophee {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
}
.trophee.elo  { border-left: 3px solid var(--elo); }
.trophee.miko { border-left: 3px solid var(--miko); }
.trophee.ju   { border-left: 3px solid var(--ju); }
.trophee.secret { opacity: .5; }
.trophee.secret.ouvert { opacity: 1; border-color: var(--goldDim); }

/* Exploits scellés : aucun indice, juste des sceaux muets */
.note-scelles { margin: -4px 2px 12px; }
.grille-scelles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 9px;
  margin-bottom: var(--gap);
}
.sceau-mystere {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: rgba(0,0,0,.3);
  border: 1px dashed var(--border-fort);
  font-size: 1.4rem;
  color: var(--faint);
  opacity: .45;
}

.trophee-icone {
  font-size: 1.7rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(201,168,76,.09);
  flex-shrink: 0;
}
.trophee-corps { flex: 1; min-width: 0; }
.trophee-corps strong { display: block; font-family: 'Cinzel', serif; font-size: .92rem; margin-bottom: 3px; }
.trophee-corps small { display: block; color: var(--faint); font-size: .7rem; }
.trophee-desc { margin-top: 5px; color: var(--muted) !important; line-height: 1.5; }
.trophee-xp { color: var(--greenGlow); font-size: .76rem; font-weight: 800; flex-shrink: 0; }

/* ============================================================
   INTENDANCE — Conseil des Sages
   ============================================================ */
.carte-sages { border-color: var(--goldDim); }

.sages-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.sages-tete .card-sub { margin-bottom: 0; }
.sages-resume { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.sages-sante {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 900;
  padding: 5px 11px;
  border-radius: var(--r-s);
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
}
.sante-bonne    { color: var(--greenGlow); border-color: rgba(125,209,127,.45); }
.sante-moyenne  { color: var(--warn);      border-color: rgba(217,154,78,.45); }
.sante-mauvaise { color: var(--danger);    border-color: rgba(196,92,82,.45); }

.chevron {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(201,168,76,.12);
  border: 1px solid var(--goldDim);
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  padding-bottom: 6px;
  transition: transform .22s;
}
.chevron.ouvert { transform: rotate(180deg); padding-bottom: 0; padding-top: 6px; }

.btn-plier { margin-top: 14px; }

.sages-focus { margin-top: 14px; }
.sages-focus-titre { font-size: .68rem; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.sages-focus-liste { display: flex; flex-wrap: wrap; gap: 7px; }
.focus-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid;
}
.focus-pastille.etat-rouge  { background: rgba(196,92,82,.14);  border-color: rgba(196,92,82,.5);  color: #e8a29a; }
.focus-pastille.etat-orange { background: rgba(217,154,78,.14); border-color: rgba(217,154,78,.5); color: #e8c48f; }
.focus-poids { font-style: normal; opacity: .6; font-size: .66rem; }

.sages-corps { display: none; margin-top: 16px; }
.sages-corps.ouvert { display: block; animation: deplie .26s ease; }
@keyframes deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.sages-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 13px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.legende-item { font-size: .7rem; color: var(--faint); }

.sages-grille { display: flex; flex-direction: column; }

.piece {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(42,74,44,.4);
}
.piece:last-child { border-bottom: none; }
.piece.non-jaugee { opacity: .55; }

.piece-ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
.piece-icone { font-size: 1.25rem; }
.piece-ident strong { display: block; font-size: .86rem; }
.piece-ident small { display: block; color: var(--faint); font-size: .68rem; margin-top: 1px; }

.piece-jauge { display: flex; gap: 5px; flex-shrink: 0; }
.jauge {
  width: 36px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
  font-size: .8rem;
  filter: grayscale(.85);
  opacity: .55;
  transition: filter .16s, opacity .16s, transform .12s, border-color .16s;
}
.jauge:active { transform: scale(.88); }
.jauge.actif { filter: none; opacity: 1; transform: scale(1.06); }
.jauge-vert.actif   { border-color: var(--green);  background: rgba(95,168,98,.16); }
.jauge-orange.actif { border-color: var(--warn);   background: rgba(217,154,78,.16); }
.jauge-rouge.actif  { border-color: var(--danger); background: rgba(196,92,82,.16); }

.sages-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }

/* ---------- Cargaison ---------- */
.liste-cargo { display: flex; flex-direction: column; }
.ligne-cargo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(42,74,44,.4);
}
.ligne-cargo:last-child { border-bottom: none; }

/* ============================================================
   CONSEIL / TAVERNE
   ============================================================ */
.liste-sceaux { display: flex; flex-direction: column; }
.ligne-sceau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(42,74,44,.4);
}
.ligne-sceau:last-child { border-bottom: none; }

.carte-missive .missive-corps strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.carte-missive .missive-corps small { display: block; color: var(--muted); font-size: .76rem; }
.missive-texte {
  margin-top: 9px;
  padding: 9px 12px;
  border-left: 2px solid var(--goldDim);
  background: rgba(0,0,0,.24);
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
  line-height: 1.55;
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.missive-actions { display: flex; gap: 7px; margin-top: 13px; }
.missive-actions .btn { flex: 1; padding: 10px 4px; font-size: .72rem; }

.ligne-reglee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  margin-bottom: 8px;
  opacity: .68;
}

.carte-missive-mini { padding: 13px 15px; }
.missive-mini-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 5px; }
.carte-missive-mini small { display: block; color: var(--faint); font-size: .72rem; line-height: 1.5; }

.taverne-verrouillee {
  min-height: 180px;
  display: grid;
  place-items: center;
  border-style: dashed;
}
.verrou { font-size: 2.6rem; opacity: .3; }

/* ============================================================
   MARCHAND
   ============================================================ */
.carte-marchand { border-color: var(--goldDim); }
.marchand-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.marchand-figure {
  font-size: 2.1rem;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(201,168,76,.1);
  border: 1px solid var(--goldDim);
  flex-shrink: 0;
}
.marchand-tete .card-sub { margin-bottom: 0; font-style: italic; }

.marchand-bourse {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: rgba(0,0,0,.3);
  border-radius: var(--r-m);
}
.marchand-bourse .res-icon { font-size: 1.4rem; }
.marchand-solde { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 900; color: var(--kama); }
.marchand-bourse .res-label { font-size: .68rem; }

.grille-boutique { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }

.article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  transition: border-color .18s;
}
.article.possede { border-color: var(--goldDim); background: rgba(201,168,76,.05); }
.article.indispo { opacity: .55; }

.article-icone {
  font-size: 1.6rem;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  flex-shrink: 0;
}
.article-corps { flex: 1; min-width: 0; }
.article-corps strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.article-desc { display: block; color: var(--faint); font-size: .73rem; line-height: 1.5; }
.article-effet {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 9px;
  background: rgba(95,168,98,.1);
  border-radius: 6px;
  font-size: .71rem;
  color: var(--greenGlow);
}
.article-prereq { margin-top: 6px; font-size: .68rem; color: var(--danger); }
.article-prereq.ok { color: var(--faint); }

.article-achat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
  max-width: 40%;
}
.article-prix { font-size: .95rem; font-weight: 800; color: var(--kama); white-space: nowrap; }
.article-prix.trop-cher { color: var(--danger); }
.article-source { font-size: .62rem; color: var(--don); white-space: nowrap; margin-top: -4px; }
.article-raison { font-size: .68rem; color: var(--faint); text-align: right; line-height: 1.4; }
.article-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.article-stock { margin-top: 6px; font-size: .68rem; color: var(--gold); }
.note-famille { margin: -4px 2px 10px; font-size: .74rem; }

/* ---------- Cagnotte commune ---------- */
.carte-cagnotte { border-color: var(--don); background: rgba(127,199,192,.04); }

.cagnotte-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cagnotte-urne {
  font-size: 2rem;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: rgba(127,199,192,.1);
  border: 1px solid rgba(127,199,192,.35);
  flex-shrink: 0;
}
.cagnotte-tete .card-sub { margin-bottom: 0; }

.cagnotte-solde {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background: rgba(0,0,0,.3);
  border-radius: var(--r-m);
  margin-bottom: 14px;
}
.cagnotte-montant {
  font-family: 'Cinzel', serif;
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--don);
}

.cagnotte-parts { margin-bottom: 14px; }
.cagnotte-parts-titre {
  font-size: .68rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.cagnotte-barre {
  display: flex;
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,.4);
  gap: 2px;
}
.part { display: block; height: 100%; }
.part-elo  { background: var(--elo); }
.part-miko { background: var(--miko); }
.part-ju   { background: var(--ju); }

.cagnotte-legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.legende-part { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--muted); }
.puce { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.puce-elo  { background: var(--elo); }
.puce-miko { background: var(--miko); }
.puce-ju   { background: var(--ju); }

.montants-rapides { display: flex; gap: 8px; margin-bottom: 14px; }
.btn-montant { flex: 1; padding: 12px 4px; font-size: .82rem; }
.btn-montant.choisi { border-color: var(--gold); background: rgba(201,168,76,.16); color: var(--gold); }

/* ------------------------------------------------------------
   RITUEL DU SOIR
   Bloc collectif obligatoire : il se distingue des quêtes du jour
   sans crier, et il ne se replie jamais.
   ------------------------------------------------------------ */
.carte-rituel {
  border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 7%, transparent) 0%,
      transparent 45%),
    var(--panel);
}

.carte-rituel .card-title { color: var(--gold); }

.rituel-note {
  margin: .35rem 0 .7rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}

.rituel-boucle {
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  opacity: .85;
}

.rituel-boucle .card-title { color: var(--green); }

/* ------------------------------------------------------------
   QUARTIER DES MARCHANDS
   Plusieurs échoppes, un étal par semaine, des raretés lisibles
   d'un coup d'œil.
   ------------------------------------------------------------ */
.sous-onglets-marchands { overflow-x: auto; scrollbar-width: none; }
.sous-onglets-marchands::-webkit-scrollbar { display: none; }
.sous-onglets-marchands .sous-onglet { white-space: nowrap; }

.carte-echoppe .card-sub { font-style: italic; }

.objet-tag.tag-common   { color: var(--faint); }
.objet-tag.tag-uncommon { color: var(--green);  border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.objet-tag.tag-rare     { color: #4c9ec9;       border-color: color-mix(in srgb, #4c9ec9 45%, transparent); }
.objet-tag.tag-epic     { color: var(--dignity); border-color: color-mix(in srgb, var(--dignity) 50%, transparent); }

.article-remise { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.prix-barre { opacity: .5; font-weight: 400; }

.paliers-tresor { display: grid; gap: 8px; margin-bottom: 10px; }

.palier {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  font-size: .88rem;
  opacity: .6;
}

.palier.atteint {
  opacity: 1;
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}

.palier-seuil { color: var(--kama); font-variant-numeric: tabular-nums; }

.marchand-avenir {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: .85rem;
  color: var(--muted);
}

.avenir-nom { flex: 1; }
.avenir-quand { font-size: .78rem; color: var(--faint); }

/* Objets à charges : l'exception à l'usage unique se voit. */
.objet-tag.tag-charges {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ------------------------------------------------------------
   QUÊTES SOCIALES
   Deux propositions, une seule payée. Facultatif : la carte reste
   lisible même quand le Kama du jour est déjà pris.
   ------------------------------------------------------------ */
.carte-sociale .card-sub { line-height: 1.5; }

.sociale-meta { color: var(--muted); font-size: .78rem; }

.sociale-close { opacity: .72; }
.sociale-close .gain-kama { opacity: .5; }

.sociale-faite { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.sociale-validee {
  padding: 9px 0 2px;
  text-align: center;
  color: var(--green);
  font-size: .85rem;
}

/* Pouvoirs : coût, charge restante, et choix de cible. */
.pouvoir-cout, .pouvoir-charge {
  font-size: .68rem;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted);
  white-space: nowrap;
}
.pouvoir-cout { color: var(--don); border-color: color-mix(in srgb, var(--don) 40%, transparent); }
.pouvoir-raison { font-size: .7rem; color: var(--faint); text-align: right; display: block; }
.pouvoir-manuel { margin-top: 5px; font-size: .74rem; color: var(--faint); font-style: italic; }
.pouvoir-tete { flex-wrap: wrap; }

.jauge-ressource { letter-spacing: 2px; color: var(--don); }
.jauge-ressource i { font-style: normal; font-size: .75rem; color: var(--muted); margin-left: 4px; }

.choix-taches { display: grid; gap: 8px; }
.choix-tache {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--r-s);
  color: var(--text);
  cursor: pointer;
}
.choix-tache:hover { border-color: var(--border-fort); }
.choix-tache small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }

/* L'étal distingue ce que l'app applique de ce qui reste à la main. */
.objet-tag.tag-auto { color: var(--don); border-color: color-mix(in srgb, var(--don) 40%, transparent); }

/* Quêtes utiles : du vrai travail, et une prime au bout. */
.carte-utile { border-color: color-mix(in srgb, var(--kama) 32%, transparent); }
.carte-utile .card-title { color: var(--kama); }
.utile-faite { border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.utile-faite .card-title { color: var(--green); }