/* ═══════════════════════════════════════════════════
   Fil de discussion — mise en forme des messages
   ─────────────────────────────────────────────────
   Une seule apparence pour les trois endroits où l'on discute :
   messagerie.html, bien-propose.html (côté client) et bien-admin.html
   (côté conseiller). Le rendu qui produit ce balisage vit dans
   js/fil-discussion.js.

   Bulles façon messagerie téléphonique : la mienne à droite en bleu pâle,
   celle de l'autre à gauche en blanc, une pointe sur le premier message
   d'une série, l'heure en bas à droite dans la bulle.

   Ni nom ni étiquette de rôle : la conversation n'a que deux participants
   et l'avatar suffit à les distinguer. Les répéter à chaque prise de
   parole alourdissait la lecture sans rien apprendre.

   Le conteneur reste à chaque page — la messagerie remplit un panneau,
   les fiches un encadré à hauteur bornée. Seule .fil-thread, ci-dessous,
   impose ce dont le rendu a besoin : une colonne, pour que .bp-day se
   centre et que .bp-comment--me s'aligne à droite.
   ═══════════════════════════════════════════════════ */

/* Fond crème de la charte (--cream), plutôt que du blanc : les bulles
   blanches de l'interlocuteur s'y détachent au lieu de se fondre dedans. */
.fil-thread {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--cream, #f7f2ed);
  /* Arrivé en haut ou en bas du fil, le geste se propageait à la page — qui
     ne défile pas dans cette mise en page — et le défilement paraissait
     bloqué. « contain » garde le geste dans le fil. */
  overscroll-behavior: contain;
}

/* ── Pourquoi Safari ne défilait pas, et pas Chrome ──
   Dans une colonne flexible, un enfant peut être COMPRIMÉ pour tenir dans
   la hauteur disponible : c'est la valeur par défaut, flex-shrink: 1.
   Chrome laisse déborder, Safari comprime réellement — les messages étaient
   donc écrasés pour rentrer, le contenu ne dépassait plus, et il n'y avait
   plus rien à faire défiler. Le fil paraissait figé alors qu'il obéissait
   parfaitement : il n'avait simplement plus de course.

   flex-shrink: 0 interdit cette compression. Les messages gardent leur
   hauteur, le contenu déborde comme il le doit, et le fil défile.

   L'ancien « -webkit-overflow-scrolling: touch » a été retiré : Apple l'a
   déprécié depuis iOS 13 — l'inertie est native depuis — et il crée une
   couche de composition à part, connue pour casser le défilement dans une
   mise en page flexible. C'était un remède d'hier appliqué à un mal
   d'aujourd'hui. */
.fil-thread > * { flex-shrink: 0; }

/* iOS confie le toucher au lecteur vidéo natif : un glissement du doigt sur
   une vidéo ne faisait pas défiler la conversation, elle semblait figée.
   « pan-y » rend le défilement vertical au fil — mais seulement tant que la
   vidéo n'est pas lancée, sinon on ne pourrait plus déplacer le curseur de
   lecture, qui est un glissement horizontal. */
.bp-video:not(.is-lecture) .bp-comment__video,
.bp-video:not(.is-lecture) .bp-video__lire,
.bp-comment__img,
.bp-audio { touch-action: pan-y; }

/* ── Une prise de parole ── */
.bp-comment { max-width: 85%; align-self: flex-start; position: relative; padding-left: 36px; }
.bp-comment--me { align-self: flex-end; padding-left: 0; padding-right: 36px; }
.bp-comment--first { margin-top: 10px; }

/* Avatar au DERNIER message d'une série : c'est celui qui borde le blanc
   sous la conversation, comme sur WhatsApp. */
.bp-comment__avatar {
  position: absolute; left: 0; bottom: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.bp-comment--me .bp-comment__avatar { left: auto; right: 0; }
/* Avatar par défaut : silhouette discrète sur fond clair, plutôt que la
   pastille bleue et les initiales. */
/* Fond blanc, comme les bulles : sur le crème du fil, la pastille bleutée
   était la seule tache d'une autre famille de couleur. */
.bp-comment__avatar--vide {
  background: #fff;
  color: rgba(4, 2, 77, 0.32);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bp-comment__avatar--vide svg { width: 20px; height: 20px; display: block; }

/* ── La bulle ── */
.bp-comment__bubble {
  position: relative;
  background: #fff; border: none;
  border-radius: 8px;
  padding: 6px 9px 7px 10px;
  font-size: 0.88rem; line-height: 1.45; color: var(--blue-dark, #04024D);
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(4, 2, 77, 0.13);
}
.bp-comment--me .bp-comment__bubble {
  background: var(--blue-light, #e8ebfe);
  color: var(--blue-dark, #04024D);
}
/* Une bulle qui ne porte qu'une image ou une vidéo : la couleur ne doit plus
   dessiner un cadre autour du média, seulement un filet. L'heure reste en
   dessous et retrouve à la main la gouttière que le rembourrage lui donnait. */
/* « flow-root » : l'heure flotte à droite, et une bulle sans texte n'avait
   rien pour la retenir — elle débordait sous la bulle, posée sur le fond du
   fil. Le défaut passait inaperçu tant que le cadre était épais. */
.bp-comment__bubble--visuel { padding: 3px 3px 3px; display: flow-root; }
.bp-comment__bubble--visuel .bp-comment__img,
.bp-comment__bubble--visuel .bp-video,
.bp-comment__bubble--visuel .bp-comment__file,
.bp-comment__bubble--visuel .bp-audio { margin: 0; }
.bp-comment__bubble--visuel .bp-comment__time { padding: 2px 3px 0; }
/* La pointe, sur le premier message d'une série seulement. */
.bp-comment--first:not(.bp-comment--me) .bp-comment__bubble { border-top-left-radius: 0; }
.bp-comment--first:not(.bp-comment--me) .bp-comment__bubble::before {
  content: ''; position: absolute; top: 0; left: -8px;
  border-right: 8px solid #fff;
  border-bottom: 10px solid transparent;
}
.bp-comment--me.bp-comment--first .bp-comment__bubble { border-top-right-radius: 0; }
.bp-comment--me.bp-comment--first .bp-comment__bubble::before {
  content: ''; position: absolute; top: 0; right: -8px;
  border-left: 8px solid var(--blue-light, #e8ebfe);
  border-bottom: 10px solid transparent;
}

/* L'heure se loge en bas à droite ; le float laisse le texte l'envelopper
   plutôt que de lui réserver une ligne à elle seule. */
.bp-comment__time {
  display: inline-block;
  /* 9,6 px auparavant : trop discret pour une heure qu'on cherche du regard */
  font-size: 10.8px; color: rgba(4, 2, 77, 0.45);
  margin-left: 8px; margin-top: 8px;
  transform: translateY(2px);
  white-space: nowrap;
  float: right; shape-outside: inset(0);
}
.bp-comment__ticks {
  /* Taille exprimée en em : la coche fait exactement la hauteur de l'heure
     et le restera si ce corps change. Le rapport 4/3 est celui du cadre du
     tracé (16 x 12) — sans lui, le navigateur ajoute des marges et la coche
     flotte dans le vide. */
  height: 1em; width: 1.333em;
  color: var(--blue, #405AD2);
  vertical-align: -0.15em;
  margin-left: 4px;
}

/* ── Séparateur de jour ── */
.bp-day {
  align-self: center;
  background: #fff; color: var(--gray-600, #52525b);
  font-size: 0.62rem; font-weight: 700;
  padding: 4px 12px; border-radius: 8px;
  box-shadow: 0 1px 1px rgba(4, 2, 77, 0.10);
  margin: 10px 0 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Pièces jointes ── */
.bp-comment__img {
  display: block; max-width: 100%; width: 220px;
  border-radius: 8px; margin: 2px 0 4px;
}
/* ── Lecteur vidéo ──
   Image fixe et bouton central tant que rien n'est lancé, façon Apple ou
   Instagram ; les commandes natives n'apparaissent qu'à la lecture. */
/* La largeur et la hauteur exactes sont posées en ligne par le JS, calculées
   à partir des dimensions du film pour tenir dans 240 × 300. Les valeurs
   ci-dessous ne servent qu'aux messages postés avant qu'on enregistre les
   dimensions : sans elles, une vidéo dont on ignore la forme s'afficherait
   dans les 300 × 150 par défaut du navigateur. */
.bp-video { position: relative; display: block; width: 200px; max-width: 100%; margin: 2px 0 4px; }
.bp-comment__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px; background: #000;
}

/* Durée du film, sur la même ligne que l'heure et les coches, à gauche —
   l'heure flotte à droite, la durée occupe le début de la ligne. Mêmes taille,
   couleur et calage vertical que l'heure, pour qu'elles se lisent comme une
   seule mention. Vide tant qu'on ignore la durée : la caméra seule
   n'apprendrait rien. */
.bp-video__duree {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.8px; color: rgba(4, 2, 77, 0.45);
  /* Le filet ne fait plus que 3 px : sans ce retrait, la caméra viendrait
     buter contre le bord de la bulle. */
  margin-left: 5px; margin-top: 8px;
  transform: translateY(2px);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bp-video__duree svg { width: 13px; height: 13px; display: block; }
.bp-video__duree:empty { display: none; }

/* Pastille translucide floutée et triangle blanc, comme le lecteur d'iOS.
   Elle tient sur un plan clair comme sur un plan sombre, là où un triangle
   blanc nu disparaît sur un mur blanc.

   Centrage par translate plutôt que par « inset: 0; margin: auto » : le
   décalage se calcule sur la taille réelle du bouton, sans dépendre de la
   hauteur du conteneur. Le triangle, lui, ne reçoit AUCUNE marge — son
   tracé est déjà équilibré autour du centre, et le cheveu que j'avais
   ajouté pour « compenser » le poussait visiblement à droite. */
.bp-video__lire {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Proportions de WhatsApp : pastille resserrée, triangle généreux — il
     occupe une bien plus grande part du disque que dans un lecteur iOS. */
  width: 46px; height: 46px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(233, 235, 238, 0.93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #3B4149;                         /* anthracite */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease-out, background 0.15s;
}
.bp-video__lire:hover {
  background: rgba(244, 245, 247, 0.97);
  transform: translate(-50%, -50%) scale(1.06);
}
.bp-video__lire:active { transform: translate(-50%, -50%) scale(0.96); }
.bp-video__lire svg { width: 28px; height: 28px; display: block; }
.bp-video.is-lecture .bp-video__lire { display: none; }

/* La carte reste neutre. Une photo ou une vidéo apporte ses propres
   couleurs ; un document n'a rien à montrer, et le bleu qu'on lui posait
   n'était la couleur de rien — il attirait l'œil sur la pièce la plus
   banale du fil. */
.bp-comment__file {
  display: flex; align-items: center; gap: 9px;
  background: rgba(4, 2, 77, 0.05);
  border-radius: 10px; padding: 8px 12px; margin: 2px 0 4px;
  text-decoration: none; color: var(--blue-dark, #04024D);
  font-size: 0.82rem; font-weight: 700;
}
.bp-comment__file:hover { background: rgba(4, 2, 77, 0.09); }
.bp-comment__file svg { width: 19px; height: 19px; color: var(--gray-400, #8e8cb0); flex-shrink: 0; }
.bp-comment__file small {
  display: block; color: var(--gray-500, #71717a);
  font-weight: 500; font-size: 0.68rem;
}

/* ── Fil vide ── */
.msg-thread__vide {
  margin: auto; padding: 30px 10px; text-align: center;
  font-size: 0.85rem; color: var(--gray-500, #71717a);
}

/* ── Message rejoint depuis la recherche (messagerie) ──
   Le halo est porté par une ombre plutôt que par une marge : il ne
   déplace rien autour de lui. */
.bp-comment.is-trouve { border-radius: 12px; animation: msg-trouve 2.8s ease-out forwards; }
@keyframes msg-trouve {
  from { background: rgba(237, 121, 123, 0.16); box-shadow: 0 0 0 10px rgba(237, 121, 123, 0.16); }
  to   { background: transparent;               box-shadow: 0 0 0 10px rgba(237, 121, 123, 0); }
}

/* ── Écrans étroits ──
   L'encadré des fiches est bien plus étroit que le panneau de la
   messagerie : à 85 %, une bulle y tenait sur trois mots par ligne. */
.bp-comments-thread .bp-comment { max-width: 92%; }
@media (max-width: 900px) { .bp-comment { max-width: 92%; } }

/* ── Bandeau de progression d'un envoi ──
   Glissé au-dessus de la barre de saisie le temps du transfert. Sans lui,
   un dossier de diagnostics de 40 Mo sur un réseau mobile laisse l'écran
   inerte une minute : l'utilisateur renvoie, ou quitte la page. */
.fil-envoi {
  padding: 9px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: #fff;
  font-size: 0.74rem; font-weight: 600;
  color: var(--blue-dark, #04024D);
}
.fil-envoi__texte {
  display: block; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fil-envoi__piste {
  display: block; height: 4px; border-radius: 999px;
  background: var(--blue-light, #e8ebfe); overflow: hidden;
}
.fil-envoi__barre {
  display: block; height: 100%; width: 0;
  background: var(--blue, #405AD2);
  transition: width 0.2s ease-out;
}

/* ── Croix d'annulation, dans le bandeau d'envoi ── */
.fil-envoi__ligne {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.fil-envoi__ligne .fil-envoi__texte { flex: 1 1 auto; margin-bottom: 0; }
.fil-envoi__stop {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--blue, #405AD2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.fil-envoi__stop:hover { background: var(--blue-light, #e8ebfe); }
.fil-envoi__stop svg { width: 13px; height: 13px; }

/* ── Glisser-déposer ──
   Le liseré est posé en ombre intérieure : une bordure déplacerait tout le
   contenu du panneau d'un pixel à chaque survol. */
.fil-depot {
  box-shadow: inset 0 0 0 2px var(--blue, #405AD2);
  border-radius: 12px;
}

/* ── Message vocal : lecteur dans la bulle ──
   Le lecteur natif du navigateur est large, gris et jure avec la bulle.
   Celui-ci reprend les proportions du bouton de lecture vidéo. */
.bp-audio {
  display: flex; align-items: center; gap: 10px;
  width: 240px; max-width: 100%;
  margin: 2px 0 4px;
}
.bp-audio audio { display: none; }
.bp-audio__lire {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(233, 235, 238, 0.93); color: #3B4149;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.bp-comment--me .bp-audio__lire { background: rgba(255, 255, 255, 0.75); }
.bp-audio__lire:hover { background: #fff; transform: scale(1.06); }
.bp-audio__lire svg { width: 20px; height: 20px; display: block; }
.bp-audio__piste {
  flex: 1 1 auto; height: 4px; border-radius: 999px;
  background: rgba(4, 2, 77, 0.14); overflow: hidden;
}
.bp-audio__barre {
  display: block; height: 100%; width: 0;
  background: var(--blue, #405AD2);
}
.bp-audio__temps {
  flex: 0 0 auto; font-size: 0.65rem; font-variant-numeric: tabular-nums;
  color: rgba(4, 2, 77, 0.5);
}

/* ── Barre d'enregistrement, à la place de la zone de saisie ── */
.fil-voix {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  background: #fff;
}
.fil-voix__point {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px;
  background: #E0413E;
  animation: fil-voix-pulse 1.1s ease-in-out infinite;
}
@keyframes fil-voix-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.fil-voix__temps {
  flex: 1 1 auto;
  font-size: 0.82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--blue-dark, #04024D);
}
.fil-voix__stop, .fil-voix__envoi {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.fil-voix__stop { background: transparent; color: rgba(4, 2, 77, 0.55); }
.fil-voix__stop:hover { background: rgba(15, 23, 42, 0.07); }
.fil-voix__stop svg { width: 15px; height: 15px; }
.fil-voix__envoi { background: var(--blue, #405AD2); color: #fff; }
.fil-voix__envoi:hover { background: var(--blue-dark, #04024D); }
.fil-voix__envoi svg { width: 17px; height: 17px; }

/* ── Bouton « + » et son menu de pièces jointes ──
   Image et document se replient derrière un seul bouton : à quatre boutons
   autour du champ, celui-ci ne faisait plus que la moitié de la largeur. */
.fil-plus { position: relative; display: flex; flex: 0 0 auto; }
.fil-plus__menu {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  min-width: 190px; z-index: 30;
  background: #fff; border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(4, 2, 77, 0.16), 0 0 0 1px rgba(4, 2, 77, 0.06);
}
.fil-plus__menu[hidden] { display: none; }
/* Le selecteur est long a dessein. Les fiches posent, dans leur propre
   feuille chargee APRES celle-ci, une regle « .bp-comments-form button » qui
   arrondit et bleuit tout bouton du formulaire : a specificite egale elle
   l'emportait, et les deux entrees du menu devenaient des pastilles bleues de
   38 px avec leur texte qui debordait. En ajoutant .fil-plus on passe devant,
   quel que soit l'ordre de chargement. */
.fil-plus .fil-plus__menu button {
  display: flex; align-items: center; gap: 11px;
  /* « flex-start » est indispensable : la regle des ronds pose
     justify-content: center, qui centrait le contenu de chaque ligne. Les
     libelles n'ayant pas la meme longueur, les icones tombaient a des
     abscisses differentes — d'ou la colonne de travers. */
  justify-content: flex-start;
  width: 100%; height: auto; padding: 10px 12px;
  border: 0; border-radius: 10px; background: transparent;
  cursor: pointer; text-align: left;
  font: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--blue-dark, #04024D);
}
.fil-plus .fil-plus__menu button:hover { background: var(--blue-light, #e8ebfe); }
.fil-plus .fil-plus__menu button svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  color: var(--blue, #405AD2);
}

/* Le vocal est une action, pas une icone discrete : il porte le bleu du site
   comme le bouton d'envoi. Meme raison que ci-dessus pour la longueur du
   selecteur — il doit passer devant « .bp-comments-form button.bp-comments-attach ». */
.bp-comments-form button.bp-comments-attach.fil-micro {
  background: var(--blue, #405AD2); color: #fff;
}
.bp-comments-form button.bp-comments-attach.fil-micro:hover {
  background: var(--blue-dark, #04024D); color: #fff;
}
/* Le « + » pivote en croix quand le menu est ouvert. */
.fil-plus__bouton svg { transition: transform 0.2s ease-out; }
.fil-plus.is-ouvert .fil-plus__bouton svg { transform: rotate(45deg); }