/* ============================================================
   Fideicomiso.eu — fideibot.css
   Bulle d'assistance présente sur tout le site : vitrine, espace client,
   FIDEIBANK.

   Feuille AUTONOME, et c'est délibéré : la bulle vit sur trois espaces dont les
   feuilles diffèrent. Le site vitrine impose par exemple « img,svg{max-width:100%} »
   et « section{padding:…} » — la croix de fermeture s'étirait en carré et le
   panneau se retrouvait avec deux bandes de blanc à l'intérieur de lui-même.
   On fixe donc ici toutes les dimensions et le modèle de boîte, sans rien
   attendre de l'espace hôte. Les jetons de base.css sont utilisés avec repli
   littéral, pour que la bulle reste correcte même sur une page qui ne les
   chargerait pas.
   ============================================================ */

.fideibot, .fideibot *{ box-sizing:border-box; }
.fideibot svg{ max-width:none; flex-shrink:0; }
.fideibot [hidden]{ display:none !important; }

.fideibot{
  position:fixed; right:20px; bottom:20px; z-index:70;
  font-family:var(--font-b, 'Inter', sans-serif);
}

/* ---- pastille flottante : toujours au même endroit, discrète mais repérable */
.fideibot-fab{
  position:relative;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  /* Le dégradé est ASSOMBRI depuis la teinte choisie, jamais posé tel quel :
     sur un or vif, une icône blanche devient illisible. */
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--bot-tint, #A9812C) 78%, #000) 0%,
    var(--bot-tint, #A9812C) 130%);
  color:#fff; box-shadow:0 14px 30px -10px rgba(11,27,43,.55);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease;
}
.fideibot-fab:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(11,27,43,.65); }
.fideibot-fab svg{ width:25px; height:25px; }
.fideibot-ico-close{ display:none; }
.fideibot.open .fideibot-ico-open{ display:none; }
.fideibot.open .fideibot-ico-close{ display:block; }

/* Compteur de non-lus : le client voit qu'on lui a répondu même en naviguant
   ailleurs. Battement discret tant qu'il n'a pas ouvert. */
.fideibot-count{
  position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 5px;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:#B3423F; color:#fff; font-size:11px; font-weight:700; line-height:1;
  border:2px solid var(--ivory, #F6F2EA); border-radius:999px;
  font-family:var(--font-m, monospace);
}
.fideibot.has-unread .fideibot-fab{ animation:fideibotRing 2.4s ease-in-out infinite; }
@keyframes fideibotRing{
  0%,100%{ box-shadow:0 14px 30px -10px rgba(11,27,43,.55), 0 0 0 0 rgba(179,66,63,.5); }
  50%    { box-shadow:0 14px 30px -10px rgba(11,27,43,.55), 0 0 0 10px rgba(179,66,63,0); }
}

/* ---- panneau : large mais court — une conversation, pas une page */
.fideibot-panel{
  position:absolute; right:0; bottom:70px; width:396px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; overflow:hidden;
  padding:0; margin:0;
  background:var(--card, #fff); border:1px solid var(--border, #E4DFD2); border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(11,27,43,.55);
  animation:fideibotIn .18s cubic-bezier(.2,.7,.2,1);
  /* Jamais plus haut que l'écran, quel que soit l'espace hôte. dvh et non vh :
     sur iPhone, 100vh ignore la barre d'outils de Safari. */
  max-height:calc(100dvh - 120px);
}
@keyframes fideibotIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.fideibot-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; color:#fff;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--bot-tint, #A9812C) 22%, #0B1B2B) 0%,
    color-mix(in srgb, var(--bot-tint, #A9812C) 55%, #0B1B2B) 100%);
}
.fideibot-ava{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:var(--gold-pale, #E8DCB8);
}
.fideibot-ava svg{ width:24px; height:24px; }
.fideibot-id{ flex:1; min-width:0; line-height:1.25; }
.fideibot-id b{
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-d, serif); font-size:15px; font-weight:600;
}
.fideibot-id em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.62); }
/* Certification : pastille dorée, sans texte — la même que dans la messagerie,
   pour une seule identité visuelle d'un écran à l'autre. */
.fideibot-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:0 0 18px; color:var(--gold-light, #C9A227);
}
.fideibot-badge svg{ width:18px; height:18px; display:block; }

/* Croix de fermeture. Ses dimensions sont imposées ICI : sans règle propre, le
   bouton restait nu et son icône s'étirait — d'où le carré blanc dans le coin,
   visible uniquement sur le site vitrine. */
.fideibot-x{
  width:30px; height:30px; flex-shrink:0; padding:0; margin-left:2px;
  background:none; border:none; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
}
.fideibot-x:hover{ background:rgba(255,255,255,.14); color:#fff; }
.fideibot-x svg{ width:17px; height:17px; fill:none; stroke:currentColor; }

/* ---- fil de la bulle */
.fideibot-body{
  flex:1; min-height:96px; max-height:270px; overflow-y:auto;
  padding:13px; display:flex; flex-direction:column; gap:8px;
  background:var(--ivory, #F6F2EA);
}
.fideibot-msg{
  max-width:88%; align-self:flex-start; padding:9px 12px;
  border-radius:14px 14px 14px 4px;
  background:var(--card, #fff); border:1px solid var(--border, #E4DFD2);
  font-size:13.5px; line-height:1.55; color:var(--ink, #1B2430);
  animation:fideibotMsg .18s ease;
  word-break:break-word;
}
/* Réponses du bot teintées de SA couleur — seulement les siennes : les bulles
   du client gardent le bleu nuit de la marque. */
.fideibot-msg:not(.me){
  background:color-mix(in srgb, var(--bot-tint, #A9812C) 11%, var(--card, #fff));
  border-color:color-mix(in srgb, var(--bot-tint, #A9812C) 30%, var(--card, #fff));
}
.fideibot-msg.me{
  align-self:flex-end; border-radius:14px 14px 4px 14px;
  background:var(--navy, #0B1B2B); border-color:transparent; color:#fff;
}
@keyframes fideibotMsg{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.fideibot-foot{
  flex:0 0 auto; padding:11px 13px 13px;
  border-top:1px solid var(--border, #E4DFD2); background:var(--card, #fff);
}

/* ---- questions fréquentes repliables ----
   Sur un téléphone, une dizaine de puces mangeaient toute la hauteur et il ne
   restait presque rien pour lire les réponses. Repliées par défaut sur petit
   écran, et le choix est mémorisé. */
.fideibot-faq{ margin-bottom:8px; }
.fideibot-faq-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:7px 2px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--hint, #8A93A0);
}
.fideibot-faq-toggle svg{ width:14px; height:14px; transition:transform .16s ease; }
.fideibot-faq.is-open .fideibot-faq-toggle svg{ transform:rotate(180deg); }
.fideibot-faq [data-faq-list]{ display:none; }
.fideibot-faq.is-open [data-faq-list]{ display:flex; }

/* La liste défile : à quarante questions rangées en sept rubriques, une
   hauteur courte ne montrerait plus qu'un intitulé et demi. */
.fideibot-chips{ display:flex; flex-direction:column; gap:10px; max-height:200px; overflow-y:auto; }
.fideibot-group{ display:flex; flex-wrap:wrap; gap:6px; }
.fideibot-group-t{
  flex:1 0 100%; margin-bottom:1px;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hint, #8A93A0);
}
.fideibot-chip{
  border:1px solid var(--border, #E4DFD2); background:var(--ivory, #F6F2EA);
  color:var(--ink, #1B2430); font-family:inherit; text-align:left;
  font-size:12px; font-weight:500; padding:6px 11px; border-radius:999px; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.fideibot-chip:hover{ border-color:var(--gold, #A9812C); background:var(--gold-pale, #E8DCB8); }

/* Contact d'un conseiller : toujours offert, jamais enfoui dans une liste. */
.fideibot-human{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  margin:0 0 8px; padding:10px 14px;
  border:1px solid var(--gold, #A9812C); border-radius:999px;
  background:transparent; color:var(--gold, #A9812C);
  font-family:inherit; font-size:12.5px; font-weight:700; text-decoration:none;
  cursor:pointer; transition:background .14s ease, color .14s ease, transform .14s ease;
}
.fideibot-human:hover{ background:var(--gold, #A9812C); color:#fff; transform:translateY(-1px); }

/* ---- visiteur : une phrase, puis deux boutons de même largeur */
.fideibot-signup-hint{
  margin:10px 0 8px; font-size:11.5px; line-height:1.5;
  color:var(--muted, #66707D); text-align:center;
}
.fideibot-cta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* Action SEULE : pleine largeur, à l'aplomb du bouton « conseiller » juste
   au-dessus. Sans cela, elle n'occupait que la première colonne d'une grille
   pensée pour deux — d'où un bouton à demi-largeur, décalé. */
.fideibot-cta.one{ grid-template-columns:1fr; }
.fideibot-btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 12px; border-radius:999px; text-decoration:none;
  font-size:12.5px; font-weight:600; line-height:1.2; font-family:inherit;
  border:1px solid var(--border, #E4DFD2); background:var(--card, #fff);
  color:var(--title, #0B1B2B); cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.fideibot-btn:hover{ border-color:var(--gold, #A9812C); background:var(--gold-pale, #E8DCB8); }
.fideibot-btn.primary{
  background:linear-gradient(150deg, var(--navy, #0B1B2B) 0%, var(--navy-soft, #1B3049) 130%);
  border-color:transparent; color:#fff;
}
.fideibot-btn.primary:hover{ filter:brightness(1.12); color:#fff; }

/* ---- le visiteur se présente avant qu'on lui réponde ----
   Quatre champs au plus, dont deux sur une ligne : le pied de la bulle mesure
   moins de 200 px, un formulaire en colonne y aurait tout mangé. */
.fideibot-lead{ display:flex; flex-direction:column; gap:7px; }
.fideibot-lead-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fideibot-lead input{
  width:100%; min-width:0; height:38px; padding:0 13px;
  border:1px solid var(--border, #E4DFD2); border-radius:10px;
  /* 16px : en dessous, iOS zoome la page dès qu'un champ prend le focus. */
  font-family:inherit; font-size:16px;
  color:var(--ink, #1B2430); background:var(--ivory, #F6F2EA);
}
.fideibot-lead input:focus{ outline:none; border-color:var(--gold, #A9812C); background:var(--card, #fff); }
/* Pot de miel : hors écran, jamais display:none — certains automates ignorent
   les champs invisibles, ce qui viderait le piège. */
.fideibot-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; }
.fideibot-lead-err{ margin:0; font-size:11.5px; line-height:1.4; color:var(--danger, #7A2E2E); }
.fideibot-lead-note{ margin:0; font-size:10.5px; line-height:1.45; color:var(--muted, #66707D); text-align:center; }
.fideibot-lead-skip{
  border:none; background:none; cursor:pointer; padding:2px; font-family:inherit;
  font-size:11.5px; font-weight:600; color:var(--muted, #66707D); text-decoration:underline;
}
.fideibot-lead-skip:hover{ color:var(--gold, #A9812C); }

/* ---- client inscrit : il écrit directement dans la bulle */
.fideibot-composer{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.fideibot-composer input{
  flex:1; min-width:0; height:38px; padding:0 14px;
  border:1px solid var(--border, #E4DFD2); border-radius:999px;
  /* 16px obligatoire : en dessous, iOS zoome à l'ouverture du clavier et il
     faut dézoomer à la main pour atteindre le bouton d'envoi. */
  font-family:inherit; font-size:16px;
  color:var(--ink, #1B2430); background:var(--ivory, #F6F2EA);
}
.fideibot-composer input:focus{ outline:none; border-color:var(--gold, #A9812C); background:var(--card, #fff); }
.fideibot-composer button{
  width:38px; height:38px; flex-shrink:0; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy, #0B1B2B); color:#fff;
}
.fideibot-composer button svg{ width:17px; height:17px; }
.fideibot-composer button:hover{ background:var(--navy-soft, #1B3049); }

/* ============================================================
   TÉLÉPHONE
   La bulle remonte au-dessus de la barre de navigation du bas, et le panneau
   occupe la largeur utile sans jamais déborder. Le conteneur laisse passer les
   clics (pointer-events:none) : étendu sur toute la largeur, il aurait sinon
   masqué le contenu de la page derrière une zone morte invisible.
   ============================================================ */
@media (max-width:640px){
  .fideibot{
    right:14px; left:14px; bottom:calc(84px + env(safe-area-inset-bottom));
    pointer-events:none;
  }
  .fideibot-fab{ margin-left:auto; pointer-events:auto; }
  .fideibot-panel{
    position:fixed; right:14px; left:14px;
    bottom:calc(146px + env(safe-area-inset-bottom));
    width:auto; max-width:none; pointer-events:auto;
  }
  .fideibot-body{ max-height:38vh; }
  .fideibot-chips{ max-height:96px; }
}
/* Écran bas — téléphone couché : le panneau reste entièrement visible. */
@media (max-height:520px){
  .fideibot-body{ max-height:30vh; }
  .fideibot-chips{ max-height:60px; }
}
@media (prefers-reduced-motion:reduce){
  .fideibot-panel, .fideibot-msg{ animation:none; }
  .fideibot-fab{ transition:none; animation:none; }
}

/* ---- Fideibot = son profil personnalisé (reprise de 123Pozicky) ----
   Avatar robot : seul le FOND suit le badge du profil, le robot garde ses
   couleurs. Copie des règles de chat.css, que la vitrine ne charge pas.
   L'en-tête de la bulle est sombre : on y prend la version lumineuse. */
.fideibot .ava123{ --a-bg:var(--badge, #E0B84E); padding:0; overflow:hidden; border-radius:50%; background:var(--a-bg); box-shadow:0 0 0 1.5px rgba(255,255,255,.25); }
.fideibot .ava123-svg{ display:block; width:100%; height:100%; }
.fideibot .ava123-bg{ fill:var(--a-bg); }
.fideibot .ab-gold{ --badge:#E0B84E; }   .fideibot .ab-navy{ --badge:#7FA6D9; }
.fideibot .ab-green{ --badge:#5FBE90; }  .fideibot .ab-red{ --badge:#E08585; }
.fideibot .ab-blue{ --badge:#6FA8E8; }   .fideibot .ab-violet{ --badge:#A98BE0; }
.fideibot .ab-teal{ --badge:#4FC3CC; }   .fideibot .ab-copper{ --badge:#E99A62; }
.fideibot .ab-rose{ --badge:#E57BA8; }   .fideibot .ab-slate{ --badge:#9FB2C4; }
.fideibot .ab-amber{ --badge:#F2B544; }  .fideibot .ab-sun{ --badge:#E8D44D; }
.fideibot .ab-coral{ --badge:#F2896F; }  .fideibot .ab-plum{ --badge:#C77BA9; }
.fideibot .ab-indigo{ --badge:#8B8FE8; } .fideibot .ab-sky{ --badge:#7CC4EE; }
.fideibot .ab-mint{ --badge:#73D9BE; }   .fideibot .ab-olive{ --badge:#B3C46A; }
.fideibot .ab-forest{ --badge:#3FAF7E; } .fideibot .ab-bronze{ --badge:#CFA772; }
.fideibot .ab-sand{ --badge:#DCC8A2; }   .fideibot .ab-night{ --badge:#8E9AA6; }
.fideibot .ab-none{ --badge:#93A2B1; }
.fideibot-badge[class*="ab-"]{ color:var(--badge); }
.fideibot-badge[hidden]{ display:none; }
.fideibot-ava.ava123 svg{ width:100%; height:100%; }