/*
 * Charte Chœur et Choré (reprise de choeur-et-chore.fr) : fond noir, texte blanc, rouge #cd0101, or #dcc7a0.
 * Jetons de couleur + composants du plan de salle et du panier, partagés par le site public et le back-office.
 */
:root {
    --c-red: #cd0101;
    --c-red-dark: #a30000;
    --c-gold: #dcc7a0;
    --c-ink: #ffffff;
    --c-muted: #b3b3b3;
    --c-line: #2b2b2b;
    --c-bg: #0c0c0c;
    --c-card: #000000;
    --c-surface: #141414;
    --c-ok: #4cc36f;
    --c-warn: #f0b34a;
    --c-danger: #ff6b6b;
    --font-title: "Playfair Display", Georgia, serif;
    --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 8px;
}

/* Page de sélection */
.select-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .select-layout { grid-template-columns: 1fr; } }
.cart { position: sticky; top: 16px; }
.cart-line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: .9rem; }
.cart-line select { padding: 6px 8px; font-size: .85rem; }
.cart-line .seat-tag { background: var(--c-red); color: #fff; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.cart-line button.remove { background: none; border: 0; color: var(--c-muted); cursor: pointer; font-size: 1.1rem; }
.cart-line button.remove:hover { color: #fff; }
.cart-total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; padding: 14px 0; }
.qty-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.qty { display: inline-flex; align-items: center; gap: 10px; }
.qty button { width: 34px; height: 34px; border-radius: 6px; border: 2px solid var(--c-red); background: var(--c-red); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.qty button:hover { background: #a30000; border-color: #a30000; }

/* Plan de salle : toujours sur fond noir, comme la scène */
.plan-wrap { background: #000; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px; overflow-x: auto; }
.plan-svg { display: block; width: 100%; min-width: 620px; height: auto; user-select: none; }
.plan-svg .decor-stage { fill: #5b0000; stroke: var(--c-red); stroke-width: 1; }
.plan-svg .decor-stage-text { fill: var(--c-gold); font: 600 18px var(--font-body); letter-spacing: .12em; text-anchor: middle; dominant-baseline: middle; }
.plan-svg .decor-rect { fill: #161616; stroke: #333; }
.plan-svg .decor-text { fill: var(--c-muted); font: 500 14px var(--font-body); text-anchor: middle; dominant-baseline: middle; }
.plan-svg .seat { cursor: pointer; }
.plan-svg .seat rect { fill: color-mix(in srgb, var(--zone, #8a8a8a) 24%, #111); stroke: var(--zone, #7d7d7d); stroke-width: 1.5; rx: 5; transition: fill .1s; }
.plan-svg .seat text { font: 600 10px var(--font-body); text-anchor: middle; dominant-baseline: central; fill: #eee; pointer-events: none; }
.plan-svg .seat:hover rect, .plan-svg .seat:focus rect { fill: #4a0000; stroke: #ff4d4d; }
.plan-svg .seat:focus { outline: none; }
.plan-svg .seat--selected rect { fill: var(--c-red); stroke: #ff6a6a; }
.plan-svg .seat--selected text { fill: #fff; }
.plan-svg .seat--taken { cursor: not-allowed; }
.plan-svg .seat--taken rect, .plan-svg .seat--taken:hover rect { fill: #242424; stroke: #383838; }
.plan-svg .seat--taken text { fill: #666; }
.plan-svg .seat--paid rect, .plan-svg .seat--paid:hover rect { fill: #10331b; stroke: var(--c-ok); }
.plan-svg .seat--paid text { fill: #bff0cd; }
.plan-svg .seat--pending rect, .plan-svg .seat--pending:hover rect { fill: #3a2a08; stroke: var(--c-warn); }
.plan-svg .seat--pending text { fill: #f6dca6; }
.plan-svg .seat--checked rect, .plan-svg .seat--checked:hover rect { fill: #0f2a3d; stroke: #4c9be0; }
.plan-svg .seat--checked text { fill: #b9dcf7; }
.plan-svg .row-label { font: 700 11px var(--font-body); fill: #8a8a8a; text-anchor: middle; dominant-baseline: central; }
.plan-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--c-muted); margin-top: 10px; }
.plan-legend[hidden] { display: none; }
.plan-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #7d7d7d; vertical-align: -2px; margin-right: 6px; background: #111; }
.plan-legend i.zone { border-width: 1.5px; }
.plan-legend i.sel { background: var(--c-red); border-color: #ff6a6a; }
.plan-legend i.tak { background: #242424; border-color: #383838; }
.plan-legend i.paid { background: #10331b; border-color: var(--c-ok); }
.plan-legend i.pend { background: #3a2a08; border-color: var(--c-warn); }

.plan-svg .seat--readonly { cursor: default; }
.plan-svg .seat--readonly:hover rect { fill: color-mix(in srgb, var(--zone, #8a8a8a) 24%, #111); stroke: var(--zone, #7d7d7d); }
.plan-svg .seat--readonly rect { stroke-dasharray: 3 2; }
.qty-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--c-line); font-weight: 600; font-size: .9rem; }
.zone-pick { margin-bottom: 8px; }
.zone-pick select { width: 100%; }
.seat-note { font-size: .88rem; color: var(--c-muted); margin: 0 0 12px; }

/* Contrôle d'entrée en direct */
.plan-svg .seat--entered rect, .plan-svg .seat--entered:hover rect { fill: #1f9d55; stroke: #7ee2a1; }
.plan-svg .seat--entered text { fill: #fff; }
.plan-svg .seat--expected rect, .plan-svg .seat--expected:hover rect { fill: #2a2a2a; stroke: var(--c-gold); }
.plan-svg .seat--expected text { fill: var(--c-gold); }
.plan-svg .seat--flash rect { animation: seat-flash 1.1s ease-in-out 2; }
@keyframes seat-flash { 0%, 100% { } 50% { } }
.live-plan .plan-svg .seat { cursor: default; }

/* Plan « théâtre » : cône de lumière, scène qui rayonne, sièges avec dossier */
.plan-svg .stage-cone { pointer-events: none; }
.plan-svg .decor-stage { }
.plan-svg .seat-back { opacity: .85; }
.plan-svg .seat--selected { }
.plan-svg .seat--selected .seat-back { opacity: 1; }
.plan-svg .seat--entered { }
.plan-svg .seat:not(.seat--taken):not(.seat--readonly):hover { }
.plan-svg .seat--taken .seat-back { opacity: .5; }

/* Design plat : cône de lumière en aplat translucide, sélection par contour */
.plan-svg .stage-cone { fill: rgba(205, 1, 1, .13); }
.plan-svg .seat--selected rect { stroke-width: 2.5; }


/* ═════ Deux signaux distincts : la ZONE = couleur du dossier · l'ÉTAT = couleur de l'assise et du numéro ═════ */
.plan-svg .seat .seat-back { fill: var(--zone, #6a6a6a); stroke: none; opacity: 1; }
.plan-svg .seat .seat-cush { fill: #1c1c1c; stroke: #8a8a8a; stroke-width: 1.5; }
.plan-svg .seat text { fill: #eee; }
.plan-svg .seat:hover .seat-cush, .plan-svg .seat:focus .seat-cush { fill: #3a1212; stroke: #ff5a4a; }
.plan-svg .seat--selected .seat-cush, .plan-svg .seat--selected:hover .seat-cush { fill: var(--c-red); stroke: #ff8a7a; stroke-width: 2.5; }
.plan-svg .seat--selected text { fill: #fff; }
.plan-svg .seat--taken .seat-cush, .plan-svg .seat--taken:hover .seat-cush { fill: #262626; stroke: #3c3c3c; stroke-width: 1.5; }
.plan-svg .seat--taken text { fill: #6d6d6d; }
.plan-svg .seat--taken .seat-back { opacity: .45; }
.plan-svg .seat--paid .seat-cush, .plan-svg .seat--paid:hover .seat-cush { fill: #0f3a1f; stroke: #4cc36f; }
.plan-svg .seat--paid text { fill: #bff0cd; }
.plan-svg .seat--pending .seat-cush, .plan-svg .seat--pending:hover .seat-cush { fill: #3d2c08; stroke: #f0b34a; }
.plan-svg .seat--pending text { fill: #f6dca6; }
.plan-svg .seat--expected .seat-cush, .plan-svg .seat--expected:hover .seat-cush { fill: #2a2a2a; stroke: var(--c-gold); stroke-width: 2; }
.plan-svg .seat--expected text { fill: var(--c-gold); }
.plan-svg .seat--entered .seat-cush, .plan-svg .seat--entered:hover .seat-cush { fill: #1f9d55; stroke: #7ee2a1; stroke-width: 2; }
.plan-svg .seat--entered text { fill: #fff; }
.plan-svg .seat--checked .seat-cush, .plan-svg .seat--checked:hover .seat-cush { fill: #123a55; stroke: #4c9be0; }
.plan-svg .seat--checked text { fill: #b9dcf7; }
.plan-svg .seat--readonly .seat-cush, .plan-svg .seat--readonly:hover .seat-cush { fill: #1c1c1c; stroke: #8a8a8a; stroke-dasharray: 3 2; }
.plan-svg .seat--taken .seat-cush { stroke-dasharray: none; }
.plan-svg .seat--focus .seat-cush { stroke: #fff; stroke-width: 3; }
.plan-svg .seat--freezone .seat-cush { stroke-dasharray: 3 2; }
/* Légende : un mini siège dont seul le dossier porte la couleur de la zone */
.plan-legend i.zone { width: 14px; height: 14px; border-radius: 3px; background: #1c1c1c; border: 1.5px solid #8a8a8a; border-top: 5px solid var(--zone, #6a6a6a); }
.plan-legend i.ent { background: #1f9d55; border-color: #7ee2a1; }
.plan-legend i.exp { background: #2a2a2a; border-color: var(--c-gold); }
/* Contrôle d'entrée : les places attendues gardent la couleur pleine de leur zone */
.plan-svg .seat--expected .seat-back, .plan-svg .seat--entered .seat-back, .plan-svg .seat--pending .seat-back { opacity: 1; }

/* Le dossier garde toujours la couleur de sa zone : ni le survol ni un état ne la remplacent (seule l'assise change) */
.plan-svg .seat rect.seat-back, .plan-svg .seat:hover rect.seat-back, .plan-svg .seat:focus rect.seat-back { fill: var(--zone, #6a6a6a); stroke: none; }

/* Places bloquées (hors vente) : assise grisée hachurée, numéro éteint */
.plan-svg .seat--blocked .seat-cush, .plan-svg .seat--blocked:hover .seat-cush { fill: #2b2b2b; stroke: #9a9a9a; stroke-width: 1.5; stroke-dasharray: 2 2; }
.plan-svg .seat--blocked text { fill: #8a8a8a; }
.plan-legend i.blk { background: #2b2b2b; border-color: #9a9a9a; border-style: dashed; }

/* Place PMR : petit pictogramme au coin du dossier */
.plan-svg .seat .seat-pmr { font: 700 9px var(--font-body, sans-serif); text-anchor: end; dominant-baseline: central; fill: #fff; pointer-events: none; }
.plan-legend i.pmr { background: #1c1c1c; border-color: #8a8a8a; position: relative; }
.plan-legend i.pmr::after { content: "♿"; position: absolute; inset: -3px 0 0 0; font-size: 10px; line-height: 14px; text-align: center; color: #fff; }