/* ==========================================================================
   GARBADROME — Composants réutilisables
   ========================================================================== */

/* --------------------------------------------------------------- Boutons -- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--tx);
  --btn-bd: var(--line-mid);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-med) var(--e-out),
              border-color var(--d-fast), background-color var(--d-fast), color var(--d-fast);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn__ico   { display: inline-flex; flex: none; }

.btn--ember {
  --btn-bg: linear-gradient(140deg, var(--gd-orange-bright), var(--gd-orange) 55%, var(--gd-orange-deep));
  --btn-fg: #fff;
  --btn-bd: transparent;
  box-shadow: var(--sh-warm);
}
.btn--ember:hover { box-shadow: 0 22px 50px -16px rgba(224,96,12,.55); }

.btn--green {
  --btn-bg: linear-gradient(140deg, var(--gd-green-bright), var(--gd-green) 55%, var(--gd-green-deep));
  --btn-fg: #fff;
  --btn-bd: transparent;
  box-shadow: 0 16px 40px -16px rgba(30,142,69,.5);
}

.btn--outline { --btn-bd: var(--line-mid); --btn-fg: var(--tx); }
.btn--outline:hover { --btn-bd: var(--gd-orange); --btn-fg: var(--gd-orange); }

.btn--dark { --btn-bg: var(--coal); --btn-fg: var(--tx-inv); --btn-bd: transparent; box-shadow: var(--sh-2); }

.btn--ghost { --btn-bg: rgba(251,246,237,.08); --btn-fg: var(--tx-inv); --btn-bd: var(--line-inv); }
.btn--ghost:hover { --btn-bd: rgba(251,246,237,.4); }

.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--tx); --btn-bd: transparent; box-shadow: var(--sh-2); }

/* Sur la bande orange du bas de page */
.btn--onOrange { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--onOrange:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.12); }

/* WhatsApp — le vert de la marque WhatsApp, pas celui de l'enseigne :
   c'est un repère visuel, il doit être reconnu au premier coup d'œil. */
.btn--wa {
  --btn-bg: #1FA855;
  --btn-fg: #fff;
  --btn-bd: transparent;
  box-shadow: 0 16px 40px -16px rgba(31,168,85,.55);
}
.btn--wa:hover { --btn-bg: #17924A; }

.btn--waOutline { --btn-bd: rgba(31,168,85,.55); --btn-fg: #157F40; }
.btn--waOutline:hover { --btn-bd: #1FA855; --btn-fg: #1FA855; }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--t-base); }
.btn--xl { padding: 1.2rem 2.3rem;  font-size: var(--t-lg); font-weight: 700; }

@media (max-width: 460px) { .btn--lg, .btn--xl { width: 100%; } }

/* ------------------------------------------------------------- Marque ---- */
.mark { flex: none; display: block; }

.word {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.02em;
  transform: skewX(-7deg);          /* clin d'œil à l'italique de l'enseigne */
  transform-origin: left bottom;
}
.word b { font-size: 1.42em; font-weight: 800; color: var(--gd-green); }
.word em {
  font-size: .92em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gd-orange);
}
.word--inv b  { color: var(--gd-green-bright); }
.word--inv em { color: var(--gd-orange-bright); }

/* -------------------------------------------------------- Bandeau haut --- */
.topstrip {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gd-green-deep), var(--gd-green) 30%, var(--gd-orange) 70%, var(--gd-orange-deep));
  color: #fff;
}
.topstrip__track {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: max-content;
  padding: .48rem 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: gd-marquee 34s linear infinite;
}
.topstrip__track i { font-style: normal; opacity: .6; }
@keyframes gd-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topstrip__track { animation: none; padding-inline: var(--gut); }
}

/* -------------------------------------------------------------- Nav ------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem var(--gut);
  background: rgba(251,246,237,.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background var(--d-med), border-color var(--d-med), padding var(--d-med), box-shadow var(--d-med);
}
.nav.is-stuck {
  background: rgba(251,246,237,.96);
  border-bottom-color: var(--line);
  padding-block: .6rem;
  box-shadow: 0 6px 24px -14px rgba(60,45,25,.4);
}

.nav__brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.nav__word  { font-size: .82rem; }

.nav__links { display: flex; gap: 1.9rem; font-size: var(--t-sm); font-weight: 500; }
.nav__links a {
  position: relative;
  color: var(--tx-soft);
  padding-block: .3rem;
  transition: color var(--d-fast);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gd-orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-med) var(--e-out);
}
.nav__links a:hover { color: var(--tx); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 980px) { .nav__links { display: none; } }
@media (max-width: 560px) { .nav__cta  { display: none; } }

/* ------------------------------------------------- Barre d'action mobile - */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: .5rem;
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(251,246,237,.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.actionbar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .78rem .4rem;
  border-radius: var(--r-md);
  background: var(--sand-2);
  font-size: .82rem;
  font-weight: 600;
  color: var(--tx);
}
.actionbar__btn--call {
  background: linear-gradient(140deg, var(--gd-orange-bright), var(--gd-orange-deep));
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(224,96,12,.7);
}
.actionbar__btn--wa {
  background: #1FA855;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(31,168,85,.7);
}
@media (max-width: 820px) { .actionbar { display: flex; } }
/* Quatre boutons : on resserre pour que rien ne passe à la ligne. */
@media (max-width: 430px) {
  .actionbar     { gap: .35rem; padding-inline: .4rem; }
  .actionbar__btn { gap: .25rem; padding-inline: .2rem; font-size: .72rem; }
  .actionbar__btn svg { width: 15px; height: 15px; }
}

/* ------------------------------------------------------- Cadre photo ----- */
/* Filet vert-orange autour des photos, comme les liserés de l'enseigne. */
.frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sand-3);
  box-shadow: var(--sh-3);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(145deg, var(--gd-green), rgba(255,255,255,.5) 45%, var(--gd-orange));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------ Image de repli --- */
.ph { position: relative; background: var(--sand-3); }
.ph.is-empty::after {
  content: "Photo à venir";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .5rem;
  text-align: center;
  background-image: var(--motif);
  background-size: auto 46px;
  color: var(--tx-faint);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------ Pastille Ouvert/Fermé -- */
/* Remplie par le script à partir des horaires de la page.
   Sans JavaScript, elle reste masquée : rien ne s'affiche à tort. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-mid);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-soft);
  white-space: nowrap;
}
.status[hidden] { display: none; }
.status::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tx-faint);
}
.status b { color: var(--tx); font-weight: 500; }

.status--open::before {
  background: #23A64F;
  box-shadow: 0 0 0 0 rgba(35,166,79,.55);
  animation: gd-ping 2.4s var(--e-out) infinite;
}
.status--open b { color: #157F40; }

.status--soon::before { background: var(--gd-gold); }
.status--soon b       { color: var(--gd-orange-deep); }

.status--closed::before { background: #B4392F; }
.status--closed b       { color: #B4392F; }

@keyframes gd-ping {
  70%  { box-shadow: 0 0 0 7px rgba(35,166,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,166,79,0); }
}
@media (prefers-reduced-motion: reduce) {
  .status--open::before { animation: none; }
}

/* Variante sur fond sombre */
.status--inv {
  background: rgba(251,246,237,.06);
  border-color: var(--line-inv);
  color: var(--tx-inv-s);
}
.status--inv b { color: var(--tx-inv); }
.status--inv.status--open b   { color: #4FD07B; }
.status--inv.status--soon b   { color: var(--gd-gold); }
.status--inv.status--closed b { color: #E97B70; }

/* ------------------------------------------------------- Étiquette halal - */
/* ⚠️  À supprimer partout si la viande n'est pas halal. */
.halal {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(30,142,69,.12);
  border: 1px solid rgba(30,142,69,.35);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gd-green-deep);
}
.halal::before { content: "✓"; font-weight: 700; }

/* ---------------------------------------------------------- Effet tilt --- */
.tilt { will-change: transform; transition: transform var(--d-med) var(--e-out); }
@media (hover: none) { .tilt { transform: none !important; } }