:root{
 /* Même transparence que Genève 3D (rgba(10,14,21,.82)) : les deux villes
    partagent une origine et se passent la main, elles doivent partager le
    même verre. La BORDURE reste plus marquée qu'en face (.12 contre .09) :
    ici le fond est un relief clair, pas une carte sombre, et à .09 l'arête
    du panneau disparaissait dans les toits. */
 --panel-bg:rgba(10,14,21,.82);--panel-border:rgba(255,255,255,.12);
 --txt:#dfe7ee;--txt-dim:#a4b2c0;--accent:#ffb400;--muted:#7a8998;
 color-scheme:dark
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#111920;color:var(--txt);font:13px "Segoe UI",system-ui,sans-serif}
button,input,select{font:inherit}
button,select{color:inherit;cursor:pointer}
button{background:transparent;border:1px solid var(--panel-border);border-radius:6px;padding:8px 11px;transition:background .15s,color .15s}
button:hover{background:#ffffff12;color:#fff}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
[hidden]{display:none!important}
a{color:#e8c78b}
#viewer{position:absolute;inset:0;outline:none;touch-action:none}
#viewer:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
canvas{display:block}
#viewer canvas{touch-action:none}
#viewer canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* flex : le titre et le lien de passage se centrent sur un MÊME axe. En
   bloc, ce sont deux boîtes en ligne posées sur une ligne de texte —
   vertical-align aligne alors sur la police du conteneur et non sur le
   cartouche du titre, et le lien tombait 21 px plus bas (retour Arnaud,
   capture). Le sélecteur de lieu est en position absolue : il ne devient
   pas un élément flex et garde sa place. */
.topbar{position:absolute;z-index:10;top:16px;left:20px;right:20px;pointer-events:none;display:flex;align-items:center}
.brand{display:inline-flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;text-decoration:none;background:#0005;border-radius:9px;color:#fff;pointer-events:auto;white-space:nowrap;font-size:26px;font-weight:800;letter-spacing:.32em}
.brand img{width:34px;height:34px;border-radius:8px;flex:none}
.brand-wordmark{display:flex;align-items:baseline;gap:4px}
.brand strong{color:#FD5312;font-weight:800}
.brand small{font-size:inherit;font-weight:800;letter-spacing:.04em;margin-left:7px}
/* Passage vers l'autre application du site. Un vrai lien et non un bouton :
   ouvrir la ville d'aujourd'hui dans un onglet à côté de celle de 1850 est
   exactement ce qu'on a envie de faire, et un bouton l'interdirait. Son href
   est réécrit par app.js pour emporter l'heure regardée ; sans JavaScript il
   mène quand même à la racine du site. L'icône est décorative, donc en CSS :
   data-i18n remplace le texte du lien à chaque changement de langue et
   emporterait un <span> avec lui. */
.crossnav{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:8px 13px;flex:none;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;color:var(--txt);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.06em;white-space:nowrap;pointer-events:auto}
.crossnav::before{content:"🏙";font-size:14px;letter-spacing:0}
/* Deux libellés, un par largeur : data-i18n remplace le TEXTE de son élément,
   on ne peut donc pas les porter tous les deux sur le lien. Le long dit où
   l'on va, le court — « 21e s. », traduit — tient sur un téléphone à côté du
   titre. aria-label garde la phrase entière dans les deux cas : ce que
   l'écran abrège, la synthèse vocale ne l'abrège pas. */
.crossnav:hover{border-color:var(--accent);color:#fff}
.crossnav-short{display:none}
.place-search{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:5px;width:270px;padding:7px 12px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;pointer-events:auto}
.place-search-icon{display:block;flex:0 0 20px;width:20px;height:20px;color:var(--accent)}
select{max-width:100%;padding:7px;background:#151e29;border:0;border-radius:4px}
.place-field{display:flex;align-items:center;gap:5px;width:100%;min-width:0}
.place-heading,#place-toggle{display:none}
.place-search select{width:100%;min-width:0;background:transparent;outline-offset:0}
.place-search option{background:#121a24}
#map-controls{position:absolute;top:88px;left:20px;z-index:22;display:flex;align-items:center;gap:6px}
#map-controls>button,.language-picker>button{height:35px;background:var(--panel-bg)}
#panel-toggle{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.08em}
.language-picker{position:relative}
#lang-btn{min-width:44px;font-size:11px}
#lang-menu{position:absolute;top:42px;left:0;min-width:126px;background:#151b23;border:1px solid var(--panel-border);border-radius:7px;box-shadow:0 8px 24px #0006;padding:4px}
#lang-menu button{display:block;width:100%;border:0;text-align:left}
#lang-menu button[aria-checked=true]{color:var(--accent);background:#ffb40012}
#walk-btn{display:grid;place-items:center;width:42px;padding:5px}
#walk-btn.on{background:var(--accent);color:#17150e;border-color:var(--accent)}
.walking-mode #viewer canvas{cursor:grab}.walking-mode #viewer canvas:active{cursor:grabbing}
#vr-btn{width:42px;padding:5px;font-size:17px;line-height:1}
#vr-btn.on{background:#3aa0ff40;border-color:#3aa0ff99}
#vr-btn.na,#vr-btn:disabled{opacity:.35;cursor:not-allowed}
#panel{position:absolute;z-index:20;left:20px;top:132px;bottom:122px;width:272px;display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:9px;backdrop-filter:blur(12px);box-shadow:0 8px 32px #0002}
.panel-head{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--panel-border);font-size:12px;font-weight:600}
.panel-head button{border:0;padding:0 3px;font-size:20px;color:var(--txt-dim)}
.scroll{overflow-y:auto;padding:14px 14px 12px;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}
.ctl-row{display:flex;flex-direction:column;gap:8px;margin:0 0 9px}
.ctl-row>label{font-size:12px;color:var(--txt)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:5px 9px;border:1px solid #ffffff26;border-radius:6px;background:#ffffff05;color:var(--txt-dim);font-size:11px;white-space:nowrap}
.chip[aria-pressed=true]{background:#9aa7b3;border-color:#9aa7b3;color:#111820;font-weight:600}
#chips-quality .chip{flex:1}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0 9px;color:var(--accent);font-size:9px;letter-spacing:.12em;font-weight:700}
.small-tag{color:var(--txt-dim);font-size:7px;padding:3px 4px;border:1px solid #fff2;border-radius:3px;letter-spacing:.04em}
.layer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:35px;cursor:pointer;font-size:11.5px}
.layer>span:first-child{min-width:0}
.layer input{position:absolute;right:0;width:32px;height:24px;margin:0;opacity:0;cursor:pointer}
.switch{width:28px;height:15px;border-radius:9px;background:#38414c;flex:none;pointer-events:none}
.switch:after{content:"";display:block;width:11px;height:11px;border-radius:50%;background:#bec6ce;transform:translate(2px,2px);transition:transform .15s}
.layer input:checked+.switch{background:#a47106}
.layer input:checked+.switch:after{background:var(--accent);transform:translate(15px,2px)}
.layer input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:4px}
.layer.unavailable{opacity:.45;cursor:not-allowed}
.layer input:disabled{cursor:not-allowed}
.panel-note{margin:12px 0 10px;font-size:10px;line-height:1.65;color:var(--txt-dim)}
.quality-warning{margin:0 0 10px;color:#c5b78f}
.subtle{width:100%;padding:7px;color:var(--txt-dim);font-size:10px}
.panel-foot{padding:10px 14px;margin-top:auto;border-top:1px solid var(--panel-border);font-size:9px;color:var(--txt-dim)}
.panel-foot i{display:inline-block;width:5px;height:5px;background:#b7b383;border-radius:50%;margin-right:7px}
/* Croix de fermeture : sur mobile la carte occupe le tiers de l'écran et
   l'éteindre demandait d'ouvrir les filtres, de descendre et de trouver la
   bascule des explications (retour Arnaud, captures du 09.09.2026). Elle
   actionne la MÊME bascule — l'état reste cohérent, mémorisé et compté. */
#day-card-close{position:absolute;top:6px;right:8px;z-index:1;border:0;background:none;font-size:22px;line-height:1;padding:2px 7px;color:var(--txt-dim)}
#day-card-close:hover{color:var(--txt)}
#day-card{position:absolute;z-index:9;right:20px;top:88px;width:272px;padding:18px 34px 18px 19px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:9px;backdrop-filter:blur(12px);box-shadow:0 8px 32px #0002}
.eyebrow{font-size:9px;letter-spacing:.14em;color:var(--accent);font-weight:600}
.eyebrow b{font:inherit}
.eyebrow>span{color:var(--txt-dim);float:right;font-size:8px}
h1{margin:17px 0 10px;font-size:21px;line-height:1.3;font-weight:500;letter-spacing:-.03em}
#phase-copy{margin:0 0 16px;font-size:12px;line-height:1.7;color:var(--txt-dim)}
.activity{display:flex;align-items:center;gap:8px;font-size:10px;color:#c4cfb4}
.pulse{width:5px;height:5px;border-radius:50%;background:#abbf8a}
.interpretation{font-size:8px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.point-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px}
.point-controls button{min-width:38px;min-height:36px;font-size:18px}
#point-counter{font-size:10px;color:var(--txt-dim)}

.map-meta{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);display:flex;gap:25px;font-size:9px;font-weight:600;letter-spacing:.09em;color:#f6f6e9;text-shadow:0 1px 4px #000;pointer-events:none;white-space:nowrap}
#scale{border:1px solid #fff9;border-top:0;padding:0 0 3px;text-align:center}
/* Même gabarit que la barre de Genève 3D : centrée, plafonnée à 1000 px.
   Étirée d'un bord à l'autre, elle donnait une horloge perdue à gauche et
   des vitesses perdues à droite sur un grand écran. La borne basse réserve
   78 px de chaque côté — c'est la place du bouton de crédits (ⓘ, en bas à
   droite), que la barre recouvrirait sinon dès qu'elle s'élargit. */
.timeline{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(1000px,calc(100vw - 156px));z-index:12;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(12px)}
.time-main{display:flex;align-items:center;gap:15px;padding:9px 14px 5px}
#play{width:32px;height:32px;padding:0;flex:none;background:var(--accent);color:#17150e;border:0;font-weight:700;font-size:15px}
.clock{width:60px;flex:none}
.clock output{display:block;font-size:23px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.clock>span{display:block;margin-top:4px;font-size:6px;letter-spacing:.12em;color:var(--txt-dim)}
.time-track{flex:1;min-width:0}
.time-caption{display:flex;justify-content:flex-end;color:var(--txt-dim);font-size:8px}
input[type=range]{width:100%;height:5px;margin:8px 0;accent-color:var(--accent);cursor:pointer;touch-action:none}
.ticks{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:8px;font-variant-numeric:tabular-nums}
.ticks button{padding:0;border:0;font-size:8px;color:var(--txt-dim)}
#speeds{flex:none;gap:4px}
#speeds .chip{padding:5px 7px;font-size:10px}
.timeline-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 12px;padding:5px 14px 6px;border-top:1px solid #ffffff0c;font-size:8px;line-height:1.4;color:var(--muted)}
.mobile-help{display:none}
.footer-links,.reference-links{display:flex;flex-wrap:wrap;gap:6px 12px}
.footer-links{align-items:center}
.footer-links button,.footer-links a{font-size:10px;color:#dcc49c;padding:2px 0;border:0;text-decoration:underline;min-height:22px}
#credits{max-height:calc(100dvh - 180px);overflow:auto}
#original-project details{margin:16px 0;border-top:1px solid var(--panel-border);padding-top:12px}
#original-project summary{cursor:pointer;color:var(--accent)}
#contributor-list,#partner-list{columns:2;padding-left:18px}
#contributor-list li,#partner-list li{break-inside:avoid;margin:5px 0}
#audio-state .panel-note{margin:4px 0 6px}
#audio-retry{font-size:11px;margin-bottom:6px}
#credits-toggle{position:absolute;z-index:21;right:20px;bottom:18px;width:40px;height:36px;background:var(--panel-bg);backdrop-filter:blur(12px);font-size:20px;padding:0}
#credits{position:absolute;right:20px;bottom:112px;z-index:24;width:min(360px,calc(100vw - 40px));padding:14px;background:var(--panel-bg);backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:9px;box-shadow:0 8px 24px #0006}
.credits-heading{display:flex;align-items:center;justify-content:space-between}
.credits-heading button{border:0;padding:0 6px;font-size:20px}
#credits p{font-size:11px;line-height:1.6;color:var(--txt-dim);overflow-wrap:anywhere}
.credits-links{display:flex;flex-wrap:wrap;gap:7px}
.credits-links button{font-size:11px}
#labels,#history-markers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#labels{z-index:5}#history-markers{z-index:6}
.map-label{position:absolute;left:0;top:0;will-change:transform;background:#111923;border:1px solid #ffffff15;border-radius:5px;padding:4px 8px;font-size:10px;white-space:nowrap;box-shadow:0 2px 5px #0003;color:#f3e8d7;pointer-events:auto}
.map-label:hover,.map-label:focus-visible,.map-label:active{background:#ffae55;color:#181b20;border-color:#ffae55;z-index:1}
.history-marker:hover,.history-marker:focus-visible{background:#ffae55;color:#181b20}
/* RIDEAU DE PASSAGE (cf. le commentaire du HTML). Deux palettes : celle de la
   ville où l'on ARRIVE, jamais celle qu'on quitte — c'est ce qui fait tenir le
   raccord, le rideau de départ ayant déjà la couleur du rideau d'arrivée.
   Ici, l'arrivée est chaude (1850) et le départ froid (aujourd'hui). */
#passage{position:fixed;inset:0;z-index:999;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none}
/* le mot le plus long (« Aujourd'hui ») doit tenir sur un téléphone : la
   borne basse suit la largeur, ce n'est pas un plancher confortable */
#passage b{font-size:clamp(30px,9vw,110px);font-weight:800;letter-spacing:.18em;margin-right:-.18em;color:#fff;text-shadow:0 6px 44px #000000a6;font-variant-numeric:tabular-nums;text-align:center;padding:0 4vw}
#passage i{position:absolute;left:50%;top:calc(50% + 86px);width:0;height:1px;background:#ffffff8c;transform:translateX(-50%)}
/* html.passage est posée par la ligne inline de <head> dès l'analyse du HTML ;
   :target ne suit qu'au load du document (Chrome), d'où les deux sélecteurs —
   voir le commentaire du rideau dans index.html.
   Le rideau d'arrivée TIENT JUSQU'À LA FIN DU CHARGEMENT : app.js pose .done
   quand la ville est debout, et c'est seulement là qu'il s'efface. L'animation
   de 26 s n'est qu'un FILET — si le chargement échoue ou si le JavaScript ne
   s'exécute jamais, le rideau se lève quand même et laisse voir le message
   d'erreur, au lieu de murer la page. */
html.passage #passage,#passage:target{background:radial-gradient(ellipse at 50% 42%,#7a5a30 0%,#2a1e12 52%,#0d0a06 100%);animation:passage-hold 26s linear forwards}
/* Dès que app.js s'est exécuté (.live), c'est LUI qui décide, et le filet de
   26 s ci-dessus est annulé : sur une machine modeste les 119 secteurs
   prennent plus longtemps que ça, et le rideau se serait levé sur un chantier.
   Le filet ne couvre donc plus qu'un seul cas, celui où le JavaScript n'a
   jamais tourné. */
html.passage #passage.live,#passage.live:target{animation:none;opacity:1;visibility:visible}
html.passage #passage.done,#passage:target.done,#passage.live:target.done{animation:passage-out .75s ease-out forwards}
html.passage #passage i,#passage:target i{animation:passage-rule 2.4s cubic-bezier(.2,.8,.2,1) forwards}
/* dès que app.js prend la main, le trait cesse d'être décoratif : il porte la
   progression réelle des 119 secteurs. */
#passage.live i{animation:none;transition:width .35s ease-out}
#passage.leaving{background:radial-gradient(ellipse at 50% 42%,#1d4e77 0%,#0d1b2a 52%,#04060a 100%);animation:passage-leave .34s ease-in forwards}
@keyframes passage-hold{0%{opacity:1;visibility:visible}92%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes passage-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes passage-leave{from{opacity:0;visibility:visible}to{opacity:1;visibility:visible}}
@keyframes passage-rule{from{width:0}to{width:min(330px,54vw)}}
@media(prefers-reduced-motion:reduce){#passage i{animation:none}}

/* ÉCRAN DE CHARGEMENT — même mécanique que Genève 3D, registre chaud.
   Le relief Magnin vu du ciel (assets/branding/loading-1850.webp, 1373 px,
   117 Ko — le PNG source de 1,2 Mo reste dans images/, hors Git, pour le régénérer), en
   lent travelling avant : une seule transformation composée, rien à repeindre
   pendant que la ville se construit. Voile plus dense en bas, et le texte dans
   une carte de verre dépoli — sans elle il ne se lisait pas sur les toits
   clairs, exactement le retour qu'avait provoqué la cover de Genève 3D.
   La couleur unie reste en repli tant que l'image n'est pas arrivée (elle est
   préchargée dans le <head>, donc elle précède la ville de très loin). */
#loading{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#0b131f;overflow:hidden}
#loading::before{content:'';position:absolute;inset:-4%;background:url(./assets/branding/loading-1850.webp) center/cover no-repeat;animation:load-kb 18s ease-in-out infinite alternate}
#loading::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0d0a0640 0%,#0d0a0673 55%,#0d0a06e0 100%),radial-gradient(ellipse at 50% 45%,#0d0a0600 28%,#0d0a0699 100%)}
@keyframes load-kb{from{transform:scale(1)}to{transform:scale(1.07) translate(-1%,1%)}}
@media(prefers-reduced-motion:reduce){#loading::before{animation:none}}
#loading>div{position:relative;z-index:1;width:min(390px,86vw);padding:26px 32px 22px;border-radius:20px;background:#0b0805a6;border:1px solid #ffffff26;box-shadow:0 24px 60px #00000073,inset 0 1px 0 #ffffff14;backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
#loading h2{font-size:31px;font-weight:400;text-shadow:0 2px 12px #00000099}
#loading p:not(.eyebrow){font-size:12px;color:var(--txt-dim)}
progress{width:100%;height:3px;accent-color:var(--accent);margin:20px 0 12px}
#loading small{display:block;font-size:10px;color:var(--txt-dim)}
#retry{margin-top:18px}
#warning{position:absolute;bottom:122px;left:50%;transform:translateX(-50%);z-index:35;background:#372b15;color:#f2d6a2;border:1px solid #70542e;padding:12px;max-width:80%;border-radius:8px;font-size:11px}
dialog{width:min(620px,calc(100vw - 28px));max-height:85dvh;border:1px solid var(--panel-border);background:#101823;color:var(--txt);border-radius:12px;padding:28px;line-height:1.7;box-shadow:0 20px 70px #0009}
dialog::backdrop{background:#04080ec7;backdrop-filter:blur(5px)}
dialog h2{font-size:27px;line-height:1.25;font-weight:450;letter-spacing:-.03em}
dialog h3{color:#e3c58b;font-size:14px;margin-top:25px}
dialog p,dialog li{font-size:12px;color:#aebbc9}
dialog li{margin:12px 0}
dialog li span{display:block;font-size:11px;color:var(--txt-dim)}
dialog a{color:#ddc48f}
.close{float:right;font-size:24px;padding:0 9px;border:0}
.source-note{border-top:1px solid var(--panel-border);padding-top:18px;font-size:10px!important}
.welcome-biography{margin:22px 0;padding:0 0 12px;border-bottom:1px solid var(--panel-border)}
.welcome-biography h3{font-size:20px;line-height:1.35;margin:0 0 14px;color:#efc78b}
.welcome-biography p{font-size:13px;line-height:1.65;margin:12px 0}
.welcome-magnin-heading{display:flex;align-items:center;gap:16px}
.welcome-magnin-heading>div{min-width:0}
.welcome-portrait{display:block;width:88px;height:88px;flex:none;border-radius:6px;border:1px solid var(--panel-border)}
.welcome-magnin-heading h3{margin:0 0 8px}
.welcome-magnin-heading .portrait-credit{font-size:10px;line-height:1.5;margin:0}
@media(max-width:700px){.welcome-magnin-heading{gap:12px}.welcome-portrait{width:72px;height:72px}}
.welcome-language{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--txt-dim);font-size:11px}
.acceptance{display:flex;align-items:flex-start;gap:10px;margin:22px 0;font-size:12px;cursor:pointer}
.acceptance input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
.primary,#vr-enter{background:var(--accent);color:#141a20;border-color:var(--accent)}
#visit-enter{width:100%;min-height:42px}
.vr-mapping{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;font-size:12px}
.vr-mapping dt{font-weight:600;color:#e3c58b}.vr-mapping dd{margin:0;color:var(--txt-dim)}
.vr-beta{padding:12px;border-left:3px solid var(--accent);background:#ffb40012;color:#f3d199!important}
#vr-error{color:#ffc5af}
#vr-help-close{margin-left:8px}
.xr-presenting #labels,.xr-presenting #history-markers{display:none}
.history-marker{position:absolute;display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 8px 4px 4px;border-radius:20px;border:1px solid #efc46b;background:#151e2bed;color:#ffe0a0;pointer-events:auto;white-space:nowrap;box-shadow:0 3px 12px #0006}
.history-marker span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#111;font-weight:700}
.history-marker small{font-size:11px}
#history-index{padding:4px 0 10px}
.history-entry{display:block;min-height:40px;width:100%;text-align:left;border:0;border-bottom:1px solid #ffffff12;padding:8px 10px;color:#f2cc86;font-size:12px}
.history-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}
.history-facts div{padding:14px;border-radius:8px;background:#1e2a3a}
.history-facts dt{font-size:23px;color:#ffcc66;line-height:1.2}
.history-facts dd{font-size:11px;color:#bac5d4;margin:8px 0 0}
.history-chronology{padding-left:20px}
.history-chronology li{padding-left:8px}
.history-chronology strong{color:#ead3a4}
.history-visit{min-height:40px;background:var(--accent);color:#131b28}
.history-note{font-size:11px!important;border-left:2px solid #b78a3a;padding-left:12px}
/* Le sélecteur de lieu quitte le CENTRE dès 1460 px, et non 1100 : depuis que
   le titre porte le lien vers Genève 3D, la barre occupe 580 px à gauche, et un
   sélecteur centré commence à largeur/2 - 135. Il passait donc SOUS le lien
   entre 1100 et 1450 px — 75 px de recouvrement à 1280, mesurés. Adossé à
   droite, il laisse la place au titre à toutes ces largeurs. */
@media(max-width:1460px){
 .place-search{left:auto;right:0;transform:none;width:240px}
}
@media(max-width:1100px){
 .brand{font-size:20px;letter-spacing:.22em;gap:8px}
 #day-card{width:238px}
 #panel{width:254px}
 #speeds{max-width:132px}
 .time-main{gap:11px}
}
@media(max-width:700px){
 .topbar{top:10px;left:10px;right:10px}
 .brand{font-size:15px;letter-spacing:.18em;gap:6px;padding:8px}
 .brand img{width:25px;height:25px;border-radius:6px}
 .brand small{margin-left:2px}
 /* mobile : l'icône seule. Le titre occupe déjà la largeur, et le libellé
    traduit (« Genève aujourd'hui », « Geneva today ») passait à la ligne. */
 .crossnav{margin-left:6px;padding:8px 10px;font-size:11px;gap:5px}
 .crossnav::before{font-size:15px}
 .crossnav-long{display:none}
 .crossnav-short{display:inline}
 .place-search{display:none;top:94px;left:0;right:0;width:auto;max-height:calc(100dvh - 240px);overflow:auto;padding:12px;transform:none;background:#121a24;flex-direction:column}
 .place-search.is-open{display:flex}
 .place-heading{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;margin-bottom:8px}
 .place-heading button{border:0;font-size:22px;padding:0 7px}
 .place-field>span{display:none}
 #place-toggle{display:grid;place-items:center;width:40px;padding:5px}
 .place-search select{min-height:38px;background:#1d2935}
 .place-search select{font-size:11px;padding:5px}
 #map-controls{top:61px;left:10px}
 #panel{top:146px;left:10px;bottom:168px;width:min(290px,calc(100vw - 20px))}
 #day-card{top:146px;left:10px;right:10px;width:auto;padding:11px 36px 11px 14px}
 #day-card .eyebrow{font-size:7px;margin:0}
 #day-card h1{font-size:16px;margin:8px 0}
 #phase-copy{display:block;font-size:10px;line-height:1.5;margin-bottom:7px;max-height:60px;overflow:auto}
 .activity{font-size:9px}
 .interpretation{font-size:7px;margin-top:7px}
 .point-controls{margin:4px 0}
 .point-controls button{min-height:32px}
 /* Sur 390 px, le sélecteur de lieu ouvert et la carte d'explication se
    chevauchaient — deux panneaux empilés plus la liste déroulante native
    par-dessus (retour Arnaud, capture du 09.09.2026). Même règle que pour
    les filtres : le panneau ouvert a l'écran pour lui. */
 body:has(#panel:not([hidden])) #day-card,
 body:has(.place-search.is-open) #day-card{display:none}
 .timeline{left:10px;right:10px;width:auto;transform:none;bottom:calc(10px + env(safe-area-inset-bottom))}
 .time-main{display:grid;grid-template-columns:30px 57px 1fr;gap:6px 10px;padding:8px 10px 5px}
 #play{width:30px;height:30px}
 .clock{width:57px}.clock output{font-size:22px}
 #speeds{grid-column:3;grid-row:1;justify-content:flex-end;max-width:none;gap:3px}
 #speeds .chip{font-size:9px;padding:5px 4px}
 .time-track{grid-row:2;grid-column:1/-1}
 .time-caption{display:none}
 .timeline-foot{font-size:7px;padding:5px 10px}
 .desktop-help{display:none}.mobile-help{display:block}
 .map-meta{bottom:calc(var(--timeline-space,140px) + 14px);left:10px;transform:none;gap:12px;font-size:7px}
 #credits-toggle{bottom:calc(var(--timeline-space,140px) + 8px);right:10px;height:36px;width:38px}
 #credits{right:10px;bottom:calc(var(--timeline-space,140px) + 50px);width:calc(100vw - 20px);max-height:calc(100dvh - var(--timeline-space,140px) - 120px)}
 #warning{bottom:calc(var(--timeline-space,140px) + 50px)}
 dialog{padding:20px}
 dialog h2{font-size:23px}
 .map-label{font-size:8px;padding:3px 5px}
 .history-marker small{display:none}
 .history-marker{padding:5px;min-width:44px}
 .history-facts dt{font-size:21px}
 .vr-mapping{grid-template-columns:110px 1fr}
}
@media(max-width:700px) and (max-height:650px){
 #day-card{max-height:130px;overflow:auto}
 #day-card .eyebrow,#day-card .activity,#day-card .interpretation{display:none}
 #phase-copy{max-height:42px}
 #panel{top:105px;bottom:162px}
 .place-search{top:88px;max-height:calc(100dvh - 240px)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}