:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --sky-top: #fbfcfc;
    --sky-mid: #e6eaeb;
    --sky-bot: #c3dcd9;
    --ring: rgba(70, 22, 36, .55);
    --ring-divider: rgba(255, 170, 140, .22);
    --core: rgba(107, 36, 52, .7);
    --core-rim: #e05a3e;
    --icon: rgba(255, 215, 200, .78);
    --accent: #ff7bb4;
    --bubble: rgba(60, 20, 34, .62);
    --text: #ffffff;
    --hint: #4a5558;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --sky-top: #1d2224; --sky-mid: #2a3032; --sky-bot: #24413f; --hint: #b8c4c6; }
  }
  :root[data-theme="dark"] { --sky-top: #1d2224; --sky-mid: #2a3032; --sky-bot: #24413f; --hint: #b8c4c6; }

  html, body { height: 100%; margin: 0; }
  body {
    font-family: var(--font);
    color: var(--text);
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bot) 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  /* positionné en JS sous le curseur (--x / --y), centré à défaut */
  .menu {
    position: fixed;
    left: var(--x, 50vw); top: var(--y, 50vh);
    translate: -50% -50%;
    -webkit-tap-highlight-color: transparent;
    width: min(73vmin, 502px);
    aspect-ratio: 1;
    container-type: inline-size;
    touch-action: manipulation;
  }
  .menu svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
  /* les bulles passent sous l'anneau pour en émerger */
  #bubbles { position: absolute; inset: 0; z-index: 0; }
  #icons { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

  .wedge {
    fill: var(--ring);
    stroke: var(--ring-divider);
    stroke-width: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: fill .18s ease;
  }
  .wedge.is-active { fill: rgba(95, 32, 48, .65); }


  .core {
    position: absolute;
    left: 50%; top: 50%;
    width: 20%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 2;
    border-radius: 50%;
    background: var(--core);
    border: 3px solid var(--core-rim);
    box-shadow: inset 0 0 0 7px var(--core-rim), inset 0 0 0 10px rgba(0,0,0,.25), 0 8px 30px rgba(0,0,0,.35);
    display: grid; place-items: center;
    font-weight: 600;
    /* proportionnel à la taille du menu ; « Statistique » doit tenir sur une ligne */
    font-size: clamp(11px, 2.6cqw, 18px);
    letter-spacing: .01em;
    text-align: center;
    padding: 4%;
    user-select: none;
    pointer-events: none;
  }

  .icon {
    position: absolute;
    width: 11%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    color: var(--icon);
    pointer-events: none;
    transition: color .18s ease, transform .18s ease;
  }
  .icon svg { width: 100%; height: 100%; display: block; }
  .icon::after {
    content: "";
    position: absolute; left: 50%; bottom: -16%;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%) scale(0);
    transition: transform .18s ease;
  }
  .icon.is-active { color: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
  .icon.is-active::after { transform: translateX(-50%) scale(1); }

  .bubble {
    position: absolute;
    width: 15%; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--bubble);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    line-height: 0;
    color: #ffe7df;
    cursor: pointer;
    opacity: 0;
    /* position de départ : cachée sous l'anneau (--dx/--dy calculés en JS) */
    transform: translate(calc(-50% + var(--dx, 0%)), calc(-50% + var(--dy, 0%))) scale(.7);
    transition: opacity .12s ease, transform .14s cubic-bezier(.4, 0, 1, 1), background .15s ease;
    pointer-events: none;
    border: 0;
    padding: 0;
    font: inherit;
  }
  .bubble svg { width: 46%; height: 46%; display: block; flex: none; margin: auto; }
  .bubble.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    transition: opacity .14s ease var(--delay, 0s), transform .24s cubic-bezier(.2, .9, .3, 1.2) var(--delay, 0s), background .15s ease;
  }
  .bubble:hover { background: rgba(80, 28, 46, .92); }
  .bubble:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* sur un <path>, outline dessine le rectangle englobant : on souligne la forme via le contour */
  .wedge:focus { outline: none; }
  .wedge:focus-visible { stroke: var(--accent); stroke-width: 2; }

  .toast {
    position: fixed; left: 50%; bottom: calc(5vh + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: rgba(30,10,20,.8); color: #fff;
    padding: .55em 1em; border-radius: 999px;
    font-size: 14px; opacity: 0; transition: opacity .2s;
    pointer-events: none;
  }
  .toast.show { opacity: 1; }

  /* ---------- Ouverture / fermeture (touche Alt / ⌥) ----------
     Éclosion radiale : chaque portion et son icône sortent du centre le long de leur axe
     (--tx/--ty calculés en JS). scale / translate (propriétés individuelles) se composent
     avec les transform existants. */
  .wedge { transform-box: view-box; transform-origin: 50% 50%; }
  .menu:not(.is-open) { pointer-events: none; }
  .menu:not(.is-open) .wedge { opacity: 0; scale: .8; translate: var(--tx) var(--ty); pointer-events: none; }
  .menu:not(.is-open) .icon  { opacity: 0; scale: .5; translate: var(--tx) var(--ty); }
  .menu:not(.is-open) .core  { opacity: 0; scale: .6; }
  /* fermeture : instantanée, bulles et recherche comprises */
  .menu:not(.is-open) :is(.wedge, .icon, .core, .bubble, .search) { transition: none; }
  /* ouverture : courbe « ease-out » franche, sans rebond, portions décalées de --d */
  .menu.is-open .wedge {
    transition: fill .15s ease, opacity .2s ease-out var(--d), scale .32s cubic-bezier(.16, 1, .3, 1) var(--d), translate .32s cubic-bezier(.16, 1, .3, 1) var(--d);
  }
  .menu.is-open .icon {
    transition: color .15s ease, transform .15s ease, opacity .2s ease-out calc(var(--d) + .06s), scale .32s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .06s), translate .32s cubic-bezier(.16, 1, .3, 1) calc(var(--d) + .06s);
  }
  .menu.is-open .core { transition: opacity .16s ease-out, scale .28s cubic-bezier(.16, 1, .3, 1); }

  .hint {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--hint);
    font-size: 15px;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .hint kbd {
    font: 600 13px/1 var(--font);
    padding: .3em .55em;
    border: 1px solid currentColor;
    border-radius: 6px;
    margin: 0 .2em;
  }
  .menu.is-open ~ .hint { opacity: 0; }

  /* ---------- Recherche : la barre jaillit depuis la loupe, l'anneau s'efface derrière ---------- */
  .menu.is-open.is-searching .wedge { opacity: .22; scale: .92; pointer-events: none; }
  .menu.is-open.is-searching .icon,
  .menu.is-open.is-searching .core  { opacity: 0; scale: .6; }

  .search {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 3;
    width: 74%;
    padding: 6px;
    border-radius: 20px;
    background: rgba(60, 20, 34, .88);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    color: #ffe7df;
    opacity: 0;
    visibility: hidden;
    /* départ : réduite sur la loupe (--ox/--oy calculés en JS) */
    transform: translate(calc(-50% + var(--ox, 0cqw)), calc(-50% + var(--oy, 0cqw))) scale(.15);
    transition: opacity .12s ease, transform .14s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .14s;
  }
  .menu.is-searching .search {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity .14s ease, transform .24s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .search-field {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 170, 140, .18);
  }
  .search-field input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: none;
    color: #fff;
    font: 500 clamp(14px, 2.6cqw, 17px) var(--font);
  }
  .search-field input::placeholder { color: rgba(255, 215, 200, .5); }
  .search-list { list-style: none; margin: 0; padding: 6px 0 0; }
  .search-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: clamp(13px, 2.3cqw, 15px);
    cursor: pointer;
  }
  .search-list li[aria-selected="true"] { background: rgba(255, 255, 255, .09); }
  .search-opt-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .search-opt-label mark { background: none; color: var(--accent); font-weight: 600; }
  .search-opt-hint { font-size: .85em; color: rgba(255, 215, 200, .55); }
  .search-list .search-empty { cursor: default; color: rgba(255, 215, 200, .6); }

  @media (prefers-reduced-motion: reduce) {
    .wedge, .icon, .icon::after, .bubble, .toast, .core, .hint, .search,
    .menu.is-open .wedge, .menu.is-open .icon, .menu.is-open .core, .menu.is-searching .search { transition: none; }
  }