/* Page de choix des sièges (acheteur). Plan + panier de sélection. */

.pc-entete { margin: 8px 0 4px; }
.pc-sous { color: var(--encre-douce, #675379); margin-top: 2px; }

.pc-disposition { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.pc-plan-col { flex: 1 1 620px; min-width: 0; }

/* Légende des tarifs */
.pc-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; }
.pc-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--encre, #241436); }
.pc-leg-pastille { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); }
.pc-leg-indispo { background: #C9C9D2; }

/* Cadre + plan (zoom horizontal si nécessaire) */
.pc-plan-cadre { background: var(--carte, #fff); border: 1px solid #E7D4E1; border-radius: 14px; padding: 8px; overflow: auto; }
#pc-plan { position: relative; margin: 0 auto; background: var(--carte, #fff); user-select: none; }
.pt-overlay { position: absolute; inset: 0; }
.pc-aide { color: var(--encre-douce, #675379); font-size: 13px; margin-top: 8px; }
/* La consigne de glissement ne concerne que les écrans où le plan déborde. Sur
   un ordinateur, la salle tient : la phrase serait fausse. */
.pc-aide--glisser { display: none; }
@media (max-width: 820px) {
  .pc-plan-cadre.pc-plan-cadre--deborde + .pc-aide--glisser { display: block; font-weight: 600; }
  /* Et le bord droit s'ombre tant qu'il reste de la salle à voir : les deux
     voiles clairs sont attachés au contenu et glissent avec lui, l'ombre reste
     collée au cadre. */
  .pc-plan-cadre {
    background:
      linear-gradient(to right, var(--carte, #fff), transparent) left center,
      linear-gradient(to left, var(--carte, #fff), transparent) right center,
      radial-gradient(farthest-side at 0 50%, rgba(74,35,90,.22), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(74,35,90,.22), transparent) right center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Sièges */
.siege {
  position: absolute; border-radius: 5px 5px 3px 3px; cursor: pointer;
  border: 1px solid rgba(42,33,56,.28); box-shadow: 0 1px 1.5px rgba(42,33,56,.18);
  transition: transform .06s ease, box-shadow .06s ease; padding: 0;
}
.siege::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); }
.siege:hover { transform: translateY(-1px) scale(1.12); box-shadow: 0 3px 8px rgba(42,33,56,.32); z-index: 3; }
.siege-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7.5px; font-weight: 700; line-height: 1; color: var(--encre, #241436); pointer-events: none; }
.siege--indispo { background: #C9C9D2 !important; cursor: not-allowed; opacity: .8; }
.siege--indispo:hover { transform: none; box-shadow: 0 1px 1.5px rgba(42,33,56,.18); }
.siege--indispo .siege-num { color: #8b8596; }
.siege--choisi { outline: 3px solid var(--violet, #C4188F); outline-offset: 1px; z-index: 4; transform: scale(1.12); }
.siege--choisi::before { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.siege--choisi .siege-num { opacity: 0; }

/* Repères / PMR / piliers / rangs (mêmes styles que l'éditeur) */
.pt-repere { position: absolute; pointer-events: none; z-index: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pt-repere-lbl { font-family: var(--font-titres, sans-serif); font-weight: 800; letter-spacing: 2px; font-size: 16px; color: var(--encre-douce, #675379); }
.pt-repere--scene { background: linear-gradient(180deg, #5a4d76 0%, var(--violet, #C4188F) 100%); box-shadow: 0 3px 12px rgba(42,33,56,.22), inset 0 1px 0 rgba(255,255,255,.14); }
.pt-repere--scene .pt-repere-lbl { color: #fff; font-size: 19px; letter-spacing: 5px; }
.pt-repere--scene::before { content: ''; position: absolute; left: 12%; right: 12%; top: 6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--framboise, #E84393), transparent); }
.pt-repere--regie { background: var(--violet-pale, #FCE4F6); border: 1.5px dashed #B0A3C4; }
.pt-repere--regie .pt-repere-lbl { color: var(--violet, #C4188F); font-size: 13px; letter-spacing: 3px; opacity: .9; }
.pt-pmr-frame { position: absolute; pointer-events: none; border: 1.5px solid #9D90AE; border-radius: 5px; background: rgba(157,144,174,.06); }
.pt-pmr-lbl { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-family: var(--font-titres, sans-serif); font-weight: 700; font-size: 9px; letter-spacing: 1px; color: var(--encre-douce, #675379); }
.pt-pmr-lbl::before { content: ''; display: block; width: 15px; height: 15px; margin: 0 auto 1px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23675379' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='1.6'/%3E%3Cpath d='M6 8.5l6 1.5 6-1.5'/%3E%3Cpath d='M12 10v5'/%3E%3Cpath d='M9 21l3-6 3 6'/%3E%3C/svg%3E"); }
.pt-pilier { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #B9AEC8; border: 2px solid var(--encre-douce, #675379); box-shadow: 0 1px 2px rgba(42,33,56,.3); pointer-events: none; }
.pt-rang { position: absolute; pointer-events: none; width: 16px; height: 16px; line-height: 16px; text-align: center; font-family: var(--font-titres, sans-serif); font-weight: 800; font-size: 11px; color: var(--violet, #C4188F); }

/* Panier de sélection */
.pc-panier { flex: 0 0 290px; position: sticky; top: 16px; background: var(--carte, #fff); border: 1px solid #E7D4E1; border-radius: 14px; padding: 16px; }
.pc-panier h2 { margin: 0 0 10px; font-size: 1.2rem; }
.pc-choix { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-vide { color: var(--encre-douce, #675379); font-size: 14px; }
.pc-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; background: var(--violet-pale, #FCE4F6); border-radius: 8px; padding: 6px 10px; }
.pc-ligne-place { font-weight: 700; font-size: 14px; }
.pc-ligne-tarif { grid-column: 1; color: var(--encre-douce, #675379); font-size: 12.5px; }
.pc-retirer { grid-column: 2; grid-row: 1 / span 2; background: none; border: none; cursor: pointer; color: var(--encre-douce, #675379); font-size: 15px; line-height: 1; padding: 4px; }
.pc-retirer:hover { color: var(--framboise, #E84393); }
.pc-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #E7E0EE; padding-top: 10px; font-size: 15px; }
.pc-total strong { font-size: 1.35rem; }
.pc-avert { background: #FDECEF; border: 1px solid #F3B9C7; color: #9B1C3D; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin: 10px 0 0; }
.pc-avert[hidden] { display: none; }
.pc-panier .btn { width: 100%; margin-top: 10px; }
.pc-note { color: var(--encre-douce, #675379); font-size: 12px; margin-top: 8px; text-align: center; }

@media (max-width: 880px) {
  .pc-panier { position: static; flex-basis: 100%; }
}