/* Project-specific styles (plain CSS, no preprocessor). */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* « Ajouter à une liste » sur la fiche exercice : la liste éditée (sans en
   être propriétaire) est désambiguïsée par l'avatar et le pseudo du
   propriétaire. */
.list-owner {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: #6c757d;
}

/* Autosauvegarde de la préparation de liste : état discret, jamais
   d'apparence d'alerte pour une sauvegarde normale. */
.planning-status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.875rem;
}

/* Sélecteur de tags : groupes repliables par métatag et chips en grille
   responsive. Aucun JS requis — <details>/<summary> natifs (souris,
   clavier, tactile). */
.tag-group {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.tag-group-summary {
  cursor: pointer;
  font-weight: 600;
}

.tag-group-count {
  color: #6c757d;
  font-weight: 400;
}

.tag-group-selected {
  margin-left: 0.35rem;
}

.tag-group-description {
  margin: 0.35rem 0 0;
  color: #6c757d;
  font-size: 0.875rem;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.4rem 0.5rem;
  margin-top: 0.5rem;
}

.tag-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.25rem;
  min-width: 0;
  position: relative;
}

.tag-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  justify-self: start;
  max-width: 100%;
  margin: 0;
  padding: 0.18rem 0.6rem;
  border: 1px solid #ced4da;
  border-radius: 2rem;
  cursor: pointer;
}

.tag-chip input {
  margin: 0;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.tag-chip-label {
  /* Libellé complet toujours lisible : retour contrôlé, hauteur auto, y
     compris pour les tags longs sur mobile. */
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.3;
}

.tag-chip input:checked + .tag-chip-label {
  font-weight: 600;
}

.tag-chip:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.tag-chip:has(input:checked) {
  border-color: #0d6efd;
  background-color: #e7f1ff;
}

@media (max-width: 576px) {
  .tag-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tag-info-trigger {
  justify-self: start;
  color: #6c757d;
  font-size: 0.875rem;
  line-height: 1;
}

/* Info-bulle de description d'un tag : pure CSS, affichée au survol
   (souris) et au focus (clavier, premier tap tactile), positionnée en
   absolu — elle ne perturbe jamais la grille des chips. Aucun JS, pas
   d'attribut `title` (inaccessible clavier/tactile et non stylable). */
.tag-info-bubble {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 30;
  width: max-content;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  font-size: 0.8125rem;
  color: #495057;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.tag-info-bubble-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.tag-option:hover .tag-info-bubble,
.tag-option:focus-within .tag-info-bubble {
  visibility: visible;
  opacity: 1;
}

/* Autocomplétion de ville (widget geo) : la liste déroulante est ancrée sous
   le champ texte, au-dessus du contenu. */
.city-autocomplete {
  position: relative;
}

.city-autocomplete-list {
  display: block;
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.15rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  list-style: none;
}

.city-autocomplete-list[hidden] {
  display: none;
}

.city-autocomplete-list li {
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}

.city-autocomplete-list li:hover,
.city-autocomplete-list li.active {
  background-color: #0d6efd;
  color: #fff;
}

.city-autocomplete-list li.disabled {
  color: #6c757d;
  cursor: default;
  background-color: transparent;
}

/* Carte communautaire : conteneur Leaflet. */
.community-map {
  height: 32rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

/* Parcours : petit champ numérique d'ordre (fallback sans JavaScript). */
.attestation-order-input {
  max-width: 5rem;
}

/* Planning de liste : horaires et durées alignés, édition compacte. */
.schedule-time {
  display: inline-block;
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

.schedule-duration {
  display: inline-block;
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
}

.schedule-duration-edit {
  max-width: 9rem;
}