/* Feuille de style de la page d'accueil Medibox.
   Les regles :hover proviennent des attributs style-hover du document source. */

@font-face { font-family:"Proxima Nova"; src:url("../fonts/proxima-nova-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
  @font-face { font-family:"Proxima Nova"; src:url("../fonts/proxima-nova-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
  @font-face { font-family:"Proxima Nova"; src:url("../fonts/proxima-nova-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
  @font-face { font-family:"Proxima Nova"; src:url("../fonts/proxima-nova-800.woff2") format("woff2"); font-weight:800; font-display:swap; }
  body { margin:0; background:#ffffff; color:#17181C; font-family:"Proxima Nova", system-ui, sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  * { box-sizing:border-box; }
  h1, h2, h3 { margin:0; max-width:100%; overflow-wrap:break-word; font-weight:800; letter-spacing:-0.025em; line-height:1.05; text-wrap:balance; }
  p { margin:0; text-wrap:pretty; }
  a { color:#6D4FD0; text-decoration:none; }
  a:hover { color:#4C2FA8; }
  ::selection { background:#D5D6F5; }
  :focus-visible { outline:2px solid #6D4FD0; outline-offset:3px; }
  @keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
  [data-stagger] > *, [data-stagger] > * > * {
    opacity:0; transform:translateY(46px) scale(.97);
    transition:opacity .7s cubic-bezier(.16,.84,.3,1), transform .8s cubic-bezier(.16,.84,.3,1), filter .7s ease;
    filter:blur(6px);
  }
  [data-stagger][data-shown] > *, [data-stagger][data-shown] > * > * { filter:blur(0) }
  [data-stagger][data-shown] > *, [data-stagger][data-shown] > * > * { opacity:1; transform:none; }
  [data-stagger][data-shown] > *:nth-child(2), [data-stagger][data-shown] > * > *:nth-child(2) { transition-delay:90ms }
  [data-stagger][data-shown] > *:nth-child(3), [data-stagger][data-shown] > * > *:nth-child(3) { transition-delay:170ms }
  [data-stagger][data-shown] > *:nth-child(4), [data-stagger][data-shown] > * > *:nth-child(4) { transition-delay:250ms }
  [data-stagger][data-shown] > *:nth-child(5), [data-stagger][data-shown] > * > *:nth-child(5) { transition-delay:330ms }
  [data-stagger][data-shown] > *:nth-child(6), [data-stagger][data-shown] > * > *:nth-child(6) { transition-delay:410ms }
  [data-stagger][data-shown] > *:nth-child(n+7), [data-stagger][data-shown] > * > *:nth-child(n+7) { transition-delay:490ms }
  @media (prefers-reduced-motion: reduce) {
    [data-stagger] > *, [data-stagger] > * > * { opacity:1 !important; transform:none !important; transition:none !important }
  }
  @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }
  @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
  @keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @keyframes spin { to { transform:rotate(360deg); } }
  @keyframes defile { from { transform:translateX(0) } to { transform:translateX(-50%) } }
  #chiffres-piste:hover > div { animation-play-state:paused }
  @media (prefers-reduced-motion: reduce) { #chiffres-piste > div { animation:none !important } }
  @keyframes dotPop { from { opacity:0; transform:scale(0) } 65% { opacity:1; transform:scale(1.6) } to { opacity:1; transform:scale(1) } }
  @keyframes haloPulse { 0% { opacity:.55; transform:scale(.6) } 70%,100% { opacity:0; transform:scale(2.6) } }
  #carte-medibox svg { width:100%; height:auto; display:block }
  #carte-medibox.anim [data-ville] { transform-box:fill-box; transform-origin:center; opacity:0; animation:dotPop .45s cubic-bezier(.2,.9,.3,1) forwards }
  #carte-medibox.anim text { opacity:0; transition:opacity .5s ease }
  #carte-medibox.anim.textes text { opacity:1 }
  #carte-medibox [data-ville] { cursor:pointer; transition:filter .2s }
  #carte-medibox [data-ville]:hover { filter:drop-shadow(0 0 6px rgba(109,79,208,.8)) }
  #carte-medibox .mb-halo { transform-box:fill-box; transform-origin:center; animation:haloPulse 2.8s ease-out infinite; pointer-events:none }
  @media (prefers-reduced-motion: reduce) { #carte-medibox.anim [data-ville], #carte-medibox.anim text { opacity:1 !important; animation:none !important } #carte-medibox .mb-halo { display:none } }

  @keyframes slideTrack { from { transform:translateX(0) } to { transform:translateX(-50%) } }
  .mb-villes:hover > .mb-dd, .mb-villes:focus-within > .mb-dd { opacity:1 !important; visibility:visible !important; transform:translate(-50%,0) !important; }
  .mb-villes:hover > a .mb-chev, .mb-villes:focus-within > a .mb-chev { transform:rotate(180deg); }

/* ── survols ─────────────────────────────────────────────────────────────── */
.mbh-1:hover { background:#F3F0FC !important; color:#4C2FA8 !important; }
.mbh-2:hover { background:#F5F3FF !important; }
.mbh-3:hover { transform:translateY(-2px) !important; }
.mbh-4:hover { border-color:#6D4FD0 !important; color:#4C2FA8 !important; }
.mbh-5:hover { background:#4C2FA8 !important; transform:translateY(-2px) !important; }
.mbh-6:hover { transform:translateY(-4px) !important; }
.mbh-7:hover { background:rgba(255,255,255,.16) !important; }
.mbh-8:hover { transform:translateY(-8px) !important; border-color:#6D4FD0 !important; box-shadow:0 22px 44px rgba(30,14,80,.38), 10px 10px 30px rgba(30,14,80,.22) !important; }
.mbh-9:hover { transform:translateY(-8px) !important; border-color:rgba(196,181,253,.55) !important; box-shadow:0 24px 50px -12px rgba(109,79,208,.55) !important; }
.mbh-10:hover { background:linear-gradient(90deg,#4C1D95 0%,#7C3AED 60%,#8B5CF6 100%) !important; color:#ffffff !important; transform:translateX(6px) !important; }
.mbh-11:hover { opacity:.8 !important; }
.mbh-12:hover { transform:translateY(-6px) !important; box-shadow:0 22px 46px rgba(23,24,28,.14) !important; }
.mbh-13:hover { transform:translateY(-8px) !important; box-shadow:0 22px 44px rgba(30,14,80,.38), 10px 10px 30px rgba(30,14,80,.22) !important; }
.mbh-14:hover { background:#6D4FD0 !important; color:#ffffff !important; border-color:#6D4FD0 !important; }
.mbh-15:hover { transform:translateY(-3px) !important; }
.mbh-16:hover { background:rgba(255,255,255,.1) !important; }
.mbh-17:hover { opacity:1 !important; }