/* ==========================================================================
   Emyjam — Où jouer ? (/ou-jouer) — Phase 3.5.a
   ========================================================================== */

.page-ou-jouer {
  background: var(--color-bg);
  /* Palette locale « Où jouer ? » — contraste fond / cartes / champs */
  --ou-jouer-card-bg: #292323;
  --ou-jouer-card-bg-hover: #322a2a;
  --ou-jouer-field-bg: #191414;
  --ou-jouer-border: rgba(139, 0, 0, 0.45);
  --ou-jouer-border-strong: rgba(139, 0, 0, 0.58);
}

/* Contenu fonctionnel visible sans attendre le scroll / JS (comme Hub / auth). */
.page-ou-jouer .reveal {
  opacity: 1;
  transform: none;
}

.ou-jouer__header {
  padding: calc(var(--header-height) + 28px) 0 48px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(139, 0, 0, 0.16) 0%, transparent 48%),
    linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--ou-jouer-border);
}

/* Champs de saisie / listes — distincts des cartes principales */
.page-ou-jouer .form-group__input,
.page-ou-jouer .form-group__textarea,
.page-ou-jouer .form-group__select,
.page-ou-jouer .ou-jouer__input,
.page-ou-jouer .ou-jouer__select,
.page-ou-jouer .ou-jouer-contribute__genre-trigger,
.page-ou-jouer .ou-jouer-contribute__genre-search {
  background-color: var(--ou-jouer-field-bg);
  border-color: var(--ou-jouer-border);
}

.page-ou-jouer .form-group__input:focus,
.page-ou-jouer .form-group__textarea:focus,
.page-ou-jouer .form-group__select:focus,
.page-ou-jouer .ou-jouer__input:focus,
.page-ou-jouer .ou-jouer__select:focus,
.page-ou-jouer .ou-jouer-contribute__genre-trigger:focus-visible,
.page-ou-jouer .ou-jouer-contribute__genre-search:focus {
  border-color: var(--ou-jouer-border-strong);
}

.ou-jouer__header-inner {
  max-width: 52rem;
}

.ou-jouer__intro {
  margin-bottom: 28px;
}

.ou-jouer__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.65rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer__title-accent {
  color: var(--color-secondary, #d4af37);
}

.ou-jouer__subtitle {
  margin: 0 0 16px;
  max-width: 36rem;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin: 0 0 18px;
  padding: 0.4rem 0.75rem;
  font-size: clamp(0.875rem, 2.2vw, 0.975rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--color-text-muted, #b8b0b0);
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--ou-jouer-field-bg);
}

.ou-jouer__count-value {
  color: var(--color-primary, #e63946);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ou-jouer__lead {
  margin: 0;
  max-width: 40rem;
  color: var(--color-text-muted, #b8b0b0);
  line-height: 1.55;
  font-size: 0.95rem;
}

/* Carte de recherche — overflow visible pour les suggestions */
.ou-jouer__search-panel {
  position: relative;
  z-index: 2;
  margin: 0 0 28px;
  padding: 22px 20px 20px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 8px);
  background: var(--ou-jouer-card-bg);
  overflow: visible;
}

.ou-jouer__search-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer__form {
  display: block;
  max-width: none;
}

.ou-jouer__form-row {
  display: grid;
  gap: 16px;
  align-items: start;
}

.ou-jouer__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer__commune {
  position: relative;
  min-width: 0;
}

.ou-jouer__commune-field {
  position: relative;
  overflow: visible;
}

.ou-jouer__input,
.ou-jouer__select {
  width: 100%;
}

.ou-jouer__radius {
  min-width: 0;
}

.ou-jouer__submit-wrap {
  display: flex;
  align-items: stretch;
  padding-top: 0;
}

/* Recherche principale : overlay sous le champ (comportement historique). */
.ou-jouer__suggestions {
  position: absolute;
  z-index: 50;
  top: calc(100% - 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--ou-jouer-field-bg);
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: 16rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .ou-jouer__search-panel {
    padding: 24px 24px 22px;
  }

  .ou-jouer__form-row {
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9.5rem) auto;
    gap: 14px 16px;
    align-items: start;
  }

  .ou-jouer__submit-wrap {
    padding-top: 1.55rem;
  }

  .ou-jouer__submit {
    width: auto;
    min-width: 8.5rem;
  }
}

@media (min-width: 1280px) {
  .ou-jouer__header-inner {
    max-width: 56rem;
  }
}

/*
 * Formulaires contribution (ajouter / modifier) : liste en flux document.
 * Évite le chevauchement des radios de localisation et du champ adresse.
 */
.ou-jouer__suggestions--inline,
.ou-jouer-contribute__form .ou-jouer__suggestions {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1;
  width: 100%;
  margin-top: 8px;
  max-height: 12.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.ou-jouer__suggestions[hidden] {
  display: none !important;
}

.ou-jouer__suggestion {
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text, #f2ecec);
  line-height: 1.35;
}

.ou-jouer__suggestion:hover,
.ou-jouer__suggestion--active {
  background: rgba(139, 0, 0, 0.28);
}

.ou-jouer__suggestion:focus-visible {
  outline: 2px solid var(--color-primary, #e63946);
  outline-offset: -2px;
}

.ou-jouer__hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #b8b0b0);
}

.ou-jouer__submit {
  width: 100%;
  margin: 0;
}

.ou-jouer__error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(180, 60, 60, 0.55);
  background: rgba(120, 20, 20, 0.35);
  color: #ffd7d7;
}

/* Zone secondaire — ajout de lieu */
.ou-jouer__contribute {
  max-width: 40rem;
  padding: 4px 0 0;
  border-top: 1px solid transparent;
}

.ou-jouer__contribute-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer__contribute-invite {
  margin: 0 0 14px;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer__contribute-cta {
  margin: 0;
}

/* Ancre post-recherche (#ou-jouer-results) : laisse le titre sous le header fixe. */
.ou-jouer__results {
  padding: 36px 0 72px;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.ou-jouer__results-inner {
  max-width: 52rem;
}

@media (min-width: 1280px) {
  .ou-jouer__results-inner {
    max-width: 56rem;
  }
}

/* Défilement fluide uniquement sur cette page, sauf réduction des animations. */
html:has(body.page-ou-jouer) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.page-ou-jouer) {
    scroll-behavior: auto;
  }
}

.ou-jouer__summary {
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.ou-jouer__summary-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer__summary-text {
  margin: 0 0 8px;
  line-height: 1.55;
  color: var(--color-text, #f5f5f5);
  font-size: 0.975rem;
}

.ou-jouer__summary-place,
.ou-jouer__summary-radius {
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer__summary-total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer__summary-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer__empty {
  margin: 0;
  max-width: 100%;
  padding: 18px 18px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--ou-jouer-border);
  background: var(--ou-jouer-card-bg);
  color: var(--color-text-muted, #bdbdbd);
  line-height: 1.55;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.ou-jouer__empty p:first-child {
  margin: 0 0 12px;
}

.ou-jouer__empty-text {
  margin: 0 0 10px;
}

.ou-jouer__empty-action {
  margin: 0;
}

.ou-jouer__first-page-link {
  color: var(--color-secondary, #d4af37);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ou-jouer__first-page-link:hover,
.ou-jouer__first-page-link:focus-visible {
  color: var(--color-secondary-hover, #e0c04a);
}

.ou-jouer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 100%;
  width: 100%;
}

.ou-jouer__list-item {
  margin: 0;
  min-width: 0;
}

.ou-jouer-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ou-jouer-card-bg);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ou-jouer-card:hover,
.ou-jouer-card:focus-within {
  border-color: rgba(212, 175, 55, 0.4);
  background: var(--ou-jouer-card-bg-hover);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
}

.ou-jouer-card__header {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.ou-jouer-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #f5f5f5);
  overflow-wrap: anywhere;
}

/* Lien unique : le ::after étire la zone cliquable à toute la carte. */
.ou-jouer-card__link {
  color: inherit;
  text-decoration: none;
}

.ou-jouer-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.ou-jouer-card:hover .ou-jouer-card__link,
.ou-jouer-card:focus-within .ou-jouer-card__link {
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-card__link:focus {
  outline: none;
}

.ou-jouer-card__link:focus-visible {
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-card:focus-within {
  outline: 2px solid var(--color-secondary, #d4af37);
  outline-offset: 2px;
}

.ou-jouer-card__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ou-jouer-card {
    transition: none;
  }
}

/* —— Fiche détail —— */

.ou-jouer-show__header {
  padding: calc(var(--header-height) + 28px) 0 32px;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(139, 0, 0, 0.16) 0%, transparent 48%),
    linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--ou-jouer-border);
}

.ou-jouer-show__header-inner {
  max-width: 52rem;
}

@media (min-width: 1280px) {
  .ou-jouer-show__header-inner {
    max-width: 56rem;
  }
}

.ou-jouer-show__back {
  margin: 0 0 18px;
}

.ou-jouer-show__back-link {
  color: var(--color-text-muted, #bdbdbd);
  font-size: 0.9rem;
  text-decoration: none;
}

.ou-jouer-show__back-link:hover,
.ou-jouer-show__back-link:focus-visible {
  color: var(--color-secondary, #d4af37);
  text-decoration: underline;
}

.ou-jouer-show__kind {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: var(--radius-full, 9999px);
  background: rgba(212, 175, 55, 0.08);
}

.ou-jouer-show__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.45rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--color-text, #f5f5f5);
  overflow-wrap: anywhere;
}

.ou-jouer-show__place {
  margin: 0 0 18px;
  color: var(--color-text-muted, #bdbdbd);
  line-height: 1.5;
  font-size: 0.975rem;
}

.ou-jouer-show__meta-sep {
  margin: 0 0.35rem;
  opacity: 0.6;
}

.ou-jouer-show__body {
  padding: 28px 0 72px;
}

.ou-jouer-show__layout {
  max-width: 52rem;
  display: grid;
  gap: 16px;
  align-items: start;
}

.ou-jouer-show__main,
.ou-jouer-show__aside {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1280px) {
  .ou-jouer-show__layout {
    max-width: 56rem;
  }
}

@media (min-width: 960px) {
  .ou-jouer-show__layout--with-aside {
    grid-template-columns: minmax(0, 1.35fr) minmax(15.5rem, 0.9fr);
    gap: 20px;
  }

  .ou-jouer-show__aside {
    position: sticky;
    top: calc(var(--header-height) + 16px);
  }
}

.ou-jouer-show__block {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ou-jouer-card-bg);
  min-width: 0;
}

.ou-jouer-show__section-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-show__summary,
.ou-jouer-show__address,
.ou-jouer-show__locality,
.ou-jouer-show__programming {
  margin: 0 0 10px;
  line-height: 1.55;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer-show__summary:last-child,
.ou-jouer-show__address:last-child,
.ou-jouer-show__locality:last-child,
.ou-jouer-show__programming:last-child {
  margin-bottom: 0;
}

.ou-jouer-show__locality {
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-show__programming--muted {
  font-style: italic;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-show__programming-description {
  margin: 0 0 12px;
  white-space: normal;
  line-height: 1.55;
  color: var(--color-text, #f5f5f5);
}

.ou-jouer-show__block .ou-jouer-card__notice {
  margin-top: 10px;
}

/* Badges styles musicaux — fiche détail + cartes résultats (rendu identique). */
.ou-jouer-show__genres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ou-jouer-show__genre {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--ou-jouer-border);
  background: var(--ou-jouer-field-bg);
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--color-text, #f5f5f5);
  overflow-wrap: anywhere;
}

.ou-jouer-show__genres-empty {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-card__kind {
  margin: 0;
  justify-self: start;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: var(--radius-full, 9999px);
  background: rgba(212, 175, 55, 0.08);
}

.ou-jouer-card__place {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text, #f5f5f5);
  overflow-wrap: anywhere;
}

.ou-jouer-card__distance {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-card__distance-hint {
  margin-left: 0.3rem;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-card__notice {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 6px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(212, 175, 55, 0.06);
  color: #dccfa0;
}

.ou-jouer-card__notice--programming {
  border-color: rgba(180, 120, 80, 0.32);
  background: rgba(120, 70, 30, 0.16);
  color: #e6c9a8;
}

.ou-jouer-card__styles {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ou-jouer-card__styles-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-card__styles-empty {
  margin: 0;
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text-muted, #bdbdbd);
}

/* Empêche un éventuel style global de liste de casser les badges dans la carte. */
.ou-jouer-card .ou-jouer-show__genres {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.ou-jouer__pagination {
  margin-top: 24px;
  justify-content: space-between;
  gap: 12px;
  max-width: 100%;
  padding-top: 4px;
}

.ou-jouer__pagination-range {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #bdbdbd);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* —— Site internet officiel —— */

.ou-jouer-show__website-cta {
  justify-self: start;
  text-decoration: none;
  max-width: 100%;
}

.ou-jouer-show__website-cta:hover,
.ou-jouer-show__website-cta:focus-visible {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 519px) {
  .ou-jouer-show__website-cta {
    width: 100%;
  }
}

/* —— Réseaux sociaux publics —— */

.ou-jouer-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ou-jouer-socials__link {
  text-decoration: none;
  max-width: 100%;
}

.ou-jouer-socials__link:hover,
.ou-jouer-socials__link:focus-visible {
  text-decoration: none;
}

/* —— Contacts publics —— */

.ou-jouer-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ou-jouer-contacts__item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ou-jouer-field-bg);
  min-width: 0;
}

/* Carte contact déjà dans un block : sous-carte distincte */
.ou-jouer-show__contacts .ou-jouer-contacts__item {
  background: var(--ou-jouer-field-bg);
}

.ou-jouer-contacts__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ou-jouer-contacts__channel {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-contacts__label {
  font-size: 0.875rem;
  color: var(--color-text-muted, #b8b0b0);
}

.ou-jouer-contacts__badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #e8d9a8;
}

.ou-jouer-contacts__badge--stale {
  border-color: rgba(180, 120, 80, 0.45);
  background: rgba(120, 70, 30, 0.22);
  color: #f0d2b0;
}

.ou-jouer-contacts__value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.ou-jouer-contacts__value {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  word-break: break-word;
  min-width: 0;
}

.ou-jouer-contacts__copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--color-text-muted, #b8b0b0);
  cursor: pointer;
  transition: color var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease), background var(--transition, 0.2s ease);
}

.ou-jouer-contacts__copy-icon:hover,
.ou-jouer-contacts__copy-icon:focus-visible {
  color: var(--color-secondary, #d4af37);
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.08);
  outline: none;
}

.ou-jouer-contacts__copy-icon:focus-visible {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35);
}

.ou-jouer-contacts__copy-status {
  font-size: 0.8125rem;
  color: var(--color-secondary, #d4af37);
  min-height: 1.2em;
}

.ou-jouer-contacts__cta {
  justify-self: start;
  text-decoration: none;
  max-width: 100%;
}

.ou-jouer-contacts__cta:hover,
.ou-jouer-contacts__cta:focus-visible {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 519px) {
  .ou-jouer-contacts__cta {
    width: 100%;
    justify-self: stretch;
  }
}

/* Contribution collaborative (fiche détail + notes legacy) */
.ou-jouer__collab-note,
.ou-jouer-show__collab-note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-show__collab {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 0 0 12px;
}

.ou-jouer-show__report-link {
  color: var(--color-text-muted, #bdbdbd);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.9rem;
}

.ou-jouer-show__report-link:hover,
.ou-jouer-show__report-link:focus-visible {
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-contribute__header-inner,
.ou-jouer-contribute__form-wrap {
  max-width: 52rem;
}

@media (min-width: 1280px) {
  .ou-jouer-contribute__header-inner,
  .ou-jouer-contribute__form-wrap {
    max-width: 56rem;
  }
}

.page-ou-jouer-contribute .ou-jouer__title {
  margin-bottom: 12px;
}

.page-ou-jouer-contribute .ou-jouer__lead {
  max-width: 42rem;
  margin-bottom: 0;
}

.ou-jouer-contribute__body {
  padding: 28px 0 72px;
}

.ou-jouer-contribute__form {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  gap: 16px;
}

.ou-jouer-contribute__form .ou-jouer__error {
  max-width: none;
  margin: 0 0 4px;
}

.ou-jouer-contribute__form .dashboard-form-section {
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ou-jouer-card-bg);
  overflow: visible;
}

.ou-jouer-contribute__form .dashboard-form-section__header {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ou-jouer-contribute__form .dashboard-form-section__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-contribute__form .dashboard-form-section__help {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-contribute__form .dashboard-form-section__body {
  padding: 0;
}

.ou-jouer-contribute__form .form-group__label,
.ou-jouer-contribute__form .form-check__label {
  color: var(--color-text, #f5f5f5);
}

.ou-jouer-contribute__form .form-group__label.required::after {
  content: ' *';
  color: var(--color-primary, #e63946);
  font-weight: 700;
}

.ou-jouer-contribute__form .form-hint {
  color: var(--color-text-muted, #bdbdbd);
}

.ou-jouer-contribute__form .form-group {
  margin-bottom: 16px;
  min-width: 0;
}

.ou-jouer-contribute__form .dashboard-form-section__body > .form-group:last-child,
.ou-jouer-contribute__form .dashboard-form-section__body > .ou-jouer-contribute__fieldset:last-child {
  margin-bottom: 0;
}

.ou-jouer-contribute__short-grid {
  display: grid;
  gap: 0;
}

@media (min-width: 768px) {
  .ou-jouer-contribute__short-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.8fr);
    column-gap: 16px;
    align-items: start;
  }

  .ou-jouer-contribute__short-grid > .form-group {
    margin-bottom: 0;
  }
}

.ou-jouer-contribute__fieldset {
  border: none;
  margin: 0 0 18px;
  padding: 0;
  min-width: 0;
}

.ou-jouer-contribute__fieldset > .form-group__label {
  margin-bottom: 10px;
}

.ou-jouer-contribute__choices {
  display: grid;
  gap: 10px;
}

.ou-jouer-contribute__genres {
  position: relative;
}

.ou-jouer-contribute__genre-ui {
  display: none;
}

.ou-jouer-contribute__genres.is-enhanced .ou-jouer-contribute__genre-ui {
  display: block;
  position: relative;
}

.ou-jouer-contribute__genres.is-enhanced .ou-jouer-contribute__genre-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ou-jouer-contribute__genre-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.ou-jouer-contribute__genre-badges[hidden] {
  display: none;
}

.ou-jouer-contribute__genre-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--ou-jouer-field-bg);
  font-size: 0.875rem;
  line-height: 1.3;
}

.ou-jouer-contribute__genre-badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ou-jouer-contribute__genre-badge-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted, #b8b0b0);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.ou-jouer-contribute__genre-badge-remove:hover,
.ou-jouer-contribute__genre-badge-remove:focus-visible {
  color: var(--color-text, #f2ecec);
  background: rgba(255, 255, 255, 0.08);
}

.ou-jouer-contribute__genre-badge-remove:focus-visible {
  outline: 2px solid var(--color-secondary, #d4af37);
  outline-offset: 1px;
}

.ou-jouer-contribute__genre-trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.ou-jouer-contribute__genre-trigger:focus-visible {
  outline: 2px solid var(--color-secondary, #d4af37);
  outline-offset: 2px;
}

.ou-jouer-contribute__genre-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--ou-jouer-field-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ou-jouer-contribute__genre-panel[hidden] {
  display: none;
}

.ou-jouer-contribute__genre-search {
  width: 100%;
}

.ou-jouer-contribute__genre-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(240px, 40vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--ou-jouer-field-bg);
}

.ou-jouer-contribute__genre-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.ou-jouer-contribute__genre-option:last-child {
  border-bottom: 0;
}

.ou-jouer-contribute__genre-option:hover,
.ou-jouer-contribute__genre-option.is-active {
  background: rgba(212, 175, 55, 0.12);
}

.ou-jouer-contribute__genre-option.is-selected {
  color: var(--color-secondary, #d4af37);
}

.ou-jouer-contribute__genre-option-check {
  flex: 0 0 1rem;
  width: 1rem;
  text-align: center;
  font-size: 0.85rem;
}

.ou-jouer-contribute__genre-option-label {
  min-width: 0;
  line-height: 1.35;
}

.ou-jouer-contribute__genre-empty {
  margin: 0;
  padding: 4px 2px 0;
  color: var(--color-text-muted, #b8b0b0);
  font-size: 0.875rem;
}

.ou-jouer-contribute__genre-empty[hidden] {
  display: none;
}

@media (max-width: 639px) {
  .ou-jouer-contribute__genre-panel {
    position: static;
    margin-top: 8px;
    box-shadow: none;
  }

  .ou-jouer-contribute__genre-list {
    max-height: min(220px, 36vh);
  }
}

.ou-jouer-contribute__choice {
  margin: 0;
}

.ou-jouer-contribute__choice-box {
  border-radius: 50%;
}

.ou-jouer-contribute__choice .form-check__label {
  line-height: 1.45;
}

.ou-jouer-contribute__social-grid {
  display: grid;
  gap: 0;
}

@media (min-width: 768px) {
  .ou-jouer-contribute__social-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  .ou-jouer-contribute__social-grid .form-group {
    margin-bottom: 16px;
  }

  .ou-jouer-contribute__social-grid .form-group:nth-last-child(-n + 2) {
    margin-bottom: 0;
  }
}

.ou-jouer-contribute__contacts {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.ou-jouer-contribute__contacts:empty {
  margin-bottom: 0;
}

.ou-jouer-contribute__contact {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ou-jouer-border);
  border-radius: var(--radius-md, 12px);
  background: var(--ou-jouer-field-bg);
  min-width: 0;
}

.ou-jouer-contribute__contact-grid {
  display: grid;
  gap: 0 14px;
}

.ou-jouer-contribute__contact-grid .form-group {
  margin-bottom: 14px;
}

.ou-jouer-contribute__contact-grid .form-group:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ou-jouer-contribute__contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ou-jouer-contribute__contact-value {
    grid-column: 1 / -1;
  }
}

.ou-jouer-contribute__contact-remove {
  justify-self: start;
}

.ou-jouer-contribute__add-contact {
  margin-top: 4px;
}

.ou-jouer-contribute__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.ou-jouer-contribute__actions .btn--primary {
  min-width: 14rem;
  font-weight: 700;
}

.ou-jouer-contribute__form .form-group > ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.ou-jouer-contribute__form .form-group > ul li {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background: rgba(230, 57, 70, 0.12);
  border: 1px solid rgba(230, 57, 70, 0.35);
  color: #f5a5ad;
}

.ou-jouer-contribute__form input.form-group__input.is-invalid,
.ou-jouer-contribute__form textarea.form-group__textarea.is-invalid,
.ou-jouer-contribute__form select.form-group__select.is-invalid {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

@media (max-width: 519px) {
  .ou-jouer-show__collab {
    flex-direction: column;
    align-items: flex-start;
  }

  .ou-jouer-contribute__body {
    padding: 20px 0 56px;
  }

  .ou-jouer-contribute__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ou-jouer-contribute__actions .btn--primary {
    width: 100%;
    min-width: 0;
  }
}