/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
:root {
  --fond: #0a0809;
  --surface: #141013;
  --surface-2: #1c171a;
  --surface-3: #261e23;
  --bord: #33282e;
  --texte: #f7eef2;
  --doux: #b39ca8;
  --tres-doux: #7f6b75;
  --accent: #dc3c80;
  --accent-fonce: #b02c66;
  --ok: #3ecf8e;
  --alerte: #f5b14c;
  --erreur: #ff5d5d;
  --rayon: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
kbd {
  font: 11px/1 ui-monospace, Consolas, monospace;
  padding: 2px 5px;
  border: 1px solid var(--bord);
  border-radius: 4px;
  color: var(--tres-doux);
  margin-left: 4px;
}
[hidden] { display: none !important; }
.mode-agence .pas-agence { display: none !important; }   /* plateforme en ligne : ce qui n'existe que sur le PC de Yoann */
.mode-agence-only { display: none; }
.mode-agence .mode-agence-only { display: block; }
.rt-edition { padding: 14px; border: 1px solid var(--bord); border-radius: 10px; margin: 10px 0; }
.rt-edition h4 { margin: 0 0 10px; }
.rt-edition-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.rt-edition-champs label { display: grid; gap: 4px; color: var(--doux); }
.rt-edition-champs textarea { min-height: 54px; resize: vertical; }
.rt-variantes-progression { margin: 12px 0; }
.rt-variantes-progression progress { width: 100%; accent-color: var(--accent); }
.rt-variantes-resultats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rt-variante-resultat { min-width: 0; padding: 12px; border: 1px solid var(--bord); border-radius: 10px; }
.rt-variante-resultat video { display: block; width: 100%; max-height: 420px; background: #000; border-radius: 8px; }

/* ---------- Barre du haut ---------- */
.barre {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bord);
  background: var(--surface);
  flex: none;
}
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.logo { width: 12px; height: 20px; border-radius: 3px; background: var(--accent); box-shadow: inset 0 -4px 0 rgba(255,255,255,.25); }
.onglets { display: flex; gap: 4px; }
.onglets button {
  background: none; border: 0; padding: 7px 12px; border-radius: 8px; color: var(--doux); font-weight: 600;
}
.onglets button:hover { background: var(--surface-2); color: var(--texte); }
.onglets button.actif { background: var(--surface-3); color: var(--texte); }
.quotas { margin-left: auto; display: flex; gap: 14px; }
.quota { display: flex; flex-direction: column; gap: 3px; min-width: 92px; font-size: 12px; color: var(--doux); }
.quota b { color: var(--texte); font-weight: 600; }
.jauge { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.jauge > i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.jauge.moyen > i { background: var(--alerte); }
.jauge.haut > i { background: var(--erreur); }


main { flex: 1; min-height: 0; display: flex; }
.vue { flex: 1; min-height: 0; overflow: auto; padding: 18px; }

/* ---------- Champs et boutons ---------- */
.champ {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  color: var(--texte);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220,60,128,.18); }
.champ.petit { font-size: 13px; padding: 6px 9px; margin-top: 8px; }
.recherche { max-width: 380px; }
.bouton {
  background: var(--surface-3); border: 1px solid var(--bord); border-radius: 8px; padding: 7px 12px; font-weight: 600;
  white-space: nowrap;
}
.bouton:hover { border-color: #4a3641; background: #2e2329; }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #1f0010; }
.bouton.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton.principal kbd { color: #6a1f40; border-color: rgba(0,0,0,.2); }
.bouton.discret { background: none; }
.bouton.petit { padding: 4px 9px; font-size: 12.5px; }
.lien { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.lien:hover { text-decoration: underline; }
.ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ligne.fin { justify-content: flex-end; margin-top: 18px; }
.aide { color: var(--tres-doux); font-size: 12px; margin: 8px 0 0; }
.espace { flex: 1; }

.puces { display: flex; gap: 6px; flex-wrap: wrap; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--bord); color: var(--doux); font-weight: 600;
}
button.puce:hover { color: var(--texte); }
button.puce.actif { color: var(--texte); border-color: var(--accent); background: rgba(220,60,128,.12); }
.puce i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------- Flotte ---------- */
.outils { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.resume { color: var(--doux); margin: 14px 2px 12px; font-size: 13px; }
.resume b { color: var(--texte); }
.resume .alerte { color: var(--alerte); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.carte {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 14px;
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
}
.carte:hover { border-color: #4a3641; }
.vignette {
  width: 92px; aspect-ratio: 406 / 720; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bord);
  overflow: hidden; position: relative; display: grid; place-items: center; color: var(--tres-doux); font-size: 11px;
  text-align: center; padding: 0; cursor: pointer;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .quand {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; background: rgba(0,0,0,.65); font-size: 10px; color: #ddd;
}
.vignette:hover::after {
  content: "Capturer"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-weight: 600;
}
.corps-carte { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nom-carte { display: flex; align-items: baseline; gap: 8px; }
.nom-carte strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-carte span { color: var(--tres-doux); font-size: 12px; }
.occupe { color: var(--alerte); font-size: 12px; }
/* « 📡 Signaler hors ligne » (2026-10-11) */
.hors-ligne { color: var(--erreur); background: rgba(255,93,93,.1); border: 1px solid rgba(255,93,93,.4); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.hors-ligne.signale { color: var(--ok); background: rgba(62,207,142,.08); border-color: rgba(62,207,142,.35); }
.resume .hors-ligne-resume { color: var(--erreur); font-weight: 600; }
.comptes { display: flex; flex-direction: column; gap: 4px; }
.compte { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.compte .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte .etat { color: var(--tres-doux); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.compte .etat.alerte { color: var(--alerte); }
.compte .etat.erreur { color: var(--erreur); }
.compte .retirer { visibility: hidden; background: none; border: 0; color: var(--tres-doux); padding: 0 2px; }
.compte:hover .retirer { visibility: visible; }
.point { width: 9px; height: 9px; border-radius: 50%; background: var(--tres-doux); flex: none; }
.point.ok { background: var(--ok); }
.point.alerte { background: var(--alerte); }
.point.erreur { background: var(--erreur); }
.point.attente { background: var(--doux); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.vide-comptes { color: var(--tres-doux); font-size: 12.5px; }
.ajout-compte { display: flex; gap: 6px; }
.ajout-compte input { padding: 4px 8px; font-size: 12.5px; }
.notes-carte { color: var(--doux); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions-carte { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.vide {
  border: 1px dashed var(--bord); border-radius: 14px; padding: 40px; text-align: center; color: var(--doux);
}

/* ---------- Pilotage ---------- */
.vue.pilotage { display: grid; grid-template-columns: 230px 1fr 360px; gap: 0; padding: 0; overflow: hidden; }
.colonne { overflow: auto; padding: 14px; }
.liste-tel { border-right: 1px solid var(--bord); display: flex; flex-direction: column; gap: 10px; }
.liste { display: flex; flex-direction: column; gap: 2px; }
.ligne-tel {
  text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 2px;
}
.ligne-tel:hover { background: var(--surface-2); }
.ligne-tel.actif { background: var(--surface-3); border-color: var(--bord); }
.ligne-tel .haut { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.ligne-tel .bas { color: var(--tres-doux); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.scene { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 18px; gap: 12px; }
/* la barre du téléphone passe à la ligne quand la place manque, jamais par-dessus la colonne de droite (2026-10-07) */
.entete-scene { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.titre-tel { font-size: 16px; font-weight: 700; }
.sous-titre { color: var(--doux); font-size: 12.5px; }
.entete-scene .droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.minuteur { font: 12.5px ui-monospace, Consolas, monospace; color: var(--doux); white-space: nowrap; }
.minuteur.vif::before { content: "● "; color: var(--erreur); }
.cadre-ecran { flex: 1; min-height: 0; display: grid; place-items: center; }
.cadre {
  position: relative; height: 100%; max-height: 100%; aspect-ratio: 406 / 720; border-radius: 22px; overflow: hidden;
  background: #000; border: 1px solid var(--bord); box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
#ecran { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: pointer; outline: none; object-fit: fill; }
#ecran:not([src]) { visibility: hidden; }
.voile {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: rgba(12,8,10,.82); color: var(--texte); font-weight: 500; cursor: pointer;
}
.voile.invisible { display: none; }
.voile .gros { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.voile .petit { color: var(--doux); font-size: 12.5px; }
.raccourcis { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.raccourcis button {
  background: var(--surface-2); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 11px; font-weight: 600; font-size: 13px;
}
.raccourcis button:hover { background: var(--surface-3); }
.raccourcis button.fort { border-color: var(--accent); color: var(--accent); }

.outils-droite { border-left: 1px solid var(--bord); display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; }
.outils-droite .bouton { white-space: normal; text-align: left; }
.bloc { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 12px; }
.bloc h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--doux); }
.titre-bloc { display: flex; justify-content: space-between; align-items: baseline; }
/* Les réponses proposées par l'IA : une phrase qui donne envie, un gros bouton (2026-10-07) */
.bloc-ia-reponses .accroche-ia { margin: 0 0 8px; }
.bloc-ia-reponses .bouton-ia { width: 100%; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; }
.suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.suggestions.compactes { margin-top: 0; }
.suggestion {
  display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--bord); border-radius: 8px; overflow: hidden;
}
.suggestion .taper { flex: 1; text-align: left; background: none; border: 0; padding: 7px 10px; font-size: 13px; }
.suggestion .taper:hover { background: var(--surface-3); }
.suggestion .editer { background: none; border: 0; border-left: 1px solid var(--bord); padding: 0 10px; color: var(--doux); }
.suggestion .editer:hover { color: var(--texte); background: var(--surface-3); }
.ecran-lu { color: var(--tres-doux); font-size: 12px; margin-top: 8px; }
/* toutes les vidéos, dans une liste qui défile (Yoann, 2026-10-10) : le bloc garde sa place dans la colonne, la page
   ne s'allonge pas à chaque nouvelle variante */
.contenu-mini { display: flex; flex-direction: column; gap: 8px; max-height: min(62vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.nombre-mini { font-weight: 600; color: var(--tres-doux); text-transform: none; letter-spacing: 0; }
.item-mini .boutons .bouton[disabled] { opacity: .45; cursor: not-allowed; }
/* minmax(0, 1fr) + min-width: 0 : un long nom se coupe en « … » au lieu d'élargir la carte, et les boutons passent à la
   ligne au lieu de sortir du cadre (Yoann, 2026-10-09 : « le petit bouton Légende sort du cadre ») */
.item-mini { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; align-items: center; }
.item-mini-texte { min-width: 0; }
.item-mini .apercu { width: 40px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.item-mini .nom { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « 📱 Envoyer vers… » et « 📋 Légende » côte à côte (Yoann, 2026-10-10), même dans la colonne étroite (< 1150 px) */
.item-mini .boutons { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.item-mini .boutons .bouton { max-width: 100%; white-space: nowrap; padding: 4px 7px; font-size: 12px; }
@media (max-width: 1150px) { .item-mini .mot-legende { display: none; } }   /* colonne étroite : l'icône 📋 seule */
.distribution-aide { margin: 5px 0; }
.distribution-choix { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); margin: 12px 0 0; }
.distribution-choix label { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.distribution-apercu { margin-top: 12px; min-width: 0; }
.distribution-apercu ul, .distribution-groupe ul { padding-left: 20px; margin: 5px 0; }
.distribution-job { margin: 8px 0; font-size: 12px; }
.distribution-job summary { cursor: pointer; }
.distribution-groupe { border-top: 1px solid var(--bord); padding: 7px 0; }
.distribution-groupe .bouton { margin: 3px 4px 3px 0; }
.distribution-historique { margin-top: 12px; }
.distribution-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.distribution-filtres label, #dlg-distribution [data-distribution-modele],
#dlg-distribution [data-distribution-recherche] { display: grid; gap: 4px; }
.distribution-table { border-collapse: collapse; font-size: 12px; min-width: 620px; width: 100%; }
.distribution-table th, .distribution-table td { border-bottom: 1px solid var(--bord); padding: 6px; text-align: left; }
dialog.dialogue.large.distribution-dialogue {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  max-height: min(92vh, 960px);
  padding: 0;
  overflow: hidden;
  border-color: #403039;
  box-shadow: 0 28px 90px rgba(0,0,0,.6), 0 0 45px rgba(220,60,128,.08);
}
.distribution-dialogue::backdrop { background: rgba(4,2,4,.82); backdrop-filter: blur(5px); }
.distribution-dialogue form { display: flex; flex-direction: column; max-height: min(92vh, 960px); }
.distribution-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 28px 14px; }
.distribution-entete h2 { margin: 3px 0 4px; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.45px; }
.distribution-entete p { margin: 0; }
.distribution-surtitre { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.distribution-fermer { flex: none; border: 1px solid var(--bord); border-radius: 9px; width: 36px; height: 36px; color: var(--doux); background: var(--surface-2); }
.distribution-fermer:hover { color: var(--texte); border-color: var(--accent); }
.distribution-etapes { display: flex; align-items: center; gap: 10px; padding: 0 28px 17px; color: var(--tres-doux); font-size: 12px; }
.distribution-etapes span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.distribution-etapes b, .distribution-etape-numero { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--surface-3); color: var(--doux); font-size: 11px; }
.distribution-etapes .actif { color: var(--texte); font-weight: 700; }
.distribution-etapes .actif b { color: white; background: var(--accent-fonce); box-shadow: 0 0 0 4px rgba(220,60,128,.12); }
.distribution-etapes i { height: 1px; flex: 1; background: var(--bord); }
.distribution-contenu { overflow: auto; overscroll-behavior: contain; padding: 0 28px 20px; }
.distribution-section { padding: 17px 0; border-top: 1px solid rgba(179,156,168,.13); }
.distribution-section-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.distribution-section-titre > div { display: flex; align-items: center; gap: 10px; }
.distribution-section-titre h3 { margin: 0; font-size: 15px; }
.distribution-section-titre .aide { margin: 0; text-align: right; font-size: 11.5px; }
.distribution-etape-numero { width: auto; height: auto; background: none; color: var(--accent); font-weight: 800; }
.distribution-combobox { position: relative; max-width: 520px; }
.distribution-combobox > label { display: block; margin-bottom: 5px; color: var(--doux); font-size: 12px; }
.distribution-combobox input { width: 100%; padding: 11px 14px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); color: var(--texte); font: inherit; }
.distribution-combobox input:focus { outline: 2px solid rgba(220,60,128,.35); border-color: var(--accent); }
.distribution-combobox [role=listbox] { position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 5px; border: 1px solid var(--bord); border-radius: 11px; background: #171216; box-shadow: 0 14px 36px rgba(0,0,0,.5); }
.distribution-combobox [role=option] { display: flex; align-items: center; width: 100%; gap: 10px; padding: 9px; text-align: left; border: 0; border-radius: 8px; color: var(--texte); background: transparent; }
.distribution-combobox [role=option]:hover, .distribution-combobox [role=option]:focus, .distribution-combobox [role=option][aria-selected=true] { background: var(--surface-3); outline: none; }
.distribution-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: white; background: linear-gradient(145deg, var(--accent-fonce), #562b43); font-weight: 800; object-fit: cover; }
.distribution-combobox [role=option] > span:nth-child(2) { display: grid; gap: 2px; }
.distribution-combobox small, .distribution-combobox [role=option] small { display: block; color: var(--doux); font-size: 11px; }
.distribution-coche { margin-left: auto; color: var(--ok); }
.distribution-selection-tout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.distribution-selection-tout > div { display: flex; gap: 6px; }
.distribution-telephone { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--bord); border-radius: 11px; background: linear-gradient(145deg, var(--surface-2), #151115); cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.distribution-telephone:hover { border-color: #74405c; transform: translateY(-1px); }
.distribution-telephone.selectionne { border-color: rgba(220,60,128,.72); background: linear-gradient(145deg, rgba(220,60,128,.12), var(--surface-2)); }
.distribution-telephone input { flex: none; margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
.distribution-telephone-icone { display: grid; place-items: center; flex: none; width: 34px; height: 38px; border: 1px solid #51404a; border-radius: 8px; color: var(--accent); background: #20171d; }
.distribution-telephone-corps { display: grid; gap: 3px; min-width: 0; }
.distribution-telephone-corps > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribution-telephone-corps small { color: var(--doux); font-size: 10.5px; }
.distribution-telephone-corps .distribution-telephone-a-faire { color: var(--texte); font-weight: 700; }
.distribution-etat { width: fit-content; padding: 1px 7px; border-radius: 999px; font-size: 10px; }
.distribution-etat.inconnu { color: var(--doux); background: #342d32; }
.distribution-etat.hors-ligne { color: var(--erreur); background: rgba(255,93,93,.12); }
.distribution-etat.occupe { color: var(--alerte); background: rgba(245,177,76,.12); }
.distribution-statistiques { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.distribution-statistiques article { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; padding: 14px; border: 1px solid var(--bord); border-radius: 11px; background: var(--surface-2); }
.distribution-statistiques article > span { grid-row: span 2; font-size: 18px; }
.distribution-statistiques strong { font-size: 22px; line-height: 1.1; }
.distribution-statistiques small { color: var(--doux); font-size: 10.5px; }
.distribution-statistiques .accent { border-color: rgba(220,60,128,.58); background: linear-gradient(145deg, rgba(220,60,128,.16), var(--surface-2)); }
.distribution-note { margin: 9px 0 12px; color: var(--doux); font-size: 11px; }
.distribution-filtres-contenu { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.distribution-filtres-contenu button { padding: 6px 9px; border: 1px solid var(--bord); border-radius: 999px; color: var(--doux); background: var(--surface); font-size: 11px; }
.distribution-filtres-contenu button:hover, .distribution-filtres-contenu button.actif { color: var(--texte); border-color: var(--accent); background: rgba(220,60,128,.12); }
.distribution-filtres-contenu b { color: var(--texte); margin-left: 3px; }
.distribution-repartition { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 8px; }
.distribution-carte-tel { min-width: 0; padding: 0 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface-2); }
.distribution-carte-tel > summary { display: flex; align-items: center; gap: 9px; padding: 11px 0; cursor: pointer; list-style: none; }
.distribution-carte-tel > summary::-webkit-details-marker { display: none; }
.distribution-carte-tel > summary > span:nth-child(2) { display: grid; flex: 1; gap: 2px; min-width: 0; }
.distribution-carte-tel > summary small { color: var(--doux); font-size: 10.5px; }
.distribution-carte-tel > summary > b { color: var(--accent); font-size: 11px; }
.distribution-carte-tel ul { display: grid; gap: 5px; margin: 0; padding: 0 0 10px; list-style: none; }
.distribution-carte-tel li { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 7px 0; border-top: 1px solid rgba(179,156,168,.12); }
.distribution-fichier-icone { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: var(--accent); background: var(--surface-3); font-size: 10px; }
.distribution-carte-tel li > span:nth-child(2) { display: grid; min-width: 0; }
.distribution-carte-tel li strong, .distribution-carte-tel li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.distribution-carte-tel li small { color: var(--doux); font-size: 10.5px; }
.distribution-statut { font-size: 10px; font-style: normal; white-space: nowrap; color: var(--doux); }
.distribution-statut.a_transferer { color: var(--accent); }
.distribution-statut.transfere { color: var(--ok); }
.distribution-statut.en_cours { color: var(--alerte); }
.distribution-statut.incertain, .distribution-statut.echec { color: var(--erreur); }
.distribution-alertes { margin-top: 12px; padding: 12px; border: 1px solid rgba(245,177,76,.36); border-radius: 10px; background: rgba(245,177,76,.055); }
.distribution-alertes > summary, .distribution-alertes details > summary { cursor: pointer; font-weight: 700; }
.distribution-alertes summary b { float: right; color: var(--alerte); }
.distribution-alertes details { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(245,177,76,.2); }
.distribution-alertes ul { max-height: 180px; overflow: auto; }
.distribution-vide { margin: 8px 0; color: var(--doux); font-size: 12px; }
.distribution-chargement { display: flex; align-items: center; gap: 9px; color: var(--doux); }
.distribution-spinner { width: 16px; height: 16px; border: 2px solid var(--bord); border-top-color: var(--accent); border-radius: 50%; animation: distribution-spin .8s linear infinite; }
@keyframes distribution-spin { to { transform: rotate(360deg); } }
.distribution-erreur { padding: 10px; border: 1px solid rgba(255,93,93,.35); border-radius: 8px; color: #ff9c9c; background: rgba(255,93,93,.08); }
.distribution-actions { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-top: 1px solid var(--bord); background: rgba(20,16,19,.97); backdrop-filter: blur(12px); }
.distribution-actions [data-distribution-raison] { color: var(--doux); font-size: 11px; }
.distribution-actions .bouton:disabled { cursor: not-allowed; opacity: .45; }
.distribution-actions > [data-distribution-apercu] { margin-right: auto; }
.distribution-actions .espace { flex: 1; }
.distribution-progression { overflow: auto; min-height: 0; padding: 20px 28px 28px; }
.distribution-progression[hidden], .distribution-actions[hidden] { display: none; }
.distribution-progression-entete h3 { margin: 4px 0; font-size: 21px; }
.distribution-progression-entete p { margin: 0 0 13px; color: var(--doux); }
.distribution-progression progress { display: block; width: 100%; height: 10px; accent-color: var(--accent); }
.distribution-progression-compteurs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 11px 0 16px; color: var(--doux); font-size: 12px; }
.distribution-progression-tels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.distribution-progression-tels article { display: flex; flex-direction: column; gap: 3px; padding: 11px; border: 1px solid var(--bord); border-radius: 9px; background: var(--surface-2); }
.distribution-progression-tels article span { color: var(--doux); font-size: 11px; }
.distribution-erreurs-lancement { color: #ff9c9c; }
.distribution-progression .distribution-actions { margin: 18px -28px -28px; }
@media (max-width: 760px) {
  dialog.dialogue.large.distribution-dialogue { width: calc(100vw - 16px); max-height: 96vh; }
  .distribution-dialogue form { max-height: 96vh; }
  .distribution-entete { padding: 17px 16px 12px; }
  .distribution-etapes { gap: 5px; padding: 0 16px 12px; font-size: 10px; }
  .distribution-etapes span { gap: 4px; }
  .distribution-etapes b { width: 21px; height: 21px; }
  .distribution-contenu { padding: 0 16px 15px; }
  .distribution-section { padding: 13px 0; }
  .distribution-section-titre { align-items: flex-start; }
  .distribution-section-titre > .aide { max-width: 45%; }
  .distribution-statistiques { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .distribution-selection-tout { align-items: flex-start; flex-direction: column; }
  .distribution-actions { flex-wrap: wrap; padding: 10px 16px; }
  .distribution-actions > [data-distribution-apercu] { margin-right: 0; }
  .distribution-actions [data-distribution-raison] { flex: 1 1 100%; order: 1; }
  .distribution-actions .espace { display: none; }
  .distribution-progression { padding: 17px 16px 22px; }
  .distribution-progression .distribution-actions { margin: 16px -16px -22px; }
}
/* Le son des vidéos (2026-10-09) : 🔊 / 🔇 et le volume, sous chaque lecteur */
.lecteur { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.barre-son { display: flex; align-items: center; gap: 4px; min-width: 0; }
.son-bouton { background: none; border: 0; padding: 2px; font-size: 14px; line-height: 1; cursor: pointer; flex: none; }
.son-volume { flex: 1; min-width: 0; width: 100%; accent-color: var(--accent); cursor: pointer; }

/* ---------- Contenu ---------- */
.depot {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; border: 2px dashed var(--bord);
  border-radius: 14px; cursor: pointer; color: var(--doux); text-align: center; background: var(--surface);
}
.depot strong { color: var(--texte); font-size: 15px; }
.depot.survol { border-color: var(--accent); background: rgba(220,60,128,.07); }
.liste-contenu { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.item {
  display: grid; grid-template-columns: 90px 1fr 260px; gap: 16px; background: var(--surface); border: 1px solid var(--bord);
  border-radius: 12px; padding: 12px;
}
.item .apercu { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; object-fit: cover; background: #000; }
.item .milieu { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item .titre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { color: var(--tres-doux); font-size: 12px; }
.item textarea { flex: 1; min-height: 70px; }
.item .cote { display: flex; flex-direction: column; gap: 8px; }
.envois { display: flex; flex-wrap: wrap; gap: 5px; }
.envoi { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--bord); }
.envoi.ok { color: var(--ok); border-color: rgba(62,207,142,.35); }
.envoi.erreur { color: var(--erreur); border-color: rgba(255,93,93,.35); }
.envoi.en_cours { color: var(--alerte); }

/* ---------- Dialogues ---------- */
.dialogue {
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord); border-radius: 14px; padding: 20px; width: min(520px, 92vw);
}
.dialogue::backdrop { background: rgba(0,0,0,.6); }
.dialogue h2 { margin: 0 0 12px; font-size: 17px; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; max-height: 50vh; overflow: auto; }
.cases label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.cases input { accent-color: var(--accent); }

/* ---------- Messages ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: 420px; }
.toast {
  background: var(--surface-3); border: 1px solid var(--bord); border-left: 4px solid var(--ok); border-radius: 10px;
  padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: entre .18s ease-out;
}
.toast.erreur { border-left-color: var(--erreur); }
.toast.info { border-left-color: var(--doux); }
@keyframes entre { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1150px) {
  .vue.pilotage { grid-template-columns: 200px 1fr 300px; }
  .quotas { display: none; }
  .item { grid-template-columns: 70px 1fr; }
  .item .cote { grid-column: 1 / -1; }
}

/* ---------- Automatismes et tournées ---------- */
.alertes {
  background: rgba(245,177,76,.12); border: 1px solid rgba(245,177,76,.45); color: var(--alerte);
  border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12.5px;
}
.alertes:hover { background: rgba(245,177,76,.2); }
.interrupteur { display: inline-flex; align-items: center; gap: 7px; color: var(--doux); font-size: 13px; cursor: pointer; }
.interrupteur input { accent-color: var(--accent); width: 15px; height: 15px; }
.bloc-option { margin-top: 14px; align-items: flex-start; line-height: 1.35; }
.bloc-option input { margin-top: 2px; flex: none; }
.barre-tournee {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px;
  background: rgba(220,60,128,.1); border: 1px solid rgba(220,60,128,.4);
}
.barre-tournee .titre { font-weight: 700; color: var(--accent); }
.barre-tournee .progression { font: 600 13px ui-monospace, Consolas, monospace; }
.barre-tournee .touches { color: var(--doux); font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; }
.barre-tournee .touches kbd { margin: 0 3px 0 0; color: var(--texte); }
.barre-tournee .bouton { margin-left: auto; }
.suggestion .numero {
  display: grid; place-items: center; width: 26px; flex: none; font: 700 12px ui-monospace, Consolas, monospace;
  color: var(--accent); border-right: 1px solid var(--bord);
}
.envoi.publie { color: var(--doux); text-decoration: line-through; }

/* ---------- Sélection multiple, liste compacte, actions groupées ---------- */
.bascule { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
.bascule button { background: none; border: 0; padding: 6px 10px; color: var(--doux); font-size: 14px; }
.bascule button + button { border-left: 1px solid var(--bord); }
.bascule button.actif { background: var(--surface-3); color: var(--texte); }
.bascule.large { display: flex; margin-bottom: 12px; }
.bascule.large label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; cursor: pointer; color: var(--doux); }
.bascule.large label:has(input:checked) { background: var(--surface-3); color: var(--texte); }
.bascule.large label + label { border-left: 1px solid var(--bord); }
.bascule.large input { accent-color: var(--accent); }
.aide-bouton { width: 30px; height: 30px; padding: 0; border-radius: 50%; }

.carte { position: relative; }
.carte .choix { position: absolute; top: 8px; left: 8px; z-index: 2; opacity: 0; transition: opacity .12s; }
.carte:hover .choix, .grille.en-selection .choix, .carte.choisie .choix { opacity: 1; }
.choix input, .tableau input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.carte.choisie { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
[data-renommer] { cursor: text; border-radius: 4px; }
[data-renommer]:hover { background: var(--surface-2); }
.renommage { font: inherit; font-weight: 700; font-size: 15px; padding: 2px 6px; width: 100%; }

.tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.tableau th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tres-doux); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--bord); background: var(--surface-2); }
.tableau td { padding: 9px 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; font-size: 13px; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau tr.choisie { background: rgba(220,60,128,.08); }
.tableau .col-choix { width: 36px; }
.tableau .doux { color: var(--tres-doux); font-size: 11.5px; }
.tableau .comptes-ligne { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tableau .comptes-ligne span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tableau .notes { color: var(--doux); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barre-selection {
  position: sticky; bottom: 0; margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface-3); border: 1px solid #4a3641; border-radius: 12px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.45); z-index: 5;
}
.compte-selection { font-weight: 700; margin-right: 8px; }
.couleurs { display: flex; gap: 8px; margin-top: 12px; }
.couleurs button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.couleurs button.actif { border-color: var(--texte); box-shadow: 0 0 0 2px var(--fond) inset; }
.choix-contenu { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.choix-contenu label { display: grid; grid-template-columns: 20px 44px 1fr; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.choix-contenu label:has(input:checked) { outline: 1px solid var(--accent); }
.choix-contenu .apercu { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; background: #000; }
.choix-contenu input { accent-color: var(--accent); }
.raccourcis-aide { width: 100%; border-collapse: collapse; font-size: 13px; }
.raccourcis-aide th { text-align: left; color: var(--doux); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 0 4px; }
.raccourcis-aide td { padding: 4px 0; }
.raccourcis-aide td:first-child { width: 42%; white-space: nowrap; }
.raccourcis-aide kbd { margin: 0 2px 0 0; color: var(--texte); }

.barre-selection .bouton:not(.principal) { background: var(--surface-2); }
.barre-selection .bouton:not(.principal):hover { background: var(--fond); }

/* ---------- Modèles ---------- */
.titre-vue { margin: 0; font-size: 20px; }
.grille-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.carte-modele {
  background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--couleur, var(--accent));
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.carte-modele h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.carte-modele .chiffres { display: flex; gap: 16px; color: var(--doux); font-size: 12.5px; }
.carte-modele .chiffres b { color: var(--texte); font-size: 18px; display: block; line-height: 1.1; }
.carte-modele .chiffres .alerte b { color: var(--alerte); }
.carte-modele .motifs { color: var(--tres-doux); font-size: 12px; }
.carte-modele .motifs code { background: var(--surface-2); border: 1px solid var(--bord); border-radius: 4px; padding: 0 5px; color: var(--doux); }
.carte-modele .liste-comptes { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.carte-modele .liste-comptes span { display: inline-flex; align-items: center; gap: 5px; }
.carte-modele .actions-carte { margin-top: 2px; }
.badge-modele {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--couleur) 55%, transparent);
  color: var(--couleur); background: color-mix(in srgb, var(--couleur) 12%, transparent);
}
button.badge-modele { font-family: inherit; cursor: pointer; }   /* la pastille qui change la modèle (2026-10-12) */
button.badge-modele:hover { background: color-mix(in srgb, var(--couleur) 22%, transparent); }
.choisir-modele { font: inherit; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--bord); background: transparent; color: var(--doux); }
.choisir-modele:hover { color: var(--texte); border-color: var(--accent); }
.liste-dedier { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.liste-dedier .badge-modele { font-size: 14px; padding: 6px 14px; }
.message-dedier { margin: 6px 0 0; color: var(--ok); min-height: 1em; }
.message-dedier.erreur { color: var(--erreur); }
.a-classer-tag { font-size: 11px; color: var(--tres-doux); border: 1px dashed var(--bord); border-radius: 999px; padding: 0 6px; }
.bloc-a-classer { margin-top: 24px; background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px; }
.bloc-a-classer h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.pastille { background: var(--alerte); color: #1a1206; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.a-classer { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ligne-a-classer { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.ligne-a-classer .tel { color: var(--tres-doux); font-size: 12px; }
.ligne-a-classer select, .item select { background: var(--surface-3); color: var(--texte); border: 1px solid var(--bord); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.etiquette-champ { display: block; margin: 12px 0 5px; font-size: 12px; font-weight: 600; color: var(--doux); }
.apercu-classement { margin-top: 8px; font-size: 12.5px; color: var(--doux); min-height: 18px; }
.apercu-classement b { color: var(--texte); }
.bouton.danger { color: var(--erreur); }
.vide-modeles { grid-column: 1 / -1; }

/* ---------- Mur multi-écrans ---------- */
.mur { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--lignes, 1), minmax(0, 1fr)); gap: 12px; align-items: stretch; justify-items: stretch; }
/* Pilotage rangé par modèle : un clic sur la catégorie met tous ses téléphones dans le mur */
.tete-groupe { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 8px; padding: 5px 8px; background: none; border: 0; border-radius: 6px; color: var(--doux); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: left; cursor: pointer; }
.tete-groupe:first-child { margin-top: 0; }
.tete-groupe:hover { background: var(--surface-2); color: var(--texte); }
.tete-groupe i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tete-groupe .vers-mur { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tres-doux); }
.case-mur { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: 100%; }
.case-mur .entete-case { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--doux); }
/* taille calculée en JS (dimensionnerMur) : le rapport CSS ne tient pas dans cette disposition */
.case-mur .cadre { flex: none; aspect-ratio: auto; border-radius: 16px; }
.case-mur img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: pointer; object-fit: fill; }
.case-mur img:not([src]) { visibility: hidden; }
.case-mur.focus .cadre { outline: 3px solid var(--accent); outline-offset: 2px; }
.case-mur.focus .nom-case { color: var(--accent); }

/* ---------- Types de tournée, suivi du jour ---------- */
.groupe-tournee { display: inline-flex; }
.groupe-tournee select {
  background: var(--surface-3); color: var(--texte); border: 1px solid var(--accent); border-right: 0;
  border-radius: 8px 0 0 8px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 600;
}
.groupe-tournee .bouton { border-radius: 0 8px 8px 0; }
.groupe-tournee.petit select { font-size: 12px; border-color: var(--bord); }
.travail { font-size: 11.5px; color: var(--ok); white-space: nowrap; }
.travail.zero { color: var(--tres-doux); }
.ligne-tel .haut .travail { margin-left: auto; font-weight: 600; }
/* quelqu'un d'autre a le direct de ce téléphone (2026-10-09) : un assistant attend qu'il soit libre */
.ligne-tel .haut .sur-tel { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--alerte); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ligne-tel .haut .sur-tel + .travail { margin-left: 6px; }
.barre-tournee .chrono { font: 600 13px ui-monospace, Consolas, monospace; color: var(--doux); }

/* ---------- Équipe et mode assistant ---------- */
body.mode-va .admin-seulement { display: none !important; }
.qui { display: inline-flex; align-items: center; gap: 10px; color: var(--doux); font-size: 13px; margin-left: auto; }
.qui b { color: var(--texte); }
.etat-acces { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); font-size: 13.5px; }
.etat-acces.ferme { border-color: rgba(245,177,76,.4); background: rgba(245,177,76,.07); }
.etat-acces code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.liste-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 16px; }
.carte-va { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.carte-va.coupe { opacity: .6; }
.carte-va h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.carte-va .statut-va { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.carte-va .statut-va.actif { color: var(--ok); background: rgba(62,207,142,.12); }
.carte-va .statut-va.coupe { color: var(--erreur); background: rgba(255,93,93,.12); }
.carte-va .travail-va { font-size: 12.5px; color: var(--doux); }
.carte-va .travail-va b { color: var(--texte); }
.dialogue.large { width: min(820px, 94vw); }
.texte-cgu { white-space: pre-wrap; max-height: 46vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--bord);
  border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
#dlg-mdp .champ { margin-top: 8px; }
.perimetre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.perimetre h4 { margin: 0 0 6px; font-size: 12px; color: var(--doux); text-transform: uppercase; letter-spacing: .5px; }
.cases-perim { display: flex; flex-direction: column; gap: 4px; max-height: 36vh; overflow: auto; }
.cases-perim label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); cursor: pointer; font-size: 13px; }
.cases-perim input { accent-color: var(--accent); }
.connexion { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--fond); }
.carte-connexion { width: min(360px, 90vw); display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--surface); border: 1px solid var(--bord); border-radius: 16px; }
.carte-connexion .marque { font-size: 20px; }
.erreur-connexion { color: var(--erreur); font-size: 13px; min-height: 18px; margin: 0; }

/* ---------- Préparer tous les écrans, numéros d'écran ---------- */
.tous-ecrans { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.tous-ecrans button {
  background: rgba(220,60,128,.1); border: 1px solid rgba(220,60,128,.4); color: var(--texte);
  border-radius: 8px; padding: 5px 10px; font-weight: 600; font-size: 12.5px;
}
.tous-ecrans button:hover { background: rgba(220,60,128,.2); }
.tous-ecrans button:disabled { opacity: .5; cursor: default; }
.num-case {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: var(--surface-3); color: var(--doux); font: 700 11px ui-monospace, Consolas, monospace;
}
.case-mur.focus .num-case { background: var(--accent); color: #1f0010; }

/* ---------- Vidéos IA ---------- */
.ia-connecte { color: var(--ok); font-weight: 600; font-size: 13px; display: inline-flex; gap: 10px; align-items: center; }
.ia-bloc-cle { margin-top: 16px; }
.ia-grille { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 18px; margin-top: 16px; align-items: start; }
.ia-nouvelle .champ + .champ { margin-top: 8px; }
.ia-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-photo { position: relative; width: 64px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bord); background: var(--surface-2); }
.ia-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-photo button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 0; }
.ia-photo.ajout { display: grid; place-items: center; cursor: pointer; color: var(--doux); font-size: 22px; border-style: dashed; }
.ia-photo.ajout:hover { border-color: var(--accent); color: var(--accent); }
.petit-depot { padding: 14px; }
.ia-apercu { width: 100%; max-height: 260px; margin-top: 8px; border-radius: 10px; background: #000; }
.ia-manque { margin-top: 14px; color: var(--alerte); font-size: 12.5px; min-height: 18px; }
.ia-generer { width: 100%; margin-top: 8px; padding: 10px; font-size: 14px; }
.titre-section { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--doux); }
.ia-liste { display: flex; flex-direction: column; gap: 10px; }
.ia-gen { display: grid; grid-template-columns: 96px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 12px; }
.ia-gen video, .ia-gen .attente { width: 96px; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: cover; }
.ia-gen .attente { display: grid; place-items: center; color: var(--doux); font-size: 22px; background: var(--surface-2); }
.ia-gen .attente.tourne { animation: pulse 1.4s ease-in-out infinite; }
.ia-gen .infos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia-gen .ligne-haut { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.statut-ia { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--doux); }
.statut-ia.termine { color: var(--ok); background: rgba(62,207,142,.12); }
.statut-ia.erreur { color: var(--erreur); background: rgba(255,93,93,.12); }
.statut-ia.en_cours, .statut-ia.a_envoyer { color: var(--alerte); background: rgba(245,177,76,.12); }
.badge-ia { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 5px; background: #7c5cff; color: #fff; margin-left: 6px; }
@media (max-width: 1150px) { .ia-grille { grid-template-columns: 1fr; } }

/* ---------- Clés API ---------- */
.grille-cles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 16px; }
.carte-cle { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.carte-cle .tete-cle { display: flex; justify-content: space-between; align-items: center; }
.carte-cle h3 { margin: 0; font-size: 16px; }
.carte-cle .aide { margin: 0; }
.carte-cle code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.carte-cle .bouton { align-self: flex-start; }
.etat-cle { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--doux); }
.etat-cle.ok { color: var(--ok); background: rgba(62,207,142,.12); }
.etat-cle.demo, .etat-cle.jarvis { color: var(--alerte); background: rgba(245,177,76,.12); }
.etat-cle.absente { color: var(--erreur); background: rgba(255,93,93,.12); }

/* ---------- Identité visuelle : rose doux sur noir (logo Vicious Studio, adouci à la demande de Yoann) ---------- */
.barre { background: linear-gradient(180deg, #1d1519 0%, var(--surface) 100%); }
.logo { background: linear-gradient(160deg, #e56ca0 0%, #dc3c80 55%, #ad2a63 100%); box-shadow: 0 0 14px rgba(220,60,128,.55), inset 0 -4px 0 rgba(255,255,255,.25); }
.marque { letter-spacing: .4px; white-space: nowrap; flex-shrink: 0; }
.bouton.principal { box-shadow: 0 4px 16px rgba(220,60,128,.25); }
.onglets button.actif { background: rgba(220,60,128,.14); color: #f4c6da; }
.carte:hover, .carte-modele:hover, .carte-cle:hover { border-color: #6e3552; }

/* ---------- En-tête allégé (7 onglets) : raccourcis dans l'aide (?), rien ne se coupe ---------- */
.barre { gap: 16px; }
.onglets button { white-space: nowrap; padding: 7px 11px; }
.onglets kbd { display: none; }
.alertes { white-space: nowrap; }
.quotas { gap: 12px; }
.quota { min-width: 78px; white-space: nowrap; }
@media (max-width: 1450px) { .quotas { display: none; } }

/* ---------- Vidéos IA : étapes, dépôts, qualité, Drive ---------- */
.etape-ia { border: 1px solid var(--bord); border-radius: 12px; padding: 12px; margin-top: 12px; background: rgba(255,255,255,.015); }
.etape-ia.faite { border-color: rgba(62,207,142,.45); }
.tete-etape { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.num-etape { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--doux); font: 700 12px ui-monospace, Consolas, monospace; }
.etape-ia.faite .num-etape { background: var(--ok); color: #04130c; }
.coche-etape { margin-left: auto; color: var(--ok); font-weight: 800; visibility: hidden; }
.etape-ia.faite .coche-etape { visibility: visible; }
.compteur-etape { color: var(--doux); font-size: 12.5px; font-weight: 600; }
.ligne-modele { display: flex; gap: 8px; }
.ligne-modele select { flex: 1; }
.zone-ia { padding: 16px; gap: 4px; }
.zone-ia span { font-size: 12px; }
.zone-ia.en-cours { border-color: var(--accent); background: rgba(220,60,128,.06); }
.barre-progres { width: 100%; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.barre-progres i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.ia-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ia-photos:empty { display: none; }
.photos-sans-modele { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ia-photo { width: auto; height: auto; aspect-ratio: 3 / 4; }
.video-choisie { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.video-choisie video { width: 110px; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: cover; }
.infos-video { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.infos-video b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pret-video { color: var(--ok); font-weight: 700; font-size: 12.5px; }
.choix-qualite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qualite { background: var(--surface-2); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qualite:hover { border-color: #6e3552; }
.qualite.actif { border-color: var(--accent); background: rgba(220,60,128,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.qualite b { font-size: 15px; }
.qualite span { font-size: 11.5px; color: var(--doux); }
.qualite em { font-style: normal; font-weight: 700; color: var(--accent); font-size: 13px; }
.ia-drive { margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ia-drive.ok { border-color: rgba(220,60,128,.35); }
.ia-drive .erreurs-drive { width: 100%; color: var(--alerte); font-size: 12px; }
.drive-gen { font-size: 12px; }
.drive-gen.ok { color: var(--ok); }
.drive-gen.erreur { color: var(--alerte); }

/* ---------- Déclarations faites une fois pour toutes ---------- */
.note-declaree { margin-top: 10px; font-size: 12.5px; color: var(--ok); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.note-declaree .lien { color: var(--tres-doux); font-weight: 500; }

/* Moteur IA + passage à garder */
.choix-moteur { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.moteur { background: var(--surface-2); border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.moteur:hover { border-color: #6e3552; }
.moteur.actif { border-color: var(--accent); background: rgba(220,60,128,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.moteur b { font-size: 14px; }
.moteur span { font-size: 11.5px; color: var(--doux); }
.moteur .sans-cle { color: #e0a030; }
.ia-extrait { background: var(--surface-2); border: 1px solid var(--bord); border-radius: 10px; padding: 9px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.ia-extrait[hidden] { display: none; }
/* Le moteur conseillé (2026-10-09) : au-dessus des moteurs, préremplit sans rien lancer */
.ia-conseil { background: rgba(220,60,128,.07); border: 1px solid #6e3552; border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 13px; }
.ia-conseil[hidden] { display: none; }
.conseil-tete { font-size: 14px; }
.conseil-raison { color: var(--doux); font-size: 12.5px; }
.conseil-afaire { color: var(--alerte); font-size: 12.5px; }
.conseil-refus { margin: 0; padding-left: 4px; list-style: none; font-size: 12.5px; color: var(--doux); }
.conseil-ok { color: var(--ok); font-size: 12.5px; font-weight: 600; }
.tete-extrait { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ligne-extrait { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ligne-extrait label { display: inline-flex; gap: 6px; align-items: center; }
.petit-champ { width: 72px; padding: 5px 7px; }
.badge-moteur { font-size: 11px; border: 1px solid var(--bord); border-radius: 999px; padding: 1px 7px; color: var(--doux); }

/* Sa voix (synchro des lèvres) */
.voix-choisie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.voix-choisie[hidden] { display: none; }
.voix-choisie audio { height: 36px; max-width: 100%; }
.infos-voix { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

/* Trier la bibliothèque */
.barre-tri { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.select-tri { width: auto; padding: 5px 8px; font-size: 13px; }
.barre-lot { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.barre-lot[hidden] { display: none; }
.choix-item { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.choix-item input { width: 18px; height: 18px; cursor: pointer; }
.item.choisi { outline: 2px solid var(--accent); }
.bouton.danger { color: var(--erreur); border-color: rgba(255,93,93,.45); }
.actions-item { display: flex; gap: 6px; flex-wrap: wrap; }

/* Onglets déplaçables */
.onglets button[data-vue] { cursor: grab; }
.onglets button.glisse { opacity: .45; }
.onglets button.avant { box-shadow: inset 3px 0 0 var(--accent); }
.onglets button.apres { box-shadow: inset -3px 0 0 var(--accent); }
.remettre-onglets { font-size: 15px; color: var(--tres-doux); }
.remettre-onglets[hidden] { display: none; }

/* Retouche */
.retouche-grille { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 18px; margin-top: 14px; align-items: start; }
.cadre-apercu { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--bord); }
.cadre-apercu video { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.cadre-apercu img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cadre-apercu img[hidden] { display: none; }
.retouche-reglages { display: flex; flex-direction: column; gap: 8px; }
.retouche-reglages h3 { margin: 10px 0 0; }
.ligne-rt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ligne-rt > span { color: var(--doux); min-width: 52px; }
.curseurs-rt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.curseurs-rt label { display: grid; grid-template-columns: 82px 1fr 42px; gap: 8px; align-items: center; font-size: 13px; color: var(--doux); }
.curseurs-rt b { color: var(--texte); font-weight: 600; text-align: right; }
@media (max-width: 760px) { .retouche-grille, .curseurs-rt { grid-template-columns: 1fr; } }
/* La place exacte du texte et les sous-titres (2026-10-10) */
.cadre-apercu #rt-accroche, .cadre-apercu #rt-sous-titre { will-change: transform; }
.poignee-texte { position: absolute; z-index: 2; cursor: move; touch-action: none; border: 1.5px dashed transparent; border-radius: 8px; }
.poignee-texte:hover, .poignee-texte:focus-visible, .poignee-texte.glisse { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); outline: none; }
.poignee-texte[hidden], .zones-instagram[hidden], .rt-st-bloc[hidden] { display: none; }
.zones-instagram { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.zones-instagram span { position: absolute; background: rgba(140,140,140,.38); }
.zones-instagram .zone-haut { left: 0; right: 0; top: 0; height: 10%; }
.zones-instagram .zone-bas { left: 0; right: 0; bottom: 0; height: 22%; }
.zones-instagram .zone-droite { right: 0; width: 14%; top: 45%; bottom: 22%; }
.cadre-apercu video:not([controls]), video.apercu:not([controls]) { cursor: pointer; }
.lecture-bouton { background: none; border: 0; padding: 2px 4px; font-size: 13px; line-height: 1; cursor: pointer; flex: none; color: var(--texte); }
.reglage-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-left: 62px; font-size: 13px; color: var(--doux); }
.reglage-fin label, .taille-fine { display: inline-flex; align-items: center; gap: 6px; }
.reglage-fin input[type=range], .taille-fine input[type=range] { width: 120px; accent-color: var(--accent); }
.reglage-fin b, .taille-fine b { color: var(--texte); font-weight: 600; min-width: 48px; font-variant-numeric: tabular-nums; }
.fleches { display: inline-flex; align-items: center; gap: 3px; }
.fleches .puce { padding: 3px 8px; }
.taille-fine .bouton { padding: 2px 9px; }
.rt-st-bloc { display: flex; flex-direction: column; gap: 8px; }
.rt-st-liste { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.st-ligne { display: grid; grid-template-columns: 54px 1fr 22px; gap: 6px; align-items: center; }
.st-ligne.actif .st-temps { color: var(--accent); font-weight: 700; }
.st-ligne.actif .st-texte { border-color: var(--accent); }
.st-temps { background: none; border: 0; padding: 0; color: var(--doux); font-size: 12.5px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.st-texte { padding: 5px 8px; font-size: 13px; }
.st-suppr { color: var(--tres-doux); }
.langue-ia { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--doux); }
.langue-ia .champ { margin-top: 0; width: auto; }
@media (max-width: 760px) { .reglage-fin { padding-left: 0; } .reglage-fin input[type=range], .taille-fine input[type=range] { width: 96px; } }

/* Résultats des variants */
#rt-resultats { margin-top: 14px; }
#rt-resultats h3 { margin: 0 0 10px; }
.rt-resultats-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rt-resultats-entete > p { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0; }
#rt-batch-info { font-weight: 600; overflow-wrap: anywhere; }
#rt-fichiers-liste ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 20px; list-style: none; margin: 12px 0 0; padding: 0; }
#rt-fichiers-liste li { min-width: 0; overflow-wrap: anywhere; }
.rt-historique { margin-top: 14px; }
.rt-historique .rt-resultats-entete { margin-bottom: 8px; }
.rt-historique-lot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.rt-historique-lot:last-child { border-bottom: 0; }
.rt-historique-lot summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.rt-historique-lot summary span { color: var(--doux); font-size: 12px; }
.rt-historique-lot ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 20px; list-style: none; margin: 8px 0 0; padding: 0; }
.rt-historique-lot li { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
@media (max-width: 520px) { .rt-historique-lot { grid-template-columns: 1fr; } }

/* Photos de départ (★) : une vidéo Kling par photo */

/* Nouveau décor */
.ia-photo button.decor { top: 2px; left: 2px; right: auto; font-size: 11px; }

/* La photo principale (2026-10-10) : celle qui part en premier chez tous les moteurs ; ⬆ en choisit une autre */
.ia-photo.principale { border: 2px solid var(--accent); }
.ia-photo .badge-principale { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 600; text-align: center; }
.ia-photo button.monter { top: auto; bottom: 2px; left: 2px; right: auto; }
.conseil-photos { margin: 2px 0 8px !important; }
/* Sa tenue : celle de la vidéo ou celle de sa photo principale */
.choix-tenue { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; font-size: 13px; }
.choix-tenue .etiquette-champ { margin: 0; }
.choix-tenue label { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.decor-haut { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.decor-haut img { width: 64px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bord); flex-shrink: 0; }
#decor-liste .puce.perso { display: inline-flex; gap: 4px; align-items: center; }
#decor-liste .puce.perso .lien { padding: 0; }
#decor-etat { min-height: 18px; margin-top: 6px; }

/* Accroches proposées par l'IA */
.propositions-rt { display: flex; flex-direction: column; gap: 6px; }
.propositions-rt button { text-align: left; background: var(--surface-2); border: 1px solid var(--bord); border-radius: 8px; padding: 7px 10px; color: var(--texte); font-size: 13.5px; }
.propositions-rt button:hover { border-color: var(--accent); }
.propositions-rt button.actif { border-color: var(--accent); background: rgba(220,60,128,.12); }
/* Le contrôle avant envoi (2026-10-09) : il avertit, il ne bloque pas */
.controle-envoi { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245,177,76,.55);
  background: rgba(245,177,76,.08); font-size: 13px; }
.controle-envoi .titre-controle { margin: 0 0 4px; font-weight: 700; color: var(--alerte); }
.controle-envoi ul { margin: 0; padding-left: 18px; }
.controle-envoi li + li { margin-top: 3px; }
/* La langue du fan (2026-10-09) : son message traduit, et le sens en français de chaque réponse */
.langue-fan { border: 1px solid rgba(91,141,239,.45); background: rgba(91,141,239,.08); border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.langue-fan .titre-langue { font-weight: 700; }
.langue-fan .message-fan { color: var(--texte); }
.langue-fan .aide { margin: 2px 0 0; }
.traduction { display: block; color: var(--doux); font-size: 11.5px; margin-top: 2px; }
.suggestion .taper .traduction { font-style: italic; }
/* Les légendes proposées par l'IA (2026-10-09) : le compteur gratuit et la fenêtre de choix */
.sous-legende { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.compteur-legende { font-size: 11.5px; color: var(--tres-doux); }
.compteur-legende .trop { color: var(--erreur); font-weight: 700; }
.dialogue-legendes .ligne-legendes { display: flex; gap: 8px; margin: 10px 0; }
.dialogue-legendes .ligne-legendes select { flex: none; width: auto; }
.legendes-liste { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.legende-proposee { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.legende-proposee p { margin: 0 0 8px; white-space: pre-wrap; }
.legende-proposee .pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* L'IA regarde la vidéo (2026-10-09) : ce qu'elle voit, sous la vidéo, corrigeable gratuitement */
.fiche-ia { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font-size: 12px;
  color: var(--doux); margin: 4px 0; cursor: pointer; }
div.fiche-ia { cursor: default; }
.fiche-ia:hover { color: var(--texte); }
.texte-deja-en-haut { color: var(--alerte); margin: 2px 0 6px; }

/* 📷 Photos (2026-10-11) : à la place des « Réponses rapides » ; 3 vignettes par ligne, une case sur chacune */
.bloc-photos.survol { outline: 2px dashed var(--accent); outline-offset: 2px; }
.photos-modele { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); margin: 2px 0 8px; flex-wrap: wrap; }
.photos-modele select { flex: 1; min-width: 0; }
.photos-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: min(40vh, 380px); overflow-y: auto;
  overscroll-behavior: contain; padding-right: 2px; }
.photos-grille > .aide { grid-column: 1 / -1; margin: 0; }
.photo-mini { position: relative; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 2px solid transparent; }
.photo-mini.cochee { border-color: var(--accent); }
.photo-case { display: block; aspect-ratio: 4 / 5; cursor: pointer; }
.photo-case img, .photo-heic { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; font-size: 12px; color: var(--doux); }
.photo-case input { position: absolute; top: 5px; left: 5px; width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.photo-boutons { position: absolute; right: 3px; bottom: 3px; display: flex; gap: 3px; }
.photo-boutons .bouton { padding: 2px 5px; font-size: 12px; line-height: 1.2; background: rgba(0,0,0,.65); }
.photos-actions { margin-top: 8px; flex-wrap: wrap; gap: 6px; }
#photos-repartir { margin-left: auto; }   /* à droite, même quand la ligne passe à deux */
.repartir-apercu { margin: 10px 0 0; padding-left: 20px; max-height: 26vh; overflow-y: auto; font-size: 13px; color: var(--doux); }
.repartir-apercu b { color: var(--texte); }

/* « 🔍 Relever les comptes » (2026-10-11) : l'état vide porte le bouton ; le compte trouvé s'allume un instant */
.releve-vide { margin-top: 6px; }
/* « Chez Léa ▾ » (2026-10-11) : le petit menu de chaque compte rangé, dans 👩 Modèles */
.carte-modele .liste-comptes .compte-chez { gap: 6px; }
.menu-chez { background: var(--surface-2); color: var(--doux); border: 1px solid var(--bord); border-radius: 999px; padding: 1px 6px;
  font: inherit; font-size: 11.5px; cursor: pointer; max-width: 150px; }
.menu-chez:hover, .menu-chez:focus-visible { border-color: var(--accent); color: var(--texte); outline: none; }
.menu-chez:disabled { opacity: .5; cursor: progress; }
.compte.compte-nouveau, .compte-chez.vient-darriver, .ligne-a-classer.vient-darriver { border-radius: 8px; animation: s-allume 2.2s ease-out both; }
@keyframes s-allume { from { box-shadow: 0 0 0 2px rgba(62,207,142,.8), 0 0 16px rgba(62,207,142,.45); } to { box-shadow: 0 0 0 2px rgba(62,207,142,0); } }
@media (prefers-reduced-motion: no-preference) {   /* le petit bond, seulement si l'écran accepte le mouvement */
  .compte.compte-nouveau, .compte-chez.vient-darriver, .ligne-a-classer.vient-darriver { animation: s-allume 2.2s ease-out both, s-bondit .45s ease-out; }
}
@keyframes s-bondit { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: none; } }