/* 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-calendrier { width: 100%; max-width: 730px; margin-bottom: 36px; caption-side: top; }
.billetterie-calendrier caption { padding: 0 0 10px; color: #fff; font-size: 1.25rem; font-weight: 600; }
.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; }
.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 { 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); }
.billetterie-soirs { margin: 0; padding: 0; list-style: none; columns: 3 240px; }
.billetterie-soirs li { padding: 6px 0; break-inside: avoid; }

/* Plan de salle : un panneau sombre comme celui de « Votre soirée » ; le plan lui-même vient de l'addon */
.billetterie-salle { 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__choix button { border: 1px solid var(--cps-jaune); border-radius: 4px; background: var(--cps-jaune); color: #212529; font-weight: 600; }
.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-calendrier__soir small, .billetterie-soirs small { display: inline; font-weight: 400; }
.billetterie-suite { display: flex; align-items: center; gap: 16px; margin-top: 22px; }

/* 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; }
.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) {
	.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; }