/* ============================================================================
   collections.css — Collections / Événements (groupes)
   Pages : planning (segment Événements), collection-detail, collection-edit.
   ========================================================================== */

/* Label de champ de formulaire (réutilisable). */
.fr-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fr-ink3);
  margin-bottom: 7px;
}

/* Hero de la page détail événement. */
.fr-event-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
}
.fr-event-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--fr-radius-large);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #B84A2C, #8C2F1E);
  color: #FFD88A;
}
.fr-event-countdown {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fr-primary-deep);
  background: var(--fr-primary-tint);
  border-radius: var(--fr-radius-pill);
  padding: 4px 12px;
}

/* Vignette recette (détail + sélecteur). Remplace .icon-wrap dans .fr-plan-row. */
.fr-event-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--fr-radius-medium);
  overflow: hidden;
  background: var(--fr-primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fr-event-thumb .ph {
  font-size: 22px;
  opacity: 0.7;
}

/* Ligne de sélection de recette (collection-edit). */
.fr-plan-row.pick {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fr-plan-row.pick.is-selected {
  border-color: var(--fr-primary);
  background: var(--fr-primary-tint);
}

/* Pastille de check à droite de la ligne de sélection. */
.pick-check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 2px solid var(--fr-hair-strong);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.pick-check.on {
  background: var(--fr-primary);
  border-color: var(--fr-primary);
}
.pick-check.on::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}