/* =====================================================================
   Client theme — Espace client Le Pain Laurent L'Hénaff (design system partagé)
   Charte alignée sur le logo : crème + vert bio + encre. PAS de marron.
   Un seul fichier à éditer (typo, couleurs) pour toutes les pages client.
   ===================================================================== */
:root{
  --ground:#F6F4EF; --surface:#FFFFFF; --surface-2:#F1EEE7; --border:#E4DFD3;
  --ink:#26241F; --ink-soft:#57534B; --muted:#8A857A;
  --green:#8DC63F; --green-ink:#4A7015; --green-tint:#EAF3D9; --amber:#B8860B;
  --shadow:0 1px 2px rgba(28,27,24,.05),0 8px 24px rgba(28,27,24,.06);
  --shadow-sm:0 1px 2px rgba(28,27,24,.06);
  /* Typo : mesurée (ni trop grasse, ni trop grosse) — tout se règle ici */
  --font:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-title:600; --w-strong:600; --w-body:400;
}
@media (prefers-color-scheme:dark){
  :root{ --ground:#151410; --surface:#201E18; --surface-2:#2A2820; --border:#38352C;
    --ink:#F1EEE6; --ink-soft:#CFC9BC; --muted:#948E80; --green:#A9DA5B; --green-ink:#B4E066; --green-tint:#232E18; }
}

/* ---- Base ---- */
body{ background:var(--ground); color:var(--ink); font-family:var(--font);
  font-weight:var(--w-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
.client-main{ max-width:1120px; margin:0 auto; padding:22px 20px 70px; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:var(--w-title); letter-spacing:-.01em; color:var(--ink); }

/* ---- Top bar (remplace le marron) ---- */
.client-nav{ background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); }
.client-nav .navbar-brand{ color:var(--ink); font-weight:var(--w-title); font-size:15px; letter-spacing:-.01em; display:flex; align-items:center; }
.client-nav .navbar-brand .lp{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--green-tint); color:var(--green-ink); border-radius:8px; margin-right:9px; font-size:15px; }
.client-nav .nav-link{ color:var(--muted)!important; font-weight:var(--w-strong); font-size:13.5px; padding:14px 12px!important;
  border-bottom:2px solid transparent; }
.client-nav .nav-link:hover{ color:var(--ink)!important; }
.client-nav .nav-link.active{ color:var(--ink)!important; border-bottom-color:var(--green); }
.client-nav .nav-link .badge{ background:var(--green)!important; color:#17300a!important; font-weight:800; }
.client-nav .dropdown-toggle{ color:var(--ink-soft)!important; }
.client-nav .navbar-toggler{ border-color:var(--border); }

/* ---- Boutons / éléments génériques ---- */
.btn-green{ background:var(--green); border:1px solid var(--green); color:#17300a; font-weight:var(--w-strong); }
.btn-green:hover{ filter:brightness(1.04); color:#17300a; }
.ui-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }

/* =====================================================================
   Catalogue
   ===================================================================== */
.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 4px; }
.cat-head h2{ font-size:20px; margin:0; }
.cat-head .sub{ color:var(--muted); font-size:13px; }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px; }
.cat-chip{ font-size:13px; font-weight:var(--w-strong); padding:7px 13px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:.12s; }
.cat-chip:hover{ border-color:var(--green); }
.cat-chip.on{ background:var(--green); border-color:var(--green); color:#17300a; }
.cat-layout{ display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start; }
@media(max-width:900px){ .cat-layout{ grid-template-columns:1fr; } }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:16px; }
.pcard{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,border-color .15s; display:flex; flex-direction:column; }
.pcard.active{ border-color:color-mix(in srgb,var(--green) 60%,var(--border)); box-shadow:0 0 0 2px var(--green-tint),var(--shadow-sm); }
/* fond blanc : les photos produit (fond blanc carré) se fondent, plus de carré visible */
.thumb{ position:relative; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* contain = image entière (pas de troncature) ; padding ~10% => réduite d'env. 20% */
.thumb img{ width:100%; height:100%; object-fit:contain; padding:5%; display:block; }
.thumb .ph{ color:var(--muted); font-size:2.4rem; opacity:.55; }
.qbadge{ position:absolute; top:8px; right:8px; background:var(--green); color:#17300a; font-weight:800; font-size:12.5px;
  min-width:26px; height:26px; padding:0 8px; border-radius:999px; display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.pcard.active .qbadge{ display:inline-flex; }
.pbody{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pname{ font-weight:var(--w-strong); font-size:14px; line-height:1.25; }
.trow{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.trow .tinfo{ min-width:0; }
.trow .tnom{ font-size:12.5px; color:var(--ink-soft); line-height:1.2; }
/* Prix : italique, discret mais lisible, juste sous l'article */
.trow .tprix{ font-size:12.5px; font-style:italic; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-top:1px; }
.step{ display:flex; align-items:center; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--ground); flex:0 0 auto; }
.step button{ width:30px; height:30px; border:none; background:transparent; color:var(--ink); font-size:16px; cursor:pointer; line-height:1; }
.step button:hover{ background:var(--surface-2); }
.step input{ width:38px; height:30px; text-align:center; border:none; border-left:1px solid var(--border); border-right:1px solid var(--border);
  background:transparent; font-weight:var(--w-strong); font-size:13px; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.step input:focus{ outline:none; background:var(--surface); }

/* ---- Panier (colonne collante) ---- */
.cart{ position:sticky; top:14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow-sm); }
.cart h3{ font-size:15px; margin:0 0 12px; display:flex; justify-content:space-between; align-items:center; }
.cart h3 .cnt{ font-size:12px; font-weight:800; color:var(--green-ink); background:var(--green-tint); padding:2px 9px; border-radius:999px; }
.cart .empty{ color:var(--muted); font-size:13px; padding:10px 0; }
.cl{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:6px 0; color:var(--ink-soft); }
.cl .q{ color:var(--muted); }
.cl .v{ font-variant-numeric:tabular-nums; color:var(--ink); }
.tot{ display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 4px; padding-top:12px; border-top:1px solid var(--border); }
.tot .lab{ font-size:13px; color:var(--muted); }
.tot .amt{ font-family:var(--disp); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums; }
.tot .amt small{ font-size:13px; color:var(--muted); font-weight:600; }
.cta{ display:block; width:100%; margin-top:14px; text-align:center; text-decoration:none; font-weight:700; font-size:15px; color:#17300a;
  background:var(--green); border:1px solid var(--green); border-radius:10px; padding:12px; cursor:pointer; }
.cta:hover{ filter:brightness(1.04); color:#17300a; }
.cta.disabled{ opacity:.5; pointer-events:none; }
.deadline{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; font-size:12px; color:var(--amber); line-height:1.5; }
.deadline b{ color:var(--ink-soft); }

/* =====================================================================
   Harmonisation Bootstrap pour TOUT l'espace client (commande, historique,
   compte…) : les pages existantes adoptent la charte sans réécriture.
   ===================================================================== */
.client-main .card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }
.client-main .card-header{ background:var(--surface); border-bottom:1px solid var(--border); font-weight:var(--w-strong); color:var(--ink); }
.client-main .card-footer{ background:var(--surface); border-top:1px solid var(--border); }
.client-main .btn-primary,.client-main .btn-success{ background:var(--green); border-color:var(--green); color:#17300a; font-weight:var(--w-strong); }
.client-main .btn-primary:hover,.client-main .btn-success:hover{ filter:brightness(1.04); background:var(--green); border-color:var(--green); color:#17300a; }
.client-main .btn-outline-primary{ color:var(--green-ink); border-color:var(--border); }
.client-main .btn-outline-primary:hover{ background:var(--green); border-color:var(--green); color:#17300a; }
.client-main .btn-outline-primary.active,.client-main .btn-outline-primary:active{ background:var(--green)!important; border-color:var(--green)!important; color:#17300a!important; }
.client-main .table{ color:var(--ink); }
.client-main .table-dark,.client-main .table-dark th{ background:var(--surface-2)!important; color:var(--ink)!important; border-color:var(--border)!important; }
.client-main .table>:not(caption)>*>*{ border-color:var(--border); background-color:transparent; }
.client-main .table-striped>tbody>tr:nth-of-type(odd)>*{ background-color:color-mix(in srgb,var(--surface-2) 45%,transparent); color:var(--ink); }
.client-main .table-light,.client-main .table-active{ background:var(--green-tint)!important; color:var(--ink)!important; }
.client-main .badge.bg-warning{ background:var(--green)!important; color:#17300a!important; }
.client-main .form-control,.client-main .form-select{ border-color:var(--border); }
.client-main .form-control:focus,.client-main .form-select:focus{ border-color:var(--green); box-shadow:0 0 0 .2rem var(--green-tint); }
.client-main .alert-info{ background:var(--green-tint); border-color:color-mix(in srgb,var(--green) 30%,var(--border)); color:var(--green-ink); }
.client-main .text-primary{ color:var(--green-ink)!important; }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }