/* ============================================================
   23-PAGE-LAYOUT — Layout standard sidebar + panel
   Utilisé par : histoire, cours, compte, sorcier, messages
   Sauf : combat (layout dédié), equipement (layout dédié)
   ============================================================ */

/* Container principal — mobile-first : column layout */
.hw{display:flex;flex-direction:column;gap:.4rem;max-width:100%;margin:0 auto;height:auto;overflow:visible;padding:.15rem;}

/* Bouton burger — visible uniquement sur mobile */
.hnav-burger{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .8rem;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 20%, #1e1a35);
  background:linear-gradient(135deg, var(--mc-dark, #14122a), var(--mc-dark2, #0e0c22));
  color:var(--mc-light, #c9a84c);
  font-family:'Cinzel',serif;font-size:.72rem;font-weight:700;cursor:pointer;
  transition:all .2s;width:100%;justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.hnav-burger i{font-size:.9rem;}
.hnav-burger:hover{border-color:color-mix(in srgb, var(--mc, #c9a84c) 35%, #1e1a35);box-shadow:0 3px 12px rgba(0,0,0,.3);}
.hnav-burger .hnav-burger-arrow{font-size:.55rem;transition:transform .3s;}
.hnav-burger.open{border-radius:8px 8px 0 0;border-color:color-mix(in srgb, var(--mc, #c9a84c) 30%, #1e1a35);}
.hnav-burger.open .hnav-burger-arrow{transform:rotate(180deg);}

/* Sidebar navigation — fond teinté maison */
/* Sur mobile : masquée par défaut, toggle via checkbox hack (CSS-only, pas de JS) */
.hnav{display:none;flex-direction:column;gap:.2rem;width:auto;min-width:0;max-width:none;padding:.4rem;overflow-x:hidden;overflow-y:auto;max-height:60vh;scrollbar-width:thin;scrollbar-color:var(--mc-dark, #1e1a35) transparent;background:var(--mc-dark2, #0e0c22);border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 20%, #1e1a35);border-top:none;border-radius:0 0 8px 8px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.2);animation:hnavSlideDown .25s ease;}
.hnav::-webkit-scrollbar{width:4px;}
.hnav::-webkit-scrollbar-thumb{background:rgba(160,80,220,.2);border-radius:2px;}
/* Checkbox hack : quand le checkbox caché est checked, afficher le menu */
.hnav-check{display:none;}
.hnav-check:checked ~ .hnav{display:flex;}
.hnav-check:checked ~ .hnav-burger .hnav-burger-arrow{transform:rotate(180deg);}
.hnav-check:checked ~ .hnav-burger{border-radius:8px 8px 0 0;border-color:color-mix(in srgb, var(--mc, #c9a84c) 30%, #1e1a35);}
/* Compat legacy JS toggle */
.hnav.hnav-open{display:flex;}

@keyframes hnavSlideDown{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

.hnav-l{display:none;}

/* Tab buttons — couleur maison */
.ht{display:flex;align-items:center;gap:.2rem;padding:.2rem .3rem;border-radius:5px;background:transparent;border:1px solid transparent;color:#8a7a60;font-size:.52rem;font-family:'Cinzel',serif;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.ht i{font-size:.6rem;}
.ht:hover{background:color-mix(in srgb, var(--mc, #c9a84c) 8%, transparent);color:var(--mc-light, #c9a84c);transform:translateX(2px);}
.ht.active{background:color-mix(in srgb, var(--mc, #c9a84c) 12%, transparent);color:var(--mc-light, #c9a84c);border-color:color-mix(in srgb, var(--mc, #c9a84c) 18%, transparent);box-shadow:inset 0 -3px 0 #c9a84c;}

/* Panel principal — fond teinté maison */
.hp{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--mc-dark, #1e1a35) transparent;padding:.25rem;position:relative;background:var(--mc-dark2, #0e0c22);border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 8%, #1e1a35);border-radius:6px;}
.hp > *{max-width:100%;box-sizing:border-box;}

/* Titres de section — couleur maison */
.hpt{font-family:'Cinzel',serif;font-size:.65rem;font-weight:700;color:var(--mc-light, #c9a84c);padding:.3rem .4rem;border-bottom:2px solid color-mix(in srgb, var(--mc, #c9a84c) 15%, transparent);margin-bottom:.6rem;display:flex;align-items:center;gap:.35rem;text-shadow:0 0 20px color-mix(in srgb, var(--mc, #c9a84c) 20%, transparent);flex-wrap:wrap;}
.hpt i{font-size:.85rem;}

/* Cards — fond teinté maison */
.hcard{background:linear-gradient(135deg,var(--mc-dark, #14122a),var(--mc-dark2, #16142e));border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);border-radius:6px;padding:.35rem .4rem;margin-bottom:.5rem;transition:border-color .2s;}
.hcard:hover{border-color:color-mix(in srgb, var(--mc, #c9a84c) 18%, transparent);}

/* Stats row */
.h-stats{display:flex;gap:.25rem;margin-bottom:.7rem;flex-wrap:wrap;}
.h-stat{background:linear-gradient(135deg,var(--mc-dark, #14122a),var(--mc-dark2, #18162e));border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);border-radius:6px;padding:.3rem;text-align:center;flex:1;min-width:45px;transition:border-color .2s;}
.h-stat:hover{border-color:color-mix(in srgb, var(--mc, #c9a84c) 25%, transparent);}
.h-stat-n{font-family:'Cinzel',serif;font-size:.75rem;font-weight:700;color:var(--mc-light, #d4a828);text-shadow:0 0 12px color-mix(in srgb, var(--mc, #c9a84c) 20%, transparent);}
.h-stat-l{font-size:.45rem;color:#8a7a60;text-transform:uppercase;letter-spacing:.3px;margin-top:.1rem;}

/* Book/item cards */
.hbook{background:linear-gradient(135deg,var(--mc-dark, #14122a),var(--mc-dark2, #16142e));border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);border-radius:8px;padding:.4rem .5rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem;transition:all .25s;}
.hbook:hover{border-color:color-mix(in srgb, var(--mc, #c9a84c) 30%, transparent);transform:translateX(2px);box-shadow:0 4px 15px rgba(0,0,0,.3);}
.hbook.locked{opacity:.35;pointer-events:none;}
.hbook-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);}
.hbook-bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin:.25rem 0;}
.hbook-bar-fill{height:100%;border-radius:3px;transition:width .8s ease;}

/* Quick action links */
.hqa{background:linear-gradient(135deg,var(--mc-dark, #14122a),var(--mc-dark2, #16142e));border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);border-radius:8px;padding:.35rem .5rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem;text-decoration:none;transition:all .25s;color:#c8b89c;font-size:.7rem;}
.hqa:hover{border-color:color-mix(in srgb, var(--mc, #c9a84c) 25%, transparent);color:var(--mc-light, #c9a84c);transform:translateX(3px);box-shadow:0 3px 12px rgba(0,0,0,.2);}
.hqa-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);}

/* Empty state */
.h-empty{text-align:center;padding:1.5rem 1rem;color:#4a3d20;font-size:.75rem;background:linear-gradient(135deg,var(--mc-dark, #14122a),var(--mc-dark2, #16142e));border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);border-radius:10px;}
.h-empty i{font-size:2rem;color:color-mix(in srgb, var(--mc, #c9a84c) 25%, transparent);display:block;margin-bottom:.6rem;}

/* Form fields */
.p-field{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.6rem;}
.p-field label{font-family:'Cinzel',serif;font-size:.58rem;color:#8a7a60;text-transform:uppercase;letter-spacing:.3px;}
.p-field input,.p-field textarea,.p-field select{background:var(--mc-dark, #14122a);border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 6%, #1e1a35);color:#e8d4a0;padding:.4rem .5rem;border-radius:6px;font-size:.75rem;font-family:'Nunito',sans-serif;outline:none;transition:border-color .2s;}
.p-field input:focus,.p-field textarea:focus,.p-field select:focus{border-color:color-mix(in srgb, var(--mc, #c9a84c) 50%, transparent);}
.p-field textarea{resize:vertical;min-height:60px;}

/* Buttons */
.p-btn{padding:.35rem .8rem;border-radius:6px;font-family:'Cinzel',serif;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .2s;border:none;}
.p-btn-gold{background:linear-gradient(135deg,#a07818,#d4a828);color:#0a0818;}
.p-btn-gold:hover{box-shadow:0 4px 12px rgba(212,168,40,.3);}
.p-btn-red{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.3) !important;color:#ff6b6b;}
.p-btn-red:hover{background:rgba(231,76,60,.2);}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first
   ══════════════════════════════════════════════════════════ */

/* Small mobile (>= 401px) */
@media(min-width:401px){
    .ht{font-size:.58rem;padding:.25rem .35rem;gap:.2rem;}
    .ht i{font-size:.6rem;}
    .hp{padding:.3rem;border-radius:6px;}
    .hpt{font-size:.72rem;padding:.3rem .4rem;}
    .hcard{padding:.4rem .5rem;border-radius:6px;}
    .h-stats{gap:.25rem;}
    .h-stat{padding:.3rem;min-width:45px;}
    .h-stat-n{font-size:.82rem;}
    .h-stat-l{font-size:.45rem;}
    .hbook{padding:.4rem .5rem;gap:.4rem;}
    .hbook-icon{width:32px;height:32px;font-size:.9rem;}
    .hqa{padding:.35rem .5rem;gap:.35rem;font-size:.7rem;}
    .hqa-icon{width:28px;height:28px;font-size:.85rem;}
}

/* Mobile (>= 577px) */
@media(min-width:577px){
    .hw{padding:.2rem;}
    .hnav{gap:.2rem;padding:.25rem;border-radius:6px;}
    .ht{font-size:.65rem;padding:.3rem .45rem;gap:.25rem;}
    .ht i{font-size:.7rem;}
    .hp{padding:.4rem;}
    .hpt{font-size:.78rem;padding:.35rem .5rem;gap:.35rem;}
    .hpt i{font-size:.85rem;}
    .hcard{padding:.5rem .6rem;border-radius:8px;}
    .h-stats{gap:.3rem;}
    .h-stat{padding:.35rem .4rem;min-width:50px;border-radius:6px;}
    .h-stat-n{font-size:.9rem;}
    .h-stat-l{font-size:.48rem;}
    .hbook{padding:.5rem .6rem;gap:.5rem;border-radius:8px;}
    .hbook-icon{width:36px;height:36px;font-size:1rem;border-radius:8px;}
    .hqa{padding:.45rem .6rem;gap:.45rem;font-size:.75rem;border-radius:8px;}
    .hqa-icon{width:32px;height:32px;font-size:.95rem;border-radius:8px;}
    .h-empty{padding:1.5rem 1rem;font-size:.75rem;}
    .h-empty i{font-size:2rem;}
    .p-field label{font-size:.58rem;}
    .p-field input,.p-field textarea,.p-field select{font-size:.75rem;padding:.4rem .5rem;}
    .p-btn{font-size:.65rem;padding:.35rem .8rem;}
}

/* Tablet (>= 768px) */
@media(min-width:768px){
    .hw{gap:.4rem;padding:.2rem;}
    .hnav{gap:.25rem;padding:.35rem;border-radius:8px;}
    .ht{font-size:.7rem;padding:.35rem .55rem;white-space:nowrap;flex-shrink:0;}
    .ht.active{box-shadow:inset 0 -3px 0 #c9a84c;}
    .hp{border-radius:8px;padding:.5rem;}
    .hpt{font-size:.82rem;}
    .h-stat{min-width:55px;padding:.4rem .5rem;}
    .h-stat-n{font-size:1rem;}
}

/* Desktop (>= 992px) — sidebar passe en colonne */
@media(min-width:992px){
    .hnav-burger{display:none !important;}
    .hw{flex-direction:row;gap:1rem;max-width:80rem;height:calc(100vh - 7.5rem);height:calc(100dvh - 7.5rem);overflow:hidden;padding:.3rem .5rem;}
    .hnav{display:flex !important;flex-direction:column;gap:.3rem;width:clamp(10rem, 15vw, 14rem);min-width:10rem;max-width:14rem;padding:.5rem;overflow-y:auto;overflow-x:visible;border-radius:10px;border:1px solid color-mix(in srgb, var(--mc, #c9a84c) 8%, #1e1a35);-webkit-overflow-scrolling:auto;scrollbar-width:thin;scrollbar-color:var(--mc-dark, #1e1a35) transparent;}
    .hnav-l{display:block;font-family:'Cinzel',serif;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb, var(--mc, #c9a84c), #4a3d20 50%);padding:.5rem .4rem .15rem;border-bottom:1px solid color-mix(in srgb, var(--mc, #c9a84c) 10%, transparent);}
    .ht{font-size:.78rem;padding:.45rem .6rem;gap:.4rem;}
    .ht.active{box-shadow:inset 3px 0 0 var(--mc, #c9a84c);}
    .hp{padding:.6rem;border-radius:10px;}
    .hpt{font-size:.88rem;padding:.5rem .7rem;gap:.5rem;}
    .hpt i{font-size:1rem;}
    .hcard{border-radius:10px;padding:.7rem .9rem;}
    .h-stats{gap:.5rem;}
    .h-stat{border-radius:8px;padding:.5rem .7rem;min-width:60px;}
    .h-stat-n{font-size:1.15rem;}
    .h-stat-l{font-size:.58rem;}
    .hbook{border-radius:10px;padding:.7rem .8rem;gap:.7rem;}
    .hbook-icon{width:46px;height:46px;font-size:1.2rem;border-radius:10px;}
    .hqa{padding:.6rem .8rem;gap:.6rem;font-size:.82rem;border-radius:10px;}
    .hqa-icon{width:38px;height:38px;font-size:1.1rem;border-radius:10px;}
    .h-empty{padding:2.5rem 1.5rem;font-size:.82rem;}
    .h-empty i{font-size:2.5rem;}
    .p-field label{font-size:.65rem;}
    .p-field input,.p-field textarea,.p-field select{font-size:.8rem;padding:.45rem .6rem;}
    .p-btn{font-size:.7rem;padding:.4rem 1rem;}
}

/* Ultra-wide / 2K+ (>= 2560px) */
@media(min-width:2560px){
    .hw{max-width:110rem;gap:1.5rem;padding:.5rem 1rem;}
    .hnav{width:clamp(14rem, 12vw, 18rem);min-width:14rem;max-width:18rem;padding:.7rem;gap:.4rem;}
    .hnav-l{font-size:.7rem;}
    .ht{font-size:.9rem;padding:.55rem .75rem;}
    .hp{padding:.8rem;}
    .hpt{font-size:1rem;padding:.6rem .8rem;}
    .hcard{padding:.9rem 1.1rem;}
    .h-stat{min-width:75px;padding:.6rem .8rem;}
    .h-stat-n{font-size:1.3rem;}
    .p-field label{font-size:.75rem;}
    .p-field input,.p-field textarea,.p-field select{font-size:.9rem;padding:.55rem .7rem;}
}

/* 4K+ (>= 3840px) */
@media(min-width:3840px){
    .hw{max-width:160rem;gap:2rem;}
    .hnav{width:clamp(16rem, 10vw, 22rem);min-width:16rem;max-width:22rem;padding:1rem;}
    .ht{font-size:1rem;padding:.65rem .9rem;}
    .hp{padding:1rem;}
    .hpt{font-size:1.15rem;}
}

/* Ultra-wide 21:9 — contenu centré, pas étiré */
@media(min-aspect-ratio:2/1) and (min-width:992px){
    .hw{max-width:70rem;margin:0 auto;}
}
/* Super ultra-wide 32:9 — encore plus resserré */
@media(min-aspect-ratio:3/1) and (min-width:992px){
    .hw{max-width:60rem;margin:0 auto;}
}