/* Menu — s'appuie sur les couleurs et composants de checkout.css. */
#rckm-layer.rck { min-height: 0; padding: 0; max-width: none; margin: 0; background: none; }

/* Barre « Actuellement ouvert / fermé », tout en haut : la même que sur les pages de vente */
.rck .rckm-status-bar { margin: 12px 0 4px; padding: 10px; border-radius: 14px; background: var(--rck-card); display: flex; justify-content: center; }
.rck .rckm-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #141210; font-weight: 800; font-size: 14px; }
.rck .rckm-status i { width: 12px; height: 12px; border-radius: 50%; background: #e0262b; }
.rck .rckm-status.open i { background: #2fb344; }

/* Catégories, collées en haut pendant le défilement */
.rck .rckm-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 12px 16px 10px;
  background: var(--rck-bg); scrollbar-width: none; }
body.admin-bar .rck .rckm-nav { top: 46px; }
@media (min-width: 783px) { body.admin-bar .rck .rckm-nav { top: 32px; } }
.rck .rckm-nav::-webkit-scrollbar { display: none; }
.rck .rckm-cat { flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--rck-card); border: 1px solid var(--rck-line);
  color: var(--rck-ink); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rck .rckm-cat.on { background: var(--rck-accent); border-color: var(--rck-accent); color: var(--rck-on-accent); }

.rck .rckm-section { padding-top: 14px; scroll-margin-top: 70px; display: flex; flex-direction: column; gap: 12px; }
.rck .rckm-h2 { margin: 6px 0 0; font-family: var(--rck-font-h, var(--eco-head, 'Montserrat', system-ui, sans-serif)); font-size: 22px; font-weight: 700; color: var(--rck-ink); }

/* Carte d'un plat : toute la carte ouvre la fiche */
.rck .rckm-dish { position: relative; display: flex; gap: 0; width: 100%; padding: 0; background: var(--rck-card); border: 0; border-radius: 18px;
  text-align: left; color: var(--rck-ink); cursor: pointer; overflow: hidden; }
/* La marge est portée par le texte seul : la photo, elle, va jusqu'aux bords de la carte (1.41.0). */
.rck .rckm-dish .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 14px 12px 14px 14px; }
.rck .rckm-dish h3 { margin: 0; font-size: 19px; font-weight: 700; color: inherit; font-family: inherit; line-height: 1.25; }
.rck .rckm-dish p { margin: 0; color: var(--rck-muted); font-size: 13px; line-height: 1.4; }
.rck .rckm-dish .price { font-weight: 700; font-size: 15px; }
.rck .rckm-dish .rckm-earn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: var(--rck-tint); color: var(--rck-accent); font-size: 12px; font-weight: 700; }
.rck .rckm-dish .rckm-earn svg { width: 13px; height: 13px; }
/* La même pastille dans la fiche d'un plat, sous sa description. */
.rck .rckm-sheet .rckm-earn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 11px; border-radius: 999px;
  background: var(--rck-tint); color: var(--rck-accent); font-size: 13px; font-weight: 700; }
.rck .rckm-sheet .rckm-earn svg { width: 14px; height: 14px; }
.rck .rckm-badge { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--rck-tint);
  color: var(--rck-accent); font-size: 12px; font-weight: 700; }
/* Photo : toute la hauteur de la carte, collée en haut, à droite et en bas (la carte arrondit ses coins). */
.rck .rckm-thumb { position: relative; flex: 0 0 128px; width: 128px; align-self: stretch; min-height: 128px; border-radius: 0; background: var(--rck-soft) center / cover no-repeat; }
.rck .rckm-plus { position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; background: var(--rck-accent);
  border: 3px solid var(--rck-card); color: var(--rck-on-accent); display: flex; align-items: center; justify-content: center; }
.rck .rckm-dish.off { cursor: default; }
.rck .rckm-dish.off h3, .rck .rckm-dish.off .price { color: var(--rck-muted); }
.rck .rckm-dish.off .rckm-thumb { filter: grayscale(1); opacity: .55; }
.rck .rckm-dish .when { display: flex; align-items: center; gap: 6px; color: var(--rck-muted); font-size: 13px; font-weight: 600; }
.rck .rckm-empty { color: var(--rck-muted); text-align: center; padding: 30px 10px; }

/* Barre du panier */
.rck .rckm-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 488px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 18px; border: 0; border-radius: 18px;
  background: var(--rck-accent); color: var(--rck-on-accent); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.rck .rckm-bar .n { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--rck-on-accent) 22%, transparent); display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; }

/* Panneaux qui montent du bas */
.rck .rckm-veil { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; animation: rckm-fade .15s ease-out; }
.rck .rckm-sheet { position: relative; width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; background: var(--rck-bg);
  border-radius: 24px 24px 0 0; overflow: hidden; animation: rckm-up .22s ease-out; }
.rck .rckm-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.rck .rckm-gal { display: grid; gap: 6px; height: 230px; margin-top: 30px; flex: 0 0 auto; }
.rck .rckm-gal.n1 { grid-template-columns: 1fr; }
.rck .rckm-gal.n2 { grid-template-columns: 1fr 1fr; }
.rck .rckm-gal.n3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.rck .rckm-gal.n3 .g0 { grid-row: 1 / span 2; }
.rck .rckm-gal span { display: block; min-height: 0; border-radius: 16px; overflow: hidden; background: var(--rck-soft); }
.rck .rckm-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rck .rckm-gal-none { height: 40px; flex: 0 0 auto; }
.rck .rckm-sheet-head { padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rck .rckm-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rck-card);
  color: var(--rck-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.rck .rckm-grab { position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: color-mix(in srgb, var(--rck-ink) 30%, transparent); z-index: 2; }
.rck .rckm-title { margin: 0; font-family: var(--rck-font-h, var(--eco-head, 'Montserrat', system-ui, sans-serif)); font-size: 26px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.15; color: var(--rck-ink); }
.rck .rckm-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--rck-bg); border-top: 1px solid var(--rck-line); }
.rck .rckm-step { display: flex; align-items: center; height: 54px; border: 1px solid var(--rck-line); border-radius: 16px; flex: 0 0 auto; }
.rck .rckm-step button { width: 46px; height: 52px; border: 0; background: transparent; color: var(--rck-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rck .rckm-step span { min-width: 24px; text-align: center; font-size: 17px; font-weight: 700; }
.rck .rckm-step.sm { height: 40px; border-radius: 12px; }
.rck .rckm-step.sm button { width: 36px; height: 38px; }
.rck .rckm-step.sm span { font-size: 15px; min-width: 18px; }
.rck .rckm-foot .rck-btn { flex: 1 1 auto; min-height: 54px; }
.rck .rckm-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rck-line); }
.rck .rckm-item:first-child { border-top: 0; }
.rck .rckm-item .grow { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.rck .rckm-item .grow small { display: block; color: var(--rck-muted); font-size: 12.5px; }
.rck .rckm-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 120; padding: 10px 16px;
  border-radius: 999px; background: var(--rck-ink); color: var(--rck-bg); font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.rck .rckm-toast.bad { background: var(--rck-bad); color: var(--rck-bg); }
.rck .rckm-skel { height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--rck-soft), var(--rck-card), var(--rck-soft)); background-size: 200% 100%; animation: rckm-shine 1.2s linear infinite; }
@keyframes rckm-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes rckm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rckm-shine { to { background-position: -200% 0; } }
body.rckm-lock { overflow: hidden; }
.rck .rckm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }

/* Questions de la fiche : design du formulaire des pages de vente (express.css),
   branché sur la palette du menu (fond + accent Elementor). */
.rck .rckx.rckm-x {
  --rckx-accent: var(--rck-accent); --on-accent: var(--rck-on-accent);
  --bg: var(--rck-bg); --card: var(--rck-card); --field: var(--rck-card); --seg: var(--rck-soft);
  --line: var(--rck-line); --line-2: var(--rck-line-2); --fg: var(--rck-ink); --fg-2: var(--rck-ink);
  --muted: var(--rck-muted); --muted-2: var(--rck-muted); --ok: var(--rck-ok); --bad: var(--rck-bad);
  --tint: var(--rck-tint);
  max-width: none; margin: 0; gap: 18px; font-family: inherit;
}
.rck .rckm-x .rckm-desc { margin: -4px 0 0; color: var(--rck-muted); font-size: 13px; }
.rck .rckm-x .rckx-group-head h4 { font-family: inherit; line-height: 1.3; }

/* Carte « Points accumulés » (RewardsWP) */
.rck .rckm-pts { margin: 14px 0 2px; padding: 16px 16px 14px; border-radius: 18px; color: #FFFFFF;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rck-accent) 10%, #16110E) 0%, color-mix(in srgb, var(--rck-accent) 42%, #2A1D15) 100%); }
/* Le solde ne rétrécit jamais : si le bouton ne tient plus à côté (petit écran, gros solde), il passe à la ligne, à droite. */
.rck .rckm-pts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 8px; }
.rck .rckm-pts-lbl { display: block; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.rck .rckm-pts-bal { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; white-space: nowrap; }
.rck .rckm-pts-coin { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.rck .rckm-pts-coin img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rck .rckm-pts-bal b { font-size: 38px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.rck .rckm-pts-btn { flex: 0 0 auto; margin-left: auto; padding: 11px 16px; border-radius: 999px; background: #FFFFFF; color: #16110E; font-size: 14px; font-weight: 800;
  text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
@media (min-width: 700px) { .rck .rckm-pts { padding: 20px 24px 16px; } .rck .rckm-pts-bal b { font-size: 46px; } .rck .rckm-pts-coin { width: 52px; height: 52px; } .rck .rckm-pts-btn { padding: 13px 22px; font-size: 16px; } }
.rck .rckm-pts-btn:active { transform: scale(.97); }
/* Téléphone : un peu plus compact, pour que le solde et « Utiliser mes points » restent côte à côte. */
@media (max-width: 400px) {
  .rck .rckm-pts-bal { gap: 10px; }
  .rck .rckm-pts-coin { width: 38px; height: 38px; }
  .rck .rckm-pts-bal b { font-size: 32px; }
  .rck .rckm-pts-btn { padding: 10px 14px; font-size: 13.5px; }
}
.rck .rckm-pts-note { margin: 12px auto 0; padding-top: 10px; max-width: 80%; border-top: 1px solid rgba(255,255,255,.22); text-align: center; font-size: 13.5px; color: rgba(255,255,255,.92); }

/* Fiche du plat ou panier ouvert : RewardsWP (bouton flottant, z-index 9999) passait
   au-dessus. Son bouton vit dans un Shadow DOM, hors de portée de nos styles : on
   cache donc ses éléments hôtes <rewards-panel> / <rewards-launcher> le temps que
   notre panneau est ouvert. (Depuis Écosystème 1.43.0, l'icône flottante est de toute
   façon masquée sur tout le site : réglage d'agence, voir ECO_Rewards.) */
body.rckm-lock rewards-panel,
body.rckm-lock rewards-launcher { visibility: hidden !important; pointer-events: none !important; }

/* ── Grand écran (1.64.0) ─────────────────────────────────────────────
   Sur tablette et ordinateur, le menu ne reste plus dans une colonne de téléphone :
   il s'élargit (jusqu'à 1 120 px) et les plats se rangent sur 2 colonnes (3 colonnes rendaient les cartes
   aussi étroites que sur téléphone, avec des textes coupés en plusieurs lignes).
   La fiche d'un plat et le panier s'ouvrent au centre de l'écran au lieu de monter du bas.
   Sous 760 px, rien ne change. */
@media (min-width: 760px) {
  #rckm.rck { max-width: 1120px; padding-left: 24px; padding-right: 24px; }
  .rck .rckm-nav { margin: 0 -24px; padding: 14px 24px 12px; flex-wrap: wrap; overflow-x: visible; }
  .rck .rckm-cat { height: 42px; padding: 0 18px; font-size: 15px; }
  .rck .rckm-status-bar { margin-top: 20px; }
  .rck .rckm-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 22px; scroll-margin-top: 84px; }
  .rck .rckm-h2 { grid-column: 1 / -1; font-size: 26px; }
  .rck .rckm-dish { min-height: 150px; }
  .rck .rckm-thumb { flex-basis: 150px; width: 150px; min-height: 150px; }
  .rck .rckm-dish .txt { padding: 16px 14px 16px 18px; }
  .rck .rckm-dish p { font-size: 14px; }
  .rck .rckm-dish .price { font-size: 16px; }

  /* Fiche d'un plat et panier : une fenêtre au centre */
  .rck .rckm-veil { align-items: center; padding: 24px; }
  .rck .rckm-sheet { max-width: 600px; max-height: min(88vh, 860px); border-radius: 24px; }
  .rck .rckm-grab { display: none; }
  .rck .rckm-gal { height: 300px; }
  .rck .rckm-foot { padding-bottom: 16px; }
  .rck .rckm-bar { max-width: 520px; height: 64px; font-size: 16px; }
}