/* ==========================================================================
   « au musée » — le cœur (theme/musee.css, avec theme/musee.js) : le monde
   de « des tableaux » (fond gris grainé, PP Eiko et PP Neue Montreal, cartels
   à filets fins, la nuit à la lampe de banquier), l'en-tête et ses réglages,
   le plan de visite, les murs dépliés à l'échelle, la réserve.

   Les variables de « des tableaux » (--tb-fond, --tb-encre, --tb-eiko,
   --tb-sans, --tb-carte, --tb-filet, --tb-filet-fort, --tb-survol,
   --tb-entete) sont posées ici sur body.tpl-page-musee : les styles de
   l'approche et du lieu peuvent les employer. La couleur des murs choisie
   par le visiteur arrive en variables sur .musee (musee.js, peindre()) :
   --mur-jour (la peinture), --mur-nuit (la même à la lampe), --mur-halo (dans
   le halo autour d'une œuvre), --mur-encre (l'encre lisible sur le mur),
   --mur-trait (un filet sur le mur).
   ========================================================================== */

/* --- Le monde de « des tableaux » ------------------------------------------- */
body.tpl-page-musee {
    --tb-fond: #F2F2F2;
    --tb-encre: #000;
    --tb-eiko: "PP Eiko", "Times New Roman", serif;
    --tb-sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    --tb-carte: #fff;
    --tb-filet: rgba(0, 0, 0, .15);
    --tb-filet-fort: rgba(0, 0, 0, .25);
    --tb-survol: rgba(0, 0, 0, .05);
    --tb-entete: 3rem;
    --mu-papier: #FCFBF8;            /* le papier du dépliant */
    --mu-poche: #141414;             /* les murs pochés du plan */
    --mu-repere: #1500ff;            /* le parcours, « vous êtes ici » : le bleu des liens du site */
    --mu-baie: rgba(0, 0, 0, .075);
    --musee-trait: rgba(255, 255, 255, .3);
    margin: 0;
    background-color: var(--tb-fond);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color: var(--tb-encre);
    font-family: var(--tb-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.025em;
    -webkit-font-smoothing: antialiased;
}
html[data-nuit] body.tpl-page-musee {
    --tb-fond: #121110;
    --tb-encre: #EFEAE1;
    --tb-carte: #1E1B19;
    --tb-filet: rgba(255, 255, 255, .16);
    --tb-filet-fort: rgba(255, 255, 255, .32);
    --tb-survol: rgba(255, 255, 255, .08);
    --mu-papier: #1E1B19;
    --mu-poche: #D9D3C8;
    --mu-repere: #A39CFF;
    --mu-baie: rgba(0, 0, 0, .42);
    --musee-trait: rgba(0, 0, 0, .35);
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-nuit] body.tpl-page-musee ::selection { background: var(--tb-encre); color: var(--tb-fond); }
body.tpl-page-musee .wrap { max-width: none; margin: 0; padding: 0; }
body.tpl-page-musee a { color: inherit; }
.musee {
    --mur-jour: #f4f3ef;
    --mur-nuit: #1c1a17;
    --mur-halo: #7f776b;
    --mur-encre: #111111;
    --mur-trait: rgba(0, 0, 0, .3);
}
.musee sup { font-size: .6em; line-height: 0; }
.musee [hidden] { display: none !important; }

/* --- L'en-tête ------------------------------------------------------------------ */
.musee-entete {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    height: var(--tb-entete);
    padding: 0 1.1rem;
    background: var(--tb-fond);
    border-bottom: 1px solid var(--tb-filet);
    box-sizing: border-box;
}
.musee-retour, .musee-retour:visited {
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-decoration: none;
}
.musee-retour:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.musee-nom {
    margin: 0 0 0 -.6rem;
    font-family: var(--tb-eiko);
    font-style: italic;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.musee-nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex: 1;
    min-width: 0;
    font-size: .85rem;
}
.mn-lien, .mn-lien:visited {
    flex: none;
    padding: .35rem .5rem;
    font: inherit;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    opacity: .6;
    transition: opacity .15s;
}
.mn-lien:hover, .mn-lien[aria-current], .mn-lien[aria-expanded="true"] { opacity: 1; }
.mn-lien[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mn-chevron { display: inline-block; font-size: .8em; transition: transform .2s; }
.mn-reglages[aria-expanded="true"] .mn-chevron { transform: rotate(180deg); }
/* La salle où l'on est, au milieu. */
.mn-salle { display: flex; align-items: center; flex: 1; min-width: 0; justify-content: center; gap: .1rem; }
.mn-salle-nom, .mn-salle-nom:visited {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--tb-eiko);
    font-size: 1.1rem;
    letter-spacing: -0.025em;
    text-decoration: none;
}
.mn-salle-nom:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mn-num { font-weight: 900; font-size: .8rem; letter-spacing: -0.01em; }
.mn-sur { font-family: var(--tb-sans); font-weight: 400; opacity: .55; }
.mn-fleche {
    flex: none;
    padding: .2rem .45rem;
    font: inherit;
    font-size: 1rem;
    color: var(--tb-encre);
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .45;
}
.mn-fleche:hover { opacity: 1; }
.mn-lieu { display: inline-flex; align-items: center; gap: .4rem; margin-left: 0; }
/* Le globe de « des villes » en miniature : toujours sa nuit, son bord bleu, un musée. */
.mn-globe { flex: none; overflow: visible; }
.mn-globe-sphere { fill: #1c1c1e; stroke: #6fb0ff; stroke-width: 1; }
.mn-globe-traits { fill: none; stroke: rgba(242, 242, 247, .5); stroke-width: .6; }
.mn-globe-point { fill: #0a84ff; stroke: #f2f2f7; stroke-width: .6; }
.mn-lieu:hover .mn-globe-sphere, .mn-lieu[aria-current] .mn-globe-sphere { filter: drop-shadow(0 0 2px rgba(111, 176, 255, .8)); }
/* La lampe : éteinte le jour, son faisceau la nuit (les règles de style.css). */
.mu-nuit { margin-left: .5rem; opacity: .6; }
.mu-nuit:hover { opacity: 1; }
.musee-nav :focus-visible, .musee-retour:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 2px; }

.musee-vue { display: block; }

/* --- Le mur déplié (ordinateur) -------------------------------------------------- */
.mu-mur {
    position: relative;
    height: calc(100vh - var(--tb-entete));
    height: calc(100svh - var(--tb-entete));
    overflow: hidden;
}
.mu-regle { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 2; }
.mu-regle svg { display: block; overflow: visible; }
.mu-regle-trait { stroke: var(--tb-encre); stroke-width: 1; opacity: .55; shape-rendering: crispEdges; }
.mu-regle text { font: 500 9.5px/1 var(--tb-sans); letter-spacing: 0; fill: var(--tb-encre); opacity: .62; }
.mu-regle-oeil { stroke: var(--tb-encre); stroke-width: 1; stroke-dasharray: 2 3; opacity: .35; }
.mu-regle .mu-regle-oeil-mot, .mu-regle .mu-regle-plafond { opacity: .45; }
.mu-regle-yeux { stroke: var(--tb-encre); stroke-width: 1; stroke-dasharray: 1 2; opacity: .6; }
.mu-regle .mu-regle-yeux-mot { font-style: italic; opacity: .72; }
.mu-regle-sol { stroke: var(--tb-encre); stroke-width: 1; shape-rendering: crispEdges; }
.mu-defile {
    position: absolute;
    left: 46px; right: 0; top: 0; bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    outline: none;
}
.mu-defile::-webkit-scrollbar { display: none; }
.mu-defile.est-tire { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.mu-paroi { position: relative; }

/* Le bandeau : la phrase de l'œuvre devant toi, au-dessus de la corniche. */
.mu-bandeau {
    position: absolute;
    left: 58px; right: 250px; top: 0;
    z-index: 3;
    padding: .55rem 0 0;
    pointer-events: none;
}
.mu-bandeau a { pointer-events: auto; }
.mu-bandeau-phrase {
    margin: 0;
    overflow: hidden;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: 1.32rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mu-bandeau-detail { margin: .18rem 0 0; overflow: hidden; font-size: .7rem; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; opacity: .75; }
.mu-bandeau-detail a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mu-bandeau-detail a:hover { text-decoration: none; }

/* Un pan de mur, du sol à la corniche : dans les salles, la peinture choisie. */
.mu-pan { position: absolute; pointer-events: none; }
.mu-peint {
    background-color: var(--mur-jour);
    /* La lumière du jour vient d'en haut : le haut du mur un peu plus clair, le bas un peu plus sombre. */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06));
}
.mu-mur-1.mu-peint { background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06)); }
.mu-mur-3.mu-peint { background-image: linear-gradient(rgba(0, 0, 0, .035), rgba(0, 0, 0, .035)), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06)); }
.mu-mur-2, .mu-mur-3 { border-left: 1px solid var(--mur-trait); }
.mu-mur-2::before, .mu-mur-3::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 34px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .06), transparent);
}
.mu-pan-galerie { background: rgba(0, 0, 0, .03); }
.mu-pan-palier, .mu-pan-accueil { background: rgba(255, 255, 255, .22); }
html[data-nuit] .mu-peint {
    background-color: var(--mur-nuit);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .2));
}
html[data-nuit] .mu-mur-2, html[data-nuit] .mu-mur-3 { border-left-color: rgba(255, 255, 255, .08); }
html[data-nuit] .mu-mur-2::before, html[data-nuit] .mu-mur-3::before { background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent); }
html[data-nuit] .mu-pan-galerie { background: rgba(0, 0, 0, .2); }
html[data-nuit] .mu-pan-palier, html[data-nuit] .mu-pan-accueil { background: rgba(255, 255, 255, .02); }

/* Le halo de la lampe, la nuit : une flaque de lumière autour de chaque œuvre. */
.mu-halo {
    position: absolute;
    background: radial-gradient(closest-side, var(--mur-halo) 0%, var(--mur-halo) 38%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
html[data-nuit] .mu-halo { opacity: .8; }

.mu-sol { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--tb-encre); }
/* La ligne des centres, à 1,45 m, sur les murs où l'on accroche. */
.mu-oeil { position: absolute; height: 0; border-top: 1px dashed var(--mur-trait); pointer-events: none; }
html[data-nuit] .mu-oeil { border-top-color: rgba(255, 255, 255, .13); }
/* La ligne de tes yeux, en pointillé, tout le long. */
.mu-yeux { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dotted var(--tb-encre); opacity: .4; pointer-events: none; z-index: 1; }
/* La corniche : deux filets sous le plafond. */
.mu-corniche { position: absolute; left: 0; height: 4px; border-top: 1px solid var(--tb-filet-fort); border-bottom: 1px solid var(--tb-filet); }

/* Une œuvre : sa place sur le mur (cadre compris), son cartel sous le sol. */
.mu-oeuvre { position: absolute; top: 0; margin: 0; }
.mu-oeuvre-lien { position: absolute; left: 0; display: block; cursor: zoom-in; z-index: 1; }
.mu-oeuvre-lien:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 6px; }
.mu-un { position: absolute; display: block; }
.mu-vue { position: absolute; display: block; }
.mu-toile {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--tb-encre) 12%, var(--tb-fond));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .13);
}
.mu-toile img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mu-toile img.mu-image-suite { object-fit: fill; }
/* Encadrée, l'ombre est celle du cadre. */
.mu-un:not(.mu-cadre-aucun) .mu-toile { box-shadow: none; }
.mu-un:not(.mu-cadre-aucun):not(.mu-cadre-caisse):not(.mu-cadre-passe-partout) .mu-vue::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.musee-cadre { display: block; overflow: visible; }
.mu-un:not(.mu-cadre-aucun) { box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 12px 26px rgba(0, 0, 0, .16); }
html[data-nuit] .mu-un.mu-cadre-aucun .mu-toile,
html[data-nuit] .mu-un:not(.mu-cadre-aucun) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 14px 34px rgba(0, 0, 0, .6), 0 0 70px rgba(255, 234, 199, .09);
}

.mu-cartel {
    position: absolute;
    left: 0;
    padding-top: .3rem;
    border-top: 1px solid var(--tb-encre);
    font-size: .68rem;
    line-height: 1.25;
}
.mu-cartel-qui { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mu-cartel-titre, .mu-cartel-titre:visited {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: .1rem 0 .16rem;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: .98rem;
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.mu-cartel-titre:hover, .mu-oeuvre:hover .mu-cartel-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mu-cartel-dims { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; opacity: .62; font-variant-numeric: tabular-nums; }
.mu-cartel-phrase {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .22rem;
    font-family: var(--tb-eiko);
    font-style: italic;
    font-size: .78rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
    transition: opacity .2s;
}
.mu-cartel-phrase:empty { display: none; }
html:not(.mu-travees) .mu-oeuvre:not(.est-devant) .mu-cartel-phrase { opacity: .6; }
.mu-oeuvre.est-devant .mu-cartel { border-top-width: 2px; padding-top: calc(.3rem - 1px); }

/* Toi : dans l'encre des cartels ; devant un mur peint, l'encre lisible sur ce mur. */
.mu-visiteur { position: absolute; left: 0; z-index: 2; color: var(--tb-encre); pointer-events: none; }
.mu-visiteur.sur-peint { color: var(--mur-encre); }
html[data-nuit] .mu-visiteur.sur-peint { color: var(--tb-encre); }
.mu-pret .mu-visiteur:not(.mu-visiteur-travee) { transition: transform .6s cubic-bezier(.3, .1, .25, 1); }
.mu-visiteur.est-immobile { transition: none !important; }
.mu-silhouette { display: block; overflow: visible; }

/* --- La baie, et son linteau ----------------------------------------------------- */
.mu-porte { position: absolute; }
.mu-baie {
    position: absolute;
    display: block;
    overflow: hidden;
    background: var(--mu-baie);
    box-shadow: inset 0 0 0 1px var(--tb-filet-fort), 0 0 0 5px var(--tb-fond), 0 0 0 6px var(--tb-filet);
    cursor: pointer;
    transition: background-color .2s;
}
.mu-peint .mu-baie { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 5px color-mix(in srgb, var(--mur-jour) 88%, #fff), 0 0 0 6px var(--mur-trait); }
html[data-nuit] .mu-peint .mu-baie { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 5px color-mix(in srgb, var(--mur-nuit) 80%, #000), 0 0 0 6px rgba(255, 255, 255, .1); }
.mu-baie:hover { background-color: rgba(0, 0, 0, .05); }
.mu-baie:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 9px; }
.mu-baie-vue { display: block; }
.mu-baie-sol { fill: rgba(0, 0, 0, .07); }
.mu-baie-fond { fill: var(--mur-jour); opacity: .55; }
html[data-nuit] .mu-baie-fond { fill: var(--mur-nuit); opacity: 1; }
.mu-baie-arete { stroke: var(--tb-filet-fort); stroke-width: 1; fill: none; }
.mu-baie-toile { fill: var(--tb-encre); opacity: .13; }
.mu-porte-sortie .mu-baie { background: rgba(255, 255, 255, .55); }
html[data-nuit] .mu-porte-sortie .mu-baie { background: rgba(255, 234, 199, .12); }
.mu-linteau {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    padding: .42rem .9rem .5rem;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    overflow: hidden;
}
.mu-peint .mu-linteau { color: var(--mur-encre); }
html[data-nuit] .mu-peint .mu-linteau { color: var(--tb-encre); }
.mu-linteau-num { font-family: var(--tb-eiko); font-weight: 900; font-size: .7rem; letter-spacing: .02em; text-transform: lowercase; }
.mu-linteau-nom { font-family: var(--tb-eiko); font-weight: 400; font-size: 1.55rem; letter-spacing: -0.035em; }

/* Sous la baie : le cartel de la salle où elle mène. */
.mu-cartel-salle, .mu-bande-texte {
    position: absolute;
    padding-top: .3rem;
    border-top: 2px solid var(--tb-encre);
    font-size: .68rem;
    line-height: 1.25;
}
.mu-bande-texte { border-top-width: 1px; }
.mu-cs-num { display: block; margin: 0; font-family: var(--tb-eiko); font-weight: 900; font-size: .74rem; letter-spacing: -0.005em; text-transform: lowercase; }
.mu-cs-nom, .mu-cs-nom:visited {
    display: block;
    overflow: hidden;
    margin: .08rem 0 .14rem;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.04;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}
a.mu-cs-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.mu-cs-ligne { display: block; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mu-bande-texte .mu-cs-ligne { white-space: normal; opacity: .75; }
.mu-cs-pale { opacity: .6; font-variant-numeric: tabular-nums; }
.mu-cs-aussi { display: block; margin-top: .1rem; font-weight: 400; font-style: italic; opacity: .7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* --- L'accueil et la sortie ---------------------------------------------------------- */
.mu-accueil { position: absolute; z-index: 1; }
.mu-accueil-sur { margin: 0 0 .3rem; font-family: var(--tb-eiko); font-weight: 900; font-size: .8rem; text-transform: lowercase; }
.mu-accueil-titre { margin: 0 0 .8rem; font-family: var(--tb-eiko); font-weight: 400; font-size: 3.1rem; line-height: .9; letter-spacing: -0.05em; }
.mu-accueil-texte { max-width: 23rem; margin: 0; font-size: .8rem; line-height: 1.42; font-weight: 400; letter-spacing: -0.01em; }
.mu-accueil-texte a { text-decoration: underline; text-underline-offset: 3px; }
/* « personnaliser le musée Éclectique » : tout le bloc ouvre les réglages. */
.mu-perso {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
    max-width: 23rem;
    margin: .9rem 0 0;
    padding: .6rem .75rem .65rem;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    color: var(--tb-encre);
    background: var(--tb-carte);
    border: 1px solid var(--tb-encre);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.mu-perso:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 30px rgba(0, 0, 0, .14); }
.mu-perso:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 3px; }
.mu-perso-titre { display: flex; align-items: center; gap: .45rem; font-family: var(--tb-eiko); font-weight: 900; font-size: .95rem; line-height: 1.1; letter-spacing: -0.02em; }
.mu-perso-icone { flex: none; fill: var(--tb-carte); stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.mu-perso-fleche { margin-left: auto; font-family: var(--tb-sans); font-weight: 400; transition: transform .15s; }
.mu-perso:hover .mu-perso-fleche { transform: translateX(3px); }
.mu-perso-etat { display: block; font-size: .74rem; line-height: 1.4; font-weight: 400; opacity: .8; }
.mu-perso-mur { display: inline-block; width: .72em; height: .72em; margin-right: .4em; vertical-align: -.04em; border: 1px solid var(--tb-filet-fort); border-radius: 1px; }
html[data-nuit] .mu-perso { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .5); }
.mu-lien {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.mu-lien:hover, .mu-accueil-texte a:hover { text-decoration: none; }
/* Le présentoir des plans, au pied du mur d'accueil. */
.mu-presentoir, .mu-presentoir:visited {
    position: absolute;
    left: 0;
    bottom: -12px;
    display: flex;
    align-items: flex-end;
    gap: .7rem;
    color: var(--tb-encre);
    text-decoration: none;
}
.mu-presentoir::before { content: ""; position: absolute; left: 25px; bottom: 0; width: 2px; height: 74px; background: var(--tb-encre); opacity: .7; }
.mu-presentoir::after { content: ""; position: absolute; left: 10px; bottom: 0; width: 32px; height: 2px; background: var(--tb-encre); opacity: .7; }
.mu-presentoir-feuille {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 30px;
    margin-bottom: 70px;
    background: var(--mu-papier);
    border: 1px solid var(--tb-encre);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.mu-presentoir-feuille + .mu-presentoir-feuille { margin-left: -1.05rem; transform: rotate(6deg); }
.mu-presentoir-feuille:first-child { margin-left: 6px; transform: rotate(-4deg); }
.mu-presentoir-feuille::after { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 12px; border: 1px solid var(--tb-encre); border-top-width: 3px; opacity: .5; }
.mu-presentoir-mot { margin-bottom: 76px; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mu-presentoir:hover .mu-presentoir-mot { text-decoration: none; }
.mu-presentoir:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 4px; }
.mu-sortie-titre { font-size: 2.6rem; }

/* --- La réserve : derrière la vitre, les œuvres posées, hors échelle ---------------- */
.mu-vitrine {
    position: absolute;
    border: 1px solid var(--tb-filet-fort);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .3) 62%, rgba(255, 255, 255, .06)),
        repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--tb-filet) calc(25% - 1px) 25%);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25);
}
html[data-nuit] .mu-vitrine {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%, rgba(255, 255, 255, .04) 62%, transparent),
        repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--tb-filet) calc(25% - 1px) 25%);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .03);
}
/* Deux tablettes : les œuvres y sont posées, appuyées contre le fond. */
.mu-etagere {
    position: absolute;
    left: 14px; right: 14px; top: 6px; bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: center;
    align-items: flex-end;
    gap: 22px 12px;
    background: linear-gradient(transparent calc(50% - 2px), var(--tb-filet-fort) calc(50% - 2px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(transparent calc(100% - 3px), var(--tb-filet-fort) calc(100% - 3px));
}
.mu-posee, .mu-posee:visited {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    transform: rotate(var(--penche, 0deg));
    transform-origin: 50% 100%;
    transition: transform .2s ease;
}
.mu-posee img {
    display: block;
    height: var(--h, 60px);
    width: auto;
    max-width: calc(var(--h, 60px) * 1.8);
    object-fit: contain;
    background: color-mix(in srgb, var(--tb-encre) 10%, var(--tb-fond));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 3px 6px 10px rgba(0, 0, 0, .16);
}
.mu-posee img:not([src]) { width: calc(var(--h, 60px) * .8); }
.mu-posee-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; font-weight: 400; opacity: .7; transform: rotate(calc(var(--penche, 0deg) * -1)); }
.mu-posee:hover, .mu-posee:focus-visible { transform: rotate(0deg) translateY(-3px); }
.mu-posee:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 3px; }
.mu-bande-reserve .mu-cs-ligne { max-width: 34rem; }

/* --- Le plan, replié en coin d'écran ---------------------------------------------------- */
.mu-coin {
    position: fixed;
    top: calc(var(--tb-entete) + 12px);
    right: 14px;
    z-index: 25;
    display: block;
    padding: 6px 7px 5px;
    font: inherit;
    letter-spacing: inherit;
    color: var(--tb-encre);
    text-align: left;
    background: var(--mu-papier);
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 10px 26px rgba(0, 0, 0, .1);
    cursor: pointer;
}
html[data-nuit] .mu-coin { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .55); }
.mu-coin:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 14px 34px rgba(0, 0, 0, .16); }
.mu-coin:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 2px; }
.mu-coin-tete { display: flex; align-items: baseline; gap: .45rem; max-width: 214px; padding: 0 1px 4px; font-size: .66rem; line-height: 1.1; border-bottom: 1px solid var(--tb-filet); }
.mu-coin-mot { font-family: var(--tb-eiko); font-weight: 900; font-size: .72rem; }
.mu-coin-texte { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.mu-coin-ouvrir { font-weight: 400; opacity: .5; }
.mu-coin:hover .mu-coin-ouvrir { opacity: 1; }
.mu-coin-plan { display: block; margin-top: 3px; line-height: 0; }
html.mu-plan-ouvert .mu-coin { visibility: hidden; }

/* --- Le plan, déplié : le dépliant de visite ------------------------------------------- */
.mu-depliant {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--tb-entete) + 14px) 16px 84px;
}
.mu-voile {
    position: absolute;
    inset: 0;
    top: var(--tb-entete);
    background: rgba(242, 242, 242, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
html[data-nuit] .mu-voile { background: rgba(18, 17, 16, .6); }
html.mu-plan-se-replie .mu-voile { opacity: 0; transition: opacity .3s; }
.mu-feuille {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: min(1200px, 100%);
    height: min(700px, calc(100vh - var(--tb-entete) - 100px));
    height: min(700px, calc(100svh - var(--tb-entete) - 100px));
    background-color: var(--mu-papier);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 30px 80px rgba(0, 0, 0, .2);
    transform-origin: 0 0;
    overflow: hidden;
}
html[data-nuit] .mu-feuille { background-image: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .7); }
/* Les deux plis du dépliant (il se plie en trois). */
.mu-pli {
    position: absolute;
    top: 0; bottom: 0;
    width: 30px;
    margin-left: -15px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .028) 46%, rgba(0, 0, 0, .06) 50%, rgba(255, 255, 255, .55) 51%, transparent);
}
.mu-pli-1 { left: 33.333%; }
.mu-pli-2 { left: 66.666%; }
html[data-nuit] .mu-pli { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .3) 50%, rgba(255, 255, 255, .05) 51%, transparent); }
.mu-feuille-tete {
    display: flex;
    align-items: flex-end;
    gap: 1.6rem;
    margin: 0 1.4rem;
    padding: 1.15rem 0 .9rem;
    border-bottom: 1px solid var(--tb-encre);
}
.mu-feuille-sur { margin: 0 0 .25rem; font-family: var(--tb-eiko); font-weight: 900; font-size: .78rem; text-transform: lowercase; }
.mu-feuille-titre { margin: 0; font-family: var(--tb-eiko); font-weight: 400; font-size: 2.55rem; line-height: .9; letter-spacing: -0.05em; }
.mu-ranger { display: flex; align-items: baseline; gap: .05rem; margin: 0 0 .1rem auto; font-size: .85rem; white-space: nowrap; }
.mu-ranger-lib { opacity: .55; margin-right: .3rem; }
.mu-ranger button {
    font: inherit;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    padding: .35rem .42rem;
    cursor: pointer;
    opacity: .55;
}
.mu-ranger button:hover { opacity: 1; }
.mu-ranger button[aria-checked="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mu-replier {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .2rem;
    padding: .35rem .1rem;
    font: inherit;
    font-size: .85rem;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mu-replier:hover { text-decoration: none; }
.mu-replier svg { display: block; }
.mu-replier path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.mu-feuille-corps { display: grid; grid-template-columns: 2fr 1fr; min-height: 0; }
.mu-plan-grand { position: relative; min-height: 0; min-width: 0; }
.mu-plan-grand svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.mu-legende { min-height: 0; overflow-y: auto; padding: .9rem 1.4rem 1.2rem 1.6rem; scrollbar-width: thin; }

/* La légende : les salles numérotées, la réserve, les signes, l'échelle. */
.mu-leg-salles { margin: 0 0 1rem; padding: 0; list-style: none; border-top: 1px solid var(--tb-encre); }
.mu-leg-salles li { border-bottom: 1px solid var(--tb-filet); }
.mu-leg-salles a {
    display: grid;
    grid-template-columns: 1.55rem 1fr auto;
    align-items: baseline;
    gap: .5rem;
    padding: .2rem 0 .18rem;
    font-size: .78rem;
    text-decoration: none;
}
.mu-leg-num { font-family: var(--tb-eiko); font-weight: 900; font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.mu-leg-nom { font-family: var(--tb-eiko); font-size: .98rem; letter-spacing: -0.02em; line-height: 1.1; }
.mu-leg-chiffres { font-weight: 500; font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mu-leg-unite { font-weight: 400; opacity: .55; font-family: var(--tb-sans); font-size: .7rem; letter-spacing: -0.01em; }
.mu-leg-salles a:hover .mu-leg-nom { text-decoration: underline; text-underline-offset: 3px; }
.mu-leg-salles li.est-courante a { color: var(--mu-repere); }
.mu-leg-salles li.est-courante .mu-leg-nom::after { content: " · vous êtes ici"; font-family: var(--tb-sans); font-size: .62rem; letter-spacing: 0; }
.mu-leg-reserve { margin: 0 0 1.1rem; }
.mu-leg-reserve h3 { margin: 0 0 .5rem; font-family: var(--tb-eiko); font-weight: 400; font-size: .98rem; letter-spacing: -0.02em; }
.mu-leg-reserve h3 a { text-decoration: none; font-style: italic; }
.mu-leg-reserve h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* La tablette de la réserve, dans la légende : les vignettes posées côte à côte. */
.mu-tablette {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 9px;
    padding: 4px 2px 0;
    background: linear-gradient(transparent calc(100% - 2px), var(--tb-filet-fort) calc(100% - 2px));
}
.mu-tablette .mu-posee-nom { display: none; }
.mu-tablette .mu-posee { margin-bottom: 2px; }
.mu-leg-pictos { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .28rem; font-size: .7rem; font-weight: 400; line-height: 1.2; }
.mu-leg-pictos li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .4rem; }
.mu-leg-pictos svg { display: block; overflow: visible; }
.mp-pic-mur { fill: var(--mu-poche); }
.mp-pic-tableau { stroke: #8a6a3a; stroke-width: 3; }
.mp-pic-vitre { stroke: var(--tb-encre); stroke-width: .8; }
.mp-pic-banquette { fill: none; stroke: var(--tb-encre); stroke-width: .9; opacity: .7; }
.mp-pic-chemin { stroke: var(--mu-repere); stroke-width: 1.3; stroke-dasharray: 1 3.6; stroke-linecap: round; }
.mp-pic-fleche { fill: none; stroke: var(--mu-repere); stroke-width: 1.4; }
.mp-pic-cadre { stroke: var(--tb-filet-fort); stroke-width: 1; }
.mu-leg-echelle { display: flex; align-items: flex-end; gap: .7rem; margin: 0 0 .8rem; font-size: .66rem; font-weight: 400; opacity: .8; }
.mu-leg-echelle svg { display: block; overflow: visible; }
.mu-leg-echelle line { stroke: var(--tb-encre); stroke-width: 1; }
.mu-leg-echelle text { font: 400 9px var(--tb-sans); fill: var(--tb-encre); }
.mu-ech-plein { fill: var(--tb-encre); }
.mu-leg-note { margin: 0; font-size: .7rem; line-height: 1.42; font-weight: 400; opacity: .78; }

/* --- Le dessin du plan ------------------------------------------------------------------ */
.mp { display: block; overflow: visible; font-family: var(--tb-sans); }
.mp-murs rect { fill: var(--mu-poche); }
.mp-sol, .mp-baie { fill: var(--mu-papier); }
.mp-reserve { stroke: none; pointer-events: none; }
.mp-dallage { fill: none; stroke: var(--tb-encre); stroke-opacity: .07; stroke-width: 1; }
.mp-hachure { stroke: var(--tb-encre); stroke-opacity: .32; stroke-width: 1; }
.mp-vitre { stroke: var(--tb-encre); stroke-width: .75; }
.mp-trait { stroke: var(--tb-encre); stroke-width: .75; opacity: .55; }
.mp-salle { cursor: pointer; outline: none; }
.mp-sol-salle { transition: fill .15s; }
.mp-salle:hover .mp-sol-salle, .mp-salle.est-survolee .mp-sol-salle { fill: color-mix(in srgb, var(--tb-encre) 5%, var(--mu-papier)); }
.mp-salle.est-courante .mp-sol-salle { fill: color-mix(in srgb, var(--mu-repere) 11%, var(--mu-papier)); }
.mp-salle:focus-visible .mp-sol-salle { stroke: var(--tb-encre); stroke-width: 1.5; }
.mp-banquette { fill: none; stroke: var(--tb-encre); stroke-width: .8; opacity: .5; }
.mp-tableau { stroke: #8a6a3a; stroke-linecap: butt; cursor: pointer; transition: opacity .15s; }
html[data-nuit] .mp-tableau { stroke: #c9a46a; }
.mp-tableau:hover { stroke: var(--tb-encre); }
.mp-filtre .mp-tableau { opacity: .12; }
.mp-filtre .mp-tableau.est-vise { opacity: 1; }
.mp-filtre .mp-tableau.est-ailleurs { stroke: var(--mu-repere); }
.mp-chemin { fill: none; stroke: var(--mu-repere); stroke-width: 1.3; stroke-dasharray: 1 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; pointer-events: none; }
.mp-mini .mp-chemin { stroke-width: 1; stroke-dasharray: .5 2.4; opacity: .7; }
.mp-fleche { fill: none; stroke: var(--mu-repere); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mp-textes { pointer-events: none; }
.mp-num { font-family: var(--tb-eiko); font-weight: 400; fill: var(--tb-encre); letter-spacing: -0.03em; }
.mp-nom { font: 500 10px var(--tb-sans); letter-spacing: -0.01em; fill: var(--tb-encre); opacity: .72; }
.mp-exp { font-size: 7px; }
.mp-lieu { font: italic 400 13px var(--tb-eiko); fill: var(--tb-encre); opacity: .75; }
.mp-petit { font: 400 9px var(--tb-sans); fill: var(--tb-encre); opacity: .6; }
.mp-cour-mot { font: italic 400 18px var(--tb-eiko); fill: var(--tb-encre); opacity: .4; }
.mp-num-mini { font: 500 7.5px var(--tb-sans); fill: var(--tb-encre); opacity: .55; letter-spacing: 0; }
.mp-mini .mp-tableau { stroke: var(--tb-encre); opacity: .55; }
.mp-mini .mp-salle { cursor: inherit; }
.mp-cible { fill: transparent; }
.mp-zone { cursor: pointer; }
.mp-ici-halo { fill: var(--mu-repere); opacity: .2; }
.mp-ici-point { fill: var(--mu-repere); stroke: var(--mu-papier); stroke-width: 1.5; }
.mp-ici-mot { font: 500 10.5px var(--tb-sans); fill: var(--mu-repere); paint-order: stroke; stroke: var(--mu-papier); stroke-width: 3.5px; stroke-linejoin: round; letter-spacing: 0; }
.mp-ici .mp-ici-halo { transform-box: fill-box; transform-origin: center; animation: mp-pouls 2.2s ease-out infinite; }
@keyframes mp-pouls { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(1.5); opacity: 0; } }

/* La pastille : ← → et le plan. */
.mu-pastille { z-index: 20; }
.mu-pastille-plan, .mu-pastille-plan:visited {
    margin-left: .2rem;
    padding: .25rem .6rem .25rem .8rem;
    border-left: 1px solid var(--tb-filet);
    color: var(--tb-encre);
    text-decoration: none;
    opacity: .55;
    transition: opacity .15s;
}
.mu-pastille-plan:hover { opacity: 1; }
html.mu-plan-ouvert .mu-pastille { visibility: hidden; }

/* --- Les réglages : toi, le mur, le cadre, la nuit -------------------------------------- */
.mr-panneau {
    position: fixed;
    top: calc(var(--tb-entete) + 8px);
    right: 12px;
    z-index: 70;
    width: min(27rem, calc(100vw - 24px));
    max-height: calc(100vh - var(--tb-entete) - 24px);
    max-height: calc(100svh - var(--tb-entete) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .2rem 1.1rem 1rem;
    box-sizing: border-box;
    background: var(--tb-carte);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 40px rgba(0, 0, 0, .14);
    scrollbar-width: thin;
}
html[data-nuit] .mr-panneau { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .6); }
.mr-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: .55rem 0 .4rem; background: var(--tb-carte); }
.mr-titre { margin: 0; font-family: var(--tb-eiko); font-size: 1.35rem; letter-spacing: -0.03em; }
.mr-fermer {
    width: 2rem; height: 2rem;
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--tb-encre);
    background: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    opacity: .7;
}
.mr-fermer:hover { opacity: 1; }
.mr-bloc { padding: .55rem 0 .8rem; border-top: 1px solid var(--tb-encre); }
.mr-bloc-titre { margin: 0 0 .5rem; font-family: var(--tb-eiko); font-weight: 900; font-size: .82rem; letter-spacing: -0.01em; text-transform: lowercase; }
.mr-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .3rem; font-size: .8rem; font-weight: 400; }
.mr-ligne output { font-family: var(--tb-eiko); font-size: 1.5rem; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; text-align: right; }
.mr-taille { display: flex; align-items: center; gap: .45rem; }
.mr-taille input { flex: 1; min-width: 0; margin: 0; accent-color: var(--tb-encre); }
.mr-taille button {
    flex: none;
    width: 1.7rem; height: 1.7rem;
    font: inherit;
    line-height: 1;
    color: var(--tb-encre);
    background: var(--tb-carte);
    border: 1px solid var(--tb-filet-fort);
    border-radius: 2px;
    cursor: pointer;
}
.mr-taille button:hover { border-color: var(--tb-encre); }
.mr-bornes { margin: .2rem 0 .5rem; font-size: .64rem; font-weight: 400; opacity: .5; font-variant-numeric: tabular-nums; }
.mr-gabarits { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; margin: 0 0 .5rem; }
.mr-gabarits button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    min-height: 5.2rem;
    padding: .4rem .15rem .35rem;
    font: inherit;
    font-size: .66rem;
    line-height: 1.1;
    letter-spacing: inherit;
    text-align: center;
    color: var(--tb-encre);
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s, border-color .15s;
}
.mr-gabarits button:hover { opacity: .85; }
.mr-gabarits button[aria-checked="true"] { opacity: 1; border-color: var(--tb-encre); }
.mr-gabarits .mr-icone { display: block; max-width: 100%; overflow: visible; }
.mr-gabarits span { display: flex; align-items: flex-start; justify-content: center; min-height: 2.2em; }
.mr-note { margin: .3rem 0 0; font-size: .7rem; line-height: 1.4; font-weight: 400; opacity: .7; }
/* Le mur : une bande peinte d'une couleur à l'autre, le curseur par-dessus, les peintures nommées. */
.mr-mur { position: relative; height: 2.2rem; margin: .2rem 0 .35rem; }
.mr-mur-bande { position: absolute; left: 0; right: 0; top: .45rem; height: 1.3rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--tb-filet); }
.mr-mur input {
    position: absolute;
    left: -2px; right: -2px; top: 0;
    width: calc(100% + 4px);
    height: 2.2rem;
    margin: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.mr-mur input::-webkit-slider-runnable-track { height: 2.2rem; background: none; }
.mr-mur input::-moz-range-track { height: 2.2rem; background: none; }
.mr-mur input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 2.2rem;
    background: transparent;
    border: 2px solid var(--tb-encre);
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--tb-carte);
}
.mr-mur input::-moz-range-thumb { width: 6px; height: 2rem; background: transparent; border: 2px solid var(--tb-encre); border-radius: 2px; box-shadow: 0 0 0 1px var(--tb-carte); }
.mr-mur input:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 3px; }
.mr-crans { display: flex; flex-wrap: wrap; gap: .1rem .2rem; }
.mr-crans button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .3rem;
    font: inherit;
    font-size: .7rem;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    opacity: .65;
}
.mr-crans button:hover, .mr-crans button[aria-pressed="true"] { opacity: 1; }
.mr-crans button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mr-crans i { display: block; width: .75rem; height: .75rem; border-radius: 1px; background: var(--puce); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
/* Le cadre : chaque style dessiné autour d'une toile de 60 × 80 cm. */
.mr-cadres { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.9rem, 1fr)); gap: .3rem; }
.mr-cadres button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-height: 5.6rem;
    padding: .45rem .2rem .35rem;
    font: inherit;
    font-size: .64rem;
    line-height: 1.12;
    letter-spacing: inherit;
    text-align: center;
    color: var(--tb-encre);
    background: none;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    opacity: .62;
}
.mr-cadres button:hover { opacity: 1; }
.mr-cadres button[aria-checked="true"] { opacity: 1; border-color: var(--tb-encre); }
.mr-cadre-apercu { position: relative; display: block; flex: none; }
.mr-cadre-toile { position: absolute; display: block; background: linear-gradient(160deg, #9fb3c0, #c9b98e 55%, #7d8a5c); }
.mr-cadre-regle { display: flex; align-items: center; justify-content: center; width: 3rem; height: 2.6rem; font-family: var(--tb-eiko); font-size: 1.5rem; border: 1px dashed var(--tb-filet-fort); }
.mr-bloc-nuit .mr-ligne { align-items: center; }
.mr-interrupteur { display: inline-flex; padding: 0; background: none; border: 0; cursor: pointer; }
.mr-piste { position: relative; display: block; width: 1.9rem; height: 1rem; border: 1px solid var(--tb-encre); border-radius: 2px; }
.mr-piste::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1rem - 6px); height: calc(1rem - 6px); background: var(--tb-encre); }
.mr-interrupteur[aria-checked="true"] .mr-piste { background: var(--tb-encre); }
.mr-interrupteur[aria-checked="true"] .mr-piste::after { left: auto; right: 2px; background: var(--tb-carte); }
.mr-panneau button:focus-visible { outline: 1px solid var(--tb-encre); outline-offset: 2px; }

/* --- Les vues de secours (avant que l'approche et le lieu ne se chargent) -------------- */
.mu-secours { max-width: 40rem; margin: 0 auto; padding: 1.6rem 16px 4rem; font-weight: 400; line-height: 1.45; }
.mu-secours img { display: block; max-width: 100%; max-height: 60vh; margin: 1rem 0; }
.mu-secours-qui { margin: 0; font-size: .85rem; }
.mu-secours-titre { margin: .1rem 0 .4rem; font-family: var(--tb-eiko); font-weight: 400; font-size: 1.8rem; line-height: 1.02; letter-spacing: -0.03em; }
.mu-secours-dims { margin: 0 0 1rem; font-size: .8rem; opacity: .7; }
.mu-secours a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Téléphone : salle après salle, en travées ------------------------------------------ */
/* Plus étroit : le globe seul, le nom pour les lecteurs d'écran (aria-label). */
@media (max-width: 1000px) {
    .mn-lieu-mot { display: none; }
}
@media (max-width: 800px) {
    .musee-entete { gap: .5rem; padding: 0 .7rem 0 16px; }
    .musee-retour { font-size: 1.05rem; }
    .musee-nom { display: none; }
    .musee-nav { justify-content: flex-end; gap: 0; font-size: .8rem; }
    .mn-salle { display: none !important; }
    .mn-lien { padding: .35rem .38rem; }
    .mn-chevron { display: none; }
    .mu-nuit { margin-left: .2rem; }

    .mu-mur { height: auto; overflow: visible; }
    .mu-regle, .mu-bandeau { display: none; }
    .mu-defile { position: static; overflow: visible; cursor: auto; }
    .mu-paroi { position: static; padding: 1.1rem 16px 8rem; }
    .mu-t-accueil { margin: 0 0 1.4rem; }
    .mu-t-accueil .mu-accueil-texte { padding-right: 62px; font-size: .9rem; max-width: none; }
    .mu-t-accueil .mu-perso { max-width: none; }
    .mu-t-accueil .mu-perso-etat { font-size: .8rem; }
    body.tpl-page-musee .mu-t-plan, body.tpl-page-musee .mu-t-plan:visited {
        display: inline-flex;
        margin: .8rem 0 0;
        padding: .5rem .8rem;
        font-size: .85rem;
        color: var(--tb-fond);
        background: var(--tb-encre);
        border-radius: 2px;
        text-decoration: none;
    }
    .mu-t-porte {
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        margin: 1.6rem 0 1.1rem;
        padding-top: .9rem;
        border-top: 1px solid var(--tb-filet);
    }
    .mu-t-porte-petite { margin: 1.1rem 0 .8rem; }
    .mu-t-baie { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; }
    .mu-linteau-tel { position: static; transform: none; margin: 0 0 .7rem; padding: .3rem .55rem .36rem; max-width: 58vw; }
    .mu-linteau-tel .mu-linteau-nom { font-size: 1.15rem; }
    .mu-baie-tel { position: relative; }
    .mu-cartel-salle-tel { position: static; flex: 1; min-width: 0; padding-bottom: .1rem; }
    .mu-cartel-salle-tel .mu-cs-nom { white-space: normal; font-size: 1.3rem; }
    .mu-cartel-salle-tel .mu-cs-ligne, .mu-cartel-salle-tel .mu-cs-aussi { white-space: normal; font-size: .76rem; }
    .mu-travee { position: relative; margin: 0 -16px .5rem; padding: 0 16px; overflow: hidden; }
    .mu-travee-mur { position: absolute; left: 0; right: 0; top: 0; }
    .mu-travee-peinte .mu-travee-mur { background-color: var(--mur-jour); background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06)); }
    html[data-nuit] .mu-travee-peinte .mu-travee-mur { background-color: var(--mur-nuit); background-image: none; }
    .mu-travee .mu-oeuvre { margin-left: 16px; }
    .mu-travee .mu-halo { margin-left: 16px; }
    .mu-visiteur-travee { left: 16px; }
    .mu-travee .mu-oeil { left: 0; right: 0; }
    .mu-cartel-phrase { -webkit-line-clamp: 3; font-size: .8rem; }
    .mu-t-galerie { margin: .6rem 0; font-size: .74rem; font-style: italic; font-weight: 400; opacity: .6; }
    .mu-t-reserve { margin: 1.4rem 0; padding-top: .8rem; border-top: 1px solid var(--tb-filet); }
    .mu-t-reserve .mu-t-titre, .mu-t-reserve .mu-t-texte, .mu-t-reserve .mu-cs-num { padding-right: 62px; }
    .mu-t-titre { margin: .1rem 0 .4rem; font-family: var(--tb-eiko); font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; }
    .mu-t-texte { margin: 0 0 .8rem; font-size: .82rem; line-height: 1.4; font-weight: 400; }
    .mu-etagere-tel { position: static; justify-content: flex-start; padding: 6px 2px 4px; gap: 18px 12px; background: linear-gradient(transparent calc(100% - 3px), var(--tb-filet-fort) calc(100% - 3px)); }
    .mu-t-sortie { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--tb-encre); }

    /* au téléphone, les murs défilent de haut en bas : le coin cacherait le premier rang de
       tableaux ; le plan reste à portée, dans l'en-tête et sous le pouce. */
    .mu-coin { display: none; }

    .mu-depliant { padding: 0; align-items: stretch; }
    .mu-voile { display: none; }
    .mu-feuille {
        display: block;
        width: 100%;
        height: auto;
        margin-top: var(--tb-entete);
        overflow-y: auto;
        border-radius: 0;
        overscroll-behavior: contain;
    }
    .mu-pli { display: none; }
    .mu-feuille-tete { flex-wrap: wrap; gap: .7rem 1rem; margin: 0 16px; padding: 1rem 0 .7rem; position: relative; }
    .mu-feuille-titre { font-size: 2.1rem; }
    .mu-ranger { margin-left: 0; order: 3; width: 100%; font-size: .9rem; }
    .mu-ranger-lib { display: none; }
    .mu-ranger button:first-of-type { padding-left: 0; }
    .mu-replier { position: absolute; right: 0; top: .9rem; }
    .mu-feuille-corps { display: block; }
    .mu-plan-grand { width: 100%; }
    .mu-legende { overflow: visible; padding: .6rem 16px 8rem; }
    .mr-panneau { left: 8px; right: 8px; width: auto; top: calc(var(--tb-entete) + 6px); }
    .mr-gabarits button { font-size: .62rem; padding-left: 0; padding-right: 0; }
    .mr-cadres { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .mp-ici .mp-ici-halo { animation: none; }
    .mu-baie, .mp-sol-salle, .mp-tableau, .mu-halo, .mu-posee, .mu-cartel-phrase, .mn-chevron { transition: none !important; }
    html.mu-plan-se-replie .mu-voile { transition: none; }
    .mu-pret .mu-visiteur { transition: none !important; }
    .mu-perso, .mu-perso-fleche { transition: none; }
    .mu-perso:hover, .mu-perso:hover .mu-perso-fleche { transform: none; }
}

/* La nuit, les cadres reçoivent la lumière de la lampe, pas celle du jour. */
html[data-nuit] .mu-vue .musee-cadre { filter: brightness(.84) saturate(.92); }
/* Dans la vitrine du palier : deux tablettes l'une au-dessus de l'autre. */
.mu-etagere-vitrine { display: grid; grid-template-rows: 1fr 1fr; gap: 0; background: none; }
.mu-rang { display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: 0 6px 3px 70px; border-bottom: 3px solid var(--tb-filet-fort); }