/* La radio sur le site (`radio.js`) : l'écran d'un live (`live.css`), avec le son d'une radio qui ne s'arrête jamais, la salle, et
   des cadeaux qui s'animent. Ce fichier n'ajoute que ce que la radio a en plus du live : le grand bouton « Écouter », la
   couche des cadeaux, les lignes vocales, l'enregistrement, les feuilles (cadeaux, achat, espace de la radio).
   Aucun style n'est posé en ligne : les valeurs qui changent (couleur et durée d'un cadeau, position d'un cœur) passent par
   des variables de style que le script pose avec l'API du navigateur. */

.lw-salle { --rw-texte: #f6f2ff; --rw-doux: rgba(246, 242, 255, 0.72); --rw-accent: #f5b642; }
.lw-telephone.rw-secousse { animation: rw-vibre 0.6s ease-in-out; }
@keyframes rw-vibre { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-7px, 4px); } 35% { transform: translate(6px, -5px); } 55% { transform: translate(-4px, 3px); } 75% { transform: translate(3px, -2px); } }

/* Le bouton de lecture est SUR le logo, au centre de la pochette (l'utilisateur, 2026-10-17). La scène ignore les touchers (elle les
   rend en cœurs) : le bouton, lui, les prend. Plein et doré pour « écouter » ; transparent, avec un anneau, une fois le son lancé. */
.lw-en-cours { padding-bottom: 110px; }
.rw-logo { position: relative; flex: none; display: grid; place-items: center; min-width: 88px; min-height: 88px; }
.rw-logo .lw-aura { grid-area: 1 / 1; }
.lw-en-cours .rw-lecture { grid-area: 1 / 1; position: relative; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--rw-accent); color: #1c1326; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); cursor: pointer; pointer-events: auto; }
.lw-en-cours .rw-lecture .rw-icone { width: 42px; height: 42px; }
.lw-en-cours .rw-lecture-libelle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.lw-en-cours .rw-lecture--en-cours { background: rgba(0, 0, 0, 0.4); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 6px 24px rgba(0, 0, 0, 0.4); }
.lw-en-cours .rw-lecture:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.rw-icone { display: block; fill: currentColor; }
.lw-icone .rw-icone { width: 24px; height: 24px; }
.lw-bulle .rw-icone { width: 16px; height: 16px; margin-top: 1px; flex: none; }
.lw-pastille .rw-icone { width: 14px; height: 14px; }
.lw-total .rw-icone { color: #ff2d55; }
.rw-coeur { color: #ff4f7b; }

/* La couche des cadeaux : par-dessus la scène et les cœurs, jamais sous un doigt. */
.rw-couche { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }

/* Les lignes vocales des commentaires en grand, et les mots du fil. */
.lw-g-vocal .lw-auteur, .lw-g-cadeau .lw-auteur { color: #ffd54f; }
.lw-g-cadeau { font-weight: 700; color: #ffd54f; }
.lw-ligne.lw-g-vocal-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lw-ligne.lw-g-dedicace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rw-effacement { margin: 6px 0 0; color: var(--rw-doux); font-size: 12px; text-align: center; }
.lw-bandeau .rw-lien { color: var(--rw-accent); font-weight: 700; }

.rw-bouton { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--rw-texte, #f6f2ff); cursor: pointer; }
.rw-bouton:disabled { opacity: 0.4; cursor: default; }
.rw-bouton .rw-icone { width: 24px; height: 24px; }
.rw-envoyer { background: var(--rw-accent); color: #1c1326; }
.rw-mini { width: 32px; height: 32px; }
.rw-mini .rw-icone { width: 18px; height: 18px; }
/* Plus de croix « Supprimer » sur les commentaires (2026-10-20 : on effaçait sans le vouloir) : un appui long dans le fil, ou « ⋯ »
   dans les commentaires en grand, ouvre leurs actions ; « Supprimer » demande encore une confirmation. */
.rw-cite { margin: 0 40px 12px 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.rw-cite strong { color: var(--rw-accent, #f5b642); }
.rw-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 6px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: #f6f2ff; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.rw-action .rw-icone { width: 22px; height: 22px; flex: none; }
.rw-action-danger { color: #ff8a80; }
.rw-confirmer { display: flex; gap: 10px; margin-top: 16px; }
.rw-confirmer .rw-choix { margin-top: 0; text-align: center; }
.rw-choix.rw-choix-danger { background: #e5484d; color: #fff; font-weight: 700; }


.rw-enregistrement { position: relative; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(224, 36, 94, 0.28); }
.rw-rec { color: #ff4f7b; animation: rw-clignote 1s steps(2, start) infinite; }
@keyframes rw-clignote { to { visibility: hidden; } }
.rw-compte { flex: 1 1 auto; }
.rw-vocal { width: auto; min-width: 44px; padding: 0 12px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; height: 32px; font-size: 14px; }
.rw-vocal--joue { background: var(--rw-accent); color: #1c1326; }

/* Les feuilles : par-dessus l'écran du live (z-index 66). */
.rw-feuille { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.6); }
.rw-feuille[hidden] { display: none; }
.rw-feuille-corps { position: relative; width: 100%; max-height: 86dvh; overflow-y: auto; padding: 18px 16px 24px; border-radius: 20px 20px 0 0; background: #1a1424; color: #f6f2ff; }
.rw-feuille-fermer { position: absolute; top: 10px; right: 10px; }
.rw-feuille-titre { margin: 0 40px 12px 0; font-size: 20px; }
.rw-note { margin: 10px 0 0; color: var(--rw-doux, rgba(246, 242, 255, 0.72)); font-size: 13px; }
.rw-solde-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rw-acheter, .rw-choix { padding: 10px 16px; border: 0; border-radius: 999px; background: #f5b642; color: #1c1326; font-weight: 700; cursor: pointer; }
.rw-choix { display: block; width: 100%; margin-top: 10px; padding: 16px; text-align: left; border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #f6f2ff; font-size: 16px; }
/* Les cadeaux, comme TikTok (2026-10-20) : une feuille basse, le direct bien visible au-dessus ; des pages de deux rangées de quatre,
   qu'on fait glisser ; un toucher choisit une carte (elle s'entoure d'or et son nom laisse la place à « Envoyer »), le bouton l'envoie.
   Les mêmes règles que `barre.css`. */
.rw-feuille.rw-feuille--cadeaux { background: rgba(0, 0, 0, 0.12); }
.rw-feuille--cadeaux .rw-feuille-corps { padding-top: 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.rw-feuille--cadeaux .rw-solde-ligne { margin: 8px 0 0; }
.rw-feuille--cadeaux .rw-note { margin-top: 6px; font-size: 12px; }
.rw-cadeaux-tete { display: flex; align-items: center; gap: 8px; margin: 0 44px 10px 0; }
.rw-cadeaux-tete .rw-feuille-titre { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.rw-cadeaux-tete .rw-quantites { flex: none; gap: 6px; margin: 0; }
.rw-cadeaux-tete .rw-quantite { padding: 6px 10px; }
.rw-pages { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rw-pages::-webkit-scrollbar { display: none; }
.rw-page { scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8px; }
.rw-carte { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 6px 4px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.rw-carte--choisie { border-color: #f5b642; background: rgba(255, 255, 255, 0.12); }
.rw-carte-choisir { display: grid; justify-items: center; gap: 2px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.rw-carte-image { width: 44px; height: 44px; object-fit: contain; transition: transform 0.16s ease; }
.rw-carte--choisie .rw-carte-image { transform: scale(1.12); }
.rw-carte-neutre { display: grid; place-items: center; color: #f5b642; }
.rw-carte-neutre .rw-icone { width: 32px; height: 32px; }
.rw-carte-nom { display: block; max-width: 100%; height: 26px; overflow: hidden; font-size: 12px; line-height: 26px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rw-carte-envoyer { display: none; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: #f5b642; color: #1c1326; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.rw-carte--choisie .rw-carte-nom { display: none; }
.rw-carte--choisie .rw-carte-envoyer { display: block; }
.rw-carte-prix { color: #f5b642; font-size: 12px; font-weight: 700; }
.rw-points { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.rw-points[hidden] { display: none; }
.rw-point { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); transition: width 0.18s ease; }
.rw-point--actif { width: 16px; background: #f5b642; }
@media (prefers-reduced-motion: reduce) { .rw-carte-image, .rw-point { transition: none; } }
.rw-quantites { display: flex; gap: 8px; margin: 0 0 10px; }
.rw-quantite { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.rw-quantite--active { background: #f5b642; border-color: #f5b642; color: #1c1326; }
.rw-paquets { display: grid; gap: 10px; }
.rw-paquet { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: inherit; font-size: 16px; cursor: pointer; }
.rw-bonus { color: #7be0a3; font-style: normal; font-weight: 700; }
.rw-paiement { width: 100%; height: 68dvh; border: 0; border-radius: 12px; background: #fff; }

.rw-hote { margin: 0; padding: 0; color: #f6f2ff; }
.rw-hote-sous-titre { margin: 16px 0 8px; font-size: 16px; }
.rw-hote-formulaire { display: grid; gap: 8px; }
.rw-champ { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--rw-texte, #f6f2ff); font-size: 16px; }
.rw-champ::placeholder { color: var(--rw-doux); }
.rw-hote-formulaire .rw-champ { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); }
.rw-gains-liste { margin: 0; padding-left: 18px; }

/* Les cadeaux : chacun a son animation, sa couleur et sa durée. */
.rw-effet { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rw-effet-image { width: min(46vw, 220px); height: min(46vw, 220px); object-fit: contain; filter: drop-shadow(0 0 24px var(--rw-couleur, #f5b642)); animation-duration: var(--rw-duree, 3500ms); animation-fill-mode: forwards; animation-timing-function: ease-in-out; }
.rw-effet > .rw-icone { width: 120px; height: 120px; color: var(--rw-couleur, #f5b642); animation-duration: var(--rw-duree, 3500ms); animation-fill-mode: forwards; }
.rw-effet-legende { position: absolute; left: 0; right: 0; bottom: 22%; margin: 0; padding: 0 16px; text-align: center; font-size: 18px; font-weight: 700; text-shadow: 0 2px 10px #000; animation: rw-legende var(--rw-duree, 3500ms) ease-out forwards; }
@keyframes rw-legende { 0%, 8% { opacity: 0; transform: translateY(12px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.rw-anim-monte .rw-effet-image, .rw-anim-monte > .rw-icone { animation-name: rw-monte; }
@keyframes rw-monte { 0% { transform: translate(-6vw, 55vh) scale(0.7); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(6vw, 5vh) scale(1); } 100% { transform: translate(-4vw, -45vh) scale(1.05); opacity: 0; } }
.rw-anim-eclate .rw-effet-image, .rw-anim-eclate > .rw-icone { animation-name: rw-eclate; }
@keyframes rw-eclate { 0% { transform: scale(0.1) rotate(-20deg); opacity: 0; } 25% { transform: scale(1.35) rotate(6deg); opacity: 1; } 45% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.rw-anim-pluie .rw-effet-image { width: 72px; height: 72px; position: absolute; top: -90px; left: calc(50% + var(--rw-x, 0px)); animation-name: rw-pluie; animation-delay: var(--rw-delai, 0ms); }
@keyframes rw-pluie { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh) rotate(260deg); opacity: 0.9; } }
.rw-anim-secousse .rw-effet-image, .rw-anim-secousse > .rw-icone { animation-name: rw-secousse; }
@keyframes rw-secousse { 0% { transform: translateY(-70vh) scale(1.4); opacity: 0; } 30% { transform: translateY(0) scale(1); opacity: 1; } 38% { transform: translateY(-4vh) scale(1.08, 0.92); } 46% { transform: translateY(0) scale(1); } 85% { opacity: 1; } 100% { transform: translateY(0) scale(0.9); opacity: 0; } }
.rw-anim-deroule .rw-effet-image, .rw-anim-deroule > .rw-icone { width: 100%; max-width: none; height: 38vh; transform-origin: left center; animation-name: rw-deroule; }
@keyframes rw-deroule { 0% { transform: scaleX(0); opacity: 0; } 30% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.rw-anim-galop .rw-effet-image, .rw-anim-galop > .rw-icone { animation-name: rw-galop; }
@keyframes rw-galop { 0% { transform: translate(-70vw, 6vh) rotate(-4deg); opacity: 1; } 12% { transform: translate(-40vw, -3vh) rotate(3deg); } 25% { transform: translate(-18vw, 5vh) rotate(-3deg); } 40% { transform: translate(4vw, -4vh) rotate(4deg); } 55% { transform: translate(24vw, 4vh) rotate(-3deg); } 75% { transform: translate(52vw, -3vh) rotate(3deg); } 100% { transform: translate(90vw, 3vh); opacity: 0; } }
.rw-anim-couronne .rw-effet-image, .rw-anim-couronne > .rw-icone { animation-name: rw-couronne; }
@keyframes rw-couronne { 0% { transform: translateY(-60vh) rotate(-30deg) scale(0.6); opacity: 0; } 30% { transform: translateY(-6vh) rotate(8deg) scale(1.15); opacity: 1; } 45% { transform: translateY(-2vh) rotate(-3deg) scale(1); } 85% { opacity: 1; } 100% { transform: translateY(-2vh) scale(1); opacity: 0; } }
.rw-anim-plein_ecran { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rw-couleur, #f5b642) 55%, transparent), transparent 70%); animation: rw-voile var(--rw-duree, 6000ms) ease-in-out forwards; }
.rw-anim-plein_ecran .rw-effet-image, .rw-anim-plein_ecran > .rw-icone { width: min(86vw, 520px); height: min(86vw, 520px); animation-name: rw-plein; }
@keyframes rw-voile { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rw-plein { 0% { transform: scale(0.2) rotate(-12deg); opacity: 0; } 25% { transform: scale(1.12) rotate(3deg); opacity: 1; } 40% { transform: scale(1); } 85% { opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }

/* Les cadeaux en vidéo 3D (`cadeau_video.js`) : sans fond, par-dessus le live ; petit, au milieu ou en plein écran, comme chez TikTok. */
.rw-effet-video .cadeau-video { display: block; object-fit: contain; animation: rw-video-entre 200ms ease-out; }
.rw-video-plein .cadeau-video { width: 100%; height: 100%; }
.rw-video-milieu .cadeau-video { width: 74%; height: 74%; }
.rw-video-petit .cadeau-video { width: 46%; height: 46%; transform: translateY(16%); }
@keyframes rw-video-entre { from { opacity: 0; } to { opacity: 1; } }

/* Les petits cadeaux : des bandeaux sur le côté, plusieurs à la fois, avec leur compteur ×2, ×3… (comme la Rose de TikTok). */
.rw-bandeaux { position: absolute; left: 10px; top: 34%; display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 20px); z-index: 1; }
.rw-bandeau { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rw-couleur, #f5b642) 55%, rgba(0, 0, 0, 0.55)), rgba(0, 0, 0, 0.35));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); animation: rw-bandeau-entre 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.rw-bandeau-part { animation: rw-bandeau-sort 250ms ease-in forwards; }
.rw-bandeau-icone { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 0 8px var(--rw-couleur, #f5b642)); }
.rw-bandeau-textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rw-bandeau-nom { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.rw-bandeau-quoi { font-size: 12px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.rw-bandeau-n { font-size: 22px; font-weight: 800; font-style: italic; color: #ffd23f; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.rw-bandeau-n.rw-pop { animation: rw-pop 300ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes rw-bandeau-entre { from { transform: translateX(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rw-bandeau-sort { to { transform: translateX(-110%); opacity: 0; } }
@keyframes rw-pop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .lw-telephone.rw-secousse, .rw-rec { animation: none; }
  .rw-bandeau, .rw-bandeau-part, .rw-bandeau-n.rw-pop { animation: none; }
  .rw-effet-image, .rw-effet > .rw-icone { animation-name: rw-doux !important; }
  @keyframes rw-doux { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* L'heure d'un commentaire : petite, discrète, avant le nom. */
.lw-heure { margin-right: 6px; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.62); }
.lw-ligne .lw-heure { display: inline-block; min-width: 3.2em; }

/* Un message vocal arrive : une pastille de trois secondes, pour tout le monde, sous la place de celle d'un tag. */
.lw-vocal-pastille { position: absolute; top: 64px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; border-radius: 26px; background: #3a2a7c; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(190, 170, 255, 0.85); color: #fff; }
.lw-vocal-pastille[hidden] { display: none; }
.lw-vocal-entrante { animation: lw-fondu-entrant 0.3s ease-out; }
.lw-vocal-aller { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.lw-vocal-aller .rw-icone { width: 20px; height: 20px; flex: none; }
.lw-vocal-texte { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.2; }
.lw-vocal-ecouter { flex: none; padding: 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.22); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .lw-vocal-entrante { animation: none; } }

/* Une publicité passe : l'étiquette, et, pour une vidéo, une couche noire sur toute la scène. */
.rw-pub-etiquette { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.rw-pub-etiquette[hidden] { display: none; }
/* Le bouton qui quitte un film : en haut à droite de la scène, au-dessus de la vidéo, toujours touchable. */
.rw-pub-passer { position: absolute; top: 8px; right: 8px; z-index: 9; min-height: 36px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: rgba(0, 0, 0, 0.75); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rw-pub-passer[hidden] { display: none; }
.rw-pub-couche { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: #000; }
.rw-pub-couche video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.rw-retirer { display: inline-block; margin-left: 8px; color: inherit; text-decoration: none; font-weight: 700; }