/* Compagnon D&D 5e — version 11.1 */
/* ============ THÈME TABLEAU DE PERSONNAGE — INSPIRATION INTERFACE D&D ============ */
  @media screen {
    :root {
      --parchment: #f3f4f5;
      --parchment-dark: #e7e9eb;
      --ink: #171a1d;
      --ink-soft: #66717b;
      --blood: #cc3035;
      --blood-dark: #991f24;
      --gold: #858f97;
      --border-aged: #d4d9dd;
      --card: #ffffff;
    }

    html {
      scrollbar-color: #9ca4aa #eceeef;
      scrollbar-gutter: stable;
    }

    body {
      font-family: "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.45;
      overflow-x: hidden;
    }

    button, input, select, textarea { font: inherit; }

    .app {
      max-width: 1540px;
      padding: 0 28px 80px;
    }

    header.main-header {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      padding: 18px max(28px, calc((100vw - 1484px) / 2)) 14px;
      text-align: left;
      color: #fff;
      background: #22282c;
      border: 0;
      border-bottom: 4px solid #3b444a;
      box-shadow: 0 8px 24px rgba(15, 18, 20, .28);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .brand-mark {
      display: block;
      width: 92px;
      height: 70px;
      flex: 0 0 92px;
      object-fit: contain;
      object-position: center;
    }

    .brand-title-art {
      display: block;
      width: clamp(260px, 34vw, 457px);
      aspect-ratio: 457 / 65;
      flex: 0 1 457px;
      background: #ee454a;
      -webkit-mask: url("../assets/branding/titre-compagnon.png") center / contain no-repeat;
      mask: url("../assets/branding/titre-compagnon.png") center / contain no-repeat;
    }

    .menu-return {
      position: static;
      flex: 0 0 auto;
      display: none;
      padding: 9px 14px;
      border: 1px solid #596269;
      border-radius: 4px;
      background: #30383d;
      color: #fff;
      box-shadow: none;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .menu-return:hover {
      border-color: var(--blood);
      background: var(--blood);
      color: #fff;
    }

    .stepper {
      position: sticky;
      z-index: 35;
      top: 0;
      width: 100vw;
      margin: 0 calc(50% - 50vw) 26px;
      padding: 0 max(24px, calc((100vw - 1484px) / 2));
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 0;
      overflow-x: auto;
      background: rgba(35, 40, 44, .97);
      border-bottom: 3px solid var(--blood);
      box-shadow: 0 5px 15px rgba(20, 23, 25, .18);
      scrollbar-width: thin;
    }

    .step-pill {
      position: relative;
      flex: 0 0 auto;
      padding: 13px 16px 11px;
      border: 0;
      border-right: 1px solid #41484d;
      border-radius: 0;
      background: transparent;
      color: #b9c1c6;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    .step-pill:hover {
      background: #30373c;
      color: #fff;
    }

    .step-pill.active {
      border-color: #41484d;
      background: var(--blood);
      color: #fff;
    }

    .step-pill.done { color: #fff; }
    .step-pill.done::after {
      content: "";
      position: absolute;
      right: 8px;
      bottom: 5px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #ef4a4f;
    }
    .step-pill.active::after { background: #fff; }
    .step-pill.locked { color: #717a80; opacity: .7; }

    .panel {
      padding: clamp(20px, 2.4vw, 34px);
      border: 1px solid #cfd4d8;
      border-top: 4px solid var(--blood);
      border-radius: 8px 8px 14px 14px;
      background: rgba(255, 255, 255, .97);
      box-shadow: 0 16px 44px rgba(24, 28, 31, .16);
      backdrop-filter: blur(2px);
    }

    h2.panel-title {
      position: relative;
      padding: 0 0 13px 17px;
      margin: 0 0 8px;
      border-bottom: 1px solid #d9dde0;
      color: #23282c;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: clamp(21px, 2vw, 28px);
      font-weight: 850;
      letter-spacing: .015em;
      line-height: 1.12;
      text-transform: uppercase;
    }

    h2.panel-title::before {
      content: "";
      position: absolute;
      top: 1px;
      bottom: 13px;
      left: 0;
      width: 5px;
      border-radius: 2px;
      background: var(--blood);
    }

    .panel-sub {
      margin: 0 0 22px 17px;
      color: var(--ink-soft);
      font-size: 14px;
      font-style: normal;
    }

    .cards-grid {
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 14px;
    }

    .choice-card {
      position: relative;
      min-height: 112px;
      padding: 16px 17px 15px;
      border: 1px solid #d1d6da;
      border-left: 4px solid #d1d6da;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(29, 35, 39, .06);
    }

    .choice-card:hover {
      border-color: #aeb5ba;
      border-left-color: var(--blood);
      box-shadow: 0 7px 18px rgba(29, 35, 39, .12);
      transform: translateY(-2px);
    }

    .choice-card.selected {
      border-color: var(--blood);
      border-left-color: var(--blood);
      background: #fff7f7;
      box-shadow: 0 0 0 1px var(--blood), 0 8px 20px rgba(153, 31, 36, .13);
    }

    .choice-card.selected::after {
      content: "✓";
      position: absolute;
      top: 10px;
      right: 11px;
      display: grid;
      place-items: center;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: var(--blood);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
    }

    .choice-card h3 {
      padding-right: 24px;
      color: #22272b;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .choice-card .tag {
      color: #7b858d;
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .choice-card p { color: #68737b; font-size: 13px; }
    .choice-card .mini { color: var(--blood); font-size: 12px; font-weight: 700; }
    .cards-grid.race-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
    .choice-card.race-choice-card { padding:0; overflow:hidden; }
    .class-choice-card { min-height:126px; }
    .class-choice-card .class-choice-icon {
      border-color: #cfd4d8;
      border-radius: 4px;
      box-shadow: 0 4px 11px rgba(26,31,34,.18);
    }
    .class-choice-card:hover .class-choice-icon,
    .class-choice-card.selected .class-choice-icon { border-color: var(--blood); }

    .detail-box {
      padding: 18px 20px;
      border: 1px solid #d5dade;
      border-left: 5px solid var(--blood);
      border-radius: 4px;
      background: #f8f9fa;
    }

    .detail-box h3 {
      color: #24292d;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 18px;
      font-weight: 850;
      text-transform: uppercase;
    }

    label.field-label {
      color: #5f6b73;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    select,
    input[type="text"],
    input[type="number"],
    textarea {
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid #c9d0d5;
      border-radius: 4px;
      background: #fff;
      color: #202428;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 14px;
      box-shadow: inset 0 1px 2px rgba(25, 30, 33, .04);
    }

    select:focus,
    input:focus,
    textarea:focus {
      border-color: var(--blood);
      outline: 2px solid rgba(204, 48, 53, .14);
      outline-offset: 0;
    }

    .details-section {
      border: 1px solid #d0d5d9;
      border-radius: 5px;
      background: #fff;
    }

    .details-section summary {
      color: #2a2f33;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 14px;
      font-weight: 850;
      letter-spacing: .025em;
      text-transform: uppercase;
    }

    .details-section summary::after { color: var(--blood); }

    .btn,
    .btn-primary,
    .btn-roll {
      min-height: 40px;
      padding: 10px 20px;
      border: 1px solid var(--blood-dark);
      border-radius: 4px;
      background: var(--blood);
      color: #fff;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: 0 2px 5px rgba(120, 20, 24, .18);
    }

    .btn:hover,
    .btn-primary:hover,
    .btn-roll:hover { background: var(--blood-dark); }

    .btn.secondary,
    .btn-ghost {
      border: 1px solid #aeb6bc;
      background: #fff;
      color: #343b40;
      box-shadow: none;
    }

    .btn.secondary:hover,
    .btn-ghost:hover {
      border-color: var(--blood);
      background: #fff5f5;
      color: var(--blood);
    }

    .abilities-grid {
      grid-template-columns: repeat(6, minmax(110px, 1fr));
      gap: 13px;
    }

    .ability-slot {
      position: relative;
      padding: 13px 10px 11px;
      border: 2px solid var(--blood);
      border-radius: 11px;
      background: #fff;
      box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(204, 48, 53, .25);
    }

    .ability-slot .ab-name {
      color: #657079;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .ability-slot .ab-final {
      color: #121517;
      font-size: 30px;
      font-weight: 750;
      line-height: 1.05;
    }

    .ability-slot .ab-mod {
      display: inline-block;
      min-width: 44px;
      margin-top: 5px;
      padding: 2px 8px;
      border: 1px solid #b8c0c6;
      border-radius: 12px;
      background: #f7f8f9;
      color: #202529;
    }

    .ability-slot .ab-race { color: #7c858c; }

    .dice-tray,
    .smart-toggle {
      border: 1px solid #cfd5d9;
      border-left: 4px solid var(--blood);
      border-radius: 4px;
      background: #f3f5f6;
    }

    .die-result {
      border-color: var(--blood);
      border-radius: 6px;
      background: #fff;
      color: #1f2428;
    }

    .pill-toggle button {
      border: 1px solid #c9d0d5;
      border-radius: 4px;
      background: #fff;
      color: #58636b;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: 13px;
      font-weight: 700;
    }

    .pill-toggle button.on {
      border-color: var(--blood);
      background: var(--blood);
      color: #fff;
    }

    .check-item,
    .radio-opt {
      border: 1px solid #d0d5d9;
      border-radius: 4px;
      background: #fff;
    }

    .check-item.checked,
    .radio-opt.checked {
      border-color: var(--blood);
      background: #fff4f4;
      box-shadow: inset 3px 0 0 var(--blood);
    }

    .check-item input,
    .radio-opt input { accent-color: var(--blood); }

    .warn,
    .ok {
      padding: 9px 12px;
      border-radius: 4px;
      font-size: 13px;
      font-style: normal;
      font-weight: 650;
    }

    .warn { background: #fff0f0; color: #a92328; }
    .ok { background: #edf8f0; color: #28733c; }

    /* Fiche de personnage */
    .of-tabs {
      gap: 28px;
      margin: 22px 0 16px;
      border-bottom: 1px solid #cfd4d8;
    }

    .of-tab {
      margin: 0 0 -1px;
      padding: 10px 1px 9px;
      border: 0;
      border-bottom: 4px solid transparent;
      border-radius: 0;
      background: transparent;
      color: #68737b;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    .of-tab:hover { color: #1f2428; }
    .of-tab.active {
      border: 0;
      border-bottom: 4px solid var(--blood);
      background: transparent;
      color: #202529;
    }

    .sheet { font-family: "Segoe UI", Arial, sans-serif; }

    .of-head {
      grid-template-columns: minmax(260px, .9fr) 2.1fr;
      gap: 18px;
      padding: 16px;
      margin-bottom: 18px;
      border-radius: 5px;
      background: #262626;
      box-shadow: 0 7px 18px rgba(19, 22, 24, .2);
    }

    .of-name-box {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .of-name-box .of-crest {
      width: 72px;
      height: 72px;
      border: 3px solid var(--blood);
      border-radius: 4px;
      background: #111;
      color: #fff;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 27px;
    }

    .of-name-box .of-nm {
      color: #fff;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 25px;
      font-weight: 800;
    }

    .of-name-box .of-lbl,
    .of-meta .of-lbl { color: #aeb6bc; }

    .of-meta {
      overflow: hidden;
      border: 1px solid #4b5054;
      border-radius: 4px;
      background: #2d2f30;
    }

    .of-meta div {
      border-right-color: #4b5054;
      border-bottom-color: #4b5054;
    }

    .of-meta .of-val { color: #fff; }
    .of-meta .of-inp {
      border-bottom-color: #697177;
      color: #fff;
    }
    .of-meta .of-inp::placeholder { color: #929ba1; }

    .of-grid {
      grid-template-columns: minmax(250px, .82fr) minmax(290px, 1fr) minmax(380px, 1.45fr);
      gap: 16px;
    }

    .of-col { gap: 13px; }
    .of-abils {
      display: grid;
      grid-template-columns: repeat(2, minmax(105px, 1fr));
      gap: 9px;
    }

    .of-ab {
      padding: 9px 6px 7px;
      border: 2px solid var(--blood);
      border-radius: 10px;
      background: #fff;
      box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(204, 48, 53, .24);
    }

    .of-ab .nm {
      color: #667179;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 10px;
      font-weight: 850;
    }
    .of-ab .md { color: #15191c; font-size: 27px; }
    .of-ab .sc {
      min-width: 48px;
      border: 1px solid #aeb7bd;
      border-radius: 14px;
      background: #f6f7f8;
      color: #1f2428;
    }
    .of-ab .src { color: #727d85; }

    .of-box,
    .of-text,
    .of-shield,
    .of-hp {
      border: 1px solid #cfd5d9;
      border-top: 3px solid var(--blood);
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 2px 7px rgba(31, 37, 41, .07);
    }

    .of-box,
    .of-text {
      display: flex;
      flex-direction: column;
      padding: 11px 13px;
    }

    .of-box > h5,
    .of-text > h5 {
      order: -1;
      margin: -2px 0 8px;
      padding: 0 0 7px;
      border-top: 0 !important;
      border-bottom: 1px solid #dce0e3;
      color: #272c30;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .07em;
      text-align: left;
      text-transform: uppercase;
    }

    .of-line {
      min-height: 28px;
      padding: 4px 2px;
      border-bottom: 1px solid #edf0f2;
      font-size: 12px;
    }
    .of-line:last-of-type { border-bottom: 0; }
    .of-dot { border-color: #aeb6bc; }
    .of-dot.on { border-color: var(--blood); background: var(--blood); }
    .of-sk .ab { color: #7b858d; }

    .of-combat { gap: 9px; }
    .of-shield {
      padding: 10px 5px 8px;
      text-align: center;
    }
    .of-shield .v { color: #171b1e; font-size: 25px; }
    .of-shield .l {
      color: #667179;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 9px;
      font-weight: 850;
    }

    .of-hp {
      padding: 12px 14px;
      text-align: left;
    }
    .of-hp .cap {
      color: #667179;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-weight: 850;
    }
    .of-hp .big {
      display: inline-block;
      margin-right: 10px;
      color: #171b1e;
      font-size: 36px;
    }

    .of-tbl th {
      color: #606b73;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-size: 9px;
      font-weight: 850;
      border-bottom-color: var(--blood);
    }
    .of-tbl td { border-bottom-color: #e3e6e8; }
    .of-tbl .tr { color: #737e86; }

    .of-sub {
      padding: 7px 0;
      border-bottom-color: #e4e7e9;
      font-size: 12px;
    }
    .of-sub b {
      color: var(--blood);
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-weight: 850;
    }

    .of-pick { color: var(--blood); }
    .of-slot { border-color: #c3c9ce; background: #f5f6f7; }

    .sheet-block {
      padding: 16px 18px;
      border: 1px solid #cfd5d9;
      border-top: 4px solid var(--blood);
      border-radius: 5px;
      background: #fff;
    }

    .sheet-block h4 {
      color: #262b2f;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-weight: 850;
      border-bottom-color: #d8dde0;
    }

    .print-btn-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 20px;
      border-top: 1px solid #d8dde0;
    }

    /* Mode session */
    .session-head {
      padding: 14px 16px;
      border-radius: 5px;
      background: #252a2e;
      color: #fff;
    }
    .session-grid { gap: 16px; }
    .sess-card {
      padding: 15px;
      border: 1px solid #d0d5d9;
      border-top: 4px solid var(--blood);
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(26, 31, 34, .08);
    }
    .sess-h {
      color: #262b2f;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-weight: 850;
      text-transform: uppercase;
    }
    .abil-box,
    .mini-roll,
    .skill-roll,
    .hp-input,
    .purse-row input,
    .loot-row input,
    .notes-area {
      border-color: #ccd2d6;
      border-radius: 4px;
      background: #f7f8f9;
    }
    .abil-box:hover,
    .mini-roll:hover,
    .skill-roll:hover { border-color: var(--blood); }
    .abil-mod,
    .sk-mod,
    .atk-traits { color: var(--blood); }
    .skill-roll.prof {
      border-color: var(--blood);
      background: #fff5f5;
    }

    .dice-drawer .drawer-tab {
      border-color: var(--blood-dark);
      border-radius: 0 0 5px 5px;
      background: var(--blood);
      color: #fff;
      font-family: "Arial Narrow", "Segoe UI", sans-serif;
      font-weight: 850;
      text-transform: uppercase;
    }
    .dice-drawer .drawer-body {
      border-color: var(--blood);
      border-radius: 0 0 6px 6px;
      background: #fff;
    }
    .qd {
      border-color: #ccd2d6;
      border-radius: 4px;
      background: #f4f6f7;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .qd:hover { border-color: var(--blood); color: var(--blood); }

    @media (max-width: 1180px) {
      .app { padding-inline: 20px; }
      .abilities-grid { grid-template-columns: repeat(3, 1fr); }
      .of-grid { grid-template-columns: 1fr 1fr; }
      .of-grid > .of-col:nth-child(3) { grid-column: 1 / -1; }
    }

    @media (max-width: 760px) {
      .app { padding-inline: 12px; }
      header.main-header { padding: 14px 16px 12px; }
      .brand-lockup { gap:10px; }
      .brand-mark { width: 68px; height: 52px; flex-basis: 68px; }
      .brand-title-art {
        width:min(68vw,320px);
        flex-basis:min(68vw,320px);
      }
      .menu-return {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: auto;
        margin: 0;
        z-index: 80;
        background: var(--blood);
      }
      .stepper { margin-bottom: 14px; padding-inline: 0; }
      .step-pill { padding: 11px 12px 9px; font-size: 10px; }
      .panel { padding: 18px 14px; }
      .panel-sub { margin-left: 0; }
      .two-col { grid-template-columns: 1fr; }
      .abilities-grid { grid-template-columns: repeat(2, 1fr); }
      .cards-grid.race-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        padding: 2px 2px 10px;
        padding-inline: calc((100% - min(78vw, 280px)) / 2);
        scrollbar-width: thin;
      }
      .cards-grid.race-grid > .choice-card {
        flex: 0 0 min(78vw, 280px);
      }
      .of-head { grid-template-columns: 1fr; }
      .of-meta { grid-template-columns: 1fr 1fr; }
      .of-meta div:nth-child(3n) { border-right: 1px solid #4b5054; }
      .of-meta div:nth-child(2n) { border-right: 0; }
      .of-grid { grid-template-columns: 1fr !important; }
      .of-grid > .of-col:nth-child(3) { grid-column: auto; }
      .of-abils { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 480px) {
      .cards-grid { grid-template-columns: 1fr; }
      .class-choice-icon { width:56px; height:56px; flex-basis:56px; }
      .race-tab-intro, .race-image-editor { align-items:flex-start; flex-direction:column; }
      .race-image-progress { align-self:flex-start; }
      .race-image-editor-actions { justify-content:flex-start; }
      .race-detail-selection {
        grid-template-columns:1fr;
        padding:40px 34px 44px;
      }
      .race-detail-selection::before {
        border-width:30px 28px;
      }
      .race-detail-portrait { order:1; max-width:270px; }
      .race-detail-copy { order:2; }
      .abilities-grid { grid-template-columns: 1fr 1fr; }
      .of-abils { grid-template-columns: 1fr 1fr; }
      .of-combat { grid-template-columns: 1fr; }
      .btn-row { align-items: stretch; flex-direction: column-reverse; }
      .btn-row .btn { width: 100%; }
    }
  }