/* ============================================================
   GROUPE EASY — ROUE DE NAVIGATION (menu principal)
   Styles du composant construit par js/wheel-menu.js.
   Tout est scopé .wheel-* : aucun impact sur le CSS existant.
   Consomme les tokens du design system (css/style.css :root).
   ============================================================ */

/* ── Scène : section plein écran, roue centrée ─────────────── */
.wheel-scene {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: calc(var(--header-h) + var(--space-5)) var(--container-pad) var(--space-7);
    overflow: hidden;
}

/* Halo très discret derrière la roue (sobre, pas de néon) */
.wheel-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 52%,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.015) 32%,
        transparent 62%
    );
    pointer-events: none;
}

/* Vignettage : assombrit doucement les bords de l'écran */
.wheel-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 24vmax rgba(0, 0, 0, 0.72);
    pointer-events: none;
}

.wheel-scene-inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
}

/* Petit intitulé au-dessus de la roue */
.wheel-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Cadre de la roue ──────────────────────────────────────── */
/* Desktop : la roue occupe ~70 % de la hauteur de l'écran */
.wheel-stage {
    --wheel-size: min(70vh, 92vw);
    position: relative;
    width: var(--wheel-size);
    aspect-ratio: 1 / 1;

    /* état initial de l'animation d'entrée (zoom léger + fade) */
    opacity: 0;
    transform: scale(0.93);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

.wheel-stage.is-ready {
    opacity: 1;
    transform: scale(1);
}

.wheel-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* ombre portée d'ensemble, neutre */
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

/* Filets circulaires décoratifs */
.wheel-ring {
    fill: none;
    stroke: var(--hairline);
    stroke-width: 1.5;
}
.wheel-ring-inner { stroke: var(--border); }

/* Rotor : pivote très légèrement lors de la validation */
.wheel-rotor {
    transform-origin: 500px 500px; /* centre du viewBox */
    transition: transform var(--wheel-select-dur, 480ms) var(--ease);
}
.wheel-svg.is-locked .wheel-rotor { transform: rotate(3deg); }
.wheel-svg.is-locked { pointer-events: none; } /* verrouille pendant la redirection */

/* ── Secteurs ──────────────────────────────────────────────── */
.wheel-sector {
    cursor: pointer;
    outline: none;

    /* le scale au survol part du centre du secteur lui-même */
    transform-box: fill-box;
    transform-origin: center;

    transition: transform 240ms var(--ease-out),
                opacity 240ms var(--ease-out),
                filter 240ms var(--ease-out);
}

/* Apparition en cascade (délai piloté par --i, posé en JS),
   déclenchée quand la roue devient visible (.is-ready) — elle
   rejoue donc à chaque ouverture de l'overlay.
   fill-mode "backwards" : l'état "from" s'applique pendant le
   délai, puis l'animation rend la main au style de base — les
   transitions de survol restent donc fonctionnelles ensuite. */
.wheel-stage.is-ready .wheel-sector {
    animation: wheelSectorIn 480ms var(--ease-out) backwards;
    animation-delay: calc(160ms + var(--i, 0) * 45ms);
}

@keyframes wheelSectorIn {
    from { opacity: 0; transform: scale(0.86); }
    to   { opacity: 1; transform: scale(1); }
}

.wheel-sector-shape {
    fill: var(--surface-2);
    stroke: var(--border);
    stroke-width: 1.5;
    transition: fill 240ms var(--ease-out),
                stroke 240ms var(--ease-out);
}

.wheel-sector-label {
    fill: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.04em;
    pointer-events: none; /* le clic passe au secteur */
    transition: fill 240ms var(--ease-out);
}

/* Survol / focus d'un secteur : il s'éclaircit, grossit,
   s'ombre légèrement ; le texte devient plus lumineux */
.wheel-sector:hover,
.wheel-sector:focus-visible {
    transform: scale(1.05);
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6));
}
.wheel-sector:hover .wheel-sector-shape,
.wheel-sector:focus-visible .wheel-sector-shape {
    fill: rgba(255, 255, 255, 0.095);
    stroke: var(--border-strong);
}
.wheel-sector:hover .wheel-sector-label,
.wheel-sector:focus-visible .wheel-sector-label {
    fill: var(--platinum);
}

/* Les autres parts s'assombrissent pendant qu'une est visée */
.wheel-svg:hover .wheel-sector:not(:hover),
.wheel-svg:focus-within .wheel-sector:not(:focus-visible) {
    opacity: 0.55;
}
/* …sauf si le survol et le focus se cumulent */
.wheel-svg .wheel-sector:hover,
.wheel-svg .wheel-sector:focus-visible { opacity: 1; }

/* Focus clavier bien visible (en plus de l'état éclairci) :
   c'est le contour platine du secteur qui sert d'indicateur,
   pas le rectangle de focus par défaut du navigateur */
.wheel-sector:focus,
.wheel-sector:focus-visible { outline: none; }
.wheel-sector:focus-visible .wheel-sector-shape {
    stroke: var(--platinum);
    stroke-width: 3;
}

/* Retour tactile : appui = légère compression */
.wheel-sector:active { transform: scale(0.99); }

/* Secteur de la page en cours : légèrement mis en avant */
.wheel-sector.is-current .wheel-sector-shape {
    fill: rgba(255, 255, 255, 0.06);
    stroke: var(--border-strong);
}
.wheel-sector.is-current .wheel-sector-label { fill: var(--text-main); }

/* Secteur "hot" (Nouveauté) : teinte dorée + respiration lente,
   seule touche de couleur de la roue → l'œil va dessus */
.wheel-sector.is-hot .wheel-sector-shape {
    fill: rgba(217, 164, 65, 0.07);
    stroke: rgba(217, 164, 65, 0.35);
    animation: wheelHotBreath 2.6s ease-in-out infinite alternate;
}
.wheel-sector.is-hot .wheel-sector-label { fill: #e8c473; }
.wheel-sector.is-hot:hover .wheel-sector-shape,
.wheel-sector.is-hot:focus-visible .wheel-sector-shape {
    fill: rgba(217, 164, 65, 0.14);
    stroke: rgba(232, 196, 115, 0.6);
    animation: none;
}
.wheel-sector.is-hot:hover .wheel-sector-label,
.wheel-sector.is-hot:focus-visible .wheel-sector-label { fill: #f2d799; }

@keyframes wheelHotBreath {
    from { stroke: rgba(217, 164, 65, 0.22); fill: rgba(217, 164, 65, 0.05); }
    to   { stroke: rgba(217, 164, 65, 0.5);  fill: rgba(217, 164, 65, 0.1); }
}

/* Validation au clic : pulse lumineux du secteur choisi */
.wheel-sector.is-selected {
    animation: wheelSectorSelect var(--wheel-select-dur, 480ms) var(--ease) forwards;
}
.wheel-sector.is-selected .wheel-sector-shape {
    fill: rgba(255, 255, 255, 0.16);
    stroke: var(--platinum);
}
.wheel-sector.is-selected .wheel-sector-label { fill: #ffffff; }
.wheel-svg.is-locked .wheel-sector:not(.is-selected) { opacity: 0.3; }

@keyframes wheelSectorSelect {
    0%   { transform: scale(1.05); }
    45%  { transform: scale(1.1); }
    100% { transform: scale(1.06); opacity: 1; }
}

/* ── Hub central : logo (glassmorphism discret) ────────────── */
.wheel-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* diamètre calé sur le trou intérieur de la roue (rInner ≈ 182/1000) */
    width: 31.5%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg), var(--shadow-inset);

    pointer-events: none; /* décoratif : ne bloque aucun clic */
}

.wheel-hub-logo {
    width: 62%;
    height: auto;
    display: block;
}

/* Repli si le logo est introuvable : nom du site dans le cercle */
.wheel-hub-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(0.8rem, 2.4vh, 1.3rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--platinum);
    text-align: center;
    padding: 0 12%;
}

/* ── Bouton roue du header ─────────────────────────────────── */
/* La nav classique a disparu : le widget utilisateur se cale à
   droite, suivi du bouton roue (le header garde space-between). */
.header .user-widget { margin-left: auto; }

.wheel-toggle {
    width: 42px;
    height: 42px;
    margin-left: var(--space-5);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 240ms var(--ease-out),
                border-color 240ms var(--ease-out),
                background 240ms var(--ease-out);
}
.wheel-toggle-icon { display: block; }
.wheel-toggle {
    transition: color 240ms var(--ease-out),
                border-color 240ms var(--ease-out),
                background 240ms var(--ease-out),
                transform 240ms var(--ease-out);
}
.wheel-toggle:hover,
.wheel-toggle:focus-visible {
    color: var(--platinum);
    border-color: var(--border-strong);
    background: var(--surface-3);
    transform: scale(1.08);
}
.wheel-toggle:active { transform: scale(0.98); }
.wheel-toggle:focus-visible {
    outline: 2px solid var(--platinum);
    outline-offset: 2px;
}

/* ── Overlay : la roue par-dessus n'importe quelle page ────── */
.wheel-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--container-pad);
}
/* l'attribut hidden doit gagner sur le display:grid ci-dessus */
.wheel-overlay[hidden] { display: none; }

.wheel-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 6, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
}
.wheel-overlay.is-open .wheel-overlay-backdrop { opacity: 1; }

/* La roue de l'overlay est au-dessus du voile et garde la même
   taille que sur index ; son entrée/sortie réutilise .is-ready */
.wheel-overlay .wheel-stage {
    position: relative;
    z-index: 1;
}

/* Blocage du scroll de la page tant que l'overlay est ouvert */
.wheel-no-scroll { overflow: hidden; }

/* ── Responsive ────────────────────────────────────────────── */

/* Header mobile : l'ancienne nav ordonnait les éléments via
   `order` (logo 1 … hamburger 4) — le bouton roue reprend la
   place du hamburger : dernier, aligné à droite */
@media (max-width: 992px) {
    .nav-wrapper > .wheel-toggle { order: 4; }
}

/* Non connecté (widget masqué via son style inline) : le bouton
   roue s'aligne seul à droite ; dès que le JS affiche le widget,
   ce sélecteur ne matche plus et c'est le widget qui pousse */
.user-widget[style*="display: none"] + .wheel-toggle { margin-left: auto; }

@media (max-width: 768px) {
    .wheel-stage {
        /* mobile : bornée par la largeur, secteurs assez grands au doigt */
        --wheel-size: min(92vw, 64vh);
    }
    .wheel-scene {
        padding-top: calc(var(--header-h) + var(--space-4));
        padding-bottom: var(--space-6);
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .wheel-stage { --wheel-size: min(78vh, 60vw); }
}

/* ── Mouvement réduit : tout apparaît sans animation ───────── */
@media (prefers-reduced-motion: reduce) {
    .wheel-stage {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .wheel-sector,
    .wheel-stage.is-ready .wheel-sector {
        animation: none;
        opacity: 1;
        transition: none;
    }
    .wheel-sector:hover,
    .wheel-sector:focus-visible { transform: none; filter: none; }
    .wheel-rotor { transition: none; }
    .wheel-overlay-backdrop { transition: none; }
    .wheel-toggle-icon { transition: none; }
}

/* ============================================================
   VIE DE LA ROUE — mouvement d'ambiance permanent
   Anneaux techniques en rotation lente, balayage radar,
   respiration du halo et du hub. Tout est neutre et lent.
   ============================================================ */

/* Anneaux décoratifs : graduations techniques en rotation
   lente, sens opposés (esprit instrument spatial) */
.wheel-ring {
    stroke-dasharray: 3 14;
    transform-box: fill-box;
    transform-origin: center;
    animation: wheelRingSpin 90s linear infinite;
}
.wheel-ring-inner {
    stroke-dasharray: 1 7;
    animation: wheelRingSpinRev 70s linear infinite;
}
@keyframes wheelRingSpin    { to { transform: rotate(360deg); } }
@keyframes wheelRingSpinRev { to { transform: rotate(-360deg); } }

/* Balayage radar : lueur conique très faible qui parcourt la
   roue en continu (div .wheel-sweep insérée par wheel-menu.js,
   masquée au centre pour épargner le hub) */
.wheel-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.05) 28deg,
        transparent 62deg);
    -webkit-mask: radial-gradient(circle, transparent 36%, #000 40%, #000 90%, transparent 94%);
    mask: radial-gradient(circle, transparent 36%, #000 40%, #000 90%, transparent 94%);
    animation: wheelSweep 16s linear infinite;
    pointer-events: none;
}
@keyframes wheelSweep { to { transform: rotate(360deg); } }

/* Halo derrière la roue : respiration lente */
.wheel-scene::before { animation: wheelHalo 12s ease-in-out infinite alternate; }
@keyframes wheelHalo {
    from { opacity: 0.75; }
    to   { opacity: 1; }
}

.wheel-hub-logo,
.wheel-hub-name { animation: wheelHubFloat 8s ease-in-out infinite; }
@keyframes wheelHubFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.wheel-eyebrow {
    animation: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    border-left: 2px solid var(--green);
    padding-left: 0.55rem;
}

.wheel-toggle-icon { animation: wheelRingSpin 30s linear infinite; }

/* Mouvement réduit : on fige toute la vie ambiante */
@media (prefers-reduced-motion: reduce) {
    .wheel-ring,
    .wheel-ring-inner,
    .wheel-sweep,
    .wheel-scene::before,
    .wheel-hub-logo,
    .wheel-hub-name,
    .wheel-eyebrow,
    .wheel-toggle-icon,
    .wheel-sector.is-hot .wheel-sector-shape { animation: none !important; }
}

/* ============================================================
   ANIMATIONS DU BOUTON ROUE & DE L'OVERLAY
   Rebond au clic, apparition zoom + légère rotation (esprit
   GTA), disparition plus rapide que l'entrée (motion design).
   ============================================================ */

/* Clic sur le bouton roue : petit rebond (classe posée en JS,
   retirée à la fin de l'animation) */
.wheel-toggle.is-bumped { animation: wheelToggleBump 320ms var(--ease-out); }
@keyframes wheelToggleBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.84); }
    100% { transform: scale(1); }
}

/* Apparition de l'overlay : la roue arrive en zoom + rotation */
.wheel-overlay .wheel-stage { transform: scale(0.86) rotate(-5deg); }
.wheel-overlay .wheel-stage.is-ready { transform: scale(1) rotate(0deg); }

/* Disparition : sortie ~2× plus rapide que l'entrée, la roue
   repart en léger zoom arrière + rotation inverse */
.wheel-overlay.is-closing .wheel-overlay-backdrop { transition-duration: 220ms; }
.wheel-overlay.is-closing .wheel-stage {
    transition-duration: 230ms;
    transform: scale(0.9) rotate(4deg);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wheel-toggle.is-bumped { animation: none !important; }
    .wheel-overlay .wheel-stage,
    .wheel-overlay .wheel-stage.is-ready,
    .wheel-overlay.is-closing .wheel-stage { transform: none; transition: none; }
}