/*
Theme Name: ArtizBoard
Theme URI: https://artizboard.tg
Description: Thème WordPress pour établissements de restauration et boutique — connecté à Supabase.
Version: 1.0
Author: ArtizBoard
License: MIT
Text Domain: artizboard
*/

/* === DESIGN TOKENS (M3 + Fibonacci) === */
:root {
  --primary: #1565C0;
  --on-primary: #FFFFFF;
  --primary-container: #BBDEFB;
  --primary-dark: #0D47A1;
  --secondary: #00897B;
  --secondary-container: #B2DFDB;
  --accent: #E65100;
  --accent-container: #FFCC80;
  --surface: #F5F7FA;
  --surface-variant: #E8EAF6;
  --background: #F5F7FA;
  --outline: #546E7A;
  --outline-variant: #B0BEC5;
  --text-strong: #1B1B1F;
  --text-soft: #455A64;
  --text-disabled: #90A4AE;
  --error: #C62828;
  --error-container: #FFCDD2;
  --success: #2E7D32;
  --success-container: #C8E6C9;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 52px;
  --space-xxl: 84px;

  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 9999px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-display: 2.25rem;
  --fs-headline: 1.5rem;
  --fs-title: 1.25rem;
  --fs-body: 0.875rem;
  --fs-label: 0.75rem;
  --fs-small: 0.6875rem;
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--text-strong);background:var(--background);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* === LAYOUT === */
.container{max-width:960px;margin:0 auto;padding:0 var(--space-md)}
.section{padding:var(--space-lg) 0}
.section-title{font-size:var(--fs-headline);font-weight:var(--fw-bold);margin-bottom:var(--space-md);color:var(--text-strong)}
.page-content{min-height:80vh;padding:var(--space-lg) 0}

/* === NAVIGATION === */
.nav{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--outline-variant)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);max-width:960px;margin:0 auto}
.nav-brand{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:var(--space-xs)}
.nav-brand img{width:36px;height:36px;border-radius:var(--shape-sm)}
.nav-links{display:flex;gap:var(--space-xs);align-items:center}
.nav-link{padding:var(--space-sm) var(--space-md);border-radius:var(--shape-full);text-decoration:none;color:var(--text-soft);font-size:var(--fs-label);font-weight:var(--fw-medium);border:none;background:none;cursor:pointer;transition:background 0.2s}
.nav-link:hover,.nav-link.active{background:var(--primary-container);color:var(--primary)}
.nav-cart{position:relative}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:white;font-size:var(--fs-small);padding:1px 6px;border-radius:var(--shape-full);min-width:18px;text-align:center;font-weight:var(--fw-bold)}
.cart-badge.hidden{display:none}

/* === HERO === */
.hero{background:linear-gradient(135deg,var(--primary)0%,var(--primary-dark)100%);color:var(--on-primary);padding:var(--space-xl)var(--space-md);text-align:center}
.hero-title{font-size:var(--fs-display);font-weight:var(--fw-bold);margin-bottom:var(--space-sm)}
.hero-subtitle{font-size:var(--fs-title);opacity:.85;margin-bottom:var(--space-lg);max-width:600px;margin-left:auto;margin-right:auto}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm)var(--space-md);border-radius:var(--shape-full);font-family:var(--font);font-size:var(--fs-label);font-weight:var(--fw-bold);cursor:pointer;border:none;text-decoration:none;transition:all .2s;line-height:1}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary-container)}
.btn-icon{background:none;border:none;cursor:pointer;font-size:1.25rem;color:var(--text-soft)}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:default}

/* === CARDS === */
.card{background:var(--surface);border-radius:var(--shape-md);overflow:hidden;border:1px solid var(--outline-variant);transition:box-shadow .2s}
.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.card-body{padding:var(--space-md)}
.card-title{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:var(--space-xxs)}
.card-price{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--primary)}

/* === PRODUCT GRID === */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-md)}
.product-card{display:flex;padding:var(--space-md);gap:var(--space-md);align-items:center;background:var(--surface);border-radius:var(--shape-md);border:1px solid var(--outline-variant);cursor:pointer;transition:all .15s}
.product-card:hover{background:var(--primary-container)}
.product-card.in-cart{background:var(--primary-container);border-color:var(--primary)}
.product-image{width:64px;height:64px;border-radius:var(--shape-sm);object-fit:cover;background:var(--surface-variant);flex-shrink:0}
.product-info{flex:1;min-width:0}
.product-name{font-weight:var(--fw-bold);font-size:var(--fs-body);margin-bottom:2px}
.product-desc{font-size:var(--fs-small);color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{font-size:var(--fs-title);font-weight:var(--fw-bold);color:var(--primary)}
.product-actions{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}
.qty-btn{width:28px;height:28px;border-radius:var(--shape-full);border:1px solid var(--primary);background:none;color:var(--primary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-btn:hover{background:var(--primary-container)}
.qty-value{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--primary);min-width:20px;text-align:center}

/* === CATEGORIES LIST === */
.cat-list{display:flex;flex-direction:column}
.cat-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);border-bottom:1px solid var(--outline-variant);cursor:pointer;transition:background .2s}
.cat-item:hover{background:var(--primary-container)}
.cat-item-name{font-size:var(--fs-title);font-weight:var(--fw-bold)}
.cat-item-count{font-size:var(--fs-label);color:var(--text-soft);background:var(--surface-variant);padding:2px 10px;border-radius:var(--shape-full)}

/* === CART DRAWER === */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.drawer{position:fixed;right:0;top:0;bottom:0;width:380px;max-width:90vw;background:var(--surface);z-index:201;display:flex;flex-direction:column;box-shadow:-4px 0 20px rgba(0,0,0,.15)}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);border-bottom:1px solid var(--outline-variant)}
.drawer-header h2{font-size:var(--fs-title);font-weight:var(--fw-bold)}
.drawer-body{flex:1;overflow-y:auto;padding:var(--space-md)}
.drawer-footer{padding:var(--space-md);border-top:1px solid var(--outline-variant)}
.cart-total{display:flex;justify-content:space-between;font-weight:var(--fw-bold);margin-bottom:var(--space-sm);font-size:var(--fs-title)}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm)0;border-bottom:1px solid var(--surface-variant)}
.cart-item-remove{font-size:1.25rem;color:var(--error);cursor:pointer;background:none;border:none;padding:4px}

/* === PAGES SUB-NAV === */
.page-subnav{display:flex;gap:0;overflow-x:auto;border-bottom:2px solid var(--outline-variant);margin-bottom:var(--space-lg)}
.page-tab{padding:var(--space-sm)var(--space-md);font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-soft);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-2px;white-space:nowrap}
.page-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

/* === FAQ === */
.faq-item{background:var(--surface);border-radius:var(--shape-sm);padding:var(--space-md);margin-bottom:var(--space-sm);border-left:3px solid var(--primary)}
.faq-question{font-weight:var(--fw-bold);font-size:var(--fs-body);margin-bottom:var(--space-xxs)}
.faq-answer{font-size:var(--fs-label);color:var(--text-soft)}

/* === CONTACT === */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}
.contact-card{background:var(--surface);border-radius:var(--shape-md);padding:var(--space-md);text-align:center;border:1px solid var(--outline-variant)}
.contact-icon{font-size:2rem;margin-bottom:var(--space-xs)}
.contact-card h3{font-size:var(--fs-body);font-weight:var(--fw-bold);margin-bottom:4px}
.contact-card p{font-size:var(--fs-label);color:var(--text-soft)}
.hours-table{width:100%;border-collapse:collapse}
.hours-table td{padding:var(--space-sm);border-bottom:1px solid var(--outline-variant);font-size:var(--fs-body)}
.hours-table td:first-child{font-weight:var(--fw-bold)}
.hours-table td:last-child{text-align:right;color:var(--text-soft)}

/* === FOOTER === */
.footer{background:var(--surface);border-top:1px solid var(--outline-variant);padding:var(--space-lg)var(--space-md);text-align:center;font-size:var(--fs-label);color:var(--text-soft)}

/* === TOAST === */
.toast{position:fixed;bottom:var(--space-md);left:50%;transform:translateX(-50%);background:var(--text-strong);color:white;padding:var(--space-sm)var(--space-md);border-radius:var(--shape-full);font-size:var(--fs-label);z-index:300;box-shadow:0 4px 12px rgba(0,0,0,.3);animation:toast-in .3s ease}
.toast.success{background:var(--success)}
.toast.error{background:var(--error)}
.toast.hidden{display:none}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%)translateY(10px)}to{opacity:1;transform:translateX(-50%)translateY(0)}}

/* === HTML CONTENT (Pages établissement) === */
.html-content{line-height:var(--lh-normal);font-size:var(--fs-body);color:var(--text-soft)}
.html-content h2{font-size:var(--fs-headline);font-weight:var(--fw-bold);color:var(--text-strong);margin:var(--space-lg)0 var(--space-sm)}
.html-content h3{font-size:var(--fs-title);font-weight:var(--fw-bold);margin:var(--space-md)0 var(--space-xs);color:var(--text-strong)}
.html-content p{margin-bottom:var(--space-md)}
.html-content img{border-radius:var(--shape-sm);margin:var(--space-md)0}
.html-content ul,.html-content ol{padding-left:var(--space-lg);margin-bottom:var(--space-md)}
.html-content li{margin-bottom:var(--space-xxs)}
.html-content strong{color:var(--text-strong)}

/* === UTILS === */
.hidden{display:none!important}
.text-center{text-align:center}
.loading{text-align:center;padding:var(--space-xl);color:var(--text-soft)}
.empty-state{text-align:center;padding:var(--space-xl);color:var(--text-disabled)}
.empty-state-icon{font-size:3rem;margin-bottom:var(--space-sm);opacity:.5}

/* === RESPONSIVE === */
@media(max-width:700px){
  .nav-links{gap:0}
  .nav-link{padding:var(--space-sm);font-size:var(--fs-small)}
  .product-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero{padding:var(--space-lg)var(--space-md)}
  .hero-title{font-size:1.5rem}
  .drawer{width:100vw;max-width:100vw}
}