/* =====================================================================
   InkCollect — Feuille de style (InkSide! Design System)
   ===================================================================== */
:root{
  --primary:#304961; --primary-700:#2a3f54; --primary-900:#1b2c3b;
  --primary-100:#e5eaef; --primary-50:#f2f5f8; --primary-200:#c9d2db; --primary-300:#9caaba; --primary-400:#6e8299; --primary-500:#446079;
  --accent:#61ce70; --accent-600:#4fb85c; --accent-700:#3f9e4c; --accent-50:#f1fbf3; --accent-100:#e2f6e5;
  --white:#fff; --n50:#f8fafb; --n100:#f2f5f8; --n200:#e6ebf0; --n300:#d4dbe3; --n400:#aeb9c5; --n500:#7d8a99; --n600:#5a6775; --n700:#3f4a57;
  --error:#e0553f; --error-bg:#fbe6e2; --warning:#e8a33d; --warning-bg:#fbf0dd;
  --radius-md:10px; --radius-lg:16px;
  --shadow-sm:0 2px 8px rgba(48,73,97,.06); --shadow-md:0 8px 24px -8px rgba(48,73,97,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--n700);background:var(--n100);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--accent-700);}
h1,h2,h3,h4{color:var(--primary);font-weight:800;letter-spacing:-.02em;margin:0;}
img{max-width:100%;display:block;}
::selection{background:var(--accent-100);color:var(--primary-900);}

.container{max-width:1160px;margin:0 auto;padding:0 24px;}
.container-sm{max-width:820px;margin:0 auto;padding:0 24px;}

/* ---- Header ---- */
.appbar{background:var(--white);border-bottom:1px solid var(--n200);position:sticky;top:0;z-index:30;}
.appbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;color:var(--primary);}
.brand img{height:30px;width:30px;object-fit:contain;}
.brand .k{color:var(--accent-700);}
.brand-sub{margin-left:8px;padding-left:12px;border-left:1px solid var(--n200);font-size:12px;font-weight:700;color:var(--n400);}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:14.5px;border-radius:var(--radius-md);border:1px solid transparent;padding:10px 18px;cursor:pointer;transition:all .18s cubic-bezier(.22,1,.36,1);text-decoration:none;line-height:1;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-700);color:#fff;}
.btn-accent{background:var(--accent);color:var(--primary-900);}
.btn-accent:hover{background:var(--accent-600);color:var(--primary-900);}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--n300);}
.btn-outline:hover{background:var(--n100);color:var(--primary);}
.btn-ghost{background:transparent;color:var(--primary);}
.btn-ghost:hover{background:var(--n100);}
.btn-danger{background:var(--error-bg);color:var(--error);}
.btn-danger:hover{background:#f6d3cc;}
.btn-sm{padding:7px 13px;font-size:13px;}
.btn-lg{padding:14px 26px;font-size:16px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---- Forms ---- */
.field{margin-bottom:18px;}
.label{display:block;font-size:13.5px;font-weight:700;color:var(--primary);margin-bottom:7px;}
.input,.select,.textarea{width:100%;font-family:inherit;font-size:15px;color:var(--n700);background:#fff;border:1px solid var(--n300);border-radius:var(--radius-md);padding:11px 13px;transition:border-color .15s,box-shadow .15s;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(48,73,97,.16);}
.textarea{min-height:90px;resize:vertical;}
.hint{font-size:12.5px;color:var(--n500);margin-top:5px;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:640px){.row{grid-template-columns:1fr;}}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--n200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.card-pad{padding:26px;}
.grid{display:grid;gap:16px;}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;}
.badge-accent{background:var(--accent-100);color:var(--accent-700);}
.badge-primary{background:var(--primary-100);color:var(--primary);}
.badge-neutral{background:var(--n100);color:var(--n600);}
.badge-warn{background:var(--warning-bg);color:var(--warning);}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:#fff;border:1px solid var(--n200);border-radius:var(--radius-lg);padding:20px;}
.stat.dark{background:var(--primary);border-color:var(--primary);}
.stat-label{font-size:13px;font-weight:600;color:var(--n500);margin-bottom:6px;}
.stat.dark .stat-label{color:var(--primary-200);}
.stat-value{font-size:29px;font-weight:800;color:var(--primary);letter-spacing:-.02em;}
.stat.dark .stat-value{color:#fff;}

/* ---- Table ---- */
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n400);padding:12px 16px;border-bottom:1px solid var(--n200);}
.table td{padding:14px 16px;border-bottom:1px solid var(--n100);font-size:14px;}
.table tr:last-child td{border-bottom:none;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-100);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--primary);}

/* ---- Flash ---- */
.flash{padding:13px 18px;border-radius:var(--radius-md);font-size:14px;font-weight:600;margin-bottom:16px;}
.flash-ok{background:var(--accent-50);color:var(--accent-700);border:1px solid var(--accent-100);}
.flash-err{background:var(--error-bg);color:var(--error);border:1px solid #f3cfc7;}

/* ---- Misc ---- */
.muted{color:var(--n500);}
.eyebrow{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-700);}
.divider{height:1px;background:var(--n200);border:0;margin:22px 0;}
.pill-toggle{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;border:none;font-family:inherit;}
.chk{width:16px;height:16px;border-radius:5px;border:2px solid var(--n400);display:inline-flex;align-items:center;justify-content:center;background:#fff;}
.chk.on{background:var(--accent-700);border-color:var(--accent-700);}

/* =====================================================================
   Responsive — grilles adaptatives (mobile first breakpoints)
   ===================================================================== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.shop-layout{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start;}
.hero-visual{display:block;}

@media (max-width:900px){
  .two-col{grid-template-columns:1fr;gap:32px;}
  .shop-layout{grid-template-columns:1fr;}
  .shop-layout .cart-sticky{position:static !important;}
  .cols-3{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .hero-visual{display:none;}
}
@media (max-width:680px){
  .container,.container-sm{padding:0 16px;}
  h1{font-size:32px !important;line-height:1.1 !important;}
  .card-pad{padding:20px;}
  .appbar-inner{flex-wrap:wrap;gap:10px;}
  .appbar-inner .brand-sub{display:none;}
  .btn-lg{padding:12px 20px;font-size:15px;}
  /* boutons pleine largeur sur les barres d'action */
  .actions-stack{width:100%;}
  .actions-stack .btn,.actions-stack form,.actions-stack form .btn{width:100%;}
  /* tables scrollables */
  .table{min-width:560px;}
}
@media (max-width:480px){
  .stats{grid-template-columns:1fr;}
  h1{font-size:27px !important;}
}
/* Le tiroir configurateur passe pleine largeur sur mobile */
@media (max-width:480px){
  #drawer{width:100vw !important;max-width:100vw !important;}
}