/* BailaJo — Design system « Bodega chic ». Réf : docs/superpowers/redesign-reference/design-system.css
   Bodoni Moda (titres, OFL), auto-hébergée. Corps : pile système. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap; font-optical-sizing: auto;
}

/* Palette « Bodega chic » — voir docs/superpowers/redesign-reference/design-system.css */
:root {
  color-scheme: light;
  --bg: #F7EFDF;          /* ivoire chaud */
  --surface: #FFFFFF;
  --ink: #201B16;
  --ink-soft: #7A6F5F;
  --line: #E4D8C0;
  --accent: #C04722;      /* terracotta (primaire) */
  --accent-contrast: #FFFFFF;
  --accent-hover: #A83C1B;
  --accent-active: #8E3216;
  --teal: #0F6B76;        /* secondaire froid */
  --gold: #C8901B;        /* accent moutarde */
  --danger: #B3261E;
  --danger-contrast: #FFF8F0;
  --status-pending-bg: #F2E4C6;
  --status-pending-ink: #8A6B15;
  --status-active-bg: #D8EDDD;
  --status-active-ink: #1F7042;
  --status-expired-bg: #F5DCD8;
  --status-expired-ink: #A8231C;
  --status-cancelled-bg: #EAE3D4;
  --status-cancelled-ink: #6B6458;
  --status-offert-bg: #D8EBEE;
  --status-offert-ink: #0F6B76;
  --role-subscriber: #2E9E5B;   /* 🟢 danseurs (réservé) */
  --role-association: #E8A31E;   /* 🟡 associations (réservé) */
  --role-admin: #C62828;         /* 🔴 admin (réservé) */
  /* Typographie */
  --font-display: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Rayons & élévation */
  --r-card: 10px; --r-control: 6px;
  --elev-1: 0 1px 0 rgba(32,27,22,.05);
  --elev-2: 0 1px 0 rgba(32,27,22,.05), 0 10px 28px rgba(93,64,35,.10);
  --elev-3: 0 2px 4px rgba(32,27,22,.08), 0 24px 60px rgba(93,64,35,.16);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal) 25%, transparent);
  /* Palette par style de danse (jamais proche des couleurs « feu ») */
  --style-salsa:#C6428C; --style-bachata:#7A4FC2; --style-kizomba:#2D6CDF; --style-semba:#1197A6;
  --style-urbankiz:#9B3FB5; --style-kompa:#2E8BC0; --style-zouk:#D14FA0; --style-rock:#5B6B8C;
  --style-boogie:#9C6B3F; --style-default:#6E7A8A;
}

/* Thème piloté par classe (bouton + localStorage), plus par l'OS seul */
:root.theme-dark {
  color-scheme: dark;
  --bg: #1B1512;        /* nuit chaude */
  --surface: #262019;
  --ink: #F3EBDB;
  --ink-soft: #AC9E8C;
  --line: #392F26;
  --accent: #E56B39;    /* terracotta éclaircie pour le sombre */
  --accent-contrast: #1B1512;
  --accent-hover: #ED7F51;
  --accent-active: #F28D63;
  --teal: #3FA3AD;
  --gold: #D9A83E;
  --danger: #C4483C;
  --danger-contrast: #FFF3EC;
  --status-pending-bg:#3E3320;  --status-pending-ink:#DDBA62;
  --status-active-bg:#213528;   --status-active-ink:#86CFA2;
  --status-expired-bg:#402423;  --status-expired-ink:#EF938B;
  --status-cancelled-bg:#37312A;--status-cancelled-ink:#B7A99A;
  --status-offert-bg:#1F3538;   --status-offert-ink:#7FC4CC;
  --elev-1: 0 1px 0 rgba(0,0,0,.3);
  --elev-2: 0 1px 0 rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  --elev-3: 0 2px 4px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.5);
  --style-salsa:#EE73B4; --style-bachata:#A98AE6; --style-kizomba:#6C9BF0; --style-semba:#46C2D0;
  --style-urbankiz:#C978E0; --style-kompa:#63B4E4; --style-zouk:#EE7CC1; --style-rock:#93A2C4;
  --style-boogie:#C89865; --style-default:#9AA6B6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--elev-2);
}

.card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 10px;
}
.card-toggle .chevron {
  transition: transform 0.2s ease;
  font-size: 0.85rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.card-toggle.collapsed .chevron {
  transform: rotate(-90deg);
}

/* Carte soirée avec vignette d'affiche (maquette Agenda ## 2) */
.card--event { display: flex; gap: 20px; }
.card__thumb {
  flex: 0 0 118px; align-self: stretch; min-height: 160px;
  border-radius: 4px; border: 1px solid var(--line); object-fit: cover;
}
.card__thumb--placeholder {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--ink) 6%, var(--bg)) 0 10px, var(--bg) 10px 20px);
  display: grid; place-items: center;
  font-family: monospace; font-size: 11px; color: var(--ink-soft);
}
.card__body { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.card__meta .price { font-weight: 700; color: var(--ink); }
@media (max-width: 600px) {
  .card--event { flex-direction: column; }
  .card__thumb { flex: none; width: 118px; min-height: 160px; }
}

.photo-thumb-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.photo-thumb-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.login-card {
  width: 100%;
  max-width: 360px;
}

.login-brand {
  text-align: center;
  margin-bottom: 10px;
}
.login-brand img {
  width: 60px;
  height: 60px;
}
.login-card h1 {
  text-align: center;
  font-size: 1.25rem;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 20px;
}

h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 4px;
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }
a:active { color: var(--accent-active); }

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 14px 0 6px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
  border-radius: var(--r-control);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

button {
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  padding: 9px 16px;
  min-height: 36px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  box-shadow: var(--elev-2);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-active); }

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn-secondary:hover:not(:disabled) { background: color-mix(in oklab, var(--ink) 7%, transparent); }

.btn-danger {
  background: var(--danger);
  color: var(--danger-contrast);
  font-weight: 700;
}
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }

.btn-small {
  padding: 5px 10px;
  font-size: 0.78rem;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-top: 10px;
}

.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.logo {
  width: 38px; height: 38px; border-radius: 8px; background: #1C1613; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.logo__mark {  /* monogramme « BJ » — dégradé feu réservé */
  background: linear-gradient(135deg, var(--role-subscriber), var(--role-association), var(--role-admin));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav__btn {
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 7px 15px; min-height: 0;
  font: 600 0.8rem/1 var(--font-body); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .16s ease, color .16s ease;
}
.nav__btn:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink); }
.nav__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav__btn[aria-current="page"], .nav__btn.is-active {
  background: var(--ink); color: var(--bg); font-weight: 700;
}
.nav__btn--quiet { border-color: var(--line); background: var(--surface); color: var(--ink-soft); }
@media (max-width: 480px) { .nav { width: 100%; } }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--elev-2);
}

th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  vertical-align: middle;
}

th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in oklab, var(--ink) 3%, var(--surface)); }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.status-pending { background: var(--status-pending-bg); color: var(--status-pending-ink); }
.status-active { background: var(--status-active-bg); color: var(--status-active-ink); }
.status-expired { background: var(--status-expired-bg); color: var(--status-expired-ink); }
.status-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-ink); }
.status-offert { background: var(--status-offert-bg); color: var(--status-offert-ink); }

.role-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  flex: none;
}
.role-dot.role-subscriber { background: var(--role-subscriber); }
.role-dot.role-association { background: var(--role-association); }
.role-dot.role-admin { background: var(--role-admin); }

.actions { display: flex; gap: 6px; flex-wrap: wrap; }

.new-subscriber-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
@media (max-width: 720px) {
  .new-subscriber-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .new-subscriber-form { grid-template-columns: 1fr; }
}
.new-subscriber-form label {
  margin: 0 0 6px;
}

.form-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.form-section > label {
  display: block;
  margin: 0 0 4px;
}

.muted { color: var(--ink-soft); font-size: 0.85rem; }

.contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.contact-row label {
  margin: 0 0 4px;
}

.association-card {
  margin-bottom: 16px;
}

.contact-list-view {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.contact-list-view li {
  padding: 4px 0;
  color: var(--ink-soft);
}

.style-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.style-checkboxes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.86rem;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.style-checkboxes input { width: auto; }

.suggestion-item {
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.88rem;
}

.site-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.site-footer a { color: var(--ink-soft); margin: 0 8px; }

/* Covoiturage : schéma de voiture vue de dessus (maquette validée le 2026-07-12) */
.cv-waiting { border: 1px dashed #e0c36a; background: #fdf8e8; color: #2E2A26; border-radius: 10px; padding: 10px; margin: 12px 0; }
.cv-waiting h5 { margin: 0 0 8px; font-size: 0.8em; color: #8a6d1a; text-transform: uppercase; letter-spacing: 0.05em; }
/* Texte sombre forcé sur tous les éléments à fond clair du covoiturage : en mode
   sombre, --ink devient crème et les pseudos seraient illisibles (cf. bulles de chat). */
.cv-pers { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: #fff; color: #2E2A26; border: 1px solid #d8c274; margin: 3px; cursor: grab; }
.cv-pers.cv-selected { outline: 3px solid var(--accent); }
.cv-pers .cv-av, .cv-seat .cv-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.9em; color: #fff;
  background: #5a8ec9; flex-shrink: 0; }
.cv-nm { line-height: 1.15; }
.cv-nm b { font-size: 0.95em; }
.cv-nm small { display: block; font-size: 0.72em; color: #777; font-weight: 400; }
.cv-car { width: 260px; margin: 0 auto 6px; border: 2px solid #888; border-radius: 32px 32px 14px 14px;
  padding: 16px 12px 12px; background: #f5f5f5; }
.cv-row { display: flex; justify-content: space-around; margin-bottom: 12px; }
.cv-seat { width: 74px; min-height: 84px; border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-align: center; border: 2px solid #9ccba6;
  background: #e3f2e6; color: #2E2A26; padding: 2px; font-size: 0.78em; }
.cv-seat .cv-nm { font-weight: 700; }
.cv-seat.cv-driver-seat { border-color: #5a8ec9; background: #e0ecf9; }
.cv-seat.cv-empty { border: 2px dashed #bbb; background: #fff; color: #999; cursor: pointer; }
.cv-car-label { text-align: center; font-size: 0.8em; color: #666; margin-bottom: 18px; }
.cv-hint { font-size: 0.78em; color: #555; background: #eef4fb; border: 1px solid #c4d8ef;
  border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.unread-pill { background: #c9564a; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 0.8em; }
.suggestion-item:hover { background: var(--bg); }

/* Chat de sortie */
.chat-box { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.chat-msg { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.chat-msg .cv-av { width: 28px; height: 28px; font-size: 0.75em; }
/* Couleur de texte sombre forcée : les bulles gardent un fond clair même en mode
   sombre (où --ink devient crème), sinon pseudo et message sont illisibles. */
.chat-bubble { background: #fff; color: #2E2A26; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px;
  padding: 6px 10px; font-size: 0.9em; max-width: 75%; overflow-wrap: break-word; }
.chat-bubble .chat-who { font-weight: 700; font-size: 0.9em; }
.chat-bubble .chat-when { font-size: 0.72em; color: #999; margin-left: 6px; }
.chat-msg.chat-mine { flex-direction: row-reverse; }
.chat-msg.chat-mine .chat-bubble { background: #e3f2e6; border-color: #9ccba6; border-radius: 12px 4px 12px 12px; }

/* ══════════════════════════════════════════════════
   Task E — Dossiers de séries + liste ponctuelles
══════════════════════════════════════════════════ */

/* ── Grille des dossiers de séries ── */
.serie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* ── Carte-dossier (inspirée .blog-card Jacana) ── */
.serie-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.serie-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}

/* Image en haut, hauteur fixe, zoom au survol */
.serie-card-img {
  height: 195px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  position: relative;
}
.serie-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.serie-card:hover .serie-card-img img { transform: scale(1.05); }

/* Pastille neutre si pas d'affiche */
.serie-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--ink-soft);
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--ink) 6%, var(--bg)) 0 10px, var(--bg) 10px 20px);
}

/* Bouton ouvrir/fermer positionné sur l'image */
.serie-card-chevron-wrap {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(0,0,0,.45);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  pointer-events: none;
  transition: transform .2s;
}
.serie-card.is-open .serie-card-chevron-wrap { transform: rotate(90deg); }

/* Corps de la carte */
.serie-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.serie-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 6px;
}
.serie-card-count {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.serie-card-dates {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.serie-card-statuts {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--teal);
}

/* ── État actif d'une carte ouverte ── */
.serie-card.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent), 0 4px 16px rgba(0,0,0,.10);
}
/* Désactiver le lift au survol quand la carte est ouverte */
.serie-card.is-open:hover {
  transform: none;
}

/* ── Contenu déplié d'un dossier (pleine largeur dans la grille) ── */
.serie-drawer {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  /* Déployé/replié via display géré en JS */
}
.serie-drawer-fullwidth {
  grid-column: 1 / -1;
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* Astuce affichée en tête du tiroir ouvert */
.serie-drawer-hint {
  padding: 8px 16px 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Grille 3 colonnes pour les lignes d'occurrences dans le tiroir */
.serie-occ-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 900px) {
  .serie-occ-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .serie-occ-list { grid-template-columns: 1fr; }
}

.serie-occ-item {
  font-size: 0.88rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
/* L'occurrence dépliée (avec son détail) s'étend sur toute la largeur de la grille */
.serie-occ-item.is-expanded {
  grid-column: 1 / -1;
}

.serie-occ-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s;
  min-height: 44px;
}
.serie-occ-row:hover { background: var(--bg); }
.serie-occ-row.is-open { background: var(--bg); }

.serie-occ-chevron {
  font-size: 0.75rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform .2s;
}
.serie-occ-row.is-open .serie-occ-chevron { transform: rotate(90deg); }

.serie-occ-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-occ-status { flex-shrink: 0; }

/* Détail d'une occurrence dépliée */
.serie-occ-detail {
  padding: 12px 14px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* ── Embellissement des boutons « Ajouter une photo » et croix ✕ ── */

/* Bouton photo dans le bloc de gestion */
.btn-add-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-add-photo:hover {
  background: var(--teal);
  color: #fff;
}

/* Pastille ronde ✕ pour suppression de photo */
.btn-photo-delete {
  position: absolute;
  top: -5px;
  right: -5px;
  background: rgba(0,0,0,.45);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background .15s;
}
.btn-photo-delete:hover {
  background: var(--danger);
  border-color: var(--danger);
}

/* Astuce sous le titre de section des dossiers / des ponctuelles */
.section-hint {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: -4px 0 8px;
}

/* ══════════════════════════════════════════════════
   Soirées ponctuelles — liste compacte
══════════════════════════════════════════════════ */
.soiree-row-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.soiree-row-item {
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.soiree-row-item:last-child { border-bottom: none; }

.soiree-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
}
.soiree-row-header:hover { background: var(--bg); }
.soiree-row-header.is-open { background: var(--bg); }

/* Vignette de l'affiche */
.soiree-row-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.soiree-row-thumb-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--ink) 6%, var(--bg)) 0 10px, var(--bg) 10px 20px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ink-soft);
}

/* Vignette d'affiche des listes admin (brief §7) — hachurée si pas d'affiche */
.table__thumb {
  width: 42px; height: 56px; border-radius: 4px; border: 1px solid var(--line);
  object-fit: cover; flex: none;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--ink) 6%, var(--bg)) 0 8px, var(--bg) 8px 16px);
}

.soiree-row-info { flex: 1; min-width: 0; }
.soiree-row-title { font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 2px; }
.soiree-row-meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.soiree-row-chevron {
  font-size: 0.75rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform .2s;
}
.soiree-row-header.is-open .soiree-row-chevron { transform: rotate(90deg); }

/* Contenu déplié d'une ponctuelle */
.soiree-row-detail {
  padding: 12px 16px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: none;
}

/* Barre de filtres admin soirées */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.filter-bar select,
.filter-bar input[type="text"] {
  width: auto;
  flex: 1 1 160px;
  min-width: 120px;
}
@media (max-width: 600px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar select,
  .filter-bar input[type="text"],
  .filter-bar button {
    width: 100%;
    flex: none;
  }
}

/* En-tête de jour de la vue liste chronologique de l'agenda (sticky, thème-safe). */
.agenda-day-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  padding: 8px 0 6px;
  margin: 6px 0 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

/* ── Vue calendrier mensuel de l'agenda (thème-safe) ─────────────────────────── */
.cal-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.cal-title { font-weight:700; min-width:160px; text-align:center; }
.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.cal-weekday { text-align:center; font-size:0.78em; font-weight:700; color: var(--ink-soft); padding:4px 0; }
.cal-cell { min-height:56px; border:1px solid var(--line); border-radius:6px; padding:4px; background: var(--surface); color: var(--ink); }
.cal-blank { border:none; background:transparent; }
.cal-daynum { font-size:0.85em; font-weight:600; }
.cal-has { cursor:pointer; }
.cal-today { outline:2px solid var(--accent); }
.cal-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-dots { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.cal-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.cal-more { font-size:0.7em; color: var(--ink-soft); }
.cal-panel { margin-top:18px; }
.cal-panel-header { font-weight:700; border-bottom:1px solid var(--line); padding:8px 0; margin:6px 0 10px; }

/* ── Vue semaine de l'agenda (thème-safe) ────────────────────────────────────── */
.week-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.week-col { border:1px solid var(--line); border-radius:6px; background: var(--surface); min-height:80px; padding:4px; display:flex; flex-direction:column; gap:4px; }
.week-today { outline:2px solid var(--accent); }
.week-colhead { font-size:0.75em; font-weight:700; color: var(--ink-soft); text-align:center; }
.week-block { background: var(--bg); border-radius:5px; padding:4px 5px; cursor:pointer; color: var(--ink); }
.week-block-selected { box-shadow: inset 0 0 0 1px var(--accent); }
.week-block-time { font-size:0.72em; font-weight:700; color: var(--ink-soft); }
.week-block-title { font-size:0.8em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.week-panel { margin-top:18px; }
@media (max-width: 600px) {
  .week-colhead { font-size:0.62em; }
  .week-block-time { font-size:0.62em; }
  .week-block-title { font-size:0.66em; }
}

/* ── Vue carte de l'agenda ────────────────────────────────────────────────────── */
#agenda-map { height: 420px; border-radius: 8px; }
.carte-panel { margin-top: 16px; }
@media (max-width: 600px) { #agenda-map { height: 320px; } }

/* Tags de style de danse (froid, secondaire) */
.style-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.style-tag {
  display: inline-block; border: 1px solid var(--teal); color: var(--teal);
  border-radius: 3px; padding: 3px 10px;
  font: 700 0.72rem/1.4 var(--font-body);
  letter-spacing: .05em; text-transform: uppercase;
}
.style-tag--neutral { border-color: var(--line); color: var(--ink-soft); }

/* Segmented control pour la bascule de vues agenda */
.view-switch {
  display: inline-flex; background: var(--surface);
  border: 1px solid var(--ink); border-radius: var(--r-control);
  overflow: hidden; box-shadow: var(--elev-2);
}
.view-switch__btn {
  border: none; border-radius: 0; background: transparent; color: var(--ink-soft);
  padding: 9px 20px; min-height: 40px;
  font: 600 0.8rem/1 var(--font-body); cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.view-switch__btn + .view-switch__btn { border-left: 1px solid var(--line); }
.view-switch__btn:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink); }
.view-switch__btn:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.view-switch__btn:active { transform: none; }
.view-switch__btn.is-active { background: var(--accent); color: var(--accent-contrast); font-weight: 700; }
@media (max-width: 720px) {
  .view-switch { width: 100%; }
  .view-switch__btn { flex: 1; padding: 10px 8px; }
}

/* ── Toast de confirmation ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink);
  color: var(--bg);
  padding: 14px 20px;
  border-radius: var(--r-card);
  box-shadow: 0 4px 20px rgba(32,27,22,.25);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
  z-index: 9999;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  opacity: 0;
  pointer-events: none;
}
.toast.toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.toast__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.toast__close {
  display: inline-block;
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(247,239,223,.35);
  color: var(--bg);
  padding: 4px 14px;
  border-radius: var(--r-control);
  cursor: pointer;
  font-size: 0.82rem;
  transition: background .15s;
}
.toast__close:hover { background: rgba(247,239,223,.12); }