/* Assistance : fil de discussion.
   Bulles larges, texte a 15 px minimum : le lecteur peut avoir 80 ans et
   ecrire dans l'inquietude. Les animations sont douces et courtes (entree
   des blocs, ouverture d'une conversation) ; elles s'arretent toutes si la
   personne demande moins d'animation. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* L'avertissement passe AVANT le fil : une operation en cours ne s'arrete
   pas avec un message, elle s'arrete avec la banque. */
.urgence {
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--signal-vigilance-tint);
  border-left: 4px solid var(--signal-vigilance);
  border-radius: var(--radius-sm);
}
.urgence__titre {
  margin: 0 0 6px;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
}
.urgence__texte {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: 1.6;
  color: var(--ink-muted-80);
}

.fil {
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(25,20,62,.05), 0 10px 30px -12px rgba(25,20,62,.16);
}

/* En-tete du fil : c'est ce qui donne un rendu de fenetre de discussion
   plutot qu'un simple formulaire pose sur la page. */
.fil__entete {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  color: var(--on-dark);
}
.fil__logo {
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--canvas);
  padding: 5px;
}
.fil__retour {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: var(--on-dark);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.fil__retour:hover { background: rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce) { .fil__retour { transition: none; } }
.fil__entete-titre {
  margin: 0;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
}
.fil__entete-sous {
  margin: 2px 0 0;
  font-size: var(--text-caption-size);
  color: rgba(255,255,255,.78);
}

.fil__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 260px;
  max-height: 46vh;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-lg) 4px;
}

/* ── Liste des conversations ── */
.fil-liste {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: 46vh;
  overflow-y: auto;
}
.fil-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-bottom: 1px solid var(--divider-soft);
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.fil-item:last-child { border-bottom: none; }
.fil-item:hover { background: var(--canvas-parchment); }
.fil-item__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.fil-item__corps { flex: 1 1 auto; min-width: 0; }
.fil-item__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.fil-item__titre {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
  white-space: nowrap;
}
.fil-item__apercu {
  display: block;
  margin: 2px 0 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fil-liste__pied { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.fil-liste .vide, .fil-liste p.vide {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

/* min(..., 620px) : la colonne est maintenant aussi large que celle des
   autres onglets -- sans plafond, une bulle atteignait 730px de long, bien
   trop pour se lire confortablement. */
.bulle-fil {
  max-width: min(78%, 620px);
  padding: 12px var(--space-md);
  border-radius: var(--radius-md);
}
.bulle-fil--moi {
  align-self: flex-end;
  background: var(--action-tint-strong);
  border-bottom-right-radius: 4px;
}
.bulle-fil--support {
  align-self: flex-start;
  background: var(--canvas-parchment);
  border-bottom-left-radius: 4px;
}

/* Logo SentinelleFin a gauche de ses propres messages (accueil, support,
   points de saisie) : jamais sur ceux du client, deja distingues par
   l'alignement a droite et la couleur. */
.bulle-ligne {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(82%, 660px);
  align-self: flex-start;
}
.bulle-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.bulle-ligne .bulle-fil { max-width: 100%; min-width: 0; }
/* Le message d'accueil est un repere, pas une reponse : meme forme que
   les bulles support, teinte de marque pour ne pas se faire passer pour
   un message ecrit par quelqu'un. */
.bulle-fil--accueil { background: var(--action-tint); }

/* Uniquement sur une conversation flambant neuve (voir assistance.js,
   accueillirNouvelleConversation) : le message semble arriver, comme
   les autres bulles, plutot que d'apparaitre tout fait. */
@keyframes arriveeBulle {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.bulle-fil--arrivee {
  animation: arriveeBulle var(--dur-slow) var(--ease-standard) both;
}

/* Trois points, comme une messagerie usuelle, pendant le court delai
   simule avant le message d'accueil. */
.bulle-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
  background: var(--canvas-parchment);
}
.bulle-typing__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-muted-48);
  animation: tapement 1.1s ease-in-out infinite;
}
.bulle-typing__point:nth-child(2) { animation-delay: .15s; }
.bulle-typing__point:nth-child(3) { animation-delay: .3s; }
@keyframes tapement {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bulle-fil--arrivee { animation: none; }
  .bulle-typing__point { animation: none; opacity: .8; }
}
.bulle-fil__texte {
  margin: 0 0 4px;
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--brand-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bulle-fil__meta {
  margin: 0;
  font-size: var(--text-fine-size);
  color: var(--ink-muted-80);
}

.fil__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.fil__barre {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--canvas-parchment);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px var(--space-md);
  box-shadow: inset 0 0 0 1px var(--border-input);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.fil__barre:focus-within { box-shadow: inset 0 0 0 2px var(--action-focus); }

.fil__zone {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px;
  font-family: inherit;
  font-size: var(--text-body-size);
  line-height: 1.5;
  color: var(--brand-1);
  background: transparent;
  border: none;
  padding: 9px 0;
  resize: none;
  overflow-y: auto;
}
.fil__zone::placeholder { color: var(--ink-muted-48); }
.fil__zone:focus-visible { outline: none; }

.fil__note {
  margin: 0;
  text-align: center;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}
.fil__envoyer {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  background: var(--action);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.fil__envoyer:hover { background: var(--action-focus); }
.fil__envoyer:active { transform: scale(var(--press-scale)); }
.fil__envoyer:disabled { background: var(--ink-muted-48); cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .fil__barre, .fil__envoyer { transition: none; }
}

@media (max-width: 760px) {
  .bulle-fil { max-width: 88%; }
  .fil__messages { max-height: 52vh; }
}


/* ═════════════════════════ Bandeau ═════════════════════════ */
.assist-bandeau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xl);
  color: var(--on-dark);
  background:
    radial-gradient(70% 130% at 100% 0%, rgba(115,111,182,.42) 0%, transparent 62%),
    radial-gradient(60% 110% at 0% 100%, rgba(18,135,111,.14) 0%, transparent 66%),
    linear-gradient(150deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -26px rgba(25,20,62,.62);
}
.assist-bandeau::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -130px;
  width: 360px;
  height: 360px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.assist-bandeau__logo { position: relative; flex: 0 0 auto; width: 124px; height: 124px; display: grid; place-items: center; }
.assist-bandeau__disque {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #fff 0%, var(--action-tint-strong) 100%);
  color: var(--brand-2);
  box-shadow: 0 0 0 7px rgba(255,255,255,.10), 0 16px 28px -12px rgba(8,5,30,.75), inset 0 1px 0 #fff;
  animation: assist-flotte 5.5s ease-in-out infinite;
}
.assist-bandeau__onde {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.34);
  opacity: 0;
  animation: assist-onde 4.5s ease-out infinite;
  animation-delay: calc(var(--i) * -2.25s);
}
@keyframes assist-onde { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes assist-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.assist-bandeau__texte { min-width: 0; }
.assist-bandeau__titre {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
}
.assist-bandeau__soustitre { margin: 0 0 var(--space-md); max-width: 36em; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: rgba(255,255,255,.88); text-wrap: pretty; }
.assist-bandeau__puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.assist-bandeau__puces li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 14px;
  font-weight: 600;
}
.assist-bandeau__puces li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fd0a8; box-shadow: 0 0 0 4px rgba(63,208,168,.25); }

/* ═════════════════════════ Urgence : trois gestes ═════════════════════════ */
.assist-urgence {
  max-width: var(--largeur-bandeau);
  margin: 0 auto var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, var(--signal-vigilance-tint) 100%);
  border: 1px solid rgba(176,112,11,.28);
  box-shadow: 0 1px 2px rgba(25,20,62,.05), 0 14px 32px -20px rgba(176,112,11,.4);
}
.assist-urgence__tete { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.assist-urgence__icone {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--signal-vigilance);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(176,112,11,.12), 0 8px 18px -10px rgba(176,112,11,.5);
  animation: assist-alerte 3.4s ease-in-out infinite;
}
@keyframes assist-alerte { 0%, 100% { box-shadow: 0 0 0 5px rgba(176,112,11,.12), 0 8px 18px -10px rgba(176,112,11,.5); } 50% { box-shadow: 0 0 0 9px rgba(176,112,11,.06), 0 8px 18px -10px rgba(176,112,11,.5); } }
.assist-urgence__sur { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-vigilance); }
.assist-urgence__titre { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--brand-1); }
.assist-urgence__etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.assist-urgence__etapes li {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(176,112,11,.14);
}
.assist-urgence__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--signal-vigilance);
}
.assist-urgence__etapes h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 700; color: var(--brand-1); }
.assist-urgence__etapes p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted-80); text-wrap: pretty; }
.assist-urgence__etapes strong { color: var(--ink); }

/* ═════════════════════════ Panneau de conversation ═════════════════════════ */
.fil { border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(25,20,62,.05), 0 24px 48px -24px rgba(25,20,62,.28); }
.fil__entete {
  position: relative;
  overflow: hidden;
  padding: var(--space-md) var(--space-lg);
  background:
    radial-gradient(80% 160% at 100% 0%, rgba(115,111,182,.5) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
}
.fil__logo { box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.fil__compte {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.fil__compte[hidden] { display: none; }

.fil-item {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  transition: background var(--dur-fast) var(--ease-standard);
}
.fil-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--action);
  transform: scaleY(0);
  transition: transform var(--dur-base) var(--ease-standard);
}
.fil-item:hover, .fil-item:focus-visible { background: var(--action-tint); outline: none; }
.fil-item:hover::before, .fil-item:focus-visible::before { transform: scaleY(1); }
.fil-item__avatar { width: 40px; height: 40px; box-shadow: 0 0 0 1px var(--hairline-alpha); }
.fil-item__titre { font-size: 16px; }
.fil-item__apercu { font-size: 15px; }
.fil-item__fleche { flex: 0 0 auto; color: var(--ink-muted-48); transition: transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.fil-item:hover .fil-item__fleche { transform: translateX(3px); color: var(--action); }

.fil-vide { display: grid; justify-items: center; gap: 6px; padding: var(--space-xl) var(--space-lg); text-align: center; }
.fil-vide__icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--brand-4); background: var(--action-tint); margin-bottom: 6px; }
.fil-vide__titre { margin: 0; font-size: 17px; font-weight: 700; color: var(--brand-1); }
.fil-vide__texte { margin: 0; max-width: 28em; font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink-muted-80); }

.fil-nouvelle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fil-nouvelle svg { transition: transform var(--dur-base) var(--ease-standard); }
.fil-nouvelle:hover svg { transform: rotate(90deg); }

.fil__envoyer { width: 42px; height: 42px; box-shadow: 0 8px 16px -8px rgba(94,83,152,.7); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.fil__envoyer:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); }
.bulle-fil--moi { background: linear-gradient(150deg, var(--action-tint-strong), #d6d1f2); }

/* ═════════════════════════ Animations d'entree ═════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes assist-entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes assist-vue-droite { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
  @keyframes assist-vue-gauche { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
  .assist-bandeau, .assist-urgence, .fil { animation: assist-entree .7s var(--ease-standard) both; }
  .fil { animation-delay: .1s; }
  .assist-urgence { animation-delay: .2s; }
  .assist-urgence__etapes li { animation: assist-entree .6s var(--ease-standard) both; }
  .assist-urgence__etapes li:nth-child(1) { animation-delay: .35s; }
  .assist-urgence__etapes li:nth-child(2) { animation-delay: .45s; }
  .assist-urgence__etapes li:nth-child(3) { animation-delay: .55s; }
  .fil-item { animation: assist-entree .5s var(--ease-standard) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
  #fil-vue-conversation:not([hidden]) { animation: assist-vue-droite .38s var(--ease-standard) both; }
  #fil-vue-liste:not([hidden]) { animation: assist-vue-gauche .38s var(--ease-standard) both; }
}
@media (prefers-reduced-motion: reduce) {
  .assist-bandeau__disque, .assist-bandeau__onde, .assist-urgence__icone { animation: none; }
  .assist-bandeau__onde { display: none; }
}

/* ═════════════════════════ Etroit ═════════════════════════ */
@media (max-width: 860px) {
  .assist-bandeau { padding: var(--space-md) var(--space-lg); gap: var(--space-md); flex-direction: row; align-items: center; }
  /* Sur ecran moyen, le logo passe A COTE du texte (et non au-dessus) : le bandeau reste bas. */
  .assist-bandeau__logo { width: 84px; height: 84px; }
  .assist-bandeau__disque, .assist-bandeau__onde { width: 52px; height: 52px; }
  .assist-bandeau__disque svg { width: 24px; height: 24px; }
  .assist-bandeau__soustitre { margin-bottom: var(--space-sm); }
  .assist-urgence { padding: var(--space-md); }
  .assist-urgence__etapes { grid-template-columns: minmax(0, 1fr); }
  .assist-urgence__titre { font-size: 18px; }
  .fil-item { min-height: 64px; }
}

/* Petit ecran : le texte prend toute la largeur, le logo s'efface pour garder un bandeau court. */
@media (max-width: 520px) {
  .assist-bandeau__logo { display: none; }
}

/* ── Bouton « Aide urgente » (en-tête de l'encadré d'urgence) et page aide-urgence.html ── */
.assist-urgence__tete { flex-wrap: wrap; }
.assist-urgence__tete > div { flex: 1 1 260px; min-width: 0; }
.assist-urgence__bouton {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #d2264f, #b01e44); box-shadow: 0 12px 24px -14px rgba(176, 30, 68, .8);
  transition: transform var(--dur-fast, .15s) ease, filter var(--dur-fast, .15s) ease;
}
.assist-urgence__bouton:hover { transform: translateY(-1px); filter: brightness(1.06); }
.assist-urgence__bouton:focus-visible { outline: 3px solid var(--action-focus, #5b6cff); outline-offset: 3px; }
@media (max-width: 560px) { .assist-urgence__bouton { width: 100%; justify-content: center; } }

.aide-situation { scroll-margin-top: 24px; }
.aide-suite { max-width: var(--largeur-bandeau); margin: var(--space-xl) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.aide-suite p { margin: 0; flex: 1 1 280px; color: var(--ink-muted-80); }

.fil__note--hors { padding: 10px 14px; border-radius: 12px; background: #f1effa; color: #3a3560; line-height: 1.5; }
.fil__note--hors a { color: var(--brand-3); font-weight: 600; text-decoration: underline; }