/* ===========================================================================
   style.css — Feuille de style unique de Culturoscope.
   Thème : coloré et joyeux (corail, violet, soleil, menthe) sur fond crème,
   gros boutons lisibles au doigt, barre d'onglets en bas sur mobile (comme
   une appli) et navigation classique sur ordinateur.
   Chaque catégorie apporte sa couleur via la variable CSS --cat.
   =========================================================================== */

:root {
  --coral: #ff5c7a;  --coral-dark: #e23c5c;  --coral-light: #ffe6ec;
  --violet: #7b5cff; --violet-dark: #5f42d9; --violet-light: #ece7ff;
  --sun: #ffc93c;    --sun-dark: #d99e00;    --sun-light: #fff4cf;
  --mint: #2ec4b6;   --mint-dark: #1f9d91;   --mint-light: #d8f5f1;
  --sky: #3aa0ff;    --sky-light: #e2f0ff;
  --orange: #ff8c42;
  --ink: #2b2140;
  --muted: #6f6785;
  --border: #eee6f4;
  --paper: #fff9f2;
  --card: #ffffff;
  --shadow: 0 6px 20px rgba(80, 50, 120, 0.10);
  --shadow-hover: 0 12px 28px rgba(80, 50, 120, 0.16);
  --radius: 18px;
  --grad: linear-gradient(120deg, var(--coral) 0%, var(--violet) 100%);
  --cat: var(--violet);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%, #ffe3ea 0, transparent 30%),
    radial-gradient(circle at 100% 15%, #ebe4ff 0, transparent 30%),
    radial-gradient(circle at 50% 100%, #fff1c9 0, transparent 35%),
    var(--paper);
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.container { min-height: 65vh; padding-bottom: 48px; }

h1 { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.01em; margin: 1.2rem 0 0.6rem; }
h2 { font-size: 1.25rem; font-weight: 800; margin-top: 2rem; }
h3 { font-weight: 800; }
a { color: var(--violet-dark); }
.muted { color: var(--muted); font-size: 0.95em; }
.small { font-size: 0.88em; }
.text-right { text-align: right; }
.inline { display: inline; }
.back-link { text-decoration: none; font-weight: 700; }

/* --- En-tête -------------------------------------------------------------- */

.site-header {
  background: var(--grad);
  color: #fff;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 4px 18px rgba(123, 92, 255, 0.25);
}
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.brand { color: #fff; font-size: 1.35rem; font-weight: 900; text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 8px; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 1.2rem;
}
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.main-nav a { color: #fff; text-decoration: none; padding: 6px 0; font-weight: 700; }
.main-nav a:hover { text-decoration: underline; }
.main-nav .nav-space { background: rgba(255, 255, 255, 0.18); padding: 4px 12px; border-radius: 999px; }
.main-nav .btn-sun { padding: 6px 14px; }

.badge {
  background: #fff; color: var(--violet-dark);
  border-radius: 999px; padding: 1px 8px; font-size: 0.8em; font-weight: 800;
}
.badge-alert { background: var(--sun); color: var(--ink); }

/* --- Barre d'onglets mobile (façon appli) ----------------------------------- */

.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(80, 50, 120, 0.08);
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--muted); font-size: 0.72rem; font-weight: 700; padding: 2px 0;
}
.bottom-nav a.active { color: var(--coral-dark); }
.tab-icon { position: relative; font-size: 1.35rem; line-height: 1.2; }
.tab-dot { position: absolute; top: -2px; right: -8px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid #fff; }

@media (max-width: 760px) {
  .bottom-nav { display: flex; }
  main.container { padding-bottom: 96px; }
  .site-footer { padding-bottom: 90px; }
  /* Sur mobile, le menu haut se réduit : la barre du bas prend le relais. */
  .main-nav a:not(.nav-space):not(.btn), .main-nav form { display: none; }
}

/* --- Sous-menus orga / admin ---------------------------------------------------- */

.sub-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  border-radius: 14px; padding: 10px 12px; margin-top: 16px;
}
.sub-nav a { text-decoration: none; font-weight: 700; padding: 5px 12px; border-radius: 999px; color: var(--ink); }
.sub-nav a.active, .sub-nav a:hover:not(.btn) { background: rgba(255, 255, 255, 0.75); }
.sub-nav-orga { background: var(--mint-light); }
.sub-nav-admin { background: var(--violet-light); }

/* --- Messages flash (confirmation, erreurs) ------------------------------------- */

.flash { padding: 12px 16px; border-radius: 12px; margin: 16px 0; border: 1px solid; font-weight: 600; }
.flash-success { background: var(--mint-light); border-color: var(--mint); color: var(--mint-dark); }
.flash-error { background: var(--coral-light); border-color: var(--coral); color: var(--coral-dark); }
.flash-info { background: var(--sky-light); border-color: var(--sky); color: #1d5fa5; }

/* --- Accueil : héros, recherche, catégories ---------------------------------------- */

.hero {
  background: var(--card); border-radius: 24px; padding: 26px 28px; margin-top: 22px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.hero h1 {
  margin: 0 0 6px; font-size: 2rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0 0 16px; max-width: 60ch; color: var(--muted); font-weight: 600; }

.search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search-bar input[type="search"] { flex: 2 1 220px; }
.search-bar input[type="text"] { flex: 1 1 140px; }
.search-bar select { flex: 1 1 150px; }
.search-bar input, .search-bar select { max-width: none; margin: 0; }
.search-bar-compact { margin: 10px 0; }
.search-bar-compact input[type="search"] { flex: 1 1 200px; max-width: 360px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin: 0; }
.check-inline input { width: 20px; height: 20px; accent-color: var(--coral); }
.check-block { display: flex; margin: 14px 0; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
@media (max-width: 760px) {
  .chips:not(.chips-radio) { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
}
.chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 0.95rem;
  color: var(--ink); background: color-mix(in srgb, var(--cat) 14%, white);
  border: 2px solid color-mix(in srgb, var(--cat) 35%, white);
  transition: transform 0.12s ease, background 0.12s ease;
}
.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--cat) 26%, white); }
.chip-active, .chip:has(input:checked) { background: var(--cat); border-color: var(--cat); color: #fff; }
.chip-small { font-size: 0.85rem; padding: 4px 10px; }
.chip-choice { cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.results-title { margin-top: 1rem; }

/* --- Grille et cartes événements ------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin: 16px 0 32px;
}
@media (max-width: 480px) { .grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

.event-card {
  position: relative;
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.event-media { display: block; position: relative; }
.event-media img, .event-placeholder { width: 100%; height: 160px; object-fit: cover; display: block; }
.event-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 3.4rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 55%, white), var(--cat));
}
.event-placeholder-large { height: 340px; font-size: 6rem; }
@media (max-width: 480px) { .event-media img, .event-placeholder { height: 120px; } .event-placeholder { font-size: 2.6rem; } }

.date-badge {
  position: absolute; top: 10px; left: 10px;
  background: #fff; color: var(--ink); border-radius: 12px; padding: 4px 8px; line-height: 1.05; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); min-width: 44px;
}
.date-badge b { display: block; font-size: 1.2rem; font-weight: 900; }
.date-badge small { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: var(--coral-dark); }

.cat-pill {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--cat); color: #fff; font-weight: 800; font-size: 0.78rem;
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.fav-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.fav-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: #c9bfd8; font-size: 1.25rem; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); transition: transform 0.12s ease, color 0.12s ease;
}
.fav-btn:hover { transform: scale(1.1); color: var(--coral); }
.fav-btn.is-fav { color: var(--coral); }
.fav-btn-large { width: 50px; height: 50px; font-size: 1.7rem; }

.event-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.event-body h3 { margin: 0 0 2px; font-size: 1.05rem; line-height: 1.3; }
.event-body h3 a { text-decoration: none; color: var(--ink); }
.event-meta { margin: 0; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.event-foot { margin: auto 0 0; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.price-tag { font-weight: 900; color: var(--violet-dark); }
.price-free { color: var(--mint-dark); background: var(--mint-light); padding: 2px 10px; border-radius: 999px; }

.empty { text-align: center; padding: 40px 16px; }
.empty-emoji { font-size: 3.4rem; margin: 0; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0 32px; }

.cta-box {
  background: var(--grad); color: #fff; border-radius: 24px; padding: 28px; text-align: center; margin: 24px 0;
}
.cta-box h2 { margin: 0 0 6px; color: #fff; }
.cta-box p { margin: 0 0 14px; }

/* --- Fiche événement ------------------------------------------------------------------- */

.event-page { background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); margin-top: 8px; }
.event-hero { position: relative; }
.event-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.event-hero .cat-pill { font-size: 0.9rem; padding: 5px 14px; bottom: 14px; left: 16px; }
.event-hero .fav-form { top: 14px; right: 16px; }
.event-columns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; padding: 8px 24px 24px; }
@media (max-width: 760px) { .event-columns { grid-template-columns: 1fr; padding: 4px 16px 16px; } }
.event-main h1 { margin-top: 0.8rem; }
.event-organizer { margin-top: -4px; font-weight: 700; }
.event-facts { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.event-facts li { display: flex; gap: 12px; align-items: flex-start; }
.fact-icon { font-size: 1.4rem; line-height: 1.2; width: 30px; text-align: center; flex-shrink: 0; }
.event-description { white-space: pre-line; }
.story-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; margin: 12px 0; white-space: pre-line; }

.side-card { background: color-mix(in srgb, var(--cat) 9%, white); border: 2px solid color-mix(in srgb, var(--cat) 30%, white); border-radius: var(--radius); padding: 16px 18px 18px; margin: 16px 0; }
.side-title { font-weight: 900; font-size: 1.1rem; margin: 0 0 6px; }
.side-card label { margin-top: 10px; }
.side-card input, .side-card textarea { max-width: none; }
.side-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.92rem; }
.report summary { list-style: none; cursor: pointer; }
.report summary::-webkit-details-marker { display: none; }
.report form { margin-top: 8px; }

/* --- Page organisateur --------------------------------------------------------------------- */

.org-header { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.org-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; box-shadow: var(--shadow); }
.org-header h1 { margin: 0; }
.org-header p { margin: 4px 0 0; }

/* --- Formulaires ---------------------------------------------------------------------------- */

label { display: block; font-weight: 700; margin: 14px 0 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"],
input[type="number"], input[type="datetime-local"], select, textarea {
  width: 100%; max-width: 480px;
  padding: 11px 14px; font-size: 1rem; font-family: inherit; color: var(--ink);
  border: 2px solid var(--border); border-radius: 12px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-light); }
input[type="number"] { max-width: 130px; }
input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 2px solid var(--border); border-radius: 10px; background: #fff; }
textarea { max-width: 680px; }

.btn {
  display: inline-block;
  background: #fff; color: var(--violet-dark);
  border: 2px solid var(--violet); border-radius: 999px;
  padding: 9px 18px; font-size: 1rem; font-weight: 800; font-family: inherit;
  text-decoration: none; cursor: pointer; line-height: 1.3;
  transition: transform 0.1s ease, background 0.12s ease;
}
.btn:hover { background: var(--violet-light); transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: 0 4px 14px rgba(255, 92, 122, 0.35); }
.btn-primary:hover { background: var(--coral-dark); border-color: var(--coral-dark); }
.btn-sun { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.btn-sun:hover { background: #ffd65e; border-color: #ffd65e; }
.btn-danger { border-color: var(--coral); color: var(--coral-dark); }
.btn-danger:hover { background: var(--coral-light); }
.btn-small { padding: 5px 12px; font-size: 0.9rem; }
.btn-large { padding: 13px 26px; font-size: 1.1rem; margin-top: 12px; }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 12px; }

.linklike {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; text-decoration: underline; cursor: pointer;
}
.main-nav .linklike { color: #fff; font-weight: 700; }

.auth-box { max-width: 480px; margin: 32px auto; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 8px 28px 28px; box-shadow: var(--shadow); }
.auth-box input { max-width: none; }

.form-row { display: flex; flex-wrap: wrap; gap: 0 20px; }
.form-row > div { flex: 1; min-width: 150px; }
.form-row .grow { flex: 2; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 24px 24px; box-shadow: var(--shadow); margin: 16px 0; }
.form-card h2:first-child { margin-top: 12px; }
.form-wide { max-width: 820px; }
.form-wide input:not([type="number"]):not([type="color"]), .form-wide textarea { max-width: none; }
.form-card-orga { background: var(--sun-light); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .two-columns { grid-template-columns: 1fr; } }
.danger-zone { margin: 24px 0; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.danger-zone input { max-width: 300px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Tableaux ---------------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table thead th { background: var(--violet-light); color: var(--violet-dark); font-weight: 800; }
.table-compact th, .table-compact td { padding: 6px 10px; }
.row-today { background: var(--sun-light); }
.row-inactive { opacity: 0.55; }
@media (max-width: 760px) { .table { display: block; overflow-x: auto; } }

.thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; }
.thumb-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; background: color-mix(in srgb, var(--cat) 25%, white); }
.thumb-large { width: 240px; height: auto; border-radius: 12px; }
.cell-thumb { width: 64px; }
.cell-actions { white-space: nowrap; }
.cell-actions > * { margin: 2px 0; }
.cell-preview { color: var(--muted); }
.stock-form { display: flex; gap: 6px; align-items: center; }
.stock-form select { max-width: 190px; padding: 6px 10px; }

.tag { font-size: 0.78rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--violet-light); color: var(--violet-dark); white-space: nowrap; }
.tag-off { background: #eee9f2; color: #6a6480; }
.tag-alert { background: var(--coral-light); color: var(--coral-dark); }
.tag-warn { background: var(--sun-light); color: #9a6b00; }

/* --- Statuts -------------------------------------------------------------------------------------- */

.status { font-size: 0.82rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.status-publie, .status-confirmee { background: var(--mint-light); color: var(--mint-dark); }
.status-brouillon { background: var(--sun-light); color: #9a6b00; }
.status-annule, .status-annulee, .status-passee { background: #eee9f2; color: #6a6480; }
.status-retire { background: var(--coral-light); color: var(--coral-dark); }

/* --- Listes : réservations (tickets), conversations, favoris passés ---------------------------------- */

.ticket {
  display: flex; gap: 16px; align-items: stretch;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); margin: 14px 0;
}
.ticket-date {
  background: var(--cat); color: #fff; padding: 14px 12px; min-width: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.ticket-date b { font-size: 1.8rem; font-weight: 900; }
.ticket-date small { font-weight: 800; text-transform: uppercase; font-size: 0.75rem; }
.ticket-body { flex: 1; padding: 12px 4px; }
.ticket-body h3 { margin: 0 0 4px; }
.ticket-body h3 a { text-decoration: none; color: var(--ink); }
.ticket-body p { margin: 4px 0; }
.ticket-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 14px; }
@media (max-width: 600px) { .ticket { flex-wrap: wrap; } .ticket-actions { flex-direction: row; width: 100%; justify-content: space-between; padding-top: 0; } }

.conversation-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.conversation-list li { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); }
.conversation-list li.unread { border-color: var(--coral); background: var(--coral-light); }
.conversation-list a { flex: 1; text-decoration: none; color: var(--ink); display: grid; gap: 2px; min-width: 0; }
.conv-title { font-weight: 800; }
.conv-with { font-size: 0.88rem; color: var(--muted); font-weight: 700; }
.conv-preview { font-size: 0.92rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.simple-list { padding-left: 18px; }
.simple-list li { margin: 8px 0; }

/* --- Tableaux de bord --------------------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 20px 0; }
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 14px; text-align: center; text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
}
a.stat-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.stat-warning { border-color: var(--sun); background: var(--sun-light); }
.stat-number {
  display: block; font-size: 2.2rem; font-weight: 900; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-weight: 700; color: var(--muted); font-size: 0.92rem; }
.stat-label small { font-weight: 600; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.tabs a { text-decoration: none; padding: 7px 14px; border: 2px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 700; }
.tabs .tab-active { background: var(--violet); color: #fff; border-color: var(--violet); }

.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0; }
.actions form { display: flex; flex-wrap: wrap; gap: 10px; }

.org-request h2 { font-size: 1.15rem; }
.refuse-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.refuse-form input { max-width: 260px; padding: 6px 10px; }

.category-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; margin: 10px 0 2px; }
.category-row input[type="text"] { max-width: 220px; padding: 6px 10px; }
.category-row .input-emoji { max-width: 64px; text-align: center; }
.category-row .input-position { max-width: 80px; padding: 6px 10px; }
.category-toggle { margin-left: 12px; color: var(--muted); }

/* --- Messagerie ----------------------------------------------------------------------------------------- */

.chat { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; max-width: 720px; }
.bubble { border-radius: 18px; padding: 10px 14px; max-width: 85%; }
.bubble-me { background: var(--violet-light); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-them { background: var(--card); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble-meta { margin: 0; font-size: 0.78rem; font-weight: 800; color: var(--muted); }
.bubble-body { margin: 4px 0 0; white-space: pre-line; }
.message-form { max-width: 720px; }
.message-form textarea { max-width: none; }

/* --- Pied de page ------------------------------------------------------------------------------------------ */

.site-footer { background: var(--ink); color: #e9e2f5; padding: 22px 0; margin-top: 40px; }
.site-footer p { margin: 4px 0; }
.site-footer a { color: #fff; }

/* --- Page À propos ----------------------------------------------------------------------------------------- */

.story-page { max-width: 760px; }
.story-photo { width: 100%; border-radius: var(--radius); margin: 12px 0 20px; }

/* --- Statistiques -------------------------------------------------------------------------------------------- */

.stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.bar-cell { width: 30%; min-width: 90px; }
.bar { height: 14px; border-radius: 7px; background: var(--violet); min-width: 3px; }

/* --- Impression ---------------------------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .sub-nav, .bottom-nav, .no-print, .flash, .fav-form { display: none !important; }
  body { background: #fff; font-size: 13px; }
  .table, .event-page { border-color: #999; box-shadow: none; }
  a { text-decoration: none; color: inherit; }
}

/* ===========================================================================
   Carte des événements (page /carte et mini-carte des fiches)
   =========================================================================== */

/* La carte a besoin de largeur : cette page déborde du gabarit habituel. */
.container-map { max-width: 1600px; }

.view-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 8px; }
.view-switch-current { font-weight: 800; background: var(--violet); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 0.9rem; }

/* Onglets Liste / Carte : utiles seulement sur téléphone. */
.map-tabs { display: none; margin-left: auto; background: var(--card); border: 2px solid var(--border); border-radius: 999px; padding: 3px; }
.map-tab { border: none; background: none; font: inherit; font-weight: 800; color: var(--muted); padding: 5px 16px; border-radius: 999px; cursor: pointer; }
.map-tab.active { background: var(--coral); color: #fff; }

/* Mise en page principale : liste à gauche, carte à droite. */
.map-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 16px;
  height: calc(100dvh - 210px);
  min-height: 460px;
  margin-bottom: 24px;
}
.map-panel { display: flex; flex-direction: column; min-height: 0; }
.map-count { margin: 0 0 8px; font-weight: 700; }
.map-count strong { font-size: 1.25rem; color: var(--coral-dark); }
/* La liste défile ; elle n'est PAS un conteneur flex en colonne, sinon ses
   lignes se feraient comprimer pour tenir dans la hauteur disponible (les
   éléments flex ont flex-shrink:1 par défaut) au lieu de déborder proprement. */
.map-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.map-list > * + * { margin-top: 10px; }
.map-hint { margin: 8px 0 0; font-size: 0.85rem; }

/* Pendant le chargement d'une nouvelle zone, la liste s'estompe légèrement. */
.map-layout.chargement .map-list { opacity: 0.55; transition: opacity 0.15s ease; }

/* Une ligne d'événement dans la colonne de gauche. */
.map-row {
  /* flex:0 0 auto → la ligne garde SA hauteur, quelle que soit celle de la
     liste : c'est ce qui empêche les titres longs d'être rognés. */
  flex: 0 0 auto;
  display: flex; gap: 12px; align-items: stretch; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--cat);
  border-radius: 14px; box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.map-row:hover, .map-row:focus-visible, .map-row.surligne { transform: translateX(3px); box-shadow: var(--shadow-hover); outline: none; }
.map-row.surligne { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 8%, white); }

/* Pastille de date : largeur fixe, alignée en haut pour rester en face du
   titre même quand celui-ci tient sur deux lignes. */
.map-row-date {
  flex: 0 0 auto; width: 56px; align-self: stretch;
  background: color-mix(in srgb, var(--cat) 15%, white); color: var(--ink);
  border-radius: 9px 0 0 9px; padding: 10px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; text-align: center;
}
.map-row-date b { font-size: 1.3rem; font-weight: 900; }
.map-row-date small { font-weight: 800; text-transform: uppercase; font-size: 0.66rem; color: var(--muted); }

.map-row-body { padding: 10px 14px 11px 0; min-width: 0; flex: 1 1 auto; }
.map-row-body h3 { margin: 0 0 3px; font-size: 1rem; line-height: 1.3; }
.map-row-body h3 a {
  text-decoration: none; color: var(--ink);
  /* Au-delà de deux lignes, le titre est abrégé par « … » plutôt que de
     pousser la ligne indéfiniment. Le titre complet reste dans l'info-bulle. */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* Les métadonnées tiennent sur une ligne, abrégées si besoin. */
.map-row-body .event-meta {
  font-size: 0.85rem; margin: 1px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-row-body .event-foot { padding-top: 6px; gap: 6px; flex-wrap: wrap; }
.map-row-body .price-tag { font-size: 0.92rem; }

/* La carte elle-même. */
.map-canvas-wrap { position: relative; min-height: 0; }
#carte {
  width: 100%; height: 100%;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); background: var(--violet-light); z-index: 1;
}
.map-locate { position: absolute; top: 12px; right: 12px; z-index: 500; background: #fff; box-shadow: var(--shadow); }
.map-noscript { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-weight: 700; padding: 0 20px; }

/* ---------------------------------------------------------------------------
   Repère d'un événement sur la carte.

   Un disque BLANC cerclé de la couleur de la catégorie, avec l'emoji au
   centre, et une pointe en dessous qui désigne le lieu exact.

   Pourquoi un fond blanc ? Les emoji sont eux-mêmes multicolores : posés sur
   un aplat saturé, ils se lisent mal et se confondent avec le fond de carte.
   Le blanc les détache nettement, et l'anneau garde l'identité de couleur.

   Pourquoi aucune rotation ? La goutte d'eau classique s'obtient en pivotant
   le repère de -45°, mais l'emoji pivote alors avec lui. La pointe est donc
   dessinée séparément (::before / ::after), et l'emoji reste droit.
   --------------------------------------------------------------------------- */
.marqueur { background: none; border: none; }
.marqueur-pastille {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  font-size: 19px; line-height: 1;
  background: #fff;
  border: 3.5px solid var(--cat);
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(43, 33, 64, 0.3);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  transform-origin: 50% 118%;   /* l'agrandissement part de la pointe */
}
/* La pointe : un triangle de la couleur de la catégorie, souligné de blanc
   pour rester visible sur un fond de carte sombre. */
.marqueur-pastille::before,
.marqueur-pastille::after {
  content: ""; position: absolute; left: 50%; width: 0; height: 0;
  border-style: solid; border-color: transparent;
}
.marqueur-pastille::before {           /* liseré blanc, dessous */
  bottom: -12px; margin-left: -7px;
  border-width: 12px 7px 0 7px; border-top-color: #fff;
}
.marqueur-pastille::after {            /* pointe colorée, par-dessus */
  bottom: -9px; margin-left: -5px;
  border-width: 10px 5px 0 5px; border-top-color: var(--cat);
}
.marqueur-actif .marqueur-pastille,
.marqueur-pastille:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 16px rgba(43, 33, 64, 0.4);
  z-index: 500;
}

/* Regroupement des événements proches (Leaflet.markercluster). */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(123, 92, 255, 0.28); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background: var(--violet); color: #fff; font-family: "Nunito", sans-serif; font-weight: 900;
}
.marker-cluster-medium div { background: var(--coral); }
.marker-cluster-large div { background: var(--coral-dark); }

/* Bulle affichée au clic sur une pastille. */
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { margin: 10px 12px; font-family: "Nunito", sans-serif; }
.popup-image { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.popup-title { margin: 0 0 4px; font-size: 1rem; }
.popup-title a { text-decoration: none; color: var(--ink); }
.popup-meta { margin: 2px 0; font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.popup .btn { margin-top: 8px; }

/* Mini-carte de la fiche d'un événement. */
.mini-carte { height: 220px; border-radius: 12px; border: 1px solid var(--border); margin: 8px 0; z-index: 1; }

/* Position détectée / saisie, dans l'espace organisateur. */
.geo-box { background: var(--sky-light); border: 1px solid var(--sky); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.geo-box.geo-absente { background: var(--sun-light); border-color: var(--sun); }
.geo-fields { display: flex; flex-wrap: wrap; gap: 0 16px; }
.geo-fields > div { flex: 1; min-width: 150px; }
.geo-fields input { max-width: 200px; }

/* --- Téléphone : la liste et la carte ne tiennent pas côte à côte ----------- */
@media (max-width: 900px) {
  .map-tabs { display: flex; margin-left: 0; }
  .map-layout { grid-template-columns: 1fr; height: calc(100dvh - 210px); }
  .map-layout[data-vue="liste"] .map-canvas-wrap { display: none; }
  .map-layout[data-vue="carte"] .map-panel { display: none; }
  .map-hint { display: none; }

  /* Les onglets Liste/Carte suffisent ici : afficher EN PLUS les pastilles
     « Voir en liste / Carte » donnait deux jeux de boutons très proches pour
     deux actions différentes (changer de page vs. changer de moitié d'écran).
     Le retour à la grille reste accessible par la barre du bas. */
  .view-switch > a, .view-switch > .view-switch-current { display: none; }
  .view-switch { margin: 10px 0 8px; }

  /* Formulaire de recherche compact : trois rangées au lieu de cinq, pour que
     la carte commence plus haut dans l'écran. */
  .search-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .search-bar input[type="search"] { grid-column: 1 / -1; }
  .search-bar .check-inline { grid-column: 1 / -1; }
  .chips { margin: 12px 0 4px; }
}