/* map-core.css — Paris. Styles du tiroir de carte + bouton pin (.w-map).
   Partagé par index.html (résultats) et mis-vinos.html. Extrait le
   2026-05-29. Utilise les variables --gold, --border2, etc. du :root. */

  /* Bouton "Voir sur la carte" — toujours présent dans chaque ligne,
     même style que .w-call (DM Mono, doré au survol). */
  .w-map {
    background: transparent; border: 1px solid var(--border2);
    color: var(--text3); cursor: pointer; padding: 5px 7px;
    font-size: 14px; line-height: 1; border-radius: 3px;
    transition: all 0.2s var(--ease); margin-left: 6px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .w-map svg { width: 14px; height: 14px; }

  @media (hover: hover) {
    .w-map:hover {
      border-color: var(--gold); color: var(--gold); background: var(--bg3);
    }
  }

  /* --- Tiroir latéral de la carte --- */
  .map-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%;
    background: #0e0e0e;
    border-left: 1px solid #2a2a2a;
    box-shadow: -16px 0 40px rgba(0,0,0,0.55);
    z-index: 120;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s var(--ease), width 0.28s var(--ease);
    will-change: transform, width;
  }
  .map-drawer.open { transform: translateX(0); }
  .map-drawer.hidden { display: none; }

  .map-drawer-head {
    flex: 0 0 auto;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #1f1f1f;
  }
  .map-drawer-title-wrap { flex: 1; min-width: 0; }
  .map-drawer-title {
    font-family: 'Cormorant', serif; font-style: italic;
    font-size: 22px; font-weight: 400; line-height: 1.2;
    color: var(--gold2);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .map-drawer-meta {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text3); margin-top: 6px;
  }
  .map-drawer-close {
    background: transparent; border: 1px solid var(--border2);
    color: var(--text2); cursor: pointer;
    width: 32px; height: 32px; border-radius: 3px;
    font-size: 18px; line-height: 1;
    transition: all 0.2s var(--ease);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }

  .map-drawer-map {
    flex: 0 0 60%;
    position: relative;
    background: #e8e1d2;
    overflow: hidden;
  }
  .map-drawer-map .leaflet-container {
    width: 100%; height: 100%;
    background: #e8e1d2;
  }
  .map-pin {
    width: 18px; height: 18px;
    background: var(--gold);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(184,145,58,0.25), 0 2px 6px rgba(0,0,0,0.7);
  }
  /* Popups (cave + parcelle) dans le même langage crème/serif que les
     étiquettes de sous-région. Limité à .map-drawer-map. */
  .map-drawer-map .leaflet-popup-content-wrapper {
    background: #fdf8ef; color: #4a3621;
    border: 1px solid rgba(74,54,33,0.25); border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }
  .map-drawer-map .leaflet-popup-tip {
    background: #fdf8ef; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .map-drawer-map .leaflet-popup-content {
    margin: 9px 13px; font-size: 12px; line-height: 1.55;
  }
  .map-drawer-map .leaflet-popup-content strong {
    font-family: 'Cormorant', serif; font-style: italic;
    font-size: 17px; font-weight: 600; color: #4a3621;
    display: block; margin-bottom: 2px;
  }
  .map-drawer-map .leaflet-popup-content span {
    font-family: 'DM Mono', monospace; font-size: 11px;
    color: rgba(74,54,33,0.68);
  }
  .map-drawer-map .leaflet-popup-close-button { color: #a8997f; }
  .map-drawer-map .leaflet-popup-close-button:hover { color: #4a3621; }

  .map-drawer-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(232, 225, 210, 0.85);
    z-index: 5;
    transition: opacity 0.2s var(--ease);
  }
  .map-drawer-spinner.hidden { display: none; }
  .map-drawer-spinner::before {
    content: '';
    width: 36px; height: 36px;
    border: 2px solid rgba(184,145,58,0.18);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: map-spin 0.9s linear infinite;
  }
  @keyframes map-spin { to { transform: rotate(360deg); } }

  .map-drawer-foot {
    flex: 1 1 auto;
    padding: 18px 18px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
  }
  .map-drawer-row {
    display: flex; flex-direction: column; gap: 4px;
  }
  .map-drawer-label {
    font-family: 'DM Mono', monospace; font-size: 9px;
    letter-spacing: 0.32em; text-transform: uppercase; color: var(--text3);
  }
  .map-drawer-value {
    font-family: 'DM Mono', monospace; font-size: 12px;
    color: var(--text); line-height: 1.5;
  }
  .map-drawer-value.empty { color: var(--text3); font-style: italic; }
  .map-drawer-row.hidden { display: none; }
  .parcel-warn {
    font-size: 10px; color: #a07a2a; font-style: italic;
    display: inline-block; margin-top: 2px;
  }

  /* Étiquettes permanentes de sous-région (style manuel WSET).
     Pastille crème solide avec bordure subtile pour se distinguer
     clairement des noms de ville des tiles. */
  /* Étiquette CACHÉE par défaut (opacity 0). Le JS révèle avec .label-show
     uniquement celles qui ne se chevauchent pas ; à l'échelle d'un pays,
     aucune. Si le JS échoue/tarde, la carte reste PROPRE au lieu d'empilée.
     ⚠️ Les deux règles d'opacity portent !important VOLONTAIREMENT : Leaflet
     applique à chaque tooltip permanent un style INLINE `opacity: 0.9`
     (L.Tooltip.options.opacity, posé dans onAdd → setOpacity). Un style inline
     l'emporte sur une règle de classe normale ; sans !important, ce
     `opacity: 0` et le `.label-show {opacity:.95}` étaient ANNULÉS par le 0.9
     inline → toutes les étiquettes restaient visibles et empilées et le
     toggle de .label-show n'avait aucun effet. Le !important de la feuille de
     style l'emporte bien sur l'inline. (opacity 0 ne retire pas le layout,
     donc _declutterLabels peut encore mesurer via getBoundingClientRect.) */
  .leaflet-tooltip.sub-region-label {
    background: #fdf8ef; border: 1px solid rgba(74,54,33,0.25);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border-radius: 4px; padding: 2px 7px; pointer-events: none;
    font-family: 'Cormorant', serif; font-style: italic;
    font-size: 14px; font-weight: 600; color: #4a3621;
    white-space: nowrap; opacity: 0 !important; transition: opacity 0.15s ease;
  }
  .leaflet-tooltip.sub-region-label::before { display: none; }
  .leaflet-tooltip.sub-region-label.label-show { opacity: 0.95 !important; }

  /* Zone de signalement d'emplacement incorrect */
  .map-report-zone {
    padding: 10px 18px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .map-report-link {
    background: none; border: none; padding: 0; margin: 0;
    font-family: 'DM Mono', monospace; font-size: 10px;
    color: var(--text3); cursor: pointer; text-decoration: underline dotted;
    letter-spacing: 0.02em;
    transition: color 0.15s;
  }
  .map-report-link:hover { color: var(--text2); }
  .map-report-form {
    display: none; margin-top: 10px; flex-direction: column; gap: 8px;
  }
  .map-report-form.open { display: flex; }
  .map-report-textarea {
    width: 100%; box-sizing: border-box;
    font-family: 'DM Mono', monospace; font-size: 11px;
    color: var(--text); background: var(--bg2);
    border: 1px solid var(--border2); border-radius: 4px;
    padding: 7px 9px; resize: vertical; min-height: 52px;
    line-height: 1.5;
  }
  .map-report-textarea:focus {
    outline: none; border-color: var(--gold);
  }
  .map-report-actions {
    display: flex; gap: 8px; align-items: center;
  }
  .map-report-send {
    font-family: 'DM Mono', monospace; font-size: 10px;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--gold); color: #fff; border: none;
    border-radius: 3px; padding: 5px 12px; cursor: pointer;
    transition: opacity 0.15s;
  }
  .map-report-send:hover { opacity: 0.85; }
  .map-report-cancel {
    background: none; border: none; padding: 0;
    font-family: 'DM Mono', monospace; font-size: 10px;
    color: var(--text3); cursor: pointer; text-decoration: underline dotted;
  }
  .map-report-done {
    font-family: 'DM Mono', monospace; font-size: 10px;
    color: var(--text2); display: none;
  }
  .map-report-done.visible { display: block; }

  .map-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 119;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
  }
  .map-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .map-drawer-backdrop.hidden { display: none; }

  @media (min-width: 720px) {
    .map-drawer { width: 420px; }
    /* Mode étendu (toggle utilisateur persistant dans localStorage).
       En desktop : 70 % du viewport plafonné à 980 px. Sur mobile le
       drawer fait déjà 100 %, la règle ne s'applique pas < 720 px. */
    .map-drawer.expanded { width: min(70vw, 980px); }
  }
  /* Bouton étendre/réduire. Même style de base que .map-drawer-close. */
  .map-drawer-expand {
    background: transparent; border: 1px solid var(--border2);
    color: var(--text2); cursor: pointer;
    width: 32px; height: 32px; border-radius: 3px;
    font-size: 16px; line-height: 1;
    transition: all 0.2s var(--ease);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  @media (max-width: 719px) {
    .map-drawer-expand { display: none; }
  }
  @media (hover: hover) {
    .map-drawer-close:hover { border-color: var(--gold); color: var(--gold2); }
    .map-drawer-expand:hover { border-color: var(--gold); color: var(--gold2); }
  }