/* wheel.css — roue des disciplines (section #disciplines, insérée par js/wheel.js).
   Classes préfixées .sdw- : zéro collision avec main.css. Additive : si ce fichier
   ou wheel.js manque, la grille .disc-grid reste seule, comme avant. */

.sdw-track{ height: calc(100svh + 560px); position: relative; margin: 6px 0 26px; }
/* 14 crans × 40px = UN coup de pouce traverse la roue (≈600-800px/swipe mobile).
   Un budget plus long (ex-1456px) exigeait 2-3 balayages pendant lesquels seule
   la roue bougeait → sensation de page bloquée. Le ressort suiveur lisse la
   rotation plus rapide ; le catalogue reste lisible via la rotation ambiante. */
.sdw-stage{
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.sdw-scene{
  perspective: 900px; perspective-origin: 50% 50%;
  height: 340px; width: min(100%, 420px);
  /* pan-y : le balayage VERTICAL reste du scroll natif (jamais bloquant au
     pouce — la roue tourne via le scroll) ; le drag direct reste possible à la
     souris et sur gestes non-verticaux. */
  position: relative; touch-action: pan-y; cursor: grab; outline: none;
}
.sdw-scene:focus-visible{ border-radius: var(--radius-lg, 22px); box-shadow: 0 0 0 3px var(--brand); }
.sdw-cyl{ position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.sdw-face{
  position: absolute; left: 50%; top: 50%;
  width: min(86vw, 372px); height: 96px;
  margin: -48px 0 0 max(-43vw, -186px);
  backface-visibility: hidden; overflow: hidden;
  display: flex; align-items: center;
  background: var(--night); border: 1.5px solid var(--line); border-radius: var(--radius, 14px);
  opacity: 0.25;
  transition: opacity 180ms linear, border-color 180ms linear;
}
.sdw-ph{ position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.sdw-ph img{ width: 100%; height: 132%; object-fit: cover; display: block; will-change: transform; }
.sdw-grad{
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(9,15,29,0.80) 0%, rgba(9,15,29,0.48) 46%, rgba(9,15,29,0.12) 100%);
}
[dir="rtl"] .sdw-grad{
  background: linear-gradient(270deg, rgba(9,15,29,0.80) 0%, rgba(9,15,29,0.48) 46%, rgba(9,15,29,0.12) 100%);
}
.sdw-tt{ position: relative; min-width: 0; padding-inline-start: 16px; }
.sdw-nm{ font-family: var(--font-display, inherit); font-weight: 800; font-size: 17.5px; letter-spacing: -0.01em; color: #fff; white-space: nowrap; display: block; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.sdw-fd{ font-size: 12.5px; color: rgba(255,255,255,0.88); display: block; }
.sdw-pr{
  position: relative; margin-inline-start: auto; margin-inline-end: 12px; flex: none;
  background: rgba(255,255,255,0.94); color: #16233f;
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px;
  text-align: center; border-radius: var(--radius-sm, 9px); padding: 6px 11px;
}
.sdw-pr small{ display: block; font-weight: 650; font-size: 10px; color: #5a6a85; }
.sdw-face.sdw-near{ opacity: 0.6; }
.sdw-face.sdw-active{ opacity: 1; border-color: var(--brand); box-shadow: var(--shadow-md); }
/* Face « demande personnalisée » : même design que la carte large du catalogue */
.sdw-face--libre{ border: 2px dashed var(--brand); }
.sdw-face--libre .sdw-grad{
  background: linear-gradient(90deg, oklch(0.24 0.09 258 / 0.88) 0%, oklch(0.24 0.09 258 / 0.55) 46%, oklch(0.24 0.09 258 / 0.20) 100%);
}
[dir="rtl"] .sdw-face--libre .sdw-grad{
  background: linear-gradient(270deg, oklch(0.24 0.09 258 / 0.88) 0%, oklch(0.24 0.09 258 / 0.55) 46%, oklch(0.24 0.09 258 / 0.20) 100%);
}
.sdw-rail{
  position: absolute; left: 0; right: 0; top: 50%; height: 92px; margin-top: -46px;
  pointer-events: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0.5;
}
.sdw-cta-zone{ margin-top: 18px; width: min(86vw, 372px); position: relative; z-index: 3; }
.sdw-cta{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff; border-radius: var(--radius, 14px);
  padding: 15px 18px; font-weight: 700; font-size: 16px; text-decoration: none;
  letter-spacing: -0.01em;
}
.sdw-cta:hover{ text-decoration: none; color: #fff; background: var(--brand-strong, var(--brand)); }
.sdw-cta:active{ transform: scale(0.985); }
.sdw-cta .sdw-min{ font-weight: 600; font-size: 12.5px; opacity: 0.85; }
.sdw-hint{ text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--text-mute, #6b7280); }
.sdw-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Vertiges / reduced-motion : la roue n'existe pas, la grille du site EST le produit. */
@media (prefers-reduced-motion: reduce){
  .sdw-track{ display: none; }
}