/* Habillage de la billetterie : ce qui s'ajoute au thème Canvas du site (assets/css/style.css, mode sombre).
   Les boutons, champs, titres et le pied viennent du thème ; ici, seulement les éléments propres au parcours d'achat. */
:root {
	--cps-bleu: #3f49a9;
	--cps-jaune: #fab501;
	--cps-orange: #e7411d;
	--cps-panneau: #262c3d;
	--cps-bordure: rgba(255, 255, 255, .14);
	--cps-texte-doux: #adb5bd;
}

/* Le thème coupe le débordement du contenu par overflow: hidden, ce qui empêche tout position: sticky en dessous ;
   clip coupe pareil sans faire du bloc une zone de défilement (flow-root garde le contexte de formatage de hidden) */
#content .content-wrap { overflow: clip; display: flow-root; }

/* Un élément caché le reste, même quand une règle plus bas lui donne un affichage (minuterie, lien « Continuer ») */
.billetterie [hidden] { display: none !important; }
.billetterie { padding: 20px 0 60px; }
.billetterie h1 { margin-bottom: 1.2rem; }
.billetterie small { color: var(--cps-texte-doux); }
.billetterie .button { margin: 0; }
.billetterie select { width: auto; display: inline-block; }

/* Barre d'étapes du parcours d'achat, sous l'en-tête */
.cps-bande { background: var(--cps-panneau); border-bottom: 1px solid var(--cps-bordure); }
.cps-etapes { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 14px 0; list-style: none; counter-reset: etape; font-size: .9rem; color: var(--cps-texte-doux); }
.cps-etapes li { counter-increment: etape; display: flex; align-items: center; gap: 8px; }
.cps-etapes li::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cps-bordure); font-weight: 600; }
.cps-etapes li:not(:last-child)::after { content: ""; width: 26px; height: 1px; background: var(--cps-bordure); }
.cps-etapes li.est-active { color: #fff; font-weight: 600; }
.cps-etapes li.est-active::before { background: var(--cps-jaune); border-color: var(--cps-jaune); color: #212529; }

/* Avis, erreurs, minuterie */
.billetterie-minuterie { display: inline-block; margin: 0 0 22px; padding: .5rem .9rem; border: 1px solid var(--cps-jaune); border-radius: 4px; color: #fff; }
.billetterie-minuterie strong { color: var(--cps-jaune); font-variant-numeric: tabular-nums; }
.billetterie-avis, .billetterie-erreurs { margin: 0 0 22px; padding: .7rem 1rem; border-left: 4px solid var(--cps-orange); background: rgba(231, 65, 29, .14); color: #fff; list-style: none; }

/* Première page : bascule, calendrier, liste */
.billetterie-vues { display: flex; gap: 8px; margin: 0 0 22px; }
.billetterie-vues .button[aria-pressed="false"] { background: transparent; color: inherit; border: 1px solid var(--cps-bordure); }
.billetterie-vues .button[aria-pressed="true"] { font-weight: 700; text-decoration: underline; }
.billetterie-calendrier { width: 100%; max-width: 730px; margin-bottom: 36px; border-collapse: collapse; table-layout: fixed; caption-side: top; }
.billetterie-calendrier caption { padding: 0 0 10px; color: #fff; font-size: 1.25rem; font-weight: 600; text-align: left; }
.billetterie-calendrier th { padding: 8px 6px; border: 0; border-bottom: 1px solid var(--cps-bordure); color: var(--cps-texte-doux); font-weight: 500; text-align: left; vertical-align: top; }
.billetterie-calendrier td { height: 86px; padding: 6px; border: 1px solid var(--cps-bordure); background: var(--cps-panneau); vertical-align: top; }
.billetterie-calendrier .hors-mois { background: transparent; }
.billetterie-calendrier__jour { display: block; color: var(--cps-texte-doux); font-size: .85rem; }
.billetterie-calendrier a.billetterie-calendrier__soir { display: block; margin-top: 4px; padding: 2px 10px; border-radius: 4px; text-align:center; background: var(--cps-jaune); color: #212529; font-weight: 600; text-decoration: none; }
.billetterie-calendrier a.billetterie-calendrier__soir:hover { background: #fff; }
.billetterie-calendrier a.billetterie-calendrier__soir small { color: #212529; }
.billetterie-calendrier .est-complet, .billetterie-calendrier .est-ferme { display: inline-block; margin-top: 4px; color: var(--cps-texte-doux); font-weight: 700; }
.billetterie-calendrier__soir small, .billetterie-soirs small { display: inline; font-weight: 400; font-size: .85em; }
.billetterie-soirs { margin: 0; padding: 0; list-style: none; columns: 3 240px; }
.billetterie-soirs li { padding: 6px 0; break-inside: avoid; }
.billetterie-suite { display: flex; align-items: center; gap: 16px; margin-top: 22px; }

/* Plan de salle : un panneau sombre comme celui de « Votre soirée », puis le plan que dessine l'addon (SVG, légende, repères,
   panneau de choix, panorama). La billetterie est en mode sombre seulement : le plan et ses couleurs sont faits pour un fond sombre. */
.billetterie-salle { position: relative; border: 1px solid var(--cps-bordure); border-radius: 8px; background: var(--cps-panneau); color: #f1f3f8; }
.billetterie-salle h2, .billetterie-salle__choix strong { color: #fff; }
.billetterie-salle h2 { margin-top: 0; font-size: 1.35rem; font-weight: 500; }
.billetterie-salle .billetterie-plan { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; border-radius: 6px; background: #1c2130; }

/* Zoom : le plan agrandi défile dans son cadre ; la molette, le pincement et le glissement à la souris y sont pris par le script.
   Les barres de défilement sont masquées : elles n'apportent rien de plus que le glissement et encombrent le plan. */
.billetterie-salle__cadre { overflow: auto; scrollbar-width: none; border-radius: 6px; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.billetterie-salle__cadre::-webkit-scrollbar { display: none; }
.billetterie-salle__cadre.est-glisse, .billetterie-salle__cadre.est-glisse .billetterie-place { cursor: grabbing; }
.billetterie-salle__zoom { display: flex; justify-content: flex-end; gap: 6px; margin: 8px 0 0; position: absolute;
	right: 10px;
	bottom: 10px;}
.billetterie-salle__zoom button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: #1c2130; color: #f1f3f8; font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.billetterie-salle__zoom button:disabled { opacity: .4; cursor: default; }

/* Le décor, tracé à partir des sections : la scène, une bande par section, le nom des commanditaires */
.billetterie-salle .billetterie-scene { fill: rgba(255, 255, 255, .05); }
.billetterie-salle .billetterie-scene-bord { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 3; stroke-linejoin: round; }
.billetterie-salle .billetterie-scene-nom { font-size: 72px; font-weight: 800; letter-spacing: 24px; fill: rgba(255, 255, 255, .65); pointer-events: none; }
.billetterie-salle .billetterie-bande { fill: rgba(255, 255, 255, .045); stroke: rgba(255, 255, 255, .1); stroke-width: 2; transition: fill .2s, stroke .2s; }
/* Les séparations en « T » des étages 2 et 3 (groupes de 2 × 2 places), tracées dans la bande, sous les places */
.billetterie-salle .billetterie-separation { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2.5; stroke-linecap: round; transition: stroke .2s; }
.billetterie-salle .billetterie-section-nom { font-size: 24px; font-weight: 600; fill: rgba(255, 255, 255, .7); pointer-events: none; }
.billetterie-salle .billetterie-section-nom--commanditaire { font-size: 21px; font-weight: 500; fill: rgba(255, 255, 255, .55); }
.billetterie-salle .billetterie-section-nom__fauteuil { font-size: 44px; dominant-baseline: middle; fill: rgba(255, 255, 255, 1)}

/* Une place libre prend la couleur de sa rangée (celle de la base, à défaut) ; les autres états la remplacent.
   Une place prise devient un petit point : on la reconnaît à sa forme, pas seulement à sa couleur. Chaque chaise est tournée
   par un groupe autour d'elle : transform-box déplacerait l'origine d'un attribut transform posé sur la place elle-même. */
.billetterie-salle .billetterie-place { cursor: pointer; stroke: transparent; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: opacity .2s; }
.billetterie-salle .billetterie-place[data-categorie="rangee-1"] { fill: #8f97ff; }
.billetterie-salle .billetterie-place[data-categorie="rangee-2"] { fill: #36c5cf; }
.billetterie-salle .billetterie-place[data-categorie="spa-vip"] { fill: #f28fd8; }
.billetterie-salle .billetterie-place:hover,
.billetterie-salle .billetterie-place:focus { stroke: #fff; outline: none; }
.billetterie-salle .billetterie-place.est-reduit { fill: #fab501; }
.billetterie-salle .billetterie-place.est-mien { fill: #45d483; stroke: #fff; }
.billetterie-salle .billetterie-place.est-retenu { fill: #1c2130; stroke: #ff7a52; stroke-dasharray: 6 5; }
.billetterie-salle .billetterie-place.est-vendu,
.billetterie-salle .billetterie-place.est-bloque,
.billetterie-salle .billetterie-place.est-indisponible { fill: #6b7390; stroke: transparent; transform: scale(.45); }
.billetterie-salle .billetterie-place.est-retenu,
.billetterie-salle .billetterie-place.est-vendu,
.billetterie-salle .billetterie-place.est-bloque,
.billetterie-salle .billetterie-place.est-indisponible { cursor: not-allowed; }
.billetterie-salle.est-occupee .billetterie-place { cursor: progress; }

/* Un étage choisi par son repère (ou survolé par sa bande) : ses places restent, les autres s'estompent */
.billetterie-plan[data-survol] .billetterie-section .billetterie-place { opacity: .2; }
.billetterie-plan[data-survol="1"] .billetterie-section[data-etage="1"] .billetterie-place,
.billetterie-plan[data-survol="2"] .billetterie-section[data-etage="2"] .billetterie-place,
.billetterie-plan[data-survol="3"] .billetterie-section[data-etage="3"] .billetterie-place { opacity: 1; }
.billetterie-plan[data-survol="1"] .billetterie-bande[data-etage="1"],
.billetterie-plan[data-survol="2"] .billetterie-bande[data-etage="2"],
.billetterie-plan[data-survol="3"] .billetterie-bande[data-etage="3"] { fill: rgba(143, 151, 255, .14); stroke: rgba(143, 151, 255, .55); }
.billetterie-plan[data-survol="2"] .billetterie-separations[data-etage="2"] .billetterie-separation,
.billetterie-plan[data-survol="3"] .billetterie-separations[data-etage="3"] .billetterie-separation { stroke: rgba(143, 151, 255, .6); }

/* Au-dessus du plan : la légende sur deux lignes (rangées et prix, puis état des places) ; le séparateur force la seconde */
.billetterie-salle__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 12px; }
.billetterie-salle__legende { flex: 1 1 18rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.billetterie-salle__legende li { display: inline-flex; align-items: center; gap: 6px; }
.billetterie-salle__legende .billetterie-pastille { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--couleur, #8f97ff); }
.billetterie-salle__legende [data-categorie="rangee-1"] { background: #8f97ff; }
.billetterie-salle__legende [data-categorie="rangee-2"] { background: #36c5cf; }
.billetterie-salle__legende [data-categorie="spa-vip"] { background: #f28fd8; border-radius: 2px; transform: rotate(45deg) scale(.85); }
.billetterie-salle__legende .est-reduit { background: #fab501; }
.billetterie-salle__legende .est-mien { background: #45d483; box-shadow: 0 0 0 2px #fff; }
.billetterie-salle__legende .est-retenu { background: transparent; border: 2px dashed #ff7a52; }
.billetterie-salle__legende .est-pris { width: 7px; height: 7px; margin: 0 2.5px; background: #6b7390; }
.billetterie-salle__legende .billetterie-salle__separateur { flex-basis: 100%; height: 0; margin: -4px 0; }
.billetterie-salle__legende .billetterie-salle__note { color: #adb5bd; font-size: 13px; }

/* Repères d'étage, dans la marge gauche du plan (unités du plan) : le nom en gras, le type de place dessous, un pointillé vers la bande */
.billetterie-salle .billetterie-repere { color: #f1f3f8; cursor: pointer; outline: none; }
.billetterie-salle .billetterie-repere text { font-size: 44px; font-weight: 700; fill: #f1f3f8; transition: fill .2s; }
.billetterie-salle .billetterie-repere .billetterie-repere__petit { font-size: 30px; font-weight: 500; fill: #adb5bd; }
.billetterie-salle .billetterie-repere line { stroke: rgba(255, 255, 255, .85); stroke-width: 5; stroke-dasharray: 10 10; transition: stroke .2s; }
.billetterie-salle .billetterie-repere:hover text, .billetterie-salle .billetterie-repere.est-actif text { fill: #c7cbff; }
.billetterie-salle .billetterie-repere:hover line, .billetterie-salle .billetterie-repere.est-actif line { stroke: #8f97ff; }
.billetterie-salle .billetterie-repere:focus-visible text { fill: #fab501; }
.billetterie-salle .billetterie-repere__fauteuil { color: #78b4ff; }

.billetterie-salle__message { min-height: 1.5em; margin: 0 0 8px; font-weight: 600; color: #ff8a80; }

/* La place cliquée, tant que le panneau est ouvert : un cercle vide, pour la reconnaître */
.billetterie-salle .billetterie-place.est-choisie { fill: #0d1018; stroke: #fff; stroke-width: 5; }

/* Panneau du choix du type de billet, posé au-dessus de la place cliquée (dessous s'il manque de hauteur), une pointe
   vers elle (--pointe : sa position depuis le bord gauche, réglée par le script) ; le ✕ en haut à droite le ferme */
.billetterie-salle__choix, .billetterie-salle__bulle { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 6px; min-width: 210px; padding: 12px; background: #0d1018; color: #f1f3f8; border: 1px solid rgba(255, 255, 255, .3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.billetterie-salle__choix[hidden], .billetterie-salle__bulle[hidden] { display: none; }
.billetterie-salle__choix::after, .billetterie-salle__bulle::after { content: ""; position: absolute; left: var(--pointe, 50%); width: 18px; height: 18px; margin-left: -9px; background: #0d1018; border: 1px solid rgba(255, 255, 255, .3); border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); }
.billetterie-salle__choix[data-cote="haut"]::after, .billetterie-salle__bulle[data-cote="haut"]::after { bottom: -10px; }
.billetterie-salle__choix[data-cote="bas"]::after, .billetterie-salle__bulle[data-cote="bas"]::after { top: -10px; transform: rotate(225deg); }
.billetterie-salle__choix > strong { padding-right: 32px; }
/* Information sur le SPA VIP (Paramètres) : dans la bulle qui s'ouvre au survol de son losange (même boîte que le
   panneau, sans bouton, hors de portée du pointeur), et dans le panneau de choix quand on le clique */
.billetterie-salle__bulle { max-width: 320px; pointer-events: none; }
.billetterie-salle__info { max-width: 300px; margin: -2px 0 2px; color: #c9cfdb; font-size: 13px; line-height: 1.4; }
.billetterie-salle__info p { margin: 0 0 6px; }
.billetterie-salle__info p:last-child { margin-bottom: 0; }
.billetterie-salle__choix button { padding: 8px 12px; border: 1px solid var(--cps-jaune); border-radius: 4px; background: var(--cps-jaune); color: #212529; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.billetterie-salle__choix button:hover { background: #fff; border-color: #fff; }
.billetterie-salle__choix button.billetterie-salle__annuler { background: transparent; border-color: var(--cps-bordure); color: #f1f3f8; font-weight: 500; }
.billetterie-salle__choix button.billetterie-salle__annuler:hover { background: rgba(255, 255, 255, .08); }
.billetterie-salle__choix .billetterie-salle__fermer { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #f1f3f8; font-size: 16px; line-height: 32px; text-align: center; }
.billetterie-salle__choix .billetterie-salle__fermer:hover, .billetterie-salle__choix .billetterie-salle__fermer:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.billetterie-salle__choix small { margin-top: -4px; color: #adb5bd; }

/* « Vue approximative de cette place » : la vignette dans le panneau, puis le panorama par-dessus la page */
.billetterie-salle__choix .billetterie-salle__vue { position: relative; display: block; width: 100%; min-width: 236px; max-width: 300px; margin: 2px 0 4px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; }
.billetterie-salle__choix .billetterie-salle__vue img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; opacity: .92; }
.billetterie-salle__choix .billetterie-salle__vue::after { content: "360°"; position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.billetterie-salle__choix .billetterie-salle__vue span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-size: 12px; text-align: left; }
.billetterie-salle__choix .billetterie-salle__vue span::before { content: "⤢ "; }
.billetterie-salle__choix .billetterie-salle__vue:hover img, .billetterie-salle__choix .billetterie-salle__vue:focus-visible img { opacity: 1; }
.billetterie-panorama { position: fixed; inset: 0; z-index: 1000; background: #000; }
.billetterie-panorama > div:first-child { position: absolute; inset: 0; }
.billetterie-panorama__titre { position: absolute; left: 16px; bottom: 16px; z-index: 2; margin: 0; padding: 6px 10px; border-radius: 6px; background: rgba(13, 16, 24, .85); color: #fff; font-size: 14px; }
.billetterie-panorama__fermer { position: absolute; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(13, 16, 24, .85); color: #fff; font-size: 20px; cursor: pointer; }
body.a-panorama { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.billetterie-salle .billetterie-place, .billetterie-salle .billetterie-bande, .billetterie-salle .billetterie-repere text, .billetterie-salle .billetterie-repere line { transition: none; }
}

/* Avis de la rangée 1 : fenêtre d'information par-dessus le plan */
.billetterie-avis-rangee { max-width: 30rem; padding: 1.5rem 1.75rem; border: 0; border-radius: 10px; background: #fff; color: #1f2b33; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.billetterie-avis-rangee::backdrop { background: rgba(15, 20, 30, .6); }
.billetterie-avis-rangee p { margin: 0 0 1rem; line-height: 1.5; }
.billetterie-avis-rangee .button { margin: .25rem 0 0; }

/* Page du soir : le plan à gauche (2/3), le panneau « Votre soirée » à droite (1/3) ; l'un sous l'autre sur petit écran */
.billetterie-soir { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.billetterie-soir__plan { flex: 2 1 560px; min-width: 0; }
.billetterie-soiree { flex: 1 1 340px; min-width: 0; padding: 18px; border: 1px solid var(--cps-bordure); border-radius: 8px; background: var(--cps-panneau); font-size: 1.05rem; }
.billetterie-soiree h2 { margin: 0 0 12px; font-size: 1.4rem; }
.billetterie-soiree .billetterie-minuterie { margin-bottom: 12px; }
.billetterie-soiree .billetterie-erreurs:empty { display: none; }
.billetterie-soiree form { margin: 0 0 14px; }
.billetterie-soiree__onglets { display: flex; margin: 0 -18px 18px; border-top: 1px solid var(--cps-bordure); border-bottom: 1px solid var(--cps-bordure); counter-reset: onglet; }
.billetterie-soiree__onglets button { flex: 1; min-width: 0; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--cps-texte-doux); font: inherit; line-height: 1.25; counter-increment: onglet; cursor: pointer; }
.billetterie-soiree__onglets button strong::before { content: counter(onglet) ". "; }
.billetterie-soiree__onglets button[aria-selected="true"] { border-bottom-color: var(--cps-jaune); background: rgba(255, 255, 255, .06); color: #fff; }
.billetterie-soiree__onglets button:disabled { opacity: .45; cursor: default; }
.billetterie-soiree__places { margin: 0 0 14px; padding: 0; list-style: none; }
.billetterie-soiree__places li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--cps-bordure); }
.billetterie-soiree__places li span:first-child { flex: 1; min-width: 0; }
.billetterie-soiree__retirer { width: 44px; height: 44px; border: 0; background: transparent; color: var(--cps-texte-doux); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.billetterie-soiree__retirer:hover { color: #fff; }
.billetterie-soiree__horaire summary { cursor: pointer; }
/* Détail de l'Expérience Pure (panneau « Votre soirée » et page de l'étape 3), replié par défaut */
.billetterie-pure__details { margin: 0 0 14px; }
.billetterie-pure__details summary { cursor: pointer; color: #fff; }
.billetterie-pure__details p, .billetterie-pure__details li { margin: 8px 0 0; font-size: .95rem; color: var(--cps-texte-doux); }
.billetterie-soiree__total { display: flex; justify-content: space-between; margin: 16px 0 12px; padding-top: 12px; border-top: 1px solid var(--cps-bordure); font-size: 1.15rem; }
.billetterie-soiree__total strong { color: #fff; }
.billetterie-soiree__suite { display: flex; gap: 10px; margin: 0; }
.billetterie-soiree__suite .button { flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.billetterie-soiree__suite .button-border { flex: none; }
.billetterie-soiree .button:disabled { opacity: .5; cursor: default; }
/* Grand écran : le panneau reste collé sous l'en-tête réduit du thème pendant qu'on parcourt le plan ; plus haut que la fenêtre, il défile en lui-même */
@media (min-width: 992px) {
	.billetterie-soiree { position: sticky; top: calc(var(--cnvs-header-height-shrink, 60px) + 16px); /*max-height: calc(100vh - var(--cnvs-header-height-shrink, 60px) - 32px);*/ overflow-y: auto; }
}
/* Petit écran : tant que le plan est à l'écran, une barre collée en bas mène au panneau, placé sous le plan */
.billetterie-soir__barre { display: none; }
@media (max-width: 991px) {
	.billetterie-soir__barre { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--cps-bordure); border-radius: 8px; background: var(--cps-panneau); }
}

/* Panier, récapitulatif, choix du transport */
.billetterie-panier { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.billetterie-panier th, .billetterie-panier td { padding: 12px 10px; border-bottom: 1px solid var(--cps-bordure); text-align: left; vertical-align: top; }
.billetterie-panier tfoot th { font-weight: 500; color: var(--cps-texte-doux); }
.billetterie-panier tfoot tr:last-child th, .billetterie-panier tfoot tr:last-child td { color: #fff; font-size: 1.15rem; font-weight: 600; border-bottom: 0; }
.billetterie-panier form { margin: 0; }
.billetterie-recapitulatif, .billetterie-billets, .billetterie-choix-transport { margin: 0 0 18px; padding: 0; list-style: none; }
.billetterie-recapitulatif li, .billetterie-billets li, .billetterie-choix-transport li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--cps-bordure); border-radius: 6px; background: var(--cps-panneau); }
.billetterie-choix-transport li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.billetterie-choix-transport label { margin: 0; font-weight: 600; }
.billetterie-choix-transport .est-complet { color: var(--cps-orange); }
.billetterie-horaire { padding: 14px 16px; border-radius: 6px; background: var(--cps-panneau); }
.billetterie-transport { padding: 12px 14px; border-left: 4px solid var(--cps-bleu); background: var(--cps-panneau); }

/* Champ de carte Stripe : sur fond clair, comme le reste des champs du thème */
.billetterie-carte { max-width: 420px; padding: .7rem .75rem; border: 1px solid var(--cps-bordure); border-radius: 4px; background: #fff; }

@media (max-width: 640px) {
	/* Le conteneur Bootstrap ne laisse que 12 px aux bords : trop serré sur un téléphone */
	#content .content-wrap { padding-left: 10px; padding-right: 10px; }
	.billetterie { padding-top: 22px; }
	.billetterie-calendrier td { height: 64px; padding: 3px; font-size: .85rem; }
	.cps-etapes li:not(.est-active) span { display: none; }
	.cps-etapes li:not(:last-child)::after { width: 12px; }
	.billetterie-salle { padding: 10px; }
}

/* Carte cadeau : montants proposés, champ du code au paiement ; sans reste à payer, pas de champ de carte */
.billetterie-montants { margin: 0 0 18px; padding: 0; border: 0; }
.billetterie-montants legend { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.billetterie-montant { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 10px 0; padding: 10px 14px; border: 1px solid var(--cps-bordure); border-radius: 6px; background: var(--cps-panneau); cursor: pointer; }
.billetterie-montant--autre input[type="number"] { width: 8em; display: inline-block; }
.billetterie-utiliser-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 22px; }
.billetterie-utiliser-carte .form-control { width: auto; min-width: 18em; }
.billetterie-sans-carte .billetterie-champ-carte { display: none; }

/* Boutique (personnel) : une fiche par article, première photo en grand et les autres en vignettes (Fancybox au clic),
   choix de l'option et quantité sur une ligne */
.billetterie-boutique__article { height: 100%; padding: 14px; border: 1px solid var(--cps-bordure); border-radius: 8px; background: var(--cps-panneau); }
.billetterie-boutique__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.billetterie-boutique__photos:empty { display: none; }
.billetterie-boutique__photos a { flex: 0 0 56px; cursor: zoom-in; }
.billetterie-boutique__photos a:first-child { flex-basis: 100%; }
.billetterie-boutique__photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.billetterie-boutique__article h2 { margin: 0 0 4px; font-size: 1.2rem; }
.billetterie-boutique__prix { margin: 0 0 8px; font-weight: 600; color: #fff; }
.billetterie-boutique__article form { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.billetterie-boutique__article .form-select { flex: 1 1 10em; width: auto; }
.billetterie-boutique__article input[type="number"] { flex: 0 0 5em; width: 5em; }
.billetterie-boutique__article .billetterie-erreurs { flex-basis: 100%; }

/* Bandeau des témoins (billetterie/_temoins) : en bas à gauche, au-dessus de tout, jusqu'à la réponse du visiteur */
.billetterie-temoins { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1050; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px; border: 1px solid var(--cps-bordure); border-radius: 8px; background: var(--cps-panneau); color: var(--cps-texte-doux); box-shadow: 0 6px 24px rgba(0, 0, 0, .4); font-size: .9rem; }
.billetterie-temoins__titre { margin: 0 0 8px; color: #fff; font-weight: 600; font-size: 1rem; }
.billetterie-temoins p { margin-bottom: 10px; }
.billetterie-temoins__boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.billetterie-temoins__boutons form { display: contents; }
.billetterie-temoins-choix .modal-content { background: var(--cps-panneau); }
.billetterie-temoins__categorie { padding: 12px 0; border-top: 1px solid var(--cps-bordure); }
.billetterie-temoins__categorie .form-check-label { font-weight: 600; }
.billetterie-temoins__categorie p { margin: 6px 0 0; font-size: .9rem; color: var(--cps-texte-doux); }
.billetterie-temoins__boutons .hiddenFields { display: none; }
/* Bouton flottant des témoins, en bas à gauche de toutes les pages une fois la réponse donnée (le « haut de page » du thème est à droite) */
.billetterie-temoins-bouton { position: fixed; left: 16px; bottom: 16px; z-index: 1040; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--cps-bordure); border-radius: 50%; background: var(--cps-panneau); color: var(--cps-texte-doux); box-shadow: 0 4px 16px rgba(0, 0, 0, .4); cursor: pointer; transition: color .2s, border-color .2s; }
.billetterie-temoins-bouton:hover, .billetterie-temoins-bouton:focus-visible { color: #fff; border-color: var(--cps-orange); outline: none; }

/* Avis « site en développement » (layouts/_billetterie), visiteurs non connectés : fenêtre <dialog> au-dessus de tout, bandeau des témoins compris */
.billetterie-avis-dev { width: calc(100% - 32px); max-width: 520px; padding: 24px; border: 1px solid var(--cps-bordure); border-top: 4px solid var(--cps-orange); border-radius: 8px; background: var(--cps-panneau); color: var(--cps-texte-doux); box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.billetterie-avis-dev::backdrop { background: rgba(0, 0, 0, .65); }
.billetterie-avis-dev h2 { margin: 0 0 10px; color: #fff; font-size: 1.25rem; }
.billetterie-avis-dev p { margin-bottom: 18px; }
.billetterie-avis-dev form { margin: 0; text-align: right; }

/* Minuterie : deux minutes avant la fin, en orange avec l'avertissement (plan-public.js) */
.billetterie-minuterie.est-bientot { border-color: var(--cps-orange); background: rgba(231, 65, 29, .14); }
.billetterie-minuterie__avis { display: block; margin-top: 4px; font-weight: 600; }
/* Le formulaire du module Consent enveloppe en-tête, corps et pied : sans ceci, le corps ne défile plus et le bouton « Enregistrer » sort de la fenêtre */
.billetterie-temoins-choix .modal-content > form { display: contents; }