/* ============================================================
   CaniConcept — Espace de gestion boutique
   Charte : marron #482d1c · vert sauge #91b98a · beige #f1e9d8 · or #e0a214
   Style : fin & distingué — hairlines, typo allégée, accents or.
============================================================ */
:root{
  --beige-bg:#F7F1E6; --beige:#F1E9D8; --beige-dark:#E4D7BF; --cream:#fff;
  --brown:#482D1C; --brown-soft:#6E4A34; --brown-2:#8C5E42;
  --green:#91B98A; --green-dark:#5E8A56; --gold:#E0A214;
  --danger:#b3241f; --warn:#d98a2b;
  --radius:16px; --shadow:0 2px 12px rgba(78,51,36,.05); --shadow-h:0 8px 24px rgba(78,51,36,.09);
  --hairline:1px solid var(--beige-dark);
  --font-b:"Baloo 2",sans-serif; --font:"Nunito Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--brown);background:var(--beige-bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-b);font-weight:600;letter-spacing:.2px}
button{font-family:var(--font);cursor:pointer}
code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;background:var(--beige);padding:.1rem .35rem;border-radius:5px}

.app{display:flex;min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{width:248px;flex:none;background:var(--brown);color:#EADFD2;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.35rem 1.4rem 1.2rem;border-bottom:1px solid rgba(241,233,216,.12)}
.brand-logo{width:132px;height:44px;flex:none;background:var(--beige);-webkit-mask:url("assets/logo.webp") no-repeat left center/contain;mask:url("assets/logo.webp") no-repeat left center/contain}
.brand-tag{font-family:var(--font-b);font-weight:600;font-size:.66rem;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(224,162,20,.55);padding:.14rem .5rem;border-radius:100px}
.side-nav{padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.15rem;flex:1;overflow:auto}
.nav-sep{font-size:.62rem;text-transform:uppercase;letter-spacing:1.6px;color:rgba(241,233,216,.45);margin:1.1rem .65rem .35rem;font-weight:700}
.nav-link{display:flex;align-items:center;gap:.7rem;background:none;border:none;color:rgba(241,233,216,.88);font-weight:600;font-size:.9rem;padding:.62rem .8rem;border-radius:10px;text-align:left;width:100%;transition:.15s;letter-spacing:.15px}
.nav-link:hover{background:rgba(241,233,216,.07);color:#fff}
.nav-link.active{background:rgba(241,233,216,.1);color:#fff;box-shadow:inset 2.5px 0 0 var(--gold)}
.side-foot{padding:1.05rem 1.4rem;border-top:1px solid rgba(241,233,216,.12);font-size:.76rem;color:rgba(241,233,216,.75)}
.shop-status{display:flex;align-items:center;gap:.45rem;font-weight:600;margin-bottom:.15rem;color:rgba(241,233,216,.95)}
.dot-live{width:8px;height:8px;border-radius:50%;background:#8fd68f;box-shadow:0 0 0 3px rgba(126,214,126,.2)}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,241,230,.92);backdrop-filter:blur(10px);display:flex;align-items:center;gap:1rem;padding:1.05rem 1.8rem;border-bottom:var(--hairline)}
.topbar h1{font-size:1.22rem;font-weight:600}
.side-toggle{display:none;background:none;border:none;font-size:1.35rem;color:var(--brown)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:.8rem}
.period-pill{background:#fff;border:var(--hairline);border-radius:100px;padding:.38rem .95rem;font-weight:600;font-size:.78rem;color:var(--brown-soft)}
.admin-chip{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.86rem;color:var(--brown-soft)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--green-dark);color:#fff;display:grid;place-items:center;font-family:var(--font-b);font-size:.85rem}
.content{padding:1.8rem;max-width:1200px;width:100%}

/* ---------- Cartes / grilles ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.kpi{background:var(--cream);border:var(--hairline);border-radius:var(--radius);padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
.kpi .k-label{font-size:.68rem;color:var(--brown-2);font-weight:700;display:flex;align-items:center;gap:.45rem;text-transform:uppercase;letter-spacing:1px}
.kpi .k-val{font-family:var(--font-b);font-size:1.72rem;font-weight:700;margin:.35rem 0 .05rem;letter-spacing:.2px}
.kpi .k-delta{font-size:.76rem;font-weight:600;color:var(--brown-soft)}
.k-delta.up{color:var(--green-dark)} .k-delta.down{color:var(--danger)}

.panel{background:var(--cream);border:var(--hairline);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow);margin-bottom:1.4rem}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.05rem;gap:1rem;flex-wrap:wrap}
.panel-head h2{font-size:1.02rem;display:flex;align-items:center;gap:.45rem}
.panel-head h3{font-size:.95rem}
.panel-head .sub{font-size:.76rem;color:var(--brown-2);font-weight:600;letter-spacing:.2px}
.cols-2{display:grid;grid-template-columns:1.6fr 1fr;gap:1.3rem}

/* ---------- Chart CA (barres) ---------- */
.chart{display:flex;align-items:flex-end;gap:.55rem;height:200px;padding-top:1rem}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:30px;background:var(--green);border-radius:7px 7px 0 0;transition:height .6s ease}
.bar-wrap:hover .bar{background:var(--green-dark)}
.bar-lbl{font-size:.65rem;color:var(--brown-2);font-weight:600;letter-spacing:.3px}
.bar-val{font-size:.65rem;font-weight:700;color:var(--brown-soft)}

/* ---------- Listes / tableaux ---------- */
.list-row{display:flex;align-items:center;gap:.85rem;padding:.65rem 0;border-bottom:1px solid var(--beige)}
.list-row:last-child{border-bottom:none}
.list-row .thumb{width:40px;height:40px;border-radius:10px;background:var(--beige);object-fit:cover;flex:none}
.list-row .grow{flex:1;min-width:0}
.list-row .r-title{font-weight:600;font-size:.9rem}
.list-row .r-sub{font-size:.76rem;color:var(--brown-2)}
.list-row .r-val{font-family:var(--font-b);font-weight:600;color:var(--green-dark)}

table.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:1.1px;color:var(--brown-2);font-weight:700;padding:.55rem .75rem;border-bottom:var(--hairline)}
.tbl td{padding:.72rem .75rem;border-bottom:1px solid var(--beige);font-size:.87rem;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(247,241,230,.6)}
.mono{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:.82rem;background:var(--beige);padding:.18rem .5rem;border-radius:6px;letter-spacing:.3px}

/* ---------- Badges / boutons ---------- */
.badge{font-size:.68rem;font-weight:700;padding:.22rem .62rem;border-radius:100px;letter-spacing:.4px}
.badge.on{background:#e6f1e2;color:var(--green-dark)}
.badge.off{background:#efeae1;color:#9c8b73}
.badge.wait{background:#faeed3;color:#8a6d1f}
.badge.no{background:#f6dcda;color:var(--danger)}
.btn{border:none;border-radius:100px;font-weight:700;font-size:.82rem;letter-spacing:.2px;padding:.52rem 1.15rem;background:var(--brown);color:#fff;transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-h)}
.btn.green{background:var(--green-dark)}
.btn.ghost{background:#fff;color:var(--brown-soft);border:1.5px solid var(--beige-dark)}
.btn.ghost:hover{border-color:var(--brown-2);color:var(--brown)}
.btn.mini{padding:.3rem .72rem;font-size:.74rem}
.btn.danger{background:#fff;color:var(--danger);border:1.5px solid #eccfcc}
.btn.danger:hover{border-color:var(--danger)}
.btn-row{display:flex;gap:.4rem;flex-wrap:wrap}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- Form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.95rem}
.field{display:flex;flex-direction:column;gap:.32rem}
.field label{font-size:.7rem;font-weight:700;color:var(--brown-2);text-transform:uppercase;letter-spacing:.8px}
.field input,.field select{border:1.5px solid var(--beige-dark);border-radius:11px;padding:.58rem .8rem;font-family:var(--font);font-size:.92rem;background:#fff;color:var(--brown);transition:border-color .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--green-dark)}
.hint{font-size:.78rem;color:var(--brown-soft)}
.sync-note{display:flex;align-items:center;gap:.5rem;background:#f3f8f0;color:var(--green-dark);border:1px solid #dcead6;font-weight:600;font-size:.79rem;padding:.55rem .85rem;border-radius:10px;margin-top:.8rem;line-height:1.45}

/* ---------- King product placeholder ---------- */
.king-hero{text-align:center;padding:2.5rem 1rem}
.king-hero h2{font-size:1.5rem;margin:.4rem 0}
.king-hero p{color:var(--brown-soft);max-width:520px;margin:.4rem auto 1.2rem}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.feature{background:var(--beige-bg);border:1px dashed var(--beige-dark);border-radius:13px;padding:1rem;text-align:left}
.feature h4{font-size:.95rem;margin-bottom:.2rem}
.feature p{font-size:.8rem;color:var(--brown-soft)}

/* ---------- Codes promo (form Shopify-like) ---------- */
.promo-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:1.3rem;align-items:start}
.promo-form .panel{margin-bottom:1.05rem}
.promo-form h3{font-size:.98rem}
.radio-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.radio-card{position:relative;display:flex;flex-direction:column;gap:.15rem;border:1.5px solid var(--beige-dark);border-radius:13px;padding:.8rem .95rem;cursor:pointer;transition:.15s;background:#fff}
.radio-card:hover{border-color:var(--green)}
.radio-card.on{border-color:var(--green-dark);background:#f6faf3}
.radio-card input{position:absolute;top:.75rem;right:.75rem;accent-color:var(--green-dark)}
.radio-card b{font-size:.89rem;font-weight:700}
.radio-card .rc-d{font-size:.74rem;color:var(--brown-2)}
.rline-group{display:flex;flex-direction:column;gap:.42rem}
.rline{display:flex;align-items:center;gap:.5rem;font-size:.87rem;font-weight:500;cursor:pointer;color:var(--brown-soft)}
.rline input{accent-color:var(--green-dark);width:15px;height:15px}
.inline-fields{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end}
.suffix-in{display:flex;align-items:center;border:1.5px solid var(--beige-dark);border-radius:11px;overflow:hidden;background:#fff}
.suffix-in input{border:none;outline:none;padding:.58rem .7rem;width:110px;font-family:var(--font);font-size:.92rem;color:var(--brown)}
.suffix-in span{padding:0 .8rem;color:var(--brown-2);font-weight:700;border-left:1.5px solid var(--beige-dark);align-self:stretch;display:flex;align-items:center;font-size:.85rem}
.promo-side{position:sticky;top:86px}
.summary-card .sum-line{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--beige);font-size:.85rem}
.summary-card .sum-line:last-of-type{border-bottom:none}
.summary-card .sum-line span{color:var(--brown-2)}
.summary-card .sum-line b{text-align:right;font-weight:600}

/* ---------- Sous-onglets ---------- */
.subtabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.25rem}
.subtab{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid var(--beige-dark);border-radius:100px;padding:.45rem 1rem;font-weight:600;font-size:.82rem;color:var(--brown-soft);transition:.15s;letter-spacing:.15px}
.subtab:hover{border-color:var(--green)}
.subtab.on{background:var(--brown);border-color:var(--brown);color:#fff}
.cagnotte-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--green-dark);color:#fff;border-radius:var(--radius);padding:1.35rem 1.6rem;margin-bottom:1.35rem;box-shadow:var(--shadow)}
.ch-label{font-weight:600;font-size:.8rem;opacity:.92;text-transform:uppercase;letter-spacing:1px}
.ch-val{font-family:var(--font-b);font-size:2.2rem;font-weight:700;line-height:1.15}
.ch-sub{font-size:.8rem;opacity:.88}
.cagnotte-hero .btn.green{background:#fff;color:var(--green-dark)}

/* ---------- King builder ---------- */
.king-wrap{display:grid;grid-template-columns:240px 1fr;gap:1.3rem;margin-top:.4rem}
.king-list{display:flex;flex-direction:column;gap:.25rem;border-right:1px solid var(--beige);padding-right:.9rem;max-height:560px;overflow:auto}
.king-item{text-align:left;background:none;border:1.5px solid transparent;border-radius:10px;padding:.55rem .7rem;font-weight:600;font-size:.83rem;color:var(--brown)}
.king-item:hover{background:var(--beige-bg)}
.king-item.on{background:var(--beige);border-color:var(--green)}
.king-item .ki-sub{display:block;font-weight:500;font-size:.69rem;color:var(--brown-2);margin-top:.1rem}
.king-editor{min-width:0}
.ke-top{display:grid;grid-template-columns:1.5fr 1.2fr auto auto;gap:.9rem;align-items:end;margin-bottom:1rem}
.toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--brown-soft);white-space:nowrap}
.toggle input{width:15px;height:15px;accent-color:var(--green-dark)}
.val-table{width:100%;border-collapse:collapse}
.val-table th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:1px;color:var(--brown-2);font-weight:700;padding:.3rem}
.val-table td{padding:.35rem .3rem;border-bottom:1px solid var(--beige)}
.val-sw{width:34px;height:34px;border:1.5px solid var(--beige-dark);border-radius:8px;padding:0;background:none;cursor:pointer}
.val-name,.val-price{width:100%;border:1.5px solid var(--beige-dark);border-radius:10px;padding:.45rem .6rem;font-family:var(--font);font-size:.88rem;background:#fff;color:var(--brown)}
.icon-del{background:none;border:none;font-size:1rem;cursor:pointer}
.lbl-mini{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--brown-2)}
.assigned-models{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 .8rem}
.model-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--beige);border:1px solid var(--beige-dark);border-radius:100px;padding:.32rem .55rem .32rem .85rem;font-weight:600;font-size:.8rem}
.model-chip button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.85rem;line-height:1;font-weight:700}
.assign-sel{border:1.5px solid var(--beige-dark);border-radius:11px;padding:.55rem .8rem;font-family:var(--font);font-weight:600;background:#fff;color:var(--brown)}
.mprev{background:var(--beige-bg);border:1px dashed var(--beige-dark);border-radius:13px;padding:1rem;margin-top:.5rem}
.mprev-group{margin:.55rem 0}
.mprev-group > .lbl{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.8px;color:var(--brown-2);font-weight:700;margin-bottom:.4rem}
.prev-pill{display:inline-block;background:#fff;border:1px solid var(--beige-dark);border-radius:100px;padding:.26rem .7rem;font-size:.78rem;font-weight:600;margin:.15rem}
.prev-dot{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--beige-dark);margin:.15rem;vertical-align:middle}

/* ---------- Bandeaux de connexion ---------- */
.conn-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;border-radius:11px;padding:.6rem .9rem;font-weight:600;font-size:.82rem;margin-bottom:1.2rem;border:1px solid transparent}
.conn-bar.ok{background:#f0f7ec;color:var(--green-dark);border-color:#dcead6}
.conn-bar.info{background:#eef3f8;color:#3a6ea5;border-color:#d8e4f0}
.conn-bar.err{background:#faf0d8;color:#8a6d1f;border-color:#ecd9a0}
.conn-bar .btn.ghost.mini{border-color:currentColor;color:inherit;background:transparent}
.loy-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.loy-rule{display:flex;gap:.7rem;align-items:flex-start;background:var(--beige-bg);border:1px solid var(--beige);border-radius:13px;padding:.85rem .95rem}
.loy-rule .lr-ic{line-height:1}
.loy-rule b{display:block;font-size:.88rem;font-weight:700}
.loy-rule span{font-size:.76rem;color:var(--brown-2)}

/* Candidatures ambassadeur */
.amb-req .panel-head{align-items:flex-start}
.amb-req-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.4rem 0}
.amb-req-grid > div{background:var(--beige-bg);border-radius:11px;padding:.55rem .75rem}
.amb-req-grid span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.8px;color:var(--brown-2);font-weight:700}
.amb-req-grid b{font-size:.86rem;font-weight:600}
.amb-req-msg{font-style:italic;color:var(--brown-soft);background:var(--beige-bg);border-left:2.5px solid var(--gold);border-radius:0 10px 10px 0;padding:.6rem .95rem;margin-top:.6rem;line-height:1.55}
@media(max-width:700px){ .amb-req-grid{grid-template-columns:1fr 1fr} }

/* ---------- Sélecteur de période (Vue d'ensemble, façon Shopify) ---------- */
.ov-range{display:flex;align-items:center;gap:.8rem;margin-bottom:1.25rem;position:relative;flex-wrap:wrap}
.ov-range-btn{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid var(--beige-dark);border-radius:100px;padding:.5rem 1.05rem;font-weight:600;font-size:.85rem;color:var(--brown);transition:.15s;cursor:pointer}
.ov-range-btn:hover{border-color:var(--brown-2)}
.ov-range-btn .chev{width:11px;height:11px;flex:none}
.ov-cmp{font-size:.78rem;color:var(--brown-2)}
.ov-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:var(--cream);border:var(--hairline);border-radius:14px;box-shadow:var(--shadow-h);padding:.55rem;min-width:270px}
.ov-pop-item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:.5rem .75rem;font-size:.86rem;font-weight:600;color:var(--brown-soft);cursor:pointer}
.ov-pop-item:hover{background:var(--beige-bg)}
.ov-pop-item.on{background:var(--beige);color:var(--brown)}
.ov-pop-sep{height:1px;background:var(--beige);margin:.5rem .2rem}
.ov-pop-custom{display:flex;gap:.5rem;align-items:flex-end;padding:.1rem .3rem .2rem;flex-wrap:wrap}
.ov-pop-custom .field{gap:.2rem}
.ov-pop-custom .field input{padding:.4rem .5rem;font-size:.8rem;border-radius:9px}
.ov-pop-note{font-size:.7rem;color:var(--brown-2);margin:.55rem .45rem .15rem;line-height:1.4}
.k-prev{font-weight:500;color:var(--brown-2)}
.bar-wrap.no-val .bar-val{display:none}

/* ---------- Modales maison (alert / confirm / formulaires) ---------- */
.ccm{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.ccm-back{position:absolute;inset:0;background:rgba(40,25,10,.45)}
.ccm-box{position:relative;z-index:1;width:100%;max-width:430px;max-height:82vh;display:flex;flex-direction:column;background:var(--cream);border:var(--hairline);border-radius:18px;box-shadow:0 24px 60px rgba(40,25,10,.32);padding:1.35rem 1.5rem 1.25rem;animation:ccmIn .16s ease}
@keyframes ccmIn{from{transform:translateY(8px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.ccm-x{position:absolute;top:.85rem;right:.85rem;width:1.9rem;height:1.9rem;border:none;border-radius:100px;background:var(--beige);color:var(--brown-soft);font-size:.82rem;line-height:1;cursor:pointer;flex:none}
.ccm-x:hover{background:var(--beige-dark)}
.ccm-title{font-size:1.02rem;margin:0 1.8rem .55rem 0}
.ccm-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--beige-dark) transparent;margin:0 -.4rem;padding:0 .4rem}
.ccm-scroll::-webkit-scrollbar{width:6px}
.ccm-scroll::-webkit-scrollbar-thumb{background:var(--beige-dark);border-radius:100px}
.ccm-ic{margin:-.1rem 0 .45rem}
.ccm-ic svg{width:30px;height:30px}
.ccm-msg{font-size:.9rem;color:var(--brown-soft);line-height:1.6;white-space:pre-line}
.ccm-msg b{color:var(--brown)}
.ccm-form{display:flex;flex-direction:column;gap:.85rem;margin-top:.3rem}
.ccm-hint{font-size:.73rem;color:var(--brown-2);line-height:1.45}
.ccm-btns{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.15rem;flex-shrink:0}

/* ---------- Responsive ---------- */
@media(max-width:1000px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} .cols-2{grid-template-columns:1fr} .feature-grid{grid-template-columns:1fr} .promo-layout{grid-template-columns:1fr} .promo-side{position:static} .loy-rules{grid-template-columns:1fr} }
@media(max-width:820px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:.2s}
  body.nav-open .sidebar{transform:translateX(0)}
  .side-toggle{display:block}
  .form-grid{grid-template-columns:1fr}
  .king-wrap{grid-template-columns:1fr}
  .king-list{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--beige);padding:0 0 .8rem}
  .ke-top{grid-template-columns:1fr}
  .content{padding:1.1rem}
}