/* Borne de commande tactile — /borne/
   Portrait en priorité (borne verticale), unités vh/vw/% pour s'adapter à
   toute résolution (21" à 32"). Aucun scroll de page visible en dehors des
   zones prévues. Layout façon McDonald's : sidebar catégories fixe à gauche,
   plats à droite, modal d'options par-dessus. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Garde-fou : plusieurs éléments posent display:flex en dur pour leur mise en
   page une fois visibles, ce qui écraserait sinon la règle UA [hidden] et les
   afficherait en permanence par-dessus l'écran courant. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bk-bg-dark); color: var(--bk-text-light);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none; -webkit-user-select: none;
}

.cr-kiosk { width: 100vw; height: 100vh; overflow: hidden; }
#cr-kiosk-root { width: 100%; height: 100%; position: relative; }

.cr-kiosk-disabled {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; text-align: center; color: var(--bk-text-muted); gap: 1vh;
}
.cr-kiosk-disabled p { font-size: 2.2vh; margin: 0; }
.cr-kiosk-disabled__sub { font-size: 1.6vh !important; opacity: .7; }

/* Scroll interne discret, sans scrollbar visible */
.cr-k-sidebar, .cr-k-content, .cr-k-drawer__items,
.cr-k-poptions__grid, .cr-k-precap__body {
  scrollbar-width: none; -ms-overflow-style: none;
}
.cr-k-sidebar::-webkit-scrollbar, .cr-k-content::-webkit-scrollbar,
.cr-k-drawer__items::-webkit-scrollbar,
.cr-k-poptions__grid::-webkit-scrollbar, .cr-k-precap__body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ==================== Écran attracteur ==================== */
.cr-k-attract {
  position: absolute; inset: 0; z-index: 0; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.cr-k-attract__bg {
  /* z-index négatif : safe grâce à isolation:isolate sur .cr-k-attract (crée
     un contexte d'empilement local) — sans ça ce fond passait AU-DESSUS du
     diaporama (même z-index, mais plus tard dans le DOM) et le masquait
     entièrement. */
  position: absolute; inset: -10%; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,10,5,.5) 0%, rgba(15,10,5,.2) 35%, rgba(15,10,5,.7) 100%),
    url('https://barakomama.com/wp-content/uploads/2026/09/fond-photo.png') center / cover no-repeat;
  animation: cr-k-bg-drift 14s ease-in-out infinite alternate;
}
@keyframes cr-k-bg-drift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, 1.5%); }
}
/* Slideshow attracteur (photos/vidéos promo configurées dans Clikom Resto > Borne). */
.cr-k-attract__slides { position: absolute; inset: 0; z-index: 0; }
.cr-k-attract__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.cr-k-attract__slide.is-active { opacity: 1; }
.cr-k-attract__slide img, .cr-k-attract__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-k-attract__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 22%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.75) 100%);
}

/* Badge logo/nom discret en haut, ne cache jamais le diaporama */
.cr-k-attract__badge {
  position: absolute; z-index: 3; top: 4vh; left: 4vw;
  max-width: 20vw; max-height: 11vh; object-fit: contain;
  filter: drop-shadow(0 1vh 2vh rgba(0,0,0,.5));
  animation: cr-k-fade-in .6s ease both;
}
.cr-k-attract__badge--text {
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px);
  color: #fff; font-weight: 800; font-size: 2.6vh; padding: 1.4vh 2.2vh;
  border-radius: 999px; max-width: 60vw; white-space: nowrap;
}
@keyframes cr-k-fade-in { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }

/* Invite à toucher l'écran : doigt qui tape + ondes concentriques */
.cr-k-attract__tap {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 6vh;
  display: flex; flex-direction: column; align-items: center; gap: 2.2vh;
  animation: cr-k-fade-in .6s ease .1s both;
}
.cr-k-attract__tap-anim {
  position: relative; width: 13vh; height: 13vh;
  display: flex; align-items: center; justify-content: center;
}
.cr-k-attract__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: .5vh solid var(--bk-accent); opacity: 0;
  animation: cr-k-tap-ring 1.8s ease-out infinite;
}
.cr-k-attract__ring--delay { animation-delay: .9s; }
@keyframes cr-k-tap-ring {
  0% { transform: scale(.35); opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}
.cr-k-attract__finger {
  position: relative; width: 6.4vh; height: 6.4vh; color: #fff; display: inline-block;
  filter: drop-shadow(0 .6vh 1.4vh rgba(0,0,0,.55));
  animation: cr-k-tap-bounce 1.35s ease-in-out infinite;
}
.cr-k-attract__finger svg { width: 100%; height: 100%; display: block; }
@keyframes cr-k-tap-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(1.4vh) scale(.92); }
  55% { transform: translateY(1.4vh) scale(.92); }
}
.cr-k-attract__cta {
  font-size: 3.4vh; font-weight: 800; color: #fff;
  margin: 0; letter-spacing: .01em; text-align: center;
  text-shadow: 0 .3vh 1.6vh rgba(0,0,0,.65);
}
@keyframes cr-k-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .82; }
}

/* ==================== Écrans généraux ==================== */
.cr-k-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bk-bg-dark);
  animation: cr-k-slide-in .28s ease both;
}
@keyframes cr-k-slide-in { from { opacity: 0; transform: translateX(2vw); } to { opacity: 1; transform: none; } }

.cr-k-btn {
  min-height: 64px; border-radius: 1.4vh; border: none; cursor: pointer;
  font-size: 2.2vh; font-weight: 800; padding: 0 4vw;
}
.cr-k-btn--ghost { background: rgba(255,255,255,.08); color: var(--bk-text-light); flex: 0 0 auto; }
.cr-k-btn--primary { background: var(--bk-accent); color: #fff; flex: 1 1 auto; }
.cr-k-btn--primary:disabled { opacity: .35; cursor: not-allowed; }
.cr-k-btn--big { display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; font-size: 2.6vh; }

.cr-k-loading { font-size: 2.2vh; color: var(--bk-text-muted); padding: 6vh 4vw; text-align: center; }

/* ==================== Choix du mode de commande ==================== */
.cr-k-mode {
  align-items: center; justify-content: center; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,10,5,.55) 0%, rgba(15,10,5,.25) 35%, rgba(15,10,5,.72) 100%),
    url('https://barakomama.com/wp-content/uploads/2026/09/fond-photo.png') center / cover no-repeat,
    linear-gradient(155deg, var(--bk-accent) 0%, color-mix(in srgb, var(--bk-accent) 78%, #7a2e00) 60%, color-mix(in srgb, var(--bk-accent) 55%, #451a00) 100%);
}
.cr-k-mode__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5.5vh; padding: 6vw; width: 100%;
  animation: cr-k-fade-in .5s ease both;
}
.cr-k-mode__title {
  font-size: 3.8vh; font-weight: 900; margin: 0; text-align: center; color: #fff;
  text-shadow: 0 .4vh 2vh rgba(0,0,0,.3); letter-spacing: -.01em;
}
.cr-k-mode__buttons { display: flex; flex-direction: column; gap: 3vh; width: min(90vw, 560px); }
.cr-k-mode__btn {
  min-height: 24vh; border-radius: 3.2vh; border: none;
  background: rgba(255,255,255,.97); color: var(--bk-bg-dark); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8vh;
  box-shadow: 0 2vh 4vh rgba(0,0,0,.25), inset 0 -.3vh 0 rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cr-k-mode__btn:active { transform: scale(.96); box-shadow: 0 1vh 2vh rgba(0,0,0,.22); }
.cr-k-mode__icon {
  width: 8vh; height: 8vh; color: #17130f;
  animation: cr-k-icon-float 2.6s ease-in-out .9s infinite;
}
.cr-k-mode__icon svg { width: 100%; height: 100%; display: block; }
.cr-k-mode__icon-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: cr-k-icon-draw 1s ease forwards .15s;
}
@keyframes cr-k-icon-draw { to { stroke-dashoffset: 0; } }
@keyframes cr-k-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-.8vh) scale(1.04); }
}
.cr-k-mode__label { font-size: 3.1vh; font-weight: 800; color: var(--bk-bg-dark); }

@media (orientation: landscape) {
  .cr-k-mode__buttons { flex-direction: row; width: min(90vw, 900px); }
  .cr-k-mode__btn { flex: 1 1 0; min-height: 34vh; }
}

/* ==================== Menu : barre haute + sidebar + contenu ==================== */
.cr-k-menu { flex-direction: column; }
.cr-k-menubar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2vw;
  padding: 2.2vh 3vw; border-bottom: 1px solid rgba(255,255,255,.08);
}
.cr-k-menubar__mode {
  font-size: 1.8vh; font-weight: 800; color: var(--bk-accent);
  background: rgba(224,123,53,.14); padding: .8vh 1.8vh; border-radius: 999px;
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .8vh;
}
.cr-k-menubar__mode-icon { width: 2vh; height: 2vh; flex: 0 0 auto; }
.cr-k-menubar__mode-icon svg { width: 100%; height: 100%; display: block; }
.cr-k-menubar__title { font-size: 2.4vh; font-weight: 800; margin: 0; }
.cr-k-menubar__back {
  display: inline-flex; align-items: center; gap: .7vh;
  border: none; background: rgba(255,255,255,.08); color: var(--bk-text-light);
  font-size: 1.7vh; font-weight: 700; padding: .8vh 1.6vh; border-radius: 999px;
  flex: 0 0 auto; cursor: pointer; transition: background .12s ease;
}
.cr-k-menubar__back:active { background: rgba(255,255,255,.16); }
.cr-k-menubar__back svg { width: 1.6vh; height: 1.6vh; }

.cr-k-menu__body { flex: 1 1 auto; display: flex; min-height: 0; }

/* Sidebar catégories — ~25%, visible en permanence, scroll indépendant */
.cr-k-sidebar {
  flex: 0 0 28%; max-width: 320px; overflow-y: auto;
  background: var(--bk-surface); border-right: 1px solid rgba(255,255,255,.08);
  padding: 1.4vh 1vw; display: flex; flex-direction: column; gap: 1vh;
}
/* Icône au-dessus, nom en dessous (plutôt que côte à côte) : le nom profite
   de toute la largeur de la sidebar au lieu de partager la ligne avec
   l'icône, ce qui le faisait passer sur 2-3 lignes pour les catégories aux
   noms longs ("Sandwichs chauds", "Frite + Viande"...). */
.cr-k-sidebar-item {
  /* flex:0 0 auto (sur l'item ET sur son nom ci-dessous) est indispensable :
     .cr-k-sidebar est un flex column, et sans ça, avec beaucoup de
     catégories, les items — puis le texte du nom en particulier à cause de
     son overflow:hidden qui ramène son min-height auto à 0 — se faisaient
     écraser à hauteur nulle au lieu de laisser la sidebar scroller. */
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .8vh; padding: 1.2vh .6vw;
  border-radius: 1.4vh; border: none; background: transparent; color: var(--bk-text-light);
  cursor: pointer; text-align: center; min-height: 64px;
}
.cr-k-sidebar-item.is-active { background: var(--bk-accent); color: #fff; }
.cr-k-sidebar-item__visual {
  width: 5vh; height: 5vh; min-width: 36px; min-height: 36px; border-radius: 50%;
  overflow: hidden; background: var(--bk-card-bg); color: var(--bk-card-text);
  display: flex; align-items: center; justify-content: center; font-size: 2.4vh; flex: 0 0 auto;
}
.cr-k-sidebar-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sur une seule ligne : on tronque avec … plutôt que de renvoyer à la ligne
   (overflow-wrap) — largeur pleine, min-width:0 pour que le troncage
   fonctionne dans ce parent flex column. */
.cr-k-sidebar-item__name {
  flex: 0 0 auto; width: 100%; min-width: 0; font-size: 1.5vh; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Contenu — ~75%, grille de plats de la catégorie active */
/* Une carte plat à la fois, pleine largeur, grande photo — façon borne Saga/
   McDo : on scrolle verticalement d'un plat à l'autre plutôt qu'une grille
   de petites cartes côte à côte. */
/* Plats en grande photo ronde (comme les catégories) : prix + petite icône
   info sur la photo, nom en dessous. Pas de description visible — elle
   s'ouvre dans un popup au tap sur l'icône ℹ️. */
.cr-k-content {
  flex: 1 1 auto; overflow-y: auto; min-width: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 3vh 3vw; padding: 2.4vh 3vw 12vh; align-content: start;
}
@media (orientation: landscape) {
  .cr-k-content { grid-template-columns: repeat(3, 1fr); }
}

.cr-k-dish-tile {
  background: transparent; color: var(--bk-text-light);
  cursor: pointer; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
  transition: transform .12s ease;
}
.cr-k-dish-tile:active { transform: scale(.96); }
.cr-k-dish-tile.is-out { opacity: .5; pointer-events: none; }
/* Le cercle se clippe sur l'image/placeholder eux-mêmes (border-radius:50%
   directement dessus), PAS sur .media — sinon le badge prix qui déborde
   volontairement en bas du cercle serait coupé par l'overflow:hidden. */
.cr-k-dish-tile__media { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.cr-k-dish-tile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  box-shadow: 0 .8vh 2vh rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.08);
}
.cr-k-dish-tile__ph {
  width: 100%; height: 100%; border-radius: 50%; background: var(--bk-card-bg); color: var(--bk-card-text);
  box-shadow: 0 .8vh 2vh rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.cr-k-dish-tile__ph svg { width: 44%; height: 44%; opacity: .55; }
.cr-k-dish-tile__badge {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 1.7vh; font-weight: 700; text-align: center;
}
/* Badge prix sur la photo, en bas, à cheval sur le cercle. */
.cr-k-dish-tile__price {
  position: absolute; left: 50%; bottom: -1.2vh; transform: translateX(-50%);
  background: var(--bk-accent); color: #fff;
  font-size: 1.9vh; font-weight: 800; padding: .6vh 1.8vh;
  border-radius: 999px; box-shadow: 0 .4vh 1vh rgba(0,0,0,.35); white-space: nowrap;
}
/* Petite icône info en haut à droite de la photo — n'ouvre pas la fiche
   produit, juste un popup avec la description (stopPropagation en JS). */
.cr-k-dish-tile__info {
  position: absolute; top: .8vh; right: .8vh; z-index: 1;
  width: 3.6vh; height: 3.6vh; min-width: 26px; min-height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.8vh; font-weight: 800;
}
.cr-k-dish-tile__name { font-size: 2vh; font-weight: 800; margin: .6vh 0 0; text-align: center; padding: 0 .6vh; }

/* ==================== Popup info produit (description) ==================== */
.cr-k-info-popup { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.cr-k-info-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.cr-k-info-popup__panel {
  position: relative; z-index: 1; width: min(80vw, 520px);
  background: var(--bk-surface); color: var(--bk-text-light);
  border-radius: 2vh; padding: 3vh 3vw; text-align: center;
}
.cr-k-info-popup__title { font-size: 2.6vh; font-weight: 800; margin: 0 0 1.6vh; }
.cr-k-info-popup__desc { font-size: 2vh; color: var(--bk-text-muted); margin: 0 0 2.4vh; line-height: 1.5; }
.cr-k-info-popup__close {
  min-height: 56px; padding: 0 4vw; border-radius: 1.2vh; border: none;
  background: var(--bk-accent); color: #fff; font-size: 2vh; font-weight: 800; cursor: pointer;
}

/* ==================== Popup upsell dessert (après ajout au panier) ==================== */
.cr-k-upsell { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.cr-k-upsell__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.cr-k-upsell__panel {
  position: relative; z-index: 1; width: min(88vw, 900px); max-height: 86vh;
  background: var(--bk-surface); color: var(--bk-text-light);
  border-radius: 2.4vh; padding: 3.2vh 3vw 2.6vh; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  animation: cr-k-upsell-pop .28s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes cr-k-upsell-pop { from { opacity: 0; transform: scale(.9) translateY(2vh); } to { opacity: 1; transform: none; } }
.cr-k-upsell__title {
  font-size: 3vh; font-weight: 900; margin: 0 0 .6vh;
  display: flex; align-items: center; justify-content: center; gap: 1.2vh;
}
.cr-k-upsell__title-icon { width: 3.4vh; height: 3.4vh; flex: 0 0 auto; color: var(--bk-accent); }
.cr-k-upsell__sub { font-size: 1.9vh; color: var(--bk-text-muted); margin: 0 0 2.4vh; }
.cr-k-upsell__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15vh, 1fr)); gap: 2.4vh 2vh;
  width: 100%; overflow-y: auto; padding: 0 .4vh 1vh; margin-bottom: 2.2vh;
}
.cr-k-upsell__item { display: flex; flex-direction: column; align-items: center; gap: 1vh; cursor: pointer; border: none; background: none; padding: 0; }
.cr-k-upsell__item-media {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  transition: transform .12s ease;
}
.cr-k-upsell__item:active .cr-k-upsell__item-media { transform: scale(.94); }
.cr-k-upsell__item-media img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  background: var(--bk-card-bg); border: 3px solid rgba(255,255,255,.08);
  box-shadow: 0 .8vh 2vh rgba(0,0,0,.3); transition: border-color .12s ease;
}
.cr-k-upsell__item-media--empty {
  width: 100%; height: 100%; border-radius: 50%; color: var(--bk-card-text);
  background: var(--bk-card-bg); border: 3px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s ease;
}
.cr-k-upsell__item-media--empty svg { width: 40%; height: 40%; opacity: .55; }
.cr-k-upsell__item.is-added .cr-k-upsell__item-media img,
.cr-k-upsell__item.is-added .cr-k-upsell__item-media--empty { border-color: #22c55e; }
.cr-k-upsell__item-price {
  position: absolute; left: 50%; bottom: -1.1vh; transform: translateX(-50%);
  background: var(--bk-accent); color: #fff; font-size: 1.5vh; font-weight: 800;
  padding: .5vh 1.4vh; border-radius: 999px; white-space: nowrap; box-shadow: 0 .4vh 1vh rgba(0,0,0,.3);
}
.cr-k-upsell__item-plus {
  position: absolute; top: .6vh; right: .6vh; width: 3.2vh; height: 3.2vh; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 2.2vh; font-weight: 800; line-height: 1;
}
.cr-k-upsell__item-plus svg { width: 60%; height: 60%; }
.cr-k-upsell__item-name { font-size: 1.7vh; font-weight: 700; text-align: center; padding: 0 .4vh; }
.cr-k-upsell__skip {
  border: none; background: var(--bk-accent); color: #fff;
  min-height: 56px; padding: 0 4vw; border-radius: 1.2vh; font-size: 1.9vh; font-weight: 800; cursor: pointer;
  box-shadow: 0 .6vh 1.6vh rgba(0,0,0,.25); transition: transform .12s ease;
}
.cr-k-upsell__skip:active { transform: scale(.97); }

/* ==================== Sélection produit : pages plein écran ==================== */
/* Barre haute commune aux 2 pages (options + récap) : croix pour fermer et
   revenir au menu, toujours visible en haut. */
.cr-k-ptopbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2vw;
  padding: 2vh 3vw; border-bottom: 1px solid rgba(255,255,255,.08);
}
.cr-k-ptopbar__close {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--bk-text-light); border: none;
  font-size: 3vh; cursor: pointer;
}
.cr-k-ptopbar__titles { flex: 1 1 auto; display: flex; flex-direction: column; gap: .6vh; min-width: 0; }
.cr-k-ptopbar__group { font-size: 2.6vh; font-weight: 800; margin: 0; }
.cr-k-ptopbar__tag {
  align-self: flex-start;
  font-size: 1.5vh; font-weight: 700; text-transform: uppercase;
  color: var(--bk-text-muted); background: rgba(255,255,255,.08);
  padding: .4vh 1.4vh; border-radius: .8vh;
}
.cr-k-ptopbar__tag.is-required { color: var(--bk-accent); background: rgba(224,123,53,.16); }

.cr-k-pfootbar { flex: 0 0 auto; display: flex; gap: 2vw; padding: 2vh 4vw 3vh; }

/* Étape options : choix en rond (même traitement que les plats) — photo ou
   icône dans le cercle, prix en badge dessus si le choix a un supplément,
   nom en dessous, anneau orange autour du cercle quand sélectionné. */
.cr-k-poptions__grid {
  flex: 1 1 auto; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.4vh 2.4vw; padding: 2.4vh 4vw; align-content: start;
}
@media (orientation: landscape) {
  .cr-k-poptions__grid { grid-template-columns: repeat(4, 1fr); }
}
.cr-k-poption {
  background: transparent; color: var(--bk-text-light);
  border: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.2vh;
}
.cr-k-poption__visual {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--bk-card-bg); color: var(--bk-card-text);
}
.cr-k-poption__img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  box-shadow: 0 .6vh 1.6vh rgba(0,0,0,.3); border: 3px solid rgba(255,255,255,.08);
}
.cr-k-poption__ph {
  width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 .6vh 1.6vh rgba(0,0,0,.3); border: 3px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.cr-k-poption__ph svg { width: 42%; height: 42%; opacity: .55; }
/* Anneau de sélection autour du cercle plutôt qu'un fond plein, pour ne pas
   masquer la photo. */
.cr-k-poption.is-selected .cr-k-poption__img,
.cr-k-poption.is-selected .cr-k-poption__ph {
  outline: 4px solid var(--bk-accent); outline-offset: 3px;
}
.cr-k-poption__price {
  position: absolute; left: 50%; bottom: -1.1vh; transform: translateX(-50%);
  background: var(--bk-accent); color: #fff; font-size: 1.5vh; font-weight: 800;
  padding: .5vh 1.4vh; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 .3vh .8vh rgba(0,0,0,.35);
}
.cr-k-poption__label { font-size: 1.9vh; font-weight: 700; text-align: center; padding: 0 .4vh; }
.cr-k-poption.is-selected .cr-k-poption__label { color: var(--bk-accent); }

/* Étape récap : photo + nom + choix + quantité avant ajout au panier */
.cr-k-precap__body {
  flex: 1 1 auto; overflow-y: auto; padding: 2vh 6vw;
  display: flex; flex-direction: column; align-items: center; gap: 2vh; text-align: center;
}
.cr-k-precap__media { width: 60vw; max-width: 320px; height: 22vh; border-radius: 2vh; overflow: hidden; background: #333; }
.cr-k-precap__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-k-precap__name { font-size: 3vh; font-weight: 800; margin: 0; }
.cr-k-precap__choices { list-style: none; margin: 0; padding: 0; font-size: 1.9vh; color: var(--bk-text-muted); display: flex; flex-direction: column; gap: .6vh; }
.cr-k-precap__gname { color: var(--bk-text-light); font-weight: 700; }
.cr-k-precap__qty { display: flex; align-items: center; gap: 2vh; margin-top: 1vh; }
.cr-k-precap__qty button {
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: var(--bk-text-light); font-size: 3vh; cursor: pointer;
}
#cr-k-precap-qty-val { font-size: 2.8vh; font-weight: 800; min-width: 3ch; text-align: center; }
@media (orientation: landscape) {
  .cr-k-precap__body { flex-direction: row; text-align: left; align-items: center; justify-content: center; gap: 4vw; }
  .cr-k-precap__media { width: 30vw; height: 34vh; }
}

/* ==================== Barre panier persistante ==================== */
.cr-k-cartbar {
  position: absolute; left: 3vw; right: 3vw; bottom: 2.5vh; z-index: 20;
  min-height: 68px; border-radius: 1.6vh; border: none; cursor: pointer;
  background: var(--bk-surface); color: var(--bk-text-light);
  box-shadow: 0 1vh 3vh rgba(0,0,0,.4);
  display: flex; align-items: center; gap: 1.6vw; padding: 0 3vw;
}
.cr-k-cartbar__icon { width: 2.8vh; height: 2.8vh; }
.cr-k-cartbar__icon svg { width: 100%; height: 100%; display: block; }
.cr-k-cartbar__count {
  background: var(--bk-accent); color: #fff; font-size: 1.8vh; font-weight: 800;
  min-width: 3.2vh; height: 3.2vh; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.cr-k-cartbar__label { font-size: 1.9vh; color: var(--bk-text-muted); }
.cr-k-cartbar__total { margin-left: auto; font-size: 2.2vh; font-weight: 800; color: var(--bk-accent); }
.cr-k-cartbar__cta { font-size: 1.9vh; font-weight: 700; }

/* ==================== Drawer panier plein écran ==================== */
.cr-k-drawer { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-end; }
.cr-k-drawer__panel {
  width: 100%; height: 100%; background: var(--bk-surface); color: var(--bk-text-light);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cr-k-drawer-up .25s ease both;
}
@keyframes cr-k-drawer-up { from { transform: translateY(6vh); opacity: 0; } to { transform: none; opacity: 1; } }
.cr-k-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 2.4vh 4vw 1.6vh; }
.cr-k-drawer__head h2 { font-size: 2.8vh; margin: 0; }
.cr-k-drawer__close { width: 60px; height: 60px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: var(--bk-text-light); font-size: 3vh; cursor: pointer; }
.cr-k-drawer__items { flex: 1 1 auto; overflow-y: auto; padding: 0 4vw; }
.cr-k-drawer__empty { text-align: center; color: var(--bk-text-muted); font-size: 2.2vh; margin-top: 6vh; }
.cr-k-drawer__line { display: flex; align-items: center; gap: 2vw; padding: 1.8vh 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cr-k-drawer__img, .cr-k-drawer__imgph { width: 10vh; height: 10vh; border-radius: 1.2vh; object-fit: cover; flex: 0 0 auto; background: #333; }
.cr-k-drawer__imgph { display: flex; align-items: center; justify-content: center; color: var(--bk-text-muted); }
.cr-k-drawer__imgph svg { width: 40%; height: 40%; }
.cr-k-drawer__info { flex: 1 1 auto; min-width: 0; }
.cr-k-drawer__name { font-size: 2vh; font-weight: 700; }
.cr-k-drawer__choices { margin: .4vh 0 0; padding: 0 0 0 1.6vh; font-size: 1.5vh; color: var(--bk-text-muted); }
.cr-k-drawer__price { font-size: 1.8vh; font-weight: 700; color: var(--bk-accent); margin-top: .4vh; }
.cr-k-drawer__qty { display: flex; align-items: center; gap: .8vh; flex: 0 0 auto; }
.cr-k-drawer__qty button { width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: var(--bk-text-light); font-size: 2.4vh; cursor: pointer; }
.cr-k-drawer__qty span { font-size: 2vh; font-weight: 800; min-width: 3ch; text-align: center; }
.cr-k-drawer__foot { flex: 0 0 auto; padding: 1.6vh 4vw 3vh; display: flex; flex-wrap: wrap; gap: 1.2vh 2vw; align-items: center; }
.cr-k-drawer__total { display: flex; align-items: baseline; gap: 1vw; font-size: 2vh; width: 100%; }
.cr-k-drawer__total strong { font-size: 3vh; color: var(--bk-accent); }
.cr-k-drawer__foot .cr-k-btn--big { width: 100%; }

/* ==================== Écran de validation ==================== */
.cr-k-confirm { align-items: center; justify-content: center; }
.cr-k-confirm__inner { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; text-align: center; padding: 4vw; }
.cr-k-confirm__check { width: 14vh; height: 14vh; }
.cr-k-confirm__check svg { width: 100%; height: 100%; }
.cr-k-confirm__circle { stroke: var(--bk-accent); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: cr-k-circle .5s ease forwards; }
.cr-k-confirm__tick { stroke: var(--bk-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: cr-k-tick .3s .5s ease forwards; }
@keyframes cr-k-circle { to { stroke-dashoffset: 0; } }
@keyframes cr-k-tick { to { stroke-dashoffset: 0; } }
.cr-k-confirm__num { font-size: 3vh; font-weight: 700; }
.cr-k-confirm__num strong { display: block; font-size: 13vh; font-weight: 900; color: var(--bk-accent); line-height: 1; margin-top: 1vh; }
.cr-k-confirm__msg { font-size: 2.6vh; font-weight: 700; max-width: 80vw; margin: 0; }
.cr-k-confirm__countdown { font-size: 1.9vh; color: var(--bk-text-muted); margin: 0; }

/* ==================== Toast erreur ==================== */
.cr-k-toast {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%);
  background: #b91c1c; color: #fff; font-size: 2vh; font-weight: 700;
  padding: 1.6vh 3vw; border-radius: 1.2vh; z-index: 100; max-width: 84vw; text-align: center;
}