/* ==========================================================================
   « au musée » — le lieu (#lieu, #lieu-<adresse>), theme/musee-lieu.js.
   Le monde de « des villes » (style.css, section « des villes ») : le noir
   franc de l'écran hors ligne de Plans, le ciel étoilé, le globe ivoire au
   graticule gris, le point bleu d'iOS, les capsules de verre. Le jour et la
   nuit suivent ceux de « des tableaux » (html[data-nuit]) : la nuit, le globe
   passe à l'ardoise, au graticule vert d'eau et au limbe bleu, comme celui de
   « des villes » quand la ville est dans la nuit.
   La vue couvre tout l'écran : on sort du musée pour regarder le monde.
   ========================================================================== */

html.musee-lieu-ouvert,
html.musee-lieu-ouvert body { overflow: hidden; }

.lieu {
    --bleu-ios: #0a84ff;
    --verre: rgba(40, 40, 44, .8);      /* plus couvrant que « des villes » : le ciel passe derrière */
    --verre-survol: rgba(58, 58, 62, .72);
    --filet-verre: rgba(255, 255, 255, .16);
    --discret: rgba(255, 255, 255, .58);
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #000;
    color: #f2f2f7;
    /* Comme « des villes » : la police de l'interface, pas la Times. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.lieu a,
.lieu a:visited { color: var(--bleu-ios); text-decoration: none; }
.lieu a:hover { text-decoration: underline; }
.lieu :focus-visible { outline: 2px solid var(--bleu-ios); outline-offset: 2px; }
.lieu button { font: inherit; color: inherit; }

/* Le ciel : une nappe fixe derrière tout, semée par le script. */
.lieu-ciel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.lieu-ciel circle { fill: #fff; }
.lieu-haut, .lieu-scene, .lieu-bas { position: relative; z-index: 1; }

/* --- Le haut : les retours, en capsules de verre --- */
.lieu-haut {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem .6rem;
}
.lieu-retours { display: flex; flex-wrap: wrap; gap: .5rem; }
.lieu-entete {
    margin: 0;
    font-family: var(--serif, "Times New Roman", Times, serif);
    font-size: 1rem;
    color: rgba(255, 255, 255, .55);
}
.lieu-capsule-lien,
.lieu-capsule-lien:visited {
    display: inline-flex;
    align-items: center;
    padding: .5rem .95rem .5rem .8rem;
    border-radius: 999px;
    border: .5px solid var(--filet-verre);
    background: var(--verre);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff !important;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
}
.lieu-capsule-lien:hover { background: var(--verre-survol); text-decoration: none !important; }

/* --- La scène : le globe et sa capsule --- */
.lieu-scene {
    max-width: 74rem;
    margin: 0 auto;
    padding: 0 1.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    gap: 2.5rem;
    align-items: center;
}
.lieu-globe-zone { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lieu-globe {
    display: block;
    width: min(86vw, 34rem, 64vh);
    min-width: 16rem;
    height: auto;
    cursor: grab;
    touch-action: none;           /* le doigt fait tourner le globe, pas la page */
    -webkit-user-select: none;
    user-select: none;
}
.lieu-globe.est-pris { cursor: grabbing; }

/* Le globe de jour : l'ivoire de Plans. */
.lieu-face { fill: #f4f1ea; }
.lieu-grille { fill: none; stroke: rgba(96, 105, 120, .45); stroke-width: .8; }
.lieu-terre {
    fill: none;
    stroke: rgba(84, 92, 108, .42);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.lieu-lueur, .lieu-limbe, .lieu-calottes { opacity: 0; }
.lieu-bord { fill: none; stroke: #6fb0ff; stroke-width: 1.1; opacity: 0; }
.lieu-calotte { fill: rgba(92, 106, 178, .55); stroke: none; }

/* Paris, d'où l'on part. */
.lieu-ici circle { fill: #f4f1ea; stroke: #1c1c1e; stroke-width: 1.4; }
.lieu-ici text {
    font-family: var(--serif, "Times New Roman", Times, serif);
    font-style: italic;
    font-size: 10px;
    fill: #1c1c1e;
    paint-order: stroke;
    stroke: #f4f1ea;
    stroke-width: 2.4px;
    stroke-linejoin: round;
}
.lieu-route {
    fill: none;
    stroke: var(--bleu-ios);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: .1 3.6;      /* une route en pointillé : la plus courte, pas un trajet */
}
.lieu-point { fill: var(--bleu-ios); stroke: #fff; stroke-width: 1.3; }

/* Le point bleu de « des villes », sur le musée choisi. */
.lieu-marqueur.cache { display: none; }
.lieu-marqueur { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); pointer-events: none; }
.lieu-marqueur-halo { fill: #fff; }
.lieu-marqueur-point { fill: var(--bleu-ios); }
.lieu-marqueur-cone { fill: url(#lieu-faisceau); }

/* La nuit de « des tableaux » : le globe de nuit de « des villes ». */
html[data-nuit] .lieu-face { fill: #2b2e34; }
html[data-nuit] .lieu-grille { stroke: rgba(124, 168, 152, .40); }
html[data-nuit] .lieu-terre { stroke: rgba(150, 190, 172, .5); }
html[data-nuit] .lieu-lueur,
html[data-nuit] .lieu-limbe,
html[data-nuit] .lieu-calottes,
html[data-nuit] .lieu-bord { opacity: 1; }
html[data-nuit] .lieu-halo { opacity: 0; }
html[data-nuit] .lieu-ici circle { fill: #2b2e34; stroke: #fff; }
html[data-nuit] .lieu-ici text { fill: #fff; stroke: #2b2e34; }

.lieu-etat {
    margin: 1rem 0 0;
    min-height: 1.3em;
    font-size: .95rem;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .6);
    text-align: center;
}

/* ← plus près · plus loin → : une capsule de verre à deux boutons. */
.lieu-commandes {
    display: inline-flex;
    margin: .9rem 0 0;
    border-radius: 999px;
    border: .5px solid var(--filet-verre);
    background: var(--verre);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    overflow: hidden;
}
.lieu-commandes button {
    padding: .62rem 1.15rem;
    border: none;
    background: none;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.lieu-commandes button + button { border-left: .5px solid var(--filet-verre); }
.lieu-commandes button:hover { background: rgba(255, 255, 255, .07); }
.lieu-commandes button:active { background: rgba(255, 255, 255, .12); }

/* --- La capsule du musée : le verre des fiches de Plans --- */
.lieu-capsule {
    padding: 1.35rem 1.45rem 1.2rem;
    border-radius: 22px;
    border: .5px solid var(--filet-verre);
    background: var(--verre);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    min-width: 0;
}
.lieu-rang { margin: 0 0 .35rem; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.lieu-nom {
    margin: 0 0 .3rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.lieu-ou { margin: 0 0 .7rem; font-size: .98rem; color: rgba(255, 255, 255, .75); }
.lieu-km { margin: 0; font-size: .95rem; color: var(--discret); font-variant-numeric: tabular-nums; }
.lieu-km strong { color: #fff; font-weight: 600; font-size: 1.05rem; }
.lieu-km span { font-size: .85rem; }
.lieu-sous-titre {
    margin: 1rem 0 .7rem;
    padding-top: .9rem;
    border-top: .5px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
}
.lieu-texte { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.lieu-texte-discret { font-size: .85rem; color: rgba(255, 255, 255, .52); }

/* Les œuvres du musée : des vignettes, chacune vers son approche. */
.lieu-oeuvres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: 1rem .8rem;
    align-items: end;
}
.lieu-oeuvres-seule { grid-template-columns: minmax(0, 9rem); margin: .2rem 0 .9rem; }
.lieu-oeuvre a,
.lieu-oeuvre a:visited { display: flex; flex-direction: column; color: #f2f2f7; text-decoration: none !important; }
.lieu-oeuvre-cadre {
    display: block;
    width: 100%;
    max-height: 9rem;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.lieu-oeuvre-cadre img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lieu-oeuvre-titre { margin-top: .5rem; font-size: .84rem; font-weight: 500; line-height: 1.25; }
.lieu-oeuvre-qui { margin-top: .12rem; font-size: .74rem; line-height: 1.25; color: rgba(255, 255, 255, .52); }
.lieu-oeuvre a:hover .lieu-oeuvre-titre { text-decoration: underline; }
.lieu-oeuvre.en-avant .lieu-oeuvre-cadre { outline: 2px solid var(--bleu-ios); outline-offset: 3px; }
.lieu-oeuvre-mention { order: 1; margin-top: .55rem; font-size: .72rem; font-weight: 500; color: var(--bleu-ios); }
.lieu-oeuvre-titre { order: 2; }
.lieu-oeuvre-qui { order: 3; }

.lieu-pres { margin: 1rem 0 0; font-size: .85rem; color: var(--discret); }
.lieu-lien {
    padding: 0;
    border: none;
    background: none;
    color: var(--bleu-ios) !important;
    cursor: pointer;
    text-align: left;
}
.lieu-lien:hover { text-decoration: underline; }
.lieu-sources {
    margin: 1rem 0 0;
    padding-top: .8rem;
    border-top: .5px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    color: var(--discret);
}
.lieu-capsule-bouton {
    display: inline-flex;
    align-items: center;
    margin: .3rem 0 0;
    padding: .62rem 1.15rem;
    border-radius: 999px;
    border: .5px solid var(--filet-verre);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
}
.lieu-capsule-bouton:hover { background: rgba(255, 255, 255, .14); }

/* --- Le bas : la liste des musées, et ce que le globe ne montre pas --- */
.lieu-bas {
    max-width: 74rem;
    margin: 3rem auto 0;
    padding: 0 1.2rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.lieu-titre-liste { margin: 0 0 .6rem; font-size: 1rem; font-weight: 600; }
.lieu-liste { list-style: none; margin: 0; padding: 0; }
.lieu-liste li { border-top: .5px solid rgba(255, 255, 255, .12); }
.lieu-liste li:last-child { border-bottom: .5px solid rgba(255, 255, 255, .12); }
.lieu-liste button {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    column-gap: .8rem;
    width: 100%;
    padding: .62rem .3rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}
.lieu-liste button:hover { background: rgba(255, 255, 255, .05); }
.lieu-liste-km {
    grid-row: span 2;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    color: var(--discret);
    padding-top: .08rem;
}
.lieu-liste-nom { font-size: .98rem; font-weight: 500; }
.lieu-liste-ou { font-size: .8rem; color: rgba(255, 255, 255, .5); }
.lieu-liste [aria-current] .lieu-liste-nom,
.lieu-liste [aria-current] .lieu-liste-km { color: var(--bleu-ios); }

.lieu-ailleurs {
    padding: 1rem 1.2rem;
    border-radius: 18px;
    border: .5px solid var(--filet-verre);
    background: var(--verre);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}
.lieu-ailleurs summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.lieu-ailleurs[open] summary { margin-bottom: .6rem; }
.lieu-ailleurs h3 {
    margin: 1.1rem 0 .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
}
.lieu-ailleurs ul { list-style: none; margin: 0; padding: 0; }
.lieu-ailleurs li a,
.lieu-ailleurs li a:visited {
    display: flex;
    flex-direction: column;
    padding: .32rem 0;
    color: #f2f2f7;
    text-decoration: none !important;
}
.lieu-ailleurs-titre { font-size: .9rem; }
.lieu-ailleurs li a:hover .lieu-ailleurs-titre { text-decoration: underline; }
.lieu-ailleurs-qui { font-size: .76rem; color: rgba(255, 255, 255, .5); }
.lieu-note { margin: 1rem 0 0; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .42); }

/* --- Téléphone et tablette : une colonne --- */
@media (max-width: 860px) {
    .lieu-scene { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .lieu-capsule { max-width: 34rem; width: 100%; justify-self: center; }
    .lieu-bas { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
}
@media (max-width: 600px) {
    .lieu-haut { grid-template-columns: 1fr; padding: .8rem .9rem .4rem; }
    .lieu-entete { display: none; }
    .lieu-capsule-lien, .lieu-capsule-lien:visited { padding: .42rem .75rem .42rem .65rem; font-size: .8rem; }
    .lieu-scene, .lieu-bas { padding-left: 1rem; padding-right: 1rem; }
    .lieu-globe { width: 86vw; min-width: 0; }
    .lieu-nom { font-size: 1.3rem; }
    .lieu-capsule { padding: 1.15rem 1.15rem 1rem; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lieu * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}