/* Plan interactif des emplacements (js/plan-emplacements.js) */
.pe { --pe-encre: var(--encre, #0b1b22); --pe-soleil: var(--soleil, #ffd100); --pe-cram: var(--cramoisi, #b5113f);
      --pe-libre: #1f8a3b; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.pe [hidden] { display: none !important; }

.pe-onglets { display: flex; flex-wrap: wrap; gap: .4rem; }
.pe-onglet { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; padding: .45rem .8rem;
  border: 3px solid var(--pe-encre); border-radius: 12px; background: #fff; color: var(--pe-encre);
  font: inherit; font-weight: 800; font-size: .9rem; line-height: 1.2; cursor: pointer; text-align: left; }
.pe-onglet small { font-weight: 600; font-size: .78rem; opacity: .8; }
.pe-onglet--actif { background: var(--pe-soleil); box-shadow: 3px 3px 0 var(--pe-encre); }
.pe-onglet:focus-visible, .pe-btn:focus-visible { outline: 3px solid var(--pe-cram); outline-offset: 2px; }

.pe-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pe-btn { min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem; border: 3px solid var(--pe-encre); border-radius: 10px;
  background: #fff; color: var(--pe-encre); font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.pe-btn--txt { font-size: .85rem; }
.pe-btn:disabled { opacity: .4; cursor: default; }
.pe-cherche { width: 9.5rem; height: 2.4rem; padding: 0 .6rem; border: 3px solid var(--pe-encre); border-radius: 10px; font: inherit; }
.pe-legende { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-left: auto; font-size: .82rem; font-weight: 700; }
.pe-legende span { display: inline-flex; align-items: center; gap: .3rem; }
.pe-l { display: inline-block; width: 1rem; height: .8rem; border-radius: 3px; border: 2px solid; }
.pe-l--libre { background: rgba(31, 138, 59, .25); border-color: var(--pe-libre); }
.pe-l--choisi { background: var(--pe-soleil); border-color: var(--pe-encre); }
.pe-l--pris { background: rgba(70, 70, 70, .6); border-color: #333; }

.pe-scene { position: relative; overflow: auto; max-height: 72vh; border: 3px solid var(--pe-encre); border-radius: 14px;
  background: #fff; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pe-svg { display: block; width: 100%; height: auto; max-width: none; }

.pe-e { stroke-width: 2px; vector-effect: non-scaling-stroke; transition: fill .12s; }
.pe-e--libre { fill: rgba(31, 138, 59, .22); stroke: var(--pe-libre); cursor: pointer; }
.pe-e--libre:hover { fill: rgba(31, 138, 59, .45); }
.pe-e--proposable { fill: rgba(31, 138, 59, .4); stroke-dasharray: 6 4; stroke-width: 3px; }
.pe-e--bloque { fill: rgba(31, 138, 59, .08); stroke: rgba(31, 138, 59, .45); cursor: not-allowed; }
.pe-e--choisi { fill: var(--pe-soleil); fill-opacity: .8; stroke: var(--pe-encre); stroke-width: 3px; cursor: pointer; }
.pe-e--pris { fill: rgba(70, 70, 70, .55); stroke: #333; cursor: not-allowed; }
.pe--lecture .pe-e { cursor: default; }
.pe--lecture .pe-e--libre:hover { fill: rgba(31, 138, 59, .22); }
.pe-e:focus { outline: none; }
.pe-e:focus-visible { stroke: var(--pe-cram); stroke-width: 4px; }
.pe-e--flash { animation: pe-flash .6s ease-in-out 3; }
@keyframes pe-flash { 50% { fill: var(--pe-cram); fill-opacity: .7; } }

.pe-zoom { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .2rem .15rem .55rem; border: 2px dashed var(--pe-encre); border-radius: 12px; }
.pe-zoom__lib { font-weight: 800; font-size: .85rem; }
.pe-e--candidat { stroke: var(--pe-cram); stroke-width: 4px; }
.pe-action { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .6rem .9rem; border: 3px solid var(--pe-encre); border-radius: 12px; background: #fff; }
.pe-action__txt { margin: 0; font-weight: 600; min-width: 0; flex: 1 1 16rem; }
.pe-action__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.pe-suite { min-height: 2.6rem; padding: .4rem 1.1rem; border: 3px solid var(--pe-encre); border-radius: 999px; background: var(--pe-cram);
  color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--pe-encre); }
.pe-suite:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--pe-encre); }
.pe-suite:focus-visible { outline: 3px solid var(--pe-soleil); outline-offset: 2px; }
.pe-action__raison { color: var(--pe-cram); font-weight: 700; }
.pe-ajout { min-height: 2.6rem; padding: .4rem 1rem; border: 3px solid var(--pe-encre); border-radius: 999px; background: var(--pe-soleil);
  color: #0b1b22; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--pe-encre); }
.pe-ajout:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--pe-encre); }
.pe-ajout--retirer { background: #ffe5e3; }
.pe-ajout:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.pe-ajout:focus-visible { outline: 3px solid var(--pe-cram); outline-offset: 2px; }
.pe-message { margin: 0; font-weight: 700; color: var(--pe-cram); }
.pe-message:empty { display: none; }
.pe-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .6rem .9rem; border-radius: 12px; background: #fff8dc; border: 2px dashed var(--pe-encre); }
.pe-resume p { margin: 0; }
.pe-vide { font-weight: 600; }

@media (max-width: 560px) {
  .pe-legende { margin-left: 0; width: 100%; }
  .pe-scene { max-height: 65vh; }
}
@media (prefers-reduced-motion: reduce) { .pe-e { transition: none; } .pe-e--flash { animation: none; stroke-width: 5px; } }

/* Page de réservation */
.resa-plan { gap: .7rem; }
.resa-tarif--plan input[readonly] { background: #f4f1e6; border-style: dashed; pointer-events: none; }

/* Réserver : seulement après avoir ajouté au moins un emplacement */
.resa-empl-requis { margin: 0; font-weight: 800; color: var(--cramoisi, #b5113f); }
.resa-boutons .btn:disabled { opacity: .45; cursor: not-allowed; }