/* ============================================================
   exp-map.css — carte 3D du parcours (page Expériences, 2026-10-11).
   Logique : assets/js/experience-map.js. Suit le thème du site
   (html.light = clair, le défaut). Règle de la DA : pas de bordure sur
   les boutons ni les éléments sélectionnés — fonds et ombres seulement.
   ============================================================ */

.xm {
  --xm-glass: rgba(255, 255, 255, .84);
  --xm-glass-2: rgba(255, 255, 255, .94);
  --xm-text: #0a0a0c;
  --xm-muted: rgba(10, 10, 12, .56);
  --xm-faint: rgba(10, 10, 12, .08);
  --xm-sel: rgba(10, 10, 12, .06);
  --xm-ink: #0a0a0c;
  --xm-ink-fg: #fff;
  --xm-shadow: 0 1px 2px rgba(10, 10, 12, .06), 0 18px 40px -18px rgba(10, 10, 12, .28);
  --xm-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; height: clamp(560px, 78vh, 780px); border-radius: 28px; overflow: hidden; isolation: isolate;
  background: #eef0f3; box-shadow: var(--v3-shadow, 0 24px 50px -28px rgba(10,10,12,.18)); outline: none;
  font-family: var(--v3-font, inherit);
}
html:not(.light) .xm {
  --xm-glass: rgba(16, 16, 20, .78);
  --xm-glass-2: rgba(22, 22, 27, .92);
  --xm-text: #f5f5f7;
  --xm-muted: rgba(233, 233, 238, .55);
  --xm-faint: rgba(255, 255, 255, .08);
  --xm-sel: rgba(255, 255, 255, .08);
  --xm-ink: #f5f5f7;
  --xm-ink-fg: #0a0a0c;
  --xm-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -20px rgba(0, 0, 0, .7);
  background: #0b0b0e;
}
.xm.is-fs { position: fixed; inset: 0; height: auto; border-radius: 0; z-index: 10050; }
.xm-map { position: absolute; inset: 0; }
.xm-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 120px 10px rgba(246, 246, 243, .55); }
html:not(.light) .xm-veil { box-shadow: inset 0 0 140px 20px rgba(7, 7, 10, .7); }

/* Verre commun aux panneaux flottants */
.xm-panel, .xm-tools > *, .xm-card, .xm .maplibregl-ctrl-group, .xm-hint, .xm-fallback {
  background: var(--xm-glass); color: var(--xm-text); box-shadow: var(--xm-shadow);
  backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
}

/* ── Panneau « Parcours » ── */
.xm-panel { position: absolute; z-index: 3; top: 16px; left: 16px; bottom: 16px; width: 340px; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; }
.xm-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; }
.xm-kicker { margin: 0; font-family: var(--v3-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--xm-muted); }
.xm-panel-title { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--xm-text); }
.xm-play { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border: 0; border-radius: 999px; cursor: pointer; background: var(--xm-ink); color: var(--xm-ink-fg); font: 600 13px/1 var(--v3-font, inherit); transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.xm-play:hover { transform: translateY(-1px); }
.xm-play-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--xm-ink-fg); position: relative; }
.xm-play-ico::after { content: ''; position: absolute; left: 7px; top: 5px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--xm-ink); }
.xm-play.on .xm-play-ico::after { left: 6px; top: 6px; width: 6px; height: 6px; border: 0; background: linear-gradient(90deg, var(--xm-ink) 0 2px, transparent 2px 4px, var(--xm-ink) 4px); }

.xm-filters { display: flex; gap: 6px; padding: 0 20px 14px; overflow-x: auto; scrollbar-width: none; }
.xm-filters::-webkit-scrollbar { display: none; }
.xm-filters button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 0; border-radius: 999px; cursor: pointer; background: var(--xm-sel); color: var(--xm-muted); font: 500 12.5px/1 var(--v3-font, inherit); transition: background .2s, color .2s; }
.xm-filters button i { width: 7px; height: 7px; border-radius: 50%; }
.xm-filters button b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .6; }
.xm-filters button:hover { color: var(--xm-text); }
.xm-filters button.on { background: var(--xm-ink); color: var(--xm-ink-fg); }

.xm-list { list-style: none; margin: 0; padding: 4px 10px 14px; overflow-y: auto; flex: 1; scrollbar-width: thin; position: relative; }
.xm-list li { position: relative; }
/* Fil chronologique qui relie les étapes */
.xm-list li + li::before { content: ''; position: absolute; left: 21px; top: -10px; height: 20px; width: 1.5px; background: var(--xm-faint); }
.xm-item { width: 100%; display: grid; grid-template-columns: 12px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 14px; background: transparent; color: var(--xm-text); text-align: left; cursor: pointer; font-family: inherit; transition: background .2s; }
.xm-item:hover { background: var(--xm-sel); }
.xm-item.is-active { background: var(--xm-glass-2); box-shadow: var(--xm-shadow); }
.xm-item-dot { width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.xm-item-logo { width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 1px 2px rgba(10,10,12,.12); }
.xm-item-logo img { width: 30px; height: 30px; object-fit: contain; }
.xm-item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xm-item-text strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-item-text small { font-size: 12px; color: var(--xm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-item-year { font-family: var(--v3-mono, monospace); font-size: 11.5px; color: var(--xm-muted); }
.xm-item:focus-visible, .xm-filters button:focus-visible, .xm-play:focus-visible, .xm-tool:focus-visible, .xm-seg button:focus-visible,
.xm-nav:focus-visible, .xm-more:focus-visible, .xm-card-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(77, 107, 255, .5); }

/* ── Outils (haut droite) ── */
.xm-tools { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 8px; }
.xm-seg { display: flex; padding: 4px; border-radius: 999px; }
.xm-seg button { padding: 7px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--xm-muted); font: 600 12.5px/1 var(--v3-mono, monospace); cursor: pointer; transition: background .2s, color .2s; }
.xm-seg button.on { background: var(--xm-ink); color: var(--xm-ink-fg); }
.xm-tool { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.xm-tool svg { width: 16px; height: 16px; }
.xm-tool:hover { transform: translateY(-1px); }

/* Contrôles MapLibre (zoom / boussole) restylés, sans bordure */
.xm .maplibregl-ctrl-top-right { top: 62px; right: 6px; }
.xm .maplibregl-ctrl-group { border-radius: 14px; overflow: hidden; }
.xm .maplibregl-ctrl-group button { width: 34px; height: 34px; background-color: transparent; border: 0 !important; }
.xm .maplibregl-ctrl-group button + button { border-top: 0; box-shadow: 0 -1px 0 var(--xm-faint); }
.xm .maplibregl-ctrl-group button:hover { background-color: var(--xm-sel); }
html:not(.light) .xm .maplibregl-ctrl-icon { filter: invert(1); }
.xm .maplibregl-ctrl-attrib { background: var(--xm-glass) !important; color: var(--xm-muted); font-size: 10.5px; border-radius: 10px; }
.xm .maplibregl-ctrl-attrib a { color: inherit; }
html:not(.light) .xm .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* ── Repères : dessinés par la carte (couches WebGL, voir experience-map.js) ── */
.xm .maplibregl-canvas { outline: none; }
/* Mode 2D : pas de rotation, donc pas de boussole ni d'astuce « pivoter » */
.xm.is-2d .xm-hint { display: none; }
.xm .maplibregl-ctrl-compass[hidden] { display: none; }

/* ── Fiche de l'étape ── */
.xm-card { position: absolute; z-index: 4; right: 16px; bottom: 40px; width: 370px; padding: 22px; border-radius: 22px; overflow: hidden; }
.xm-card[hidden] { display: none; }
.xm-card.in { animation: xmCardIn .7s var(--xm-ease) both; }
@keyframes xmCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.xm-card.in > * { animation: xmCardIn .7s var(--xm-ease) both; }
.xm-card.in > :nth-child(3) { animation-delay: .05s; }
.xm-card.in > :nth-child(4) { animation-delay: .1s; }
.xm-card.in > :nth-child(5) { animation-delay: .15s; }
.xm-card.in > :nth-child(6) { animation-delay: .2s; }
.xm-card-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.xm-card-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8b5cf6, #4c5eff); }
.xm-card-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--xm-sel); color: var(--xm-muted); cursor: pointer; }
.xm-card-close svg { width: 14px; height: 14px; }
.xm-card-close:hover { color: var(--xm-text); }
.xm-card-top { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.xm-card-logo { flex: none; width: 52px; height: 52px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(10,10,12,.12); }
.xm-card-logo img { width: 40px; height: 40px; object-fit: contain; }
.xm-card-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--v3-mono, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--xm-muted); }
.xm-card-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #4c5eff); }
.xm-card-title { margin: 4px 0 0; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--xm-text); }
.xm-card-company { margin: 2px 0 0; font-size: 13px; color: var(--xm-muted); }
.xm-card-desc { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--xm-muted); }
.xm-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.xm-card-meta span { padding: 5px 9px; border-radius: 8px; background: var(--xm-sel); font-family: var(--v3-mono, monospace); font-size: 11.5px; color: var(--xm-text); }
.xm-card-meta span:empty { display: none; }
.xm-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.xm-nav { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--xm-sel); color: var(--xm-text); cursor: pointer; transition: background .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.xm-nav svg { width: 15px; height: 15px; }
.xm-nav:hover { transform: translateY(-1px); }
.xm-step { font-family: var(--v3-mono, monospace); font-size: 11.5px; color: var(--xm-muted); }
.xm-more { margin-left: auto; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--xm-ink); color: var(--xm-ink-fg); font: 600 12.5px/1 var(--v3-font, inherit); cursor: pointer; }
.xm-more[hidden] { display: none; }

.xm-hint { position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; color: var(--xm-muted); white-space: nowrap; transition: opacity .6s, filter .6s; pointer-events: none; }
.xm-hint.gone { opacity: 0; filter: blur(6px); }
.xm-card:not([hidden]) ~ .xm-hint { opacity: 0; }
.xm-fallback { position: absolute; z-index: 2; left: 380px; right: 24px; top: 50%; transform: translateY(-50%); padding: 18px 20px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.xm-fallback[hidden] { display: none; }

/* ── Tablette / mobile : panneau en bas, liste horizontale ── */
@media (max-width: 1100px) and (min-width: 760px) {
  .xm-panel { width: 300px; }
  .xm-card { width: 330px; }
}
@media (max-width: 759px) {
  .xm { height: min(86vh, 720px); border-radius: 22px; }
  .xm-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; border-radius: 18px; }
  .xm-panel-head { padding: 14px 14px 10px; }
  .xm-panel-title { font-size: 15px; }
  .xm-filters { padding: 0 14px 10px; }
  .xm-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 0 10px 12px; scroll-snap-type: x mandatory; }
  .xm-list li { flex: none; width: 76%; scroll-snap-align: center; }
  .xm-list li + li::before { display: none; }
  .xm-item { grid-template-columns: 38px minmax(0, 1fr) auto; background: var(--xm-sel); }
  .xm-item-dot { display: none; }
  .xm-tools { top: 10px; right: 10px; }
  .xm .maplibregl-ctrl-top-right { top: 54px; right: 0; }
  .xm-card { left: 10px; right: 10px; width: auto; bottom: 214px; padding: 18px; }
  .xm-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; }
  .xm-hint { display: none; }
  .xm-fallback { left: 16px; right: 16px; top: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .xm-card.in, .xm-card.in > * { animation: none; }
}
.xm #exp-map.xm-map { height: auto; border-radius: 0; }

/* ── Panneau repliable (bouton « ‹ » dans l'en-tête, pastille pour rouvrir) ── */
.xm-panel { transition: transform .55s var(--xm-ease), opacity .4s ease, filter .45s ease, visibility 0s linear 0s; }
.xm-panel-head .xm-play { margin-left: auto; }
.xm-collapse { flex: none; width: 34px; height: 34px; margin: 0 -6px 0 2px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--xm-sel); color: var(--xm-muted); transition: color .2s, background .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.xm-collapse svg { width: 16px; height: 16px; }
.xm-collapse:hover { color: var(--xm-text); transform: translateX(-2px); }
.xm.is-collapsed .xm-panel { transform: translateX(calc(-100% - 28px)); opacity: 0; filter: blur(6px); pointer-events: none; visibility: hidden;
  transition: transform .5s var(--xm-ease), opacity .35s ease, filter .4s ease, visibility 0s linear .5s; }
.xm-reopen { position: absolute; z-index: 3; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px 10px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--xm-glass); color: var(--xm-text); box-shadow: var(--xm-shadow); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
  font: 600 13px/1 var(--v3-font, inherit); animation: xmReopenIn .5s var(--xm-ease) .15s both; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.xm-reopen[hidden] { display: none; }
.xm-reopen:hover { transform: translateX(2px); }
.xm-reopen svg { width: 16px; height: 16px; color: var(--xm-muted); }
.xm-reopen b { min-width: 22px; padding: 4px 7px; border-radius: 999px; background: var(--xm-ink); color: var(--xm-ink-fg); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
@keyframes xmReopenIn { from { opacity: 0; transform: translateX(-12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.xm-collapse:focus-visible, .xm-reopen:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(77, 107, 255, .5); }
@media (max-width: 759px) {
  .xm-collapse svg { transform: rotate(-90deg); }
  .xm-collapse:hover { transform: translateY(2px); }
  .xm.is-collapsed .xm-panel { transform: translateY(calc(100% + 24px)); }
  .xm-reopen { top: auto; bottom: 12px; left: 12px; }
  .xm.is-collapsed .xm-card { bottom: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .xm-panel, .xm.is-collapsed .xm-panel { transition: none; }
  .xm-reopen { animation: none; }
}