/* Carte animée des références (scripts/refmap.mjs, assets/js/refmap.js) — panneau sombre dans les deux thèmes */
.rm { --rm-bg: #0b0d22; --rm-bg2: #15184a; --rm-txt: #eceaff; --rm-mut: #a9a6cf; --rm-dot: #c9c6f4; --rm-cu: #e0995c; --rm-gr: #6fd27a; --rm-line: rgba(201, 198, 244, .14);
  position: relative; margin-top: 2.5rem; border-radius: calc(var(--radius) + 6px); padding: clamp(1.1rem, 2.6vw, 2rem); color: var(--rm-txt); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 70% at 72% 18%, rgba(224, 153, 92, .14), transparent 60%), radial-gradient(80% 90% at 10% 100%, rgba(95, 176, 98, .10), transparent 55%), linear-gradient(160deg, var(--rm-bg2), var(--rm-bg) 62%);
  box-shadow: 0 30px 80px -30px rgba(11, 13, 34, .55), inset 0 0 0 1px rgba(201, 198, 244, .10); }
.rm::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--rm-line) 1px, transparent 1px), linear-gradient(90deg, var(--rm-line) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); }

/* Compteurs */
.rm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.rm-stats > div { border: 1px solid rgba(201, 198, 244, .16); border-radius: 14px; padding: .9rem 1.1rem; background: rgba(255, 255, 255, .03); }
.rm-stats b { display: block; font-family: var(--mono); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--rm-cu); font-weight: 600; font-variant-numeric: tabular-nums; }
.rm-stats span { display: block; margin-top: .4rem; color: var(--rm-mut); font-size: .92rem; }

/* Filtre par période */
.rm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.2rem; }
.rm-filters span { color: var(--rm-mut); font-size: .85rem; margin-inline-end: .3rem; }
.rm-filters button { font: inherit; font-size: .85rem; color: var(--rm-txt); background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 198, 244, .25); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; }
.rm-filters button[aria-pressed="true"] { background: var(--rm-cu); border-color: var(--rm-cu); color: #1b1206; font-weight: 700; }
.rm-filters button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rm-c.off { opacity: .22; } .rm-arc.off { stroke-opacity: .08; } .rm-arc.off + .rm-p { display: none; }
.rm-c, .rm-arc { transition: opacity .4s; }

/* Grille : Maroc entier | détail A | fiche */
.rm-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(.8rem, 2vw, 1.6rem); align-items: start; }
.rm-col { margin: 0; position: relative; min-width: 0; }
.rm-col figcaption { margin-top: .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-mut); }
[dir="rtl"] .rm-col figcaption { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: .85rem; }
.rm-col-zoom { border: 1px solid rgba(224, 153, 92, .35); border-radius: 14px; padding: .4rem; background: rgba(11, 13, 34, .45); }
.rm-col-zoom figcaption { padding-inline: .4rem; }
.rm-tag { display: inline-block; font-family: var(--mono); font-size: .7rem; color: var(--rm-cu); border: 1px solid rgba(224, 153, 92, .5); border-radius: 999px; padding: .05rem .5rem; margin-inline-end: .4rem; text-transform: none; letter-spacing: 0; }
.rm svg { direction: ltr; position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: hidden; }

/* SVG : fond */
.rm-grat line { stroke: var(--rm-dot); stroke-opacity: .10; stroke-width: .6; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.rm-grat text { fill: var(--rm-mut); fill-opacity: .8; font-family: var(--mono); font-size: 20px; }
.rm-zoom .rm-grat text { font-size: 3.4px; }
.rm-d { fill: var(--rm-dot); fill-opacity: .42; transform-box: fill-box; transform-origin: center; }
.rm-zoom .rm-d { fill-opacity: .26; }
.rm-rose circle { fill: none; stroke: var(--rm-dot); stroke-opacity: .25; }
.rm-rose path { fill: var(--rm-dot); fill-opacity: .35; } .rm-rose path.n { fill: var(--rm-cu); fill-opacity: .9; }
.rm-rose text { fill: var(--rm-mut); font-family: var(--mono); font-size: 13px; }
.rm-scale text { fill: var(--rm-mut); font-family: var(--mono); font-size: 19px; }
.rm-scale rect { height: 7px; }
.rm-scale rect { fill: var(--rm-dot); fill-opacity: .7; } .rm-scale rect.w { fill: none; stroke: var(--rm-dot); stroke-opacity: .7; }
.rm-frame { fill: rgba(224, 153, 92, .05); stroke: var(--rm-cu); stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 6 4; }
.rm-frame-l { fill: var(--rm-cu); font-family: var(--mono); font-size: 16px; font-weight: 700; }
.rm-svg { position: relative; overflow: hidden; border-radius: 10px; }
.rm-range circle { fill: none; stroke: var(--rm-gr); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
/* Faisceau radar : dégradé conique centré sur le siège, qui tourne */
.rm-radar { position: absolute; z-index: 0; left: var(--x); top: var(--y); width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg, rgba(111, 210, 122, .03) 300deg, rgba(224, 153, 92, .13) 352deg, rgba(255, 220, 180, .34) 359.5deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.rm-radar.big { width: 230%; }

/* Arcs et voyageurs */
.rm-arc { fill: none; stroke: var(--rm-cu); stroke-opacity: .45; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; transition: stroke-opacity .3s, stroke-width .3s; }
.rm-arc.big { stroke-width: 2; stroke-opacity: .7; }
.rm-arc.on { stroke-opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(224, 153, 92, .9)); }
.rm-p { fill: #fff3e6; opacity: 0; filter: drop-shadow(0 0 2px #e0995c); offset-rotate: 0deg; }

/* Villes */
.rm-c { cursor: pointer; outline: none; }
.rm-c .rm-core { fill: var(--rm-cu); filter: drop-shadow(0 0 2px rgba(224, 153, 92, .95)); transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.rm-c .rm-halo { fill: var(--rm-cu); fill-opacity: 0; transition: fill-opacity .3s; }
.rm-c .rm-ring { fill: none; stroke: var(--rm-cu); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.rm-c.hq .rm-core { fill: var(--rm-gr); filter: drop-shadow(0 0 3px rgba(111, 210, 122, .95)); }
.rm-c.hq .rm-ring, .rm-c.hq .rm-arc { stroke: var(--rm-gr); }
.rm-c.hq .rm-halo { fill: var(--rm-gr); }
.rm-c text { fill: var(--rm-txt); font-family: var(--mono); font-size: 5.4px; transition: fill .3s; }
.rm-c .rm-pill { fill: #0b0d22; fill-opacity: .82; stroke: rgba(201, 198, 244, .22); stroke-width: .5px; vector-effect: non-scaling-stroke; }
.rm-c.hq .rm-pill { stroke: rgba(111, 210, 122, .5); }
.rm-c.on .rm-pill, .rm-c.hl .rm-pill { stroke: var(--rm-cu); }
.rm-lead { stroke: var(--rm-dot); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 1.5 1.5; vector-effect: non-scaling-stroke; }
.rm-main .rm-c text { font-size: 24px; }
[dir="rtl"] .rm-c text { font-family: var(--sans); font-size: 6px; font-weight: 600; }
[dir="rtl"] .rm-main .rm-c text { font-size: 26px; }
.rm-c .rm-hq { fill: var(--rm-gr); font-weight: 700; }
.rm-c:hover .rm-halo, .rm-c.on .rm-halo, .rm-c.hl .rm-halo { fill-opacity: .22; }
.rm-c.on .rm-core, .rm-c.hl .rm-core { transform: scale(1.45); }
.rm-c.on text, .rm-c.hl text { fill: #fff; }
.rm-c:focus-visible .rm-halo { fill-opacity: .3; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* Fiche */
.rm-side { display: flex; flex-direction: column; gap: 1rem; }
.rm-card { border: 1px solid rgba(201, 198, 244, .18); border-radius: 14px; padding: 1.1rem 1.2rem; background: rgba(11, 13, 34, .55); min-height: 16rem; }
.rm-k { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rm-cu); }
[dir="rtl"] .rm-k { font-family: var(--sans); letter-spacing: 0; font-size: .9rem; }
.rm-name { margin: .2rem 0 .7rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #fff; }
.rm-hud { margin: 0; display: grid; gap: .25rem; font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums; }
.rm-hud div { display: flex; gap: .7rem; } .rm-hud dt { color: var(--rm-mut); min-width: 5.6em; } .rm-hud dd { margin: 0; color: #c8f0cc; white-space: nowrap; }
.rm-hud dd[dir="auto"] { font-family: var(--sans); }
.rm-src { margin: .45rem 0 .7rem; font-size: .8rem; color: var(--rm-mut); }
.rm-n { margin: 0 0 .5rem; font-weight: 700; color: #fff; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-height: 15.5rem; overflow-y: auto; padding-inline-end: .3rem; scrollbar-width: thin; }
.rm-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; font-size: .88rem; line-height: 1.4; border-top: 1px solid rgba(201, 198, 244, .1); padding-top: .5rem; }
.rm-list .y { grid-row: span 2; font-family: var(--mono); color: var(--rm-cu); font-size: .78rem; padding-top: .1rem; white-space: nowrap; }
.rm-list b { color: var(--rm-txt); font-weight: 600; overflow-wrap: break-word; hyphens: auto; } .rm-list .cl { color: var(--rm-mut); font-size: .82rem; }
.rm-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.rm-ctrl p { margin: 0; font-size: .82rem; color: var(--rm-mut); flex: 1 1 12rem; }
.rm-tour { font: inherit; font-size: .85rem; color: var(--rm-txt); background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 198, 244, .3); border-radius: 999px; padding: .45rem .95rem; cursor: pointer; }
.rm-tour:hover { background: rgba(255, 255, 255, .12); }
.rm-tour:focus-visible, .rm-card :focus-visible { outline: 2px solid var(--rm-cu); outline-offset: 2px; }
.rm-card.flash { animation: rmFlash .5s var(--ease); }

/* ---- Animations (seulement quand la section est visible : classe .in posée par site.js) ---- */
.rm.in .rm-d { animation: rmDot .7s var(--ease) both; animation-delay: var(--d); }
.rm.in .rm-c { animation: rmCity .7s var(--ease) both; animation-delay: calc(1.1s + var(--i) * .16s); }
.rm.in .rm-arc { stroke-dasharray: 1; animation: rmDraw 1.3s var(--ease) both; animation-delay: calc(1.3s + var(--i) * .16s); }
.rm.in .rm-ring { animation: rmPing 2.8s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(2s + var(--i) * .31s); }
.rm.in .rm-ring.r2 { animation-delay: calc(3.4s + var(--i) * .31s); }
.rm.in .rm-c.hq .rm-ring { animation-duration: 2.2s; }
.rm.in .rm-c.on .rm-ring { animation-duration: 1.4s; }
.rm.in .rm-p { animation: rmTravel 3.6s ease-in-out infinite; animation-delay: calc(2.8s + var(--i) * .47s); }
.rm.in .rm-radar { opacity: 1; transition: opacity 1.2s 2s; animation: rmSpin 7s linear infinite; }
.rm.in .rm-range circle { animation: rmDot 1s var(--ease) both; animation-delay: calc(.6s + var(--i) * .25s); transform-box: fill-box; transform-origin: center; }
@keyframes rmDot { from { opacity: 0; transform: scale(.2); } }
@keyframes rmCity { from { opacity: 0; transform: scale(.3); } 60% { opacity: 1; } }
@keyframes rmDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rmPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes rmTravel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes rmSpin { to { transform: rotate(360deg); } }
@keyframes rmFlash { from { border-color: rgba(224, 153, 92, .9); box-shadow: 0 0 0 4px rgba(224, 153, 92, .18); } }
.rm .rm-c { transform-box: fill-box; transform-origin: center; }

/* Mouvements réduits : tout est affiché, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  .rm.in .rm-d, .rm.in .rm-c, .rm.in .rm-arc, .rm.in .rm-ring, .rm.in .rm-p, .rm.in .rm-radar, .rm.in .rm-range circle, .rm-card.flash { animation: none; }
  .rm .rm-radar, .rm .rm-p, .rm .rm-ring { display: none; }
}
.a11y-rm .rm.in .rm-d, .a11y-rm .rm.in .rm-c, .a11y-rm .rm.in .rm-arc, .a11y-rm .rm.in .rm-ring, .a11y-rm .rm.in .rm-p, .a11y-rm .rm.in .rm-radar, .a11y-rm .rm.in .rm-range circle, .a11y-rm .rm-card.flash { animation: none; }
.a11y-rm .rm .rm-radar, .a11y-rm .rm .rm-p, .a11y-rm .rm .rm-ring { display: none; }

/* Thème sombre : le panneau se détache du fond de page */
:root[data-theme="dark"] .rm { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(224, 153, 92, .28), 0 0 60px -20px rgba(224, 153, 92, .25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(224, 153, 92, .28), 0 0 60px -20px rgba(224, 153, 92, .25); } }

/* Contraste renforcé */
.a11y-hc .rm { --rm-mut: #d6d4f2; --rm-dot: #e6e4ff; }

/* Écrans moyens et petits */
@media (max-width: 1080px) {
  .rm-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .rm-col-zoom { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 640px) {
  .rm-grid { grid-template-columns: 1fr; }
  .rm-col-main { max-width: 340px; justify-self: center; width: 100%; }
  .rm-stats { grid-template-columns: 1fr; gap: .5rem; }
  .rm-stats > div { display: flex; align-items: baseline; gap: .8rem; padding: .6rem .9rem; }
  .rm-stats b { font-size: 1.7rem; } .rm-stats span { margin: 0; }
  .rm-zoom .rm-c text { font-size: 6.2px; }
  [dir="rtl"] .rm-zoom .rm-c text { font-size: 6.8px; }
  .rm-zoom .rm-grat text { display: none; }
}
@media print { .rm { box-shadow: none; } .rm-radar, .rm-p, .rm-ring, .rm-ctrl { display: none; } }

/* Chronologie de la page Références liée à la carte */
.tl.big > li[hidden], .tl.big .entry[hidden] { display: none; }
.tl.big .entry[tabindex] { cursor: pointer; border-radius: 8px; }
.tl.big .entry[tabindex]:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: 6px; }
/* Fiche sur écran étroit ou texte agrandi : les lignes de l'afficheur passent à la ligne au lieu d'être rognées */
@media (max-width: 640px) { .rm-hud div { flex-wrap: wrap; column-gap: .5rem; } .rm-hud dt { min-width: 0; } .rm-hud dd { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 640px) { .rm-stats > div { flex-wrap: wrap; min-width: 0; } .rm-stats span { min-width: 0; overflow-wrap: break-word; } .rm { padding-inline: .8rem; } }