.vac-ao {
    --bg: #050608;
    --card-border: #262b33;
    --text: #F3F4F6;
    --text-soft: #B7BEC9;
    --hover: #111827;
    --lime: #99FF00;
  }
  .vac-ao, .vac-ao * { margin: 0; padding: 0; box-sizing: border-box; }
  .vac-ao {
    color: var(--text);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
  }
  .vac-ao-wrap { max-width: 1240px; margin: 0 auto; }


  /* ---------- Module ---------- */
  .vac-ao-hub {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: center;
  }
  .vac-ao-scene-col { position: relative; min-width: 0; }
  .vac-ao-scene-col svg { width: 100%; height: auto; display: block; }

  .vac-ao-play-wrap { position: absolute; bottom: 14px; right: 16px; }
  .vac-ao-ctrl {
    height: 42px;
    border-radius: 999px;
    border: 1px solid #333a45;
    background: rgba(10,13,18,.85);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 16px; letter-spacing: .04em;
    padding: 0 20px;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background .18s, border-color .18s;
  }
  .vac-ao-ctrl:hover { background: var(--hover); border-color: #4a5262; }
  .vac-ao-ctrl.playing { border-color: var(--lime); color: var(--lime); }
  .vac-ao-snd {
    position: absolute; top: 14px; right: 16px;
    width: 42px; height: 42px; padding: 0;
    border-radius: 50%; justify-content: center;
  }
  .vac-ao-snd svg { width: 19px; height: 19px; }
  .vac-ao-snd .ic-on { display: none; }
  .vac-ao-snd.on .ic-on { display: block; }
  .vac-ao-snd.on .ic-off { display: none; }
  .vac-ao-snd.on { border-color: var(--lime); color: var(--lime); }

  /* Hotspots + curseur de dalle + étiquettes */
  .vac-ao-hot { cursor: pointer; }
  .vac-ao-hot .vac-ao-pulse {
    transform-box: fill-box; transform-origin: center;
    animation: vacAoPulse 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes vacAoPulse { 0% {transform:scale(1);opacity:.6} 100% {transform:scale(2.4);opacity:0} }
  .vac-ao-hot .vac-ao-core { transition: r .15s; }
  .vac-ao-hot:hover .vac-ao-core { r: 12; }
  .vac-ao-tilecur { opacity: 0; transition: opacity .15s; pointer-events: none; }
  .vac-ao-tilecur.on { opacity: 1; }
  .vac-ao-obj { cursor: pointer; }
  #vac-ao-door, #vac-ao-clock { cursor: pointer; }
  .vac-ao-floaty { animation: vacAoFloat 2.6s ease-in-out infinite; }
  @keyframes vacAoFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
  .vac-ao-spinner.spin { animation: vacAoSpin .9s cubic-bezier(.3,.7,.4,1) 2; transform-box: fill-box; transform-origin: center; }
  @keyframes vacAoSpin { to { transform: rotate(360deg) } }

  /* Micro-vie : néon qui grésille, LED qui respirent, poussières */
  .vac-ao-neonflicker { animation: vacAoNeon 11s linear infinite; }
  @keyframes vacAoNeon { 0%,88%,90%,93%,100% { opacity: 1 } 89% { opacity: .3 } 91.5% { opacity: .7 } }
  .vac-ao-breathe { animation: vacAoBreathe 2.8s ease-in-out infinite; }
  @keyframes vacAoBreathe { 0%,100% { filter: brightness(.65) } 50% { filter: brightness(1.25) } }
  .vac-ao-dust { animation: vacAoDust 8s linear infinite; }
  @keyframes vacAoDust {
    0%   { opacity: 0; transform: translate(0,0) }
    30%  { opacity: .75 }
    100% { opacity: 0; transform: translate(5px,-16px) }
  }

  /* Confetti */
  .vac-ao-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .vac-ao-confetti i {
    position: absolute; top: -12px;
    width: 8px; height: 12px; border-radius: 2px;
    animation: vacAoFall 2.8s linear forwards;
  }
  @keyframes vacAoFall { to { transform: translateY(560px) rotate(540deg); opacity: 0; } }

  /* ---------- Panneau ---------- */
  .vac-ao-panel {
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 26px 30px 24px;
    display: flex; flex-direction: column;
    background: #090b0f;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  }
  .vac-ao-panel-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; gap: 10px;
  }
  .vac-ao-panel-top .vac-ao-hint { font-size: 13.5px; font-weight: 600; color: var(--text-soft); }
  /* Icônes SVG en ligne (taille relative au texte) */
  .vac-ao-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; flex-shrink: 0; }
  .vac-ao-ico svg { display: block; width: 100%; height: 100%; }
  .vac-ao-hint .vac-ao-ico, .vac-ao-badge .vac-ao-ico, .vac-ao-panel-tag .vac-ao-ico { margin-right: 6px; }
  .vac-ao-badge.complete .vac-ao-ico svg { filter: brightness(0); }
  .vac-ao-badge {
    flex-shrink: 0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 15px;
    border: 1px solid var(--card-border);
    border-radius: 999px; padding: 4px 12px;
    white-space: nowrap;
  }
  .vac-ao-badge.complete { background: var(--lime); color: #000; border-color: var(--lime); }
  .vac-ao-panel-tag { font-size: 15px; font-weight: 600; margin-bottom: 6px; min-height: 23px; }
  .vac-ao-panel h3 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; font-size: 24px; line-height: 1.12;
    margin-bottom: 10px;
  }
  .vac-ao-panel-desc { color: var(--text-soft); font-size: 16px; min-height: 100px; margin-bottom: 16px; }
  .vac-ao-panel-cta {
    display: block; text-align: center; text-decoration: none;
    font-weight: 700; font-size: 17px;
    padding: 13px 20px; border-radius: 999px;
    transition: background .18s, color .18s;
    margin-bottom: 20px;
  }
  .vac-ao-panel-alt {
    display: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: -10px 0 20px;
  }
  .vac-ao-panel-alt:hover { color: var(--lime); }
  .vac-ao-panel-alt.show { display: block; }

  /* Vitrine à badges */
  .vac-ao-vitrine { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: nowrap; }
  .vac-ao-medal {
    flex: 0 1 46px; min-width: 0; aspect-ratio: 1 / 1; border-radius: 50%;
    border: 2px solid var(--card-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 23px; line-height: 1;
    filter: grayscale(1); opacity: .4;
    transition: filter .3s, opacity .3s, transform .3s;
  }
  .vac-ao-medal svg { width: 56%; height: 56%; }
  .vac-ao-medal svg.wide { width: 74%; height: 74%; }
  .vac-ao-medal.won { filter: none; opacity: 1; background: #111827; transform: scale(1.08); }
  .vac-ao-medal.secret { display: none; }
  .vac-ao-medal.secret.won { display: inline-flex; }
  .vac-ao-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .vac-ao-hub:focus { outline: none; }
  .vac-ao-hub.paused, .vac-ao-hub.paused * { animation-play-state: paused !important; }
  .vac-ao-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 600; color: var(--text);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 999px; padding: 8px 14px;
    cursor: pointer;
    transition: background .18s, color .18s;
  }
  .vac-ao-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .vac-ao-chip:hover { background: var(--hover); }
  .vac-ao-chip.active { color: #000; border-color: transparent; }
  .vac-ao-chip.active .dot { background: #000 !important; }

  @media (max-width: 940px) {
    .vac-ao-hub { grid-template-columns: 1fr; gap: 16px; }
    .vac-ao-panel-desc { min-height: 0; }
  }
  /* Mobile : les puces deviennent la navigation principale */
  @media (max-width: 560px) {
    .vac-ao-panel { padding: 20px 16px; }
    /* Visite guidée en haut à gauche : en bas à droite, le bouton cachait la tente */
    .vac-ao-play-wrap { top: 10px; left: 10px; bottom: auto; right: auto; }
    .vac-ao-play-wrap .vac-ao-ctrl { height: 36px; font-size: 14px; padding: 0 13px; gap: 6px; }
    .vac-ao-vitrine { gap: 6px; margin-bottom: 14px; }
    .vac-ao-chips { gap: 6px; justify-content: space-between; }
    .vac-ao-chip { font-size: 13.5px; padding: 6px 9px; gap: 6px; }
    /* 2 libellés par ligne, un long avec un court : 4 lignes de largeurs égales, bords alignés */
    .vac-ao-chip[data-tool="configurateur"] { order: 1; }
    .vac-ao-chip[data-tool="velotaf"]       { order: 2; }
    .vac-ao-chip[data-tool="pression"]      { order: 3; }
    .vac-ao-chip[data-tool="autonomie"]     { order: 4; }
    .vac-ao-chip[data-tool="checklist"]     { order: 5; }
    .vac-ao-chip[data-tool="taille"]        { order: 6; }
    .vac-ao-chip[data-tool="bikepacking"]   { order: 7; }
    .vac-ao-chip[data-tool="entretien"]     { order: 8; }
    .vac-ao-hot .vac-ao-core { r: 12; }
    .vac-ao-hot .vac-ao-target { r: 22; }
  }
  /* Petits téléphones : puces un peu resserrées pour garder 2 libellés par ligne */
  @media (max-width: 370px) {
    .vac-ao-chip { font-size: 12.5px; padding: 5px 8px; gap: 5px; }
  }
  /* Respect de prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .vac-ao-hot .vac-ao-pulse, .vac-ao-floaty, .vac-ao-spinner.spin, .vac-ao-confetti i,
    .vac-ao-neonflicker, .vac-ao-breathe, .vac-ao-dust { animation: none; }
    .vac-ao-hot .vac-ao-pulse { opacity: 0; }
    .vac-ao-dust { opacity: .3; }
  }

/* ── Titre du panneau blindé contre le thème (convention Vélo and Co) ── */
.vac-ao .vac-ao-panel h3,
div.vac-ao div.vac-ao-panel h3#vac-ao-pTitle {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.12 !important;
  color: #F3F4F6 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}