/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* Plateforme en ligne : ce que seule la page d'une agence affiche (chargé par la plateforme, jamais chez Yoann). */
.solde-haut { display: inline-flex; align-items: center; gap: 8px; color: var(--doux); font-size: 13px; margin-left: auto;
  padding: 4px 10px; border: 1px solid var(--bord); border-radius: 999px; background: var(--surface-2); }
.solde-haut b { color: var(--texte); }
.solde-haut, .solde-haut + .qui { white-space: nowrap; flex: none; }
.solde-haut.alerte { border-color: rgba(245,177,76,.6); background: rgba(245,177,76,.08); }
.solde-haut + .qui { margin-left: 12px; }

.bandeau-solde { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245,177,76,.45);
  background: rgba(245,177,76,.08); font-size: 13.5px; }
.cartes-solde { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.carte-solde { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; }
.montant-solde { font-size: 34px; font-weight: 700; }
.paquets { display: flex; flex-wrap: wrap; gap: 8px; }
.carte-solde .ligne { display: flex; gap: 8px; }
.carte-solde .ligne .champ { max-width: 180px; }
.titre-solde { font-size: 15px; margin: 26px 0 10px; color: var(--doux); font-weight: 600; }
.titre-solde .aide { font-weight: 400; margin-left: 6px; }
.tableau-solde { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.tableau-solde th { text-align: left; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .4px;
  padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--bord); }
.tableau-solde td { padding: 9px 12px; border-bottom: 1px solid var(--bord); font-size: 13.5px; }
.tableau-solde tr:last-child td { border-bottom: 0; }
.tableau-solde .credit { color: var(--ok); font-weight: 600; }
.tableau-solde .debit { color: var(--texte); }
.statut-loc { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--doux); }
.statut-loc.louee { background: rgba(62,207,142,.12); color: var(--ok); }
.statut-loc.en_attente, .statut-loc.expiree, .statut-loc.a_reprendre { background: rgba(245,177,76,.12); color: var(--alerte); }
#vue-solde { overflow-y: auto; }
.retour-accueil { align-self: center; color: var(--doux); text-decoration: none; font-size: 13px; }
.mdp-oublie { align-self: center; color: var(--doux); font-size: 13px; }   /* « mot de passe oublié ? » (2026-10-08) */
.mdp-oublie:hover { color: var(--accent); }
.retour-accueil:hover, .retour-accueil-haut:hover { color: var(--texte); }
.retour-accueil-haut { color: var(--doux); text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; flex: none; }
.bandeau-vue { background: rgba(250,5,110,.12); border-bottom: 1px solid rgba(250,5,110,.45); color: var(--texte);
  padding: 8px 18px; font-size: 13.5px; text-align: center; flex: none; }
.bandeau-maintenance { background: rgba(245,177,76,.15); border-bottom: 1px solid rgba(245,177,76,.5); color: var(--texte);
  padding: 8px 18px; font-size: 13.5px; text-align: center; flex: none; }
/* L'iPhone commandé est arrivé (2026-10-09) : vert, jusqu'au « OK » */
.bandeau-arrivee { background: rgba(62,207,142,.14); border-bottom: 1px solid rgba(62,207,142,.5); color: var(--texte);
  padding: 8px 18px; font-size: 13.5px; text-align: center; flex: none; }
.bandeau-arrivee .bouton { margin-left: 10px; padding: 3px 14px; }
/* « Pour quelle modèle ? » sous l'iPhone arrivé (2026-10-12) */
.dedier-arrivee { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.dedier-arrivee .dedie { font-weight: 700; }
.dedier-arrivee .dedie.erreur { color: var(--erreur); font-weight: 600; }
/* Tout en direct (2026-10-09) : une nouvelle version publiée, le bouton pour recharger quand on veut */
.bandeau-version { background: rgba(220,60,128,.14); border-bottom: 1px solid rgba(220,60,128,.5); color: var(--texte);
  padding: 8px 18px; font-size: 13.5px; text-align: center; flex: none; }
.bandeau-version .bouton { margin-left: 10px; padding: 3px 14px; }
/* Les annonces de Vicious Studio (2026-10-09) : rose pour une nouveauté, bleu pour une info, orange pour l'important */
.bandeau-annonce { background: rgba(220,60,128,.14); border-bottom: 1px solid rgba(220,60,128,.5); color: var(--texte);
  padding: 8px 18px; font-size: 13.5px; text-align: center; flex: none; overflow-wrap: anywhere; }
.bandeau-annonce.annonce-info { background: rgba(90,150,255,.14); border-bottom-color: rgba(90,150,255,.5); }
.bandeau-annonce.annonce-important { background: rgba(245,177,76,.18); border-bottom-color: rgba(245,177,76,.6); }
.bandeau-annonce .annonce-signe { color: var(--doux); white-space: nowrap; }
.bandeau-annonce .bouton { margin-left: 10px; padding: 3px 14px; }
/* Un outil IA fermé par Vicious Studio n'est plus proposé (2026-10-09). La synchro des lèvres : on ne peut plus
   déposer de voix, mais « retirer cette voix » reste là pour une voix déjà déposée (revue : sinon l'agence était
   bloquée, le serveur refusant toute vidéo avec une voix). La note de l'étape le dit (app.js, levresFermee). */
.ia-levres-fermee #ia-voix-depot, .ia-levres-fermee #ia-voix-accord-bloc { display: none !important; }
.ia-decor-fermee [data-decor-photo] { display: none !important; }
/* la barre du haut d'une agence porte en plus le solde : elle passe sur deux lignes plutôt que de cacher « Se déconnecter » */
.barre { flex-wrap: wrap; row-gap: 8px; }
/* Chez les clients : plus de « Réponses rapides », le bloc de l'IA en avant (demande de Yoann, 2026-10-07) */
.mode-client .pas-client { display: none !important; }
.mode-client .bloc-ia-reponses { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* Le prix fixe des textes IA, à côté de leur bouton (2026-10-07) */
.prix-texte-ia { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--doux); white-space: nowrap; }
/* Louer un iPhone : la commande (2026-10-07) */
.titre-avec-bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }
.titre-avec-bouton .titre-solde { margin: 0; }
.dialogue-commande form { display: flex; flex-direction: column; gap: 8px; }
.total-commande { margin: 6px 0 0; font-size: 15px; }
.erreur-commande { color: var(--erreur); margin: 0; min-height: 1em; }
.erreur-commande.attente { color: var(--doux); }   /* « ⏳ … ta commande part toute seule » : une attente, pas une erreur */
.statut-commande { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(245,177,76,.12); color: var(--alerte); }
.statut-commande.livree { background: rgba(62,207,142,.12); color: var(--ok); }
.statut-commande.annulee, .statut-commande.refusee { background: var(--surface-3); color: var(--doux); }
/* Les collaborateurs (2026-10-08) : la formule, les assistants en pause, les tâches, à qui chaque téléphone est confié */
.plafond-equipe { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bord);
  background: var(--surface-2); font-size: 13.5px; }
.plafond-equipe.plein { border-color: rgba(245,177,76,.55); background: rgba(245,177,76,.08); }
.statut-va.pause { background: rgba(245,177,76,.12); color: var(--alerte); }
.carte-va.en-pause { opacity: .8; }
.pause-va { margin: 0; color: var(--alerte); }
.tels-confies { font-size: 13px; color: var(--doux); overflow-wrap: anywhere; }
.case-va { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.confie-a { align-self: flex-start; width: fit-content; max-width: 100%; margin: 2px 0; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--doux); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sans-reponses-ia .bloc-ia-reponses { display: none !important; }
#vue-taches { overflow-y: auto; }
.liste-taches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.carte-tache { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 14px; display: flex;
  flex-direction: column; gap: 8px; min-width: 0; }
.carte-tache h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.carte-tache.en-retard { border-color: rgba(245,177,76,.6); }
.carte-tache.faite { opacity: .8; }
.infos-tache { display: flex; flex-wrap: wrap; gap: 6px; }
.details-tache { margin: 0; font-size: 13.5px; color: var(--doux); white-space: pre-wrap; overflow-wrap: anywhere; }
.fait-tache { font-size: 13px; color: var(--ok); overflow-wrap: anywhere; }
.carte-tache > .lien { align-self: flex-start; }
.coche-tache { display: flex; gap: 8px; }
.coche-tache .champ { flex: 1; min-width: 0; }
.historique-tache { font-size: 12.5px; color: var(--doux); }
.historique-tache summary { cursor: pointer; }
.compte-taches { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff; }
.dialogue-tache form { display: flex; flex-direction: column; gap: 8px; }
/* « Nouvelle tâche » (2026-10-09) : tâche toute prête, modèles et téléphones, raccourcis par étiquette ; VA manager */
.dialogue-tache .perimetre-tache { grid-template-columns: repeat(2, 1fr); }
.dialogue-tache .perimetre-tache .cases-perim { max-height: 26vh; }
.dialogue-tache #tache-raccourcis { align-items: center; }
.dialogue-tache #tache-raccourcis:empty { display: none; }
/* Les tâches dans le travail de chacun (2026-10-11, page/agence-taches.js) : « ⚠ Je bloque » en orange, « 🎮 Ouvrir » /
   « ▶ Tournée » sur les cartes, « 📋 À faire sur ce téléphone » dans le Pilotage, l'annonce d'une nouvelle tâche */
.carte-tache.bloquee { border-color: var(--alerte); box-shadow: 0 0 0 1px var(--alerte) inset; background: rgba(245,177,76,.05); }
.blocage-tache { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(245,177,76,.55); background: rgba(245,177,76,.12); font-size: 13px; overflow-wrap: anywhere; }
.blocage-tache b { color: var(--alerte); }
.blocage-raison { white-space: pre-wrap; max-width: 100%; }
.actions-tache { display: flex; flex-wrap: wrap; gap: 6px; }
.actions-tache .bouton { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bouton-bloque { color: var(--alerte); }
.dialogue-bloque { width: min(480px, 94vw); }
.dialogue-bloque form { display: flex; flex-direction: column; gap: 8px; }
.dialogue-bloque h2 { margin: 0; }
.dialogue-bloque #bloque-tache { margin: 0; overflow-wrap: anywhere; }
.dialogue-bloque .etiquette-champ { display: flex; justify-content: space-between; gap: 8px; }
.bloc-taches-tel { border-color: rgba(220,60,128,.55); box-shadow: 0 0 0 1px rgba(220,60,128,.25) inset; display: flex; flex-direction: column; gap: 8px; }
.bloc-taches-tel h3 { margin: 0; }
.taches-tel-score { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ok); font-weight: 600; white-space: nowrap; }
.jauge-mini { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.jauge-mini i, .jauge-tournee i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .35s ease; }
.tache-tel { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--bord); transition: opacity .5s ease; }
.tache-tel.bloquee { border-color: rgba(245,177,76,.6); }
.tache-tel-titre { font-weight: 600; overflow-wrap: anywhere; }
.tache-tel-infos { font-size: 12px; color: var(--doux); }
.tache-tel-infos .retard { color: var(--erreur); font-weight: 600; }
.tache-tel details { font-size: 12.5px; color: var(--doux); }
.tache-tel details summary { cursor: pointer; color: var(--texte); }
.tache-tel details p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* « 👥 Ton équipe sur ce téléphone » (2026-10-12) : sous ses tâches à lui, plus discrète */
.bloc-taches-tel h3.taches-tel-equipe { font-size: 14px; }
.bloc-taches-tel h3.taches-tel-equipe:not(:first-child) { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--bord); }
.tache-tel.tache-equipe { background: transparent; }
.tache-tel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tache-tel.faite-ici { opacity: .45; }
.tache-tel.faite-ici .tache-tel-titre { text-decoration: line-through; }
.bouton.pop { animation: tache-pop .4s ease-out; background: var(--ok); border-color: var(--ok); }
@keyframes tache-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.barre-tournee .jauge-tournee { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.barre-tournee .boutons-tournee { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.barre-tournee .boutons-tournee .bouton { margin-left: 0; }
.carte-nouvelle { position: relative; border-left-color: var(--accent); padding-right: 34px; display: flex; flex-direction: column; gap: 6px;
  max-width: 380px; }
.carte-nouvelle-tete { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.carte-nouvelle-emoji { font-size: 20px; }
.carte-nouvelle-titre { font-weight: 600; overflow-wrap: anywhere; }
.carte-nouvelle .aide { margin: 0; }
.carte-nouvelle-liste { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.carte-nouvelle-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.carte-nouvelle-x { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--doux); font-size: 14px; padding: 4px 6px; }
.carte-nouvelle-x:hover { color: var(--texte); }
.confettis-tache { position: fixed; z-index: 70; pointer-events: none; width: 0; height: 0; }
.confettis-tache span { position: absolute; left: 0; top: 0; font-size: 16px; animation: tache-gerbe 1s ease-out forwards; }
@keyframes tache-gerbe { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bouton.pop, .confettis-tache span { animation: none; }
  .tache-tel, .jauge-mini i, .jauge-tournee i { transition: none; }
}
.statut-va.manager { background: rgba(250,204,21,.14); color: #f5c518; }
.carte-va .case-va select { margin-left: 6px; }
/* Mon abonnement (2026-10-08) : formule, renouvellement automatique, changement de formule, dépenses du mois */
#abonnement-contenu .titre-solde:first-child { margin-top: 18px; }
.formule-abo { font-size: 20px; }
.ligne-abo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.carte-solde .interrupteur.abo { color: var(--texte); font-size: 15px; font-weight: 600; }
.tableau-solde tr.total td { font-weight: 700; border-top: 1px solid var(--bord); }
.dialogue-abo form { display: flex; flex-direction: column; gap: 10px; }
.choix-abo { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.choix-abo .choix { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--bord);
  border-radius: 10px; cursor: pointer; background: var(--surface-2); }
.choix-abo .choix:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.choix-abo .choix input { accent-color: var(--accent); margin-top: 3px; }
.choix-abo .choix .aide { display: block; margin: 0; }

/* Le logo de Vicious Studio en filigrane, derrière toutes les pages du Studio en ligne (Yoann, 2026-10-08 :
   « en transparence… en arrière-plan », « plus visible, mais pas trop »). Derrière les cadres, jamais un clic. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("logo-fond.webp") center 58% / min(62vw, 68vh) no-repeat;
  opacity: .22;
}
/* Retouche : son grand panneau de réglages couvrait tout le logo ; il laisse voir le logo au travers. */
.retouche-reglages { background: rgba(20, 16, 19, .55); }

/* La météo du compte (2026-10-09) : une couleur par gravité au lieu du « tout en orange », et le bulletin ludique */
:root { --info: #6fb3ff; --brume: #8a7f86; }
.point.info { background: var(--info); }
.point.grave { background: var(--erreur); box-shadow: 0 0 0 3px rgba(255,93,93,.25); }
.point.inconnu { background: var(--brume); }
/* vérification ratée : du brouillard, mais encore « à surveiller » (anneau orange), jamais confondue avec « jamais vérifié » */
.point.erreur { background: var(--brume); box-shadow: 0 0 0 2px var(--alerte); }
.compte .etat.info { color: var(--info); }
.compte .etat.grave { color: var(--erreur); font-weight: 600; }
.compte .etat.inconnu { color: var(--brume); }
.compte .etat.erreur { color: var(--alerte); }
[data-meteo-pret]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.compte, span:has(> .point):not(.haut) { cursor: pointer; }
.compte:hover .nom, span:has(> .point):not(.haut):hover { text-decoration: underline dotted; text-underline-offset: 3px; }

.dialogue-meteo { width: min(760px, 94vw); max-height: 90vh; overflow-y: auto; }
.meteo-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.meteo-titres { flex: 1; min-width: 0; }
.meteo-titres h2 { margin: 0; overflow-wrap: anywhere; }
.meteo-titres .aide { margin: 2px 0 0; }
.meteo-ciel { font-size: 46px; line-height: 1; flex: none; animation: meteo-flotte 3.2s ease-in-out infinite; }
.meteo-ciel.grave { animation: meteo-orage 2.4s ease-in-out infinite; }
@keyframes meteo-flotte { 50% { transform: translateY(-5px); } }
@keyframes meteo-orage { 0%, 100% { transform: none; } 6% { transform: translateX(-2px) rotate(-3deg); } 12% { transform: translateX(2px) rotate(3deg); } 18% { transform: none; } }
.meteo-x { align-self: flex-start; }
.meteo-jauge { display: flex; align-items: center; gap: 5px; margin: 4px 0 12px; font-size: 13px; color: var(--doux); flex-wrap: wrap; }
.meteo-jauge i { width: 34px; height: 8px; border-radius: 4px; background: var(--surface-3); }
.meteo-jauge i.plein.info { background: var(--info); }
.meteo-jauge i.plein.attention { background: var(--alerte); }
.meteo-jauge i.plein.grave { background: var(--erreur); }
.meteo-jauge span { margin-left: 6px; }
.meteo-rubriques { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.meteo-puce { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--bord); background: var(--surface-2);
  color: var(--doux); font: inherit; font-size: 12.5px; }
button.meteo-puce { cursor: pointer; color: var(--texte); }
.meteo-puce.attention { border-color: rgba(245,177,76,.55); }
.meteo-puce.grave { border-color: rgba(255,93,93,.6); }
.meteo-puce.info { border-color: rgba(111,179,255,.55); }
.meteo-puce.actif { box-shadow: 0 0 0 2px var(--accent) inset; border-color: var(--accent); }
.meteo-fiche h3 { margin: 4px 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meteo-niveau { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.meteo-niveau.info { background: rgba(111,179,255,.15); color: var(--info); }
.meteo-niveau.attention { background: rgba(245,177,76,.15); color: var(--alerte); }
.meteo-niveau.grave { background: rgba(255,93,93,.15); color: var(--erreur); }
.meteo-resume { font-size: 15px; margin: 0 0 10px; }
.meteo-faits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meteo-faits p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.meteo-serieux { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,93,93,.5);
  background: rgba(255,93,93,.08); font-size: 13.5px; }
.meteo-fiche h4 { margin: 18px 0 8px; font-size: 14.5px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meteo-fiche h4 .aide { font-weight: 400; margin: 0; }
.meteo-compteur { margin-left: auto; font-size: 13px; color: var(--accent); }
.meteo-progression { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meteo-progression > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .35s ease; }
.meteo-mission { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 6px; }
.meteo-mission li { counter-increment: etape; }
.meteo-mission label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--surface-2);
  cursor: pointer; font-size: 13.5px; }
.meteo-mission label::before { content: counter(etape); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--doux); }
.meteo-mission input { accent-color: var(--ok); margin-top: 2px; flex: none; }
.meteo-mission label:has(input:checked) { background: rgba(62,207,142,.08); }
.meteo-mission label:has(input:checked) span { text-decoration: line-through; color: var(--doux); }
.meteo-bravo { position: relative; margin-top: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(62,207,142,.5);
  background: rgba(62,207,142,.1); font-size: 13.5px; }
.meteo-bravo .bouton { margin-top: 8px; display: block; }
.meteo-confetti { position: absolute; left: 50%; top: 50%; pointer-events: none; font-size: 18px;
  animation: meteo-gerbe 1.3s ease-out forwards; }
@keyframes meteo-gerbe { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); opacity: 0; } }
.meteo-pieges { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.meteo-piege { display: grid; padding: 0; border: 0; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer;
  perspective: 700px; min-height: 76px; }
.meteo-piege > span { grid-area: 1 / 1; display: flex; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  backface-visibility: hidden; transition: transform .45s ease; }
.meteo-piege .recto { background: rgba(255,93,93,.09); border: 1px solid rgba(255,93,93,.4); font-weight: 600; }
.meteo-piege .verso { background: var(--surface-2); border: 1px solid var(--bord); transform: rotateY(180deg); }
.meteo-piege.retournee .recto { transform: rotateY(-180deg); }
.meteo-piege.retournee .verso { transform: rotateY(0deg); }
.meteo-piege:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.meteo-piege-rappel { display: block; color: var(--doux); font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.meteo-bandeau { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245,177,76,.45);
  background: rgba(245,177,76,.08); font-size: 13.5px; }
.meteo-bandeau .bouton { margin-left: 8px; }
.meteo-titres h2:focus { outline: none; }
.meteo-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.meteo-astuce { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(220,60,128,.08); border: 1px dashed rgba(220,60,128,.45);
  font-size: 13.5px; }
.meteo-source { margin: 10px 0 0; font-size: 12px; }
.meteo-calme { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 14px; margin: 4px 0 0; }
.meteo-calme .bouton { margin-left: 8px; }
.meteo-pied { margin-top: 16px; border-top: 1px solid var(--bord); padding-top: 12px; }
.meteo-pied .aide { margin: 0 0 10px; }
.meteo-pied .ligne { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 560px) {
  .dialogue-meteo { padding: 16px; }
  .meteo-faits { grid-template-columns: 1fr; }
  .meteo-ciel { font-size: 38px; }
  .meteo-pied .ligne .bouton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .meteo-ciel, .meteo-ciel.grave { animation: none; }
  .meteo-piege > span, .meteo-progression > i { transition: none; }
}

/* Le panneau 👥 Équipe du Pilotage (2026-10-09) : qui est en ligne, sur quel téléphone, son temps et ses tâches */
.onglets-gauche { display: flex; flex: none; }
.onglets-gauche button { flex: 1; font-size: 12.5px; padding: 6px 4px; white-space: nowrap; }
.nb-en-ligne { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px;
  background: rgba(62,207,142,.16); color: var(--ok); font-size: 11.5px; font-weight: 700; }
.nb-en-ligne:empty { display: none; }
.equipe-direct { display: flex; flex-direction: column; gap: 8px; }
.fiche-va { border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; min-width: 0; }
.fiche-va.absent { opacity: .7; }
.fiche-va .tete { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fiche-va .tete strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-va .tete .statut-va { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 999px; }
.fiche-va .tete .statut { margin-left: auto; color: var(--tres-doux); font-size: 11.5px; white-space: nowrap; }
.fiche-va .point.direct { background: var(--accent); box-shadow: 0 0 0 3px rgba(220,60,128,.18); }
.fiche-va .sous { color: var(--doux); }
.fiche-va .sous b { color: var(--texte); }
.fiche-va .sous.pause { color: var(--alerte); }
.fiche-va .sur { display: block; text-align: left; border: 1px solid rgba(220,60,128,.4); background: rgba(220,60,128,.08); color: var(--texte);
  border-radius: 8px; padding: 4px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fiche-va .sur span { color: var(--doux); font-weight: 400; }
.fiche-va div.sur { cursor: default; }
.fiche-va .taches-va { margin: 0; padding-left: 18px; color: var(--doux); }
.fiche-va .taches-va li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-va .taches-va li.retard { color: var(--erreur); }
.fiche-va .taches-va li.plus { list-style: none; margin-left: -18px; color: var(--tres-doux); }

/* Le chatbot d'aide (2026-10-09, demande de Yoann) : une bulle en bas à gauche, une petite messagerie au-dessus.
   Cachés sur Vidéos IA et Retouche par page/aide.js. Les toasts vivent en bas à DROITE : rien ne se chevauche. */
.aide-bulle { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--accent); color: #1f0010; font-size: 24px; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.aide-bulle:hover { background: var(--accent-fonce); }
.aide-bulle:focus-visible { outline: 2px solid var(--texte); outline-offset: 3px; }
.aide-bulle.ouverte { background: var(--surface-3); color: var(--texte); }
.aide-fenetre { position: fixed; left: 16px; bottom: 80px; z-index: 60; width: min(360px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.55); overflow: hidden; }
.aide-tete { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--bord);
  background: var(--surface-2); }
.aide-titre { flex: 1; font-weight: 600; }
.aide-icone { background: none; border: 0; color: var(--doux); width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.aide-icone:hover { background: var(--surface-3); color: var(--texte); }
.aide-fil { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.aide-message { max-width: 88%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.45; }
.aide-message.aide { align-self: flex-start; background: var(--surface-3); border-bottom-left-radius: 4px; }
.aide-message.moi { align-self: flex-end; background: rgba(220,60,128,.18); border: 1px solid rgba(220,60,128,.35);
  border-bottom-right-radius: 4px; }
.aide-message.erreur { color: var(--erreur); background: rgba(255,93,93,.08); }
.aide-message.attente { color: var(--doux); letter-spacing: 2px; }
.aide-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--bord); }
.aide-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; }
/* Pilotage : la liste des téléphones défile jusqu'au-dessus de la bulle, son dernier téléphone n'est jamais caché dessous */
.pilotage aside.colonne.liste-tel { padding-bottom: 76px; }

/* La messagerie de l'agence (2026-10-09) : en bas de la colonne de gauche du Pilotage, au-dessus de la bulle d'aide ;
   elle reste visible quand la liste des téléphones défile */
.messagerie { position: sticky; bottom: 0; margin-top: auto; z-index: 3; flex: none; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 -8px 18px rgba(0,0,0,.35); overflow: hidden; }
/* trop peu de place pour une liste lisible collée en bas, ou une colonne qui ne défile pas (téléphone) : rangée sous la
   liste, on y descend ; elle ne glisse plus sur rien (agence-messagerie.js, placerBloc) */
.messagerie.a-la-suite { position: static; }
.msg-tete { width: 100%; display: flex; align-items: center; gap: 6px; padding: 9px 8px; background: var(--surface-2); min-width: 0;
  overflow: hidden; border: 0; color: var(--texte); font-weight: 700; font-size: 13px; text-align: left; cursor: pointer; }
.msg-tete:hover { background: var(--surface-3); }
/* la tête rétrécit au lieu de déborder (colonne de 200 px sous 1150 px) : « Messagerie » se coupe, la flèche reste */
.msg-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.msg-en-ligne { margin-left: auto; color: var(--ok); font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.msg-fleche { color: var(--doux); font-size: 11px; transition: transform .15s; flex: none; }
.messagerie.ouverte .msg-fleche { transform: rotate(180deg); }
.msg-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent);
  color: #1f0010; font-size: 11px; font-weight: 800; text-align: center; line-height: 18px; flex: none; }
.msg-badge:empty { display: none; }
/* sa hauteur se MESURE (agence-messagerie.js, placerBloc, audit du 2026-10-12) : ouverte, elle ne descend jamais sur le
   1er téléphone ni sur ce qui le précède, quelle que soit la hauteur de la barre d'onglets ; la formule d'avant (qui
   supposait une barre d'une ligne) ne sert plus qu'avant la 1re mesure et sur un téléphone */
.msg-corps { height: var(--msg-corps-haut, clamp(160px, calc(100vh - 420px), 380px)); display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--bord); }
.msg-corps[hidden] { display: none; }
.msg-liste { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.msg-liste[hidden], .msg-fil[hidden] { display: none; }
.msg-ligne { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--texte); text-align: left; cursor: pointer; min-width: 0; }
.msg-ligne:hover { background: var(--surface-3); }
.msg-ligne.absent { opacity: .75; }
.msg-icone { width: 9px; display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.msg-qui { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-qui b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-qui small { color: var(--tres-doux); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-fil { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.msg-fil-tete { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--bord); min-width: 0; }
.msg-fil-tete b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-statut { margin-left: auto; color: var(--tres-doux); font-size: 11px; white-space: nowrap; }
.msg-retour { background: none; border: 0; color: var(--doux); font-size: 15px; padding: 0 4px; cursor: pointer; }
.msg-retour:hover { color: var(--texte); }
.msg-messages { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.msg { max-width: 88%; align-self: flex-start; display: flex; flex-direction: column; gap: 1px; }
.msg.moi { align-self: flex-end; align-items: flex-end; }
.msg-meta { color: var(--tres-doux); font-size: 10.5px; padding: 0 4px; }
.msg-texte { padding: 6px 9px; border-radius: 12px; border-bottom-left-radius: 4px; background: var(--surface-3); font-size: 12.5px;
  line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.moi .msg-texte { background: rgba(220,60,128,.18); border: 1px solid rgba(220,60,128,.35); border-radius: 12px;
  border-bottom-right-radius: 4px; }
.msg-vide { margin: auto 0; text-align: center; }
.msg-separateur { margin: 8px 8px 2px; color: var(--tres-doux); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.msg-anciens { align-self: center; font-size: 11.5px; }
.msg.du-responsable .msg-texte { border: 1px solid rgba(62,207,142,.45); }   /* le vrai responsable se reconnaît */
.msg-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px solid var(--bord); }
.msg-form[hidden] { display: none; }
.msg-form textarea { resize: none; min-height: 38px; max-height: 110px; font-size: 12.5px; }
.msg-form .bouton { align-self: flex-end; }
.msg-lecture { margin: 0; padding: 8px; border-top: 1px solid var(--bord); font-size: 11.5px; }
/* l'onglet 🎮 Pilotage montre les messages pas encore lus */
nav [data-vue="pilotage"][data-non-lus]::after { content: attr(data-non-lus); display: inline-block; min-width: 16px;
  margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #1f0010; font-size: 10.5px;
  font-weight: 800; line-height: 16px; text-align: center; }

/* Le ton de la modèle (2026-10-09) : 5 cases dans sa fiche, et la carte « 🎙️ Tu réponds pour… » du Pilotage */
.modele-ton { display: grid; gap: 6px; margin-top: 4px; }
#dlg-modele { width: min(640px, 94vw); }   /* plus large en ligne : les exemples des cases se lisent en entier */
.modele-ton .ton-case { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.modele-ton .ton-case span { color: var(--doux); }
.modele-ton .ton-visible { margin: 2px 0 0; }
.ton-compteur { margin: 4px 0 0; text-align: right; }
.ton-compteur.trop { color: var(--erreur); font-weight: 600; }
@media (max-width: 560px) { .modele-ton .ton-case { grid-template-columns: 1fr; gap: 2px; } }
.bloc-ton { display: grid; gap: 8px; contain: inline-size; min-width: 0; }   /* l'aperçu sur une ligne n'élargit jamais la colonne */
.ton-carte, .ton-carte summary { min-width: 0; }
.ton-carte { border-left: 3px solid var(--couleur, var(--accent)); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.ton-carte summary { cursor: pointer; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.ton-carte summary::-webkit-details-marker { display: none; }
.ton-carte summary .ton-titre::before { content: "▸ "; color: var(--doux); }
.ton-carte[open] summary .ton-titre::before { content: "▾ "; }
.ton-carte .ton-apercu { color: var(--doux); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ton-carte[open] .ton-apercu { display: none; }
.ton-liste { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.ton-liste li { display: flex; gap: 8px; align-items: flex-start; }
.ton-liste .ton-emoji { flex: none; width: 20px; text-align: center; }
.ton-liste li span:last-child { white-space: pre-line; overflow-wrap: anywhere; }
.ton-modifier { font-size: 12.5px; }
.ton-vide { border-left: 3px solid var(--couleur, var(--accent)); padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.ton-vide .bouton { margin-left: 6px; }
.ton-plusieurs { margin: 0; }
.ton-rappel { margin: 0; color: var(--texte); }
.ton-erreur:empty { display: none; }
/* Le point du matin (2026-10-09) : la carte du responsable, une fois par jour */
.dialogue-matin { position: fixed; top: 70px; right: 16px; left: auto; margin: 0; z-index: 60; width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 90px); overflow: auto; box-shadow: 0 18px 48px rgba(0,0,0,.55); }
.dialogue-matin .matin-jour { color: var(--doux); font-weight: 400; font-size: 14px; }
.dialogue-matin .matin-calme { margin: 0 0 12px; font-size: 15px; color: var(--ok); font-weight: 600; }
.dialogue-matin .matin-lignes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dialogue-matin .matin-ligne { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); color: var(--texte); font-size: 14px; cursor: pointer; }
.dialogue-matin .matin-ligne:hover { background: var(--surface-3); }
.dialogue-matin .matin-ligne.urgent { border-color: rgba(245,177,76,.55); background: rgba(245,177,76,.08); }
.dialogue-matin .matin-ligne .emoji { font-size: 18px; flex: none; }
.dialogue-matin .matin-ligne .texte { flex: 1; min-width: 0; }
.dialogue-matin .matin-ligne .fleche { color: var(--tres-doux); flex: none; }
.dialogue-matin .actions { display: flex; justify-content: flex-end; }

/* ---------- Les tutos vidéo (onglet 🎓 Tutos, 2026-10-10 ; petites vignettes + grande fenêtre le 2026-10-11) ---------- */
.liste-tutos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-width: 1280px; }
.carte-tuto { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px; }
.vignette-tuto { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px;
  overflow: hidden; background: #000; cursor: pointer; }
.apercu-tuto { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lancer-tuto { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid;
  place-items: center; background: var(--accent); color: #fff; font-size: 22px; padding-left: 4px; box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(0,0,0,.5); transition: transform .12s; }
.vignette-tuto:hover .lancer-tuto, .vignette-tuto:focus-visible .lancer-tuto { transform: scale(1.12); }
.duree-tuto { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.75);
  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.titre-tuto { margin: 0; font-size: 14px; display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; line-height: 1.35; }
.numero-tuto { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.onglet-tuto { align-self: flex-start; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--doux); }
/* la grande fenêtre : ~90 % de l'écran, la vidéo aussi grande que possible ; tout l'écran sur téléphone */
.dialogue-tuto { width: min(1400px, 92vw); max-width: none; max-height: 94vh; padding: 0; }
.boite-tuto { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.tete-tuto { display: flex; align-items: center; gap: 10px; }
.tete-tuto h2 { margin: 0; flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.fermer-tuto { flex: none; font-size: 18px; }
.dialogue-tuto .lecteur { width: 100%; }
.dialogue-tuto .video-tuto { display: block; width: 100%; max-height: calc(94vh - 120px); background: #000; border-radius: 8px; }
@media (max-width: 700px) {
  .dialogue-tuto { width: 100vw; height: 100vh; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .dialogue-tuto .video-tuto { max-height: calc(100vh - 120px); }
}

/* ---------- 🔥 Tendances : les Reels Instagram publics (2026-10-10) ---------- */
#vue-tendances { overflow-y: auto; }
.tendances-form { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin: 12px 0 14px; }
.tendances-sortes { display: flex; gap: 8px; flex-wrap: wrap; }
.tendance-sorte { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bord);
  border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.tendance-sorte:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.tendance-sorte input { accent-color: var(--accent); margin: 0; }
.tendances-ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.tendances-ligne #tendance-terme { flex: 1 1 220px; min-width: 0; width: auto; }
.tendances-ligne #tendance-nombre { flex: 0 0 auto; width: auto; }
.tendances-ligne #tendance-nombre[hidden] { display: none; }   /* « 🔗 Un Reel » : pas de nombre à choisir (2026-10-12) */
.tendance-erreur { color: var(--erreur); margin: 0; font-size: 13px; }
.tendance-erreur:empty { display: none; }
/* ce qui arrive à un Reel collé se dit juste sous le bouton, jamais dans une bulle (2026-10-12) */
.tendance-reussite { color: var(--ok); margin: 0; font-size: 13.5px; font-weight: 600; }
.tendance-reussite:empty { display: none; }
.tendances-form .aide { margin: 0; }
.tendances-historique { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tendances-historique:empty { display: none; }
.tendance-puce { border: 1px solid var(--bord); background: var(--surface); color: var(--texte); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.tendance-puce.actif { border-color: var(--accent); }
/* « ✕ » dans la puce d'une recherche (2026-10-11) : la puce garde sa forme, la croix se loge à droite, dedans */
.tendance-puce-bloc { position: relative; display: inline-flex; max-width: 100%; }
.tendance-puce-bloc .tendance-puce { padding-right: 30px; }
.tendance-puce-suppr { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: transparent; color: var(--tres-doux); font-size: 12px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0; }
.tendance-puce-suppr:hover, .tendance-puce-suppr:focus-visible { background: rgba(255, 93, 93, .15); color: var(--erreur); }
.tendance-quand { color: var(--tres-doux); font-size: 12px; }
.tendances-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tendances-tete #tendance-tri { width: auto; padding: 4px 8px; margin-left: 4px; }
.tendance-attente { padding: 14px; border: 1px dashed var(--bord); border-radius: 12px; color: var(--doux); max-width: 760px; }
/* 🔗 Mes Reels : vide, en route, pas récupéré, et le Reel qui arrive (il rebondit une fois) */
.tendance-vide { padding: 16px 18px; border: 1px dashed var(--bord); border-radius: 12px; max-width: 760px; }
.tendance-vide-titre { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.tendance-vide .aide { margin: 4px 0 0; }
.tendance-apercu.tendance-apercu-attente { display: grid; place-items: center; font-size: 30px; color: var(--doux); }
.tendance-rate { border-style: dashed; }
.tendance-rate .tendance-auteur { white-space: normal; }
.tendance-retirer { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .tendance-en-route .tendance-apercu-attente span { animation: tendance-sablier 1.6s ease-in-out infinite; }
  .tendance-arrivee { animation: tendance-arrive .8s ease-out; }
}
@keyframes tendance-sablier { 50% { transform: rotate(180deg); } }
@keyframes tendance-arrive { 0% { transform: scale(.88); box-shadow: 0 0 0 0 rgba(220,60,128,.7); }
  60% { transform: scale(1.04); } 100% { transform: none; box-shadow: 0 0 0 14px rgba(220,60,128,0); } }
.tendances-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding-bottom: 16px; }
.tendance-reel { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0; }
.tendance-apercu { position: relative; display: block; aspect-ratio: 9 / 16; background: var(--fond); overflow: hidden; }
.tendance-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tendance-duree { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 11.5px;
  padding: 1px 6px; border-radius: 6px; }
.tendance-infos { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tendance-auteur { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ✅ « C'est ma modèle » (2026-10-11) : sous le @compte ; la liste des comptes déclarés au-dessus des puces */
.tendance-modele { font-size: 12.5px; min-width: 0; }
.tendance-ma-modele { color: var(--ok); font-weight: 600; overflow-wrap: anywhere; }
.tendance-declarer { font-size: 12.5px; padding: 0; }
.tendances-mes-modeles-liste { margin: 0 0 10px; font-size: 13px; }
.tendances-mes-modeles-liste summary { cursor: pointer; font-weight: 600; }
.tendances-mes-modeles-liste ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.tendances-mes-modeles-liste li { overflow-wrap: anywhere; }
.ma-modele-contrat { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 6px; font-size: 14px; }
.ma-modele-contrat input { margin-top: 3px; flex: none; }
.tendance-chiffres { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.tendance-legende { margin: 0; font-size: 12px; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tendance-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
/* « 🤖 Utiliser en Vidéo IA » (2026-10-11) : sur deux lignes plutôt que de dépasser d'une carte étroite (téléphone) */
.tendance-ia { max-width: 100%; white-space: normal; text-align: left; }
/* « 📱 Ouvrir sur un téléphone » dans 🔥 Tendances, et la fenêtre qui demande lequel (2026-10-11) */
.tendance-tel { max-width: 100%; white-space: normal; text-align: left; }
.reel-dlg-tels { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: 4px 0 8px; }
.reel-dlg-tel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; width: 100%; }
.reel-dlg-tel .aide { margin: 0; font-weight: 400; }
.reel-dlg-reel { margin: -4px 0 10px; overflow-wrap: anywhere; }
.tendances-equipe { display: grid; gap: 22px; }
.tendance-regle-ia { margin: 0 0 10px; max-width: 760px; }
@media (max-width: 480px) { .tendances-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* 🔥 viraux, 🎵 musiques, ⭐ favoris, 👁 recherches suivies (2026-10-10 au soir) */
.tendance-reel.est-viral { border-color: var(--accent); }
.tendance-viral, .tendance-nouveau { position: absolute; top: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px;
  font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.tendance-viral { left: 6px; background: var(--accent); }
.tendance-nouveau { right: 6px; }
.tendance-etoile { min-width: 34px; }
.tendance-etoile.actif { color: #f5c542; border-color: #f5c542; }
.tendances-filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tendances-filtres .champ { width: auto; max-width: 100%; padding: 4px 8px; }
.tendance-viraux { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.tendance-viraux input, .tendance-matin input, .tendances-musiques-portee input { accent-color: var(--accent); margin: 0; }
.tendances-musiques { border: 1px solid var(--bord); border-radius: 12px; background: var(--surface); padding: 8px 12px;
  margin-bottom: 12px; max-width: 760px; }
.tendances-musiques summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.tendances-musiques-portee { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.tendances-musiques-portee label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tendances-musiques-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.tendance-musique { font-size: 13px; overflow-wrap: anywhere; }
.tendance-musique > * { margin-right: 8px; }
.tendances-veille { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin-bottom: 12px; }
.tendances-veille:empty { display: none; }
.tendances-veille-titre { font-weight: 600; font-size: 13.5px; }
.tendance-suivie { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 6px 10px; border: 1px solid var(--bord);
  border-radius: 10px; background: var(--surface); }
.tendance-suivie-nom { flex: 1 1 160px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.tendance-matin { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.tendance-suivie-message { flex-basis: 100%; font-size: 12px; color: var(--doux); }
.tendance-note { width: 100%; min-width: 0; resize: vertical; font-size: 12.5px; padding: 6px 8px; box-sizing: border-box; }
.tendance-puce-favoris { font-weight: 600; }
.tendances-tete b { min-width: 0; overflow-wrap: anywhere; }   /* un hashtag de 60 lettres ne déborde pas sur téléphone */
/* La barre d'onglets sur un téléphone (constat du 2026-10-11) : en 390 px elle mesurait 1 246 px, sans retour à la ligne
   ni défilement, et toute la page devenait plus large que l'écran. Sur petit écran ou écran tactile, elle prend sa
   propre ligne et défile du doigt dans sa largeur ; sur ordinateur (souris, grande fenêtre), rien ne change : le
   glisser-déposer des onglets reste tel quel. Ici et pas dans style.css : le CRM du PC de Yoann n'est pas concerné. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .barre { padding: 8px 12px; column-gap: 12px; }
  .barre > .onglets { order: 1; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: thin; }
  .barre > .onglets button { flex: none; }
}
/* ▶ Lire un Reel dans 🔥 Tendances (2026-10-11) : l'aperçu est un bouton ; le lecteur officiel d'Instagram dans une fenêtre */
button.tendance-apercu { width: 100%; padding: 0; margin: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.tendance-apercu:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tendance-lire { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 19px; display: grid; place-items: center;
  padding-left: 3px; box-sizing: border-box; pointer-events: none; }
button.tendance-apercu:hover .tendance-lire, button.tendance-apercu:focus-visible .tendance-lire { background: var(--accent); }
.dialogue-reel { width: min(420px, 96vw); padding: 12px; }
.reel-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.reel-tete b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-cadre { background: #fff; border-radius: 10px; overflow: hidden; }
.reel-cadre iframe { display: block; width: 100%; height: min(72vh, 700px); border: 0; }
.reel-note { margin: 8px 0 0; font-size: 12px; }
/* pendant un téléchargement, les boutons restent à leur place, en attente (relecture du 2026-10-11) */
.tendance-actions [aria-disabled="true"] { opacity: .55; cursor: progress; }
.tendance-telechargement { margin: 2px 0 0; }
/* « 🎬 Ouvrir dans Contenu » : le Reel est montré dans la liste de Contenu */
#liste-contenu .item.repere { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 🤖 Vidéos IA et ✨ Retouche pour un assistant (2026-10-12) : sur la fiche, le plafond juste sous la case ; chez
   l'assistant, les gestes du responsable restent cachés (le serveur les refuse aussi) et « ✨ Retoucher » apparaît dans
   🎬 Contenu */
.plafond-va { margin-left: 24px; }
.plafond-va input { width: 90px; padding: 4px 8px; display: inline-block; }
.dit-ia { margin: 2px 0 6px 24px; color: var(--ok); }
.dit-ia.erreur { color: var(--erreur); }
body.ia-assistant #ia-nouvelle-modele, body.ia-assistant #ia-photos-creer, body.ia-assistant #ia-accord-bloc,
body.ia-assistant [data-retirer-accord], body.ia-assistant #ia-droits-bloc, body.ia-assistant [data-retirer-droits],
body.ia-assistant [data-suppr-ref], body.ia-assistant [data-ia-drive], body.ia-assistant [data-oublier-decor],
body.ia-assistant #vue-retouche h3:has(+ .ligne-rt #rt-nombre-variants), body.ia-assistant #vue-retouche .ligne-rt:has(#rt-nombre-variants),
body.ia-assistant #vue-retouche .agence-variantes, body.ia-assistant #rt-resultats, body.ia-assistant #rt-historique { display: none !important; }
body.mode-va.ia-assistant [data-retoucher].admin-seulement { display: inline-block !important; }

/* « 📋 Confier à un assistant » depuis la météo d'un compte (2026-10-11) : deux clics, puis une petite fête */
.bouton-confier { border-color: rgba(220,60,128,.55); }
.bouton-confier:hover { border-color: var(--accent); background: rgba(220,60,128,.12); }
.dialogue-confier { width: min(520px, 94vw); max-height: 90vh; overflow-y: auto; }
.confier-entete { display: flex; align-items: flex-start; gap: 10px; }
.confier-entete h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.confier-apercu { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--bord); }
.confier-tache { margin: 0 0 8px; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.confier-apercu .puces { display: flex; flex-wrap: wrap; gap: 6px; }
.confier-apercu .puce.urgent { border-color: rgba(255,93,93,.6); color: var(--erreur); }
.confier-etapes { margin-top: 8px; font-size: 12.5px; color: var(--doux); }
.confier-etapes summary { cursor: pointer; }
.confier-etapes p { white-space: pre-line; margin: 6px 0 0; max-height: 30vh; overflow-y: auto; }
.confier-deja { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(111,179,255,.1); border: 1px solid rgba(111,179,255,.4); font-size: 13px; }
.confier-question { margin: 16px 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.confier-question .aide { margin: 0; font-weight: 400; }
.confier-choix { display: grid; gap: 8px; }
.confier-qui { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left;
  border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s; }
.confier-qui:hover, .confier-qui:focus-visible { border-color: var(--accent); background: rgba(220,60,128,.1); outline: none; }
.confier-qui:disabled { cursor: progress; opacity: .6; }
.confier-qui.en-cours { opacity: 1; border-color: var(--accent); }
.confier-qui.en-cours .confier-go::after { content: " ⏳"; }
.confier-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700;
  background: hsl(var(--teinte, 330) 62% 64%); color: #160a10; }
.confier-nom { flex: 1; min-width: 0; }
.confier-nom b { display: block; }
.confier-nom small { display: block; color: var(--doux); font-size: 12px; }
.confier-nom small.a-deja { color: var(--ok); }
.confier-go { color: var(--accent); font-weight: 700; }
.confier-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.confier-bravo { position: relative; text-align: center; padding: 8px 4px 0; }
.confier-bravo h2 { margin: 0 0 6px; }
.confier-bravo p { margin: 0 0 6px; }
.confier-bravo .ligne.fin { justify-content: center; }
.confier-coche { width: 64px; height: 64px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 34px; font-weight: 700; color: #04130c; background: var(--ok); box-shadow: 0 0 0 6px rgba(62,207,142,.18); }
@media (prefers-reduced-motion: no-preference) {
  .confier-coche { animation: confier-coche .55s cubic-bezier(.2, 1.5, .4, 1) both; }
}
@keyframes confier-coche { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 🚀 Ta mise en route (2026-10-11, n° 3) : la carte d'une nouvelle agence, en haut de 📱 Flotte ---------- */
.mise-en-route { position: relative; overflow: hidden; margin: 0 0 16px; padding: 14px 16px 12px; border-radius: 14px;
  border: 1px solid rgba(220,60,128,.45); background: linear-gradient(135deg, rgba(220,60,128,.12), rgba(62,207,142,.05) 70%), var(--surface); }
.mise-en-route > *:not(.mer-confettis) { position: relative; z-index: 1; }
.mer-tete { display: flex; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; }
.mer-titres { flex: 1; min-width: 0; }
.mer-titres h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mer-compte { font-size: 12.5px; font-weight: 700; color: var(--accent); padding: 2px 9px; border-radius: 999px; background: rgba(220,60,128,.14); }
.mer-message { margin: 3px 0 0; color: var(--doux); font-size: 13.5px; }
.mer-message.bravo { color: var(--ok); font-weight: 600; }
.mer-masquer { flex: none; }
.mer-plier { flex: none; align-self: center; white-space: nowrap; }
/* une agence qui a déjà ses iPhones : la carte se fait petite (l'étape à faire seulement) */
.mise-en-route.petite { padding: 10px 14px 10px; }
.mise-en-route.petite .mer-barre { margin: 8px 0; }
.mer-barre { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 10px 0; }
.mer-barre > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .5s ease; }
.mer-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mer-etape { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid transparent; }
.mer-etape.suivante { border-color: rgba(220,60,128,.6); background: rgba(220,60,128,.08); }
.mer-etape.fait { padding: 5px 10px; background: rgba(62,207,142,.07); }
.mer-pastille { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: 700; background: var(--surface-3); color: var(--doux); }
.mer-etape.suivante .mer-pastille { background: var(--accent); color: #1f0010; }
.mer-etape.fait .mer-pastille { background: var(--ok); color: #04210f; }
.mer-texte { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.mer-texte b { font-size: 14px; }
.mer-etape.fait .mer-texte b { font-weight: 600; color: var(--doux); }
.mer-detail { font-size: 12.5px; color: var(--doux); }
.mer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mer-tuto { white-space: nowrap; }
.mer-etape.vient-de-cocher .mer-pastille { animation: mer-coche .6s ease-out 1; }
@keyframes mer-coche { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.mise-en-route.bravo { border-color: rgba(62,207,142,.6);
  background: linear-gradient(135deg, rgba(62,207,142,.16), rgba(220,60,128,.08) 70%), var(--surface); }
.mise-en-route.bravo .mer-tete { align-items: center; }
.mise-en-route.part { animation: mer-part .45s ease-in forwards; }
@keyframes mer-part { to { opacity: 0; transform: translateY(-8px); } }
/* les confettis : derrière le texte et les boutons, jamais un clic, une seule pluie */
.mer-confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mer-confettis i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation: mer-tombe 1.6s ease-in forwards; }
@keyframes mer-tombe { 0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), 140px) rotate(var(--r)); } }
.mer-toast .bouton { margin-left: 6px; }
/* le bon endroit s'allume un instant : les recharges de 💳 Solde, « Connecter » de 📁 Mon Drive */
.mer-repere .carte-solde:has(.paquets), .mer-repere [data-drive-connecter] { animation: mer-repere 1.2s ease-out 2; }
@keyframes mer-repere { 0% { box-shadow: 0 0 0 0 rgba(220,60,128,.7); } 100% { box-shadow: 0 0 0 14px rgba(220,60,128,0); } }
/* la Flotte vide d'une agence : un texte simple et son bouton ; quand la carte est là, elle garde le seul bouton rose */
.vide-agence p { margin: 0 0 12px; }
.avec-mise-en-route .vide-agence .bouton.principal { background: var(--surface-2); border-color: var(--bord); color: var(--texte); }
@media (max-width: 560px) {
  .mise-en-route { padding: 12px; }
  .mer-actions { width: 100%; padding-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mer-barre > i { transition: none; }
  .mer-etape.vient-de-cocher .mer-pastille, .mise-en-route.part, .mer-repere .carte-solde:has(.paquets),
  .mer-repere [data-drive-connecter] { animation: none; }
  .mer-repere .carte-solde:has(.paquets), .mer-repere [data-drive-connecter] { outline: 2px solid var(--accent); outline-offset: 3px; }
}
/* 📌 Le logo de Yoann (V + chat, 2026-10-13) à la place du petit téléphone rose, dans la barre du haut et sur la carte de
   connexion ; et la fenêtre « Installe Vicious Studio sur ton bureau » (page/agence-raccourci.js) */
.logo { width: 31px; height: 26px; border-radius: 0; background: url("embleme.png") center / contain no-repeat; box-shadow: none; }
.carte-connexion .logo { width: 43px; height: 36px; }
.dialogue-raccourci { position: relative; overflow: hidden; width: min(440px, 92vw); text-align: center; padding: 26px 24px 18px; }
.dialogue-raccourci > *:not(.rac-confettis) { position: relative; z-index: 1; }
.dialogue-raccourci .rac-logo { display: block; margin: 0 auto 14px; border-radius: 20px; box-shadow: 0 8px 30px rgba(220,60,128,.35); }
.dialogue-raccourci h2 { font-size: 19px; margin: 0 0 8px; }
.dialogue-raccourci .rac-texte { margin: 0 0 14px; color: var(--doux); line-height: 1.5; }
.dialogue-raccourci .rac-etapes { text-align: left; margin: 0 auto 14px; padding: 12px 14px 12px 34px; max-width: 340px;
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: 10px; line-height: 1.55; }
.dialogue-raccourci .rac-message { min-height: 1em; margin: 0 0 10px; color: var(--ok); font-weight: 600; }
.dialogue-raccourci .rac-message:empty { display: none; }
.dialogue-raccourci .actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dialogue-raccourci .actions .bouton.principal { font-size: 15px; padding: 10px 20px; }
.dialogue-raccourci .rac-jamais { display: inline-block; margin-top: 12px; color: var(--tres-doux); font-weight: 500; }
.dialogue-raccourci.bravo { border-color: rgba(62,207,142,.6);
  background: linear-gradient(160deg, rgba(62,207,142,.14), rgba(220,60,128,.08) 70%), var(--surface); }
.rac-confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rac-confettis i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation: rac-tombe 1.6s ease-in forwards; }
@keyframes rac-tombe { 0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), 220px) rotate(var(--r)); } }