/* ═══════════════════════════════════════════════════════════════════════════
   DEVINE LE PARTI — HEMICYCLE
   ───────────────────────────────────────────────────────────────────────────
   Charger après tokens.css + system.css.
   Le SVG est généré par hemicycle.js → window.DLPHemi.render().

   PRINCIPE : chaque secteur est un BOUTON SÉPARÉ avec son propre stroke et
   son propre shadow. Un gap angulaire de 5° (3° entre subs) sépare les
   boutons visuellement → l'hémicycle n'apparaît pas comme une masse unique
   mais comme une rangée de boutons individuels.

   Pas de cadre conteneur autour de l'hémicycle.
   ═══════════════════════════════════════════════════════════════════════════ */

.hemicycle {
  display: inline-block;
  width: 100%;
  max-width: 480px;
  position: relative;
  user-select: none;
  /* Tactile : taps traités immédiatement (pas de délai double-tap-zoom ni
     d'interprétation de geste qui retient le click — vu sur Samsung). */
  touch-action: manipulation;
  /* Léger tilt systémique, comme le reste du design system */
  transform: rotate(var(--rot-3));
}
.hemicycle.no-tilt { transform: none; }

.hemicycle svg.hemi-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* (retour user 2026-06-18) BUG iOS Safari (iPhone 13/iOS 26) + Samsung Z Flip : le tap
   n'ouvrait pas l'hémicycle. CAUSE : touch-action n'est PAS héritée. Le `touch-action:
   manipulation` ci-dessus est posé sur .hemicycle (le <div> wrapper), mais les VRAIES cibles
   du tap — le <svg> et les <path>/<g> de secteurs — restaient en touch-action:auto. Sur
   tactile pur, iOS garde alors le double-tap-zoom actif sur ces cibles et AVALE le click
   synthétisé → le secteur ne s'arme jamais (le handler click sur le <g> ne reçoit rien).
   Remède = poser touch-action DIRECTEMENT sur les cibles (même remède que style.css:598 pour
   les boutons). Correctif racine cross-device, pas device-spécifique. */
.hemicycle svg.hemi-svg,
.hemicycle .hemi-macro,
.hemicycle .hemi-sub,
.hemicycle .hemi-fill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ─── BOUTONS — chaque secteur (macro ou sub) ─────────────────────────
   Architecture par bouton :
     <g class="hemi-macro">  (ou .hemi-sub)
       <g transform="...">      ← shadow placement (fixe)
         <path class="hemi-shadow" .../>
       </g>
       <g class="hemi-lift">     ← liftable au hover/press
         <g transform="...">    ← fill placement (centre + rotation bisecteur)
           <path class="hemi-fill" .../>
         </g>
         <text class="hemi-label" .../>
       </g>
     </g>
   Le shadow ne bouge JAMAIS — c'est le .hemi-lift qui translate au hover. */
.hemi-macro,
.hemi-sub {
  cursor: pointer;
}
.hemi-lift {
  transition: transform var(--dur-fast) var(--ease-out);
}

html.dlp-can-hover .hemicycle:not(.is-animating) .hemi-macro:hover .hemi-lift,
html.dlp-can-hover .hemicycle:not(.is-animating) .hemi-sub:hover .hemi-lift {
  transform: translate(-3px, -3px);
}
.hemi-macro:active .hemi-lift,
.hemi-sub:active .hemi-lift {
  transform: translate(3px, 3px);
  transition-duration: 60ms;
}

/* Pas d'interactions pendant les animations d'expand/collapse.
   On désactive pointer-events ET transitions ET applique transform:none
   pour empêcher le stagger du hover-lift sur les éléments fraîchement
   redessinés à chaque frame de l'animation. */
.hemi-svg.is-animating .hemi-macro,
.hemi-svg.is-animating .hemi-sub {
  pointer-events: none;
}
.hemi-svg.is-animating .hemi-lift {
  transition: none !important;
  transform: none !important;
}

/* Sectors éliminés : grisés, pas de lift */
.hemi-macro.hemi-elim, .hemi-sub.hemi-elim { cursor: not-allowed; }
html.dlp-can-hover .hemicycle .hemi-macro.hemi-elim:hover .hemi-lift,
html.dlp-can-hover .hemicycle .hemi-sub.hemi-elim:hover .hemi-lift {
  transform: none;
}

/* Locked (Spécialiste) */
.hemicycle.is-locked .hemi-macro { cursor: default; }
html.dlp-can-hover .hemicycle.is-locked .hemi-macro:hover .hemi-lift {
  transform: none;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hemi-macro, .hemi-sub, .hemi-fill, .hemi-label { transition: none; }
}