/* Integree dans la section « Bordeaux » de l'accueil : variables et polices limitees a la carte,
   position relative et hauteur propre au lieu du plein ecran fixe d'origine. */
.carte {
  --ink: #f2f1ee;
  --muted: rgba(242, 241, 238, .6);
  --bg: #1d1e22;
  position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 520px;
  background: var(--bg); color: var(--ink); font-family: "Jost", system-ui, sans-serif;
}
.carte * { box-sizing: border-box; }
.carte-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.carte-canvas:active { cursor: grabbing; }

/* Sans WebGL : plan statique */
.carte-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.carte.is-fallback .carte-fallback { opacity: 1; }
.carte.is-fallback .carte-canvas, .carte.is-fallback .carte-hint { display: none; }

/* Assombrissement des bords (comme la référence) + grain */
.carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 35% 45%, transparent 45%, rgba(20,20,20,.55) 100%),
    linear-gradient(90deg, transparent 55%, rgba(24,24,24,.45) 100%);
}
.carte-grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 3; opacity: .13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

.carte-top { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 14px 28px; pointer-events: none; }
.carte-logo { pointer-events: auto; width: 46px; height: 46px; color: var(--ink); display: grid; place-items: center; }
.carte-logo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.carte-title { position: absolute; right: 28px; top: 22px; font-size: 14px; font-weight: 500; letter-spacing: .01em; }

.carte-info { position: absolute; z-index: 4; left: 28px; bottom: 26px; pointer-events: none; }
.carte-info .carte-nom { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.carte-info p { margin: 6px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.carte-info .carte-credit { font-size: 10px; opacity: .8; pointer-events: auto; }
.carte-credit a { color: inherit; }
.carte-hint { position: absolute; z-index: 4; right: 28px; bottom: 26px; margin: 0; font-size: 11px; color: var(--muted); pointer-events: none; transition: opacity .8s; }
.carte-hint.is-hidden { opacity: 0; }

.carte-tip {
  position: absolute; z-index: 4; left: 0; top: 0; padding: 7px 11px; border-radius: 3px;
  background: rgba(18,18,18,.82); color: var(--ink); font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .2s;
}
.carte-tip.is-on { opacity: 1; }

.carte-loader { position: absolute; z-index: 5; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; background: var(--bg); transition: opacity 1s ease, visibility 1s; }
.carte-loader span { width: 160px; height: 1px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.carte-loader span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .3s; }
.carte-loader em { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.carte.is-ready .carte-loader { opacity: 0; visibility: hidden; }

@media (max-width: 767px) {
  .carte-top { padding: 10px 16px; }
  .carte-title { right: 16px; top: 18px; font-size: 13px; }
  .carte-info { left: 16px; bottom: 18px; }
  .carte-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .carte-grain { animation: none; } }

/* ---------- Ajouts Nihel's Skintech ---------- */
/* Noms des monuments historiques, poses au-dessus de chaque monument */
.carte-noms { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.carte-nom-monument {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); transform: translate(-50%, -100%); opacity: 0; transition: opacity .3s;
}
.carte-nom-monument::after { content: ""; display: block; width: 1px; height: 10px; margin: 3px auto 0; background: rgba(242, 241, 238, .55); }
.carte-nom-monument.is-on { opacity: .92; }

/* Le point du centre : une pastille photo avec une pointe */
.carte-pin {
  position: absolute; left: 0; top: 0; z-index: 6; padding: 3px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); transform: translate(-50%, calc(-100% - 12px));
}
.carte-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 0; transform: translateX(-50%);
  border: 6px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0;
}
.carte-pin img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.carte-pin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.carte-pin:hover, .carte-pin:focus-visible { transform: translate(-50%, calc(-100% - 12px)) scale(1.08); outline: none; }
.carte-pin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(242, 241, 238, .6); animation: carte-pouls 2.4s ease-out infinite; }
@keyframes carte-pouls { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }

/* La fiche du lieu */
.carte-fiche {
  position: absolute; z-index: 7; right: 24px; top: 50%; transform: translateY(-50%); width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 48px); overflow: auto; padding: 18px 18px 20px; border-radius: 6px;
  background: rgba(13, 14, 16, .94); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); color: var(--ink);
}
.carte-fiche[hidden] { display: none; }
.carte-fiche__fermer { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.carte-fiche__photos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; margin: 22px 0 14px; }
.carte-fiche__photos img { width: 100%; height: 150px; object-fit: cover; border-radius: 3px; display: block; }
.carte-fiche__surtitre { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #cfc7b8; }
.carte-fiche__titre { margin: 6px 0 0; font: 400 28px/1.1 "Cormorant", Georgia, serif; }
.carte-fiche__adresse { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.carte-fiche__texte { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: rgba(242, 241, 238, .85); }
.carte-fiche__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.carte-fiche__bouton { flex: 1; min-width: 120px; padding: 11px 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #0d0e10; text-align: center; text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.carte-fiche__bouton--fantome { background: transparent; color: var(--ink); }
.carte-fiche__bouton:focus-visible, .carte-fiche__fermer:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (max-width: 767px) {
  .carte-fiche { right: 12px; left: 12px; top: auto; bottom: 12px; transform: none; width: auto; }
  .carte-fiche__photos img { height: 120px; }
  .carte-nom-monument { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .carte-pin::before { animation: none; } }
/* Lien transparent pose sur l'immeuble du centre : cliquer = reserver */
.carte-lien-batiment { position: absolute; z-index: 5; display: none; cursor: pointer; border-radius: 2px; }
.carte-lien-batiment:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
/* La carte occupe toute la largeur de la section, bord a bord. */
.carte { width: 100%; max-width: 100%; margin: 0; border-radius: 0; height: 86vh; height: 86svh; }
/* 100vw comptait la barre de defilement sous Windows : la carte depassait a droite. */
/* La legende et le credit OpenStreetMap remontent au-dessus du bouton de musique (bas gauche). */
.carte-info { bottom: 72px; }
@media (max-width: 767px) { .carte-info { bottom: 66px; } }