* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Thèmes (tuile « Préférences ») : couleurs de l'interface et de l'en-tête de chaque tuile.
   La carte et ses bulles gardent leurs propres couleurs. */
body {
  --text: #1f2933; --muted: #66707a; --panel: #f4f6f8; --card: #fff; --border: #d5dae0; --field: #b8c0c8;
  --hover: #eef1f4; --accent: #1565c0; --accent-hover: #0f4f99; --on: #e8f0fb;
  --t1: #1565c0; --t2: #2e7d32; --t3: #d35400; --t4: #6a1b9a; --t5: #455a64; --t6: #00796b; --t7: #c2185b; --t8: #5d4037; --t9: #827717; --tile-text: #fff; --tint: 6%;
}
body[data-theme="pastel"] {
  --t1: #cfe2fa; --t2: #d5efd0; --t3: #ffdfc2; --t4: #e9d8f6; --t5: #dde3e8; --t6: #cbeee8; --t7: #f8d3e4; --t8: #eadbd3; --t9: #eef0c8; --tile-text: #1f2933; --tint: 14%;
}
body[data-theme="sombre"] {
  --text: #e6e9ec; --muted: #9aa5b1; --panel: #14181d; --card: #20262d; --border: #38414b; --field: #4a5562;
  --hover: #2b333c; --accent: #4f9cf0; --accent-hover: #3b82d6; --on: #23395a;
  --t1: #1d5ba8; --t2: #2d6a31; --t3: #a8490f; --t4: #6b3a99; --t5: #3d4c57; --t6: #1d5f58; --t7: #8e1d4f; --t8: #5a3d33; --t9: #5d5a1a; --tile-text: #fff; --tint: 10%;
}
body[data-theme="sobre"] {
  --t1: #e3e7eb; --t2: #e3e7eb; --t3: #e3e7eb; --t4: #e3e7eb; --t5: #e3e7eb; --t6: #e3e7eb; --t7: #e3e7eb; --t8: #e3e7eb; --t9: #e3e7eb; --tile-text: #1f2933; --tint: 0%;
}
body { display: flex; font: 14px/1.4 system-ui, "Segoe UI", sans-serif; color: var(--text); background: var(--panel); }

#panel { width: 320px; flex: none; padding: 14px; overflow: hidden auto; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* Plein écran : choix faits dans le panneau (classes posées sur body à l'entrée). */
body.fs-nopanel #panel { display: none; }
body.fs-noprofile #profile { display: none; }
.map-legend { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: min(420px, 70%); padding: 8px 12px;
  background: rgba(255, 255, 255, 0.92); color: #1f2933; border-radius: 8px; box-shadow: 0 1px 4px #0004; font-size: 13px; }
.map-legend[hidden] { display: none; }
.map-legend p { margin: 0 0 2px; }
.map-legend .coords { color: #66707a; font-size: 12px; white-space: nowrap; }
.map-legend .hint { color: #66707a; }
.btn-fs { font-size: 15px; }
#map { flex: 1; min-height: 0; }
#profile { flex: none; height: 150px; display: flex; flex-direction: column; padding: 6px 10px 4px; background: var(--card); border-top: 1px solid var(--border); }
#profile[hidden] { display: none; }
#profileChart { flex: 1; min-height: 0; }

h1 { margin: 0 0 4px; font-size: 18px; }
label { font-weight: 600; display: block; }
.hint { margin: 0; font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 6px; align-items: center; }
form { display: flex; flex-direction: column; gap: 4px; }

input[type="text"], input[type="email"], input[type="number"], select, textarea {
  border: 1px solid var(--field); border-radius: 6px; font: inherit; background: var(--card); color: var(--text);
}
input[type="text"], input[type="email"] { flex: 1; min-width: 0; padding: 6px 8px; }
input[type="search"] { width: 100%; padding: 6px 8px; border: 1px solid var(--field); border-radius: 6px; font: inherit; background: var(--card); color: var(--text); }
input[type="number"] { width: 58px; padding: 3px 4px; }
select { padding: 3px 4px; }
textarea { width: 100%; padding: 5px 7px; font-size: 12px; resize: vertical; }
input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); }
#panel button { padding: 6px 10px; border: 1px solid var(--field); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
#panel button:hover:not(:disabled) { background: var(--hover); }
button:disabled { opacity: 0.5; cursor: default; }
#panel button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: 9px; }
#panel button.primary:hover:not(:disabled) { background: var(--accent-hover); }
#panel button#done.ok { background: #2e7d32; border-color: #2e7d32; color: #fff; font-weight: 600; }
#panel #pick.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.card { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.card[hidden] { display: none; }
.card p { margin: 0; }
.offer { border: 2px solid var(--accent); }
.wrap { flex-wrap: wrap; }
#panel .wrap button { font-size: 12px; }
.nav strong { flex: 1; text-align: center; }
#status { margin: 0; min-height: 1.4em; color: var(--text); }
#status.err { color: #e5484d; }
.grow { flex: 1; }

.check { font-weight: 400; display: flex; gap: 6px; align-items: center; }
#legend { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 3px; }
#legend i { display: inline-block; width: 26px; height: 5px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.sub { margin-left: 24px; }
.sub input[type="range"] { width: auto; flex: 1; }
.decor-legend { list-style: none; padding: 0; margin-top: -4px; display: grid; gap: 2px; font-size: 12px; }
.decor-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; opacity: 0.8; }
.poi-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 12px; }
.poi-prefs label { font-weight: 400; display: flex; gap: 4px; align-items: center; }
.seg .poi-kind { color: #66707a; font-size: 12px; margin: 0 0 6px; }
.seg a { color: #1565c0; }
.seg-help { display: flex; flex-direction: column; gap: 4px; margin: -2px 0 4px 24px; }
.tools { flex-wrap: wrap; }
#panel .tools button { font-size: 12px; }

/* Tuiles rétractables du menu, chacune de sa couleur. */
#tileStart { --tile: var(--t1); }
#tileOptions { --tile: var(--t2); }
#tileRoute { --tile: var(--t3); }
#tileMap { --tile: var(--t4); }
#tilePrefs { --tile: var(--t5); }
#tileStats { --tile: var(--t6); }
#tileWalks { --tile: var(--t7); }
#tileAccount { --tile: var(--t8); }
#tileHelp { --tile: var(--t9); }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 13px; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-weight: 600; text-align: right; }
.tile { background: color-mix(in srgb, var(--tile) var(--tint), var(--card)); border: 1px solid var(--tile); border-left-width: 5px; border-radius: 8px; overflow: hidden; }
.tile > summary { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; cursor: pointer; font-weight: 700;
  list-style: none; background: var(--tile); color: var(--tile-text); }
.tile > summary::-webkit-details-marker { display: none; }
.tile > summary::after { content: '▾'; transition: transform 0.15s; }
.tile:not([open]) > summary::after { transform: rotate(-90deg); }
.tile > summary:hover { filter: brightness(1.08); }
.tile-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.tile-body > * { flex-shrink: 0; }
.tile h3 { margin: 6px 0 0; font-size: 13px; color: var(--text); }

.favs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.favs li { display: flex; gap: 4px; }
#panel .favs .name { flex: 1; min-width: 0; text-align: left; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel .favs .del { padding: 4px 8px; font-size: 12px; }
#decorPrefs { display: grid; gap: 4px; margin: 6px 0; }
.decor { font-weight: 400; font-size: 12px; }
.decor i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.decor span { flex: 1; }
.decor select { font-size: 12px; }

/* Fiche d'un segment (bulle de la carte, toujours claire). */
.seg { color: #1f2933; }
.seg h2 { margin: 0 0 2px; font-size: 14px; }
.seg p { margin: 0 0 8px; color: #66707a; font-size: 12px; }
.seg button { padding: 6px 10px; border: 1px solid #b8c0c8; border-radius: 6px; background: #fff; color: #1f2933; font: inherit; cursor: pointer; }
.seg button:hover:not(:disabled) { background: #eef1f4; }
.seg .rules { display: grid; gap: 4px; }
.seg .rules button { text-align: left; font-size: 13px; border-left-width: 6px; }
.seg .rules button.on { font-weight: 700; background: #e8f0fb; }
.seg .count { margin-top: 8px; justify-content: space-between; font-size: 13px; }
.seg .count button { width: 30px; padding: 3px 0; }
.walk-card { padding: 6px 0; border-top: 1px solid #e3e7eb; }
.seg .walk-note { color: #1f2933; font-style: italic; }
.seg textarea { margin-top: 8px; background: #fff; color: #1f2933; border-color: #b8c0c8; }

.dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #0006; }
.dot.go { background: #0b8a3e; }
.dot.end { background: #111; }
.dot.hover { background: #f08c00; }

.chart { display: block; cursor: crosshair; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .area { fill: var(--accent); fill-opacity: 0.18; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.chart .cursor { stroke: #f08c00; stroke-width: 1; }
.chart text { font-size: 10px; fill: var(--muted); }

/* Le panneau défile au lieu de tasser ses éléments les uns sur les autres. */
#panel > * { flex-shrink: 0; }
#panel[inert] { opacity: 0.6; }
.btn3d { font-weight: 700; font-size: 12px; }
.btn3d.on, .btn-rot.on { background: #1565c0 !important; color: #fff; }
.btn-rot { font-size: 16px; }

@media (max-width: 700px) {
  body { flex-direction: column; }
  #panel { width: 100%; max-height: 45%; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Tuile « Compte » (account.js). */
#accountBody p { margin: 0; }
#accountBody .danger summary { cursor: pointer; font-size: 12px; color: var(--muted); }
#accountBody .danger[open] { display: flex; flex-direction: column; gap: 6px; }
#panel button.warn { background: #c62828; border-color: #c62828; color: #fff; }
.admin-list li { flex-wrap: wrap; align-items: center; font-size: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.admin-list .who { flex-basis: 100%; overflow-wrap: anywhere; font-weight: 600; }
.admin-list .grow { overflow-wrap: anywhere; }
.admin-list .meta { flex-basis: 100%; }
#accountBody form.row { flex-direction: row; }
#panel .admin-list button { padding: 2px 6px; font-size: 12px; }
.hint.err { color: #c62828; }
#panel a { color: var(--accent); }

/* Tuile « Aide ». */
.help .steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.help .help-main { font-weight: 600; }
.help-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }

/* Choix de la langue (src/i18n.js). */
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.langs { display: flex; gap: 4px; flex-shrink: 0; }
#panel .langs .flag { padding: 0; width: 26px; height: 18px; border-radius: 3px; overflow: hidden; opacity: 0.55; line-height: 0; }
#panel .langs .flag.sel { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
#panel .langs .flag:hover { opacity: 1; }
.langs svg { width: 100%; height: 100%; display: block; }

/* Bandeau « nouvelle version » (src/update.js), en haut de la carte. */
.update-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: min(560px, calc(100% - 120px));
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #1565c0; color: #fff;
  font-size: 13px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); }
.update-banner[hidden] { display: none; }
.update-banner button { flex-shrink: 0; padding: 4px 10px; border: 1px solid #fff; border-radius: 6px; background: transparent; color: #fff;
  font: inherit; cursor: pointer; }