/* Quelques ajustements légers au-dessus de Bootstrap natif. */
body {
  min-height: 100vh;
  background: var(--bs-tertiary-bg);
}

.navbar-brand {
  font-weight: 600;
}

.page-paiement {
  max-width: 760px;
}

.carte-action {
  transition: transform .15s ease, box-shadow .15s ease;
}

.carte-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow-sm);
}

.ticket {
  position: relative;
  max-width: 620px;
  background: var(--bs-body-bg);
  padding: 2rem;
  box-shadow: var(--bs-box-shadow-sm);
}

.ticket::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 10px;
  background: radial-gradient(circle at 5px 0, var(--bs-tertiary-bg) 5px, transparent 5.5px) repeat-x;
  background-size: 10px 10px;
}

.ticket-entete {
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--bs-border-color);
}

.ticket-lignes {
  padding: 1rem 0;
  border-bottom: 1px dashed var(--bs-border-color);
}

.ticket-lignes>div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .15rem 0;
}

.ticket-lignes dt,
.ticket-lignes dd {
  margin: 0;
}

.ticket-lignes dd {
  text-align: right;
}

.ticket-message {
  padding-top: 1rem;
}

.ticket-message p {
  margin-bottom: 0;
}

.ticket-contact {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--bs-border-color);
  font-size: .875rem;
}

.ticket-actions {
  max-width: 620px;
}

.combobox-resultats {
  z-index: 20;
  max-height: 16rem;
  overflow-y: auto;
}

.ticket-statut {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
}

/* Répartition d'adhésion lisible aussi sans perception des couleurs. */
.repartition-barre {
  height: 1.1rem;
  overflow: hidden;
}

.repartition-barre .repartition-federation {
  background-color: var(--bs-primary);
  background-image: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .28) 0 3px,
      transparent 3px 7px);
}

.repartition-barre .repartition-don {
  background-color: var(--bs-success);
  background-image: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .25) 0 2px,
      transparent 2px 7px);
}

.repartition-barre .repartition-groupe {
  background-color: var(--bs-warning);
  background-image: repeating-linear-gradient(135deg,
      rgba(0, 0, 0, .16) 0 2px,
      transparent 2px 7px);
}

.repartition-reperes {
  position: relative;
  height: 5.2rem;
  margin-top: .4rem;
}

.repartition-lignes {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 2.3rem;
  overflow: visible;
  pointer-events: none;
}

.repartition-lignes polyline {
  fill: none;
  stroke: var(--bs-border-color);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repartition-reperes-liste {
  position: absolute;
  inset: 0;
}

.repartition-repere {
  position: absolute;
  top: 2rem;
  width: max-content;
  max-width: 10rem;
  transform: translateX(-50%);
  text-align: center;
  font-size: .82rem;
  line-height: 1.15;
}

.repartition-repere strong {
  font-size: 1rem;
}

.aide-code {
  scroll-margin-top: 5rem;
}

.aide-code:target {
  border: 2px solid var(--bs-warning) !important;
  background-color: var(--bs-warning-bg-subtle);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .22);
}

@keyframes aide-clignotement {

  0%,
  100% {
    transform: none;
  }

  35% {
    transform: scale(1.01);
    box-shadow: 0 0 0 .45rem rgba(var(--bs-warning-rgb), .28);
  }
}

@media (max-width: 640px) {
  .repartition-repere {
    max-width: 7rem;
    font-size: .72rem;
  }

  .repartition-repere strong {
    font-size: .86rem;
  }
}


.groupe-dialogue {
  width: min(42rem, 100%);
  border: 0;
  padding: 0;
  border-radius: var(--bs-border-radius-lg);
}

.groupe-dialogue::backdrop {
  background: rgba(0, 0, 0, .45);
}

[data-aide-dialogue] [data-aide-fermer] {
  font-size: 1rem !important;
}

@media (max-width: 767.98px) {
  .groupe-dialogue {
    width: calc(100vw - 2rem);
    max-width: 42rem;
    max-height: calc(100dvh - 2rem);
    margin: auto;
  }

  [data-aide-dialogue] [data-aide-fermer] {
    font-size: 1.75rem !important;
  }
}

.ticket-lignes dd,
.ticket-contact {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  main.container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .ticket {
    padding: 1.25rem;
  }

  .ticket-lignes>div {
    gap: .5rem;
  }

  .repartition-repere {
    max-width: 6rem;
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aide-code:target {
    animation: none;
  }
}

[data-multiselect] {
  position: relative;
}

[data-evenement-menu] {
  z-index: 30;
  max-height: 24rem;
  overflow-y: auto;
}

.logo-isf-paiement {
  display: block;
  object-fit: contain;
}

.erreur-logo {
  max-width: 104px;
  height: auto;
}

.dropdown-menu[data-multiselect-menu] {
  max-height: 20rem;
  overflow-y: auto;
}

.dropdown-item.multiselect-selectionne {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

[data-multiselect-mobile] .list-group-item.active {
  color: var(--bs-body-color);
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

.aide-inline {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 50%;
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.evenement-menu {
  z-index: 30;
  max-height: 32rem;
  overflow-y: auto;
}

.evenement-choix {
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.evenement-choix:hover,
.evenement-choix:focus-visible {
  border-color: var(--bs-primary-border-subtle);
  background: var(--bs-tertiary-bg);
}

/* Cartes de formulaire volontairement discrètes. */
.card>.card-body> :last-child {
  margin-bottom: 0;
}

/* La sélection d'événement reste compacte sur les petits écrans. */
[data-evenement-ouvrir] [data-evenement-libelle] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le détail de l'événement sélectionné reste lisible même avec un titre long. */
.evenement-detail [data-evenement-detail-nom] {
  overflow-wrap: anywhere;
}

.required::after {
  content: ' *';
}

/* Les choix radio d’adhésion portent l’obligation au niveau du groupe, pas de chaque option. */
.choix-sans-etoiles .form-check-label.required::after {
  content: none;
}

/* Champ leurre hors écran pour écarter les soumissions automatisées simples. */
.champ-verification {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
