/* ==========================================================
   RESTO APP — Cuisine béninoise
   Charte graphique (cahier des charges section 6.1)
   Basé sur templatemo-style.css (template Parallo) — surcouche complète
   ========================================================== */

:root{
  --bleu-nuit: #1A1A2E;
  --or: #C9A96E;
  --or-clair: #E3CB97;
  --creme: #FDF8F0;
  --succes: #27AE60;
  --alerte: #E74C3C;
  --anthracite: #2C2C2C;
  --bordeaux: #8B1A1A;

  --font-titres: 'Bebas Neue', 'Impact', sans-serif;
  --font-corps: 'Nunito', 'Inter', sans-serif;
  --font-prix: 'Space Mono', monospace;

  --radius-std: 12px;
  --radius-card: 24px;
  --shadow-soft: 0 4px 20px rgba(26,26,46,0.12);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-corps);
  color: var(--anthracite);
  background: var(--creme);
}
h1,h2,h3,h4,.tm-section-title{
  font-family: var(--font-titres);
  color: var(--bleu-nuit);
}
a{ color: var(--bordeaux); }
a:hover{ color: var(--or); }

/* ---------- Liens d'accès rapide (accessibilité) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background: var(--bleu-nuit); color:#fff; padding:0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Header / Navigation ---------- */
.tm-navbar{ background: rgba(253,248,240,0.97) !important; border-radius: var(--radius-std); }
.navbar-brand-resto{
  display:flex; align-items:center; gap:0.6rem; font-family: var(--font-titres);
  font-size:1.4rem; color: var(--bleu-nuit); font-weight:700;
}
.navbar-brand-resto i{ color: var(--or); font-size:1.6rem; }
.nav-link{ color: var(--anthracite) !important; font-weight:600; }
.nav-link.active, .nav-link:hover{ color: var(--bordeaux) !important; }
.nav-cart-btn{
  position:relative; background: var(--bleu-nuit); color:#fff !important; border-radius: 50px;
  padding: 0.5rem 1.1rem !important; display:flex; align-items:center; gap:0.5rem;
}
.nav-cart-count{
  position:absolute; top:-6px; right:-6px; background: var(--alerte); color:#fff;
  font-size:0.7rem; min-width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ---------- Boutons ---------- */
.btn{ border-radius: var(--radius-std); font-weight:600; padding:0.7rem 1.6rem; transition: all .2s ease; }
.btn-or{ background: var(--or); border-color: var(--or); color: var(--bleu-nuit); }
.btn-or:hover{ background: var(--or-clair); border-color: var(--or-clair); color: var(--bleu-nuit); transform: translateY(-2px); }
.btn-outline-nuit{ border: 2px solid var(--bleu-nuit); color: var(--bleu-nuit); background:transparent; }
.btn-outline-nuit:hover{ background: var(--bleu-nuit); color:#fff; }
.btn-danger-resto{ background: var(--alerte); border-color: var(--alerte); color:#fff; }
.btn-ghost{ background: transparent; border: 1px solid rgba(26,26,46,0.2); color: var(--anthracite); }

/* ---------- Hero ---------- */
.hero-resto{
  min-height: 92vh; display:flex; align-items:center; position:relative;
  background: linear-gradient(180deg, rgba(26,26,46,0.65), rgba(26,26,46,0.85));
}
.hero-resto .tm-slogan{ color: var(--or-clair); letter-spacing:0.18em; font-weight:700; }
.hero-resto h1{ color:#fff; font-size: clamp(2.4rem, 6vw, 4.2rem); }
.hero-resto p.lead{ color: #EDE6D6; max-width: 38em; }
.hero-badges{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-badge{
  background: rgba(253,248,240,0.12); border:1px solid rgba(253,248,240,0.3);
  color:#fff; padding:0.5rem 1rem; border-radius:50px; font-size:0.85rem; display:flex; align-items:center; gap:0.5rem;
}
.hero-badge i{ color: var(--or); }
.opening-status{ font-weight:700; }
.opening-status.ouvert{ color: var(--succes); }
.opening-status.ferme{ color: var(--alerte); }

/* ---------- Cartes produit ---------- */
.plat-card{
  background:#fff; border-radius: var(--radius-card); overflow:hidden;
  box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; height:100%;
}
.plat-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(26,26,46,0.18); }
.plat-card .plat-img-wrap{ position:relative; aspect-ratio: 4/3; overflow:hidden; background:#eee; }
.plat-card .plat-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.plat-card:hover .plat-img-wrap img{ transform: scale(1.07); }
.plat-badge{
  position:absolute; top:12px; left:12px; padding:0.3rem 0.8rem; border-radius:50px;
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
}
.plat-badge.populaire{ background: var(--or); color: var(--bleu-nuit); }
.plat-badge.nouveau{ background: var(--succes); color:#fff; }
.plat-badge.chef{ background: var(--bordeaux); color:#fff; }
.plat-dispo{
  position:absolute; top:12px; right:12px; padding:0.3rem 0.7rem; border-radius:50px;
  font-size:0.7rem; font-weight:700; background:#fff; color: var(--anthracite);
}
.plat-dispo.epuise{ background: var(--alerte); color:#fff; }
.plat-card .body{ padding:1.2rem 1.3rem 1.4rem; }
.plat-card h3{ font-size:1.15rem; margin-bottom:0.3rem; }
.plat-card .desc{ font-size:0.88rem; color:#333; min-height:2.6em; }
.plat-price{ font-family: var(--font-prix); color: var(--bordeaux); font-weight:700; font-size:1.1rem; }
.plat-icons{ display:flex; gap:0.5rem; margin:0.5rem 0; color: var(--or); font-size:0.9rem; }
.btn-add-cart{
  width:42px; height:42px; border-radius:50%; background: var(--bleu-nuit); color:#fff;
  display:flex; align-items:center; justify-content:center; border:none; transition: all .2s;
}
.btn-add-cart:hover{ background: var(--bordeaux); transform: scale(1.1); }
.btn-add-cart.bump{ animation: bump .35s ease; }
@keyframes bump{ 0%{transform:scale(1);} 50%{transform:scale(1.3);} 100%{transform:scale(1);} }

/* ---------- Filtres menu ---------- */
.menu-filters{ background:#fff; border-radius: var(--radius-std); box-shadow: var(--shadow-soft); padding:1.2rem; }
.filter-chip{
  display:inline-flex; align-items:center; gap:0.4rem; padding:0.45rem 1rem; border-radius:50px;
  border:1px solid rgba(26,26,46,0.15); background:#fff; cursor:pointer; font-size:0.85rem; margin:0.2rem;
  transition: all .2s;
}
.filter-chip.active, .filter-chip:hover{ background: var(--bleu-nuit); color:#fff; border-color: var(--bleu-nuit); }

/* ---------- Étoiles ---------- */
.stars{ color: var(--or); letter-spacing:1px; }
.note-text{ color:#888; font-size:0.85rem; }

/* ---------- Promo banner ---------- */
.promo-banner{ background: var(--bordeaux); color:#fff; text-align:center; padding:0.6rem 1rem; font-size:0.9rem; }
.promo-banner .countdown{ font-family: var(--font-prix); font-weight:700; color: var(--or-clair); }

/* ---------- Cartes section / témoignages / infos ---------- */
.section-creme{ background: var(--creme); }
.section-nuit{ background: var(--bleu-nuit); color:#fff; }
.section-nuit h2{ color:#fff; }
.info-card{ background:#fff; border-radius: var(--radius-card); padding:2rem; box-shadow: var(--shadow-soft); height:100%; }
.info-card i{ color: var(--or); font-size:1.8rem; margin-bottom:0.8rem; }
.testimonial-card{ background:#fff; border-radius: var(--radius-card); padding:2rem; box-shadow: var(--shadow-soft); }
.testimonial-card .quote{ font-style:italic; color:#222; }

/* ---------- Formulaires ---------- */
.form-control, .form-select{
  border-radius: var(--radius-std); padding:0.7rem 1rem; border:1px solid rgba(26,26,46,0.18);
}
.form-control:focus, .form-select:focus{
  border-color: var(--or); box-shadow: 0 0 0 3px rgba(201,169,110,0.25);
}
.form-floating > label{ color:#888; }
.invalid-feedback{ color: var(--alerte); font-size:0.85rem; }
.is-invalid{ border-color: var(--alerte) !important; }

/* ---------- Toasts ---------- */
.toast-resto{
  position:fixed; top:90px; right:20px; z-index:3000; min-width:280px;
  background:#fff; border-radius: var(--radius-std); box-shadow: var(--shadow-soft);
  padding:1rem 1.2rem; display:flex; align-items:center; gap:0.8rem; border-left:5px solid var(--succes);
  transform: translateX(120%); transition: transform .3s ease;
}
.toast-resto.show{ transform: translateX(0); }
.toast-resto.error{ border-left-color: var(--alerte); }

/* ---------- Panier flottant ---------- */
.cart-fab{
  position:fixed; bottom:24px; right:90px; z-index:1500; width:60px; height:60px; border-radius:50%;
  background: var(--bordeaux); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow: 0 8px 24px rgba(139,26,26,0.4); border:none;
}
.cart-fab .count{
  position:absolute; top:-4px; right:-4px; background: var(--or); color: var(--bleu-nuit);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:800;
}

/* ---------- Chat widget ---------- */
.chat-fab{
  position:fixed; bottom:24px; left:24px; z-index:1500; width:56px; height:56px; border-radius:50%;
  background: var(--bleu-nuit); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; border:none; box-shadow: var(--shadow-soft);
}

/* ---------- Skeleton loader ---------- */
.skeleton{ background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-std); }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---------- Footer ---------- */
footer.tm-footer{ background: var(--bleu-nuit); color:#cfcfe0; padding:3rem 0 1.5rem; }
footer.tm-footer h5{ color:#fff; font-family: var(--font-titres); }
footer.tm-footer a{ color:#cfcfe0; }
footer.tm-footer a:hover{ color: var(--or); }
.social-icons a{
  display:inline-flex; width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,0.08);
  align-items:center; justify-content:center; margin-right:0.5rem;
}
.social-icons a:hover{ background: var(--or); color: var(--bleu-nuit); }

/* ---------- Admin (dashboard léger) ---------- */
.admin-sidebar{ background: var(--bleu-nuit); min-height:100vh; color:#fff; }
.admin-sidebar a{ color:#cfcfe0; display:block; padding:0.7rem 1.2rem; border-radius:8px; }
.admin-sidebar a.active, .admin-sidebar a:hover{ background: rgba(255,255,255,0.08); color:#fff; }
.kpi-card{ background:#fff; border-radius: var(--radius-std); box-shadow: var(--shadow-soft); padding:1.4rem; }
.kpi-card .value{ font-family: var(--font-prix); font-size:1.8rem; color: var(--bleu-nuit); font-weight:700; }
.kpi-card .label{ color:#888; font-size:0.85rem; }
.status-pill{ padding:0.25rem 0.7rem; border-radius:50px; font-size:0.75rem; font-weight:700; }
.status-pill.recue{ background:#FFF3CD; color:#8a6d00; }
.status-pill.en_preparation{ background:#D6E4FF; color:#0047AB; }
.status-pill.prete{ background:#D4F7DC; color:#1B7B36; }
.status-pill.en_livraison{ background:#E0D6FF; color:#5E2CA5; }
.status-pill.livree{ background:#D4F7DC; color:#1B7B36; }
.status-pill.annulee{ background:#FBD9D9; color:#A11; }

/* ---------- Mode sombre (préférence système) ---------- */
@media (prefers-color-scheme: dark){
  @media (prefers-color-scheme: dark){
  body.theme-auto{ background:#15151f; color:#e8e6f0; }
  body.theme-auto .plat-card, body.theme-auto .info-card, body.theme-auto .testimonial-card{ 
    background:#ffffff; 
    color:#1A1A2E; 
  }
  body.theme-auto .plat-card h3, body.theme-auto .plat-card .desc{ 
    color:#1A1A2E !important; 
  }
}

/* ---------- Responsive (breakpoints du cahier 6.3) ---------- */
@media (max-width: 374px){ .hero-resto h1{ font-size:1.9rem; } }
@media (max-width: 767px){
  .cart-fab{
  position:fixed; bottom:24px; left:24px; z-index:1500; width:60px; height:60px; border-radius:50%;
  background: var(--bordeaux); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow: 0 8px 24px rgba(139,26,26,0.4); border:none;
}
}
@media (min-width: 768px) and (max-width: 1023px){ .plat-card .desc{ min-height:3.6em; } }

/* ---------- Focus visible accessibilité (WCAG 2.1 AA) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--or); outline-offset: 2px;
}