/* =========================
   Zavia Off-Canvas Products
   CSS complet rectifié
   ========================= */

/* Charge la police Rakkas (supprime si déjà chargée par Elementor) */
@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap');

/* ---------- Palette DA (ajuste si besoin) ---------- */
:root{
  --brand-dark: #3a1e08;     /* brun profond */
  --brand-burnt:#b85e1d;     /* orange brûlé */
  --brand-amber:#d6a15f;     /* ambre chaud */
  --brand-green:#4e7d4f;     /* vert courgette */
  --cream-bg:  #fff7ef;      /* fond crème pour le panneau */
  --cream-bd:  #efd8c4;

  --text-on-dark: #ffffff;
  --text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

html.no-scroll{ overflow:hidden; }

/* ---------- Grille ---------- */
.zavia-grid{ display:grid; gap:28px; }
.zavia-grid.zc-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.zavia-grid.zc-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.zavia-grid.zc-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }

/* ---------- Cartes produit (style panneau coloré) ---------- */
.zavia-card{
  position:relative; isolation:isolate;
  border-radius:24px;
  padding:22px 20px 16px;
  min-height: 440px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer;
  color: var(--text-on-dark);
  background: var(--card-bg, linear-gradient(180deg, var(--brand-burnt) 0%, var(--brand-dark) 100%));
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.zavia-card:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,.22); }
.zavia-card:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
}

/* Image parfaitement centrée */
.zavia-card-media{
  width:100%; height:260px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
}
.zavia-card-media img{
  max-width:90%; max-height:100%;
  object-fit:contain; object-position:center;
  display:block; margin:auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Titre / prix / CTA lisibles */
.zavia-card-title{
  font-size:22px; line-height:1.25; font-weight:800;
  margin:6px 0 2px;
  color:var(--text-on-dark); text-shadow:var(--text-shadow);
}
.zavia-card-price{
  color:#ffe2bb; font-weight:700; margin-bottom:8px; text-shadow:var(--text-shadow);
}
.zavia-card-cta{
  margin-top:auto;
  display:inline-block; padding:12px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color:#fff; font-weight:700; text-shadow: var(--text-shadow);
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.zavia-card-cta:hover,
.zavia-card-cta:focus-visible{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.10) inset;
  outline: none;
}
.zavia-card-cta:active{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

/* ---------- Variantes de fond par catégorie ---------- */
.zavia-card.cat-taboules-epicerie{
  --card-bg: linear-gradient(180deg, var(--brand-green) 0%, #2f4c30 100%);
}
.zavia-card.cat-plats-cuisines,
.zavia-card.cat-plats-cuisines-epicerie{
  --card-bg: linear-gradient(180deg, var(--brand-burnt) 0%, var(--brand-dark) 100%);
}
.zavia-card.cat-produits-micro-ondables{
  --card-bg: linear-gradient(180deg, var(--brand-amber) 0%, var(--brand-dark) 100%);
}

/* Fallback couleurs */
.zavia-card:nth-child(3n+1){ --card-bg: linear-gradient(180deg, var(--brand-burnt) 0%, var(--brand-dark) 100%); }
.zavia-card:nth-child(3n+2){ --card-bg: linear-gradient(180deg, var(--brand-green) 0%, #2f4c30 100%); }
.zavia-card:nth-child(3n+3){ --card-bg: linear-gradient(180deg, var(--brand-amber) 0%, var(--brand-dark) 100%); }

/* ---------- Off-canvas ---------- */
#zavia-offcanvas{ position:fixed; inset:0; pointer-events:none; z-index:9999; }
#zavia-offcanvas:before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); opacity:0; transition:opacity .3s ease;
}
#zavia-offcanvas.open{ pointer-events:auto; }
#zavia-offcanvas.open:before{ opacity:1; }

.zavia-oc-inner{
  position:absolute; top:0; right:0; height:100%; width:520px; max-width:100%;
  background: var(--cream-bg);
  transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column; box-shadow:-24px 0 40px rgba(0,0,0,.20);
}
#zavia-offcanvas.open .zavia-oc-inner{ transform:translateX(0); }

/* En-tête: un seul bouton "Retour" (croix masquée) */
.zavia-oc-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px; padding:12px 16px; border-bottom:1px solid var(--cream-bd);
  background: var(--cream-bg);
}
.zavia-oc-close{ display:none !important; }
.zavia-oc-head button{
  background:#f1e1d3; border:1px solid var(--cream-bd);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}

.zavia-oc-body{ padding:16px; overflow:auto; height:100%; }

/* ---------- Skeleton ---------- */
.zavia-skeleton{
  height:200px; border-radius:12px;
  background:linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size:200% 100%; animation:zsk 1.2s infinite linear;
}
@keyframes zsk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- Fiche produit ---------- */
.zavia-pd{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.zavia-pd-gallery img{
  width:100%; height:auto; border-radius:14px;
  max-height:46vh; object-fit:contain;
}
.zavia-pd-title{
  font-size:26px; margin:6px 0;
  color:#2B1A0E;
}
.zavia-pd-price{ color: var(--brand-burnt); font-weight:700; margin-bottom:8px; }
.zavia-pd-attrs{ margin:8px 0 14px; padding-left:18px; list-style:disc; }
.zavia-pd-link{ display:inline-block; margin-top:10px; text-decoration:underline; }

/* Lisibilité panneau */
.zavia-oc-body, .zavia-pd, .zavia-pd-meta{ color:#2B1A0E; }
.zavia-pd a{ color:#8a4b24; }

/* === FIX: headings noirs dans l’off-canvas (écrase le thème) === */
#zavia-offcanvas .zavia-pd h1,
#zavia-offcanvas .zavia-pd h2,
#zavia-offcanvas .zavia-pd h3,
#zavia-offcanvas .zavia-pd h4,
#zavia-offcanvas .zavia-pd h5,
#zavia-offcanvas .zavia-pd h6,
#zavia-offcanvas .zavia-pd-descwrap h1,
#zavia-offcanvas .zavia-pd-descwrap h2,
#zavia-offcanvas .zavia-pd-descwrap h3,
#zavia-offcanvas .zavia-pd-descwrap h4,
#zavia-offcanvas .zavia-pd-descwrap h5,
#zavia-offcanvas .zavia-pd-descwrap h6,
#zavia-offcanvas .has-white-color{
  color:#000 !important;
}

/* ----- Bouton "DEVENIR DISTRIBUTEUR" — Rakkas, gras, blanc ----- */
/* Cible aussi .btn-gloss-orange pour les boutons Elementor */
.zavia-cta-distrib,
.btn-gloss-orange{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:12px 24px;
  border-radius:16px;
  background: linear-gradient(180deg,#FF8A4D 0%, #E56C2D 100%);
  color:#fff;                                       /* texte blanc */
  font-weight:900;                                   /* gras */
  font-family:'Rakkas', serif;                       /* >>> police Rakkas */
  text-transform:uppercase;
  letter-spacing:.02em;
  border:3px solid #ffffff;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  position:relative; overflow:hidden;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Effet gloss */
.zavia-cta-distrib::after,
.btn-gloss-orange::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg,
              transparent 0%,
              rgba(255,255,255,.35) 25%,
              rgba(255,255,255,.15) 35%,
              transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.zavia-cta-distrib:hover,
.zavia-cta-distrib:focus-visible,
.btn-gloss-orange:hover,
.btn-gloss-orange:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
  outline:none;
}
.zavia-cta-distrib:hover::after,
.zavia-cta-distrib:focus-visible::after,
.btn-gloss-orange:hover::after,
.btn-gloss-orange:focus-visible::after{
  transform: translateX(120%);
}
.zavia-cta-distrib:active,
.btn-gloss-orange:active{ transform: translateY(-1px); }

/* ----- Description pleine largeur ----- */
.zavia-pd-descwrap{
  grid-column: 1 / -1;
  margin-top:14px; padding-top:6px;
  border-top:1px solid #eedbca;
}
.zavia-pd-short{ margin-bottom:10px; }
.zavia-pd-desc p{ margin:0 0 10px; }

/* Badges qualité */
.zavia-pd-badges{
  margin:10px 0 16px; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px;
}
.zavia-pd-badges li{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:#2F8F46; color:#fff; font-weight:700;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  white-space:nowrap;
}
.zavia-pd-badges .icon-check{
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.18);
  font-weight:800; line-height:1;
}
.zavia-pd-badges .icon-check::before{ content:"✓"; }

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .zavia-grid.zc-3, .zavia-grid.zc-4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zavia-pd{ grid-template-columns: 1fr; }
  .zavia-oc-head{ position:sticky; top:0; z-index:2; }
}
@media (max-width: 500px){
  .zavia-grid{ grid-template-columns: 1fr !important; }
  .zavia-cta-distrib, .btn-gloss-orange{ width:100%; justify-content:center; }
}

/* Effet zoom image carte */
.zavia-card-media img{
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  will-change: transform;
}
.zavia-card:hover .zavia-card-media img,
.zavia-card:focus-within .zavia-card-media img{
  transform: scale(1.06);
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.40));
}

/* Animation des badges */
#zavia-offcanvas .zavia-pd-badges li{
  opacity:0; transform: translateX(-14px) scale(.98);
}
#zavia-offcanvas.animate-badges .zavia-pd-badges li{
  animation: zaviaBadgeIn .45s cubic-bezier(.2,.7,.2,1) forwards;
}
#zavia-offcanvas.animate-badges .zavia-pd-badges li:nth-child(1){ animation-delay:.10s; }
#zavia-offcanvas.animate-badges .zavia-pd-badges li:nth-child(2){ animation-delay:.28s; }
#zavia-offcanvas.animate-badges .zavia-pd-badges li:nth-child(3){ animation-delay:.46s; }

@keyframes zaviaBadgeIn{
  0%   { opacity:0; transform: translateX(-14px) scale(.98); filter:saturate(.85); }
  60%  { opacity:1; transform: translateX(0) scale(1); }
  100% { opacity:1; transform: translateX(0) scale(1); box-shadow:0 10px 24px rgba(0,0,0,.16); }
}

/* Press sur carte cliquée */
.zavia-card.z-press{
  transform: translateY(-2px) scale(.99);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}

/* Accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce){
  .zavia-card-cta, .zavia-card-media img, .zavia-cta-distrib, .btn-gloss-orange{ transition:none; }
  #zavia-offcanvas .zavia-pd-badges li{ opacity:1; transform:none; animation:none!important; }
  .zavia-card.z-press{ transform:none; }
}

/* Forcer le texte blanc sur le bouton CTA (tous les états) */
.zavia-pd .zavia-cta-distrib,
.zavia-pd .zavia-cta-distrib:visited,
.zavia-pd .zavia-cta-distrib:hover,
.zavia-pd .zavia-cta-distrib:focus,
.zavia-pd .zavia-cta-distrib:active{
  color:#fff !important;
  -webkit-text-fill-color:#fff; /* Safari */
  text-decoration:none;
  font-family:'Rakkas', serif; /* au cas où */
  font-weight:900;
}