/* ==========================================================================
   [ROLE] Global styling for the PWA mock UI (layout, cards, tabs, chips, actions).
   [USE WHEN] You need to modify visuals (colors, spacing, responsive grid, hiding scrollbars).
   [SCOPE] Pure CSS, no business logic; used by all rendered components.
   ========================================================================== */

/* ==========================================================================
   Integrated action inside a field (input + right button)
   - Used for "Problème" inline save and Phone refresh.
   ========================================================================== */

.field__inbtn{
  position: relative;
  width: 100%;
  min-width: 0;
}
.field__inbtn-input{
  width: 100%;
  min-width: 0;
  /* Room for the integrated right button */
  padding-right: 60px;
}
.field__inbtn-btn{
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 36px;
  width: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  letter-spacing: .2px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
  z-index: 3; /* above input */
}
.field__inbtn-btn:hover{
  transform: translateY(-50%) translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  filter: brightness(1.03);
}
.field__inbtn-btn:active{
  transform: translateY(-50%) translateY(0);
}
.field__inbtn-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.field__inbtn-btn[disabled],
.field__inbtn-btn:disabled{
  cursor: default;
  opacity: .55;
}

/* Variant: "OK" button slightly wider */
.field__inbtn--ok .field__inbtn-input{
  padding-right: 78px;
}
.field__inbtn-btn--ok{
  width: 64px;
  font-size: 12px;
}
:root{
  --bg: #0d0f14;
  --surface: #121622;
  --surface-2: #161c2c;
  --card: #121a2a;
  --muted: rgba(255,255,255,.72);
  --muted-2: rgba(255,255,255,.55);
  --muted-3: rgba(0,0,0,1);
  --text: rgba(255,255,255,1);

  --brand: #6f0f1a;        /* bordeaux */
  --brand-2:#8a1826;
  --brand-pelissanne:#0b1f44; /* bleu foncé */
  --blue: #2a7cff;         /* num tabs */
  --blue-2: #0b1f44;       /* bleu foncé (référence) */
  --green: #1f8f4f;        /* time chips */
  --green-2:#20a65a;
  --danger:#d33b45;        /* L badge */

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.28);
  --radius: 12px;
  --radius-lg: 16px;

  /* Loyalty pill ("0 points" / "X points") */
  --loyalty-blue-light: rgba(42,124,255,.62);
  --loyalty-blue-dark: rgba(11,31,68,1);

  --topbar-h: 56px;
  --tabs-h: 58px;
  --times-h: 70px;
  --actions-h: 86px;
  --actions-gap: 18px; /* extra breathing space above bottom bar */

  --gap: 14px;
  --pad: 16px;
  --search-min: 520px; /* minimum width for center search column */
  --search-ideal: 1fr;
  /* Central usable height guardrail on small phone viewports */
  --center-min-h: 520px;

  --maxw: 100%;        /* full available width (no centered max container) */

  --side-max: 380px;   /* max width for left/right panels */
  /* Keep right column usable: never below 350px */
  --side-min: 350px;   /* min width for left/right panels (if possible) */

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Modals: typography scale (global) */
  --modal-title-size: clamp(22px, 2.2vw, 30px);
  --modal-section-title-size: clamp(16px, 1.6vw, 20px);

  /* Client fields "empty label" styling (placeholder look) */
  --client-empty-label-opacity: 0.9;
  --client-empty-label-font-size: 14px; /* smaller label when field is empty */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(111,15,26,.20), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(42,124,255,.14), transparent 55%),
    radial-gradient(900px 500px at 30% 90%, rgba(31,143,79,.18), transparent 55%),
    linear-gradient(180deg, #0b0e14, var(--bg));
}

/* When NOT on today's date: tint the whole center column (not just search). */
body.is-not-today #col-center{
  background: rgba(42,124,255,.40); /* bleu clair */
}

/* Layout */
.app-shell{
  height:100%;
  display:flex;
  flex-direction:column;
}
.topbars{
  position:sticky;
  top:0;
  z-index:50;
  box-shadow: var(--shadow-soft);
}
.main{
  flex: 1 1 auto;
  padding: calc(var(--pad) + 8px) var(--pad) calc(var(--actions-h) + var(--actions-gap)) var(--pad);
  display:flex;
  justify-content:stretch;
  min-height: 0; /* allow children to size with max-height and internal scrolling */
  overflow-x: auto; /* allow horizontal scroll when 3 columns can't fit */
  overflow-y: auto; /* allow vertical scroll if center enforces a min-height */
  -webkit-overflow-scrolling: touch;
}
.content-grid{
  width: 100%;
  display:grid;
  gap: var(--gap);
  /* Left & right are bounded; center consumes remaining space */
  grid-template-columns:
    minmax(var(--side-min), var(--side-max))
    minmax(var(--search-min), var(--search-ideal))
    minmax(var(--side-min), var(--side-max));
  align-items: stretch; /* make the 3 columns always fill available height */
  min-height: 0;
}
.col{ min-width:0; }

/* Ensure the 3 blocks stay on one row on small widths: allow them to shrink without wrapping */
@media (max-width: 1120px){
  :root{ --pad: 14px; --gap: 12px; --side-min: 320px; --side-max: 320px; --search-min: 420px; }
}
@media (max-width: 860px){
  :root{ --pad: 12px; --gap: 10px; --side-min: 280px; --side-max: 280px; --search-min: 360px; }
}

/* Constrain columns height between top strips and bottom actions: make each column independently scrollable */
.content-grid{
  /* Keep a comfortable minimum; if viewport is too small, main will scroll vertically */
  min-height: var(--center-min-h);
  max-height: none;
  height: calc(100vh - (var(--topbar-h) + var(--tabs-h) + var(--times-h) + var(--actions-h) + (var(--pad) * 2) + var(--actions-gap)));
  align-content: stretch;
}
.col{
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.col::-webkit-scrollbar{ width:0; height:0; } /* WebKit */
/* ensure cards can stretch nicely if content is short */
.col > .card{
  min-height: 100%;
  min-width: 0;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  min-width: 0;
}
.card__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  min-width: 0;
}
.card__title{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 650;
  letter-spacing: .2px;
}
.card__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.card__bd{ padding: 14px; }
.card__bd{ min-width: 0; }

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 12px;
}
.pill--warn{
  background: rgba(211,59,69,.14);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}
.pill--info{ background: rgba(42,124,255,.14); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.86); }

/* Loyalty points pill (non-input aesthetic badge) */
.loyalty-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  /* Requirement: blue (light -> dark) with white text */
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, var(--loyalty-blue-light), var(--loyalty-blue-dark));
  box-shadow: 0 12px 22px rgba(11,31,68,.22), 0 10px 18px rgba(0,0,0,.18);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px; /* align with .field spacing */
  user-select: none;
}
.loyalty-pill--hd{
  /* Compact variant for card header */
  height: 32px;
  width: 100%;
  padding: 0 12px;
  margin-bottom: 0;
  border-radius: 999px;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}
.loyalty-pill--hd .loyalty-pill__value{
  font-size: 14px;
}
.loyalty-pill--hd .loyalty-pill__label{
  font-size: 12px;
}
.loyalty-pill--clickable{
  cursor: pointer;
}
.loyalty-pill--clickable:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.loyalty-pill--clickable:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.loyalty-pill--alert{
  background: linear-gradient(180deg, rgba(211,59,69,.75), rgba(211,59,69,1));
  box-shadow: 0 12px 22px rgba(211,59,69,.18), 0 10px 18px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.20);
}
.loyalty-pill-note{
  margin-top: -6px; /* pull closer to pill */
  margin-bottom: 12px; /* keep spacing consistent with fields */
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .2px;
  color: rgba(255,255,255,1);
  text-align: center;
  opacity: .95;
}
.loyalty-pill__value{
  font-size: 18px;
  line-height: 1;
}
.loyalty-pill__label{
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

/* Top bar */
.bar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--brand), #520b13);
}
.bar--lancon{
  background: linear-gradient(180deg, var(--brand), #520b13);
}
.bar--pelissanne{
  background: linear-gradient(180deg, var(--brand-pelissanne), #06142e);
}
.bar__inner{
  /* Allow content to be wider than viewport, but only scroll INSIDE the bar */
  width:max-content;
  min-width:100%;
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 0 var(--pad);
}
.bar{
  /* Container that clips/scrolls horizontally so bar__inner never increases document width */
  width:100%;
  max-width:100vw;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.bar::-webkit-scrollbar{ width:0; height:0; } /* WebKit */
.topbars{ max-width:100vw; }
.icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.26);
}
.icon-btn--gear{
  /* same footprint as other icon buttons; explicit class for clarity */
}
.place{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 160px;
}
.place__name{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
}
.place__toggle{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.place__toggle:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chev{ opacity:.85; font-size: 14px; transform: translateY(-1px); }
.spacer{ flex:1 1 auto; }
.clock{
  display:flex;
  gap: 10px;
  flex-wrap: nowrap; /* always one line */
  align-items:center;
  color: rgba(255,255,255,1);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.clock__block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  white-space: nowrap; /* no wrap inside each block */
}
.clock__time{
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.clock__date{
  /* Requirement: date must be same size as time */
  font-size: 18px;
  color: rgba(255,255,255,.86);
  font-weight: 650;
  white-space: nowrap;
}

/* ===== Top bar attention shine when NOT on today's date =====
   Triggered by controller.js -> body.classList.toggle("is-not-today", ...)
*/
body.is-not-today .bar{
  position: relative;
  overflow: hidden; /* clip shine */
}
body.is-not-today .bar::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.10) 65%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: topbar-shine 1.6s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes topbar-shine{
  0%{ left: -45%; opacity: .0; }
  10%{ opacity: .9; }
  50%{ opacity: .9; }
  100%{ left: 105%; opacity: .0; }
}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }
.btn--sms{
  background: rgba(46,197,108,1);
  color: #0a1a10;
  border: 1px solid rgba(255,255,255,.18);
}
.abtn--today{
  /* Retour à la date du jour: rouge avec texte blanc */
  background: var(--danger);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.abtn--today:hover{
  border-color: rgba(255,255,255,.32);
  filter: brightness(1.05);
}

/* Horizontal scrollers (no visible scrollbar) */
.hstrip{
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hstrip__inner{
  width:100%;
  margin: 0 auto;
  padding: 10px var(--pad);
  overflow-x:auto;
  overflow-y:hidden;
  display:flex;
  gap: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.hstrip__inner::-webkit-scrollbar{ width:0; height:0; } /* WebKit */
.hstrip__inner:focus{ outline:none; }

/* Number tabs */
.tab{
  height: 38px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(42,124,255,.20);
  color: rgba(255,255,255,1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor:pointer;
  user-select:none;
  scroll-snap-align: start;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.tab.is-active{
  background: rgba(42,124,255,.42);
  box-shadow: 0 10px 18px rgba(42,124,255,.18);
  border-color: rgba(255,255,255,.28);
}

/* Time chips */
.chip{
  position:relative;
  height: 48px;
  min-width: 86px;
  padding: 0 14px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(31,143,79,.22);
  color: rgba(255,255,255,.94);
  font-size: 16px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  cursor:pointer;
  user-select:none;
  scroll-snap-align: start;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.chip.is-cap-colored{
  /* Chip must always follow BM badge computed color */
  background: var(--cap-bg);
  border-color: var(--cap-border);
  color: var(--cap-text);
}
.chip.is-cap-inactive{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  opacity: .88;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.chip.is-active{
  /* Selected hour_prepa: force a dark grey state (chip + bottom badge). */
  background: rgba(18,22,34,1) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}
.chip.is-active.is-cap-colored{
  /* Even if capacity-colored, selected state must stay dark grey. */
  background: rgba(18,22,34,1) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}
/* Selected hour_prepa: bottom badge follows the chip (dark grey). */
.chip.is-active .chip__badge--bm{
  background: rgba(18,22,34,1) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
}
.chip__badge{
  position:absolute;
  height: 22px;
  min-width: 26px;
  padding: 0 8px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .1px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.46);
  color: #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 16px rgba(0,0,0,.24);
}
.chip__badge--tr{ top: -7px; right: -7px; }
.chip__badge--bm{ bottom: -7px; left: 50%; transform: translateX(-50%); }
.chip__badge--tr{
  /* TR badge always blue, regardless of value */
  background: rgba(42,124,255,1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.chip__badge--bm.is-cap-colored{
  background: var(--cap-bg);
  border-color: var(--cap-border);
  color: var(--cap-text);
}
.chip__badge--bm.is-cap-inactive{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,1);
}
.chip__badge--tm{
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(211,59,69,1);
  border-color: rgba(255,255,255,.16);
  color: #fff;
  font-weight: 950;
  min-width: 18px;
  padding: 0 6px;
}
.chip__badge--tm.is-hidden{ display:none; }

/* Form fields (mock) */
.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 12px;
}

/* ===== Attention: "Problème" field not empty =====
   Goal: attract attention (glow + blinking + moving light around the field).
   Scope: only when JS adds .field--probleme-alert on the field wrapper.
*/
.field--probleme-alert{
  position: relative;
  border-radius: 14px;
  padding: 3px; /* room for animated border */
  margin-bottom: 12px; /* keep same spacing even with padding */
}
/* Keep input aligned and not affected by wrapper padding */
.field--probleme-alert .input{
  position: relative;
  z-index: 2;
}
/* Base glow + subtle pulse */
.field--probleme-alert::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(211,59,69,.18);
  box-shadow:
    0 0 0 1px rgba(211,59,69,.55),
    0 0 18px rgba(211,59,69,.22),
    0 0 34px rgba(42,124,255,.14);
  opacity: .85;
  animation: probleme-pulse 1.1s ease-in-out infinite;
  pointer-events: none;
}
/* Moving "light sweep" around the border (shimmer) */
.field--probleme-alert::after{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  /* Conic gradient creates a traveling highlight around the field */
  background: conic-gradient(
    from 0turn,
    rgba(42,124,255,0) 0turn,
    rgba(42,124,255,.85) 0.08turn,
    rgba(255,255,255,.55) 0.12turn,
    rgba(211,59,69,.90) 0.16turn,
    rgba(42,124,255,0) 0.24turn,
    rgba(42,124,255,0) 1turn
  );
  /* Mask to keep only the "ring" */
  -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;
  opacity: .9;
  animation: probleme-spin 1.3s linear infinite, probleme-blink 1.6s steps(2, end) infinite;
  pointer-events: none;
}
@keyframes probleme-spin{
  to{ transform: rotate(1turn); }
}
@keyframes probleme-pulse{
  0%, 100%{ transform: scale(1); filter: brightness(1.0); opacity: .75; }
  50%{ transform: scale(1.01); filter: brightness(1.12); opacity: .95; }
}
@keyframes probleme-blink{
  0%, 100%{ opacity: .85; }
  50%{ opacity: .45; }
}

/* Phone field: integrated action button inside the input */
.field--phone .field__inbtn-input{
  padding-right: 58px; /* icon button */
}
.phone-action-btn{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 850;
  letter-spacing: .2px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
}
.phone-action-btn--icon{
  width: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}
.phone-action-btn--icon svg{
  display: block;
}
.phone-action-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  filter: brightness(1.03);
}
.phone-action-btn:active{
  /* Do not override transform: .field__inbtn-btn centers the button via translateY(-50%). */
}
.phone-action-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.phone-action-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.label{
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .2px;
}
.input{
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgb(13 21 83);
  color: var(--text);
  outline:none;
  /* Bigger, bolder, whiter content in fields */
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
}
.input::placeholder{ color: rgba(255,255,255,.42); }
.input.input--placeholder-lg::placeholder{
  color: rgba(255,255,255,1);
  opacity: var(--client-empty-label-opacity);
  font-size: var(--client-empty-label-font-size);
  font-weight: 900;
  letter-spacing: .2px;
}
/* UX: au focus, le "libellé" (placeholder) doit disparaître pour laisser place à la saisie */
.input:focus::placeholder{
  opacity: 0;
}
.input.input--placeholder-lg:focus::placeholder{
  opacity: 0;
}
.input[readonly]{
  /* Ensure readonly fields keep the same strong style */
  color: #fff;
  -webkit-text-fill-color: #fff; /* Safari/iOS */
  opacity: 1;
}
.input:focus{
  border-color: rgba(42,124,255,.40);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

/* ===== First name autocomplete (Prénom) ===== */
.field--fn .fn-autocomplete{
  position: relative;
  /* Make wrapper behave like other fields: full available width inside .field (flex) */
  width: 100%;
  min-width: 0;
}
/* In this field, the input is NOT a direct flex child of .field (it sits inside .fn-autocomplete),
   so we must force it to stretch; otherwise it keeps its default "size" width (~20ch). */
.field--fn .fn-autocomplete > .input{
  width: 100%;
  min-width: 0;
  display: block;
}
.field--fn .fn-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 400; /* above cards content */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(11,14,20,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.50);
  max-height: 260px;
  overflow: auto;
  padding: 8px;
}
.field--fn .fn-list.is-hidden{
  display: none;
}
.field--fn .fn-item{
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  padding: 0 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.field--fn .fn-item + .fn-item{
  margin-top: 8px;
}
.field--fn .fn-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.field--fn .fn-item.is-active{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
  background: rgba(42,124,255,.14);
}
.field--fn .fn-item:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

.divider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 12px 0;
}
.muted{ color: var(--muted-2); }
.muted-3{ color: var(--muted-3); }
.small{ font-size: 12px; }

/* Search */
.searchbar{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 0;
}
.searchbar__wrap{
  position:relative;
  flex: 1 1 auto;
  min-width: 0;
}
.searchbar__wrap .input{ width: 100%; padding-right: 46px; }
.input--search{
  font-weight: 750;
  letter-spacing: .2px;
}
.search-ico{
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.90);
  pointer-events: none;
}
.icon-btn--refresh{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.icon-btn--refresh:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}
.voice-mode-btn{
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.voice-mode-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.voice-mode-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.voice-mode-btn__icon{
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.voice-mode-btn__icon svg{
  display: block;
  width: 20px;
  height: 20px;
  transition: color .12s ease, filter .12s ease, transform .12s ease;
}
.voice-mode-btn__label{
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .15px;
  white-space: nowrap;
}
.voice-mode-btn--idle{
  background: linear-gradient(180deg, rgba(211,59,69,.22), rgba(211,59,69,.12));
  border-color: rgba(211,59,69,.42);
  color: #fff;
}
.voice-mode-btn--idle .voice-mode-btn__icon{
  color: rgba(211,59,69,1);
}
.voice-mode-btn--listening{
  background: linear-gradient(180deg, rgba(31,143,79,.34), rgba(31,143,79,.22));
  border-color: rgba(31,143,79,.55);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31,143,79,.18);
}
.voice-mode-btn--listening .voice-mode-btn__icon{
  color: rgba(46,204,113,1);
}
.voice-mode-btn--listening .voice-mode-btn__icon{
  animation: voice-mode-pulse 1.2s ease-in-out infinite;
}
.voice-mode-btn--error{
  background: linear-gradient(180deg, rgba(211,59,69,.28), rgba(211,59,69,.16));
  border-color: rgba(211,59,69,.45);
  color: #fff;
}
.voice-mode-btn--error .voice-mode-btn__icon{
  color: rgba(211,59,69,1);
}
.voice-mode-btn--unsupported{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.58);
  cursor: not-allowed;
  opacity: .78;
}
.voice-mode-btn--unsupported .voice-mode-btn__icon{
  color: rgba(255,255,255,.58);
}
.voice-mode-btn--unsupported:hover{
  transform: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
@keyframes voice-mode-pulse{
  0%, 100%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(1.08);
    opacity: .82;
  }
}
.searchmeta{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.searchhint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  display:flex;
  gap: 10px;
  align-items:center;
}
.searchhint--loading{
  border-color: rgba(42,124,255,.18);
  background: rgba(42,124,255,.08);
}
.searchhint--warn{
  border-color: rgba(211,59,69,.18);
  background: rgba(211,59,69,.10);
}
.searchresults{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  overflow:hidden;
  min-height: 280px;
  min-width: 0;
}

/* When NOT on today's date: make search results area dark blue */
body.is-not-today .searchresults{
  background: rgba(11,31,68,.22); /* bleu foncé */
  border-color: rgba(255,255,255,.12);
}

/* Search results as rounded rectangular buttons */
.searchresults--btns{
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  overflow: auto;
}

/* NOTE: do not recolor search results when not-today; center column handles the cue. */
/* body.is-not-today .searchresults--btns{ background: rgba(11,31,68,.30); } */

.searchresults--btns .searchresults__empty{
  width: 100%;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
}
.searchitem--btn{
  width: calc(50% - 5px);
  border-top: 0 !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px 12px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  color: #000;
}
.searchitem--btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.searchitem--btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18), 0 10px 18px rgba(0,0,0,.18);
}
.searchitem--btn.is-selected{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.28), 0 10px 18px rgba(0,0,0,.18);
}
.searchitem--btn .searchitem__title{
  white-space: normal;
}
.searchitem--btn .searchitem__sub--onbtn{ color: #000; }
.searchitem--btn .chip-mini{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.22);
  color: #000;
}
.searchitem__title--center{
  text-align: center;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.1;
  /* Title now includes price: "Nom - 12.00€" */
  font-variant-numeric: tabular-nums;
}
.searchitem__question{
  margin-top: 4px;
  text-align: center;
  font-weight: 850;
  font-size: 15px;
  line-height: 1.15;
}
.searchitem__ingredients{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(0,0,0,.82);
}
.searchitem__raccourcis{
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(0,0,0,.70);
}
@media (max-width: 980px){
  .searchitem--btn{ width: 100%; }
}

/* Base color mapping */
.base--tomate{ background: rgb(253, 175, 175) !important; }
.base--creme{ background: rgb(245, 231, 205) !important; }
.base--boisson{ background: rgb(104, 178, 255) !important; }
.base--nutella{ background: rgb(179, 120, 75) !important; }
.base--reduction{ background: rgb(170, 120, 255) !important; }
.base--default{ background: rgb(230, 230, 230) !important; }

.searchitem--btn.base--creme .searchitem__sub--onbtn,
.searchitem--btn.base--creme .chip-mini{
  /* Creme backgrounds need slightly darker text for contrast */
  color: #000;
}

.searchresults__empty{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(255,255,255,.60);
}
.searchitem{
  width:100%;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
  cursor:pointer;
  text-align:left;
  transition: background .12s ease, transform .12s ease;
}
.searchitem:first-child{ border-top: 0; }
.searchitem:hover{
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.searchitem:active{ transform: translateY(0); }
.searchitem:focus{
  outline:none;
  background: rgba(42,124,255,.08);
  box-shadow: inset 0 0 0 2px rgba(42,124,255,.22);
}
.searchitem__main{ min-width: 0; }
.searchitem__title{
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.searchitem__sub{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.searchitem__meta{
  flex: 0 0 auto;
  display:flex;
  gap: 8px;
  align-items:center;
}
.chip-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 800;
  max-width: 220px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Right panel */
.btn--primary{
  width:100%;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2ecc71, #1ea85a);
  color:#08160e;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .28px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 22px rgba(46,204,113,.18);
}
.btn--primary-with-badge{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 108px; /* réserve la place d'un badge beaucoup plus lisible */
}
.btn__label{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  text-align: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.btn__badge{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 16px rgba(0,0,0,.18);
  pointer-events: none; /* le clic reste porté par le bouton principal */
}
.btn__badge--orderid{
  background: rgba(11,31,68,1); /* bleu foncé */
  color: #fff;
}

@media (max-width: 760px){
  .btn--primary-with-badge{
    padding-right: 88px;
  }
  .btn__badge{
    right: 10px;
    height: 34px;
    min-width: 34px;
    padding: 0 12px;
    font-size: 17px;
  }
}
.imported-order-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(42,124,255,.22);
  background: rgba(42,124,255,.12);
  color: rgba(255,255,255,.96);
}
.imported-order-badge__label{
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .2px;
  color: rgba(255,255,255,.78);
}
.imported-order-badge__value{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,1);
}
.btn--pickedpizza{
  width:100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  color:#000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.btn--pickedpizza:disabled{
  opacity: 1;
  cursor: default;
  transform: none !important;
  filter: none !important;
}
.pospizza-list{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  min-width: 0;
}
.pospizza-item{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Visual connector for "lines under a pizza" (extra / removed / ingredients / options)
   - No change to existing component aesthetics; only adds a left vertical trait + small padding.
   - The accent color is provided via --pz-accent on .pospizza-item (set from pizza button bg). */
/* NEW: single wrapper connector for all modifications (extra / removed / additions+options) */
.pospizza-item > .pospizza-mods{
  border-left: 4px solid var(--pz-accent, rgba(255,255,255,.22));
  padding-left: 14px; /* add space so the trait doesn't overlap content */
  background-clip: padding-box; /* avoid any subtle overlap artifacts */
  display:flex;
  flex-direction: column;
  gap: 6px;
}

/* Ensure the connector never applies to the pizza button itself */
.pospizza-item > .pospizza-btn{
  border-left: 0;
}

/* Single connector for all additions (ingredients + options) */
.pospizza-additions{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
/* Inside the additions wrapper: do NOT draw per-line connectors */
.pospizza-additions > .pospizza-ingredients,
.pospizza-additions > .pospizza-options{
  border-left: 0;
  padding-left: 10px; /* restore original inner padding (connector is on wrapper) */
}

/* When blocks are inside the mods wrapper, they must NOT draw their own connector */
.pospizza-mods .pospizza-extra,
.pospizza-mods .pospizza-removed,
.pospizza-mods .pospizza-ingredients,
.pospizza-mods .pospizza-options,
.pospizza-mods .pospizza-additions{
  border-left: 0;
  background-clip: border-box;
}

/* Ensure legacy connector selectors don't apply if any remain in DOM (defensive) */
.pospizza-item > .pospizza-extra,
.pospizza-item > .pospizza-removed,
.pospizza-item > .pospizza-ingredients,
.pospizza-item > .pospizza-options,
.pospizza-item > .pospizza-additions{
  border-left: 0;
  padding-left: 0;
}

.pospizza-extra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.90);
  font-weight: 850;
  font-size: 13px;
}
.pospizza-extra__amount{ font-variant-numeric: tabular-nums; }

.pospizza-removed{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pospizza-removed__label{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.pospizza-removed__list{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.pospizza-removed__item{
  font-size: 13px;
  font-weight: 850;
  color: rgba(255,255,255,.86);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Added ingredients / selected options (strict lines) */
.pospizza-ingredients,
.pospizza-options{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pospizza-ingredients{
  border-color: rgba(42,124,255,.16);
}
.pospizza-options{
  border-color: rgba(31,143,79,.16);
}
.pospizza-io__label{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 6px;
}
.pospizza-io__list{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.pospizza-io__item{
  font-size: 13px;
  font-weight: 850;
  color: rgba(255,255,255,.86);
}
.pospizza-swipe{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.pospizza-swipe__bg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right: 14px;
  background: rgba(211,59,69,.85);
  color: #18090c;
  font-weight: 950;
  letter-spacing: .2px;
  user-select: none;
}
.pospizza-btn{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  color: #000;
  font-weight: 850;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  touch-action: pan-y; /* allow vertical scroll, enable horizontal swipe handling */
  will-change: transform;
  user-select: none;
}
.pospizza-btn.is-dragging{
  opacity: .9;
  box-shadow: 0 18px 30px rgba(0,0,0,.35);
  z-index: 200;
}

/* Drag & drop for ingredient/option/removed blocks */
.pospizza-dnd{
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Allow vertical scroll; JS only arms drag on a mostly-horizontal gesture. */
  touch-action: pan-y;
  will-change: transform;
}
.pospizza-dnd:active{
  cursor: grabbing;
}
.pospizza-dnd.is-dragging{
  opacity: 1;
  box-shadow: 0 18px 30px rgba(0,0,0,.35);
  z-index: 200;
}

.delete-dropzone{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) scale(.95);
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(211,59,69,.95);
  color: #18090c;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 7000;
}
.delete-dropzone.is-visible{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.delete-dropzone.is-active{
  transform: translateX(-50%) scale(1.08);
}
.delete-dropzone__inner{
  display:flex;
  align-items:center;
  gap: 8px;
}

.pospizza-btn--swipe:active{
  transform: translateY(0); /* keep consistent with other buttons */
}
.switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
}
.switch-row + .switch-row{ border-top: 1px solid rgba(255,255,255,.06); }
.switch-row .name{
  font-weight: 700;
  color: rgba(255,255,255,.86);
}

/* Client card: keep Stop SMS row visually consistent with other fields */
.card__bd .switch-row{
  margin-top: 4px;
}

/* Right panel: keep "Coupe" + "Livraison" aligned on a single line when possible */
.switchesRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap; /* objective: one line */
}
/* Each switch becomes a compact horizontal block */
.switchesRow .switch-row{
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 0;
  border-top: 0; /* remove the vertical-stack separator */
  gap: 10px;
}
.switchesRow .switch-row + .switch-row{
  border-top: 0; /* defensive: no separator inside a row layout */
}
.switchesRow .switch-row .name{
  white-space: nowrap; /* prevent label from breaking internally */
  overflow: hidden;
  text-overflow: ellipsis; /* keep readable if space is tight */
}
/* When adding a single switch below the Coupe/Livraison row, keep the same separator rhythm */
.switchesRow + .switch-row{
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Last-resort responsive: allow wrap only on very narrow widths */
@media (max-width: 360px){
  .switchesRow{
    gap: 8px;
    flex-wrap: wrap; /* last resort */
  }
  .switchesRow .switch-row{
    flex: 1 1 160px;
  }
}

.switch{
  position:relative;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.switch__knob{
  position:absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,1);
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
  transition: left .12s ease;
}
.switch.is-on{
  background: rgba(42,124,255,.34);
  border-color: rgba(42,124,255,.34);
}
.switch.is-on[data-kind="coupe"]{
  background: rgba(31,143,79,.34);
  border-color: rgba(31,143,79,.34);
}
.switch.is-on .switch__knob{ left: 28px; }

/* ==========================================================================
   Client card: dedicated tri-state SMS switch (does NOT affect other switches)
   States:
   - accepted (left, blue)
   - neutral  (middle, grey, disabled; cannot be user-selected)
   - refused  (right, red)
   ========================================================================== */
.sms-switch{
  width: 72px; /* room for 3 positions */
}
.sms-switch .switch__knob{
  left: 4px; /* accepted default */
}
.sms-switch[data-state="accepted"]{
  background: rgba(42,124,255,.34);
  border-color: rgba(42,124,255,.34);
}
.sms-switch[data-state="neutral"]{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.12);
  cursor: not-allowed;
  opacity: .9;
}
.sms-switch[data-state="refused"]{
  background: rgba(211,59,69,.85);
  border-color: rgba(211,59,69,.85);
}
.sms-switch[data-state="neutral"] .switch__knob{
  left: 24px; /* middle: (72-24)/2 */
}
.sms-switch[data-state="refused"] .switch__knob{
  left: 44px; /* right: 72-24-4 */
}
.stats{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
}
.stats__top{
  /* keep existing single-line look */
}
.onlinepay{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.onlinepay__row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.onlinepay__label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}
.onlinepay__amount{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  color: rgba(255,255,255,.90);
}

/* Bottom actions */
.actions{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding: 10px var(--pad);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,14,20,.25), rgba(11,14,20,.82));
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: 100vw; /* defensive: never enlarge the document */
  overflow: hidden; /* clip inner scroller */
}
.actions__inner{
  width:100%;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.actions__scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.actions__scroll::-webkit-scrollbar{ width:0; height:0; } /* WebKit */
.actions__row{
  display:flex;
  gap: 10px;
  flex-wrap: nowrap;           /* never wrap on mobile */
  align-items:center;
  width: max-content;          /* allow horizontal overflow inside .actions__scroll */
  min-width: 100%;             /* still fill when it fits */
}
.actions__meta{
  color: rgba(255,255,255,.70);
  font-size: 12px;
}
.abtn{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,1);
  font-weight: 750;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  white-space: nowrap; /* keep labels on one line */
}
.abtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}
.abtn--danger{ background: rgba(121,0,0,1); }
.abtn--primary{ background: rgba(0,49,127,1); }
.abtn--ghost{ background: rgba(255,255,255,.06); }
.select{
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,1);
  padding: 0 12px;
  outline:none;
  white-space: nowrap; /* keep value on one line */
}
.select:focus{
  border-color: rgba(42,124,255,.40);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.select--sm{
  height: 44px; /* keep aligned with input--sm */
  border-radius: 12px;
  font-weight: 850;
}
.input--sm{
  height: 44px;
  font-size: 14px;
  font-weight: 850;
}
.grow{ flex: 1 1 auto; min-width: 220px; }

/* ===== Bottom presets dropup (replaces native <select>) ===== */
.presetMenu{
  position: relative;
  flex: 1 1 auto;
  min-width: 220px;
}
.presetMenu__btn{
  width: 100%;
  text-align: left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.presetMenu__btn::after{
  content: "▴";
  opacity: .85;
  font-size: 12px;
  transform: translateY(-1px);
}
.presetMenu__panel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px); /* open upward (dropup) */
  z-index: 120; /* above .actions (60) */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,22,34,.98), rgba(11,14,20,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.50);
  padding: 8px;
  max-height: min(40vh, 260px);
  overflow: auto;
}
.presetMenu__item{
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  padding: 0 12px;
}
.presetMenu__item + .presetMenu__item{ margin-top: 8px; }
.presetMenu__item:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.presetMenu__item:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

/* ===== Date preset modal (replaces footer dropup/select) ===== */
.datePresetBtn{
  text-align: left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.datePresetBtn::after{
  content: "▾";
  opacity: .85;
  font-size: 12px;
  transform: translateY(-1px);
}
.preset-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preset-option{
  width: 100%;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  padding: 0 14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.preset-option.is-disabled,
.preset-option:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.preset-option:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.preset-option:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.preset-option.is-selected{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

@media (max-width: 760px){
  :root{ --actions-h: 112px; }
  .actions__row{ gap: 8px; }
  .abtn, .select{ height: 40px; border-radius: 12px; }
  .voice-mode-btn{
    padding: 0 12px;
  }
  .voice-mode-btn__label{
    display: none;
  }
}

/* ==========================================================================
   Responsive central height rules:
   - Mobile (small screens): keep existing fixed/guardrail behavior.
   - Tablet and up: remove central height guardrail so:
   topbars + central area + actions = 100% viewport height.
   ========================================================================== */
@media (min-width: 761px){
  .content-grid{
    /* Tablet+: no fixed min-height or height cap for the central area */
    min-height: 0;
    height: auto;
    max-height: none;
  }
  .main{
    /* Ensure the main area can shrink/grow inside the 100% height app shell */
    min-height: 0;
  }
}

/* ==========================================================================
   Tablet landscape / installed PWA:
   keep the 3 central blocks on one row WITHOUT horizontal page scroll.
   We intentionally allow columns to shrink and rebalance widths on tablets.
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1180px){
  :root{
    --pad: 12px;
    --gap: 10px;
    --side-min: 0px;
    --side-max: 1fr;
    --search-min: 0px;
    --search-ideal: 1.1fr;
  }

  .main{
    overflow-x: hidden;
  }

  .content-grid{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, .95fr);
  }

  .card__hd{
    gap: 10px;
  }

  .card__title,
  .card__actions{
    min-width: 0;
  }

  .card__title{
    flex: 1 1 auto;
  }

  .searchbar{
    gap: 8px;
  }

  .searchresults--btns{
    gap: 8px;
  }

  .searchitem--btn{
    width: 100%;
  }

  .searchitem__title--center{
    font-size: 16px;
  }

  .searchitem__question{
    font-size: 14px;
  }

  .chip-mini{
    max-width: 100%;
  }
}

/* Utility */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Auth gate overlay */
.authgate{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
}
.authgate__card{
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,22,34,1), rgba(11,14,20,1));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 18px;
}
.authgate__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  margin-bottom: 6px;
}
.authgate__subtitle{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  margin-bottom: 14px;
}
.authgate__actions{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.authgate__btn{
  background: rgba(42,124,255,.22);
  color: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,.14);
}
.authgate__btn--lancon{
  background: rgba(111,15,26,.32);
}
.authgate__btn--pelissanne{
  background: rgba(11,31,68,.35);
}
.authgate__error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(211,59,69,.18);
  color: rgba(255,255,255,1);
  font-size: 13px;
}
.authgate__pdvrow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 8px 0;
}
.authgate__pdvrow .authgate__btn{
  flex: 1 1 200px;
  height: 46px;
  border-radius: 14px;
}
.authgate__dev{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

/* Modal overlay (blocking confirmation) */
.modal{
  position: fixed;
  inset: 0;
  z-index: 8000; /* above actions (60), below authgate (9999) */
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
}
.modal__card{
  /*width: min(520px, 92vw);*/
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,22,34,1), rgba(11,14,20,1));
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 18px;
  /* Prevent "content leaking out of screen" on long modals */
  max-height: calc(100vh - 36px); /* modal padding (18px top/bottom) */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow inner scrolling */
}
.modal__card--xl{
  width: min(980px, 96vw);
}
.modal__card--sm{
  width: min(560px, 94vw);
}

.modal__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: var(--modal-title-size);
  line-height: 1.15;
  margin-bottom: 10px;
  word-break: break-word;
}
.modal__body{
  color: rgba(255,255,255,.80);
  font-size: 14px;
  line-height: 1.35;
  /* Make overflowing modal content scroll vertically inside the card */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal__actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto; /* keep actions visible; body scrolls instead */
}
.modal__actions .abtn{
  height: 44px;
  border-radius: 14px;
}

/* ===== SMS cancel confirmation modal (big + colored) ===== */
.modal__card--sms-cancel{
  width: min(560px, 94vw);
  border-radius: 18px;
}
.modal__title--sms-cancel{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.modal__body--sms-cancel{
  font-size: 16px;
  line-height: 1.35;
  color: rgba(255,255,255,.86);
}
.smsCancel__sub{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.modal__actions--sms-cancel{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.smsCancel__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal__actions--sms-cancel .abtn{
  height: 56px;
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  border: 1px solid rgba(255,255,255,.18);
}
.abtn--sms-cancel-cancel{
  width: 100%;
  height: 56px;
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,1);
}
.abtn--sms-cancel-cancel:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.abtn--sms-cancel-no{
  background: rgba(211,59,69,1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.abtn--sms-cancel-no:hover{
  border-color: rgba(255,255,255,.34);
  filter: brightness(1.05);
}
.abtn--sms-cancel-yes{
  background: rgba(46,204,113,1);
  border-color: rgba(255,255,255,.18);
  color: #0a1a10;
}
.abtn--sms-cancel-yes:hover{
  border-color: rgba(255,255,255,.28);
  filter: brightness(1.05);
}

/* ===== Offered drinks picker modal (2 columns) ===== */
.odpm-card{
  /* keep centered and readable on wide screens */
  width: min(980px, 96vw);
}
.odpm-recap{
  margin-bottom: 10px;
}
.odpm-grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px){
  .odpm-grid{
    grid-template-columns: 1fr;
  }
}
.odpm-col{
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.odpm-col__title{
  font-size: var(--modal-section-title-size);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: .15px;
  color: rgba(255,255,255,.86);
  margin-bottom: 10px;
}
.odpm-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.odpm-drink{
  /* same shape as zone commande drink buttons, but slightly denser in modal */
  height: 48px;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: var(--shadow-soft);
}
.odpm-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.odpm-actions .abtn{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-weight: 900;
}
.odpm-hint{
  margin-top: 10px;
  line-height: 1.25;
}

/* ===== Loyalty points modal (lp-*) ===== */
.lp-grid{
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 14px;
  align-items: center;
  justify-items: center;
}
@media (max-width: 560px){
  .lp-grid{
    grid-template-columns: 1fr;
  }
}
.lp-col{
  min-width: 0;
}
.lp-col--actions{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.lp-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-actions .abtn{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-weight: 900;
}
.lp-action--save:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.lp-root{
  padding: 10px 10px 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.lp-balance-current{
  text-align: center;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  line-height: 1.05;
  color: rgba(255,255,255,.96);
  margin: 4px 0 6px 0;
  letter-spacing: .2px;
}
.lp-balance-new{
  text-align: center;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255,255,255,.82);
  margin: 0 0 12px 0;
  letter-spacing: .15px;
}
.lp-stepper{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.lp-stepper__btn{
  width: 64px;
  height: 52px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}
.lp-stepper__value{
  flex: 1 1 auto;
  min-width: 120px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.96);
}
.lp-msg{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .1px;
}
.lp-msg.is-success{ color: rgba(46,204,113,1); }
.lp-msg.is-error{ color: rgba(211,59,69,1); }

/* ===== Settings menu (inside "Paramètres" modal) =====
   Tap-friendly vertical buttons, full width.
*/
.settings-menu{
  margin-top: 6px;
}
.settings-menu__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-menu__btn{
  width: 100%;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  padding: 0 14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.settings-menu__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.settings-menu__btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

/* ===== Settings: Pizzas & ingrédients (CRUD manager) ===== */
.pim-root{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pim-topbar{
  padding: 10px 10px 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pim-topbar__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pim-topbar__tabs{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.pim-topbar__status{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  font-weight: 850;
  letter-spacing: .1px;
}
.pim-toolbar__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pim-classbar{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pim-classbar__title{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .15px;
  color: rgba(255,255,255,.66);
}
.pim-search{
  flex: 1 1 380px;
  min-width: 260px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.pim-search__input{
  flex: 1 1 auto;
  min-width: 0;
}
.pim-toolbar__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.pim-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  min-height: 0;
}
/* Assoc tab: stack panels (search+chips above, composition below) */
.pim-grid--assoc{
  grid-template-columns: 1fr;
}
@media (max-width: 820px){
  .pim-grid{ grid-template-columns: 1fr; }
}

/* ===== Settings: Association pizzas & ingrédients (new picker layout) ===== */
.pim-assoc-pick{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.pim-assoc-pick__label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .15px;
  color: rgba(255,255,255,.78);
}
.pim-assoc-pick__input{
  width: 100%;
}
.pim-assoc-pick__scroller{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.pim-assoc-pick__scroller::-webkit-scrollbar{ width:0; height:0; }
.pim-assoc-pizzaChip{
  flex: 0 0 auto;
  min-width: 190px;
  max-width: 260px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 4px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pim-assoc-pizzaChip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.pim-assoc-pizzaChip.is-selected{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.pim-assoc-pizzaChip__name{
  font-weight: 950;
  letter-spacing: .1px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pim-assoc-pizzaChip__meta{
  font-size: 12px;
  font-weight: 850;
  color: rgba(255,255,255,.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sur-modal (ingredient picker) */
.modal.modal--sur{ z-index: 9001; }
.modal__card--sm{ width: min(560px, 94vw); }
.pim-surmodal{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pim-surmodal__controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.pim-surmodal__input{
  flex: 1 1 320px;
  min-width: 220px;
}
.pim-surmodal__list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.pim-surmodal__row{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  cursor: pointer;
  text-align: left;
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pim-surmodal__row:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.pim-surmodal__main{ min-width: 0; display:flex; flex-direction: column; gap: 4px; }
.pim-surmodal__name{ font-weight: 950; letter-spacing: .1px; line-height: 1.15; }
.pim-surmodal__sub{ font-size: 12px; font-weight: 750; color: rgba(255,255,255,.70); line-height: 1.2; white-space: normal; }
.pim-surmodal__right{ flex: 0 0 auto; font-size: 12px; font-weight: 950; color: rgba(255,255,255,.86); }
.pim-panel{
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 10px;
}
.pim-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 4px;
}
.pim-item{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  cursor: pointer;
  text-align: left;
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pim-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.pim-item.is-selected{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.pim-item__main{ min-width: 0; }
.pim-item__title{
  font-weight: 950;
  letter-spacing: .15px;
  line-height: 1.15;
}
.pim-item__sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.68);
  line-height: 1.2;
  white-space: normal;
}
.pim-item__right{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.pim-empty{
  padding: 12px;
  text-align: center;
}
.pim-hint{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pim-hint__title{
  font-weight: 950;
  letter-spacing: .15px;
  margin-bottom: 6px;
}
.pim-editor__hd{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pim-editor__title{
  font-weight: 950;
  letter-spacing: .15px;
  font-size: 16px;
  color: rgba(255,255,255,.94);
}
.pim-dirty{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1px;
  color: rgba(211,59,69,1);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
}
.pim-dirty.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.pim-editor__actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.pim-note{
  margin-top: 10px;
  font-size: 12px;
}

.pim-allergenes{
  margin-top: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.pim-allergenes__hd{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pim-allergenes__title{
  font-weight: 950;
  letter-spacing: .15px;
  color: rgba(255,255,255,.94);
}
.pim-allergenes__summary{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(255,255,255,.76);
}
.pim-allergenes__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pim-allergeneChip{
  min-width: 180px;
  max-width: 260px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 4px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pim-allergeneChip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.pim-allergeneChip.is-active{
  background: rgba(42,124,255,.18);
  border-color: rgba(42,124,255,.45);
  box-shadow: 0 0 0 3px rgba(42,124,255,.14);
}
.pim-allergeneChip__code{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .25px;
  color: rgba(255,255,255,.72);
}
.pim-allergeneChip__label{
  font-weight: 950;
  letter-spacing: .1px;
  line-height: 1.15;
  color: rgba(255,255,255,.96);
}
@media (max-width: 760px){
  .pim-allergeneChip{
    min-width: 100%;
    max-width: none;
  }
}

/* ===== Settings: Association pizzas & ingrédients ===== */
.pim-assoc-root{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.pim-assoc-head{
  padding: 10px 10px 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pim-assoc-head__title{
  font-weight: 950;
  letter-spacing: .15px;
  font-size: 16px;
  color: rgba(255,255,255,.94);
}
.pim-assoc-head__sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}
.pim-assoc-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  min-height: 0;
}
.pim-assoc-grid--single{
  grid-template-columns: 1fr;
}
@media (max-width: 920px){
  .pim-assoc-grid{ grid-template-columns: 1fr; }
}
.pim-assoc-panel{
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.pim-assoc-panel__title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .15px;
  color: rgba(255,255,255,.92);
}
.pim-assoc-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.pim-assoc-controls__input{
  flex: 1 1 260px;
  min-width: 220px;
}
.pim-assoc-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 640px);
  overflow: auto;
  padding-right: 4px;
  min-height: 0;
}
.pim-assoc-row{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.pim-assoc-row__main{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.pim-assoc-row__name{
  font-weight: 950;
  letter-spacing: .1px;
  line-height: 1.15;
}
.pim-assoc-row__sub{
  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.70);
  line-height: 1.2;
  white-space: normal;
}
.pim-assoc-row__actions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pim-assoc-mini{
  display:flex;
  align-items:center;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 6px 8px;
}
.pim-assoc-mini__label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}
.pim-assoc-row--add .abtn{
  height: 44px;
  border-radius: 14px;
}

/* ===== Briefing soirée (PWA modal "Afficher montant total") =====
   Scope: only inside the modal content via the .bs-briefing root class.
*/
.bs-briefing{
  padding: 10px 10px 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.bs-briefing__title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: calc(var(--modal-section-title-size) + 2px);
  margin-bottom: 12px;
  color: rgba(255,255,255,.94);
}
.bs-briefing__grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-briefing__row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.bs-briefing__grid .bs-briefing__row:nth-of-type(even){
  /* Légère variation de fond une ligne sur deux (zebra) */
  background: rgba(0,0,0,.18);
}
.bs-briefing__sep{
  /* Separator must be clearly visible in dark modal cards */
  height: 2px;
  border: 0;
  margin: 10px 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.38) 18%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.38) 82%,
    transparent 100%
  );
  opacity: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.bs-briefing__label{
  min-width: 0;
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .15px;
  color: rgba(255,255,255,.86);
  line-height: 1.2;
}
.bs-briefing__value{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.96);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 520px){
  .bs-briefing__label{ font-size: 15px; }
  .bs-briefing__value{ font-size: 20px; }
}

/* ===== Briefing soirée: compare Lançon vs Pélissanne side-by-side ===== */
.bs-briefing-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 820px){
  .bs-briefing-compare{ grid-template-columns: 1fr; }
}

/* Modal list (radio-like selectable rows) */
.modal__list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.modal__listitem{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,1);
  font-weight: 850;
  letter-spacing: .2px;
  padding: 12px 12px;
  cursor: pointer;
  display:flex;
  gap: 10px;
  align-items:center;
  text-align: left;
}
.modal__listitem:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.modal__listitem.is-selected{
  border-color: rgba(42,124,255,.55);
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}
.modal__listitem__dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.40);
  background: transparent;
  flex: 0 0 auto;
}
.modal__listitem.is-selected .modal__listitem__dot{
  background: rgba(42,124,255,1);
  border-color: rgba(42,124,255,1);
}
.modal__listitem__label{
  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: normal; /* allow wrap (needed for details) */
  line-height: 1.2;
}
.modal__listitem__text{
  min-width: 0;
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.modal__listitem__details{
  display:flex;
  flex-direction: column;
  gap: 3px;
}
.modal__listitem__detail{
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1px;
  color: rgba(255,255,255,.70);
  line-height: 1.2;
  white-space: normal;
}
.modal__listitem__detail--more{
  opacity: .85;
}

/* ===== Duplicate orders modal sections ===== */
.modal__sectionTitle{
  margin: 8px 0 12px 0;
  font-size: var(--modal-section-title-size);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.82);
  text-transform: none;
}
.duporders__order{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.duporders__details{
  padding-left: 2px;
}

/* ==========================================================================
   Duplicate orders modal: XXL emphasis when waiting orders exist
   Scope: only when .dupmodal--waiting-emphasis is on the overlay root.
   ========================================================================== */

/* ── Section title "Commandes waiting" ── */
.dupmodal--waiting-emphasis .modal__sectionTitle:last-of-type{
  font-size: calc(var(--modal-section-title-size) + 6px);
  font-weight: 950;
  letter-spacing: .3px;
  color: rgba(255,255,255,1);
  padding: 10px 14px;
  margin: 8px 0 14px 0;
  border-radius: 14px;
  border: 2px solid rgba(255,180,40,.55);
  background: linear-gradient(180deg, rgba(255,180,40,.18), rgba(255,120,20,.10));
  box-shadow: 0 0 18px rgba(255,160,30,.12);
}

/* ── Waiting order buttons: much bigger, high-contrast ── */
.dupmodal--waiting-emphasis [aria-label="Commandes waiting"] .preset-option{
  min-height: 72px;
  height: auto;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .25px;
  line-height: 1.25;
  border-radius: 16px;
  border: 2px solid rgba(255,180,40,.50);
  background: linear-gradient(180deg, rgba(255,180,40,.22), rgba(255,120,20,.12));
  color: rgba(255,255,255,1);
  box-shadow: 0 8px 22px rgba(255,160,30,.14), 0 0 0 1px rgba(255,180,40,.10);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dupmodal--waiting-emphasis [aria-label="Commandes waiting"] .preset-option:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,180,40,.32), rgba(255,120,20,.18));
  border-color: rgba(255,180,40,.70);
  box-shadow: 0 12px 28px rgba(255,160,30,.22);
}
.dupmodal--waiting-emphasis [aria-label="Commandes waiting"] .preset-option:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,180,40,.35), 0 8px 22px rgba(255,160,30,.14);
}

/* ── Waiting list: more gap between items ── */
.dupmodal--waiting-emphasis [aria-label="Commandes waiting"].preset-options{
  gap: 14px;
}

/* ── Action buttons (Oui / Non): bigger + colored ── */
.dupmodal--waiting-emphasis .modal__actions{
  margin-top: 18px;
  gap: 14px;
}
.dupmodal--waiting-emphasis .modal__actions .abtn{
  height: 56px;
  min-width: 120px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .25px;
  border-width: 2px;
}
/* "Non" button: red */
.dupmodal--waiting-emphasis .modal__actions .abtn:not(.abtn--primary){
  background: rgba(211,59,69,1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.dupmodal--waiting-emphasis .modal__actions .abtn:not(.abtn--primary):hover{
  border-color: rgba(255,255,255,.38);
  filter: brightness(1.08);
}
/* "Oui" button: green */
.dupmodal--waiting-emphasis .modal__actions .abtn--primary{
  background: rgba(46,204,113,1);
  border-color: rgba(255,255,255,.22);
  color: #0a1a10;
}
.dupmodal--waiting-emphasis .modal__actions .abtn--primary:hover{
  border-color: rgba(255,255,255,.34);
  filter: brightness(1.08);
}

/* ── Keep "Commandes en cours" section normal-sized for contrast ── */
.dupmodal--waiting-emphasis [aria-label="Commandes en cours"] .preset-option{
  /* Unchanged: default styles apply. Waiting section stands out by comparison. */
}

/* ── Divider between sections: slightly thicker ── */
.dupmodal--waiting-emphasis .divider{
  height: 2px;
  background: rgba(255,255,255,.14);
  margin: 16px 0;
}

/* ===== Pizza edit modal (chips + rows) ===== */
.modal__card--wide{
  /* Full screen modal */
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

.modal__close{
  position: absolute;
  top: 14px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 18px;
}
.mrow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.mrow--extra{
  margin-bottom: 12px;
}
.modal__card--wide .modal__body{
  /* Make body scroll internally if content exceeds height */
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 4px;
}

.mextra__input{
  width: 140px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mextra__btn{
  height: 44px;
}
.mextra__display{
  min-width: 92px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.mextra__validate{
  height: 44px;
}
.msection{
  margin-top: 18px;
}
.mlabel{
  font-size: 13px;
  color: rgba(255,255,255,.82);
  letter-spacing: .25px;
  margin-bottom: 10px;
  font-weight: 900;
  text-transform: none;
}
/* Stronger, more visible section titles (Composition / Tous les ingrédients / Options) */
.mlabel--strong{
  font-size: var(--modal-section-title-size);
  color: rgba(255,255,255,1);
  letter-spacing: .25px;
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.mbulk-hint{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(42,124,255,.28);
  background: rgba(42,124,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  line-height: 1.35;
}
.mchiprow{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mchiprow::-webkit-scrollbar{ width:0; height:0; }
/* Wrap chips on multiple lines (no horizontal scrolling) */
.mchiprow--wrap{
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 0;
  gap: 10px;
}
.mchip{
  flex: 0 0 auto;
  min-width: 120px;
  height: 54px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(42,124,255,.18);
  color: rgba(255,255,255,1);
  cursor:pointer;
  user-select:none;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 2px;
}
.mchiprow--wrap .mchip{
  /* Better density when wrapping: avoid huge chips; allow multi-line labels */
  min-width: 148px;
  height: auto;
  min-height: 54px;
  padding: 10px 12px;
}
.mchip:hover{ transform: translateY(-1px); }
.mchip.is-active{
  background: rgba(42,124,255,.28);
  border-color: rgba(255,255,255,.22);
}
.mchip.is-removed{
  background: rgba(211,59,69,.22);
  border-color: rgba(255,255,255,.22);
}
.mchip__top{
  font-weight: 900;
  text-align:center;
  line-height: 1.05;
  white-space: normal;  /* allow wrap */
  word-break: break-word;
  font-size: 16px;
}
.mchip__top.is-strike{
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.mchip__bot{
  font-size: 12px;
  opacity: .9;
  font-variant-numeric: tabular-nums;
  white-space: normal; /* allow wrap for "(+x€)" style lines if needed */
}

/* ===== Pizza edit modal: big "Fermer" button under options ===== */
.btn-close-pizza{
  width: 100%;
  height: 56px;
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--brand); /* bordeaux */
  color: #fff;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.btn-close-pizza:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.28);
}
.btn-close-pizza:active{
  transform: translateY(0);
}
.btn-close-pizza:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(111,15,26,.28);
}

/* ===== A–Z Alpha slider (ingredients filter in modal) ===== */
.alphaSliderRow{
  margin-bottom: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.alphaSliderHost{
  flex: 1 1 420px;
  min-width: 260px;
}
.alphaSliderReset{
  height: 40px;
  border-radius: 12px;
}

.alphaSlider{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 10px 10px 12px 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.alphaSlider[hidden]{ display:none !important; }
.alphaSlider__letters{
  display:flex;
  gap: 6px;
  align-items:center;
  justify-content:space-between;
  font-size: 16px;
  letter-spacing: .3px;
  color: rgba(255,255,255,1);
  margin-bottom: 0;
}
.alphaSlider__letter{
  width: 18px;
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.alphaSlider__letter.is-empty{
  opacity: .35;
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.alphaSlider__letter.is-active{
  background: rgba(42,124,255,.22);
  border-color: rgba(42,124,255,.35);
  color: rgba(255,255,255,1);
  font-weight: 900;
}
.alphaSlider__letter:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,124,255,.18);
}

/* Legacy slider parts: hidden (we keep selectors defensive in case older markup remains) */
.alphaSlider__track,
.alphaSlider__range,
.alphaSlider__bubble{
  display: none !important;
}
.alphaSlider__track{
  position: relative;
  padding-top: 12px;
}
.alphaSlider__range{
  width: 100%;
}
.alphaSlider__bubble{
  position:absolute;
  top: -2px;
  left: 0;
  transform: translateX(-50%);
  min-width: 32px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,1);
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: auto; /* allow proxy drag */
}
.alphaSlider__meta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  display:flex;
  gap: 10px;
  align-items:center;
}
/* Meta (total count) removed from markup; keep defensive hide if legacy HTML remains */
.alphaSlider__meta{ display:none !important; }

/* Toast (bottom acknowledgement) */
.toast{
  position: fixed;
  left: 50%;
  /* Move higher so it stays visible above the fixed actions bar */
  bottom: calc(var(--actions-h) + var(--actions-gap) + 14px);
  transform: translateX(-50%) translateY(12px);
  padding: 14px 18px;
  border-radius: 999px;
  /* Higher contrast + more presence on dark modal backgrounds */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.28);
  color: rgba(0,0,0,1);
  font-weight: 950;
  letter-spacing: .15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9500;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  max-width: calc(100vw - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.toast--anchored{
  /* When anchored, JS controls top/bottom + left. Keep it above overlays but below authgate. */
  bottom: auto;
  z-index: 9500;
}
.toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== "Gestion lignes" (settings) ===== */
.cfg-root{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.cfg-section{
  padding: 10px 10px 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.cfg-section__hd{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.cfg-section__title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  color: rgba(255,255,255,.94);
}
.cfg-section__meta{
  font-size: 12px;
  color: rgba(255,255,255,.66);
  line-height: 1.25;
}
.cfg-section__actions{
  display:flex;
  justify-content:flex-end;
}
.cfg-section__bd{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  overflow: hidden;
}
.cfg-card__hd{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.cfg-card__titles{ min-width: 0; }
.cfg-card__title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 14px;
  color: rgba(255,255,255,1);
}
.cfg-card__sub{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255,255,255,.66);
  white-space: normal;
  line-height: 1.2;
}
.cfg-card__bd{
  padding: 12px;
}
.cfg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cfg-grid--wide{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 920px){
  .cfg-grid, .cfg-grid--wide{ grid-template-columns: 1fr; }
}
.cfg-field{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.cfg-field__label{
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .15px;
  color: rgba(255,255,255,.68);
}

/* ===== Settings: pizzas per slot modal ===== */
.pizzas-slot-modal{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pizzas-slot-modal__hint{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.84);
  font-weight: 800;
  line-height: 1.3;
}
.pizzas-slot-modal__input{
  width: 100%;
}
.pizzas-slot-modal__status{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.pizzas-slot-modal__status--success{
  color: rgba(46,204,113,1);
  border-color: rgba(46,204,113,.28);
  background: rgba(46,204,113,.10);
}
.pizzas-slot-modal__status--error{
  color: rgba(255,255,255,1);
  border-color: rgba(211,59,69,.32);
  background: rgba(211,59,69,.16);
}

/* ===== "Gestion imprimantes" (settings) ===== */
.pm-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-status{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pm-status.pm-status--error{
  color: rgba(211,59,69,1);
  font-weight: 850;
}
.pm-create{
  margin-top: 10px;
}
.pm-list{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.pm-card__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pm-card__badges{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pm-pill{
  font-weight: 900;
}
.pm-pill--active{
  background: rgba(31,143,79,.18);
  border-color: rgba(31,143,79,.32);
  color: rgba(255,255,255,1);
}
.pm-pill--inactive{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}
.cfg-field__hint{
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1px;
  color: rgba(255,255,255,.58);
}
.pm-meta{
  margin-top: 6px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}