/* ==========================================================================
   liste.css — liste publique des soirées
   Même identité visuelle que les pages de soirée.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  background-color: #14110f;
  color: #333333;
  padding: 24px 16px;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.page { width: 100%; max-width: 980px; }

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
  overflow: hidden;
}

.main-content { padding: 24px; }

/* ---- Bannière dorée ------------------------------------------------------ */
.main-banner-container {
  width: 100%;
  min-height: 110px;
  padding: 22px 18px;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 50%, #8b6508 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main-banner-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
}

.main-banner-sub {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 8px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.main-banner-note {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.97);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- Titres de section --------------------------------------------------- */
.section-titre {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ff4757;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-titre--passees { color: #9ca3af; margin-top: 34px; }

.section-titre .compte {
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

/* ---- Carte d'une soirée -------------------------------------------------- */
.soirees { display: flex; flex-direction: column; gap: 12px; }

.soiree {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background-color: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
}

.soiree:hover {
  background-color: #fff1f2;
  border-color: #fecdd3;
  transform: translateX(2px);
}

.soiree--passee { opacity: 0.55; }
.soiree--passee:hover { opacity: 0.8; }

/* ---- Logo ---------------------------------------------------------------- */
.soiree-logo {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
}

.soiree-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.logo-absent { font-size: 1.7rem; opacity: 0.35; }

/* ---- Informations -------------------------------------------------------- */
.soiree-infos { flex: 1 1 auto; min-width: 0; }

.soiree-titre {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  margin-bottom: 7px;
  word-break: break-word;
}

.soiree-ligne {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.86rem;
  color: #6b7280;
  line-height: 1.45;
  margin-bottom: 3px;
}

.soiree-ligne .ico { flex: 0 0 auto; opacity: 0.8; }
.soiree-ligne b { color: #374151; }

.soiree-categorie {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #faf5ff;
  color: #a855f7;
  border: 1px solid #e9d5ff;
}

.soiree-fleche {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: #d1d5db;
  font-weight: 700;
}

.soiree:hover .soiree-fleche { color: #ff4757; }

/* ---- État vide ----------------------------------------------------------- */
.vide { text-align: center; padding: 50px 20px; }
.vide-picto { font-size: 2.6rem; margin-bottom: 14px; opacity: 0.4; }
.vide p { color: #9ca3af; font-size: 0.95rem; font-weight: 600; }

/* ---- Retour vers la page principale du site ------------------------------ */
.retour-accueil {
  text-align: center;
  margin: 18px 0 6px;
}

.retour-accueil a {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}

.retour-accueil a:hover {
  color: #ff4757;
  border-color: #ff4757;
  box-shadow: 0 4px 14px rgba(255, 71, 87, 0.18);
  transform: translateY(-1px);
}

.retour-accueil a:active { transform: translateY(1px); }

/* ---- Bas de page --------------------------------------------------------- */
.copyright {
  text-align: center;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 0 4px;
}

@media (max-width: 560px) {
  body { padding: 16px 12px; }
  .main-content { padding: 18px; }
  .main-banner-title { font-size: 1.5rem; }
  .soiree { gap: 12px; padding: 12px; }
  .soiree-logo { flex-basis: 54px; width: 54px; height: 54px; }
  .soiree-fleche { display: none; }
}

/* ==========================================================================
   Bloc « organiser sa soirée » — barre compacte
   Les styles essentiels sont aussi intégrés dans index.php : la barre
   s'affiche correctement même si cette feuille n'est pas encore chargée.
   ========================================================================== */
/* ---- Deux colonnes : organiser à gauche, les soirées à droite ------------ */
.colonnes {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 22px;
  align-items: start;
}

.col-gauche { position: sticky; top: 24px; }
.col-droite { min-width: 0; }

.cta-organiser {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  padding: 18px;
  margin: 0;
}

.cta-organiser-texte-bloc { min-width: 0; text-align: center; }

.cta-organiser-titre {
  font-size: 0.98rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  margin: 0 0 3px 0;
}

.cta-organiser-texte {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.45;
  margin: 0;
}

.cta-organiser-zone {
  font-size: 0.78rem;
  color: #b45309;
  font-weight: 700;
  line-height: 1.4;
  margin: 5px 0 0 0;
}

.btn-organiser {
  flex: 0 0 auto;
  display: block;
  text-align: center;
  background: #ff4757;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 3px 10px rgba(255, 71, 87, 0.35);
  transition: box-shadow 0.2s, transform 0.12s, filter 0.2s;
}

.btn-organiser:hover {
  filter: brightness(1.06);
  box-shadow: 0 5px 16px rgba(255, 71, 87, 0.45);
  transform: translateY(-1px);
}

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

/* Sous 880 px, la colonne de gauche repasse au-dessus de la liste */
@media (max-width: 880px) {
  .colonnes { grid-template-columns: 1fr; gap: 20px; }
  .col-gauche { position: static; }
  .cta-organiser { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .cta-organiser-texte-bloc { flex: 1 1 300px; text-align: center; }
  .btn-organiser { flex: 0 0 auto; display: inline-block; }
}

@media (max-width: 560px) {
  .cta-organiser { flex-direction: column; padding: 14px; }
  .cta-organiser-texte-bloc { text-align: center; flex-basis: 100%; }
  .btn-organiser { width: 100%; text-align: center; padding: 13px 20px; }
}