:root {
  --bg: #eef0fb;
  --card: #ffffff;
  --ink: #1b1d22;
  --muted: #666a73;
  --line: #e6e8ec;
  --brand: #ffffff;
  --brand-ink: #1b1d22;
  --accent: #c2410c;
  --chip: #f1f2f5;
  --chip-on: #1f2a44;
  --chip-on-ink: #fff;
  --soiree: #dc2626;
  --pratique: #2563eb;
  --stage: #7c3aed;
  --festival: #ca8a04;
  --autre: #666a73;
  color-scheme: light dark;
  --rainbow: linear-gradient(90deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
  --rainbow-v: linear-gradient(180deg, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg: #14161c;
    --card: #1c1f27;
    --ink: #ece8e1;
    --muted: #a39d93;
    --line: #2c303a;
    --brand: #0e1220;
    --brand-ink: #ece8e1;
    --accent: #fb923c;
    --chip: #262a34;
    --chip-on: #e8c37a;
    --chip-on-ink: #14161c;
    --soiree: #f87171;
    --pratique: #60a5fa;
    --stage: #a78bfa;
    --festival: #facc15;
    --autre: #a39d93;
  }
}
:root[data-theme="sombre"] {
  --bg: #14161c;
  --card: #1c1f27;
  --ink: #ece8e1;
  --muted: #a39d93;
  --line: #2c303a;
  --brand: #0e1220;
  --brand-ink: #ece8e1;
  --accent: #fb923c;
  --chip: #262a34;
  --chip-on: #e8c37a;
  --chip-on-ink: #14161c;
  --soiree: #f87171;
  --pratique: #60a5fa;
  --stage: #a78bfa;
  --festival: #facc15;
  --autre: #a39d93;
}

:root[data-theme="clair"] { color-scheme: light; }
:root[data-theme="sombre"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.top { background: var(--brand); color: var(--brand-ink); padding: 18px 0 14px; }
.top h1 { margin: 0; font-size: 1.5rem; letter-spacing: .01em; }
.tagline { margin: 2px 0 0; opacity: .8; font-size: .95rem; }

.filters {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
/* Filtres : menus déroulants compacts à choix multiples. */
.filterbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.dd { position: relative; }
.dd summary {
  list-style: none; cursor: pointer; user-select: none;
  border-radius: 999px; padding: 7px 14px; font-size: .9rem;
  background: var(--chip); color: var(--ink);
}
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: "▾"; margin-left: 6px; font-size: .75em; opacity: .7; }
.dd[open] summary::after { content: "▴"; }
.dd.is-active summary { background: var(--chip-on); color: var(--chip-on-ink); }
.dd .menu {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0;
  width: max-content; min-width: 15rem; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .15); padding: 6px;
}
.dd .menu label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.dd .menu label:hover { background: var(--chip); }
.dd .menu input { width: 18px; height: 18px; margin: 0; accent-color: var(--chip-on); }
/* Case vide dessinée à la main ; dans un menu sans sélection, tout est affiché : point médian « présent ». */
.dd .menu input:not(:checked):not(:indeterminate) {
  appearance: none; flex: none; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 4px; background: var(--card);
}
.dd:not(.is-active) .menu input:not(:checked):not(:indeterminate),
/* Swing coché : ses sous-types sont couverts, point médian. */
.dd .menu:has(input[value="swing"]:checked) .suboptions input:not(:checked),
.tri[data-state=""][data-inherit="all"] .tribox { background: radial-gradient(circle, var(--muted) 0 2.5px, transparent 3px); }
.dd .dd-clear {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: .85rem; cursor: pointer;
}
.dd .dd-clear[hidden] { display: none; }
.dd .menu input[type="radio"] { border-radius: 999px; }
.dd .dd-clear + label { padding-right: 44px; }
.dd .menu small { flex-basis: 100%; padding-left: 26px; color: var(--muted); font-size: .78rem; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c); }
.dot[data-value="soiree"] { --c: var(--soiree); }
.dot[data-value="pratique"] { --c: var(--pratique); }
.dot[data-value="stage"] { --c: var(--stage); }
.dot[data-value="festival"] { --c: var(--festival); }
.reset { border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; padding: 7px 6px; }
.reset[hidden] { display: none; }
#search, #orga-search {
  width: 100%;
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit;
}

.status { color: var(--muted); margin: 14px 0; }

.day { margin: 18px 0 6px; }
.day h2 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 8px;
}
.event {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--c, var(--autre));
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
}
.event .head-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-right: 34px; line-height: 1.4; }
.event .head-row .type { margin-left: 0; }
.event > .share-btn { position: absolute; top: 6px; right: 8px; }
.event { padding-bottom: 12px; }
.foot-row { margin-top: 0 !important; }
.foot-row .report-btn { position: absolute; bottom: 4px; right: 6px; margin: 0; }
.report-btn { margin-left: auto; padding: 2px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 1rem; }
.report-btn:hover, .report-btn:focus-visible { background: var(--chip); }
.event[data-type="soiree"] { --c: var(--soiree); }
.event[data-type="pratique"] { --c: var(--pratique); }
.event[data-type="stage"] { --c: var(--stage); }
.event[data-type="festival"] { --c: var(--festival); }
.event .when { font-weight: 600; font-variant-numeric: tabular-nums; }
.event .type { color: var(--c); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-left: 0; line-height: inherit; }
.event h3 { font-size: 1.08rem; margin: 2px 0 6px; line-height: 1.3; }
.event h3, .event .meta { overflow-wrap: anywhere; }
/* Titre = lien vers la source. */
.title-link { color: inherit; text-decoration: none; }
.title-link:visited, .title-link:hover, .title-link:active, .title-link:focus { color: inherit; text-decoration: none; }
/* Titre en puce mise en valeur : fond, filet et chevron disent qu'il est cliquable. */
.event h3 .title-link { display: inline-block; padding: 3px 28px 3px 10px; position: relative; border-radius: 8px; background: var(--chip); border: 1px solid var(--line); }
.event h3 .title-link::after { content: "›"; position: absolute; right: 10px; top: 50%; transform: translateY(-52%); font-size: 1.3em; color: var(--accent); }
.event h3 a.title-link:hover { background: var(--line); }
.place-btn { display: inline-flex; max-width: 100%; gap: 1px; }
.place-btn .chip-link:first-child { border-radius: 8px 0 0 8px; }
.place-btn .chip-link:last-child { border-radius: 0 8px 8px 0; }
.place-btn .chip-link.is-plain { padding-left: 10px; color: var(--ink); background: var(--chip); }
.title-link .ext { color: var(--accent); font-size: .8em; margin-left: 4px; }
/* Organisateur et lieu : petits encarts cliquables, faciles à toucher sur téléphone. */
.event .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .88rem; }
.chip-link {
  display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 8px;
  background: var(--chip); color: var(--ink); text-decoration: none; line-height: 1.3;
}
a.chip-link:hover { background: var(--line); }
.chip-link.is-plain { background: none; padding-left: 0; color: var(--muted); }
/* Détails : un vrai bouton, avec le lien source à la fin. */
.event details { margin-top: 10px; font-size: .92rem; }
.event summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-weight: 600; font-size: .9rem; background: var(--bg);
}
.event summary::-webkit-details-marker { display: none; }
.event summary::after { content: "▾"; font-size: .8em; color: var(--muted); }
.event details[open] summary::after { content: "▴"; }
.event .desc { white-space: pre-line; overflow-wrap: anywhere; margin: 10px 0 0; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
.tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: inherit; margin: 0; padding: 0; list-style: none; }
.tags li { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.auto { color: var(--muted); font-size: .78rem; font-style: italic; }
.source {
  display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.source:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }

.foot { color: var(--muted); font-size: .85rem; padding-top: 12px; padding-bottom: 32px; border-top: 1px solid var(--line); margin-top: 24px; }

/* --- Choix de l'affichage et navigation entre périodes --- */
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.views { display: inline-flex; background: var(--chip); border-radius: 10px; padding: 3px; }
.views button {
  border: 0; border-radius: 8px; padding: 5px 12px;
  font: inherit; font-size: .9rem; background: transparent; color: var(--ink); cursor: pointer;
}
.views button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .12); font-weight: 600; }
.period { display: inline-flex; align-items: center; gap: 6px; }
.period[hidden], .views[hidden] { display: none; }
.period button {
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-size: .9rem; padding: 4px 10px; cursor: pointer;
}
.period #today[aria-pressed="true"] { background: var(--chip); box-shadow: inset 0 1px 3px rgb(0 0 0 / .18); font-weight: 600; }
#prev, #next { font-size: 1.1rem; line-height: 1; padding: 4px 10px 6px; }
#period-label { font-weight: 600; min-width: 9.5em; text-align: center; }

/* Vues calendrier : plus de largeur sur ordinateur. */
body.is-calendar .wrap { max-width: 1120px; }

.weekdays, .grid-compact { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.weekdays span { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding-bottom: 2px; }
.grid-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.cell {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  min-width: 0; min-height: 96px; padding: 4px;
  font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.grid-week .cell { min-height: 220px; }
.grid-compact .cell { min-height: 104px; }
.spans button { padding: 5px 10px; }
.cell:hover { border-color: var(--muted); }
.cell.past .pills { opacity: .55; }
.cell .head { font-size: .8rem; color: var(--muted); padding: 0 2px 2px; }
.cell .wd { text-transform: capitalize; }
.cell.is-today .num { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 700; }
.cell.is-selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pill {
  --c: var(--autre);
  font-size: .75rem; line-height: 1.25; padding: 1px 4px;
  border-left: 3px solid var(--c); background: var(--chip); border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid-week .pill { white-space: normal; overflow-wrap: anywhere; padding: 3px 5px; }
.pill[data-type="soiree"] { --c: var(--soiree); }
.pill[data-type="pratique"] { --c: var(--pratique); }
.pill[data-type="stage"] { --c: var(--stage); }
.pill[data-type="festival"] { --c: var(--festival); }
.pill.is-past { opacity: .55; }
.cell.past .pill.is-past { opacity: 1; }
.more { font-size: .75rem; color: var(--muted); padding: 2px 4px 0; }

#day-detail h2 { margin-top: 20px; }
#day-detail:empty { display: none; }

/* Téléphone : 2 à 4 semaines en grille de pastilles, 1 semaine en liste de jours. */
@media (max-width: 640px) {
  .grid-compact { gap: 2px; }
  .grid-compact .cell { min-height: 54px; padding: 3px 2px; border-radius: 6px; }
  .grid-compact .cell .head { text-align: center; padding: 0 0 2px; }
  .grid-compact .pills { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .grid-compact .pill { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--c); font-size: 0; }
  .grid-compact .more { text-align: center; padding: 1px 0 0; font-size: .7rem; }
  .grid-week { grid-template-columns: 1fr; gap: 4px; }
  .grid-week .cell { min-height: 0; flex-direction: row; gap: 8px; align-items: flex-start; }
  .grid-week .cell .head { flex: none; width: 3.6em; padding-top: 3px; }
  .grid-week .pills { flex: 1; }
  #period-label { min-width: 0; }
}


/* Bouton « Passés » : une pastille qui se coche, foncée quand elle est active, comme les menus. */
.chip-toggle {
  border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .9rem;
  background: var(--chip); color: var(--ink); cursor: pointer;
}
.chip-toggle[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.chip-toggle[aria-pressed="true"]::before { content: "✓ "; }
/* Événements passés : un peu effacés. */
.event.is-past { opacity: .72; }

/* Recherche : une loupe à côté des filtres, sur téléphone comme sur ordinateur,
   qui déplie le champ (et affiche le mot cherché, comme les autres filtres). */
.search-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .9rem;
  background: var(--chip); color: var(--ink); cursor: pointer;
}
.search-toggle.is-active { background: var(--chip-on); color: var(--chip-on-ink); }
.search-toggle .count { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchrow { display: none; margin-bottom: 8px; }
.filters.search-open .searchrow { display: block; }
.search-toggle .count:empty { display: none; }

/* Menu Orga : liste longue, on la fait défiler. */
#org-menu { max-height: min(60vh, 26rem); overflow-y: auto; }
@media (min-width: 900px) {
  /* Ordinateur : la liste entière d'un coup (jusqu'à « Autres »), lignes un peu plus serrées. */
  #org-menu { max-height: calc(100vh - 150px); }
  #org-menu label { padding: 6px 10px; }
}
#org-menu label { flex-wrap: nowrap; }

/* Options des bals : boutons à trois états (✓ obligatoire, ✕ exclu, vide indifférent) en retrait sous Bals. */
.suboptions { margin: 0 0 4px 26px; padding-left: 8px; border-left: 2px solid var(--line); }
.tri {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; width: 100%;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: .92rem; color: inherit; text-align: left; cursor: pointer;
}
.tri:hover { background: var(--chip); }
.tribox {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; box-sizing: border-box;
  border: 2px solid var(--muted); border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1;
}
.tri[data-state="yes"] .tribox { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
.tri[data-state="yes"] .tribox::after { content: "✓"; }
.tri[data-state="no"] .tribox { background: var(--accent); border-color: var(--accent); color: #fff; }
.tri[data-state="no"] .tribox::after { content: "✕"; }
.tri[data-state="no"] { color: var(--muted); text-decoration: line-through; }
/* Option « indifférente » : même aspect que Bals (point, ✓ en clair, ou vide). */
.tri[data-state=""][data-inherit="on"] .tribox { border-color: var(--chip-on); color: var(--chip-on); }
.tri[data-state=""][data-inherit="on"] .tribox::after { content: "✓"; }
.trihint { margin: 2px 10px 4px; color: var(--muted); font-size: .75rem; }

/* --- Vue carte --- */
#map { height: min(68vh, 620px); border-radius: 12px; border: 1px solid var(--line); background: var(--chip); z-index: 0; }
#map-missing details { margin-top: 14px; }
#map-missing summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; }
.map-dot {
  --c: var(--autre);
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--c); color: #fff; font: 700 .8rem/1 system-ui, sans-serif;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .35);
  text-shadow: 0 0 3px rgb(0 0 0 / .6); /* nombre lisible sur un disque partagé */
}
.map-dot[data-type="soiree"], .plist li[data-type="soiree"] { --c: var(--soiree); }
.map-dot[data-type="pratique"], .plist li[data-type="pratique"] { --c: var(--pratique); }
.map-dot[data-type="stage"], .plist li[data-type="stage"] { --c: var(--stage); }
.map-dot[data-type="festival"], .plist li[data-type="festival"] { --c: var(--festival); }
.pplace { font-weight: 700; margin: 0 0 6px !important; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plist li { --c: var(--autre); border-left: 3px solid var(--c); padding-left: 7px; }
.pdate { display: block; color: #6b645a; font-size: .78rem; }
.pmore { margin: 6px 0 0 !important; color: #6b645a; }
.pgo { font-weight: 600; color: inherit; }
.leaflet-popup-content { cursor: pointer; }

/* Sources en fin de détails : la principale en premier. */
.sources { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.event:not(.is-open) .desc.is-clipped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.more-btn { display: inline-block; margin: 6px 0 0; padding: .2rem .7rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.more-btn:hover { color: var(--ink); border-color: currentColor; }
.event .extra { display: none; margin-top: 10px; font-size: .92rem; }
.event.is-open .extra { display: block; }
.sources .source { margin-top: 0; }
.src-main { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.sources li:not(:first-child) { padding-left: 0; }

/* --- Lieux : encart d'une fiche, page d'un lieu, liste des lieux --- */
.place { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.icon-link {
  display: inline-grid; place-items: center; min-width: 30px; height: 28px; border-radius: 8px;
  color: var(--accent); font-weight: 700; text-decoration: none;
}
.icon-link:hover, .icon-link:focus-visible { background: var(--chip); }
.map-dot.is-venue { --c: var(--brand); }
.map-dot.is-venue[data-kind="aucun"] { --c: var(--autre); opacity: .55; }
.top .brand { display: block; color: inherit; text-decoration: none; }
.top .brand:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 4px; border-radius: 6px; }
.crumbs { margin: 14px 0 0; font-size: .9rem; }
.crumbs a, .foot a { color: var(--accent); }
.venue h2 { margin: 12px 0 2px; font-size: 1.4rem; }
.vaddr { color: var(--muted); margin: 0; }
.venue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.btn {
  display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.btn:hover { background: var(--chip); }
.venue-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 12px; }
.venue-info dt { font-weight: 700; }
.venue-info dd { margin: 0; }
.muted, .vupdated { color: var(--muted); }
.vupdated { font-size: .85rem; }
.photos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.photos img { display: block; width: 140px; height: 100px; object-fit: cover; border-radius: 8px; }
.venue-next { font-size: 1.15rem; margin: 24px 0 8px; }
.day-title { font-size: .95rem; color: var(--muted); margin: 14px 0 8px; }
.day-title::first-letter { text-transform: uppercase; }
.venue-list { list-style: none; padding: 0; margin: 0; }
.venue-list li { position: relative; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.venue-list a, .venue-list a:visited { font-weight: 700; font-size: 1.05rem; flex-basis: 100%; color: var(--ink); text-decoration: none; }
.venue-list li:hover, .venue-list li:focus-within { background: var(--chip); }
.venue-list li:hover a, .venue-list a:focus-visible { color: var(--accent); }
.venue-list a::after { content: ''; position: absolute; inset: 0; }
.venue-list .vaddr, .vcount { font-size: .88rem; }
.vcount { color: var(--ink); }

/* Menu ⚙ (fin des filtres) : affichage des événements passés, et export vers un agenda :
   abonnement au flux /agenda.ics avec les filtres choisis, ou fichier .ics figé. */
.settings summary { display: inline-flex; align-items: center; padding: 7px 10px; }
.settings summary::after { content: none; }
.settings[open] summary::after { content: none; }
.menu-title { margin: 8px 10px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.menu-check::before {
  content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-right: 2px;
  border: 1.5px solid var(--muted); border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.export .menu .menu-check { align-items: center; }
.export .menu .menu-check small { flex-basis: 100%; padding-left: 28px; }
.menu-check[aria-pressed="true"]::before { content: "✓"; background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }
.export .menu { min-width: 17rem; }
.export .menu a, .export .menu button {
  display: flex; flex-wrap: wrap; gap: 2px 8px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font: inherit; text-decoration: none; cursor: pointer;
}
.export .menu a:hover, .export .menu button:hover { background: var(--chip); }
.export .menu small { padding-left: 0; }
.export-what { margin: 4px 10px 6px; color: var(--muted); font-size: .82rem; }

/* Événement annulé par son organisateur : gardé jusqu'à sa date, barré. */
.event.is-cancelled { opacity: .7; }
.event.is-cancelled h3 { text-decoration: line-through; }
/* Stage complet : grisé, reste visible et cliquable. */
.event.is-full { opacity: .6; filter: grayscale(.6); }
.full-note { color: var(--muted, #666); font-size: .85rem; font-weight: 700; margin: 8px 0 0; letter-spacing: .02em; }
.cancelled-note { color: #c0392b; font-size: .85rem; font-weight: 700; margin: 8px 0 0; letter-spacing: .02em; }
.pill.is-cancelled span { text-decoration: line-through; }
.pill.is-cancelled { opacity: .55; }

/* --- Liste des lieux : filtres et carte --- */
.venue-filters { margin-top: 12px; }
.venue-filters .filterbar { margin-bottom: 0; }
.venue-filters .menu small.n { flex-basis: auto; padding-left: 0; margin-left: auto; }
.venue-filters .menu label.is-empty { opacity: .45; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; padding: 6px 8px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--chip-on); }
.venues-map { height: min(55vh, 460px); margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); z-index: 0; }
.venue-map { height: 220px; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); z-index: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.badges:empty { display: none; }
.badge { font-size: .75rem; background: var(--chip); border-radius: 6px; padding: 1px 7px; color: var(--muted); }
.vcount { display: inline-flex; align-items: center; gap: 4px; }

/* Menu du site (☰) : en haut à droite de chaque page. */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.appmenu { position: relative; flex: none; }
.appmenu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 40px; height: 40px; margin-top: -2px; border-radius: 10px; color: var(--brand-ink);
}
.appmenu summary::-webkit-details-marker { display: none; }
.appmenu summary:hover, .appmenu[open] summary { background: color-mix(in srgb, var(--brand-ink) 12%, transparent); }
.appmenu-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 12rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .2); padding: 6px; display: flex; flex-direction: column;
}
.appmenu-list a { color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.appmenu-list a:hover { background: var(--chip); }
.appmenu-list a[aria-current="page"] { font-weight: 600; }

/* Page « À propos ». */
.about { padding-top: 8px; padding-bottom: 40px; }
.about h2 { font-size: 1.1rem; margin: 24px 0 6px; }
.about a { color: var(--accent); }
.about .soon { color: var(--muted); }

/* Repli des filtres collés en haut, pendant le défilement. */
.fold {
  margin-left: auto; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .9rem;
  background: var(--chip); color: var(--ink); cursor: pointer;
}
.unfold {
  display: none; width: 100%; border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .9rem;
  background: var(--chip); color: var(--ink); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filters.is-folded { padding: 6px 0; }
.filters.is-folded .filterbar, .filters.is-folded .searchrow, .filters.is-folded .viewbar { display: none; }
.filters.is-folded .unfold { display: block; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.legend .dot { margin-right: -6px; }
.sortbar { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .9rem; }
.sortbar select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.vorgs { flex-basis: 100%; font-size: .85rem; color: var(--muted); }
.vorgs::before { content: "Organisé par "; }

.list-more { display: block; margin: 1rem auto; padding: .6rem 1.2rem; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; cursor: pointer; opacity: .8; }
.list-more-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1rem 0; white-space: nowrap; opacity: .9; }
.list-more-group { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; }
.list-more-group button { font: inherit; color: inherit; background: transparent; border: 0; padding: .45rem .9rem; cursor: pointer; }
.list-more-group button + button { border-left: 1px solid currentColor; }
.list-more-group button:hover { background: rgba(127, 127, 127, .18); }

.report { margin: 8px 0 0; font-size: .85rem; }
.report a { color: var(--muted); }
.proposer label { display: block; margin: 14px 0 4px; font-weight: 600; }
.proposer textarea, .proposer input[type=url] { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--line, #8886); border-radius: 8px; background: var(--card, transparent); color: inherit; }
.proposer textarea { min-height: 140px; }
.proposer .hp { position: absolute; left: -9999px; }
.proposer #msg { margin-top: 12px; }
.proposer .pp-champs input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--line, #8886); border-radius: 8px; background: var(--card, transparent); color: inherit; }
.pp-onglets { display: flex; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--line); }
.pp-onglets button { font: inherit; font-weight: 600; cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); }
.pp-onglets button[aria-selected=true] { background: var(--card); color: inherit; }
.pp-panneau { padding-top: 10px; }
.lien-ligne { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.lien-ligne input { flex: 1; min-width: 0; }
.lien-marge { flex: 0 0 2rem; display: flex; justify-content: center; }
.lien-btn { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; font-weight: 700; cursor: pointer; line-height: 1; }
.lien-continuer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0 calc(2rem + 8px); justify-content: flex-end; }
.texte-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.texte-row textarea { flex: 1 1 18rem; }
.texte-row .pp-hint { flex: 0 1 12rem; }
.pp-hint { margin: 6px 0 0; font-size: .9rem; }
.pp-link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pp-etat { margin: 12px 0 0; }
.pp-lu { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pp-lu h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pp-lu label { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.pp-lu [readonly] { background: var(--chip); border-style: dashed; cursor: default; }
.pp-lu.is-edit { border-color: #c98a1a; }
.pp-lu.is-modified { border-color: #c98a1a; box-shadow: 0 0 0 2px #c98a1a33; }
.pp-modifier { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; font-size: .9rem; }
.pp-lu.is-modified #modifier-note { color: #b0710b; font-weight: 600; }
.pp-doublon { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--chip); font-weight: 600; }
.proposer .btn:disabled { opacity: .6; cursor: default; }
.proposer button.btn { font: inherit; font-weight: 600; cursor: pointer; }

.export-dialog { max-width: min(30rem, calc(100vw - 24px)); width: 100%; padding: 16px; border: 1px solid var(--line, #ccc); border-radius: 12px; background: var(--bg, #fff); color: inherit; }
.export-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.export-dialog h2 { margin: 0 28px 8px 0; font-size: 1.1rem; }
.export-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 1.2rem; color: inherit; cursor: pointer; padding: 6px 10px; }
.export-recap { margin: 0 0 8px; padding-left: 1.2rem; }
.export-recap ul { margin: 2px 0 2px; padding-left: 1.2rem; }
.export-hint { color: var(--muted); font-size: .82rem; margin: 0 0 10px; }
.export-links { display: grid; gap: 4px; }
.export-links a, .export-links button { display: block; text-align: left; padding: 10px; border: 1px solid var(--line, #ccc); border-radius: 8px; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.export-links small { display: block; color: var(--muted); }
.past-toggle { font: inherit; padding: 7px 10px; border: 1px solid var(--line, #ccc); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.past-toggle[aria-pressed="true"] { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-ink); }

/* Mobile : marge à droite des cartes pour pouvoir faire défiler la page à côté. */
@media (pointer: coarse) {
  #map, #venues-map { margin-left: 22px; margin-right: 22px; }
}

/* Prix : le plus élevé des tarifs ; * = sous conditions (détail dans la fiche). */
.event .price { margin-left: 0; font-weight: 600; white-space: nowrap; }
.event .price-note { margin: .25rem 0; font-size: .9em; }

.composition { margin: .5rem 0; font-size: .9em; }
.composition ul { margin: .25rem 0 0; padding-left: 1.2em; }

/* Bandeau « peu de résultats » (fermable). */
.few { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: .92rem; }
.few[hidden] { display: none; }
.few button { border: 0; background: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 6px; }
.sortbtn { font: inherit; font-size: .9rem; margin-top: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }

/* Écoles et organisations (orga.html) : mêmes briques que les lieux. */
.orga-search { margin: 8px 0 0; }
.venue-list .vplaces { flex-basis: 100%; font-size: .85rem; color: var(--muted); }
.venue-list .vplaces::before { content: "📍 "; }
.venue-info .badge { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; }
.recap .views { margin: 4px 0 10px; flex-wrap: wrap; }
.recap textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: .88rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical;
}
.recap .btn { cursor: pointer; font: inherit; }
.venue-info a, .orga-info a { color: var(--accent); }

/* Liste : le jour en cours de défilement reste épinglé sous les filtres (« sticky header »), en blanc d'encart. */
#list .day h2 {
  position: sticky; top: var(--filters-h, 0px); z-index: 1;
  margin: 0 0 8px; padding: 6px 0;
  background: var(--bg); color: var(--ink); font-weight: 700;
}
.dd .menu label.is-others { font-style: italic; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.badge.is-minor { font-style: italic; }

/* Encart « traduire cette page » pour les navigateurs non francophones */
.translate-hint { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .5rem 1rem; background: #fff6d6; color: #3a2f00; font-size: .9rem; }
.translate-hint button { border: 0; background: none; font-size: 1.3rem; cursor: pointer; color: inherit; }
.venue-search { font: inherit; font-size: .9rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-width: 0; width: 11em; }

/* --- Fiche d'un événement --- */
.event-day { margin: 14px 0 6px; font-weight: 700; color: var(--muted); }
.share-btn { border: 0; background: none; font: inherit; cursor: pointer; }
.event.is-single h3 { font-size: 1.3rem; }

/* Choix du thème (menu ☰) : un bouton composé « mode | style », comme « 30 | 100 | tout ». Chaque clic fait passer le bouton à sa valeur suivante.
   Le bouton de style porte une miniature du thème (mêmes images que le fond). */
.theme-pick { display: flex; margin: 8px 12px 6px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.theme-pick button { position: relative; flex: 1; font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0; padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.theme-pick button + button { border-left: 1px solid var(--line); }
.theme-pick button:hover { background: var(--chip); }
.theme-pick button > span { position: relative; text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg); }

.top { border-bottom: 1px solid var(--line); position: relative; }

/* Feedback temporaire : pastille flottante et page des idées */
.feedback-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 40;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--chip-on); color: var(--chip-on-ink); box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.feedback-fab:hover { transform: scale(1.04); }
.idees-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.idee { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.idee p { margin: 0; white-space: pre-wrap; }
.vote { min-width: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip); color: var(--ink); padding: 6px; cursor: pointer; font: inherit; }
.vote[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.idee-ctx { color: var(--muted); font-size: .85em; }

.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 12px; }
.topbar .brand { display: contents; }
.topbar h1 { grid-area: 1 / 1; }
.topbar .appmenu { grid-area: 1 / 2; justify-self: end; }
.topbar .tagline { grid-area: 2 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-version { grid-area: 2 / 2; justify-self: end; margin: 2px 0 0; font-size: .78rem; line-height: 1.4; opacity: .75; white-space: nowrap; }

/* Fenêtre « Donner mon avis » (feedback.js) */
.fb-dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 18px 20px; width: min(92vw, 460px); }
.fb-dialog::backdrop { background: rgba(0,0,0,.45); }
.fb-dialog h2 { margin: 0 0 8px; font-size: 1.2rem; }
.fb-dialog textarea { width: 100%; min-height: 110px; box-sizing: border-box; font: inherit; }
.fb-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.fb-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.btn.fb-close { position: static; font-size: .92rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); }

/* --- Page principale : calendrier, carte et liste ensemble --- */
body[data-page="calendrier"] .wrap { max-width: 1280px; }
.cal2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; }
.cal2 #map { height: min(28vh, 260px); margin: 0; }
.cal2-map { position: relative; }
.cal2 #calendar:empty { display: none; } /* mode 1 jour : plus de grille, donc plus d'espace réservé au-dessus de la liste */
.selbar { position: sticky; top: var(--fh, 150px); z-index: 6; padding: 4px 0; background: var(--bg, Canvas); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.selbar:empty { display: none; }
.selchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #e8821e; color: #1d1204; font-weight: 600; font-size: .9rem; }
.sellabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selchip button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 6px; }
.cell.dim-place .pills, .cell.dim-place .more, .cell.dim-place .cdot { visibility: hidden; }
/* Les filtres et la barre de sélection passent par-dessus un titre de jour repoussé par le suivant. */
body[data-page="calendrier"] .filters { z-index: 7; }
body[data-page="calendrier"] #list .day h2 { top: calc(var(--fh, 150px) + var(--selh, 0px)); margin: 0; z-index: 4; }
.more-btn[hidden] { display: none; }
.cell.has-place { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.past .cdot { opacity: .45; }
.map-dot.is-dim { visibility: hidden; }
.map-dot.is-sel { outline: 3px solid var(--accent); outline-offset: 1px; transform: scale(1.2); }
.cdot { display: none; }
@media (max-width: 640px) {
  .cal2 .grid-compact .pills, .cal2 .grid-compact .more { display: none; }
  .cal2 .grid-compact .cdot { display: flex; width: 24px; height: 24px; margin: 2px auto 0; font-size: .72rem; }
}
@media (max-width: 899px) {
  /* Téléphone : calendrier et carte sont dans le bandeau des filtres, en haut de la page (non collé) ; une barre fixe le remplace quand il a défilé. */
  body[data-page="calendrier"] .filters { position: static; }
  #fold-body { margin-top: 8px; display: grid; gap: 8px; }
  #fold-body #map { height: min(24vh, 200px); margin: 0; } /* pas de marges : la page défile à un doigt par-dessus la carte */
  body[data-page="calendrier"] #fold, body[data-page="calendrier"] #unfold { display: none; }
  #minibar { position: fixed; top: 0; left: 0; right: 0; z-index: 8; border-bottom: 1px solid var(--line); height: 44px; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); font-size: .9rem; }
  #minibar .mb-sum { flex: 1 1 auto; min-width: 3em; height: 100%; border: 0; padding: 0; font: inherit; text-align: left; background: none; color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #minibar .mb-sum::before { content: "▴"; margin-right: 8px; opacity: .7; } /* caret : retour en haut de page */
  #minibar .mb-sel { flex: 0 1 auto; }
  #minibar .mb-sel:empty { display: none; }
  #minibar[hidden] { display: none; }
}
@media (min-width: 900px) {
  .cal2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "cal map" "list map"; align-items: start; }
  .cal2 #calendar { grid-area: cal; }
  .cal2-map { grid-area: map; position: sticky; top: var(--fh, 150px); }
  .cal2 #map { height: calc(100vh - var(--fh, 150px) - 40px); max-height: 760px; }
  #cal2-list { grid-area: list; }
}
.status:empty { display: none; }

/* « Tout effacer » et la sélection, côte à côte au-dessus des filtres (dans le bandeau collé). */
.selrow { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 6px; overflow: hidden; } /* hauteur gardée sans bouton : rien ne bouge à la sélection */
.resetchip[hidden] { display: none; }
.selrow .selbar, #minibar .mb-sel { position: static; padding: 0; background: none; display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.selrow .selchip, #minibar .selchip { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.resetchip { border: 0; font: inherit; font-size: .9rem; font-weight: 600; padding: 3px 10px; cursor: pointer; flex: none !important; }
.popup-sober .leaflet-popup-content { margin: 6px 10px; font-weight: 700; cursor: default; }
.dd summary.is-typed { color: #fff; text-shadow: 0 0 3px rgb(0 0 0 / .6); }
.event-cal { margin: 14px 0; }

/* Indice de confiance : ++ (vert foncé), + (vert), ? (gris). Le vert n'est plus utilisé par un type d'événement. */
.trust { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; color: #fff; font-size: .75rem; font-weight: 700; }
.trust.haute { background: #0a5c2e; }
.trust.moyenne { background: #3fae5a; }
.trust.basse { background: #8d8d8d; }
.sources .trust { margin-right: 4px; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; padding: 6px 8px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--chip); border: 1px solid var(--muted); transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: var(--chip-on); border-color: var(--chip-on); }
.switch input:checked + .track::after { transform: translateX(14px); background: var(--chip-on-ink); }
.switch input:focus-visible + .track { outline: 2px solid var(--chip-on); outline-offset: 2px; }
.correction { margin-top: 24px; }
.correction label { display: block; margin: 14px 0 4px; font-weight: 600; }
.correction textarea, .correction input[type=url], .correction .pp-lu input:not([type=checkbox]) { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--line, #8886); border-radius: 8px; background: var(--card, transparent); color: inherit; }
.correction textarea { min-height: 90px; }
.correction .hp { position: absolute; left: -9999px; }
.correction .pp-lu small { display: block; color: var(--muted); margin: 2px 0 4px; }

/* Bouton flottant « Paramètres » (menu.js) : en bas à droite, l'avis (feedback) reste en bas à gauche. */
.settings { position: fixed; right: 16px; bottom: 16px; z-index: 40; }
.settings summary {
  list-style: none; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip-on); color: var(--chip-on-ink); box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.settings summary::-webkit-details-marker { display: none; }
.settings[open] summary svg { transform: rotate(45deg); }
.settings summary svg { transition: transform .2s; }
.settings-list {
  position: absolute; right: 0; bottom: 58px; min-width: 15rem; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .25); padding: 6px;
}
.settings-list a { white-space: nowrap; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.settings-list a:hover { background: var(--chip); }
.proposer [hidden] { display: none !important; }

.lien-etat { flex: 0 0 1.6rem; text-align: center; font-weight: 700; }
.lien-etat.is-ok { color: #1f9d55; }
.lien-etat.is-erreur { color: #c0392b; }
.lien-etat.is-dbl { color: #d98a00; }
.lien-etat.is-neutre { color: var(--muted, #667); }