/* =========================================================
   DndSheet — thème « grimoire »
   Mobile-first. Deux contextes :
   - body.home  : menu d'accueil (index.html)
   - body.sheet : pages de la fiche (global, combat, spells, inventory, character)
========================================================= */

:root{
  --paper:#f4e9d3;
  --paper-deep:#e4d0a9;
  --panel:rgba(255, 250, 240, .82);
  --panel-soft:rgba(255, 248, 236, .55);
  --ink:#2b1c10;
  --muted:#7a6248;
  --line:rgba(74, 47, 26, .18);
  --line-strong:rgba(74, 47, 26, .32);
  --shadow:0 14px 34px rgba(58, 36, 22, .14);

  --red:#7c1a1a;
  --red-deep:#4f0e0e;
  --red-soft:rgba(124, 26, 26, .1);
  --gold:#c8a25a;
  --gold-soft:#ecd7ab;

  --ok:#2e7a56;
  --ok-deep:#1f5940;
  --warn:#b98226;
  --warn-deep:#8a5e15;
  --bad:#a8281f;
  --bad-deep:#771811;

  --field:#fffaf0;
  --field-deep:#f6ead2;
  --button:#f8ecd3;
  --button-deep:#eedbb2;

  --r-xl:22px;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;

  --display:"Cinzel", "Georgia", serif;
  --sans:system-ui, "Segoe UI", "Trebuchet MS", sans-serif;
  --mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --topH:58px;
  --tabH:62px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

/* Garde-fou : aucun débordement horizontal (clip ne casse pas position:sticky) */
html, body{ overflow-x:clip; }

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  background:
    radial-gradient(circle at 12% -4%, rgba(124, 26, 26, .12), transparent 32%),
    radial-gradient(circle at 88% -6%, rgba(200, 162, 90, .22), transparent 34%),
    repeating-linear-gradient(0deg, rgba(74, 47, 26, .022), rgba(74, 47, 26, .022) 1px, transparent 1px, transparent 5px),
    linear-gradient(180deg, var(--paper), var(--paper-deep));
  min-height:100vh;
}

/* =========================================================
   ACCUEIL (index.html)
========================================================= */
body.home{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.home .menu{
  width:min(100%, 460px);
  display:grid;
  gap:14px;
  text-align:center;
}

.home .menuTitle{
  font-family:var(--display);
  font-weight:900;
  font-size:2rem;
  letter-spacing:.06em;
  margin:0 0 2px;
  color:var(--red-deep);
}

.home .menuSub{
  color:var(--muted);
  margin:0 0 18px;
  font-size:.92rem;
}

.home .menu a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  border-radius:var(--r-lg);
  border:1px solid rgba(236, 215, 171, .4);
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  color:#fff8ec;
  text-decoration:none;
  text-align:left;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 12px 26px rgba(69, 20, 20, .2);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.home .menu a .ico{ font-size:1.3rem; }

.home .menu a .lbl{ display:flex; flex-direction:column; gap:2px; }

.home .menu a .lbl small{
  font-weight:500;
  font-size:.76rem;
  color:rgba(255, 245, 225, .72);
}

.home .menu a:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(69, 20, 20, .28);
  filter:saturate(1.08);
}

.home .menu a.secondary{
  background:linear-gradient(180deg, var(--button), var(--button-deep));
  color:var(--ink);
  border-color:var(--line);
}

.home .menu a.secondary .lbl small{ color:var(--muted); }

/* =========================================================
   BARRE DE NAVIGATION (injectée par js/nav.js)
========================================================= */
.sheet{
  padding-bottom:calc(var(--tabH) + 18px);
}

.topbar{
  position:sticky;
  top:0;
  z-index:80;
  background:linear-gradient(180deg, rgba(124, 26, 26, .97), rgba(79, 14, 14, .99));
  border-bottom:2px solid rgba(200, 162, 90, .55);
  box-shadow:0 10px 28px rgba(57, 21, 21, .28);
}

.topbar .inner{
  width:min(100%, 1240px);
  margin:0 auto;
  min-height:var(--topH);
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar .brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff8ec;
  text-decoration:none;
  min-width:0;
  flex-shrink:0;
}

.topbar .brand img{
  width:30px;
  height:30px;
  border-radius:8px;
}

.topbar .brand .t{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.05em;
  white-space:nowrap;
}

.topbar .links{
  display:none;
  align-items:center;
  gap:2px;
  margin-left:8px;
}

.topbar .links a{
  padding:8px 13px;
  border-radius:999px;
  color:rgba(255, 245, 228, .82);
  text-decoration:none;
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.02em;
  transition:background .15s ease, color .15s ease;
}

.topbar .links a:hover{
  background:rgba(255, 255, 255, .1);
  color:#fff;
}

.topbar .links a.active{
  background:rgba(200, 162, 90, .24);
  color:#ffe9bf;
  box-shadow:inset 0 0 0 1px rgba(200, 162, 90, .5);
}

.topbar .right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.topbar .pill{
  border:1px solid rgba(236, 215, 171, .35);
  background:rgba(255, 255, 255, .08);
  color:#ffeecd;
  font-size:.74rem;
  font-weight:800;
  padding:6px 11px;
  border-radius:999px;
  white-space:nowrap;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar .pill.saved{ color:#c8ecd4; border-color:rgba(120, 200, 150, .4); }

.topbar select{
  width:auto;
  flex-shrink:0;
  min-height:38px;
  padding:6px 10px;
  border-radius:11px;
  border:1px solid rgba(236, 215, 171, .4);
  background:rgba(255, 255, 255, .1);
  color:#fffdf7;
  font:inherit;
  font-weight:700;
  font-size:.84rem;
  outline:none;
  cursor:pointer;
}

.topbar select option{ color:#20140c; }

/* Barre d'onglets mobile (bas d'écran) */
.tabbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  display:flex;
  height:var(--tabH);
  background:linear-gradient(0deg, rgba(79, 14, 14, .99), rgba(105, 21, 21, .97));
  border-top:2px solid rgba(200, 162, 90, .55);
  box-shadow:0 -8px 24px rgba(57, 21, 21, .3);
  padding-bottom:env(safe-area-inset-bottom, 0);
}

.tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:rgba(255, 245, 228, .72);
  text-decoration:none;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.03em;
}

.tabbar a .ico{ font-size:1.25rem; line-height:1; }

.tabbar a.active{
  color:#ffe9bf;
  background:rgba(200, 162, 90, .16);
  box-shadow:inset 0 3px 0 var(--gold);
}

/* =========================================================
   LAYOUT
========================================================= */
.wrap{
  width:min(100%, 1240px);
  margin:0 auto;
  padding:18px 14px 30px;
}

.pageTitle{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin:4px 2px 16px;
}

.pageTitle h1{
  margin:0;
  font-family:var(--display);
  font-weight:900;
  font-size:1.35rem;
  letter-spacing:.05em;
  color:var(--red-deep);
}

.pageTitle .sub{
  color:var(--muted);
  font-size:.84rem;
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:start;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* =========================================================
   CARTES
========================================================= */
.card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(97, 62, 36, .2);
  border-radius:var(--r-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 26%),
    linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow:var(--shadow);
}

.card .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:13px 16px;
  border-bottom:1px solid rgba(97, 62, 36, .16);
  background:linear-gradient(180deg, rgba(200, 162, 90, .18), rgba(255,255,255,.06));
}

.card .head h2{
  margin:0;
  font-family:var(--display);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--red-deep);
}

.card .body{ padding:16px; }

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

/* =========================================================
   FORMULAIRES
========================================================= */
label{ display:block; }

.small{ font-size:.76rem; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); }

label.small{
  margin:0 2px 4px;
  font-weight:700;
  letter-spacing:.03em;
}

input, select, textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--field), var(--field-deep));
  color:var(--ink);
  font:inherit;
  outline:none;
  min-height:42px;
  padding:9px 12px;
  transition:border-color .16s ease, box-shadow .16s ease;
}

textarea{
  min-height:96px;
  padding:11px 13px;
  resize:vertical;
  line-height:1.55;
}

input::placeholder, textarea::placeholder{ color:rgba(42, 29, 20, .42); }

input:focus, select:focus, textarea:focus{
  border-color:rgba(124, 26, 26, .55);
  box-shadow:0 0 0 3px rgba(124, 26, 26, .12);
}

.split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:11px;
}

.twoCols{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.row{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.spacer{ flex:1; }

.hr{
  height:1px;
  margin:14px 0;
  background:linear-gradient(90deg, transparent, rgba(97, 62, 36, .22), transparent);
}

/* =========================================================
   BADGES / PILLS
========================================================= */
.pill, .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(74, 47, 26, .18);
  background:rgba(255, 252, 246, .5);
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}

.badge.on{
  border-color:rgba(124, 26, 26, .4);
  background:linear-gradient(180deg, var(--red), var(--red-deep));
  color:#ffeedd;
}

.badge.hot{
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(124, 26, 26, .96), rgba(167, 46, 38, .92));
  color:#fff7ef;
}

/* =========================================================
   KPI / STATBOX
========================================================= */
.kpi{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:11px;
}

.statbox{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  border-radius:var(--r-lg);
  border:1px solid rgba(97, 62, 36, .16);
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(249, 240, 223, .76));
}

.statbox .label{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.statbox .mini{
  color:var(--muted);
  font-size:.74rem;
  font-family:var(--mono);
}

.statbox input[type="number"]{
  font-size:1.15rem;
  font-weight:900;
  text-align:center;
}

/* Caractéristiques (FOR / DEX / ...) */
.statsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:11px;
}

.statcard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:13px 10px 12px;
  border-radius:var(--r-lg);
  border:1px solid rgba(97, 62, 36, .2);
  background:
    radial-gradient(circle at 50% -30%, rgba(200, 162, 90, .2), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(247, 236, 214, .8));
}

.statcard .ab{
  font-family:var(--display);
  font-weight:900;
  font-size:.82rem;
  letter-spacing:.1em;
  color:var(--red-deep);
}

.statcard .mod{
  font-size:1.65rem;
  font-weight:900;
  line-height:1;
}

.statcard input{
  width:74px;
  min-height:36px;
  padding:5px 8px;
  text-align:center;
  font-weight:800;
}

.statcard .saveToggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}

.statcard .saveToggle input,
.saveToggle input[type="checkbox"]{
  width:16px;
  height:16px;
  min-height:auto;
  padding:0;
  accent-color:var(--red);
  cursor:pointer;
}

/* =========================================================
   PV
========================================================= */
.hpnums{
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.hpnums .big{
  font-size:2.2rem;
  font-weight:900;
  line-height:1;
}

.hpnums .slash{ color:var(--muted); font-size:1.2rem; }

.hpnums .temp{
  color:var(--warn-deep);
  font-weight:900;
  font-size:1rem;
  margin-left:2px;
}

.hpbar{
  height:14px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(97, 62, 36, .2);
  background:rgba(86, 58, 34, .1);
}

.hpbar > div{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #8f1f1b, #c8802f);
  transition:width .25s ease;
}

.hpbar.low > div{ background:linear-gradient(90deg, #7c120e, #a8281f); }

/* =========================================================
   BOUTONS
========================================================= */
.controls{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.btn, .miniBtn{
  appearance:none;
  border:1px solid rgba(74, 47, 26, .2);
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  font-weight:800;
  transition:transform .13s ease, border-color .16s ease, filter .16s ease;
}

.btn{
  min-height:42px;
  padding:9px 14px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--button), var(--button-deep));
  box-shadow:0 6px 14px rgba(52, 32, 20, .1);
}

.controls .btn{
  flex:1;
  min-width:52px;
  padding:9px 8px;
}

.miniBtn{
  min-height:34px;
  padding:6px 11px;
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, #f9f0dd, #efdcb6);
  font-size:.78rem;
}

.btn:hover, .miniBtn:hover{
  border-color:rgba(124, 26, 26, .45);
  filter:saturate(1.05);
}

.btn:active, .miniBtn:active{ transform:translateY(1px); }

.btn.ok{ color:#fff; border-color:rgba(255,255,255,.18); background:linear-gradient(180deg, var(--ok), var(--ok-deep)); }
.btn.warn{ color:#fff; border-color:rgba(255,255,255,.18); background:linear-gradient(180deg, var(--warn), var(--warn-deep)); }
.btn.bad{ color:#fff; border-color:rgba(255,255,255,.18); background:linear-gradient(180deg, var(--bad), var(--bad-deep)); }

.miniBtn.danger:hover{
  border-color:rgba(124, 26, 26, .6);
  background:linear-gradient(180deg, #f6dcd6, #eec2ba);
}

/* =========================================================
   TABLEAUX
========================================================= */
.tableWrap{ overflow-x:auto; }

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(97, 62, 36, .18);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(255,255,255,.46);
}

.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(97, 62, 36, .1);
  text-align:left;
  font-size:.84rem;
  vertical-align:middle;
}

.table th{
  color:var(--muted);
  font-weight:900;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:rgba(243, 228, 199, .6);
}

.table tr:last-child td{ border-bottom:none; }

.table input[type="number"]{
  min-height:36px;
  padding:5px 8px;
}

.tableActions{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* =========================================================
   CAPACITÉS / SORTS
========================================================= */
.ability, .quickItem, details.addForm{
  border:1px solid rgba(97, 62, 36, .18);
  border-radius:var(--r-lg);
  background:rgba(255, 251, 244, .55);
}

.ability{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:13px 14px;
}

.ability.pinned, .quickItem.pinned{
  border-color:rgba(200, 162, 90, .65);
  background:
    radial-gradient(circle at top right, rgba(200, 162, 90, .16), transparent 40%),
    rgba(255, 251, 244, .6);
}

.ability .top, .ability .foot{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.ability .name, .quickItem .nm{ font-weight:900; font-size:.95rem; }

.ability .meta, .quickItem .mt{ color:var(--muted); font-size:.76rem; }

.ability .desc, .quickItem .ds{ font-size:.86rem; line-height:1.5; }

.quickItem{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
}

.quickItem .left{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.quickItem .actions{
  display:flex;
  flex-direction:column;
  gap:7px;
}

details.addForm{ padding:11px 14px; }

details.addForm summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}

details.addForm summary::before{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:7px;
  background:linear-gradient(180deg, var(--ok), var(--ok-deep));
  color:#fff;
  font-size:1rem;
  transition:transform .18s ease;
}

details.addForm[open] summary::before{ transform:rotate(45deg); }

details.addForm summary::-webkit-details-marker{ display:none; }

details.addForm .formBody{ margin-top:12px; }

/* =========================================================
   DIVERS
========================================================= */
.notice{
  margin-top:12px;
  padding:11px 14px;
  border:1px dashed rgba(97, 62, 36, .26);
  border-radius:var(--r-lg);
  background:rgba(255, 250, 240, .55);
  color:var(--muted);
  font-size:.8rem;
  line-height:1.55;
}

.hidden{ display:none !important; }

.gap8{ height:8px; }
.gap12{ height:12px; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 480px){
  /* Écrans étroits : le bandeau garde l'icône, la pilule de statut et Actions */
  .topbar .inner{ padding:8px 10px; gap:8px; }
  .topbar .brand .t{ display:none; }
  .topbar .pill{ max-width:124px; }
  .topbar select{ max-width:124px; }
  .wrap{ padding:14px 10px 26px; }
  .kpi{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px){
  .split{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .statsGrid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .twoCols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpi{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .kpi.kpi3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px){
  /* Navigation : liens en haut, plus de barre d'onglets */
  .sheet{ padding-bottom:24px; }
  .topbar .links{ display:flex; }
  .tabbar{ display:none; }

  .wrap{ padding:24px 18px 40px; }
  .pageTitle h1{ font-size:1.6rem; }
}

@media (min-width: 1080px){
  .grid.two{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); }
  .statsGrid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}

@media print{
  .topbar, .tabbar, .controls, .miniBtn, .notice{ display:none !important; }
  .sheet{ padding-bottom:0; }
  body{ background:#fff; }
  .card{ box-shadow:none; break-inside:avoid; }
}