.detail-cover img {
  content-visibility: visible;
}

/* ======================================================
   DESIGN TOKENS (SAFE – ne casse pas le module)
   ====================================================== */

.events-module {
  --bg-main: #ffffff;
  --bg-card: #f8fafc;
  --bg-soft: #eef2f7;

  --text-main: #0f172a;
  --text-muted: #64748b;

  --border-soft: #e2e8f0;
  --primary: #2563eb;

  --radius: 14px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
}

.events-theme-dark {
  --bg-main: #0b1220;
  --bg-card: #111827;
  --bg-soft: #0f172a;

  --text-main: #e5e7eb;
  --text-muted: #94a3b8;

  --border-soft: #1e293b;
  --primary: #60a5fa;
}

/* ======================================================
   BASE
   ====================================================== */

.events-archive,
.events-detail-page {
  background: var(--bg-main);
  color: var(--text-main);
}

/* ======================================================
   ARCHIVE
   ====================================================== */

.events-grid {
  gap: 24px;
}

.event-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
}

.event-cover img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.event-body {
  padding: 18px;
}

.event-title {
  font-size: 1.1rem;
  line-height: 1.4;
}

.event-excerpt {
  color: var(--text-muted);
}

.archive-sub {
  color: var(--text-muted);
}

/* ======================================================
   FILTRES ARCHIVE
   ====================================================== */

.archive-filters-modern {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  margin-bottom: 24px;
}

.archive-filters label {
  font-size: .85rem;
  color: var(--text-muted);
}

.archive-filters input,
.archive-filters select {
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 12px 14px;
}

/* ======================================================
   BOUTONS (général)
   ====================================================== */

.btn {
  transition: background .2s ease, transform .15s ease, box-shadow .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary,
a.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--primary);
  color: #fff !important;
  text-decoration: none !important;

  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500;
  border: none;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}

/* ======================================================
   PAGE DÉTAIL – LAYOUT (CRUCIAL)
   ====================================================== */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   PAGE DÉTAIL – TYPOGRAPHIE (SANS ÉCRASER)
   ====================================================== */

.detail-main {
  font-size: 15px;
  line-height: 1.65;
}

.detail-main p {
  margin: 0 0 1em;
}

.detail-main h2 {
  font-size: 1.35rem;
  margin: 1.2em 0 .6em;
}

.detail-main h3 {
  font-size: 1.15rem;
  margin: 1em 0 .5em;
}

/* ======================================================
   FORMULAIRE INSCRIPTION (LISIBLE)
   ====================================================== */

.events-reg {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
}

.events-reg h4 {
  margin-top: 0;
}

.events-reg label {
  font-size: .85rem;
  color: var(--text-muted);
}

.events-reg input,
.events-reg select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: var(--text-main);
}

/* ======================================================
   MAPS – MOBILE (Waze / Plans / Google)
   ====================================================== */

.events-map-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.events-map-links .btn {
  flex: 1;
  justify-content: center;
}

/* ======================================================
   MODAL
   ====================================================== */

.events-modal-backdrop {
  backdrop-filter: blur(6px);
}

.events-modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

/* ======================================================
   BOUTON RETOUR ÉVÉNEMENTS
   ====================================================== */

.btn-back-events {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  margin: 1rem 0 2rem;

  text-decoration: none;
  background: var(--bg-soft);
  color: var(--text-main);

  border: 1px solid var(--border-soft);
  border-radius: 999px;

  padding: 10px 18px;
  font-size: .9rem;
  font-weight: 600;
}

.btn-back-events:hover {
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ======================================================
   RESPONSIVE ARCHIVE
   ====================================================== */

@media (max-width: 640px) {
  .archive-filters-modern .filters-row {
    flex-direction: column;
    gap: 12px;
  }

  .event-cover img {
    height: 160px;
  }
}
/* ===============================
   DETAIL META – CONTRASTE RENFORCÉ
   =============================== */

.events-detail-page .detail-meta-highlight .meta-item {
  background: linear-gradient(
    135deg,
    rgba(56,189,248,.18),
    rgba(168,85,247,.18)
  );
  border: 1px solid rgba(56,189,248,.45);
}

.events-detail-page .detail-meta-highlight .meta-icon {
  color: #7dd3fc;
}

.events-detail-page .detail-meta-highlight .meta-label {
  color: #cbd5f5;
  font-weight: 600;
  letter-spacing: .04em;
}

.events-detail-page .detail-meta-highlight .meta-value {
  color: #ffffff;
  font-weight: 600;
}
/* ===============================
   DETAIL PAGE – CENTRAGE
   =============================== */

.events-detail-page .event-detail-shell {
  max-width: 980px;
  margin: 2rem auto;
}

@media (max-width: 768px) {
  .events-detail-page .event-detail-shell {
    margin: 1rem auto;
    padding: 1.2rem;
  }
}
/* ===============================
   FORMULAIRE – LABELS BLANCS
   =============================== */

.events-detail-page .events-reg label {
  color: #ffffff;
  font-weight: 600;
}

.events-detail-page .events-reg input,
.events-detail-page .events-reg select {
  color: #ffffff;
}
/* ===============================
   BOUTON RETOUR ÉVÉNEMENTS
   =============================== */

/* ===============================
   BOUTON RETOUR = BOUTON PAYPAL
   =============================== */

.events-detail-page a.btn-back-events {
  background: linear-gradient(135deg,#38bdf8,#a855f7) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(56,189,248,.4);
  border: none;
}
/* ===============================
   FIX : champ Tarif en pleine largeur
   =============================== */

/* Le bloc contenant le select tarif */
.events-detail-page .events-reg .reg-grid > div:has(select[name="ticket_label"]) {
  grid-column: 1 / -1; /* force 1 seule colonne */
}

/* Select tarif bien lisible */
.events-detail-page select[name="ticket_label"] {
  width: 100%;
  font-size: 16px;
}
/* ===============================
   Boutons navigation mobile (Waze / Plans / Maps)
   =============================== */

.events-detail-page .events-map-links {
  display: grid;
  gap: .6rem;
  margin-top: .75rem;
}

/* Base commune */
.events-detail-page .events-map-links .btn {
  width: 100%;
  justify-content: center;
  font-weight: 600;
  border-radius: 14px;
  padding: .7rem 1rem;
  color: #fff !important;
}

/* Waze */
.events-detail-page .btn.waze {
  background: #33ccff;
}

/* Apple Plans – contraste renforcé */
.events-detail-page .btn.apple {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.6);
}

.events-detail-page .btn.apple:hover {
  background: #111;
  border-color: rgba(255,255,255,.55);
}


/* Google Maps */
.events-detail-page .btn.gmaps {
  background: #34a853;
}

/* Hover */
.events-detail-page .events-map-links .btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}
/* ===============================
   Boutons Maps avec icônes
   =============================== */

.events-detail-page .events-map-links .btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: 1rem;
  font-weight: 600;
}

/* Icône commune */
.events-detail-page .events-map-links .btn::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Waze */
.events-detail-page .btn.waze::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.04 2 11c0 2.39 1.05 4.57 2.77 6.16L4 22l4.05-2.15c1.22.37 2.55.58 3.95.58 5.52 0 10-4.04 10-9S17.52 2 12 2zm-4 8a1.25 1.25 0 110-2.5A1.25 1.25 0 018 10zm8 0a1.25 1.25 0 110-2.5A1.25 1.25 0 0116 10zm-4 6c-2.33 0-4.31-1.46-5.11-3.5h10.22C16.31 14.54 14.33 16 12 16z'/%3E%3C/svg%3E");
}

/* Apple Plans */
.events-detail-page .btn.apple::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E");
}

/* Google Maps */
.events-detail-page .btn.gmaps::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E");
}
/* Bouton agenda – même gabarit que les boutons maps */
.events-detail-page .events-modal-extra .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  width: 100%;
  min-height: 44px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
  );

  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;

  font-weight: 600;
  font-size: .95rem;

  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Icône agenda */
.events-detail-page .events-modal-extra .btn::before {
  content: "📅";
  font-size: 1.1rem;
}


.events-detail-page .events-map-links,
.events-detail-page .events-modal-extra {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.events-detail-page .events-map-links .btn,
.events-detail-page .events-modal-extra .btn {
  width: 100%;
}
/* Sécurité largeur – empêche tout débordement */
.events-detail-page .detail-side,
.events-detail-page .events-map-links,
.events-detail-page .events-modal-extra {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Sécurité largeur – empêche tout débordement */
.events-detail-page .detail-side,
.events-detail-page .events-map-links,
.events-detail-page .events-modal-extra {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.events-detail-page .events-map-links .btn,
.events-detail-page .events-modal-extra .btn {
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.events-detail-page * {
  box-sizing: border-box;
}

/* === CONTRASTE BOUTONS MAPS === */
.events-detail-page .btn.waze {
  background: #1e6fd9; /* Waze plus sombre */
  color: #ffffff;
  font-weight: 600;
}

.events-detail-page .btn.gmaps {
  background: #1b7f3a; /* Google Maps accessible */
  color: #ffffff;
  font-weight: 600;
}

/* Focus visible clavier */
.events-detail-page .btn.waze:focus-visible,
.events-detail-page .btn.gmaps:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* modal deja inscrit */
.events-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.events-modal {
  background: #0f172a;
  color: #fff;
  border-radius: 18px;
  max-width: 420px;
  width: 92%;
  padding: 1.8rem 1.6rem 1.6rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: modalPop .25s ease-out;
}

.events-modal.success {
  border: 2px solid #22c55e;
}

.events-modal.error {
  border: 2px solid #ef4444;
}

.events-modal-icon {
  font-size: 2.2rem;
  margin-bottom: .5rem;
}

.events-modal-content {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.events-modal-actions {
  display: flex;
  justify-content: center;
}

.events-modal-close {
  position: absolute;
  top: .7rem;
  right: .9rem;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.6rem;
  cursor: pointer;
}

.events-modal-close:hover {
  color: #fff;
}

@keyframes modalPop {
  from {
    transform: scale(.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
body.events-modal-open {
  overflow: hidden;
}
.event-meta-line {
  margin-top: .4rem;
  font-size: .95rem;
}

.event-meta-line a {
  text-decoration: underline;
}
/* ===== Organizer / Performer ===== */

..event-entity {
  margin-top: 1rem;
}

.event-entity-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .6;
}

.event-entity-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .25rem;
}

.event-entity-name {
  font-weight: 600;
  color: var(--cat-color);
}

.event-entity-actions {
  display: flex;
  gap: .5rem;
}
.event-entity a,
.event-entity-link {
  color: var(--cat-color);
  text-decoration: none;
  font-weight: 600;
}

.event-entity a:hover,
.event-entity-link:hover {
  text-decoration: underline;
}
.event-entity {
  display: grid;
  gap: .35rem;
}

.event-entity-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .65;
}

.event-entity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.event-entity-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cat-color);
}

.event-entity-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.detail-entities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .detail-entities {
    grid-template-columns: 1fr;
  }
}

.entity-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.entity-header {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.entity-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--cat-color);
}

.entity-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}

.entity-name {
  font-size: 1rem;
  font-weight: 700;
}

.entity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.detail-meta-highlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: .75rem;
}

.meta-item {
  display: flex;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  align-items: center;
}

.meta-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--cat-color);
  opacity: .9;
}

.meta-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .65;
}

.meta-value {
  font-weight: 600;
}

.meta-link {
  color: var(--cat-color);
  text-decoration: none;
}

.meta-link:hover {
  text-decoration: underline;
}
/* Nom artiste / organisateur */
.events-detail-page .entity-name {
  color: var(--cat-color);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

/* Lien vers la fiche (hérite de la couleur catégorie) */
.events-detail-page .entity-actions a.btn.ghost {
  color: var(--cat-color);
  border-color: color-mix(in srgb, var(--cat-color) 35%, transparent);
}

.events-detail-page .entity-actions a.btn.ghost:hover {
  background: color-mix(in srgb, var(--cat-color) 12%, transparent);
}
/* MODAL ENTITÉ */
.entity-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1200; /* > event modal */
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-modal {
  background: var(--bg-card, #0f172a);
  color: #fff;
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 1.25rem;
  position: relative;
}

.entity-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-size: 1.5rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.entity-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
}

.entity-modal-overlay.is-open {
  display: flex;
}

.entity-modal {
  background: #0f172a;
  color: #fff;
  max-width: 720px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 1.5rem;
}
.meta-item.meta-entity {
  all: unset;
  display: flex;
  gap: .75rem;
  align-items: center;
  cursor: pointer;
}
/* ===== ENTITY MODAL PREMIUM ===== */

.entity-modal {
  max-width: 720px;
  width: 100%;
  background: #0f172a;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.entity-hero img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .entity-hero img {
    height: 180px;
  }
}

.entity-content {
  padding: 20px 22px 24px;
}

.entity-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.entity-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.entity-badge {
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #e5e7eb;
}

.entity-body {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 6px;
  font-size: .95rem;
  line-height: 1.6;
}

.entity-body h3 {
  margin: 1.2em 0 .4em;
  font-size: 1.05rem;
}

.entity-footer {
  margin-top: 18px;
  text-align: right;
}


/* ===============================
   ENTITÉS (Artiste / Organisateur)
================================ */

.detail-entities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 1.5rem 0;
}

/* base identique aux autres meta */
.detail-entities .meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  cursor: pointer;
  transition: 
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

/* hover premium */
.detail-entities .meta-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--cat-color);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* icône = même taille que date / lieu */
.detail-entities .meta-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cat-color) 75%, transparent),
    rgba(255,255,255,0.08)
  );
}

/* SVG size NORMALISÉE */
.detail-entities .meta-icon svg {
  width: 20px;
  height: 20px;
  fill: white;
  opacity: 0.95;
}

/* textes */
.detail-entities .meta-texts {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.detail-entities .meta-label {
  font-size: 0.75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.detail-entities .meta-value {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.meta-entity::after {
  content: "↗";
  margin-left: auto;
  opacity: 0;
  transition: opacity .15s ease;
}

.meta-entity:hover::after {
  opacity: .6;
}


.attendee-item {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
/* embed et detail php */


/* ===== GLOBAL BACKGROUND ===== */
.events-detail-page{
  background:
    radial-gradient(circle at 20% 20%, var(--cat-color), transparent 60%),
    linear-gradient(180deg,#0b0f19,#0f172a);
}

/* ===== HERO PREMIUM ===== */
.detail-cover{
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 60px 160px rgba(0,0,0,.8);
  position:relative;
}

.detail-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle,var(--cat-color),transparent 70%);
  opacity:.25;
  mix-blend-mode:screen;
  pointer-events:none;
}

.detail-cover img{
  transition:transform .8s ease;
}

.detail-cover:hover img{
  transform:scale(1.05);
}

/* ===== HEADER ===== */
.detail-header h1{
  font-size:3rem;
  font-weight:900;
  background:linear-gradient(90deg,#fff,var(--cat-color));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== META CARDS ===== */
.meta-item{
  background:rgba(255,255,255,0.04);
  border-radius:20px;
  padding:20px;
  backdrop-filter:blur(12px);
  transition:.3s;
  border:1px solid rgba(255,255,255,0.05);
}

.meta-item:hover{
  transform:translateY(-6px);
  box-shadow:0 0 30px var(--cat-color);
  border-color:var(--cat-color);
}

/* ===== FORM CARD ===== */
.events-reg{
  background:rgba(255,255,255,0.03);
  border-radius:28px;
  padding:30px;
  backdrop-filter:blur(20px);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}

/* ===== BUTTON PREMIUM ===== */
.btn.primary{
  border-radius:999px;
  padding:14px 32px;
  font-weight:900;
  transition:.3s;
}

.btn.primary:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px var(--cat-color);
}

/* ===== ENTITY MODAL IMPROVED ===== */
.entity-modal{
  background:#0f172a;
  border-radius:32px;
  box-shadow:0 60px 160px rgba(0,0,0,.9);
  scrollbar-width:none;
}
.entity-modal::-webkit-scrollbar{display:none;}


/* =========================================
   MOBILE CLEAN MODE (NO CATEGORY COLORS)
   ========================================= */

@media (max-width: 768px){

  /* Suppression background catégorie */
  .events-detail-page{
    background: #0b0f19 !important;
  }

  /* Hero sans glow */
  .detail-cover::after{
    display:none !important;
  }

  /* Titre sans gradient catégorie */
  .detail-header h1{
    background:none !important;
    -webkit-text-fill-color:#ffffff !important;
    color:#ffffff !important;
  }

  /* Pills neutres */
  .pill{
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
  }

  /* Meta cards neutres */
  .meta-item{
    background:rgba(255,255,255,0.05) !important;
    border:1px solid rgba(255,255,255,0.06) !important;
    box-shadow:none !important;
  }

  .meta-item:hover{
    transform:none !important;
    box-shadow:none !important;
  }

  /* Formulaire neutre */
  .events-reg{
    background:rgba(255,255,255,0.04) !important;
    box-shadow:none !important;
  }

  /* Bouton sans glow */
  .btn.primary:hover{
    box-shadow:none !important;
    transform:none !important;
  }

  /* Modal entity neutre */
  .entity-modal{
    border:none !important;
    box-shadow:0 30px 80px rgba(0,0,0,.8) !important;
  }

}
/* =========================================
   MOBILE CONVERSION MODE
   ========================================= */

@media (max-width:768px){

  /* Layout vertical normal */
  .detail-layout{
    display:block;
  }

  .detail-main,
  .detail-side{
    width:100%;
  }

  /* Formulaire normal (plus fixed) */
  .events-reg{
    position:relative;
    margin-top:30px;
    border-radius:22px;
    padding:20px;
    backdrop-filter:blur(20px);
    background:rgba(15,23,42,.9);
    box-shadow:0 20px 50px rgba(0,0,0,.6);
  }

  /* Inputs Apple clean */
  .events-reg input,
  .events-reg select{
    select option {
  background: linear-gradient(160deg,#0f172a,#0b1220);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: .3s;
  }

  .events-reg input:focus,
  .events-reg select:focus{
  outline: none;
  border-color: var(--cat-color,#3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.4);

  }

  .events-reg .btn.primary{
    height:60px;
    border-radius:20px;
    font-size:18px;
    font-weight:900;
    background:linear-gradient(180deg,#ffffff,#e5e7eb);
    color:#000;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }

}


.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cat-color,#3b82f6);
  font-size: 14px;
}

/*ergomie tactile */
@media (max-width:768px){

  .meta-item,
  .btn,
  .pill{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  button{
    -webkit-tap-highlight-color: transparent;
  }

}
/* paiement ssl */
@media (max-width:768px){
  .payment-trust{
    text-align:center;
    font-size:.8rem;
    opacity:.6;
    margin-bottom:10px;
  }
}
/* image*/
img{
  content-visibility:auto;
}

/* ===============================
   FIX : Badge places premium
   =============================== */

.events-widget .event-places {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 900;
  padding: 12px 24px;
  border-radius: 999px;
  display: inline-block;
  color: #fff;

  background: linear-gradient(
    135deg,
    var(--cat-color),
    rgba(0,0,0,.85)
  );

  box-shadow:
    0 10px 30px rgba(0,0,0,.5),
    0 0 20px var(--cat-color);

  border: none;
}

/* Presque complet */
.events-widget .event-places.almost {
  background: linear-gradient(135deg,#f59e0b,#b45309);
  box-shadow: 0 10px 30px rgba(180,83,9,.5);
}

/* Complet */
.events-widget .event-places.full {
  background: linear-gradient(135deg,#7f1d1d,#991b1b);
  box-shadow: 0 10px 30px rgba(127,29,29,.5);
}
.event-badge{
  position:absolute;
  top:20px;
  right:20px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.5px;
  z-index:5;
}

/* LIVE */
.event-badge.live{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  box-shadow:0 0 30px rgba(239,68,68,.6);
  animation:pulseLive 1.5s infinite;
}

@keyframes pulseLive{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

/* TERMINÉ */
.event-badge.finished{
  background:rgba(255,255,255,.1);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.2);
}
.detail-header{
  position:relative;
}
.event-modal{
position:fixed;
inset:0;
display:none;
z-index:9999;
}

.event-modal.open{
display:block;
}

.event-modal-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.7);
backdrop-filter:blur(6px);
}

.event-modal-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
max-width:1000px;
max-height:90vh;
overflow:auto;
background:#0f172a;
border-radius:14px;
box-shadow:0 20px 80px rgba(0,0,0,.6);
padding:20px;
}

.event-modal-close{
position:absolute;
top:10px;
right:10px;
background:#ef4444;
border:none;
color:#fff;
font-size:20px;
width:36px;
height:36px;
border-radius:50%;
cursor:pointer;
}


.events-skeleton{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

.skeleton-card{
  min-height:260px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  background:#111827;
  border:1px solid rgba(255,255,255,.06);
}

.skeleton-card::after{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:150%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  animation:eventsSkeleton 1.1s infinite;
}

@keyframes eventsSkeleton{
  100%{ left:150%; }
}

.event-card{
  animation:eventFadeIn .28s ease;
}

@keyframes eventFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.event-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}

.event-modal.open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.event-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(8px);
}

.event-modal-content{
  position:relative;
  z-index:2;
  width:min(1100px,92vw);
  max-height:90vh;
  overflow:auto;
  background:#0b1220;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  animation:eventModalIn .18s ease;
}

@keyframes eventModalIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.event-modal-close{
  position:sticky;
  top:12px;
  margin:12px 12px 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:5;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
}

.event-modal-body{
  padding:0 0 8px;
}

html.events-modal-open,
body.events-modal-open{
  overflow:hidden;
}