/* =====================================================
   KEL'ONGLES Studio — Composants applicatifs
   (listes, fiches, formulaires, modale, notifications)
   ===================================================== */
.muted{color:var(--text-muted);font-size:.86rem}
.kpis.two{grid-template-columns:1fr 1fr}

.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.bar .count{font-size:.86rem;color:var(--text-muted);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;font-family:var(--font-sans);font-size:.88rem;font-weight:600;padding:.62rem .95rem;border-radius:11px;border:1px solid var(--line);background:var(--ivory);color:var(--charcoal);transition:.16s;text-decoration:none;cursor:pointer}
.btn .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn:hover{border-color:var(--gold)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--ivory);border:none;box-shadow:var(--shadow-s)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.ghost:hover{color:var(--gold-deep);border-color:var(--gold)}
.btn.danger{background:transparent;border:1px solid #e6c6bf;color:var(--alert)}
.btn.danger:hover{background:#fbeeeb}
.btn.sm{padding:.38rem .6rem;font-size:.78rem;border-radius:9px}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}

.list{display:flex;flex-direction:column;gap:.5rem}
.row{display:flex;align-items:center;gap:.9rem;background:var(--ivory);border:1px solid var(--line);border-radius:13px;padding:.7rem .9rem;box-shadow:var(--shadow-s);transition:.14s}
a.row:hover{border-color:var(--gold);transform:translateY(-1px)}
.row-main{flex:1;min-width:0}
.row-main b{font-weight:600;color:var(--charcoal);display:block}
.row-main span{font-size:.78rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.row-side{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.row-btns{display:flex;gap:.35rem}
.amount{font-family:var(--font-display);font-size:1.1rem;color:var(--charcoal);font-style:normal}
.gcode{display:flex;align-items:center;gap:.5rem;color:var(--gold-deep);min-width:150px}
.gcode svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.gcode b{font-size:.86rem;letter-spacing:.06em;color:var(--charcoal-soft)}
.solde{font-family:var(--font-display);font-size:1.15rem;color:var(--charcoal);text-align:right;line-height:1}
.solde small{display:block;font-family:var(--font-sans);font-size:.6rem;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}

.tag{font-size:.68rem;font-weight:700;padding:.14rem .55rem;border-radius:20px;background:#f2e7d6;color:var(--gold-deep);white-space:nowrap}
.tag.ok{background:#e7f0e8;color:var(--ok)}
.tag.warn{background:#fbeee0;color:var(--warn)}
.tag.new{background:#f7e9e5;color:var(--rose-deep)}

.avatar.big{width:60px;height:60px;font-size:1.6rem}
.hint-box{background:#fbf5ea;border:1px solid #f0e4cf;border-radius:12px;padding:.8rem 1rem;font-size:.85rem;color:var(--charcoal-soft);margin-bottom:1rem;line-height:1.5}

.back{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--gold-deep);font-weight:600;margin-bottom:1rem}
.back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.fiche-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.fiche-head h2{font-size:1.7rem}
.fiche-head .sub{font-size:.86rem;color:var(--text-muted)}
.fiche-act{margin-left:auto}
.fiche-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.info label{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.15rem}
.info p{font-size:.92rem;color:var(--charcoal)}
.hrow{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px dashed var(--line-soft)}
.hrow:last-child{border:none}
.hrow span{font-size:.78rem;color:var(--text-muted);width:100px;flex:none}
.hrow b{flex:1;font-weight:500;color:var(--charcoal)}
.hrow i{font-style:normal;font-family:var(--font-display);color:var(--gold-deep)}

.loyal{margin-bottom:.8rem}
.loyal-bar{height:9px;background:#efe3d2;border-radius:20px;overflow:hidden}
.loyal-bar.sm{margin-top:.35rem}
.loyal-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-light),var(--gold-deep));border-radius:20px}
.loyal-txt{margin-top:.5rem;font-size:.9rem}
.loyal-txt small{color:var(--text-muted)}

.stat-row{display:flex;align-items:center;gap:.8rem;padding:.4rem 0}
.stat-row span{width:190px;flex:none;font-size:.86rem;color:var(--charcoal-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-bar{flex:1;height:12px;background:#efe3d2;border-radius:20px;overflow:hidden}
.stat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rose-light),var(--rose-deep));border-radius:20px}
.stat-row b{width:26px;text-align:right;color:var(--gold-deep)}

.mk-grid,.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.set-grid{grid-template-columns:repeat(3,1fr)}

.form{display:flex;flex-wrap:wrap;gap:.55rem .7rem}
.fld{width:100%}
.fld.half{width:calc(50% - .35rem)}
.fld label{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.32rem}
.form input,.form select,.form textarea,.card-b.form input,.card-b.form select,.card-b.form textarea{width:100%;font-family:var(--font-sans);font-size:.92rem;color:var(--charcoal);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem}
.form textarea{resize:vertical;font-family:var(--font-serif);font-size:1.02rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form .btn{width:100%;margin-top:.3rem}
.form .chk{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--charcoal-soft);width:100%}
.form .chk input{width:auto}
.code-show{width:100%;background:#fbf5ea;border:1px dashed #e4d2b4;border-radius:9px;padding:.5rem .7rem;font-size:.82rem;color:var(--charcoal-soft)}
.code-show b{letter-spacing:.08em;color:var(--gold-deep)}
.card-b.form{display:flex;flex-wrap:wrap;gap:.55rem .7rem}
.card-b.form .btn{width:100%}
.card-b.form .muted{width:100%}

.modal{position:fixed;inset:0;z-index:200;display:none}
.modal.on{display:block}
.modal .mask{position:absolute;inset:0;background:rgba(43,37,33,.5);backdrop-filter:blur(4px)}
.modal .sheet{position:relative;z-index:1;width:92%;max-width:540px;max-height:90vh;overflow:auto;margin:5vh auto;background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:1.6rem 1.5rem;box-shadow:var(--shadow-m);animation:pop .25s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal .sheet h3{font-size:1.4rem;margin-bottom:1rem;color:var(--charcoal)}
.modal .sheet-x{position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border:none;background:transparent;color:var(--charcoal-soft);cursor:pointer;border-radius:50%;display:grid;place-items:center}
.modal .sheet-x svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.modal .sheet-x:hover{background:var(--cream-deep)}

.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,2rem);z-index:300;background:var(--charcoal);color:var(--ivory);padding:.75rem 1.3rem;border-radius:30px;font-size:.86rem;font-weight:600;box-shadow:var(--shadow-m);opacity:0;pointer-events:none;transition:.28s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .fiche-grid,.mk-grid,.set-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .fld.half{width:100%}
  .stat-row span{width:120px}
  body.menu-open .side{display:flex;position:fixed;inset:0 auto 0 0;z-index:120;width:250px;box-shadow:var(--shadow-m)}
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(43,37,33,.4);z-index:110}
  .burger{display:block}
}