/* Styles du moteur OJMap. Partagés par le prototype et la page réelle. */
.ojm-host { overflow: hidden; background: #e7eff7; }
:root { --paper: #fdfcf9; --coast: #a3b4c6; --border: #d3c7b1; --line: #e4e8ef; --fill: #f2f4f8; --text: #1b2433; }

.ojm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; transform-origin: 0 0; }
/* Aperçu pendant un geste : l'image déjà dessinée est déplacée par la carte graphique. */
.ojm-markers { transform-origin: 0 0; }
.ojm-host.is-moving .ojm-svg, .ojm-host.is-moving .ojm-markers { will-change: transform; }
.ojm-svg.is-dragging { cursor: grabbing; }
.ojm-bathy path { stroke: none; }
.ojm-bathy [data-depth="200"]  { fill: #e6eef6; }
.ojm-bathy [data-depth="2000"] { fill: #dce6f0; }
.ojm-bathy [data-depth="4000"] { fill: #d5e1ed; }
/* 6 000 m volontairement proche de 4 000 : en haute mer, un écart plus fort faisait un
   patchwork « camouflage ». Le contraste est réservé aux fosses, 7 000 m et plus. */
.ojm-bathy [data-depth="6000"] { fill: #cfdcea; }
.ojm-bathy [data-depth="7000"] { fill: #b3c7dc; }
.ojm-bathy [data-depth="8000"] { fill: #a2bad3; }
.ojm-grat path { fill: none; stroke: #c7d4e1; stroke-width: .7; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ojm-coast-sh path { fill: rgba(31, 53, 82, .2); stroke: none; }
.ojm-coast path { fill: #f4f6ea; stroke: var(--coast); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ojm-terrain { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.ojm-terrain.is-on { opacity: 1; }
/* Au zoom très fort, la donnée (≈ 900 m par point) s'étire et le relief devient granuleux :
   on l'adoucit plutôt que de le montrer plus précis qu'il n'est. */
.ojm-svg[data-zoom="4"] .ojm-terrain.is-on { opacity: .62; }
.ojm-tile { opacity: 0; transition: opacity .4s ease; }
.ojm-tile.is-on { opacity: 1; }
/* Strates : le Japon est boisé aux deux tiers. Plaines vert très pâle (rizières, villes),
   collines et montagnes en verts de forêt de plus en plus soutenus, puis olive à l'étage
   subalpin et roche claire au sommet. 200, 600, 1 100, 1 700 et 2 400 m. Retour de Jordy :
   les tons papier beige « manquaient de verdure ». */
.ojm-relief path { stroke: none; pointer-events: none; }
.ojm-strate-sh { fill: rgba(40, 62, 30, .2); }
.ojm-strate[data-i="0"] .ojm-strate-fill { fill: #e5eed5; }
.ojm-strate[data-i="1"] .ojm-strate-fill { fill: #d5e5c1; }
.ojm-strate[data-i="2"] .ojm-strate-fill { fill: #c4dbae; }
.ojm-strate[data-i="3"] .ojm-strate-fill { fill: #d3d5b3; }
.ojm-strate[data-i="4"] .ojm-strate-fill { fill: #ece9df; }
/* Les préfectures sont transparentes : c'est le relief, dessous, qui fait le papier. */
.ojm-land path { fill: transparent; stroke: var(--border); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .2s; }
.ojm-land path:hover { fill: rgba(120, 100, 60, .07); }
.ojm-shindo path { fill: transparent; stroke: none; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.ojm-shindo path.is-on { opacity: var(--o, .6); }
.ojm-city circle { fill: #3a4656; stroke: var(--paper); stroke-width: 1.2; }
.ojm-city text, .ojm-ty-pt text, .ojm-ty-name { font: 500 10.5px Inter, system-ui, sans-serif; fill: #4a5668; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ojm-city.r1 text { font-weight: 600; fill: #2c3746; }
.ojm-city.r4 text, .ojm-city.r5 text { font-size: 10px; fill: #5b6676; }
.ojm-volc path { fill: #b0664a; stroke: var(--paper); stroke-width: 1.1; stroke-linejoin: round; }
.ojm-volc text { font-style: italic; fill: #8c5440; }
.ojm-trench text { font: italic 500 10.5px "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; letter-spacing: .1em; fill: #6f8aa6; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: rgba(225,234,243,.7); stroke-width: 3px; }
.ojm-svg[data-zoom="1"] .ojm-trench text { font-size: 9.5px; }
/* L'italique et les capitales espacées n'existent pas en japonais : un faux italique y fait sale. */
html[lang="ja"] .ojm-trench text, html[lang="ja"] .ojm-sea-label text { font-style: normal; letter-spacing: .35em; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.ojm-q-pulse { stroke-width: 2; pointer-events: none; }
.ojm-epi-lab rect { fill: #1b2433; }
.ojm-epi-lab text { font: 700 11.5px Inter, system-ui, sans-serif; fill: #fff; }
.ojm-sea-label text { font: italic 400 13px "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; letter-spacing: .12em; fill: #94a8bd; text-transform: uppercase; pointer-events: none; }
/* À l'échelle du pays sur un téléphone, les noms de fosses se battent avec les villes. */
.ojm-svg[data-narrow="1"][data-zoom="1"] .ojm-trench, .ojm-svg[data-narrow="1"][data-zoom="1"] .ojm-sea-label { display: none; }
.ojm-svg[data-narrow="1"] .ojm-badge.r1 { display: none; }
.ojm-q { cursor: pointer; }
.ojm-q-hit { fill: transparent; }
.ojm-q-dot { stroke: #fff; stroke-width: 1.3; transition: opacity .3s; }
.ojm-q.is-old .ojm-q-dot { opacity: .5; }
.ojm-q.is-fresh .ojm-q-dot { filter: drop-shadow(0 0 2.5px rgba(30,40,60,.35)); }
.ojm-q:hover .ojm-q-dot, .ojm-q:focus .ojm-q-dot { stroke: #1b2433; stroke-width: 1.8; }
.ojm-q:focus { outline: none; }
.ojm-q.is-dim { opacity: .22; }
.ojm-badge rect { stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 1px 1.5px rgba(20,30,50,.25)); }
.ojm-badge text { font: 700 11px Inter, system-ui, sans-serif; fill: #fff; }
.ojm-badge text.is-dark { fill: #3b3200; }
.ojm-epi .ojm-wave { fill: none; stroke: #e5484d; stroke-width: 1.6; }
.ojm-epi-halo { fill: #fff; opacity: .92; filter: drop-shadow(0 1px 2px rgba(20,30,50,.3)); }
.ojm-epi-x { stroke: #e5484d; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.ojm-tsu-line { fill: none; stroke-width: 16; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .95; }
.ojm-cone-u { opacity: .15; }
.ojm-svg[data-mode="q"] .ojm-cone, .ojm-svg[data-mode="q"] .ojm-track { display: none; }
.ojm-svg[data-mode="t"] .ojm-quakes { opacity: .35; pointer-events: none; }
.ojm-svg[data-mode="s"] .ojm-trench, .ojm-svg[data-mode="s"] .ojm-volc { display: none; }
.ojm-cone-u path { fill: #2f86d6; }
.ojm-ty-past { fill: none; stroke: #2f6fc0; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ojm-ty-fc { fill: none; stroke: #3a8fe0; stroke-width: 2.2; stroke-dasharray: 5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ojm-ty-pt circle { fill: #fff; stroke: #3a8fe0; stroke-width: 1.8; }
.ojm-ty-pt text { fill: #2f6fc0; font-weight: 600; }
.ojm-ty-cur { cursor: pointer; }
.ojm-ty-disc { fill: #2f6db0; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(20,40,80,.35)); }
.ojm-ty-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ojm-ty-name { font-size: 12px; font-weight: 700; fill: #1f4f86; }
.ojm-ctrl { position: absolute; right: 16px; top: 14px; z-index: 3; display: flex; flex-direction: column; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; backdrop-filter: blur(6px); }
.ojm-ctrl button { width: 36px; height: 36px; border: 0; background: transparent; font: 600 18px/1 Inter, system-ui, sans-serif; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.ojm-ctrl button + button { border-top: 1px solid var(--line); }
.ojm-ctrl button:hover { background: var(--fill); }
.ojm-tip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .15s; background: #1b2433; color: #fff; font-size: .82rem; padding: 7px 10px; border-radius: 9px; white-space: nowrap; box-shadow: 0 6px 18px rgba(20,30,50,.25); }
.ojm-tip.is-on { opacity: 1; }
.ojm-tip span { display: block; color: #aeb9c8; font-size: .76rem; margin-top: 1px; }
.ojm-tip.is-story { white-space: normal; width: max-content; max-width: 230px; line-height: 1.35; }
.ojm-tip.is-story span { margin-top: 3px; }

/* Marqueurs HTML posés par le widget à travers le faux mapboxgl. */
.ojm-markers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ojm-marker { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; }
/* Le disque flou « ohz-area » de la version Mapbox fait doublon avec la préfecture remplie. */
.ojm-markers .ohz-area { display: none; }

/* Sur la page réelle, le bouton plein écran du widget occupe le coin haut droit. */
.offbeat-hazard .ojm-ctrl { top: 66px; }

/* Au zoom fort, les paliers de profondeur simplifiés montrent leurs arêtes : on les pâlit.
   Ils servent à lire les fosses à l'échelle du pays, pas à l'échelle d'une île. */
.ojm-bathy { transition: opacity .5s; }
.ojm-svg[data-zoom="3"] .ojm-bathy, .ojm-svg[data-zoom="4"] .ojm-bathy { opacity: .4; }

/* Namazu, le poisson-chat des séismes. Bleu d'estampe, papier découpé, ombre portée. */
.ojm-namazu { cursor: help; transition: opacity .4s ease; }
.ojm-namazu.is-shy { opacity: .22; }
.ojm-nz-body { fill: #3f5f86; }
.ojm-nz-shadow { fill: rgba(25, 45, 75, .22); }
.ojm-nz-fin { fill: #2f4c70; }
.ojm-nz-belly { fill: #6f93bb; }
.ojm-nz-spot { fill: #2f4c70; opacity: .55; }
.ojm-nz-eye { fill: #fff; }
.ojm-nz-pupil { fill: #18283d; }
.ojm-nz-line { fill: none; stroke: #18283d; stroke-width: 1.1; stroke-linecap: round; }
.ojm-nz-whisker { fill: none; stroke: #3f5f86; stroke-width: 1.5; stroke-linecap: round; }
.ojm-nz-cat path { fill: #14161c; }
.ojm-nz-cat .ojm-nz-cat-tail { fill: none; stroke: #14161c; stroke-width: 1.1; stroke-linecap: round; }
.ojm-nz-cat-eye { fill: #f5c542; }
.ojm-namazu-sway { transform-box: fill-box; transform-origin: 40% 50%; }
.ojm-namazu.is-quaking .ojm-namazu-sway { animation: ojm-nz-wiggle .45s ease-in-out 4; }
@keyframes ojm-nz-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg) translateY(-1px); } 75% { transform: rotate(5deg) translateY(1px); } }
/* En gros plan, il ne doit pas voler la vedette aux séismes. */
.ojm-svg[data-zoom="3"] .ojm-namazu-sway > :not(.ojm-nz-cat), .ojm-svg[data-zoom="4"] .ojm-namazu-sway > :not(.ojm-nz-cat) { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .ojm-namazu.is-quaking .ojm-namazu-sway { animation: none; } }

/* Îles aux chats : une tête de chat noir à la place du point de ville. */
.ojm-catisle { cursor: help; }
.ojm-catisle-head { fill: #14161c; stroke: var(--paper); stroke-width: 1.1; stroke-linejoin: round; }
.ojm-catisle-eye { fill: #f5c542; }
.ojm-catisle text { font-style: italic; fill: #2c3746; }

/* Boussole-chat et échelle, en bas à gauche. */
.ojm-scale { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.ojm-compass path { fill: #14161c; }
.ojm-compass .e { fill: #f5c542; }
.ojm-compass text { font: 700 7px Inter, system-ui, sans-serif; fill: #fff; }
.ojm-scale-bar { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.ojm-scale-bar span { display: block; height: 5px; border: 1.5px solid #3a4656; border-top: 0; }
.ojm-scale-bar b { font: 600 10px Inter, system-ui, sans-serif; color: #3a4656; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

/* Kaname-ishi : pierre grise, corde de paille, papiers blancs. */
.ojm-kaname { cursor: help; }
.ojm-kaname-stone { fill: #8a8f96; stroke: var(--paper); stroke-width: 1; }
.ojm-kaname-rope { fill: none; stroke: #c9a45c; stroke-width: 1.6; stroke-linecap: round; }
.ojm-kaname-shide { fill: none; stroke: #fff; stroke-width: .9; stroke-linejoin: round; }
.ojm-kaname text { font-style: italic; fill: #3f5f86; }

/* Nekodake : un chat noir roulé en boule, qui dort. */
.ojm-nekodake { cursor: help; }
.ojm-nk-cat { fill: #14161c; stroke: var(--paper); stroke-width: .8; stroke-linejoin: round; paint-order: stroke; }
.ojm-nk-tail { fill: none; stroke: #14161c; stroke-width: 1.4; stroke-linecap: round; }
.ojm-nk-eye { fill: none; stroke: #f5c542; stroke-width: .6; stroke-linecap: round; }
.ojm-nk-z { font: italic 700 4px Inter, system-ui, sans-serif; fill: #3f5f86; }
.ojm-nk-z2 { font-size: 3px; }
.ojm-egg > text { font-style: italic; fill: #2c3746; }

/* Le secret de Namazu : le chat sursaute, des bulles montent. */
.ojm-nz-hop { transform-box: fill-box; transform-origin: 50% 100%; }
.ojm-namazu.is-hopping .ojm-nz-hop { animation: ojm-nz-hop .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ojm-nz-hop { 0% { transform: none; } 35% { transform: translateY(-16px) rotate(-14deg); } 70% { transform: translateY(1px) scaleY(.9); } 100% { transform: none; } }
.ojm-nz-bubble { fill: rgba(255, 255, 255, .85); stroke: #6f93bb; stroke-width: .5; transform-box: fill-box; animation: ojm-nz-bubble 1.2s ease-out both; }
@keyframes ojm-nz-bubble { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-7px, -16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ojm-namazu.is-hopping .ojm-nz-hop, .ojm-nz-bubble { animation: none; } }

/* Vagues d'estampe : papier blanc, ombre bleue. Discrètes, et absentes en gros plan. */
.ojm-wave path { stroke: none; pointer-events: none; }
.ojm-wave-crest { fill: #fff; }
.ojm-wave-sh { fill: #a9bfd6; }
.ojm-wave.is-flip path { transform: scaleX(-1); }
.ojm-svg[data-zoom="3"] .ojm-wave, .ojm-svg[data-zoom="4"] .ojm-wave { display: none; }
.ojm-svg[data-narrow="1"][data-zoom="1"] .ojm-wave { display: none; }

/* Maneki-neko du Gōtoku-ji : chat blanc, collier rouge, clochette dorée. */
.ojm-egg { cursor: help; }
.ojm-mk-body { fill: #fff; stroke: #14161c; stroke-width: .6; stroke-linejoin: round; }
.ojm-mk-collar { fill: none; stroke: #d6332f; stroke-width: 1; stroke-linecap: round; }
.ojm-mk-bell { fill: #e6b422; }
.ojm-mk-eye { fill: none; stroke: #14161c; stroke-width: .5; stroke-linecap: round; }

/* Gare de Kishi : chat tricolore en casquette de chef de gare. */
.ojm-ks-head { fill: #fff; stroke: #14161c; stroke-width: .6; stroke-linejoin: round; }
.ojm-ks-orange { fill: #e8913a; }
.ojm-ks-black { fill: #14161c; }
.ojm-ks-cap { fill: #1f3a6b; }
.ojm-ks-band { stroke: #e6b422; stroke-width: .7; }
.ojm-ks-visor { fill: none; stroke: #14161c; stroke-width: .8; stroke-linecap: round; }
.ojm-ks-eye { fill: #14161c; }

/* L'indice de la boussole-chat. */
.ojm-compass-btn { pointer-events: auto; position: relative; display: block; padding: 0; border: 0; background: none; cursor: help; line-height: 0; }
.ojm-compass-btn:focus-visible { outline: 2px solid #3f5f86; outline-offset: 2px; border-radius: 6px; }
.ojm-compass-btn:hover .ojm-compass, .ojm-scale.is-hint .ojm-compass { transform: rotate(-8deg); }
.ojm-compass { transition: transform .2s ease; }
.ojm-hint { position: absolute; left: -2px; bottom: calc(100% + 8px); width: max-content; max-width: 210px; padding: 7px 10px; border-radius: 9px; background: #1b2433; color: #fff; font: 500 12.5px/1.35 Inter, system-ui, sans-serif; text-align: left; box-shadow: 0 6px 18px rgba(20,30,50,.25); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.ojm-compass-btn:hover .ojm-hint, .ojm-compass-btn:focus-visible .ojm-hint, .ojm-scale.is-hint .ojm-hint { opacity: 1; transform: none; }

/* Mode sobre (séisme de shindo 5- ou plus en 24 h, ou alerte tsunami) : plus de fantaisie. */
.ojm-svg[data-grave="1"] .ojm-namazu, .ojm-svg[data-grave="1"] .ojm-wave, .ojm-svg[data-grave="1"] .ojm-egg { display: none; }
.ojm-scale.is-grave .ojm-compass-btn { pointer-events: none; }
.ojm-scale.is-grave .ojm-hint { display: none; }

/* Nos articles : petits cadres photo dorés ; emblèmes avec icône et nom. */
.ojm-art { cursor: pointer; }
.ojm-art-dot { fill: #c4a35a; stroke: #fff; stroke-width: 1.4; }
.ojm-art:hover .ojm-art-dot, .ojm-art:focus .ojm-art-dot { fill: #a8862f; }
.ojm-emblem > text { font-weight: 600; font-style: italic; fill: #2c3746; }
.ojm-em-ship { fill: #5d6b7a; stroke: var(--paper); stroke-width: .8; stroke-linejoin: round; }
.ojm-em-torii path { fill: none; stroke: #e0452b; stroke-linecap: round; }
.ojm-em-torii .beam { stroke-width: 1.6; }
.ojm-em-torii .post { stroke-width: 1.2; }
.ojm-em-torii.is-back path { stroke: #f08a6d; }
.ojm-em-kodama-b { fill: #fff; stroke: #9aa48f; stroke-width: .6; }
.ojm-em-kodama-f { fill: #2c3746; }
/* Carte d'article : blanche, image en tête, titre en serif, comme les cartes du site. */
.ojm-acard { position: absolute; left: 0; top: 0; z-index: 5; width: 240px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ojm-acard.is-on { opacity: 1; pointer-events: auto; }
.ojm-acard-in { display: block; overflow: hidden; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; box-shadow: 0 10px 28px rgba(20,30,50,.18); color: #1a1a1a; text-decoration: none; }
.ojm-acard-in img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #eef1f4; }
.ojm-acard-t { display: block; padding: 10px 12px 2px; font: 700 15px/1.3 Merriweather, Georgia, serif; }
.ojm-acard-go { display: block; padding: 2px 12px 11px; font: 600 12.5px Inter, system-ui, sans-serif; color: #a8862f; }
.ojm-acard-in:hover .ojm-acard-go, .ojm-acard-in:focus-visible .ojm-acard-go { text-decoration: underline; }
.ojm-svg[data-grave="1"] .ojm-emblem { display: none; }

/* Les neuf emblèmes ajoutés. */
.ojm-em-stick { stroke: #8a6a45; stroke-width: 1; stroke-linecap: round; }
.ojm-em-cell { fill: #5d6b7a; stroke: var(--paper); stroke-width: .8; }
.ojm-em-bars { stroke: #e9edf2; stroke-width: .9; stroke-linecap: round; }
.ojm-em-kimono { fill: #c0504d; stroke: var(--paper); stroke-width: .6; stroke-linejoin: round; }
.ojm-em-face { fill: #f3d9bd; stroke: #8a6a45; stroke-width: .5; }
.ojm-em-scarf { fill: #3f5f86; }
.ojm-em-bunny { fill: #fff; stroke: #8b95a3; stroke-width: .6; }
.ojm-em-dark { fill: #14161c; }
.ojm-em-keep { fill: #fff; stroke: #2c3746; stroke-width: .7; stroke-linejoin: round; }
.ojm-em-cloud { fill: #fff; stroke: #9fb4c9; stroke-width: .7; }
.ojm-em-rim { fill: #7f9d5e; stroke: var(--paper); stroke-width: .7; }
.ojm-em-crater { fill: #cfe0bb; }
.ojm-em-water { fill: none; stroke: #2f86d6; stroke-width: .9; stroke-linecap: round; }
.ojm-em-tail { fill: none; stroke: #14161c; stroke-width: 1.1; stroke-linecap: round; }