/* ============================================================
   Hero accueil — ROUE SEULE (téléphone supprimé).
   La roue /creer devient l'élément central : halo derrière,
   bouton terracotta dessous, étiquettes + émojis autour (jamais
   dessus), fiche Google en dessous. Chargé après v4.css.
   Accueil uniquement (.home-hero). ============================= */

.home-hero .hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;
  --wout-scale:1}   /* plus de mise à l'échelle : l'ombre de l'anneau (cw-ring) se calcule sur 1 */

/* Scène : nom + roue + lot + bouton, empilés et centrés. */
.home-hero .wheel-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%}

/* (Nom du commerce retiré — option B.) */

/* Anneau = boîte de référence (taille de la roue) pour positionner étiquettes/émojis. */
.home-hero .wheel-ring{position:relative;width:380px;max-width:calc(100vw - 32px);aspect-ratio:1;margin:0 auto}
@media(max-width:940px){ .home-hero .wheel-ring{width:min(330px, calc(100vw - 32px))} }

/* Roue : remplit l'anneau, plus aucune mise à l'échelle de "sortie". */
.home-hero .hero-visual .wheel-box{
  position:relative;width:100%;height:100%;max-width:none;aspect-ratio:1;margin:0;
  transform:none !important}
.home-hero .hero-visual .wheel-wob{width:100%;height:100%}

/* Apparition douce (fondu + léger zoom), une seule fois à l'arrivée. */
.home-hero .hero-visual .wheel-box.wheel-appear{animation:wheelAppear .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes wheelAppear{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){ .home-hero .hero-visual .wheel-box.wheel-appear{animation:none} }

/* Bouton « LANCER LA ROUE » : centré sous la roue, largeur auto (terracotta conservé). */
.home-hero .hero-visual .play-btn{
  width:auto !important;min-width:230px;max-width:90%;margin:26px auto 0 !important;padding:14px 28px}

/* Lot révélé : centré entre roue et bouton. */
.home-hero .wheel-stage .pc-prize{margin:16px auto 0}

/* Fiche Google : sous la roue, centrée (ne recouvre pas la roue). */
.home-hero .hero-visual .gf{margin:22px auto 0}

/* ─── Étiquettes autour de la roue (desktop > 1080 px) ───
   Positionnées par rapport à l'anneau (= bords de la roue). Elles effleurent
   le bord sans recouvrir la face. Masquées en mobile (règles existantes). */
.home-hero .wheel-ring .hbub,
.home-hero .wheel-ring .anno{position:absolute;z-index:6}
/* Annotations longues → 2 lignes (étroites) pour tenir dans les marges latérales. */
.home-hero .wheel-ring .anno{white-space:normal;max-width:150px;line-height:1.25;align-items:flex-start}
.home-hero .wheel-ring .anno svg{margin-top:1px}
.home-hero .wheel-ring .anno-scr{top:7%;right:-33%;left:auto}          /* Interface 100 % — droite haut */
.home-hero .wheel-ring .hb1{top:9%;left:-30%;right:auto}              /* +1 avis Google — gauche haut */
.home-hero .wheel-ring .hb3{top:76%;left:-28%;right:auto;bottom:auto} /* Café offert — gauche bas */
/* Bas de la roue, de part et d'autre du bouton (sous le cercle, jamais dessus) */
.home-hero .wheel-ring .anno-whl{top:103%;left:-30%;right:auto;transform:none}  /* Roue perso — bas gauche */
.home-hero .wheel-ring .hb2{top:103%;right:-30%;left:auto}           /* +1 client fidèle — bas droite */

/* ─── Émojis décoratifs autour de la roue (desktop) ─── */
.home-hero .wheel-ring .hemoji{position:absolute;z-index:3}
.home-hero .wheel-ring .he1{top:-8%;left:12%;right:auto;bottom:auto}   /* ⭐ haut gauche (hors pastille nom) */
.home-hero .wheel-ring .he2{top:84%;right:-4%;bottom:auto;left:auto}   /* 🍔 bas droite (sous le bombé) */
.home-hero .wheel-ring .he3{top:40%;left:-8%;right:auto;bottom:auto}   /* ☕ gauche milieu */