/* Assistant du site — feuille dediee.
   Volontairement SEPAREE de revamp.css : elle n'est chargee que si la bulle
   existe, et revamp.css fait deja 95 Ko.
   Les couleurs viennent des variables du theme (revamp.css est charge avant),
   avec un repli si la feuille manquait. */

.ov-assist{position:fixed;right:20px;bottom:20px;z-index:80;font-family:inherit}

/* --- La bulle ----------------------------------------------------- */
.ov-assist__bulle{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold-600,#f07c1a),var(--gold-500,#ff9b3f));
  color:#fff;font:700 .95rem/1 Inter,system-ui,sans-serif;
  box-shadow:0 14px 34px rgba(240,124,26,.34);
  transition:transform .16s ease,box-shadow .16s ease;
}
.ov-assist__bulle:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(240,124,26,.42)}
.ov-assist__bulle-ico{display:grid;place-items:center}
.ov-assist.is-ouvert .ov-assist__bulle{display:none}

/* --- Le panneau --------------------------------------------------- */
.ov-assist__panneau{
  display:flex;flex-direction:column;
  width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));
  background:#fff;border:1px solid var(--line,#f1ede2);border-radius:22px;
  box-shadow:0 30px 80px rgba(8,8,10,.22);overflow:hidden;
}
.ov-assist__panneau[hidden]{display:none}

.ov-assist__tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 16px 14px;
  background:linear-gradient(135deg,var(--brand-950,#0a0a0c),#1d1d22);color:#fff;
}
.ov-assist__tete-txt{display:grid;gap:3px}
.ov-assist__tete strong{font-size:1rem}
.ov-assist__tete small{color:rgba(255,255,255,.7);font-size:.76rem;line-height:1.35}
.ov-assist__fermer{
  flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;line-height:1;
}
.ov-assist__fermer:hover{background:rgba(255,255,255,.22)}

.ov-assist__fil{flex:1 1 auto;overflow-y:auto;padding:16px;display:grid;gap:12px;align-content:start}
.ov-assist__msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.55}
.ov-assist__msg p{margin:0}
.ov-assist__msg p + p{margin-top:8px}
.ov-assist__msg--bot{justify-self:start;background:var(--cream-100,#f8f6f0);border:1px solid var(--line,#f1ede2);color:var(--text-950,#131316);border-bottom-left-radius:6px}
.ov-assist__msg--moi{justify-self:end;background:var(--brand-950,#0a0a0c);color:#fff;border-bottom-right-radius:6px}
.ov-assist__msg a{color:var(--gold-600,#f07c1a);font-weight:600}

/* Trois points pendant l'attente. */
.ov-assist__msg--attente{display:flex;gap:5px;align-items:center;padding:14px}
.ov-assist__msg--attente span{width:6px;height:6px;border-radius:50%;background:var(--text-500,#71837d);animation:ov-assist-point 1.1s infinite ease-in-out}
.ov-assist__msg--attente span:nth-child(2){animation-delay:.15s}
.ov-assist__msg--attente span:nth-child(3){animation-delay:.3s}
@keyframes ov-assist-point{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ov-assist__suggestions{display:grid;gap:7px;justify-items:start}
.ov-assist__suggestions button{
  border:1px solid var(--line,#f1ede2);background:#fff;border-radius:999px;
  padding:7px 13px;font:600 .82rem/1.3 inherit;color:var(--text-700,#415b53);
  cursor:pointer;text-align:left;transition:border-color .14s,color .14s;
}
.ov-assist__suggestions button:hover{border-color:var(--gold-300,#ffb26b);color:var(--text-950,#131316)}

.ov-assist__avis{
  margin:0;padding:9px 16px;font-size:.72rem;line-height:1.45;
  color:var(--text-500,#71837d);background:var(--cream-100,#f8f6f0);
  border-top:1px solid var(--line,#f1ede2);
}

.ov-assist__form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line,#f1ede2)}
.ov-assist__form input{
  flex:1 1 auto;min-width:0;border:1px solid var(--line,#f1ede2);border-radius:999px;
  padding:11px 15px;font:400 .92rem/1.2 inherit;color:var(--text-950,#131316);background:#fff;
}
.ov-assist__form input:focus{outline:2px solid var(--gold-300,#ffb26b);outline-offset:1px}
.ov-assist__form button{
  flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--gold-600,#f07c1a);color:#fff;display:grid;place-items:center;
}
.ov-assist__form button:disabled{opacity:.5;cursor:default}

.ov-assist__pied{margin:0;padding:0 16px 12px;font-size:.75rem;color:var(--text-500,#71837d)}
.ov-assist__pied a{color:var(--gold-600,#f07c1a);font-weight:600}

.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}

/* --- Telephone ---------------------------------------------------- */
@media(max-width:620px){
  .ov-assist{right:12px;left:12px;bottom:14px}
  .ov-assist__bulle{position:absolute;right:0;bottom:0}
  .ov-assist__panneau{width:100%;height:min(74vh,560px)}
  /* La barre « Dès 149 € » de l'accueil est fixee en bas d'ecran : la bulle
     se pose AU-DESSUS, sinon elle recouvre le bouton de commande. */
  body.ov-home .ov-assist{bottom:76px}
}

@media(prefers-reduced-motion:reduce){
  .ov-assist__bulle{transition:none}
  .ov-assist__msg--attente span{animation:none}
}

/* --- Effet machine a ecrire ---------------------------------------
   La reponse est recue ENTIERE et deja controlee par le serveur ; elle
   n'est que devoilee lettre par lettre. Voir le commentaire de ecrire()
   dans js/assistant.js : ce n'est pas du direct, et ce ne doit pas le
   devenir sans deplacer les garde-fous. */
.ov-assist__msg.is-ecrit p{min-height:1.55em}
.ov-assist__msg.is-ecrit p:last-child::after{
  content:"";display:inline-block;width:2px;height:1em;margin-left:2px;
  vertical-align:-.15em;background:var(--gold-600,#f07c1a);
  animation:ov-assist-curseur .8s steps(1) infinite;
}
@keyframes ov-assist-curseur{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .ov-assist__msg.is-ecrit p:last-child::after{display:none}
}

/* --- Reponse ecrite par une personne -------------------------------
   Elle doit se distinguer du robot au premier coup d'oeil : le visiteur a
   le droit de savoir a qui il parle. */
.ov-assist__msg--humain{
  justify-self:start;background:#eaf3ef;border:1px solid #cfe4d9;
  color:var(--text-950,#131316);border-bottom-left-radius:6px;
}
.ov-assist__qui{
  display:block;margin-bottom:4px;
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--success,#208b68);
}

.ov-assist__humain{
  border:0;background:none;padding:0;cursor:pointer;
  font:700 .75rem/1.4 inherit;color:var(--gold-600,#f07c1a);text-decoration:underline;
  text-underline-offset:2px;
}
.ov-assist__humain:hover{color:var(--text-950,#131316)}
