/* Plan de l'arène : partagé entre le site public et l'administration. */
:root {
  --sm-ink: var(--ink, #2a1d13); --sm-paper: var(--paper, #fffdf8); --sm-straw: var(--straw, #f3e6c8);
  --sm-dust: var(--dust-deep, #d4bd92); --sm-red: var(--red, #a8231b); --sm-muted: var(--muted, #6b5a48);
  --sm-display: var(--display, "Rye", Georgia, serif); --sm-body: var(--body, Arial, sans-serif); --sm-radius: var(--radius, 6px);
}
/* ─── Plan de l'arène ───────────────────────────────────── */
.plan-section { background: var(--sm-straw); border-bottom: 2px solid var(--sm-ink); padding: 2.25rem 0 2.5rem; }
.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem 2rem; margin-bottom: 1rem; }
.plan-title { font-family: var(--sm-display); font-weight: 400; font-size: 2rem; margin: 0; font-variation-settings: normal; }
.plan-head .hint { max-width: 60ch; margin: 0; }
.seatmap {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 1.5rem;
  grid-template-areas: "map panel" "legend panel" "chips panel";
  align-items: start;
}
.seatmap > .alert { grid-column: 1 / -1; }
.sm-scroll { grid-area: map; overflow-x: auto; background: var(--sm-paper); border: 2px solid var(--sm-ink); border-radius: var(--sm-radius); }
.sm-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.sm-arena rect { fill: var(--sm-dust); stroke: var(--sm-ink); stroke-width: 3; }
.sm-arena .sm-arena-line { fill: none; stroke: #b99f72; stroke-width: 2; stroke-dasharray: 10 8; }
.sm-arena-label { font-family: var(--sm-display); font-size: 40px; fill: #8a6f45; letter-spacing: .08em; }
.sm-sec { cursor: pointer; outline: none; }
.sm-sec rect { stroke: var(--sm-ink); stroke-width: 2.5; transition: filter .12s, stroke-width .12s; }
.sm-zone rect { fill-opacity: .82; }
.sm-sec:hover rect, .sm-sec:focus-visible rect { filter: brightness(1.15); stroke-width: 4; }
.sm-sec-on rect { stroke: var(--sm-straw); stroke-width: 6; }
.sm-sec:focus-visible rect { stroke: var(--sm-straw); stroke-dasharray: 8 5; }
.sm-sec-off rect { fill: #9b8e7c !important; fill-opacity: .7; }
.sm-sec-name { fill: #fff; font-weight: 800; font-family: var(--sm-body); pointer-events: none; }
.sm-sec-price { fill: var(--sm-straw); font-weight: 700; font-size: 20px; font-family: var(--sm-body); pointer-events: none; }
.sm-row-hint { stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.sm-tip {
  position: absolute; z-index: 5; pointer-events: none; width: 230px;
  background: var(--sm-ink); color: var(--sm-straw); border-radius: 4px; padding: .6rem .75rem;
  box-shadow: 3px 3px 0 var(--sm-red); font-size: .88rem; display: grid; gap: .15rem;
}
.sm-tip strong { font-size: 1rem; color: #fff; }
.sm-tip-avail { opacity: .85; }
.sm-tip-cta { color: #fff; font-weight: 700; margin-top: .2rem; }
.sm-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; font-weight: 600; }
.sm-leg { display: inline-flex; align-items: center; gap: .4rem; }
.sm-leg i { width: 14px; height: 14px; border: 2px solid var(--sm-ink); border-radius: 3px; display: inline-block; }
.sm-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-chip {
  font: 700 .85rem/1 var(--sm-body); padding: .45rem .7rem; cursor: pointer;
  background: var(--sm-paper); border: 2px solid var(--sm-ink); border-left: 8px solid var(--c, var(--denim)); border-radius: 4px;
}
.sm-chip[aria-pressed="true"] { background: var(--sm-ink); color: var(--sm-straw); }
.sm-panel {
  grid-area: panel; background: var(--sm-paper); border: 2px solid var(--sm-ink); border-radius: var(--sm-radius);
  padding: 1rem 1.1rem 1.1rem; min-height: 200px;
}
.sm-panel-head h3 { font-family: var(--sm-display); font-weight: 400; font-size: 1.6rem; margin-bottom: .1rem; }
.sm-panel-price { font-weight: 800; font-size: 1.1rem; color: var(--sm-red); margin-bottom: .6rem; }
.sm-seat-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; margin-bottom: .6rem; }
.sm-seat-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sm-seat-legend .seat { width: 16px; height: 16px; font-size: 0; }
.sm-finder { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; font-size: .9rem; font-weight: 600; }
.seatmap .sm-finder input { width: 3.6rem !important; flex: none; padding: .35rem .4rem; border: 2px solid var(--sm-ink); border-radius: 4px; font: inherit; }
.sm-grid-wrap { overflow-x: auto; padding-bottom: .25rem; }
.sm-stage {
  text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--sm-dust); border: 2px solid var(--sm-ink); border-radius: 4px; padding: .2rem; margin-bottom: .5rem; min-width: max-content;
}
.sm-grid { display: grid; gap: 4px; justify-content: center; min-width: max-content; user-select: none; -webkit-user-select: none; }
.sm-row { display: flex; gap: 3px; align-items: center; }
.sm-row-label { width: 1.5rem; text-align: center; font-weight: 800; font-size: .8rem; color: var(--sm-muted); }
.seat {
  width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center;
  font: 700 10px/1 var(--sm-body); border: 2px solid var(--sm-ink); border-radius: 6px 6px 3px 3px;
  cursor: pointer; touch-action: pan-y; background: #fff; color: var(--sm-ink);
}
.seat-free:hover { background: var(--sm-straw); transform: translateY(-1px); }
.seat-sel { background: var(--sm-red); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.seat-taken { background: #bdb3a4; color: #8a7f70; border-color: #8a7f70; cursor: not-allowed; }
.seat-held { background: #5b3f8c; color: #fff; border-color: #3d2a60; }
.seat:disabled { cursor: not-allowed; }
.sm-info { margin: .7rem 0 0; font-size: .9rem; min-height: 1.4em; font-weight: 600; }
.sm-warn { color: var(--sm-red); }
.sm-zone-types { display: grid; gap: .6rem; }
.sm-zone-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--sm-dust); }
.sm-zone-price { color: var(--sm-muted); font-size: .9rem; }
.sm-zone-val { min-width: 2.4rem; display: grid; place-items: center; font-weight: 800; }
.official-plan { margin-top: 1rem; }
.official-plan summary { cursor: pointer; font-weight: 700; }
.official-plan img { display: block; margin-top: .75rem; border: 2px solid var(--sm-ink); border-radius: var(--sm-radius); background: #fff; }

@media (max-width: 860px) {
  .seatmap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "legend" "chips" "panel"; }
}
.admin-map .seatmap { margin: 1rem 0 1.5rem; }

.seat-acc { background: #dbe8f5; border-color: #1f3a56; font-size: 13px; }
.seat-acc.seat-sel { background: var(--sm-red); color: #fff; }
.seat-acc.seat-taken { background: #bdb3a4; }
.sm-acc-note { font-size: .82rem; margin: .5rem 0 0; }
/* Écrans tactiles : sièges plus grands pour le doigt (le panneau défile horizontalement si la rangée est longue). */
@media (pointer: coarse) {
  .seat { width: 34px; height: 34px; font-size: 11px; }
  .sm-row { gap: 4px; }
  .sm-chip { padding: .6rem .8rem; }
}