:root {
  --back_header:   #0f3659;
  --main_background: #e1d6c8;
  --button_background: #8e5a0d;
  --background_2: #e1d0bb;
  --marron: #834c03;
  --bordeau: #6c253d;

  /* dérivées utiles */
  --text: #1a1a1a;
  --text-weak: #5e5e5e;
  --border: rgba(0,0,0,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --radius: 14px;
  --radius-sm: 10px;
  --focus: 2px solid rgba(15,54,89,.4);
}


/* =========================
   Modal
   ========================= */
#mr-modal {
  position: fixed; inset:0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000 60%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
#mr-modal.open { display:flex; opacity:1; pointer-events:auto; }
body.modal-open { overflow:hidden; }

#mr-dialog {
  width: min(900px, 95vw);
  max-height: 90vh; overflow:auto;
  background: linear-gradient(0deg, var(--background_2), var(--background_2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 8px;
  position: relative;
}

#mr-title {
  color: var(--back_header);
  font-weight: 800; letter-spacing:.2px; margin: 4px 0 12px 0;
}

#mr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  color: var(--back_header);
  font-size: 20px; /* un poil plus petit */
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);

  display: flex;
  align-items: center;
  justify-content: center; /* ← centre le “×” pile au milieu */
  padding: 0; /* enlève les marges internes */
}
#mr-close:hover { background: #f7f7f7; }

/* Bouton d’ouverture sur la page */
#open-mr {
  width: clamp(280px, 70%, 560px);
  font-size: clamp(14px, 1.6vw, 18px);
}

/* =========================
   Mondial Relay – Skin sans carte
   ========================= */

/* On s’assure que la carte n’apparaisse pas */
#mr-widget .MRW-Map { display:none !important; }

/* Conteneur résultats en plein largeur */
#mr-widget .MRW-Results { width: 100% !important; padding: 6px 0; }

/* Barre d’outils / recherche (quand présente) */
#mr-widget .MRW-Search, 
#mr-widget .MRW-Toolbar {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background: #fff; border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 10px;
}
#mr-widget .MRW-Search input[type="text"],
#mr-widget .MRW-Search input[type="search"] {
  flex:1 1 220px; min-width: 160px;
  background: #fff; border:1px solid var(--border); border-radius: 10px;
  padding:10px 12px; outline:none;
}
#mr-widget .MRW-Search input[type="text"]:focus,
#mr-widget .MRW-Search input[type="search"]:focus {
  border-color: var(--back_header);
  box-shadow: 0 0 0 3px rgba(15,54,89,.12);
}
#mr-widget .MRW-Search button {
  background: var(--back_header);
  box-shadow: 0 6px 20px rgba(15,54,89,.18);
}

/* Items (cartes) */
#mr-widget .MRW-Item {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 12px; border-bottom: 1px solid var(--border);
  background: #fff; border-radius: 0; position: relative;
}
#mr-widget .MRW-Item:hover { background: color-mix(in srgb, #fff 85%, var(--main_background) 15%); }
#mr-widget .MRW-Item:focus-within { outline: 2px solid rgba(15,54,89,.18); outline-offset: -2px; }

/* Colonne contenu */
#mr-widget .MRW-Item .MRW-line { display:flex; align-items:center; gap:8px; }
#mr-widget .MRW-Name {
  font-weight: 700; color: var(--bordeau); /* nom du relais */
}
#mr-widget .MRW-Address,
#mr-widget .MRW-ZipCity,
#mr-widget .MRW-Distance,
#mr-widget .MRW-Hours {
  color: var(--text-weak); font-size:.95rem;
}

/* Badges (si présents) */
#mr-widget .MRW-Badge, #mr-widget .MRW-Tag {
  display:inline-block; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--bordeau) 10%, #fff 90%);
  color: var(--bordeau); font-weight: 600; font-size: .78rem;
}

/* Colonne action */
#mr-widget .MRW-Select, /* bouton choisir (selon thème) */
#mr-widget .MRW-Item button {
  align-self: center;
  background: var(--button_background); color:#fff;
  border-radius: 10px; padding: 10px 14px; font-weight:700;
  box-shadow: 0 6px 20px rgba(142,90,13,.22);
}
#mr-widget .MRW-Select:hover,
#mr-widget .MRW-Item button:hover { filter: brightness(1.05); }

/* État sélectionné (quand tu ré-injectes le résumé, ou si le widget expose une classe active) */
#mr-widget .MRW-Item.is-selected {
  background: color-mix(in srgb, var(--background_2) 75%, #fff 25%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bordeau) 40%, transparent);
}

/* Pagination (si présente) */
#mr-widget .MRW-Pagination {
  display:flex; justify-content:center; gap:8px; padding: 10px 0 4px;
}
#mr-widget .MRW-Pagination button {
  background: #fff; color: var(--back_header);
  border:1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}
#mr-widget .MRW-Pagination button:hover { background: color-mix(in srgb, #fff 85%, var(--main_background) 15%); }

/* Scrollbar esthétique (WebKit) */
#mr-dialog ::-webkit-scrollbar       { height:12px; width:12px; }
#mr-dialog ::-webkit-scrollbar-track { background: color-mix(in srgb, #fff 50%, var(--main_background) 50%); border-radius: 10px; }
#mr-dialog ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--back_header) 40%, #000 0%); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* Accessibilité & motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}