@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&display=swap');

/* ══════════════════════════════════
   RESET + BASE
══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0c0c0c; }

.w {
  background: #0c0c0c;
  color: #ccc5b0;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 1.5rem 1.5rem 4rem;
  font-size: 14px;
  line-height: 1.6;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header ── */
.hdr {
  border-bottom: 1px solid #222;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.lbl { font-size: 11px; letter-spacing: 3px; color: #c9a84c; text-transform: uppercase; margin-bottom: .5rem; }
.bigname { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; line-height: 1.1; color: #fff; }
.sub { font-size: 13px; color: #555; margin-top: .4rem; letter-spacing: 1px; }

/* ── Badges ── */
.bdg { font-size: 11px; padding: 4px 11px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; display: inline-block; margin: 3px; }
.bdg-g { background: #c9a84c18; color: #c9a84c; border: 1px solid #c9a84c44; }
.bdg-r { background: #cc333318; color: #e05555; border: 1px solid #cc333355; }

/* ── Section titles ── */
.sec {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #c9a84c;
  margin: 2.5rem 0 1.2rem; padding-bottom: .6rem; border-bottom: 1px solid #1e1a12;
  display: flex; align-items: center; gap: 10px;
}
.sec::after { content: ''; flex: 1; height: 1px; background: #1e1a12; }

/* ── Grids ── */
.g1 { margin-bottom: 1rem; }
.g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ── Cards ── */
.card {
  background: #161616;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 1.2rem 1.3rem;
  position: relative;
  overflow: hidden;
}
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.cg::before { background: #c9a84c; }
.cr::before { background: #cc3333; }
.cb::before { background: #4a7fa5; }
.cp::before { background: #7a4a9e; }
.cn::before { background: #3a7a4a; }
.cq::before { background: #444; }

.ct { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #444; margin-bottom: .9rem; }

/* ── Stat rows ── */
.sr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: .45rem 0; border-bottom: 1px solid #1c1c1c; }
.sr:last-child { border-bottom: none; }
.sl { font-size: 13px; color: #555; white-space: nowrap; flex-shrink: 0; }
.sv { font-size: 13px; color: #ccc5b0; text-align: right; line-height: 1.4; }
.sv-g { color: #c9a84c; } .sv-r { color: #e05555; } .sv-b { color: #7aacd0; } .sv-p { color: #b07acc; } .sv-n { color: #6aaa7a; }

/* ── Traits ── */
.traits { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.tr { font-size: 11px; padding: 4px 10px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; }
.tr-r { background: #cc333315; color: #e05555; border: 1px solid #cc333330; }
.tr-g { background: #3a7a4a15; color: #6aaa7a; border: 1px solid #3a7a4a30; }
.tr-n { background: #4a7fa515; color: #7aacd0; border: 1px solid #4a7fa530; }
.tr-p { background: #7a4a9e15; color: #b07acc; border: 1px solid #7a4a9e30; }

.hr { border: none; border-top: 1px solid #1c1c1c; margin: .9rem 0; }
.qt { font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px; color: #c9a84c88; border-left: 2px solid #c9a84c33; padding-left: .8rem; margin: .7rem 0; line-height: 1.7; }

/* ── Meters ── */
.mtr { margin-bottom: .65rem; }
.mlbl { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin-bottom: 4px; }
.mbar { height: 4px; background: #1e1e1e; border-radius: 3px; overflow: hidden; }
.mfil { height: 100%; border-radius: 3px; }

/* ── Relation cards ── */
.rc {
  background: #161616;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: .6rem;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: start;
  gap: 12px;
}
.rav {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ra-g { background: #c9a84c18; color: #c9a84c; border: 1px solid #c9a84c44; }
.ra-r { background: #cc333318; color: #e05555; border: 1px solid #cc333344; }
.ra-b { background: #4a7fa518; color: #7aacd0; border: 1px solid #4a7fa544; }
.ra-p { background: #7a4a9e18; color: #b07acc; border: 1px solid #7a4a9e44; }
.ra-n { background: #3a7a4a18; color: #6aaa7a; border: 1px solid #3a7a4a44; }

.rn { font-size: 14px; color: #e0d8c8; font-weight: 500; line-height: 1.3; }
.rr { font-size: 12px; color: #555; margin-top: 3px; line-height: 1.4; }
.rd { font-size: 12px; color: #4a4a4a; margin-top: 6px; line-height: 1.6; }

.rs { font-size: 11px; padding: 3px 8px; border-radius: 3px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.rs-h { background: #cc333315; color: #e05555; border: 1px solid #cc333330; }
.rs-a { background: #3a7a4a15; color: #6aaa7a; border: 1px solid #3a7a4a30; }
.rs-c { background: #c9a84c15; color: #c9a84c; border: 1px solid #c9a84c30; }
.rs-t { background: #7a4a9e15; color: #b07acc; border: 1px solid #7a4a9e30; }
.rs-b { background: #4a7fa515; color: #7aacd0; border: 1px solid #4a7fa530; }

/* ── Timeline ── */
.tl { position: relative; padding-left: 1.5rem; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: #222; }
.tli { position: relative; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #1a1a1a; }
.tli:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.tldot { position: absolute; left: -1.5rem; top: 5px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid; }
.td-g { background: #c9a84c18; border-color: #c9a84c; }
.td-r { background: #cc333318; border-color: #cc3333; }
.td-b { background: #4a7fa518; border-color: #4a7fa5; }
.td-p { background: #7a4a9e18; border-color: #7a4a9e; }
.td-n { background: #3a7a4a18; border-color: #3a7a4a; }
.tlt { font-size: 14px; color: #e0d8c8; font-weight: 500; margin-bottom: 5px; }
.tld { font-size: 12px; color: #555; line-height: 1.7; }

/* ── Boxes ── */
.warn     { background: #cc333310; border-left: 3px solid #cc3333; padding: .9rem 1.1rem; font-size: 13px; color: #e05555; line-height: 1.7; margin-bottom: .7rem; }
.info-box { background: #4a7fa510; border-left: 3px solid #4a7fa5; padding: .9rem 1.1rem; font-size: 13px; color: #7aacd0; line-height: 1.7; margin-bottom: .7rem; }
.ambre    { background: #c9a84c10; border-left: 3px solid #c9a84c; padding: .9rem 1.1rem; font-size: 13px; color: #c9a84c; line-height: 1.7; margin-bottom: .7rem; }

/* ── Misc ── */
.note  { font-size: 12px; color: #333; font-style: italic; line-height: 1.6; margin-top: .6rem; }
.money { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #6aaa7a; font-weight: 700; }


/* ══════════════════════════════════
   VOIR PLUS / VOIR MOINS  (mobile_expand.js)
══════════════════════════════════ */
.expandable { position: relative; }

/* collapsed UNIQUEMENT sur mobile */
@media screen and (max-width: 768px) {
  .expandable.collapsed { max-height: 3.8em; overflow: hidden; }
  .expandable.collapsed::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2em;
    background: linear-gradient(transparent, #161616);
    pointer-events: none;
  }
  .warn .expandable.collapsed::after     { background: linear-gradient(transparent, #0d0a0a); }
  .info-box .expandable.collapsed::after { background: linear-gradient(transparent, #090c10); }

  .toggle-btn { display: inline-block; }
}

.toggle-btn {
  display: none;
  background: none;
  border: 1px solid #c9a84c55;
  color: #c9a84c;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 3px;
  margin-top: 8px;
  font-family: inherit;
}
.toggle-btn:hover { background: #c9a84c18; }


/* ══════════════════════════════════
   TABLETTE  769px – 900px
══════════════════════════════════ */
@media screen and (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bigname { font-size: 1.9rem; }
}


/* ══════════════════════════════════
   MOBILE  ≤ 768px
   !important pour écraser tout conflit
══════════════════════════════════ */
@media screen and (max-width: 768px) {

  /* Wrapper */
  .w { padding: 1rem 1rem 3rem; font-size: 15px; }

  /* Header */
  .hdr { flex-direction: column !important; gap: .75rem; }
  .hdr > div:last-child { text-align: left !important; }
  .bigname { font-size: 1.8rem; }
  .sub { font-size: 13px; }
  .lbl { font-size: 10px; }
  .bdg { font-size: 12px; padding: 5px 12px; }

  /* Grilles → 1 seule colonne, toujours */
  .g2 { display: block !important; }
  .g3 { display: block !important; }
  .g2 > *, .g3 > * { margin-bottom: 1rem; }
  .g2 > *:last-child, .g3 > *:last-child { margin-bottom: 0; }

  /* Cards */
  .card { padding: 1rem; }
  .ct { font-size: 11px; }

  /* Stat rows : label + valeur empilés */
  .sr { flex-direction: column !important; gap: 2px; padding: .6rem 0; align-items: flex-start !important; }
  .sl { font-size: 12px; color: #444; white-space: normal; }
  .sv { font-size: 15px; text-align: left !important; }

  /* Traits */
  .tr { font-size: 13px; padding: 6px 12px; }

  /* Quote */
  .qt { font-size: 13px; }

  /* Meters */
  .mlbl { font-size: 14px; }
  .mbar { height: 5px; }
  .mtr  { margin-bottom: .8rem; }

  /* Relation cards : 2 col (avatar + contenu), badge dessous */
  .rc {
    grid-template-columns: 48px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px 14px !important;
    padding: 1rem !important;
  }
  .rc .rav { grid-column: 1; grid-row: 1 / 3; }
  .rc > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  .rc .rs {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start;
    margin-top: 6px;
    font-size: 12px !important;
    padding: 5px 11px !important;
    white-space: normal;
  }
  .rav { width: 48px !important; height: 48px !important; font-size: 14px !important; }
  .rn  { font-size: 15px; }
  .rr  { font-size: 13px; }
  .rd  { font-size: 13px; color: #555; }

  /* Timeline */
  .tlt { font-size: 15px; }
  .tld { font-size: 14px; }

  /* Boxes */
  .warn, .info-box, .ambre { font-size: 14px; padding: 1rem; }

  /* Voir plus actif */
  .toggle-btn { display: inline-block; }
}


/* ══════════════════════════════════
   PATCH VIEWPORT — à coller dans ton <head> si pas déjà présent :
   <meta name="viewport" content="width=device-width, initial-scale=1">
══════════════════════════════════ */