/* Racontine : bouton pour écouter Camille, posé sur le halo. */

.camille-visuel{flex-direction:column;gap:6px}
.voix-zone{position:relative;line-height:0}

.voix-bouton{position:absolute;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--bordeaux);color:#fff;cursor:pointer;box-shadow:0 10px 22px -10px rgba(48,42,42,.6);transition:background .15s,transform .15s}
.voix-bouton:hover{background:var(--bordeaux-fonce);transform:scale(1.06)}
.voix-bouton:focus-visible{outline:3px solid var(--corail);outline-offset:3px}

.voix-halo{right:34px;bottom:34px;width:60px;height:60px}
.voix-guide{top:-10px;right:-8px;width:44px;height:44px}
.voix-mini{position:relative;flex:none;width:52px;height:52px}

.voix-icone{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);fill:currentColor}
.voix-play{margin-left:2%}
.voix-pause{display:none}
.voix-en-cours .voix-play{display:none}
.voix-en-cours .voix-pause{display:block}

/* Anneau d'avancement autour du bouton */
.voix-anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}
.voix-fond{stroke:rgba(255,255,255,.22);stroke-width:2}
.voix-avance{stroke:var(--corail);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--voix-avance,100);transition:stroke-dashoffset .25s linear}

.voix-legende{min-height:28px;font-size:18px;line-height:28px;font-weight:600;color:var(--bordeaux);text-align:center}

/* Le halo vit davantage pendant que Camille parle */
.voix-parle .camille-halo .lueur,.voix-parle.guide .guide-halo .lueur{animation-duration:2.2s}
.voix-parle .forme-a,.voix-parle .forme-b{animation-duration:2.2s}

/* Page cadeau : commande visible quand on a quitté le halo */
.voix-flottant{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;background:#fff;border:1px solid var(--trait);border-radius:999px;box-shadow:0 24px 48px -24px rgba(48,42,42,.45);font-size:17px;line-height:24px;font-weight:600;color:var(--bordeaux)}
.voix-flottant[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .voix-bouton{transition:none}
  .voix-bouton:hover{transform:none}
  .voix-avance{transition:none}
}

@media (max-width:760px){
  .voix-halo{right:22px;bottom:22px;width:56px;height:56px}
  .voix-guide{top:-10px;right:-6px;width:40px;height:40px}
  .voix-flottant{right:12px;bottom:12px}
}