/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* Finitions du « test de l'ado » (2026-10-12, consigne de Yoann : « même un adolescent doit pouvoir utiliser les
   fonctionnalités ») : de petits repères visibles, un peu de jeu, jamais de son, rien qui se répète ni qui bouge quand
   l'écran préfère le calme. Un seul fichier pour ce lot : moins de conflits avec style.css et agence.css. */

/* « ✓ Copié ! » dans la fenêtre « Accès de … » : un petit pop, une fois */
.copie-pop { animation: finition-pop .45s ease-out 1; }
@keyframes finition-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* 📱 Flotte sans aucun iPhone : pas de barre d'outils (elle revient avec le premier iPhone) */
#vue-flotte.flotte-sans-iphone > .outils { display: none; }

/* 🎮 Pilotage sans iPhone choisi : « ✨ Proposer » grisé ; la liste vide dit pourquoi, avec son bouton */
#proposer.sans-iphone { opacity: .5; filter: saturate(.2); }
.pilotage-vide { padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.pilotage-vide p { margin: 0 0 10px; }
.pilotage-vide .bouton { width: 100%; }

/* 🚀 Mise en route, étape « Instagram », dans 🎮 Pilotage : le relevé des comptes au-dessus de l'écran du téléphone */
.mer-bandeau { display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(220,60,128,.6); background: rgba(220,60,128,.1); font-size: 13.5px; }
.mer-attente { opacity: .75; cursor: progress; }
/* les trois points du relevé en cours : le temps du relevé (2 min au plus), puis ils s'arrêtent */
.mer-points::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: finition-points 1.2s steps(4) 100; }
@keyframes finition-points { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 -10% 0 0); } }

/* ✅ Tâches : le compteur de l'onglet en orange tant qu'une tâche reste bloquée (« ⚠ 1 ») */
.compte-taches.taches-bloquees { background: var(--alerte); color: #2a1700; }
/* les cartes « ⚠ Ana bloque sur … » et « 🔓 Alice a débloqué … » : elles restent jusqu'au clic ou au ✕ */
.carte-signal.signal-bloque { border-left-color: var(--alerte); }
.carte-signal.signal-debloque { border-left-color: var(--ok); }
/* 🎮 Pilotage, « 📋 À faire » : une tâche sur plusieurs téléphones (sa tournée, sa confirmation) ; le bloc brille une fois */
.tache-tel-tournee { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.tache-confirme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bloc-taches-tel.brille { animation: finition-brille 1s ease-out 1; }
@keyframes finition-brille { 0% { box-shadow: 0 0 0 0 rgba(220,60,128,.75); } 100% { box-shadow: 0 0 0 14px rgba(220,60,128,0); } }
.bouton-mission { white-space: nowrap; }

/* La météo d'un compte : la mission confiée en pastille verte (toujours cliquable), « 👩 Rangé chez ▾ » ; dans la
   Flotte, « 📋 Ana » sur la ligne du compte ; la pastille de la modèle d'une carte se clique */
#dlg-meteo [data-meteo-confier].confiee { background: rgba(62,207,142,.16); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.meteo-chez { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 10px; font-size: 13.5px; }
.meteo-chez-ok { color: var(--ok); font-weight: 600; }
.confie-tag { margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 999px; color: var(--ok);
  border: 1px solid rgba(62,207,142,.45); white-space: nowrap; }
.badge-modele[data-changer-chez] { cursor: pointer; }
.badge-modele[data-changer-chez]:hover, .badge-modele[data-changer-chez]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 🎮 Pilotage sur un téléphone (2026-10-12, « test de l'ado » : 3 colonnes fixes, l'écran de l'iPhone à 36 px) : une
   seule colonne, dans l'ordre « 📋 À faire », l'écran de l'iPhone sur toute la largeur et ses boutons, la liste des
   téléphones en puces qui défilent, puis les autres blocs */
@media (max-width: 760px) {
  .vue.pilotage { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .vue.pilotage > .scene { order: 2; padding: 10px 12px; flex: none; }
  .vue.pilotage > .liste-tel { order: 3; border-right: 0; border-top: 1px solid var(--bord); overflow: visible; flex: none; }
  .vue.pilotage > .outils-droite { display: contents; }
  .vue.pilotage > .outils-droite > .bloc { order: 4; margin: 0 12px 12px; }
  .vue.pilotage > .outils-droite > #taches-tel { order: 1; margin: 10px 12px 0; }
  .vue.pilotage .cadre-ecran { flex: none; }
  .vue.pilotage .cadre { width: 100%; height: auto; max-height: none; }
  .vue.pilotage #liste-tel { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .vue.pilotage #liste-tel > * { flex: none; max-width: 70vw; }
  .vue.pilotage .pilotage-vide { flex: 1 1 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .copie-pop, .mer-points::after, .bloc-taches-tel.brille { animation: none; }
  .bloc-taches-tel.brille { outline: 2px solid var(--accent); outline-offset: 2px; }
}