/*
Theme Name: Purple
Theme URI: https://purple.example
Author: Purple
Author URI: https://purple.example
Description: Thème moderne pour le restaurant Purple — carte en ligne, design premium violet/or, compatible WooCommerce (panier réel + paiement Stripe) et gestion du menu depuis les Produits.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purple
Tags: restaurant, woocommerce, food, custom-menu, e-commerce
WC requires at least: 7.0
WC tested up to: 9.0
*/

:root{
  --purple:#a06bff;
  --purple-2:#7b3ff2;
  --purple-deep:#2a1247;
  --gold:#e0b15f;
  --ink:#0b0710;
  --ink-soft:#15101f;
  --muted:#8b8696;
  --line:rgba(20,12,30,.08);
  --line-strong:rgba(20,12,30,.14);
  --bg:#f6f3fb;
  --bg-2:#efeaf7;
  --card:#ffffff;
  --white:#fff;
  --grad-purple:linear-gradient(135deg,#a06bff 0%,#7b3ff2 100%);
  --grad-gold:linear-gradient(135deg,#f0d089 0%,#cf9b46 100%);
  --shadow-sm:0 4px 16px rgba(35,18,55,.06);
  --shadow:0 18px 50px rgba(35,18,55,.12);
  --shadow-lg:0 30px 80px rgba(35,18,55,.22);
  --radius:22px;
  --radius-lg:30px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(160,107,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(224,177,95,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,.brand{font-family:"Sora",sans-serif}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:transparent;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:1180px;margin:auto;padding:14px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:1.25rem;letter-spacing:.05em}
.brand-mark{
  width:46px;height:46px;border-radius:16px;
  background:var(--grad-purple);color:#fff;
  display:grid;place-items:center;
  font-family:"Sora",sans-serif;font-weight:800;font-size:1.05rem;
  box-shadow:0 10px 26px rgba(123,63,242,.4);position:relative;overflow:hidden;
}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 50%)}

.nav-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-menu{display:flex;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.nav-menu a{padding:8px 14px;border-radius:999px;font-weight:700;font-size:.92rem;transition:.2s ease}
.nav-menu a:hover{background:rgba(123,63,242,.1);color:var(--purple-2)}
.cart-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--gold);color:#4a330a;font-size:.72rem;font-weight:800;margin-left:6px;
}

/* ---------- Buttons ---------- */
.btn{
  border:0;border-radius:999px;padding:12px 20px;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;font-size:.95rem;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(11,7,16,.25)}
.btn-dark:hover{box-shadow:0 16px 34px rgba(11,7,16,.32)}
.btn-purple{background:var(--grad-purple);color:#fff;box-shadow:0 10px 26px rgba(123,63,242,.36)}
.btn-purple:hover{box-shadow:0 16px 38px rgba(123,63,242,.46)}
.btn-gold{background:var(--grad-gold);color:#4a330a;box-shadow:0 10px 24px rgba(207,155,70,.32)}
.btn-light{background:#fff;color:#1a1322;border:1px solid var(--line-strong)}
.btn-light:hover{border-color:var(--purple)}
.btn-full{width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 20% 10%, rgba(160,107,255,.5), transparent 35%),
    radial-gradient(circle at 85% 30%, rgba(224,177,95,.32), transparent 38%),
    radial-gradient(circle at 60% 90%, rgba(123,63,242,.35), transparent 45%),
    linear-gradient(150deg,#0b0712 0%,#241040 55%,#0b0712 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);
  mask-image:linear-gradient(180deg,#000,transparent 80%);opacity:.6;
}
.hero-inner{
  position:relative;max-width:1180px;margin:auto;padding:84px 22px 64px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}
.badge{
  display:inline-flex;gap:9px;align-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);padding:9px 15px;border-radius:999px;
  color:#f3e9ff;font-weight:600;font-size:.9rem;margin-bottom:22px;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 4px rgba(124,255,178,.18)}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.96;margin:0 0 22px;letter-spacing:-.04em;font-weight:800}
.hero h1 .grad{background:linear-gradient(120deg,#c6a6ff,#e0b15f);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero p{max-width:560px;color:#d9d0e6;font-size:1.12rem;line-height:1.65;margin:0 0 28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stat .num{font-family:"Sora";font-weight:800;font-size:1.7rem}
.stat .lbl{color:#b4a8c6;font-size:.82rem;margin-top:2px}

.hero-card{position:relative;justify-self:end}
.hero-card::before{content:"";position:absolute;inset:-30px;background:var(--grad-purple);filter:blur(60px);opacity:.35;border-radius:50%;z-index:0}
.phone{
  position:relative;z-index:1;background:#fff;color:#15101f;border-radius:36px;overflow:hidden;
  max-width:380px;box-shadow:var(--shadow-lg);border:8px solid #18101f;
}
.phone-head{padding:18px;text-align:center;font-family:"Sora";font-weight:800;letter-spacing:.04em;background:linear-gradient(180deg,#faf7ff,#fff);border-bottom:1px solid var(--line)}
.phone-tabs{display:flex;gap:8px;overflow:auto;padding:13px 16px;font-weight:700;font-size:.85rem;white-space:nowrap;border-bottom:1px solid var(--line)}
.phone-tabs span{padding:7px 13px;border-radius:999px;color:var(--muted)}
.phone-tabs span:first-child{background:var(--grad-purple);color:#fff}
.phone-item{display:grid;grid-template-columns:1fr 78px;gap:14px;padding:16px;border-bottom:1px solid var(--line);align-items:center}
.mini-title{font-weight:700;font-size:.98rem}
.mini-desc{color:var(--muted);font-size:.82rem;margin-top:5px;line-height:1.4}
.mini-price{font-weight:800;margin-top:5px;color:var(--purple-2)}
.mini-img{width:78px;height:78px;border-radius:18px;background:linear-gradient(135deg,#f3ebff,#e6d6ff);display:grid;place-items:center;font-size:1.9rem;box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- Containers / sections ---------- */
.container{max-width:1180px;margin:auto;padding:0 22px}
.section{padding:54px 0}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-title .eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-2);margin-bottom:10px}
.section h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1;margin:0;letter-spacing:-.03em;font-weight:800;color: #FFD700;}
.section-title p{color:var(--muted);max-width:480px;line-height:1.55;margin:0;font-size:.98rem}

/* ---------- Category nav ---------- */
.category-nav{position:sticky;top:75px;z-index:20;background:rgba(246,243,251,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.category-scroll{max-width:1180px;margin:auto;padding:12px 22px;display:flex;gap:9px;overflow:auto;white-space:nowrap;scrollbar-width:none}
.category-scroll::-webkit-scrollbar{display:none}
.category-scroll a{background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:9px 16px;font-weight:700;font-size:.9rem;transition:.2s ease}
.category-scroll a:hover{background:var(--grad-purple);color:#fff;border-color:transparent;transform:translateY(-1px)}
.category-scroll a.active{background:var(--grad-purple);color:#fff;border-color:transparent;transform:translateY(-1px)}

/* ---------- Menu grid ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dish{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  box-shadow:var(--shadow-sm);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;overflow:hidden;
}
.dish::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-purple);opacity:0;transition:opacity .25s ease}
.dish:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.dish:hover::before{opacity:1}
.dish h3{margin:0 0 8px;font-size:1.12rem;letter-spacing:-.01em;font-weight:700}
.dish p{margin:0;color:var(--muted);line-height:1.5;font-size:.92rem}
.dish .dish-thumb{width:84px;height:84px;border-radius:16px;object-fit:cover;margin-bottom:12px}
.price{margin-top:12px;font-size:1.05rem;font-weight:800;color:var(--purple-2)}
.price del{color:var(--muted);font-weight:600;margin-right:8px}

.add,a.add{
  width:48px;height:48px;border-radius:16px;border:0;background:var(--ink);color:#fff;
  font-size:1.5rem;line-height:48px;text-align:center;cursor:pointer;text-decoration:none;
  box-shadow:0 12px 26px rgba(11,7,16,.2);transition:transform .2s ease, background .2s ease;
}
.add:hover,a.add:hover{background:var(--purple-2);transform:scale(1.08) rotate(90deg)}
.add:active{transform:scale(.95)}
.add.loading{opacity:.6;pointer-events:none}
.add.added{background:#22a06b}

/* ---------- Order box ---------- */
.order-box{
  position:relative;background:linear-gradient(135deg,#fff 0%,#f4ecff 100%);
  border:1px solid #e7daff;border-radius:var(--radius-lg);padding:32px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;box-shadow:var(--shadow);overflow:hidden;
}
.order-box::after{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;background:var(--grad-purple);filter:blur(70px);opacity:.22;border-radius:50%}
.order-box > div{position:relative;z-index:1}
.order-box h2{font-size:1.9rem;margin:0 0 12px;letter-spacing:-.02em}
.cart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.cart h3{margin:0 0 8px;font-size:1.2rem}
.cart-line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;color:#3a3346;font-size:.95rem}
.cart-total{display:flex;justify-content:space-between;gap:12px;padding-top:16px;font-size:1.3rem;font-weight:800;font-family:"Sora"}
#cartTotal{color:var(--purple-2)}
.delivery-buttons{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
.note{font-size:.88rem;color:var(--muted);margin-top:14px;line-height:1.55}

/* ---------- Admin / setup notice ---------- */
.purple-notice{max-width:1180px;margin:24px auto;padding:18px 22px;border-radius:var(--radius);background:#fff;border:1px dashed var(--purple);color:var(--ink);box-shadow:var(--shadow-sm)}
.purple-notice strong{color:var(--purple-2)}

/* ---------- Footer ---------- */
.footer{position:relative;background:linear-gradient(150deg,#0b0712,#241040 70%,#0b0712);color:#fff;padding:48px 22px;text-align:center;margin-top:54px;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%, rgba(160,107,255,.3), transparent 55%)}
.footer-brand{position:relative;font-family:"Sora";font-weight:800;font-size:1.6rem;letter-spacing:.08em;background:linear-gradient(120deg,#c6a6ff,#e0b15f);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer .tag{position:relative;color:#c3b6d6;margin-top:8px}
.footer .credits{position:relative;color:#7a6e90;margin-top:18px;font-size:.82rem}

/* ---------- WooCommerce overrides ---------- */
.woocommerce .container{padding-top:20px}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--grad-purple);color:#fff;border-radius:999px;font-weight:700;
  padding:12px 22px;box-shadow:0 10px 26px rgba(123,63,242,.36);border:0;transition:transform .2s ease;
}
.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px);background:var(--grad-purple)}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info{border-top-color:var(--purple)}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{color:var(--purple)}
.woocommerce-page h1,.woocommerce-page h2{font-family:"Sora"}

/* Animations */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.bump{animation:pop .35s ease}

@media(max-width:850px){
  .hero-inner{grid-template-columns:1fr;padding-top:56px}
  .hero-card{justify-self:stretch}
  .phone{margin:0 auto;max-width:100%}
  .menu-grid{grid-template-columns:1fr}
  .order-box{grid-template-columns:1fr;padding:24px}
  .section-title{display:block}
  .section-title p{margin-top:12px}
  .delivery-buttons{grid-template-columns:1fr}
  .nav-menu{display:none}
}


/* =========================================
   MOBILE IMPROVEMENTS
   ========================================= */

@media (max-width: 480px) {
  .nav { padding: 10px 16px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: 1rem; gap: 9px; flex-shrink: 0; }
  .brand-mark { width: 36px; height: 36px; border-radius: 12px; font-size: .88rem; }
  /* .nav-actions managed by mobile burger menu */
  .btn { padding: 9px 14px; font-size: .82rem; gap: 5px; white-space: nowrap; }
  .btn-light { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding: 40px 16px 32px; gap: 28px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1; margin-bottom: 16px; }
  .hero p { font-size: 0.96rem; line-height: 1.6; margin-bottom: 20px; }
  .badge { font-size: .8rem; padding: 7px 12px; gap: 7px; margin-bottom: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 1rem; }
  .hero-stats { gap: 20px; margin-top: 24px; }
  .stat .num { font-size: 1.4rem; }
  .hero-card { display: none; }
  .category-nav { top: 58px; }
  .category-scroll { padding: 10px 14px; gap: 7px; }
  .category-scroll a { padding: 7px 13px; font-size: .82rem; }
  .container { padding: 0 16px; }
  .section { padding: 36px 0; }
  .section h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .menu-grid { grid-template-columns: 1fr; gap: 12px; }
  .dish { padding: 16px; border-radius: 18px; gap: 12px; }
  .dish h3 { font-size: 1rem; margin-bottom: 5px; }
  .dish p { font-size: .87rem; }
  .dish .dish-thumb { width: 70px; height: 70px; border-radius: 14px; }
  .price { font-size: .98rem; margin-top: 8px; }
  .add, a.add { width: 42px; height: 42px; border-radius: 13px; font-size: 1.3rem; line-height: 42px; flex-shrink: 0; }
  .order-box { grid-template-columns: 1fr; padding: 20px 16px; gap: 20px; border-radius: 20px; }
  .order-box h2 { font-size: 1.5rem; }
  .delivery-buttons { grid-template-columns: 1fr; gap: 9px; }
  .footer { padding: 36px 16px; margin-top: 36px; }
  .footer-brand { font-size: 1.3rem; }
}

@media (min-width: 481px) and (max-width: 850px) {
  .nav { padding: 12px 20px; }
  .brand-mark { width: 40px; height: 40px; }
  .hero-inner { grid-template-columns: 1fr; padding: 56px 22px 44px; gap: 32px; }
  .hero h1 { font-size: clamp(2.4rem, 7vw, 3.5rem); }
  .hero-cta .btn { flex: 1 1 auto; min-width: 160px; text-align: center; justify-content: center; }
  .hero-card { display: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .section { padding: 44px 0; }
  .order-box { grid-template-columns: 1fr; gap: 24px; }
}

@media (hover: none) and (pointer: coarse) {
  .dish:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .dish:active { transform: scale(0.99); box-shadow: var(--shadow); }
  .add:hover, a.add:hover { transform: none; background: var(--ink); }
  .add:active, a.add:active { background: var(--purple-2); transform: scale(0.95); }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.97); }
  .category-scroll a:hover { transform: none; }
  .category-scroll a:active { background: var(--grad-purple); color: #fff; }
}

/* === CORRECTIONS SUPPLÉMENTAIRES MOBILE === */
@media (max-width: 480px) {
  /* Badge - permettre le retour à la ligne */
  .badge {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
    justify-content: center;
  }

  /* Hero title - s'assurer qu'il ne déborde pas */
  .hero h1 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Textes hero - pas de débordement */
  .hero p {
    overflow-wrap: break-word;
  }

  /* Section title compact */
  .section-title {
    margin-bottom: 18px;
    gap: 12px;
  }

  /* Stats row - 3 items bien espacés */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    text-align: center;
  }

  .stat {
    border-right: 1px solid rgba(255,255,255,0.15);
    padding: 0 8px;
  }

  .stat:last-child {
    border-right: none;
  }



  /* Titre de section eyebrow */
  .section-title .eyebrow {
    font-size: .7rem;
  }

  /* Dish sans image - texte pleine largeur */
  .dish:not(:has(.dish-thumb)) {
    grid-template-columns: 1fr auto;
  }

  /* Commande box - titre ajusté */
  .order-box h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }

  /* Cart styles */
  .cart {
    padding: 16px;
  }

  .cart h3 {
    font-size: 1.05rem;
  }

  .cart-line {
    font-size: .88rem;
    padding: 10px 0;
  }

  .cart-total {
    font-size: 1.15rem;
  }

  /* Note text */
  .note {
    font-size: .82rem;
  }
}

/* === PATCH BADGE ET OVERFLOW === */
@media (max-width: 480px) {
  /* Héro - pas de débordement horizontal */
  .hero {
    overflow-x: hidden;
  }

  /* Badge centré et limité */
  .badge {
    max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    word-break: break-word;
  }

  /* Hero inner - pas de débordement */
  .hero-inner {
    overflow-x: hidden;
  }

  /* Textes longs dans dish */
  .dish h3, .dish p {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* =========================================
   LOGO CUSTOM DANS LE HEADER
   ========================================= */

/* Logo custom WordPress — taille dans le header */
.brand .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

.brand .custom-logo-link img,
.brand img.custom-logo {
  height: 46px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(123, 63, 242, 0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.brand .custom-logo-link:hover img {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(123, 63, 242, 0.5);
}

/* Sur mobile : logo légèrement plus petit */
@media (max-width: 480px) {
  .brand .custom-logo-link img,
  .brand img.custom-logo {
    height: 38px;
    max-width: 130px;
  }
}
/* =========================================
   LOGO CUSTOM DANS LE HEADER
   ========================================= */

/* Conteneur brand avec logo */
.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Lien du logo custom généré par WordPress */
.brand-logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

/* Image du logo : taille contrôlée */
.brand-logo .custom-logo-link img.custom-logo {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(123, 63, 242, 0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.brand-logo .custom-logo-link:hover img.custom-logo {
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(123, 63, 242, 0.5);
}

/* Mobile */
@media (max-width: 480px) {
  .brand-logo .custom-logo-link img.custom-logo {
    height: 38px;
    max-width: 140px;
  }
}

/* =========================================
   CARTE PRODUIT AVEC IMAGE PLEINE LARGEUR
   ========================================= */

/* Carte "hero" : produit avec image en fond plein format */
.dish--hero {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 450px;
  border-radius: 20px;
  border: none;
  background: var(--ink);
}

/* Image de fond pleine largeur */
.dish-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dish-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

.dish--hero:hover .dish-bg-img {
  transform: scale(1.04);
}

/* Overlay gradient pour lisibilité du texte */
.dish-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 5, 20, 0.50) 0%,
    rgba(10, 5, 20, 0.30) 50%,
    rgba(10, 5, 20, 0.05) 100%
  );
  z-index: 1;
}

/* Corps de la carte hero : texte + bouton côte à côte */
.dish--hero .dish-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  align-content: end;
  gap: 20px;
  padding: 28px 24px;
  min-height: 450px;
}

/* Zone de texte */
.dish--hero .dish-info h3 {
  color: #fff;
  font-size: 1.25rem;
  margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.dish--hero .dish-info p {
  color: rgba(255,255,255,0.82);
  font-size: .92rem;
  margin: 0 0 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  max-width: 480px;
}

.dish--hero .dish-info .price {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* Bouton + sur carte hero */
.dish--hero .add {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  line-height: 42px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.dish--hero .add:hover {
  background: var(--purple-2);
  border-color: var(--purple);
  transform: scale(1.08) rotate(90deg);
}

/* Cartes normales (sans image) : garder l'ancien style */
.dish:not(.dish--hero) .dish-body {
  display: contents; /* les enfants restent dans le grid parent */
}

.dish:not(.dish--hero) .dish-info {
  display: contents;
}

/* Mobile : la carte hero reste pleine largeur */
@media (max-width: 480px) {
  .dish--hero {
    min-height: 280px;
    border-radius: 18px;
  }

  .dish--hero .dish-body {
    padding: 20px 18px;
    min-height: 280px;
    gap: 14px;
  }

  .dish--hero .dish-info h3 {
    font-size: 1.1rem;
  }

  .dish--hero .dish-info p {
    font-size: .85rem;
  }

  .dish--hero .add {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.4rem;
    line-height: 44px;
  }
}

/* ============================================================
   WOOCOMMERCE PAGES — Lisibilité (checkout, confirmation, panier)
   ============================================================ */

/* Fond clair pour toutes les pages WooCommerce */
.woocommerce-page main,
.woocommerce-checkout main,
.woocommerce-account main,
.woocommerce-order-received main {
  background: #ffffff;
  color: #1a1a2e;
  padding: 2rem 1.5rem;
}

/* Page panier - fond sombre premium */
.woocommerce-cart main {
  background: linear-gradient(160deg, #0d0118 0%, #1a0535 60%, #0d0118 100%);
  color: #ffffff;
  padding: 2rem 1.5rem;
}

/* Conteneur principal WooCommerce */
.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce-order,
.woocommerce-checkout .woocommerce {
  width: 100%;
  margin: 0 auto;
  color: #1a1a2e;
}

/* ---- PAGE DE CONFIRMATION (thank you) ---- */

/* Bandeau de succès */
.woocommerce-notice--success.woocommerce-thankyou-order-received {
  background: #f0faf0;
  border-left: 4px solid #4caf50;
  color: #1a5c1a !important;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Résumé de commande (liste overview) */
.woocommerce-thankyou-order-details,
.woocommerce-order-overview {
  background: #f5f0ff;
  border: 1px solid #d4b8ff;
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 2rem;
}

.woocommerce-order-overview li,
.woocommerce-thankyou-order-details li {
  color: #2a1a4e !important;
  font-size: 0.9rem;
  flex: 1 1 150px;
}

.woocommerce-order-overview li strong,
.woocommerce-thankyou-order-details li strong {
  display: block;
  font-size: 1rem;
  color: #5b2d8e;
  margin-top: 0.2rem;
}

/* Message instructions (espèces/carte) */
.woocommerce-order-details + p,
.woocommerce-order-overview + p {
  background: #fff8e1;
  border-left: 4px solid #e0a800;
  color: #5a3e00 !important;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

/* Tableau des détails de commande */
.woocommerce-table,
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
}

.woocommerce-table th,
.woocommerce-table--order-details th {
  background: #5b2d8e;
  color: #ffffff !important;
  padding: 0.8rem 1rem;
  text-align: left;
  font-size: 0.95rem;
}

.woocommerce-table td,
.woocommerce-table--order-details td {
  color: #1a1a2e !important;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #ece6f5;
  font-size: 0.95rem;
}

.woocommerce-table tfoot tr:last-child td,
.woocommerce-table tfoot tr:last-child th {
  font-weight: 700;
  color: #5b2d8e !important;
  font-size: 1.05rem;
}

/* Titres sections */
.woocommerce-order-details__title,
.woocommerce-column__title {
  color: #5b2d8e !important;
  font-size: 1.3rem;
  margin: 1.5rem 0 0.8rem;
}

/* Adresses */
.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  background: #f9f5ff;
  border: 1px solid #d4b8ff;
  border-radius: 10px;
  padding: 1.2rem;
}

.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address {
  color: #2a1a4e !important;
  font-style: normal;
  line-height: 1.6;
}

/* ---- PAGE CHECKOUT ---- */

/* Titres de sections checkout */
.woocommerce-checkout h3,
.woocommerce-checkout h2 {
  color: #5b2d8e !important;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #d4b8ff;
}

/* Labels */
.woocommerce-checkout label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
  color: #2a1a4e !important;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Champs de saisie */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border: 1.5px solid #c4a8f0;
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: #5b2d8e;
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,45,142,0.15);
}

/* Options de livraison */
.woocommerce-shipping-methods,
.shipping-methods {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.woocommerce-shipping-methods li,
.shipping-methods li {
  color: #2a1a4e !important;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

/* Options de paiement */
.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
}

.wc_payment_methods li {
  background: #f5f0ff;
  border: 1.5px solid #d4b8ff;
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 0.5rem;
  color: #2a1a4e !important;
}

.wc_payment_methods .payment_method_cod label,
.payment_box p {
  color: #2a1a4e !important;
  font-size: 0.95rem;
}

.payment_box {
  background: #fff8f0;
  border-left: 3px solid #e0a800;
  border-radius: 0 6px 6px 0;
  padding: 0.7rem 1rem;
  margin-top: 0.5rem;
  color: #5a3e00 !important;
  font-size: 0.9rem;
}

/* Bouton Commander */
#place_order,
.woocommerce-checkout .checkout-button {
  background: #5b2d8e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.9rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.2s !important;
}

#place_order:hover,
.woocommerce-checkout .checkout-button:hover {
  background: #7c3db5 !important;
}

/* Notice de validation */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  color: #1a1a2e !important;
  padding: 0.8rem 1.2rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* Résumé panier dans le checkout */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  background: #faf7ff;
  border-radius: 8px;
  overflow: hidden;
}

.woocommerce-checkout-review-order-table th {
  background: #5b2d8e;
  color: #ffffff !important;
  padding: 0.7rem 1rem;
}

.woocommerce-checkout-review-order-table td {
  color: #1a1a2e !important;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #ece6f5;
}

/* Texte des conditions */
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-terms-and-conditions-wrapper label {
  color: #4a4a6a !important;
  font-size: 0.85rem;
}

/* Note de commande */
.woocommerce-additional-fields h3,
.woocommerce-additional-fields label {
  color: #2a1a4e !important;
}

/* ---- PAGE MENTIONS LEGALES — wrapper ---- */
.page-id-71 main,
.page main:has(.purple-legal-page) {
  background: transparent;
  padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
  .woocommerce-order-overview {
    flex-direction: column;
  }
}

/* Bouton Commander (bloc WooCommerce) */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  background: #5b2d8e !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.9rem 2rem !important;
  transition: background 0.2s !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: #7c3db5 !important;
}

/* Résumé panier dans le checkout (bloc WC) */
.wc-block-cart-item__product-name a,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: #1a1a2e !important;
}

.wp-block-woocommerce-checkout-totals-block {
  color: #1a1a2e;
}

/* Champs checkout (bloc WC) */
.wc-block-components-text-input input,
.wc-block-components-select select {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border-color: #c4a8f0 !important;
}

/* Labels checkout blocs */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  color: #2a1a4e !important;
}

/* Options livraison et paiement (blocs WC) */
.wc-block-components-radio-control-accordion-option {
  background: #f9f5ff !important;
  border: 1.5px solid #d4b8ff !important;
  border-radius: 8px !important;
  margin-bottom: 0.5rem !important;
  color: #2a1a4e !important;
}

.wc-block-components-radio-control__input,
.wc-block-components-radio-control-accordion-content p {
  color: #2a1a4e !important;
}

/* Titre sections checkout */
.wp-block-woocommerce-checkout-shipping-address-block h2,
.wp-block-woocommerce-checkout-contact-information-block h2,
.wp-block-woocommerce-checkout-payment-block h2,
.wp-block-woocommerce-checkout-shipping-methods-block h2 {
  color: #5b2d8e !important;
  border-bottom: 2px solid #d4b8ff;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* ============================================================
   MOBILE NAVIGATION — Hamburger menu (v2 - fixed specificity)
   ============================================================ */

/* Burger button — hidden on desktop */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  background: rgba(160,107,255,.15);
  border: 1.5px solid rgba(160,107,255,.3);
  cursor: pointer;
  border-radius: 10px;
  transition: background .2s;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-burger:hover, .nav-burger:focus { background: rgba(160,107,255,.3); outline: none; }
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 850px) {
  /* Show burger */
  .nav-burger { display: flex !important; }

  /* Hide nav-actions by default */
  .nav-actions {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #160b2a !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 16px 20px !important;
    gap: 6px !important;
    border-top: 1px solid rgba(160,107,255,.25) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
    z-index: 1000 !important;
  }

  /* Show when open */
  .nav-actions.is-open {
    display: flex !important;
  }

  /* Nav menu items full width */
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    margin-bottom: 8px !important;
  }
  .nav-menu li { width: 100%; }
  .nav-menu a {
    display: block !important;
    padding: 13px 16px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  .nav-menu a:hover { background: rgba(160,107,255,.2) !important; }

  /* Buttons full width in dropdown */
  .nav-actions .btn-light,
  .nav-actions .btn-purple {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 13px 20px !important;
    font-size: .97rem !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
  }
  .nav-actions .btn-light { display: block !important; }

  /* topbar needs position relative for absolute dropdown */
  .topbar { position: sticky !important; top: 0 !important; z-index: 100 !important; width: 100% !important; }
}


/* ============================================================
   DELIVERY LINKS (Uber Eats / Deliveroo) + Mon compte
   ============================================================ */

/* Delivery links row */
.nav-delivery-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-delivery-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  white-space: nowrap;
}
.nav-delivery-btn:hover { opacity: .85; transform: translateY(-1px); }
.nav-delivery-btn svg { flex-shrink: 0; }

/* Uber Eats — black */
.nav-ubereats {
  background: #06C167;
  color: #fff;
}

/* Deliveroo — teal */
.nav-deliveroo {
  background: #00CCBC;
  color: #fff;
}

/* Mon compte button */
.btn-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(160,107,255,.15);
  border: 1.5px solid rgba(160,107,255,.4);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.btn-account:hover { background: rgba(160,107,255,.3); color: #fff; }
.btn-account svg { flex-shrink: 0; }
.account-label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

/* Hide delivery links text label on small desktop, show icon only */
@media (max-width: 1100px) and (min-width: 851px) {
  .nav-delivery-btn span,
  .nav-delivery-btn { font-size: 0; padding: 8px; }
  .nav-delivery-btn svg { width: 18px; height: 18px; }
}

/* Mobile: delivery links full width in dropdown */
@media (max-width: 850px) {
  .nav-delivery-links {
    flex-direction: column;
    width: 100%;
    gap: 6px;
    margin-bottom: 6px;
  }
  .nav-delivery-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
    font-size: .97rem;
    border-radius: 10px;
  }
  .btn-account {
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
    font-size: .97rem;
    border-radius: 10px;
  }
}


/* ============================================================
   FOOTER DELIVERY LINKS
   ============================================================ */
.footer-delivery {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
.footer-delivery-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}
.footer-delivery-btn:hover { opacity: .85; transform: translateY(-2px); }
.footer-ubereats { background: #06C167; color: #fff; }
.footer-deliveroo { background: #00CCBC; color: #fff; }