/* Cadre de la carte : les données et les commandes restent celles du site. */
body .map-screen .map-area {
  isolation: isolate;
  width: 100%;
  height: clamp(560px, 67vh, 680px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #cfe5ed;
  border-radius: 28px;
  background: #edf8ff;
}
body .map-screen .map-area::before {
  z-index: 0;
  background: radial-gradient(ellipse at 50% 47%, #fff 0%, #ffffff00 64%);
}
body .map-screen #map { inset: 0; z-index: 1; background: transparent; }
body .map-screen .map-botanical,
body .map-screen .map-sun { z-index: 2; pointer-events: none; }
body .map-screen .map-botanical {
  width: clamp(112px, 12vw, 150px);
  left: 3%;
  bottom: 100px;
  transform-origin: 50% 100%;
}
body .map-screen .map-sun { width: 80px; height: 80px; right: 4%; top: 34px; }
body .map-screen .map-toolbar {
  z-index: 500;
  top: 24px;
  left: 20px;
  right: 20px;
  gap: 12px;
}
body .map-screen .search-box {
  width: min(100%, 560px);
  min-height: 56px;
  border: 1px solid #cfe2e4;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 20px #153e3510;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body .map-screen .search-box:focus-within {
  border-color: #79aa83;
  box-shadow: 0 4px 20px #153e3510, 0 0 0 3px #bce29170;
}
body .map-screen .search-box input { min-height: 54px; padding: 14px 12px; font-size: 16px; }
body .map-screen .search-box .icon-button { flex: none; min-width: 44px; min-height: 44px; }
body .map-screen .search-results { max-height: min(48vh, 330px); overflow: auto; }
body .map-screen .map-modes {
  max-width: 100%;
  padding: 4px;
  border: 1px solid #cfe2e4;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 3px 12px #153e3508;
}
body .map-screen .map-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 15px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #174c35;
  font-size: 13px;
  white-space: nowrap;
  transition: background-color .18s ease, box-shadow .18s ease;
}
body .map-screen .map-modes button[aria-pressed='true'] {
  background: #d4f478;
  color: #234c31;
  font-weight: 700;
  box-shadow: 0 2px 7px #69963b25;
}
body .map-screen .map-modes [data-map-mode='worksites'][aria-pressed='true'] { background: #e9dfff; color: #503481; }
body .map-screen .map-modes [data-map-mode='sponsors'][aria-pressed='true'] { background: #fff0ca; color: #68421d; }
body .map-screen .map-view-links { top: 153px; left: 20px; z-index: 450; }
body .map-screen .map-controls { top: 153px; right: 20px; z-index: 450; gap: 7px; }
body .map-screen .map-controls .icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d5e8e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 9px #153e3510;
}
body .map-screen .map-caption {
  z-index: 450;
  left: 20px;
  right: 20px;
  bottom: 64px;
  gap: 8px;
  color: #466b78;
  font-size: 11px;
}
body .map-screen .map-legend {
  z-index: 450;
  bottom: 20px;
  left: 20px;
  right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #d9e8e6;
  border-radius: 100px;
  background: #ffffffed;
  font-size: 11px;
}
body .map-screen .map-legend[hidden] { display: none; }
body .map-screen .map-legend span { display: inline-flex; align-items: center; gap: 5px; }
body .map-screen .map-legend i { width: 12px; height: 12px; border-radius: 3px; }
body .map-screen .map-list:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  left: auto;
  right: 20px;
  bottom: 20px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #d1e4e3;
  border-radius: 100px;
  background: #fff;
  font-size: 11px;
  box-shadow: 0 3px 12px #153e3508;
}
body .map-screen .commune-sheet {
  z-index: 700;
  top: 150px;
  right: 20px;
  left: auto;
  bottom: auto;
  width: min(360px, calc(100% - 40px));
  max-height: calc(100% - 235px);
  overflow: auto;
  border: 1px solid #dce8df;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 40px #153e3525;
}
body .map-screen .commune-sheet[hidden] { display: none; }
body .map-screen :is(button, a, input):focus-visible { outline: 3px solid #7654d9; outline-offset: 3px; }
@media (hover: hover) {
  body .map-screen .map-modes button:not([aria-pressed='true']):hover { background: #f2f8ed; }
  body .map-screen .map-controls button:hover,
  body .map-screen .map-view-links a:hover,
  body .map-screen .map-list:not([hidden]):hover { background: #f4fae9; }
}
@media (prefers-reduced-motion: no-preference) {
  body .map-screen .map-botanical { animation: map-botanical-breathe 7s ease-in-out infinite; }
  body .map-screen .map-sun { animation: map-sun-breathe 9s ease-in-out infinite; transform-origin: 50% 50%; }
  body .map-screen .commune-sheet:not([hidden]),
  body .map-screen .search-results:not([hidden]) { animation: map-panel-appear .24s ease-out both; }
  @keyframes map-botanical-breathe { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
  @keyframes map-sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
  @keyframes map-panel-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  body .map-screen .search-box, body .map-screen .map-modes button { transition: none; }
}
@media (max-width: 760px) {
  body .map-screen .map-area { width: 100%; height: min(620px, 83svh); min-height: 500px; margin: 0; border-radius: 20px; }
  body .map-screen .map-toolbar { top: 12px; left: 12px; right: 12px; gap: 8px; }
  body .map-screen .search-box { min-height: 52px; padding-left: 12px; }
  body .map-screen .search-box input { min-height: 50px; padding: 11px 8px; }
  body .map-screen .map-modes { width: 100%; max-width: 470px; border-radius: 18px; }
  body .map-screen .map-modes button { flex: 1; min-width: 0; min-height: 44px; padding: 7px 4px; gap: 4px; font-size: 11px; }
  body .map-screen .map-modes .ui-symbol { width: 16px; height: 16px; }
  body .map-screen .map-label-long { display: none; }
  body .map-screen .map-label-short { display: inline; }
  body .map-screen .map-view-links { top: 128px; left: 12px; }
  body .map-screen .map-view-links a { min-height: 44px; font-size: 11px; }
  body .map-screen .map-controls { top: 128px; right: 12px; gap: 5px; }
  body .map-screen .map-botanical { width: 65px; left: 12px; bottom: 140px; }
  body .map-screen .map-sun { top: auto; bottom: 155px; right: 15px; width: 43px; height: 43px; }
  body .map-screen .map-caption { bottom: 90px; left: 12px; right: 12px; font-size: 10px; }
  body .map-screen .map-caption > span { max-width: 60%; }
  body .map-screen .map-legend { bottom: 52px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 7px 9px; gap: 7px; font-size: 10px; }
  body .map-screen .map-list:not([hidden]) { right: 12px; bottom: 5px; min-height: 42px; font-size: 10px; }
  body .map-screen .commune-sheet { top: auto; bottom: 108px; left: 12px; right: 12px; width: auto; max-height: min(48%, 330px); padding: 15px; border-radius: 19px; }
  body .map-screen .commune-sheet::before { display: none; }
}
@media (max-width: 360px) {
  body .map-screen .map-modes button { font-size: 10px; gap: 2px; }
  body .map-screen .map-modes button svg { width: 14px; height: 14px; }
}
body.map-focused .map-screen .map-area { width: 100%; height: calc(100svh - 90px); min-height: 0; margin: 0; border-radius: 0; }
@media (max-width: 760px) {
  body.map-focused .map-screen .map-area { height: calc(100svh - 138px - env(safe-area-inset-bottom)); min-height: 400px; }
}