/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* 🎬 Contenu en direct (n° 12 et 16, validés par Yoann le 2026-10-11) : page/app-contenu-direct.js.
   Pastilles d'envoi qui se cliquent, leur petit menu, l'état de chaque téléphone dans « Envoyer », un contenu qui vient
   d'arriver, la vidéo IA prête annoncée. Jamais de son ; une animation ne se répète pas ; « réduire les animations »
   les coupe toutes. */
button.envoi { line-height: 1.5; color: var(--texte); }
button.envoi:hover, button.envoi:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(220,60,128,.25); }
.envoi.fete { animation: envoi-fete .6s ease-out 1; }
@keyframes envoi-fete { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: none; } }

.menu-envoi { position: fixed; z-index: 60; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 12px 34px 12px 12px;
  border-radius: 12px; background: var(--surface-3); border: 1px solid var(--bord); box-shadow: 0 10px 28px rgba(0,0,0,.45);
  animation: entre .14s ease-out; }
.menu-envoi-etat { margin: 0 0 10px; font-size: 13.5px; }
.menu-envoi-note { margin: 0 0 10px; font-size: 12.5px; color: var(--doux); }
.menu-envoi-note:last-child { margin-bottom: 0; }
.menu-envoi-boutons { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-envoi-fermer { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
  color: var(--doux); font-size: 13px; }
.menu-envoi-fermer:hover { background: var(--surface-2); color: var(--texte); }

#envoi-tels label { flex-wrap: wrap; }
.etats-tel { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.etats-tel:empty { display: none; }
.etat-tel { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--bord); white-space: nowrap; color: var(--doux); }
.etat-tel.vert { color: var(--ok); border-color: rgba(62,207,142,.4); }
.etat-tel.jaune { color: var(--alerte); border-color: rgba(245,177,76,.45); }
.etat-tel.rouge { color: var(--erreur); border-color: rgba(255,93,93,.45); }

#liste-contenu .item.arrivee { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color 1.2s ease; }
#liste-contenu .item.arrivee.efface { outline-color: transparent; }

.toast-ia { display: flex; align-items: center; gap: 10px; border-left-color: var(--accent); }
.toast-ia .robot { font-size: 22px; display: inline-block; animation: robot-saute .7s ease-out 1; }
.toast-ia .bouton { flex: none; }
@keyframes robot-saute { 0% { transform: translateY(6px) scale(.7); } 55% { transform: translateY(-4px) scale(1.15); } 100% { transform: none; } }

.bulle-envoi { position: fixed; z-index: 61; pointer-events: none; max-width: min(320px, calc(100vw - 16px)); padding: 6px 12px;
  border-radius: 999px; background: var(--surface-3); border: 1px solid rgba(62,207,142,.55); color: var(--texte); font-size: 13px;
  font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.4); animation: bulle-envoi 2.8s ease-out forwards; }
@keyframes bulle-envoi { 0% { transform: translateY(6px) scale(.85); opacity: 0; } 10% { transform: none; opacity: 1; }
  80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.confetti-envoi { position: fixed; z-index: 61; pointer-events: none; font-size: 15px; animation: confetti-envoi 1s ease-out forwards; }
@keyframes confetti-envoi { from { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; } }

/* 2026-10-12 (« test de l'ado ») : une pastille se voit cliquable (« ▾ », dessiné ici : son texte ne change pas) ; une
   vidéo publiée est une réussite, verte et pleine, jamais barrée (« annulé » pour un ado) ; un envoi raté tremble une
   fois ; la ligne d'aide sous la 1re rangée, jusqu'au 1er clic */
button.envoi::after { content: " ▾"; opacity: .7; font-size: .9em; }
button.envoi.publie { text-decoration: none; background: var(--ok); border-color: var(--ok); color: #04210f; font-weight: 600; }
.envoi.tremble { animation: envoi-tremble .4s ease-in-out 1; }
@keyframes envoi-tremble { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.aide-pastilles { margin: 4px 0 0; font-size: 12px; color: var(--doux); }
/* « Contenu à publier » du Pilotage : où en est la vidéo sur le téléphone affiché */
.ici-envoi { display: inline-block; margin: 2px 0; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ici-envoi.publiee { background: var(--ok); color: #04210f; }
.ici-envoi.recue { color: var(--ok); border: 1px solid rgba(62,207,142,.45); }
.item-mini.deja-publiee { opacity: .6; }
.item-mini.deja-publiee:hover, .item-mini.deja-publiee:focus-within { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .envoi.fete, .envoi.tremble, .menu-envoi, .toast-ia .robot, .bulle-envoi { animation: none; }
  #liste-contenu .item.arrivee { transition: none; }
  .confetti-envoi { display: none; }
}