:root {
  --fg: #0f172a;
  --fg-soft: #334155;
  --bg: #f8fafc;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --yes: #15803d;
  --maybe: #b45309;
  --no: #b91c1c;
  --yes-bg: #dcfce7;
  --maybe-bg: #fef3c7;
  --no-bg: #fee2e2;
  --danger: #b91c1c;
  --danger-hover: #991b1b;
  --card-bg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --radius: 8px;
  --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
  position: relative;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: transparent;
  background-image:
    url('/public/bg/lynx.png'),
    url('/public/bg/vautour.png'),
    url('/public/bg/violon.png'),
    url('/public/bg/chamois.png');
  background-position:
    left 3vh,
    right 4vh,
    2vw bottom,
    right bottom;
  background-repeat: no-repeat;
  background-size:
    32vw auto,
    36vw auto,
    16vw auto,
    32vw auto;
  filter: sepia(0.1) saturate(0.85);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 700px) {
  body::before {
    background-image:
      url('/public/bg/lynx.png'),
      url('/public/bg/violon.png');
    background-position: left top, right bottom;
    background-size: 60vw auto, 35vw auto;
    opacity: 0.15;
  }
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.25;
}
h1 { font-size: 1.75rem; margin: 0 0 0.75rem; letter-spacing: -0.025em; }
h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
h4 { font-size: 0.95rem; margin: 1rem 0 0.5rem; }

p { margin: 0.5rem 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: 0.825rem; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--fg);
  line-height: 1;
}
.topbar .brand:hover { text-decoration: none; color: var(--fg); }
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}
.brand-prefix {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  color: var(--fg);
  font-feature-settings: "ss01";
}
.brand-name {
  font-family: "Caveat", "Patrick Hand", "Bradley Hand", cursive;
  font-weight: 700;
  font-size: 1.85rem;        /* Caveat a une x-height basse, on agrandit pour matcher MMI */
  letter-spacing: 0.005em;
  color: #db2777;            /* rose magenta (= couleur focus participant·e sur la carte) */
  position: relative;
  top: 0.12em;               /* aligne le baseline visuel de Caveat avec celui de Fraunces */
  line-height: 1;
}
.brand-mark { gap: 0.12em; }  /* léger espace entre MMI et relay */
@media (max-width: 480px) {
  .brand-prefix { font-size: 1.4rem; }
  .brand-name   { font-size: 1.5rem; top: 0.1em; }
  .brand-logo   { height: 32px; }
}
.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a { color: var(--fg-soft); font-weight: 500; font-size: 0.9rem; }
.topbar nav a:hover { color: var(--fg); }

.container { max-width: 1100px; margin: 1.75rem auto; padding: 0 1.5rem; }

.footer {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-sm);
}
details.card > summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  padding: 0.1rem 0;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "›";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: 0.85rem; }
.card.description { color: var(--fg-soft); }
.card.description p:first-child { margin-top: 0; }
.card.description p:last-child  { margin-bottom: 0; }
.card.description h2, .card.description h3, .card.description h4 { margin: 1rem 0 0.5rem; border: none; }
.card.description ul, .card.description ol { padding-left: 1.5rem; }
.card.description blockquote { margin: 0.5rem 0; padding-left: 0.85rem; border-left: 3px solid var(--border-strong); color: var(--muted); }

/* Quill WYSIWYG */
.wysiwyg-editor {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-height: 160px;
  font: inherit;
  margin-top: 0;
}
.ql-toolbar.ql-snow {
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: #f8fafc;
}
.ql-container.ql-snow { border: none; font: inherit; font-size: 15px; }
.ql-editor { min-height: 130px; }
.ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }

.flash {
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
  border: 1px solid;
  font-size: 0.9rem;
  font-weight: 500;
}
.flash-ok  { background: var(--yes-bg);   border-color: #86efac; color: #14532d; }
.flash-err { background: var(--no-bg);    border-color: #fca5a5; color: #7f1d1d; }

/* Ligne de vote verrouillée (l'utilisateur·rice est d'astreinte sur ce créneau) */
.vote-grid.editable tr.locked-row { background: #fef3c7; }
.vote-grid.editable tr.locked-row .slot-cell { font-weight: 500; }
.vote-grid.editable tr.locked-row input[type=radio] { cursor: not-allowed; opacity: 0.4; }
.locked-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #fbbf24;
  color: #78350f;
}

/* Page de connexion unifiée */
.login-hint {
  background: var(--maybe-bg);
  border-left: 3px solid #d97706;
  color: #78350f;
}
.login-admin { background: #f8fafc; }
.login-admin summary { color: var(--fg-soft); font-size: 0.9rem; }

/* Forms */
form label {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-soft);
}
form label > input[type=text],
form label > input[type=email],
form label > input[type=password],
form label > input[type=date],
form label > input[type=tel],
form label > textarea,
form label > select {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--fg);
  background: #fff;
  margin-top: 0.3rem;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
form label > input:focus,
form label > textarea:focus,
form label > select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

button {
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease, transform 0.05s ease;
}
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button.danger { background: var(--danger); }
button.danger:hover { background: var(--danger-hover); }
button.link, .link {
  background: transparent;
  color: var(--accent);
  padding: 0;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
}
button.link:hover, .link:hover { color: var(--accent-hover); }
button.small { padding: 0.2rem 0.45rem; font-size: 0.8rem; }

.inline { display: inline; }
.row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.5rem;
}
.row input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
.row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

a.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.12s ease;
}
a.btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }

.poll-list { list-style: none; padding: 0; }
.poll-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.poll-list li:last-child { border-bottom: none; }
.owner-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  background: #ede9fe;
  color: #5b21b6;
  vertical-align: middle;
}
.owner-badge.owner-admin { background: #fef3c7; color: #78350f; }

.dates-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.dates-table th, .dates-table td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.dates-table th { font-weight: 600; color: var(--fg-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.choices { list-style: none; padding: 0; margin: 0 0 0.5rem 0; }
.choices li { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0; }

/* Vote grid
 * Layout: 3 colonnes "métadonnées" fixées (Date à gauche, Créneau à
 * gauche, Récap à droite). Le bloc des participants scrolle à
 * l'horizontale ; l'entête reste collée en haut au scroll vertical.
 * Hauteur bornée à --grid-max-h pour permettre le scroll vertical.
 */
:root {
  --col-date-w: 110px;
  --col-slot-w: 78px;
  --col-summary-w: 92px;
  --grid-max-h: 70vh;
}

.grid-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: var(--grid-max-h);
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.vote-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.vote-grid th, .vote-grid td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: center;
}
.vote-grid tr > :last-child { border-right: none; }

/* Entête : sticky top */
.vote-grid thead th {
  background: #f1f5f9;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Colonnes Date / Créneau : sticky à gauche */
.vote-grid .date-cell,
.vote-grid thead th.date-col {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: var(--col-date-w);
  width: var(--col-date-w);
  text-align: left;
  white-space: nowrap;
  background: #f8fafc;
  font-weight: 600;
  font-size: 0.85rem;
}
.vote-grid .slot-cell,
.vote-grid thead th.slot-col {
  position: sticky;
  left: var(--col-date-w);
  z-index: 2;
  min-width: var(--col-slot-w);
  width: var(--col-slot-w);
  text-align: left;
  background: #f8fafc;
  color: var(--fg-soft);
  font-weight: 500;
  font-size: 0.85rem;
  border-right: 2px solid var(--border-strong);
}
/* Récap : sticky à droite */
.vote-grid .summary-cell,
.vote-grid thead th.summary-col {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: var(--col-summary-w);
  width: var(--col-summary-w);
  background: #f8fafc;
  font-weight: 500;
  font-size: 0.78rem;
  white-space: nowrap;
  border-left: 2px solid var(--border-strong);
}
.vote-grid .summary-cell span { margin: 0 0.2rem; }

/* Coin haut-gauche / haut-droit : sticky vertical ET horizontal */
.vote-grid thead th.date-col,
.vote-grid thead th.slot-col,
.vote-grid thead th.summary-col { z-index: 4; }

/* Prénoms : colonne étroite, tooltip natif via title.
 * Sous le nom : compteurs Oui/Peut-être (votes) et P/S (astreintes). */
.vote-grid .participant {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  font-size: 0.85rem;
  min-width: 56px;
  width: 56px;
  max-width: 56px;
  cursor: help;
  padding: 0.3rem 0.2rem;
  vertical-align: top;
}
.vote-grid .participant .p-name { margin-bottom: 0.15rem; }
.vote-grid .participant .p-stats {
  font-size: 0.68rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.vote-grid .participant .p-stats span { margin: 0 0.12rem; display: inline-block; }
.vote-grid .participant .p-votes .v-yes   { color: var(--yes); }
.vote-grid .participant .p-votes .v-maybe { color: var(--maybe); }
.vote-grid .participant .p-assigns .m-p { color: #1e40af; font-weight: 700; }
.vote-grid .participant .p-assigns .m-s { color: #4338ca; font-weight: 700; }

/* Cellules de vote */
.vote-grid .v-yes   { background: var(--yes-bg);   color: var(--yes);   font-weight: 700; min-width: 36px; }
.vote-grid .v-no    { background: var(--no-bg);    color: var(--no);    font-weight: 700; }
.vote-grid .v-maybe { background: var(--maybe-bg); color: var(--maybe); font-weight: 700; }
.vote-grid .v-none  { color: #cbd5e1; }

/* Statut par créneau (ligne) : tinte la colonne Créneau seulement.
 * La date n'est PAS colorée par le statut de la ligne — son statut
 * est agrégé au jour (voir .date-cell.status-*). */
.vote-grid tr.row-ok   .slot-cell { background: #ecfdf5; }
.vote-grid tr.row-warn .slot-cell { background: #fffbeb; }
.vote-grid tr.row-bad  .slot-cell { background: #fef2f2; }

/* Statut Récap (par créneau) */
.vote-grid .summary-cell.status-ok {
  background: #d1fae5; color: #065f46; font-weight: 600;
  border-left: 3px solid var(--yes);
}
.vote-grid .summary-cell.status-warn {
  background: #fef3c7; color: #78350f; font-weight: 600;
  border-left: 3px solid var(--maybe);
}
.vote-grid .summary-cell.status-bad {
  background: #fee2e2; color: #7f1d1d; font-weight: 600;
  border-left: 3px solid var(--no);
}

/* Statut Date (agrégé : la journée n'est verte que si TOUS ses
 * créneaux sont verts ; rouge si au moins un est rouge ; sinon jaune). */
.vote-grid .date-cell.status-ok   { background: #d1fae5; color: #065f46; }
.vote-grid .date-cell.status-warn { background: #fef3c7; color: #78350f; }
.vote-grid .date-cell.status-bad  { background: #fee2e2; color: #7f1d1d; }
.vote-grid .date-cell .small { color: inherit; opacity: 0.7; }

/* Séparateur entre journées : trait épais en haut de la 1re ligne d'un jour. */
.vote-grid tr.day-first > * { border-top: 2px solid var(--border-strong); }
.vote-grid tbody tr:first-child > * { border-top: none; }

/* Mise en avant astreintes : ring + badge P/S sur la cellule de vote
 * sans écraser sa couleur de fond (yes/no/maybe).
 * - Primary : ring bleu plein
 * - Backup  : ring indigo en pointillés (rappel "secondaire")
 */
.vote-grid .vote-cell { position: relative; }
.vote-grid .vote-cell.is-primary {
  box-shadow: inset 0 0 0 2px #1e40af;
}
.vote-grid .vote-cell.is-backup {
  box-shadow: inset 0 0 0 2px #4338ca;
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0 4px,
      rgba(67, 56, 202, 0.06) 4px 6px);
}

.role-marker {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 0;
  text-transform: none;
}
.role-marker.rm-primary { background: #1e40af; color: #fff; }
.role-marker.rm-backup  { background: #4338ca; color: #fff; }

/* Bandeau "X dates passées masquées" + lien de toggle */
.past-toggle {
  margin: 0.75rem 0 0.5rem;
  padding: 0.45rem 0.8rem;
  background: #f8fafc;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--fg-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.past-toggle a { font-weight: 500; white-space: nowrap; }

/* Légende au-dessus de la grille : les markers en inline avec leur couleur */
.grid-legend {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.grid-legend .role-marker {
  position: static;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* ---------- Astreintes ---------- */
/* On reprend .vote-grid pour bénéficier du sticky Date/Créneau, mais on
 * désactive le sticky de la cellule Récap puisque l'ordre des colonnes
 * change (Récap n'est plus en bout de ligne). */
.assignments-grid .summary-cell {
  position: static;
  right: auto;
  width: auto;
  min-width: 90px;
  background: #f8fafc;
  border-left: 1px solid var(--border);
}
.assignments-grid td:nth-child(n+4) { text-align: left; }
.assignments-grid select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  min-width: 200px;
  max-width: 280px;
}
.assignments-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.assignments-grid select option:disabled {
  color: #94a3b8;
  font-style: italic;
}

/* ---------- Liste d'astreintes (participant & confirmation) ---------- */
.assign-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.assign-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border);
}
.assign-list li:last-child { border-bottom: none; }
.role-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.role-badge.role-primary { background: #dbeafe; color: #1e40af; }
.role-badge.role-backup  { background: #e0e7ff; color: #4338ca; }

/* ---------- Confirmation participant ---------- */
.card.status-confirmed { border-left: 4px solid var(--yes);   background: #f0fdf4; }
.card.status-contested { border-left: 4px solid var(--maybe); background: #fffbeb; }
.confirm-actions { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.contest-form { margin-top: 1rem; }
.contest-form > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.contest-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
.contest-reply {
  margin: 0.5rem 0;
  padding: 0.5rem 0.85rem;
  background: #f8fafc;
  border-left: 3px solid var(--border-strong);
  white-space: pre-wrap;
  font-size: 0.9rem;
}

/* ---------- Admin : notifications ---------- */
.target-radio { border: none; padding: 0; margin: 0 0 0.85rem; }
.target-radio label { display: block; margin: 0.35rem 0; font-weight: 400; color: var(--fg); }
.target-radio select { font: inherit; padding: 0.3rem 0.45rem; margin-left: 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.notif-status .small { font-size: 0.78rem; }
.notif-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.notif-badge.status-sent              { background: #e0f2fe; color: #075985; }
.notif-badge.status-confirmed-row     { background: var(--yes-bg); color: var(--yes); }
.notif-badge.status-contested-row     { background: var(--maybe-bg); color: var(--maybe); }
.notif-badge.notif-stale              { background: #fef3c7; color: #92400e; border: 1px dashed #d97706; }
.notif-badge.status-never             { background: #f3f4f6; color: #6b7280; }
.override-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.override-actions button { font-size: 0.78rem; padding: 0.25rem 0.55rem; }
.override-actions button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Demandes de remplacement (swap) ---------- */
.swap-link {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.swap-pending {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
}
.check-group.swap-targets label { display: flex; align-items: center; gap: 0.45rem; }
.check-group.swap-targets .v-yes,
.check-group.swap-targets .v-maybe { padding: 0.05rem 0.4rem; border-radius: 999px; }
.notif-status tr.status-confirmed-row { background: #f0fdf4; }
.notif-status tr.status-contested-row { background: #fffbeb; }
.notif-status tr.status-never-row     { background: #f9fafb; }
.notif-status tr.notif-stale-row      { background: #fffbeb; }

/* ---------- Nav admin (onglets par sondage) ---------- */
.admin-poll-header {
  margin: 0.5rem 0 0.85rem;
}
.admin-poll-header h1 { font-size: 1.5rem; letter-spacing: -0.02em; }
.admin-poll-header a { color: var(--fg-soft); }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
  padding-top: 0.25rem;
}
.admin-tabs a {
  padding: 0.55rem 0.95rem;
  text-decoration: none;
  color: var(--fg-soft);
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.admin-tabs a:hover {
  color: var(--accent);
  text-decoration: none;
}
.admin-tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  .admin-tabs { font-size: 0.85rem; gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .admin-tabs a { padding: 0.5rem 0.6rem; }
}

.admin-summary code { font-size: 0.85em; word-break: break-all; }
.danger-zone { border-color: #fca5a5; background: #fef2f2; }
.danger-zone h2 { color: var(--no); }

/* Résultat de géocodage sous un champ adresse */
.geo-found {
  margin: -0.4rem 0 0.85rem;
  padding: 0.55rem 0.8rem;
  background: var(--yes-bg);
  border: 1px solid #86efac;
  border-left: 4px solid var(--yes);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--fg-soft);
}
.geo-found strong { color: var(--yes); font-weight: 600; }
.geo-display { color: var(--fg); }
.geo-failed {
  margin: -0.4rem 0 0.85rem;
  padding: 0.5rem 0.8rem;
  background: var(--maybe-bg);
  border: 1px solid #fde68a;
  border-left: 4px solid var(--maybe);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--fg-soft);
}
.geo-failed strong { color: var(--maybe); font-weight: 600; }

/* Légende des horaires de créneaux (vue publique + /me) */
.slot-legend summary { cursor: pointer; }
.slot-legend-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}
.slot-legend-list li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.slot-legend-list li:last-child { border-bottom: none; }
.slot-legend-list code {
  background: var(--accent-soft);
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  border-radius: 4px;
}
.slot-legend-note {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--maybe-bg);
  border-left: 3px solid var(--maybe);
  border-radius: var(--radius-sm);
  color: var(--fg-soft);
}
.slot-legend-note strong { color: var(--fg); }

/* Carte Leaflet */
#map {
  height: 70vh;
  min-height: 400px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  z-index: 0;
}
.mm-pin .mm-pin-body {
  width: 22px;
  height: 30px;
  position: relative;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: rotate(-45deg);
  margin-top: -4px;
  margin-left: -2px;
}
.mm-pin .mm-pin-body::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: inherit;
  transform: translate(-50%, -2px) rotate(45deg);
}
.mm-pin .mm-pin-inner {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.leaflet-popup-content strong { display: block; margin-bottom: 0.25rem; }
.leaflet-popup-content small { display: block; font-size: 0.8rem; }
.leaflet-popup-content .muted { color: var(--muted); }

/* Pin focus (maman) : plus large, icône image ou emoji centré */
.mm-pin-focus .mm-pin-body-focus {
  width: 38px;
  height: 48px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  transform: rotate(-45deg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-pin-focus .mm-pin-body-focus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0; height: 0;
  border: 8px solid transparent;
  border-top-color: inherit;
  transform: translate(-50%, -2px) rotate(45deg);
}
.mm-pin-focus .mm-pin-emoji {
  transform: rotate(45deg);
  font-size: 18px;
  line-height: 1;
}
.mm-pin-focus .mm-pin-img {
  transform: rotate(45deg);
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* Labels permanents (prénom sous chaque pin) — halo blanc pour la lisibilité */
.mm-label {
  background: rgba(255,255,255,0.92);
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}
.mm-label::before { display: none; } /* enlève la flèche par défaut Leaflet */
.mm-label-focus {
  background: #fce7f3;
  color: #831843;
  border: 1px solid #f9a8d4;
  font-size: 12px;
}

/* Zoom-responsive : labels & pins grossissent quand on zoom */
.mm-zoom-far .mm-label   { font-size: 10px; padding: 0 4px; opacity: 0.85; }
.mm-zoom-mid .mm-label   { font-size: 11px; }
.mm-zoom-near .mm-label  { font-size: 13px; padding: 2px 7px; }
.mm-zoom-close .mm-label { font-size: 15px; padding: 3px 8px; }
.mm-zoom-far .mm-label-focus   { font-size: 11px; }
.mm-zoom-mid .mm-label-focus   { font-size: 13px; }
.mm-zoom-near .mm-label-focus  { font-size: 15px; padding: 3px 8px; }
.mm-zoom-close .mm-label-focus { font-size: 17px; padding: 4px 10px; }

/* Highlight / dim au clic sur un pin ou une ligne du tableau */
.mm-pin.mm-dim   { opacity: 0.3; transition: opacity 0.15s ease; }
.mm-pin.mm-active .mm-pin-body { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 4px 10px rgba(0,0,0,0.4); }
.mm-pin.mm-active .mm-pin-body-focus { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 4px 10px rgba(0,0,0,0.4); }
.leaflet-marker-icon.mm-dim + .leaflet-tooltip,
.mm-pin.mm-dim ~ .leaflet-tooltip { opacity: 0.35; }

/* Filtre par participant·e : cache les pins/labels/polylines exclus */
.leaflet-marker-icon.mm-hidden,
.leaflet-marker-icon.mm-hidden + .leaflet-tooltip,
.leaflet-tooltip.mm-hidden,
.leaflet-interactive.mm-hidden { display: none !important; }

/* Trajets (polylines + récap) */
.route-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 0.75rem;
  flex-wrap: wrap;
}
.trip-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-strong);
  vertical-align: middle;
}
.trip-recap {
  background: var(--accent-soft);
  border-color: #bfdbfe;
}
.trip-legs {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.trip-legs li {
  padding: 0.35rem 0;
  border-top: 1px dashed var(--border);
}
.trip-legs li:first-child { border-top: none; }

/* Tableau récap des trajets sur la carte admin */
.trip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.trip-table thead th {
  background: #f1f5f9;
  border-bottom: 1px solid var(--border-strong);
  padding: 0.55rem 0.65rem;
  text-align: left;
  font-weight: 600;
  color: var(--fg-soft);
  font-size: 0.85rem;
}
.trip-table tbody td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.trip-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.trip-table .col-swatch   { width: 28px; padding-right: 0; text-align: center; }
.trip-table .col-name     { width: auto; }
.trip-table .col-total    { width: 90px; }
.trip-table .col-duration { width: 80px; }
.trip-table .col-leg      { width: 80px; color: var(--muted); }
.trip-table tbody tr { cursor: pointer; transition: background 0.1s ease; }
.trip-table tbody tr:hover { background: var(--accent-soft); }
.trip-table tbody tr.trip-highlight { background: #e0e7ff; }
.trip-table tbody tr.trip-row-focus { background: #fce7f3; }
.trip-table tbody tr.trip-row-focus.trip-highlight { background: #fbcfe8; }
.trip-focus-badge { margin-left: 0.25rem; font-size: 0.85rem; }

@media (max-width: 700px) {
  .trip-table { font-size: 0.8rem; min-width: 560px; }
  .trip-table .col-total, .trip-table .col-duration, .trip-table .col-leg { width: auto; }
}

/* Bandeau mode brouillon des astreintes (page admin assignments) */
.draft-banner {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 4px solid #d97706;
  color: #78350f;
}
.draft-banner a { color: #78350f; text-decoration: underline; }

/* ---------- Auto-fill : badges de tiers ---------- */
.auto-fill-wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .auto-fill-wrap { grid-template-columns: 2fr 1fr; align-items: start; }
}
.tier-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin: 0 0.1rem;
  white-space: nowrap;
}
.tier-0 { background: #d1fae5; color: #065f46; }
.tier-1 { background: #ecfccb; color: #4d7c0f; }
.tier-2 { background: #fef3c7; color: #78350f; }
.tier-3 { background: #fee2e2; color: #7f1d1d; }

a.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
a.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-hover); text-decoration: none; }

/* ---------- Vue participants : tableau stats ---------- */
.participants-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.9rem;
}
.participants-table th,
.participants-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.participants-table thead th {
  background: #f1f5f9;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 3;
}
.participants-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #f8fafc;
  font-weight: 500;
  border-top: 2px solid var(--border-strong);
}
.participants-table td.num,
.participants-table th.num,
.participants-table td:nth-child(n+3):not(.usage-cell),
.participants-table th:nth-child(n+3):not(.usage-cell) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.participants-table tbody tr:hover { background: #f8fafc; }
.participants-table .v-yes-cell   { color: var(--yes); font-weight: 600; }
.participants-table .v-maybe-cell { color: var(--maybe); font-weight: 600; }
.participants-table .v-no-cell    { color: var(--no); }
.usage-cell {
  min-width: 130px;
  text-align: left !important;
}
.usage-bar {
  display: inline-block;
  width: 60px;
  height: 7px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.usage-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.usage-fill.tier-0 { background: #16a34a; }
.usage-fill.tier-1 { background: #84cc16; }
.usage-fill.tier-2 { background: #d97706; }
.usage-fill.tier-3 { background: #dc2626; }
.usage-pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.usage-pct.tier-0 { color: #15803d; }
.usage-pct.tier-1 { color: #4d7c0f; }
.usage-pct.tier-2 { color: #b45309; }
.usage-pct.tier-3 { color: #b91c1c; }

/* Cellule actions : pictos compacts en ligne */
.participants-table .actions-cell {
  white-space: nowrap;
  display: flex;
  gap: 4px;
  align-items: center;
}
.participants-table .actions-cell .inline { display: inline-flex; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--fg-soft);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 16px; height: 16px; display: block; }

/* Nom avec tooltip email : indique visuellement la possibilité au survol */
.participants-table tbody td[title]:first-child { cursor: help; }

/* Email & téléphone visibles uniquement sur mobile (où la table
 * devient cartes). Sur desktop, ils apparaissent au survol du nom
 * via attribut title. */
.participants-table th.email-col,
.participants-table th.phone-col,
.participants-table td.email-cell,
.participants-table td.phone-cell { display: none; }

/* Pastilles moyens de contact (à droite du nom, ou dans le calendrier) */
.contact-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.25rem;
  vertical-align: middle;
  white-space: nowrap;
}
.contact-pill.cm-telegram { background: #e0f2fe; color: #075985; }
.contact-pill.cm-signal   { background: #ede9fe; color: #5b21b6; }
.contact-pill.cm-whatsapp { background: #dcfce7; color: #166534; }
.contact-pill.cm-sms      { background: #fef3c7; color: #78350f; }

/* Groupe de cases à cocher inline (multi-sélection contact_method) */
.check-group-wrap {
  border: none;
  padding: 0;
  margin: 0 0 0.85rem;
}
.check-group-wrap legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-soft);
  padding: 0;
  margin-bottom: 0.3rem;
}
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #fff;
  font-weight: 400;
  margin: 0;
  font-size: 0.9rem;
  color: var(--fg);
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.check-inline input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
.check-inline:hover { background: var(--accent-soft); }
.check-inline:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.check-inline.cm-telegram:has(input:checked) { background: #e0f2fe; border-color: #0284c7; color: #075985; }
.check-inline.cm-signal:has(input:checked)   { background: #ede9fe; border-color: #7c3aed; color: #5b21b6; }
.check-inline.cm-whatsapp:has(input:checked) { background: #dcfce7; border-color: #16a34a; color: #166534; }
.check-inline.cm-sms:has(input:checked)      { background: #fef3c7; border-color: #d97706; color: #78350f; }

/* Personnes orphelines : tout gris atténué */
.participants-table tr.orphan { color: var(--muted); background: #fafbfc; }
.participants-table tr.orphan strong { color: var(--fg-soft); font-weight: 500; }

/* Personnes masquées en vue publique : indication discrète + pastille */
.participants-table tr.hidden-public td { opacity: 0.65; }
.participants-table tr.hidden-public td.actions-cell { opacity: 1; }
.hidden-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  background: #e5e7eb;
  color: #6b7280;
  vertical-align: middle;
}
.icon-btn.is-hidden {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}
.icon-btn.is-hidden:hover {
  background: #fde68a;
  border-color: #f59e0b;
  color: #78350f;
}

/* Journal d'activité */
.activity-log .actor-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.activity-log .actor-admin       { background: #fef3c7; color: #78350f; }
.activity-log .actor-manager     { background: #ede9fe; color: #5b21b6; }
.activity-log .actor-participant { background: #dcfce7; color: #166534; }
.activity-log .actor-system      { background: #e5e7eb; color: #6b7280; }

/* Vue calendrier mensuelle (admin) */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.month-cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 0.85rem;
  background: #fff;
}
.month-cal thead th {
  background: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--border);
}
.month-cal tbody td {
  vertical-align: top;
  height: 110px;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
}
.month-cal td.cal-other { background: #fafbfc; color: var(--muted); }
.month-cal td.cal-today { background: #fef9c3; }
.month-cal td.cal-in-poll { background: #f0f9ff; }
.month-cal td.cal-other.cal-in-poll { background: #f8fafc; }
.cal-day-head { display: flex; gap: 0.35rem; align-items: baseline; margin-bottom: 0.25rem; }
.cal-day-num { font-weight: 600; }
.cal-slots { list-style: none; padding: 0; margin: 0; }
.cal-slots li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  padding: 0.1rem 0;
  font-size: 0.72rem;
}
.cal-slot-label { color: var(--muted); font-weight: 500; min-width: 38px; }
.cal-name { color: var(--fg); }
.cal-slots .role-marker { position: static; font-size: 0.6rem; }
.cal-slots .role-marker.cal-empty { opacity: 0.35; }
.cal-empty-text { color: var(--muted); font-style: italic; }
/* Couple P+nom (ou S+nom) gardé groupé : white-space:nowrap empêche
 * le wrap entre le marqueur et le nom de la personne. */
.cal-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

/* Drag'n'drop sur le calendrier (admin uniquement) */
.cal-slots.dnd-mode .dnd-draggable {
  cursor: grab;
  border-radius: 3px;
  padding: 0 2px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.cal-slots.dnd-mode .dnd-draggable:hover { background: rgba(37, 99, 235, 0.08); }
.cal-slots.dnd-mode .dnd-draggable:active { cursor: grabbing; }
.cal-slots.dnd-mode .dnd-dragging { opacity: 0.4; transform: scale(0.95); }
.cal-slots.dnd-mode .dnd-over {
  background: rgba(37, 99, 235, 0.18);
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}
.cal-slots.dnd-mode .cal-empty-pair {
  cursor: default;
  opacity: 0.65;
}
.cal-slots.dnd-mode .cal-empty-pair:hover { opacity: 1; }

/* Modal du drag'n'drop (HTML <dialog>) */
.move-modal {
  max-width: 480px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}
.move-modal::backdrop { background: rgba(15, 23, 42, 0.35); }
.move-modal #move-summary {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--fg);
}

/* Filtre participant sur le calendrier admin */
.cal-filter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
}
.cal-filter select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}

@media (max-width: 700px) {
  .month-cal { font-size: 0.7rem; min-width: 720px; }
  .month-cal tbody td { height: 90px; padding: 0.15rem 0.2rem; }
  .cal-slots li { font-size: 0.66rem; }
}

/* Badge "Sondage clos" à côté du titre */
.closed-badge {
  display: inline-block;
  font-size: 0.6em;
  font-weight: 600;
  background: #fee2e2;
  color: #7f1d1d;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* Tableau Coordonnées : email + tél visibles ici (pas masqués sur desktop).
 * /!\ Le display: table-cell est borné au desktop, sinon il piétine la
 * règle responsive display: block (specificité identique) sur mobile
 * et fait s'effondrer les cartes participants. */
.contacts-table th, .contacts-table td { padding: 0.55rem 0.7rem; }
@media (min-width: 701px) {
  .contacts-table th.email-col,
  .contacts-table th.phone-col,
  .contacts-table td.email-cell,
  .contacts-table td.phone-cell { display: table-cell; }
}
.contacts-table .check-col {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  width: 80px;
  min-width: 80px;
}
.contacts-table .check-col.cm-telegram { color: #075985; background: #f0f9ff; }
.contacts-table .check-col.cm-signal   { color: #5b21b6; background: #f5f3ff; }
.contacts-table .check-col.cm-whatsapp { color: #166534; background: #f0fdf4; }
.contacts-table .check-col.cm-sms      { color: #78350f; background: #fffbeb; }
.contacts-table .check-col .muted { font-weight: 400; font-size: 0.9rem; }

/* Bouton toggle dans la cellule (clic direct sur ✓ / —) */
.toggle-cm {
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0.25rem 0.4rem;
  color: #94a3b8;
  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.06s ease;
}
.toggle-cm:hover { border-color: var(--border-strong); background: rgba(0,0,0,0.03); }
.toggle-cm:active { transform: scale(0.96); }
.toggle-cm.is-active { color: inherit; }   /* couleur déjà fixée par .check-col.cm-* */
.toggle-cm:disabled { cursor: wait; opacity: 0.5; }
.toggle-cm.toggle-err {
  background: var(--no-bg);
  border-color: var(--no);
  color: var(--no);
}

/* Tri : indicateurs et hover sur en-tête */
table.sortable thead th.sortable-col {
  cursor: pointer;
  user-select: none;
  position: relative;
}
table.sortable thead th.sortable-col:hover { background: #e2e8f0; }
table.sortable thead th.sorted-asc,
table.sortable thead th.sorted-desc {
  background: #e0f2fe;
  color: var(--fg);
}
table.sortable thead th.sorted-asc::after  { content: ' ↑'; }
table.sortable thead th.sorted-desc::after { content: ' ↓'; }

/* Strip de stats sur la page calendrier */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: baseline;
}
.stats-strip > div { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.stats-strip > div > strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* Séparateur entre jours sur les listes d'astreintes (admin calendar) */
.assign-list li.day-first { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 2px solid var(--border-strong); }
.assign-list li:first-child.day-first { border-top: none; padding-top: 0; margin-top: 0; }

@media (max-width: 700px) {
  /* Tableaux participants : scroll horizontal sur le wrapper.
   * Approche éprouvée, fiable, pas de transformation tables→cartes
   * (qui était fragile et écrasée par d'autres règles). */
  .participants-table {
    font-size: 0.82rem;
    min-width: 720px;            /* force le scroll si l'écran est plus étroit */
  }
  .participants-table th,
  .participants-table td {
    padding: 0.4rem 0.55rem;
    white-space: nowrap;
  }
  /* Email et téléphone sur mobile : visibles UNIQUEMENT dans le
   * tableau Coordonnées (qui leur est dédié). Dans le tableau stats
   * principal, on les laisse masqués pour éviter la redondance —
   * l'info est juste en dessous dans Coordonnées. */
  .contacts-table th.email-col,
  .contacts-table th.phone-col,
  .contacts-table td.email-cell,
  .contacts-table td.phone-cell { display: table-cell; }
  /* La cellule actions peut wrap, sinon ça pousse le scroll inutilement. */
  .participants-table .actions-cell { white-space: nowrap; gap: 2px; }
  .participants-table .icon-btn { width: 26px; height: 26px; }
  /* Coordonnées : colonnes ✓/— compactes. */
  .contacts-table .check-col { width: 52px; min-width: 52px; }
}

/* ====================================================================
 * Mobile : vue alternative "cartes par créneau" pour la grille récap
 * et stack en blocs pour la grille d'astreintes admin.
 * ==================================================================== */
.mobile-grid { display: none; }

@media (max-width: 700px) {
  /* Respiration générale */
  .container { padding: 0 0.75rem; margin: 0.85rem auto; }
  .topbar    { padding: 0.55rem 0.85rem; }
  .topbar nav { gap: 0.85rem; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.05rem; margin-top: 1.25rem; }
  h3 { font-size: 0.95rem; }
  .card { padding: 0.85rem 0.95rem; }

  /* Wrappers de tables sur mobile : par défaut on autorise le scroll
   * horizontal (utilisé par la table participants). max-height: none
   * pour ne pas créer de mini-fenêtre verticale. */
  .grid-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* Bascule grille récap → cartes.
   * IMPORTANT : on masque uniquement la .vote-grid qui est immédiatement
   * suivie d'une .mobile-grid sibling (= la récap publique/admin).
   * La table d'astreintes admin, les grilles ÉDITABLES de saisie de
   * votes (poll/me.php et admin/participant.php), et toutes les autres
   * .vote-grid restent visibles. .mobile-grid prend le relai pour la
   * récap. */
  .grid-wrap:has(+ .mobile-grid) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .grid-wrap:has(+ .mobile-grid) .vote-grid { display: none; }
  .mobile-grid {
    display: block;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
  }
  .mobile-grid .m-day-header {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    margin: 1rem 0 0.3rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: #f1f5f9;
    color: var(--fg);
  }
  .mobile-grid .m-day-header.status-ok   { background: #d1fae5; color: #065f46; }
  .mobile-grid .m-day-header.status-warn { background: #fef3c7; color: #78350f; }
  .mobile-grid .m-day-header.status-bad  { background: #fee2e2; color: #7f1d1d; }
  .mobile-grid .m-day-header .small { color: inherit; opacity: 0.75; font-weight: 400; }

  .mobile-grid .m-slot {
    background: #fff;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    margin: 0.35rem 0;
  }
  .mobile-grid .m-slot.row-ok   { border-left-color: var(--yes); }
  .mobile-grid .m-slot.row-warn { border-left-color: var(--maybe); }
  .mobile-grid .m-slot.row-bad  { border-left-color: var(--no); }
  .mobile-grid .m-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .mobile-grid .m-label { font-weight: 600; }
  .mobile-grid .m-recap {
    display: inline-flex;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
  }
  .mobile-grid .m-recap > span {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
  }
  .mobile-grid .m-assigns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
    font-size: 0.88rem;
  }
  .mobile-grid .m-assign { display: inline-flex; align-items: center; gap: 0.3rem; }
  .mobile-grid .m-assign-primary { font-weight: 600; color: #1e40af; }
  .mobile-grid .m-assign-backup  { color: #4338ca; }
  .mobile-grid .role-marker { position: static; font-size: 0.66rem; }
  .mobile-grid details summary {
    cursor: pointer;
    margin-top: 0.45rem;
    color: var(--accent);
    font-size: 0.85rem;
    list-style: none;
  }
  .mobile-grid details summary::-webkit-details-marker { display: none; }
  .mobile-grid details summary::before { content: "› "; transition: transform 0.15s; display: inline-block; }
  .mobile-grid details[open] summary::before { transform: rotate(90deg); }
  .mobile-grid .m-grp {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .mobile-grid .m-grp.v-yes   { color: var(--yes); }
  .mobile-grid .m-grp.v-maybe { color: var(--maybe); }
  .mobile-grid .m-grp.v-no    { color: var(--muted); }

  /* Grille d'édition des votes : tighter (6 colonnes seulement) */
  .vote-grid.editable { font-size: 0.78rem; }
  .vote-grid.editable th, .vote-grid.editable td { padding: 0.2rem 0.3rem; }
  .vote-grid.editable .date-cell { width: 80px; min-width: 80px; }
  .vote-grid.editable .slot-cell { left: 80px; width: 65px; min-width: 65px; }

  /* Grille d'astreintes (admin) : stack en cartes via display:block */
  .assignments-grid,
  .assignments-grid thead,
  .assignments-grid tbody,
  .assignments-grid tr,
  .assignments-grid th,
  .assignments-grid td {
    display: block;
    width: auto;
  }
  .assignments-grid thead { display: none; }
  .assignments-grid tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    box-shadow: var(--shadow-sm);
  }
  .assignments-grid tr.day-first {
    margin-top: 0.85rem;
    border-top: 2px solid var(--border-strong);
  }
  .assignments-grid .date-cell {
    position: static;
    background: transparent;
    padding: 0;
    margin: -0.3rem -0.3rem 0.4rem;
    font-size: 0.95rem;
    border: none;
    color: var(--fg-soft);
  }
  .assignments-grid .slot-cell {
    position: static;
    background: transparent;
    padding: 0;
    border: none;
    font-weight: 600;
    color: var(--fg);
    font-size: 1rem;
    margin-bottom: 0.4rem;
  }
  .assignments-grid .summary-cell {
    position: static;
    background: transparent;
    padding: 0;
    margin: 0 0 0.5rem;
    border: none;
    text-align: left;
    font-size: 0.85rem;
  }
  .assignments-grid td:nth-child(n+4)::before {
    content: attr(data-role);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.2rem;
  }
  .assignments-grid td:nth-child(n+4) {
    padding: 0.25rem 0;
    border: none;
  }
  .assignments-grid select {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }
  .assignments-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
  }
  .assignments-bar #assignments-totals { margin-left: 0; flex-basis: 100%; }

  /* WYSIWYG : laisser le toolbar respirer */
  .ql-toolbar.ql-snow { padding: 6px 4px; }
  .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }

  /* Trame de fond plus discrète sur petit écran */
  body::before { opacity: 0.10; }
}
.assignments-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 1rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.assignments-bar #assignments-totals { margin-left: auto; }

.vote-grid.editable td { padding: 0.2rem; }
.vote-grid.editable td label {
  display: block;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
  transition: background-color 0.1s ease;
}
.vote-grid.editable td label:hover { background: rgba(37, 99, 235, 0.06); }
.vote-grid.editable td input[type=radio] { cursor: pointer; accent-color: var(--accent); }