/* theme.css : mise en page commune (sidebar, topbar, footer, composants) */
:root{--sidebar-w:250px;--shadow:0 2px 12px rgba(0,0,0,.07);--bg:#f5f6f8;--text:#1f2430}
*,*::before,*::after{box-sizing:border-box}
body.avec-layout{display:flex;flex-direction:column;min-height:100vh;margin:0 0 0 var(--sidebar-w);background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.45}

/* Sidebar */
#sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);z-index:2000;overflow-y:auto;
  display:flex;flex-direction:column;padding:20px 14px;transition:transform .25s ease;
  background:var(--secondary-color);color:var(--on-secondary)}
.sb-brand{display:flex;align-items:center;gap:12px;padding-bottom:18px;margin-bottom:12px;
  border-bottom:1px solid rgba(128,128,128,.3)}
.sb-brand img{width:auto;max-width:72px;height:46px;object-fit:contain;border-radius:10px}
.sb-brand .etablissement-nom{font-weight:700;font-size:1.05rem;line-height:1.2}
#sidebar nav{display:flex;flex-direction:column;gap:4px}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  color:inherit;text-decoration:none;font-weight:500;transition:background .15s}
#sidebar nav a:hover{background:rgba(128,128,128,.18)}
#sidebar nav a.actif{background:var(--primary-color);color:var(--on-primary)}
.sb-info{margin-top:auto;padding:12px;border-radius:10px;font-size:.85rem;background:rgba(128,128,128,.14)}

/* Barre du haut (mobile) et voile */
#topbar{display:none;position:sticky;top:0;z-index:1500;align-items:center;gap:12px;
  height:52px;padding:0 14px;background:var(--primary-color);color:var(--on-primary);box-shadow:var(--shadow)}
#topbar button{background:none;border:0;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1900}

/* Footer */
#footer-espace{margin-top:auto;padding:22px 16px;text-align:center;font-size:.9rem;
  background:var(--secondary-color);color:var(--on-secondary)}
#footer-espace strong{display:block;font-size:1rem;margin-bottom:4px}
#footer-espace small{display:block;margin-top:8px;opacity:.75}

/* Composants de page */
.page-titre{font-size:1.6rem;margin-top:24px;margin-bottom:12px}
.page-titre,.recherche,#menu-container{width:100%;max-width:900px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
#menu-container{padding-bottom:16px}
.recherche{position:sticky;top:0;z-index:900;padding-top:10px;padding-bottom:10px;background:var(--bg)}
.recherche input{width:100%;padding:13px 18px;font-size:1rem;border:2px solid #e2e5ea;border-radius:999px;
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.recherche input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(128,128,128,.15)}
.text-primary-custom{color:var(--primary-color)!important;border-color:var(--primary-color)!important}

.category-section{display:grid;grid-template-columns:1fr;column-gap:20px;background:#fff;padding:16px;
  border-radius:14px;box-shadow:var(--shadow);margin-bottom:18px}
.category-section>h3{grid-column:1/-1}
.product-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;
  margin-top:10px;border:1px solid #eef0f3;border-radius:12px;transition:box-shadow .15s,transform .15s}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.product-info{display:flex;align-items:center;gap:12px;min-width:0}
.product-img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex-shrink:0;background:#eee}

.btn-primary{background:var(--primary-color);color:var(--on-primary,#fff);border:0;padding:9px 16px;
  border-radius:999px;cursor:pointer;font-weight:700;transition:transform .1s,opacity .15s}
.btn-primary:hover{opacity:.9}
.btn-primary:active{transform:scale(.96)}
.btn-primary:disabled{opacity:.5;cursor:wait}
.btn-panier-flottant{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1000;
  padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.18);
  background:var(--primary-color);color:var(--on-primary,#fff)}

/* Tablette et grands écrans */
@media (min-width:1100px){.category-section{grid-template-columns:1fr 1fr}}
@media (min-width:901px){.btn-panier-flottant{display:none}}

/* Mobile : la sidebar devient un tiroir */
@media (max-width:900px){
  body.avec-layout{margin-left:0}
  #sidebar{transform:translateX(-100%)}
  body.menu-ouvert #sidebar{transform:none}
  body.menu-ouvert #overlay{display:block}
  #topbar{display:flex}
  .recherche{top:52px}
}