:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --text: #1b1d21;
  --muted: #6b7280;
  --border: #e2e5ea;
  --accent: #2563eb;
  --good: #16a34a;
  --mid: #d97706;
  --weak: #9ca3af;
  --hot: #dc2626;
  --warm: #ea580c;
  --cool: #0284c7;
  --radius: 10px;
  /* Les sept emplacements de la comparaison. Attribués à l'ajout et jamais
     réattribués tant que la ville reste retenue : retirer la 3e ne doit pas
     repeindre les quatre autres. Teintes choisies pour rester distinguables en
     clair comme en sombre — et complétées par le rang, pour qui ne distingue
     pas le rouge du vert. */
  --c1: #2563eb; --c2: #db2777; --c3: #15803d; --c4: #d97706;
  --c5: #7c3aed; --c6: #0891b2; --c7: #57616f;
}
/* Palette sombre, factorisée : appliquée soit par préférence système (sauf choix
   « clair » explicite), soit par bascule manuelle data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --panel: #1c1f25;
    --text: #e8eaed;
    --muted: #9aa1ab;
    --border: #2c313a;
    --accent: #60a5fa;
    --good: #4ade80;
    --mid: #fbbf24;
    --weak: #6b7280;
    --hot: #f87171;
    --warm: #fb923c;
    --cool: #38bdf8;
    --c1: #60a5fa; --c2: #f472b6; --c3: #4ade80; --c4: #fbbf24;
    --c5: #a78bfa; --c6: #22d3ee; --c7: #94a3b8;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f25;
  --text: #e8eaed;
  --muted: #9aa1ab;
  --border: #2c313a;
  --accent: #60a5fa;
  --good: #4ade80;
  --mid: #fbbf24;
  --weak: #6b7280;
  --hot: #f87171;
  --warm: #fb923c;
  --cool: #38bdf8;
  --c1: #60a5fa; --c2: #f472b6; --c3: #4ade80; --c4: #fbbf24;
  --c5: #a78bfa; --c6: #22d3ee; --c7: #94a3b8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topbar { padding: 18px 24px 6px; }
.topbar h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.topbar h1 span { font-size: 12px; font-weight: 400; color: var(--muted); vertical-align: middle; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* Bascule clair / sombre, fixée en haut à droite de l'écran. */
.theme-toggle {
  position: fixed; top: 14px; right: 18px; z-index: 1000;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Bouton « A » : bascule d'animation, posé à gauche de la bascule
   clair/sombre. Le contraste entre les deux états est net — relâché
   (aria-pressed="false") reprend le style du bouton thème ; enfoncé
   (aria-pressed="true") s'inverse en accent plein. */
.anim-toggle {
  position: fixed; top: 14px; right: 58px; z-index: 1000;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  font: 700 15px/1 system-ui, sans-serif;
  transition: color .15s, background .15s, border-color .15s,
              box-shadow .15s, transform .1s;
}
.anim-toggle:hover { color: var(--text); border-color: var(--accent); }
.anim-toggle[aria-pressed="true"] {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28);
  transform: translateY(1px);
}

.layout {
  display: grid;
  grid-template-columns: 290px minmax(320px, 1fr) minmax(320px, 1.05fr);
  gap: 14px;
  padding: 14px 24px 24px;
  align-items: start;
  height: calc(100vh - 74px);
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .mapwrap { order: -1; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---------------- formulaire ---------------- */
/* Le panneau défile dans sa colonne, comme celui des résultats. Sans cela il
   débordait de la hauteur fixée à `.layout` et étirait la ligne de la grille :
   la carte héritait alors d'une hauteur démesurée, et la moitié haute restait
   blanche faute de tuiles au-delà du pôle. */
.controls {
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; max-height: 100%;
}
@media (max-width: 1100px) { .controls { max-height: none; } }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.field b { color: var(--text); font-weight: 600; }
.field small { color: var(--muted); font-size: 12px; }

input[type=text], input:not([type]), select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  width: 100%;
}
input[type=range] { width: 100%; accent-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.chip input { accent-color: var(--accent); margin: 0; }
.chip:has(input:checked) { border-color: var(--accent); color: var(--accent); }

/* ---- Interrupteur à trois positions (« à l'étranger » — partout — « en X »)
   La pastille glisse d'un tiers de large à chaque bascule ; la position au
   centre est neutre par défaut, aucune coche n'apparaît sous la pastille.
   Les radios natives portent l'état (`:checked` + `:has`) ; les labels sont
   trois zones cliquables de largeur égale. */
.tri {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px;
  /* La piste doit contraster suffisamment avec la pastille dans les deux
     thèmes. `--bg` était trop proche de `--panel` en sombre : la pastille
     centrale — peinte sur `--panel` — s'y fondait. On mélange donc 10 % de
     `--text` dans le panneau : en clair, la piste tire vers le gris ; en
     sombre, vers un gris moyen — dans les deux cas nettement décalé du
     panneau, quel que soit le côté. */
  background: color-mix(in srgb, var(--text) 10%, var(--panel));
  user-select: none;
  font-size: 13px;
}
.tri input { position: absolute; opacity: 0; pointer-events: none; }
.tri label {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  transition: color 120ms ease;
}
.tri label:hover { color: var(--text); }
.tri input:checked + label { color: var(--text); font-weight: 600; }
.tri input:disabled + label { opacity: 0.4; cursor: not-allowed; }

/* ---- Chips « jour fixe de la semaine » sous le curseur de date de départ.
   Sept pastilles carrées (L M M J V S D) : une seule active à la fois, aucune
   par défaut. Compactes : elles ne doivent pas dominer la ligne du curseur. */
.weekchips {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.weekchips > span { margin-right: 2px; }
.wchip {
  min-width: 22px; padding: 3px 6px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  font: inherit; color: var(--muted);
  cursor: pointer; user-select: none;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.wchip:hover { color: var(--fg); }
.wchip.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.tri:has(#scopeAbroad:checked) input:checked + label,
.tri:has(#scopeHome:checked) input:checked + label { color: var(--accent); }
.tri-thumb {
  position: absolute; z-index: 0;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), background 120ms ease;
}
.tri:has(#scopeAny:checked) .tri-thumb { transform: translateX(100%); }
.tri:has(#scopeHome:checked) .tri-thumb { transform: translateX(200%); }
/* Une touche d'accent quand la pastille quitte le centre : le neutre reste sobre. */
.tri:has(#scopeAbroad:checked) .tri-thumb,
.tri:has(#scopeHome:checked) .tri-thumb {
  background: color-mix(in srgb, var(--accent) 35%, var(--panel));
}

button[type=submit] {
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button[type=submit]:disabled { opacity: 0.55; cursor: progress; }

.meta { margin: 0; font-size: 12px; color: var(--muted); min-height: 2.4em; }

/* ---------------- résultats ---------------- */
/* Pas de padding en haut : c'est le champ de recherche, collé, qui fournit cette
   marge — sinon les fiches défileraient dans la bande laissée au-dessus de lui. */
.results { position: relative; padding: 0 12px 12px; overflow-y: auto; max-height: 100%; }
/* Quand la fiche superposée passe par-dessus la liste (pendant un zoom sur
   la carte), on gèle le défilement du panneau : sinon la fiche flotterait
   au sommet et laisserait voir les cartes derrière au scroll. */
.results.has-overlay { overflow: hidden; }
.overlay.over-list { inset: 10px; }

/* Picto « carte » : posé entre le palier et le libellé région (les marges
   `auto` sur `.fmap` et `.fwhere` partagent l'espace restant à parts
   égales, ce qui recentre la pastille entre les deux blocs). Allumé
   pendant le zoom pour rappeler qu'un second clic ramène le cadrage. */
.fmap {
  margin-inline: auto;
  width: 30px; height: 30px; padding: 0; flex: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.fmap svg { width: 20px; height: 20px; display: block; }
.fmap:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.14);
}
.fmap.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- Animations d'entrée d'une fiche (mode PlusAnimation) ---
   La jauge météo se remplit de 0 à sa valeur, puis les badges et les
   jours tombent en cascade depuis le haut. Chaque enfant reçoit sa
   propre `--anim-d` calculée par le script pour former la cascade. */
@keyframes fallIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(-16px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card.anim .ftrack > i {
  transition: width 1.2s cubic-bezier(.25, .8, .3, 1);
}
.card.anim .fs {
  animation: fallIn .32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: var(--anim-d, 0s);
}
.card.anim .fday {
  animation: popIn .35s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: var(--anim-d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .card.anim .ftrack > i,
  .card.anim .fs,
  .card.anim .fday { transition: none; animation: none; }
}
@media (max-width: 1100px) { .results { max-height: none; } }

.hint {
  margin-bottom: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 7px; font-size: 13px; color: var(--muted);
}
.hint.warn { border-left-color: var(--mid); }
.hint div + div { margin-top: 6px; }
.tag.warn { border-color: var(--mid); color: var(--mid); }

.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.card.active { border-color: var(--accent); }

.ic { display: block; flex: none; width: 15px; height: 15px; }

/* en-tête */
.fhead { display: flex; align-items: center; gap: 9px; }
.frank {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--bg); color: var(--muted);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fcity { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.ftier { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ftier.ta { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.ftier.tb { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ftier.tc { color: var(--muted); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.ftier.td { color: var(--weak); background: color-mix(in srgb, var(--weak) 18%, transparent); }
/* « décevant » : la recherche n'a rien de bon à proposer pour cette envie. Il
   faut que cela se voie, plutôt qu'un « excellent » décerné au moins mauvais. */
.ftier.te { color: var(--hot); background: color-mix(in srgb, var(--hot) 13%, transparent); }
.fwhere { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
.fx {
  margin-left: 2px; width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.fx:hover { background: var(--bg); color: var(--text); }

/* score + fiabilité */
.fscore { display: flex; align-items: center; gap: 9px; margin: 11px 0 13px; }
.ftrack { flex: 1; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; }
.ftrack > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 55%, var(--accent)));
}
.frel { font-size: 12px; color: var(--muted); white-space: nowrap; }
.frel b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* stats */
.fstats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fs {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.fs .ic { color: var(--muted); }
.fs.key { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.fs.key .ic { color: var(--accent); }
.tag { padding: 3px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* bande des jours */
.fdays { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-top: 13px; }
.fday { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 9px; }
.fday .wd { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* Quantième : la fiche couvre jusqu'à 10 jours, le seul nom du jour ne suffit
   pas à savoir de quelle date on parle. */
.fday .wd b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.fday .fwi { width: 36px; height: 36px; margin: 2px 0; }
/* Les couleurs pilotent la teinte du **nuage** ; le soleil et les gouttes gardent
   leur jaune et leur bleu propres, définis dans le SVG. `.fwi.sun` n'a pas de
   nuage à teinter — la règle est conservée pour l'homogénéité mais reste sans
   effet visible. */
.fwi.sun { color: var(--warm); }
.fwi.part,
.fwi.cloud,
.fwi.fog { color: var(--weak); }
.fwi.rain,
.fwi.snow { color: color-mix(in srgb, var(--cool) 55%, var(--weak)); }
.fwi.storm { color: color-mix(in srgb, var(--text) 45%, var(--weak)); }
.fday .tmp { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fday .tmn { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* `hidden` doit gagner sur tout `display` posé par ailleurs : plusieurs blocs
   de la page sont des flex qui s'affichent malgré l'attribut sans cette règle. */
[hidden] { display: none !important; }

/* ---------------------------------------------- réglages enregistrés */
.field.saved { gap: 7px; }
.field.saved > span b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.savedbar { display: flex; align-items: stretch; gap: 6px; }
.savedbar select { flex: 1 1 auto; min-width: 0; }
.sbtn {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; white-space: nowrap;
}
.sbtn:hover { border-color: var(--accent); color: var(--accent); }
.sbtn .ic { width: 14px; height: 14px; }
.sbtn.danger:hover, .sbtn.armed { color: var(--warm); border-color: var(--warm); }
.sbtn.armed { background: color-mix(in srgb, var(--warm) 12%, transparent); }
/* Le champ prend sa ligne : à 290 px de colonne, le mettre à côté des boutons
   ne laissait voir que la fin du nom proposé. */
.saverow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.saverow input { flex: 1 1 100%; min-width: 0; }
#savedNote { line-height: 1.4; }
#savedNote.warn { color: var(--warm); font-weight: 600; }

/* Demi-journées : matin et après-midi côte à côte dans la vignette du jour.
   L'opacité de la moitié secondaire est posée en ligne par le script, calculée
   depuis le curseur — elle doit varier continûment avec lui. */
.fparts { display: flex; align-items: flex-end; justify-content: center; gap: 3px; margin: 1px 0; }
.fp { display: flex; flex-direction: column; align-items: center; gap: 0; }
.fp .fwi { width: 22px; height: 22px; margin: 0; }
.fp b { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.fp.on .fwi { width: 30px; height: 30px; }
.fp.on b { font-size: 14px; font-weight: 600; color: var(--text); }

/* Légende du bandeau des jours, quand la note est pondérée. */
.fmcap {
  display: flex; align-items: flex-start; gap: 6px; margin: 13px 0 -4px;
  font-size: 11.5px; line-height: 1.35; color: var(--muted);
}
.fmcap .ic { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.fmcap b { color: var(--text); font-weight: 600; }
.dnote { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

.fday .note { min-height: 14px; margin-top: 2px; font-size: 10px; line-height: 1.2; text-align: center; text-wrap: balance; }
.fday.off { background: color-mix(in srgb, var(--warm) 9%, transparent); box-shadow: inset 0 2px 0 var(--warm); }
.fday.off .note { color: var(--warm); font-weight: 600; }
/* « +1 » : d'autres critères sont ratés le même jour, l'infobulle les donne tous. */
.nmore {
  display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--warm) 22%, transparent); font-size: 9px;
}
/* Un motif par ligne, avec le chiffre qui le justifie en retrait : le motif dit
   ce qui coûte, le chiffre dit combien — et lève la contradiction apparente
   entre le picto et le motif. */
.nline { display: block; }
.nline + .nline { margin-top: 3px; }
.nline i { display: block; font-style: normal; font-weight: 400; font-size: 9.5px; opacity: .75; }

/* zone dépliée (fiche active) */
.modes { margin-top: 4px; display: none; }
.card.active .modes { display: block; }

.empty { color: var(--muted); padding: 20px; text-align: center; }
.empty p { margin: 0 0 12px; line-height: 1.5; }
.empty .sbtn { justify-content: center; padding: 8px 16px; }

/* ---------------- recherche d'une ville par nom ---------------- */
/* Collé en haut du panneau : la liste est longue, et chercher une ville depuis
   la 30ᵉ fiche ne doit pas obliger à remonter. Les marges négatives latérales
   étendent le fond sur toute la largeur, pour masquer les fiches qui défilent
   dessous. */
.finder {
  position: sticky; top: 0; z-index: 400;
  margin: 0 -12px 10px; padding: 12px;
  background: var(--panel);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  display: flex; align-items: center; gap: 8px;
}
.finder input {
  flex: 1; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 14px;
}
/* Flèche « haut » : même hauteur que le champ, accent visuel discret ;
   au survol, on la remplit à l'accent pour signaler l'action. */
.scroll-top {
  flex: none; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
  transition: color .15s, background .15s, border-color .15s;
}
.scroll-top svg { width: 18px; height: 18px; display: block; }
.scroll-top:hover {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.finder input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.finder-list {
  position: absolute; z-index: 500; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
.fitem {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 11px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.fitem.on, .fitem:hover { background: var(--bg); }
.fitem .fn { font-weight: 600; }
.fitem .fnalt { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 12px; }
.fitem .fw { color: var(--muted); font-size: 12px; }
.fitem .fb { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.fitem .fb.in { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.fitem .fb.out { color: var(--muted); background: var(--bg); }
.fnone { margin: 0; padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* Suggestion « lieu hors base — voici les villes les plus proches ». Un cadre
   à part, plus dense qu'une simple ligne : on résume ce qui va se passer si
   l'on clique une entrée, faute de quoi la ville voisine se substitue
   silencieusement à la ville tapée. Chaque entrée montre le lieu tapé (label
   du géocodeur), puis la voisine choisie et la distance à vol d'oiseau. */
.fnear { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.fnear-q { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
.fnear-q b { color: var(--text); }
.fnear-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 1px solid var(--accent); border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.fnear-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.fnear-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fnear-typed {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fnear-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fnear-arrow { color: var(--accent); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.fnear-body .fn { font-weight: 600; font-size: 14px; color: var(--text); }
.fnear-body .fw {
  color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fnear-dist {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  color: var(--accent); font-weight: 600; font-size: 13px; white-space: nowrap;
}
.fnear-dist small { color: var(--muted); font-size: 11px; font-weight: 400; }
.fnear-note {
  margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4;
}
.fnear-note b { color: var(--text); }

/* Titre de la deuxième section « autres lieux trouvés, trop éloignés ».
   Petite marge en tête pour la détacher des propositions dans le rayon utile. */
.fnear-far-cap {
  margin: 6px 0 2px; font-size: 12.5px; color: var(--muted);
  border-top: 1px dashed var(--border); padding-top: 8px;
}
/* Bouton d'un lieu trop éloigné : visuellement en retrait par rapport aux
   propositions cliquables « utiles », mais cliquable quand même — le clic ne
   navigue pas (aucune voisine fiable à proposer), il journalise un intérêt
   utilisateur, plus fort que le simple hit géocodé automatique. */
.fnear-btn.fnear-far {
  border-color: var(--border); background: transparent; color: var(--muted);
}
.fnear-btn.fnear-far:hover {
  background: color-mix(in srgb, var(--warm) 8%, var(--panel));
  color: var(--text);
}
.fnear-btn.fnear-far .fn { color: var(--text); font-weight: 500; }
.fnear-btn.fnear-far .fnear-arrow { color: var(--muted); }
.fnear-dist.far { color: var(--warm); }
.fnear-dist.far small { color: var(--warm); opacity: 0.85; }
/* Après le clic : l'entrée devient un accusé, sans plus être active. */
.fnear-btn.fnear-ack {
  border-color: color-mix(in srgb, var(--warm) 45%, var(--border));
  background: color-mix(in srgb, var(--warm) 10%, var(--panel));
  color: var(--text); cursor: default;
}
.fnear-btn.fnear-ack b { color: var(--warm); }

/* ---------------- fiche superposée à la carte ---------------- */
/* Au-dessus des contrôles Leaflet (z-index 1000) : sans cela les boutons de
   zoom traversent la fiche superposée. */
.overlay {
  position: absolute; z-index: 1200; inset: 10px; overflow-y: auto;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
}
.card.pinned {
  cursor: default; background: var(--panel);
  border-color: var(--warm); border-width: 2px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
}
.ftier.tn { color: var(--warm); background: color-mix(in srgb, var(--warm) 15%, transparent); }
.frank.none { color: var(--warm); background: color-mix(in srgb, var(--warm) 13%, transparent); }
.why { margin: 0; padding: 0 0 0 18px; color: var(--warm); font-size: 12.5px; }
.why li + li { margin-top: 3px; }
p.why { padding: 0; color: var(--muted); }

/* Bandeau d'avertissement en tête d'une fiche « voisine » (lieu tapé hors
   base). Il doit rester très visible : c'est la seule trace que la fiche ne
   correspond pas exactement à ce que l'utilisateur a cherché. */
.proxywarn {
  position: relative;
  margin-bottom: 10px; padding: 12px 14px;
  border: 2px solid var(--warm); border-radius: 10px;
  background: color-mix(in srgb, var(--warm) 12%, var(--panel));
  color: var(--text);
  /* Le bandeau posé sur une fiche déjà classée est ramené en haut du panneau
     par `scrollIntoView` ; sans cette marge, la barre de recherche collante
     (`.finder`) le recouvrait, cachant le titre « Fiche approchée » et le ×
     qui le referme. La valeur couvre la hauteur de la barre plus une aération. */
  scroll-margin-top: 72px;
}
.proxywarn-close {
  position: absolute; top: 6px; right: 8px;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--warm); font-size: 20px; line-height: 1; cursor: pointer;
}
.proxywarn-close:hover { background: color-mix(in srgb, var(--warm) 18%, transparent); }
.proxywarn-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13.5px; color: var(--warm);
  margin-bottom: 6px;
}
.proxywarn-title svg { width: 16px; height: 16px; }
.proxywarn p { margin: 0 0 4px; font-size: 13px; line-height: 1.45; }
.proxywarn p:last-child { margin-bottom: 0; }
.proxywarn-check { color: var(--warm); font-weight: 500; }

.card.ask { border-color: var(--accent); text-align: center; }
.askt { margin: 6px 0 4px; font-size: 15px; }
.askd { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.askb { display: flex; gap: 10px; justify-content: center; align-items: center; }
.askb .primary {
  padding: 8px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.askb .primary:hover { filter: brightness(1.08); }

/* ---------------- formule de la note (survol) ---------------- */
/* Au-dessus de tout, fiche superposée (1200) comprise : c'est une infobulle,
   elle doit rester lisible quel que soit ce qu'elle survole. */
.mathpop {
  position: fixed; z-index: 1500; width: 320px; max-width: calc(100vw - 16px);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  font-size: 12.5px; pointer-events: none;
}
.mathpop .ptitle { font-size: 14px; font-weight: 600; }
.mathpop .ptitle b { float: right; font-variant-numeric: tabular-nums; }
/* La note de classement passe au second plan : c'est la qualité météo qui dit
   ce que vaut le séjour. */
.mathpop .ptitle.sub { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.mathpop .pformula { margin-top: 2px; color: var(--muted); font-size: 12px; }
.mathpop .pnote {
  margin-top: 8px; padding: 6px 8px; border-radius: 6px; font-size: 11.5px;
  color: var(--warm); background: color-mix(in srgb, var(--warm) 11%, transparent);
}
.mathpop .psec {
  margin: 10px 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.mathpop .pr { display: flex; gap: 10px; padding: 2px 0; }
.mathpop .pr span { flex: 1; color: var(--muted); }
.mathpop .pr b { font-variant-numeric: tabular-nums; font-weight: 600; }
.mathpop .pr.calc span { color: var(--text); font-variant-numeric: tabular-nums; }
.mathpop .pr.hi span, .mathpop .pr.hi b { color: var(--accent); }
.mathpop .ptot {
  display: flex; gap: 10px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--border); font-weight: 600;
}
.mathpop .ptot span { flex: 1; font-variant-numeric: tabular-nums; }
.mathpop .ptot b { font-variant-numeric: tabular-nums; }
.mathpop .pfoot { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.frank[data-math], .ftier[data-math] { cursor: help; }
.frank[data-math]:hover, .ftier[data-math]:hover { outline: 1px solid var(--accent); }

/* ---------------- carte ---------------- */
.mapwrap { position: relative; padding: 0; overflow: hidden; height: 100%; min-height: 420px; }
#map { width: 100%; height: 100%; min-height: 420px; background: var(--bg); }
.pin {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pin.origin { background: var(--text); }
.pin { transition: transform .12s ease, background .12s ease; }
.pin.hot {
  background: var(--hot);
  transform: scale(1.65);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* ---------------- exclusions ---------------- */
details#excludeBox > summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted);
  list-style: none;
}
details#excludeBox > summary::before { content: "▸ "; }
details#excludeBox[open] > summary::before { content: "▾ "; }
details#excludeBox > summary b { color: var(--accent); font-weight: 500; }
.chips.scroll { max-height: 132px; overflow-y: auto; margin-top: 8px; }
/* Pays de départ masqué de la liste quand « à l'étranger » est coché. */
#countries .chip[hidden] { display: none; }

/* `hidden` seul ne suffit pas face à un `display` explicite. */
.excluded[hidden] { display: none; }
.excluded {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 10px; font-size: 12.5px; color: var(--muted);
}
.pill {
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font: inherit;
}
.pill:hover { border-color: var(--mid); color: var(--mid); }

button.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: underline;
}
/* ---------------- graphe basculable températures / vent ---------------- */
.btabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: 999px; margin: 14px 0 8px; }
.btab {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--muted);
  padding: 5px 13px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; gap: 5px;
}
.btab .ic { width: 13px; height: 13px; }
.btab.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.bchart { border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px 6px; background: var(--bg); cursor: pointer; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg.hidden { display: none; }
.chart-svg text { text-anchor: middle; font-family: inherit; font-size: 9px; }
/* températures */
.tsvg .grid line { stroke: var(--border); stroke-width: 1; }
.tsvg .area { fill: var(--accent); opacity: .10; stroke: none; }
.tsvg .lmax { fill: none; stroke: var(--warm); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tsvg .lmin { fill: none; stroke: var(--cool); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tsvg .vmax { fill: var(--warm); font-weight: 600; }
.tsvg .vmin { fill: var(--cool); font-weight: 600; }
.tsvg .vday, .wsvg .vday { fill: var(--muted); }
/* vent */
.wsvg .base { stroke: var(--border); stroke-width: 1; }
.wsvg .wcol { cursor: pointer; }
.wsvg .hit { fill: transparent; }
.wsvg .wbar { fill: color-mix(in srgb, var(--cool) 80%, transparent); transition: fill .12s; }
.wsvg .wcol:hover .wbar { fill: var(--cool); }
.wsvg .wval { fill: var(--cool); font-weight: 600; font-size: 9px; }
.wsvg .wdir { fill: var(--muted); font-size: 7.5px; }
.wsvg .gmark { color: var(--warm); }
/* Le jour ouvert cède la place à sa pastille : le symbole disparaît au lieu de
   transparaître sous elle. */
.wsvg .wcol.showing .gmark { display: none; }
.wsvg .gbadge { pointer-events: none; }
.wsvg .gbadge.hidden { display: none; }
/* Le liseré couleur du fond détache la pastille des barres et des chiffres
   qu'elle survole, sans lui ajouter de contour visible. */
.wsvg .gbadge rect { fill: var(--warm); stroke: var(--bg); stroke-width: 2; }
.wsvg .gbadge text { fill: #fff; font-weight: 600; font-size: 8px; letter-spacing: .01em; }

.chint { margin: 7px 2px 0; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.chint .ic { width: 13px; height: 13px; }

/* ---------------- exclusions (fiche) ---------------- */
.fseg { margin: 16px 0 4px; }
.fseg-cap { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.segbar { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); }
.segbar button {
  flex: 1; border: 0; border-left: 1px solid var(--border); background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; padding: 9px 6px; color: var(--text);
  display: flex; flex-direction: column; gap: 2px; align-items: center; transition: background .12s, color .12s;
}
.segbar button:first-child { border-left: 0; }
.segbar button small { font-size: 10.5px; color: var(--muted); }
.segbar button:hover { background: color-mix(in srgb, var(--warm) 9%, transparent); color: var(--warm); }
.segbar button:hover small { color: var(--warm); }

/* ---------------- détails + trajets ---------------- */
.fsection { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 9px; }
.fdetails { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; font-size: 12.5px; }
.fdetails > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fdetails > div span:first-child { color: var(--muted); }
.fdetails > div span:last-child { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.foptions { margin-top: 11px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.foptions > div { display: flex; gap: 8px; }
.foptions > div span:first-child { min-width: 88px; color: var(--text); }
@media (max-width: 560px) { .fdetails { grid-template-columns: 1fr; } }

/* ================= comparaison de destinations ================= */
/* Une seule couleur par ville, portée d'un bout à l'autre : bouton de la fiche,
   pastille de la barre, en-tête de colonne, polygone du profil, disque de
   l'arbitrage. Elle arrive partout par `--slot`, posé en style en ligne. */

/* ---- le bouton des fiches ---- */
.cmpb {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px 4px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 500; line-height: 1.5;
}
.cmpb > i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.cmpb:hover { border-color: var(--accent); color: var(--accent); }
.cmpb.on { border-color: transparent; background: var(--slot); color: #fff; }
.cmpb.on > i { background: #fff; border-color: #fff; }
/* Sept villes retenues : le bouton reste visible mais n'ajoute plus rien. Le
   faire disparaître laisserait croire à un défaut d'affichage. */
.cmpb.full { opacity: .4; cursor: not-allowed; }
.cmpb.full:hover { border-color: var(--border); color: var(--muted); }

/* ---- la barre ---- */
/* Collée en bas du panneau des résultats : la sélection se construit en lisant,
   et doit rester sous les yeux sans obliger à redescendre. */
.cmptray[hidden] { display: none; }
.cmptray {
  position: sticky; bottom: 0; z-index: 420;
  margin: 8px -12px -12px; padding: 9px 12px;
  background: var(--panel);
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 -8px 18px -14px rgba(0,0,0,.5);
}
/* Barre au repos : elle n'a qu'un titre et un bouton, elle n'a aucune raison
   d'avoir la même hauteur qu'une rangée de pastilles. */
.cmptray:has(.cmprow.empty) { padding: 5px 12px; }
.cmprow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Barre au repos : la comparaison reste accessible sans avoir retenu une ville
   à la main d'abord. */
.cmprow.empty { position: relative; gap: 10px; flex-wrap: nowrap;
                min-width: 0; padding: 0; text-align: left; }
.cmplabel {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: 14.5px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.01em; white-space: nowrap;
}
.cmplabel .ic { width: 18px; height: 18px; color: var(--accent); }
/* Trois profils illustratifs — chacun sa forme, chacun sa couleur — posés
   entre le titre et le bouton. On se sert de l'espace qui séparait les deux au
   lieu de le laisser gris, et on montre trois villes distinctes plutôt qu'une
   silhouette moyenne dont personne ne comprendrait la nature. */
.cmpminis {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  margin: 0 6px 0 2px;
}
.cmpmini { width: 30px; height: 30px; display: block; flex: none; }
.cmpmini .grid polygon { fill: none; stroke: var(--border); stroke-width: 0.7; }
.cmpmini .poly {
  fill-opacity: 0.28; stroke-width: 1.3; stroke-linejoin: round;
}
.cmpmini[data-slot="1"] .poly { fill: var(--c1); stroke: var(--c1); }
.cmpmini[data-slot="2"] .poly { fill: var(--c2); stroke: var(--c2); }
.cmpmini[data-slot="3"] .poly { fill: var(--c3); stroke: var(--c3); }
.cmprow.empty .cmpacts { margin-left: auto; }
/* Au repos, le bouton « Sélection rapide » est le seul geste offert : il porte
   la couleur d'accent, pour se distinguer d'un état d'attente et signaler
   qu'il n'y a qu'à cliquer. */
.cmprow.empty .cmpq {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}
.cmprow.empty .cmpq:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
/* L'explication ne vaut pas une deuxième ligne occupée en permanence : elle
   passe en infobulle au survol, posée au-dessus de la barre et sans peser sur
   la mise en page. `focus-within` la donne aussi à qui arrive au clavier. */
.cmprow.empty::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 0; right: 0; z-index: 430;
  padding: 8px 11px; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 88%, transparent);
  color: var(--panel); font-size: 12px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.cmprow.empty:hover::after, .cmprow.empty:focus-within::after {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cmprow.empty::after { transition: none; transform: none; }
}
.cmpcount {
  flex: none; font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px;
  font-variant-numeric: tabular-nums;
}
.cmpchips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.cmpacts { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.cmpchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: grab;
  padding: 4px 5px 4px 7px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg); max-width: 100%;
}
.cmpchip .sq { width: 9px; height: 9px; border-radius: 3px; background: var(--slot); flex: none; }
.cmpchip .rk { font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmpchip .x {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; padding: 0;
}
.cmpchip .x .ic { width: 11px; height: 11px; }
.cmpchip .x:hover { background: var(--border); color: var(--text); }
/* Hors des fiches affichées : sa note sera calculée à part, on le montre. */
.cmpchip.out { border-style: dashed; }
.cmpchip.drag { opacity: .45; }
.cmpchip.over { border-color: var(--accent); }
.cmpq {
  border: 1px solid var(--border); background: none; color: var(--muted);
  border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 12.5px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.cmpq:hover { border-color: var(--accent); color: var(--accent); }
.cmpgo {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.cmpgo:disabled { opacity: .45; cursor: default; }
.cmpnote { margin: 7px 2px 0; font-size: 12px; color: var(--muted); }
.cmpnote[hidden] { display: none; }

/* Écran étroit : la barre quitte le flux du panneau pour se fixer en bas de la
   fenêtre — sinon elle n'apparaîtrait qu'au bout d'une liste de quarante fiches. */
@media (max-width: 1100px) {
  .cmptray {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    border-top: 1px solid var(--border); z-index: 1300;
  }
  body:has(.cmptray:not([hidden])) .layout { padding-bottom: 96px; }
}

/* ---- menu « sélection rapide » ---- */
.cmpmenu {
  position: fixed; z-index: 1400; width: 320px; max-width: calc(100vw - 16px);
  max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  box-shadow: 0 14px 36px rgba(0,0,0,.24); padding-bottom: 4px;
}
.cmpmenu .grp {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 11px 13px 5px;
}
.cmpmenu .it {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  color: var(--text); font: inherit; padding: 7px 13px; cursor: pointer;
}
.cmpmenu .it:hover { background: var(--bg); }
.cmpmenu .it b { display: block; font-size: 13.5px; font-weight: 600; }
.cmpmenu .it small { color: var(--muted); font-size: 12px; }

/* ---- la modale ---- */
/* Plein écran : sept colonnes ne tiennent nulle part ailleurs. Le rappel des
   critères reste dans son en-tête, pour ne pas avoir à la fermer pour savoir sur
   quoi on compare. */
.cmpmodal[hidden] { display: none; }
.cmpmodal {
  position: fixed; inset: 0; z-index: 1600; padding: 18px;
  background: color-mix(in srgb, var(--text) 42%, transparent);
  backdrop-filter: blur(2px);
  display: grid; place-items: stretch;
}
body.cmp-open { overflow: hidden; }
.cmpsheet {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.cmphead {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border); flex: none;
}
.cmphead h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.cmpsub { color: var(--muted); font-size: 12.5px; }
.cmpfaces {
  display: inline-flex; gap: 2px; padding: 3px; margin-left: auto;
  background: var(--bg); border-radius: 999px;
}
.cmpface {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--muted); padding: 6px 13px; border-radius: 999px; line-height: 1;
}
.cmpface.on { background: var(--accent); color: #fff; font-weight: 600; }
/* Deux boutons discrets pour exporter la comparaison, à droite des faces.
   Réutilisent le style `.cmpq` mais un poil plus resserré. */
.cmpexport { display: inline-flex; gap: 6px; }
.cmpexport .cmpq {
  padding: 6px 11px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.cmpexport .cmpq:disabled { opacity: .55; cursor: progress; }
.cmpx {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.cmpx:hover { background: var(--bg); color: var(--text); }
.cmpx .ic { width: 17px; height: 17px; }
.cmploading { padding: 40px; text-align: center; color: var(--muted); }

.cmpbody { overflow: auto; padding: 12px 14px 18px; }
/* La sensation d'un objet qu'on retourne — mais la face qui arrive est un plan,
   jamais une perspective : les longueurs qu'on est venu comparer ne doivent pas
   être déformées. On démarre nettement plié (perspective courte, forte
   rotation, léger décalage sur X) pour que la bascule soit visible, on ralentit
   sur la fin (`cubic-bezier`) et on termine bien à plat. */
@keyframes cmpflip {
  0% {
    transform: perspective(900px) rotateY(-32deg) translateX(-24px);
    opacity: 0;
  }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.cmpbody.flip {
  animation: cmpflip .46s cubic-bezier(.2, .75, .25, 1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { .cmpbody.flip { animation: none; } }

/* ---- le verdict ---- */
.cmpverdict {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); flex: none;
}
.cmpverdict > div { background: var(--panel); padding: 10px 14px; }
.cmpverdict .lbl {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.cmpverdict .val { font-size: 13.5px; }
.cmpverdict .val b { color: var(--slot); font-weight: 650; }
.cmpverdict .val i { font-style: normal; color: var(--muted); }
.cmpverdict .val.plain { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: block; }

/* ---- en-tête de colonne, commun à « Jours » et « Critères » ---- */
.cmpch { padding: 4px 6px 9px; text-align: center; border-bottom: 1px solid var(--border); }
.cmpch .bar { display: block; height: 3px; border-radius: 2px; background: var(--slot); margin-bottom: 7px; }
.cmpch .cn { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.cmpch .cs { font-size: 11px; color: var(--muted); }
.cmpch .ctags { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }
.cmpch .tag {
  font-size: 9.5px; font-weight: 600; border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px; color: var(--muted); white-space: nowrap;
}
.cmpch .tag.warn { border-color: var(--warm); color: var(--warm); }
.cmpch.err .cn { color: var(--muted); }

/* ---- face « Jours » ---- */
.cmpgrid {
  display: grid; grid-template-columns: 104px repeat(var(--n), minmax(92px, 1fr));
  font-variant-numeric: tabular-nums; min-width: min-content;
}
.cmpgut {
  padding: 8px 8px 8px 2px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 12px; color: var(--muted); white-space: nowrap; align-self: stretch;
  display: flex; align-items: center; gap: 5px;
}
.cmpgut b { color: var(--text); font-size: 13.5px; }
.cmpgut.head { border-bottom: 1px solid var(--border); }
.cmpgut.foot { border-bottom: 0; padding-top: 11px; }
.cmpcell {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
  padding: 6px 3px 5px; text-align: center; border-radius: 4px;
}
.cmpcell .fwi { margin: 0 auto 1px; width: 30px; height: 30px; }
.cmpcell .t { font-size: 13px; font-weight: 600; }
.cmpcell .t i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.cmpcell .fl { display: block; font-size: 10px; line-height: 1.25; color: var(--mid); margin-top: 1px; }
.cmpcell.empty { color: var(--weak); padding-top: 14px; }
/* La note du jour, en fond : la forme d'un séjour se lit sans lire un chiffre. */
.cmpcell.q1 { background: color-mix(in srgb, var(--good) 20%, transparent); }
.cmpcell.q2 { background: color-mix(in srgb, var(--good) 9%, transparent); }
.cmpcell.q3 { background: color-mix(in srgb, var(--mid) 13%, transparent); }
.cmpcell.q4 { background: color-mix(in srgb, var(--hot) 12%, transparent); }
.cmpcell.win { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 55%, transparent); }
.cmpfoot {
  padding: 11px 3px 4px; text-align: center; font-size: 12px; color: var(--muted);
  border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.cmpfoot b { font-size: 14px; color: var(--text); }
.cmpfoot b.hi { color: var(--good); }
.cmpfoot i { font-style: normal; }
.cmpcap {
  margin: 0 0 10px; font-size: 12px; color: var(--muted);
  display: flex; align-items: flex-start; gap: 7px;
}
.cmpcap .ic { width: 14px; height: 14px; margin-top: 2px; }
.cmplegend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px;
  font-size: 11.5px; color: var(--muted);
}
.cmplegend span { display: inline-flex; align-items: center; gap: 6px; }
.cmplegend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.cmplegend i.q1 { background: color-mix(in srgb, var(--good) 20%, transparent); }
.cmplegend i.q2 { background: color-mix(in srgb, var(--good) 9%, transparent); }
.cmplegend i.q3 { background: color-mix(in srgb, var(--mid) 13%, transparent); }
.cmplegend i.q4 { background: color-mix(in srgb, var(--hot) 12%, transparent); }
.cmplegend i.winbox { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 55%, transparent); }
.cmplegend i.front { background: none; border-top: 2px dashed var(--good); border-radius: 0; height: 0; }
.cmplegend i.ghost { background: var(--muted); opacity: .3; border-radius: 50%; }
.cmplegend.axes { gap: 12px; }
.cmplegend.axes b {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px;
  border: 1px solid var(--border); border-radius: 50%; font-size: 9.5px; color: var(--muted);
}

/* ---- face « Critères » ---- */
.cmptools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.cmpsw { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.cmpsw input { accent-color: var(--accent); }
.cmphidden { font-size: 12px; color: var(--muted); }
.cmptools .cmpq { margin-left: auto; }
.cmptable {
  display: grid; grid-template-columns: 168px repeat(var(--n), minmax(94px, 1fr));
  align-items: center; min-width: min-content;
}
.cmpgrp {
  grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: 16px 2px 6px;
}
.cmpgrp i { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: 8px; }
.cmplb { font-size: 12.5px; color: var(--muted); padding: 6px 10px 6px 2px; }
.cmplb.head { border-bottom: 1px solid var(--border); align-self: stretch; }
.cmpv { padding: 4px 6px; border-left: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }
.cmpv .n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmpv .n i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.cmpv .n.best { color: var(--good); }
.cmpv .n.worst, .cmpv .n.none { color: var(--muted); font-weight: 400; }
.cmpv .n.plain { font-weight: 400; font-size: 12.5px; }
.cmpv .track { display: block; height: 4px; border-radius: 2px; background: var(--border); margin-top: 4px; }
.cmpv .track > i { display: block; height: 4px; border-radius: 2px; background: var(--slot, var(--accent)); }
.cmpfootnote { margin: 14px 2px 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---- le duel (2 villes) ---- */
.cmpduel { display: grid; grid-template-columns: 1fr 168px 1fr; align-items: center; }
.cmpduel > div { padding: 7px 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cmpduel .l { text-align: right; }
.cmpduel .r { text-align: left; }
.cmpduel .l.win, .cmpduel .r.win { font-weight: 700; }
.cmpduel .lbl { text-align: center; font-size: 12px; color: var(--muted); }
.cmpduel .head { font-weight: 650; font-size: 15px; color: var(--slot); padding-bottom: 12px; }
.cmpduel .d {
  text-align: center; font-size: 13px; font-weight: 650; color: var(--slot);
  line-height: 1.25;
}
.cmpduel .d small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.cmpduel .cmpgrp.span { text-align: center; border-top: 1px solid var(--border); margin-top: 6px; }
.cmpduel > div:not(.head):not(.cmpgrp) { border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); }

/* ---- face « Profils » ---- */
.cmpradars {
  display: grid; gap: 10px; justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}
.cmpradars figure { margin: 0; width: 100%; max-width: 190px; text-align: center; }
.cmpradars figcaption { font-size: 12.5px; font-weight: 600; color: var(--slot); margin-top: -4px; }
.cmpradars.one { grid-template-columns: 1fr; }
.cmpradars.one .cmpradar { max-width: 340px; }
.cmpradar { width: 100%; height: auto; display: block; }
.cmpradar .grid polygon { fill: none; stroke: var(--border); stroke-width: 1; }
.cmpradar .grid line { stroke: var(--border); stroke-width: 1; }
.cmpradar .ax { fill: var(--muted); font-size: 8px; text-anchor: middle; font-family: inherit; }
.cmpradar .axis .num { pointer-events: none; }
.cmpradar .axis .lbl { display: none; pointer-events: none;
  font-size: 9px; fill: var(--accent); font-weight: 600; }
.cmpradar .axzone { fill: transparent; cursor: help; }
/* Coordination : passer sur un axe (dans n'importe quel graphe) change tous
   les graphes en même temps. La valeur de `data-axis-hover` sur le conteneur
   `.cmpradars` est posée en JS ; la CSS se contente de suivre — six règles,
   une par axe. */
.cmpradars[data-axis-hover="0"] .cmpradar .axis[data-axis="0"] .num,
.cmpradars:has(.axis[data-axis="0"]:hover) .cmpradar .axis[data-axis="0"] .num,
.cmpradars[data-axis-hover="1"] .cmpradar .axis[data-axis="1"] .num,
.cmpradars:has(.axis[data-axis="1"]:hover) .cmpradar .axis[data-axis="1"] .num,
.cmpradars[data-axis-hover="2"] .cmpradar .axis[data-axis="2"] .num,
.cmpradars:has(.axis[data-axis="2"]:hover) .cmpradar .axis[data-axis="2"] .num,
.cmpradars[data-axis-hover="3"] .cmpradar .axis[data-axis="3"] .num,
.cmpradars:has(.axis[data-axis="3"]:hover) .cmpradar .axis[data-axis="3"] .num,
.cmpradars[data-axis-hover="4"] .cmpradar .axis[data-axis="4"] .num,
.cmpradars:has(.axis[data-axis="4"]:hover) .cmpradar .axis[data-axis="4"] .num,
.cmpradars[data-axis-hover="5"] .cmpradar .axis[data-axis="5"] .num,
.cmpradars:has(.axis[data-axis="5"]:hover) .cmpradar .axis[data-axis="5"] .num { display: none; }
.cmpradars[data-axis-hover="0"] .cmpradar .axis[data-axis="0"] .lbl,
.cmpradars:has(.axis[data-axis="0"]:hover) .cmpradar .axis[data-axis="0"] .lbl,
.cmpradars[data-axis-hover="1"] .cmpradar .axis[data-axis="1"] .lbl,
.cmpradars:has(.axis[data-axis="1"]:hover) .cmpradar .axis[data-axis="1"] .lbl,
.cmpradars[data-axis-hover="2"] .cmpradar .axis[data-axis="2"] .lbl,
.cmpradars:has(.axis[data-axis="2"]:hover) .cmpradar .axis[data-axis="2"] .lbl,
.cmpradars[data-axis-hover="3"] .cmpradar .axis[data-axis="3"] .lbl,
.cmpradars:has(.axis[data-axis="3"]:hover) .cmpradar .axis[data-axis="3"] .lbl,
.cmpradars[data-axis-hover="4"] .cmpradar .axis[data-axis="4"] .lbl,
.cmpradars:has(.axis[data-axis="4"]:hover) .cmpradar .axis[data-axis="4"] .lbl,
.cmpradars[data-axis-hover="5"] .cmpradar .axis[data-axis="5"] .lbl,
.cmpradars:has(.axis[data-axis="5"]:hover) .cmpradar .axis[data-axis="5"] .lbl { display: block; }
/* Les libellés peuvent dépasser du viewBox : on autorise le débordement pour
   que « Sécheresse » et « Fiabilité » ne soient pas rognés à droite. */
.cmpradar { overflow: visible; }
.cmpradar .ghost { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.cmpradar .poly {
  fill: var(--slot); fill-opacity: .20; stroke: var(--slot);
  stroke-width: 2; stroke-linejoin: round;
}
.cmpkeys { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; font-size: 12.5px; }
.cmpkeys span { display: inline-flex; align-items: center; gap: 6px; }
.cmpkeys i { width: 11px; height: 11px; border-radius: 3px; background: var(--slot); }

/* ---- face « Arbitrage » ---- */
.cmpplot { min-width: 0; }
.cmpscatter { width: 100%; height: auto; display: block; overflow: visible; }
.cmpscatter .g { stroke: var(--border); stroke-width: 1; }
.cmpscatter .ax { fill: var(--muted); font-size: 10px; text-anchor: middle; font-family: inherit; }
.cmpscatter .ax.r { text-anchor: end; }
.cmpscatter .ax.lab { text-anchor: start; font-size: 11px; }
.cmpscatter .ghost { cursor: help; }
.cmpscatter .ghost .gdot { fill: var(--muted); opacity: .26; transition: opacity .12s; }
.cmpscatter .ghost .ghit { fill: transparent; }
.cmpscatter .ghost .glbl {
  display: none; fill: var(--text); font-size: 11.5px; font-family: inherit;
  font-weight: 600; text-anchor: start; pointer-events: none;
}
.cmpscatter .ghost .glbl.l { text-anchor: end; }
.cmpscatter .ghost:hover .gdot { opacity: 1; }
.cmpscatter .ghost:hover .glbl { display: block; }
.cmpscatter .front { fill: none; stroke: var(--good); stroke-width: 2; stroke-dasharray: 5 4; }
.cmpscatter .dot circle { fill: var(--slot); fill-opacity: .22; stroke: var(--slot); stroke-width: 2; }
.cmpscatter .dot text { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: start; font-family: inherit; }
.cmpscatter .dot text.l { text-anchor: end; }
.cmpscatter .dot:hover circle { fill-opacity: .42; }

.cmpprio { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cmpprio label { font-size: 13px; color: var(--muted); }
.cmpprio label b { color: var(--text); }
.cmpprio input[type=range] { width: 100%; max-width: 420px; display: block; margin: 6px 0 2px; accent-color: var(--accent); }
.cmphint { margin: 0 0 10px; font-size: 11.5px; color: var(--muted); }
.cmppodium { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cmppodium li {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px 5px 8px;
  font-variant-numeric: tabular-nums;
}
.cmppodium li i { width: 9px; height: 9px; border-radius: 3px; background: var(--slot); }
.cmppodium li b { color: var(--muted); font-weight: 600; }
.cmppodium li:first-child { border-color: var(--accent); }

/* ---- écran étroit ---- */
@media (max-width: 760px) {
  .cmpmodal { padding: 0; }
  .cmpsheet { border-radius: 0; border: 0; }
  .cmphead h2 { font-size: 15px; }
  .cmpsub { display: none; }
  .cmpfaces { margin-left: 0; order: 3; width: 100%; justify-content: space-between; }
  /* La gouttière de gauche se fige, les colonnes défilent : deux colonnes et
     demie visibles valent mieux que sept illisibles. */
  .cmpbody { padding: 10px; }
  .cmpgrid { grid-template-columns: 78px repeat(var(--n), minmax(84px, 1fr)); }
  .cmptable { grid-template-columns: 132px repeat(var(--n), minmax(86px, 1fr)); }
  .cmpgut, .cmplb { position: sticky; left: 0; background: var(--panel); z-index: 2; }
  .cmpduel { grid-template-columns: 1fr 104px 1fr; }
  .cmpduel > div { padding: 6px 6px; font-size: 12.5px; }
}

/* --- Envies : bouton, modale, éditeur --- */
.gear {
  border: 0; background: var(--accent); color: white; cursor: pointer;
  font-size: 18px; line-height: 1; width: 26px; height: 26px;
  border-radius: 50%; margin-left: 8px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
}
.gear:hover { background: var(--text); transform: rotate(45deg); }

.modal { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-card {
  position: relative; background: var(--panel); color: var(--text);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: min(720px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
}
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-close { background: transparent; border: 0; font-size: 24px;
  color: var(--muted); cursor: pointer; line-height: 1; }
.modal-body { padding: 14px 18px; overflow: auto; }

.envies-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.envie-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel);
}
.envie-row.builtin { border-left: 4px solid var(--weak); }
.envie-row.custom  { border-left: 4px solid var(--accent); }
.envie-row .envie-title { font-weight: 600; }
.envie-row .envie-hint { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.envie-badge { display: inline-block; font-size: 11px; padding: 1px 6px;
  border-radius: 999px; margin-left: 6px; vertical-align: middle;
  background: var(--border); color: var(--muted); }
.envie-badge.custom { background: var(--accent); color: white; }
.envie-actions { display: flex; gap: 4px; }
.envie-actions button { border: 1px solid var(--border); background: transparent;
  color: var(--text); padding: 4px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; }
.envie-actions button:hover { border-color: var(--accent); color: var(--accent); }
.envie-actions button:disabled { opacity: .4; cursor: not-allowed; }
.envie-actions button.danger:hover { border-color: var(--hot); color: var(--hot); }

.envies-actions { display: flex; align-items: center; gap: 12px;
  padding-top: 8px; border-top: 1px solid var(--border); }
.btn-primary { background: var(--accent); color: white; border: 0; padding: 8px 14px;
  border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; }

.envie-editor .editor-head { display: grid; gap: 12px; margin-bottom: 12px; }
.criteria { display: flex; flex-direction: column; gap: 10px; }
.crit {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.crit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.crit-head .crit-label { font-weight: 600; }
.crit-head .crit-unit  { color: var(--muted); font-size: 12px; }
.crit-roles { display: flex; gap: 4px; }
.crit-roles label {
  border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px;
  font-size: 12px; cursor: pointer;
}
.crit-roles input { position: absolute; opacity: 0; pointer-events: none; }
.crit-roles input:checked + span { background: var(--accent); color: white;
  border-color: var(--accent); border-radius: 999px; padding: 3px 8px; margin: -3px -8px; }
.crit-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; align-items: end; }
.crit-body.disabled { opacity: .4; pointer-events: none; }
.crit-body label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.crit-body input[type=number] { width: 100%; padding: 4px 6px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg); color: var(--text); font-size: 13px; }

.editor-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 10px; border-top: 1px solid var(--border); }

/* Distinction visuelle dans le sélecteur d'envie */
#preset option[data-custom="1"] { color: var(--accent); font-weight: 600; }

.soft-slider .soft-label { color: var(--accent); font-weight: 600; margin-left: 4px; }
.soft-slider input[type=range] { width: 100%; margin-top: 2px; }

#preset.preset-custom { color: var(--accent); font-weight: 600; }
.envie-row.custom .envie-title { color: var(--accent); }

.crit-hint { color: var(--muted); font-size: 12px; margin-top: -2px; }

/* Bi-slider (min/max sur un rail commun) */
.dual-range { position: relative; grid-column: 1 / -1; padding: 6px 4px 22px; }
.dual-range .dr-label { display: inline-block; font-size: 12px; color: var(--muted); }
.dual-range .dr-label b { color: var(--text); font-weight: 600; }
.dual-range .dr-label.right { float: right; }
.dual-range .dr-rail {
  position: relative; height: 26px; margin-top: 8px;
  background: transparent;
}
.dual-range .dr-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 4px; border-radius: 2px;
  background: var(--border);
}
.dual-range .dr-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--accent); border-radius: 2px;
}
.dual-range input[type=range] {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 26px;
  background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none;
  margin: 0;
}
.dual-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.dual-range input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent); cursor: pointer;
}
.dual-range input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.dual-range input[type=range]::-moz-range-track { background: transparent; }
.crit-body.disabled .dual-range .dr-fill { background: var(--weak); }
.crit-body.disabled .dual-range input[type=range]::-webkit-slider-thumb { border-color: var(--weak); }

/* Aperçu de la journée idéale */
.preview {
  margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border);
  border-radius: 8px; background: var(--bg);
}
.preview h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.preview .prev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.preview .prev-row { display: flex; justify-content: space-between; font-size: 13px; }
.preview .prev-row .lbl { color: var(--muted); }
.preview .prev-row.confort .lbl::after { content: " (confort)"; font-size: 11px; }
.preview .prev-row.off { opacity: .5; }

.envies-io { display: flex; gap: 8px; margin-left: auto; }
.envies-io input[type=file] { display: none; }