/* ══════════════════════════════════════════════
   CARTE D'ÉGYPTE — fond réel (Leaflet) + fiches
   ══════════════════════════════════════════════ */

.s-carte{
  background:#0a0908;
  color:var(--calcaire);
  padding:clamp(40px, 6vh, 72px) 0 clamp(56px, 8vh, 96px);
  overflow:hidden;
}

.carte-intro{
  padding-inline:var(--pad-x);
  max-width:52rem;
  margin-bottom:clamp(28px, 4vh, 44px);
}
.carte-intro .sec-titre{ color:var(--calcaire); }
.carte-intro p{ margin-top:1em; max-width:52ch; opacity:.88; line-height:1.6; }

.carte-barre{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding-inline:var(--pad-x);
  margin-bottom:1.2rem;
}
.carte-legende{
  display:flex; flex-wrap:wrap; gap:1.2rem 1.8rem;
  font-size:.82rem; letter-spacing:.04em; opacity:.9;
}
.carte-legende span{ display:inline-flex; align-items:center; gap:.5em; }
.carte-legende .pt{
  width:.7em; height:.7em; border-radius:50%; display:inline-block;
}
.carte-legende .pt.voyage{
  background:var(--ocre-clair);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ocre-clair) 28%, transparent);
}
.carte-legende .pt.hors{
  background:transparent;
  border:1.5px solid color-mix(in srgb, var(--calcaire) 45%, transparent);
}

.carte-fonds{
  margin-left:auto; display:flex; gap:.4rem;
  padding:.25rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--calcaire) 22%, transparent);
}
.carte-fonds button{
  border:none; background:transparent; color:var(--calcaire);
  font:inherit; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.45em .9em; border-radius:999px; cursor:pointer;
  transition:background .2s, color .2s;
}
.carte-fonds button[aria-pressed="true"]{
  background:var(--calcaire); color:var(--osiris);
}
.carte-fonds button:hover:not([aria-pressed="true"]){
  background:color-mix(in srgb, var(--calcaire) 12%, transparent);
}

/* ── Conteneur Leaflet ────────────────────────── */
.carte-leaflet{
  margin-inline:var(--pad-x);
  height:clamp(440px, 74vh, 780px);
  border-radius:1.4rem;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--calcaire) 12%, transparent);
  z-index:1; /* Leaflet crée des z-index internes */
}
.carte-leaflet .leaflet-container{
  width:100%; height:100%;
  background:#1a1510;
  font:inherit;
}
/* Empêche tout reset global de casser les dalles */
.carte-leaflet .leaflet-tile-pane img,
.carte-leaflet img.leaflet-tile{
  max-width:none !important;
  max-height:none !important;
  width:256px !important;
  height:256px !important;
}

/* Attribution discrète */
.carte-leaflet .leaflet-control-attribution{
  background:color-mix(in srgb, var(--osiris) 70%, transparent) !important;
  color:color-mix(in srgb, var(--calcaire) 55%, transparent);
  font-size:10px;
  border-radius:6px 0 0 0;
}
.carte-leaflet .leaflet-control-attribution a{ color:var(--ocre-clair); }

.carte-leaflet .leaflet-bar{
  border:none; box-shadow:none;
  border-radius:999px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--calcaire) 28%, transparent) !important;
}
.carte-leaflet .leaflet-bar a{
  background:color-mix(in srgb, var(--osiris) 80%, transparent) !important;
  color:var(--calcaire) !important;
  border-bottom-color:color-mix(in srgb, var(--calcaire) 18%, transparent) !important;
  width:34px; height:34px; line-height:34px;
  backdrop-filter:blur(6px);
}
.carte-leaflet .leaflet-bar a:hover{
  background:var(--calcaire) !important;
  color:var(--osiris) !important;
}

/* ── Marqueurs custom ─────────────────────────── */
.pin-voyage, .pin-hors{
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(-4px);
}
.pin-voyage .pin-dot{
  width:1.7rem; height:1.7rem; border-radius:50%;
  display:grid; place-items:center;
  font-size:.62rem; font-family:var(--f-body); font-weight:600;
  letter-spacing:.02em;
  background:var(--ocre); color:var(--calcaire);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ocre) 35%, transparent),
    0 4px 14px rgba(0,0,0,.45);
  border:2px solid color-mix(in srgb, var(--calcaire) 55%, transparent);
  transition:transform .2s, background .2s;
}
.pin-voyage:hover .pin-dot,
.pin-voyage:focus-visible .pin-dot{
  transform:scale(1.12);
  background:var(--ocre-clair); color:var(--osiris);
}
.pin-voyage .pin-nom{
  margin-top:.3rem; padding:.15em .45em;
  font-family:var(--f-display); font-size:.78rem;
  white-space:nowrap;
  color:var(--calcaire);
  background:color-mix(in srgb, var(--osiris) 72%, transparent);
  border-radius:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.pin-hors .pin-dot{
  width:1.05rem; height:1.05rem; border-radius:50%;
  background:color-mix(in srgb, var(--osiris) 40%, transparent);
  border:1.5px solid color-mix(in srgb, var(--calcaire) 55%, transparent);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.pin-hors .pin-nom{
  margin-top:.25rem; padding:.12em .4em;
  font-size:.68rem; font-style:italic; opacity:.85;
  white-space:nowrap; color:var(--calcaire);
  background:color-mix(in srgb, var(--osiris) 65%, transparent);
  border-radius:4px;
}

/* ── Dialogue / popup ─────────────────────────── */
.temple-dialog{
  border:none; padding:0;
  width:min(40rem, calc(100vw - 2rem));
  max-height:min(88vh, 52rem);
  border-radius:1.25rem;
  background:var(--calcaire);
  color:var(--encre);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  /* Centrage explicite — display:flex annule le centrage natif du <dialog> */
  position:fixed;
  inset:0;
  margin:auto;
  height:fit-content;
}
.temple-dialog::backdrop{
  background:color-mix(in srgb, var(--osiris) 72%, transparent);
  backdrop-filter:blur(4px);
}
.temple-dialog[open]{
  display:flex;
  flex-direction:column;
  overflow:hidden; /* le corps défile ; le bouton reste visible en bas */
}

.dialog-haut{
  position:relative; flex:0 0 auto;
  aspect-ratio:16/10; overflow:hidden;
  border-radius:1.25rem 1.25rem 0 0;
  background:var(--pierre-chaude);
}
.dialog-haut img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.dialog-haut::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--calcaire) 0%, transparent 42%);
}
.dialog-fermer{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  width:2.4rem; height:2.4rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--calcaire) 40%, transparent);
  background:color-mix(in srgb, var(--osiris) 45%, transparent);
  color:var(--calcaire); cursor:pointer;
  font-size:1.3rem; line-height:1;
  backdrop-filter:blur(6px);
}
.dialog-fermer:hover{ background:var(--osiris); }

.dialog-titre{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1rem; z-index:2;
}
.dialog-titre .rang{
  display:none;
}
.dialog-titre h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.7rem, 4vw, 2.4rem); line-height:1.05; margin:0;
}
.dialog-titre .verbe{
  display:block; margin-top:.45em;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.2rem, 2.4vw, 1.55rem);
  color:var(--ocre-clair);
  opacity:1;
}
.dialog-corps .station-quand{ display:none; }

/* Le texte défile ici ; le bouton reste en dessous, hors du flux de lecture */
.dialog-corps{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:1.4rem 1.5rem 1.2rem;
  -webkit-overflow-scrolling:touch;
}
.dialog-corps .registres{ margin-top:.4em; }
.dialog-corps .station-quand{
  margin-top:1.4em; font-size:.92rem; font-style:italic; opacity:.72;
}
.dialog-corps .philae-boucle{
  margin-top:1.4em; padding-left:1.1em;
  border-left:3px solid var(--ocre);
  font-family:var(--f-display); font-style:italic;
  font-size:1.08rem; line-height:1.5;
}
.dialog-bas{
  flex:0 0 auto;
  padding:1rem 1.5rem 1.35rem;
  border-top:1px solid color-mix(in srgb, var(--encre) 12%, transparent);
  background:var(--calcaire);
  display:flex; gap:.8rem; flex-wrap:wrap;
  border-radius:0 0 1.25rem 1.25rem;
}

/* Les cartes sous la carte réutilisent carrousel.css —
   on resserre juste le fond pour coller à la section. */
.s-carte .carrousel{
  background:transparent;
  padding:clamp(40px, 5vh, 64px) 0 0;
}
.s-carte .carrousel-tete{ margin-bottom:1.4rem; }