/* ========================================
   UI — Promo Wheel — disque, pointeur et animation

   Dessin : template-parts/promo-wheel-disc.php. Taille héritée de la modale
   (--promo-wheel-size). Seul .promo-wheel__spinner tourne ; ombre et
   pointeur restent sur le conteneur fixe. En fin de tour, .is-revealed
   atténue les secteurs autres que .is-winner (posé par le JS).
   ======================================== */

.promo-wheel {
    --promo-spin-duration: 4.2s;
    --promo-spin-easing: cubic-bezier(0.12, 0.7, 0.1, 1);

    position: relative;
    width: var(--promo-wheel-size);
    height: var(--promo-wheel-size);
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-white-08);
}

/* Lumière fixe venue du haut : posée sur le conteneur, elle ne tourne pas
   avec le disque. Un seul calque statique, sans filtre ni animation. */
.promo-wheel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 45% at 50% 8%, rgba(255, 255, 255, 0.09), transparent 70%),
        linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.16));
    pointer-events: none;
}

/* Pointeur latéral orange, pointe vers le centre : le secteur gagnant s'y arrête. */
.promo-wheel__pointer {
    position: absolute;
    top: 50%;
    right: -10px;
    z-index: var(--z-content);
    width: 24px;
    height: 29px;
    transform: translateY(-50%) rotate(180deg);
    fill: var(--color-primary-light);
    stroke: var(--carbon-500);
    stroke-width: 1.5;
}

/* Capuchon fixe sur l'axe : posé hors du conteneur qui tourne, il couvre le
   dôme du disque et laisse voir le plateau autour de lui. */
.promo-wheel__cap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z-content);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 15%;
    border: 1px solid var(--color-white-15);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, var(--neutral-800), var(--carbon-400) 75%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 var(--color-white-10);
    color: var(--color-primary-light);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.promo-wheel__cap svg {
    width: 52%;
    height: 52%;
}

.promo-wheel__spinner {
    width: 100%;
    height: 100%;
    transform: rotate(var(--promo-wheel-angle, 0deg));
    transition: transform var(--promo-spin-duration) var(--promo-spin-easing);
}

.promo-wheel.is-spinning .promo-wheel__spinner {
    will-change: transform;
}

.promo-wheel__disc {
    display: block;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------
   Matières : couronne graduée à liseré métal, secteurs orange et carbone,
   moyeu à niveaux
   ---------------------------------------- */

.promo-wheel__stop--accent-in  { stop-color: var(--color-primary-light); }
.promo-wheel__stop--accent-out { stop-color: var(--color-primary); }
.promo-wheel__stop--dark-in    { stop-color: var(--carbon-100); }
.promo-wheel__stop--dark-out   { stop-color: var(--carbon-200); }
.promo-wheel__stop--mid-in     { stop-color: var(--neutral-700); }
.promo-wheel__stop--mid-out    { stop-color: var(--neutral-800); }
.promo-wheel__stop--metal-hi   { stop-color: var(--white); stop-opacity: 0.32; }
.promo-wheel__stop--metal-lo   { stop-color: var(--white); stop-opacity: 0.06; }
.promo-wheel__stop--metal-mid  { stop-color: var(--white); stop-opacity: 0.2; }
.promo-wheel__stop--bezel-deep  { stop-color: var(--carbon-500); }
.promo-wheel__stop--bezel-lip   { stop-color: var(--neutral-700); }
.promo-wheel__stop--bezel-track { stop-color: var(--carbon-400); }
.promo-wheel__stop--bezel-face  { stop-color: var(--carbon-100); }
.promo-wheel__stop--plate-in    { stop-color: var(--carbon-300); }
.promo-wheel__stop--plate-out   { stop-color: var(--carbon-200); }
.promo-wheel__stop--dome-in     { stop-color: var(--neutral-800); }
.promo-wheel__stop--dome-out    { stop-color: var(--carbon-400); }

/* Couronne : lèvre intérieure, piste des graduations, face, lèvre extérieure. */
.promo-wheel__rim {
    fill: url(#promo-wheel-bezel);
}

.promo-wheel__rim-edge {
    fill: none;
    stroke: url(#promo-wheel-metal);
    stroke-width: 1;
}

.promo-wheel__wedge-shade {
    fill: none;
    stroke: rgba(0, 0, 0, 0.22);
    stroke-width: 4;
}

.promo-wheel__wedge--accent { fill: url(#promo-wheel-accent); }
.promo-wheel__wedge--dark   { fill: url(#promo-wheel-dark); }
.promo-wheel__wedge--mid    { fill: url(#promo-wheel-mid); }

.promo-wheel__divider {
    stroke: var(--carbon-500);
    stroke-width: 1.2;
    stroke-linecap: round;
}

.promo-wheel__tick {
    stroke: var(--gray-600);
    stroke-width: 0.7;
    stroke-linecap: round;
}

.promo-wheel__tick--long {
    stroke: var(--gray-300);
    stroke-width: 1.2;
}

.promo-wheel.is-revealed .promo-wheel__tick--long {
    stroke: var(--color-primary-light);
}

.promo-wheel__plate-shadow {
    fill: rgba(0, 0, 0, 0.45);
}

.promo-wheel__plate {
    fill: url(#promo-wheel-plate);
    stroke: var(--color-white-10);
    stroke-width: 0.8;
}

.promo-wheel__plate-groove {
    fill: none;
    stroke: var(--carbon-500);
    stroke-width: 0.8;
}

.promo-wheel__hub {
    fill: url(#promo-wheel-dome);
    stroke: url(#promo-wheel-metal);
    stroke-width: 1.6;
}

.promo-wheel__hub-core {
    fill: url(#promo-wheel-core);
    stroke: var(--carbon-500);
    stroke-width: 0.8;
}

/* ----------------------------------------
   Inscriptions blanches : noms des lots ou « ? » des secteurs mystère.
   Unités du viewBox (200) : 10 donne 15 px sur le disque de 300 px.
   ---------------------------------------- */

.promo-wheel__lot-label,
.promo-wheel__mystery {
    font-family: var(--font-display);
    font-weight: 600;
    fill: var(--white);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.promo-wheel__lot-label {
    font-size: 10px;
    letter-spacing: 0.01em;
}

.promo-wheel__mystery {
    font-size: 15px;
    opacity: 0.85;
}

.promo-wheel__mark {
    fill: var(--color-white-15);
}

/* Le disque mobile mesure 240 px dès la largeur minimale contrôlée (320 px) :
   12,5 unités SVG donnent 15 px rendus, sans déplacer les inscriptions. */
@media (max-width: 768px) {
    .promo-wheel__lot-label {
        font-size: 12.5px;
    }
}

/* ----------------------------------------
   Révélation : le secteur gagnant reste plein
   ---------------------------------------- */

.promo-wheel__segment {
    transition: opacity var(--transition-slow);
}

.promo-wheel.is-revealed .promo-wheel__segment:not(.is-winner) {
    opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
    .promo-wheel {
        --promo-spin-duration: 0.6s;
        --promo-spin-easing: ease-out;
    }

    .promo-wheel__segment {
        transition: none;
    }
}