:root{
  --bg:#fff7f7;
  --card:#ffffff;
  --accent:#b71c1c;
  --accent-2:#d32f2f;
  --text:#222;
  --muted:#666;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;}
.container{max-width:1100px;margin:0 auto;padding:16px;}
.row{display:flex;gap:16px;}
.between{justify-content:space-between}
.brand { text-decoration: none; }
.center{align-items:center}
.site-header{position:sticky;top:0;background:linear-gradient(90deg,#fff0f0,#ffffff);border-bottom:1px solid #f0dede;backdrop-filter:saturate(120%) blur(8px);z-index:10}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--accent)}
.logo{width:36px;height:36px;border-radius:50%;box-shadow:var(--shadow);object-fit:cover}
.nav a{margin:0 8px;text-decoration:none;color:var(--text);font-weight:600}
.nav a.btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:10px;box-shadow:var(--shadow)}
.user-menu{display:flex;gap:10px;align-items:center}
.user-menu summary{cursor:pointer;font-weight:600}
.card{background:var(--card);border:1px solid #f2e3e3;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.product .image{border-radius:12px;height:160px;background:#fff4f4 url('../img/placeholder_meat.jpg') center/cover no-repeat;margin-bottom:10px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;border:none;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);cursor:pointer}
.btn.secondary{background:#222}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.input, select, textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #eed3d3;background:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px dashed #f0d0d0;text-align:left}
.badge{display:inline-block;background:#ffe4e4;border:1px solid #f7c2c2;padding:3px 8px;border-radius:999px;font-size:12px}
.price{font-weight:800;color:var(--accent-2)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin:24px 0}
.hero .card{padding:24px}
.hero h1{margin:0;font-size:36px}
.site-footer{margin-top:40px;padding:16px;border-top:1px solid #f0dede;background:#fff}
.alert{padding:10px;border-radius:12px;margin:8px 0}
.alert.ok{background:#e7f7e7;border:1px solid #b7e1b7}
.alert.err{background:#fde7e7;border:1px solid #f3bcbc}
form .row{flex-wrap:wrap}
@media (max-width: 800px){
  .hero{grid-template-columns:1fr}
}

/* ===== User menu ===== */
.user-menu{display:flex; align-items:center; gap:12px; position:relative}
.user-menu .email{font-size:.95rem; color:#333}
.user-menu details{position:relative}
.user-menu summary{list-style:none}
.user-menu summary::-webkit-details-marker{display:none}
.user-btn{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:#fff; border:1px solid #eee; cursor:pointer}
.user-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.user-btn .avatar{width:26px; height:26px; border-radius:50%; background:#b71c1c; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700}
.user-btn .chev{opacity:.7; transition:transform .15s ease}
.user-menu details[open] .user-btn .chev{transform:rotate(180deg)}

.user-menu .dropdown{
  position:absolute; right:0; top:110%;
  min-width:200px;
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px; z-index:50;
}
.user-menu .dropdown a{
  display:block; padding:10px 12px; border-radius:8px; color:#222; text-decoration:none;
}
.user-menu .dropdown a:hover{background:#f8f8f8}

/* Option: serre un peu la nav sur desktop */
.nav{display:flex; gap:18px; align-items:center}

/* ===== User menu ===== */
.user-menu{display:flex; align-items:center; gap:12px; position:relative}
.user-menu .email{font-size:.95rem; color:#333}
.user-menu details{position:relative}
.user-menu summary{list-style:none}
.user-menu summary::-webkit-details-marker{display:none}
.user-btn{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:#fff; border:1px solid #eee; cursor:pointer}
.user-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.user-btn .avatar{width:26px; height:26px; border-radius:50%; background:#b71c1c; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700}
.user-btn .chev{opacity:.7; transition:transform .15s ease}
.user-menu details[open] .user-btn .chev{transform:rotate(180deg)}
.user-menu .dropdown{
  position:absolute; right:0; top:110%;
  min-width:200px;
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:8px; z-index:50;
}
.user-menu .dropdown a{display:block; padding:10px 12px; border-radius:8px; color:#222; text-decoration:none;}
.user-menu .dropdown a:hover{background:#f8f8f8}
.nav{display:flex; gap:18px; align-items:center}

/* Badge compteur panier */
.nav a { position: relative; }
.badge-count{
  display:inline-block; min-width:18px; height:18px; line-height:18px;
  padding:0 6px; border-radius:999px;
  background:#b71c1c; color:#fff; font-size:.75rem; font-weight:700;
  text-align:center; margin-left:6px; vertical-align:middle;
}
.badge-pop{ animation: pop .35s ease; }
@keyframes pop{ 0%{ transform:scale(.7); } 70%{ transform:scale(1.15);} 100%{ transform:scale(1);} }

/* Alerts */
.alert{padding:10px 12px;border-radius:10px;border:1px solid #eee;background:#fff;font-size:.95rem;margin:10px 0}
.alert.ok{border-color:#c6f6d5;background:#f0fff4;color:#1a7f37}
.alert.err{border-color:#fed7d7;background:#fff5f5;color:#b91c1c}

/* === Admin product form (clean UI) === */
.admin-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.admin-form .field{display:flex; flex-direction:column; gap:6px;}
.admin-form .full{grid-column:1 / -1;}
.admin-form label{font-size:.9rem; font-weight:600; opacity:.9;}
.admin-form .hint{font-size:.8rem; opacity:.65;}
.admin-form .checkline{display:flex; align-items:center; gap:.5rem; font-weight:500;}
.admin-form .preview{
  background:#fafafa; border:1px solid #eee; border-radius:12px;
  padding:12px; min-height:120px; display:flex; align-items:center; justify-content:center;
}
.admin-form .preview img{
  max-width: 100%; height:auto; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.admin-form .preview .noimg{color:#888; font-size:.9rem;}
.admin-form .actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:4px;
}

/* Inputs full width */
.admin-form .input{width:100%;}
@media (max-width: 820px){
  .admin-form{grid-template-columns: 1fr;}
}