/* =====================================================================
   AUTO ÉCOLE DONIA — SUPPORT CLIENT
   Feuille de style du widget de discussion.

   Fichier séparé, volontairement : la feuille principale du site n'est
   pas touchée. Les couleurs reprennent les variables du thème
   (--primaire, --accent…) définies par l'administration, donc le widget
   suit automatiquement l'habillage du site.
   ===================================================================== */

/* ---------------------------------------------------------------------
   COULEUR DU SUPPORT
   ---------------------------------------------------------------------
   Le support reprend la couleur d'accent du site — le jaune — au lieu
   du bleu principal. Elle n'est pas écrite en dur : elle vient de
   Administration → Paramètres du site → « Couleur accent ». Changez-la
   là-bas, le support suivra, comme le reste du site.

   Sur un fond jaune, le texte doit être SOMBRE : du blanc sur du jaune
   ne se lit pas. D'où la seconde variable.
   --------------------------------------------------------------------- */
:root{
  --sup-fond:  var(--accent, #f0a500);
  --sup-texte: #17233a;
}

/* ---------------- Bouton flottant ---------------- */
.sup-bouton{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border:0;cursor:pointer;
  border-radius:100px;color:var(--sup-texte);font-weight:700;font-size:.88rem;
  font-family:inherit;
  background:var(--sup-fond);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  transition:transform .2s;
}
.sup-bouton:hover{transform:scale(1.05);}
.sup-bouton .sup-ico{font-size:1.05rem;line-height:1;}

/* Pastille rouge quand le support a répondu pendant que le panneau
   était fermé. */
.sup-bouton .sup-pastille{
  display:none;
  min-width:18px;height:18px;line-height:18px;
  border-radius:9px;background:var(--secondaire,#d32f2f);
  color:#fff;font-size:.7rem;text-align:center;padding:0 5px;
}
.sup-bouton.a-du-neuf .sup-pastille{display:inline-block;}

/* ---------------- Panneau ---------------- */
.sup-panneau{
  position:fixed;right:18px;bottom:18px;z-index:960;
  width:370px;max-width:calc(100vw - 24px);
  height:520px;max-height:calc(100vh - 90px);
  display:none;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  font-size:.92rem;
}
.sup-panneau.ouvert{display:flex;}

/* CHAQUE BANDE DU PANNEAU PEUT RETRECIR.
   Un element flex refuse par defaut de descendre sous la largeur de son
   contenu (min-width:auto). Une seule ligne de texte un peu longue —
   « Gratuit, par Internet — sans quitter le site », par exemple — et
   toute la bande deborde du panneau, emportant avec elle les boutons
   qui se trouvent a sa droite. Cette ligne l'interdit une fois pour
   toutes, pour tout ce que le panneau contient aujourd'hui et
   contiendra demain. */
.sup-panneau > *{min-width:0;max-width:100%;}

.sup-entete{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;color:var(--sup-texte);
  background:var(--sup-fond);
}
.sup-entete .sup-titre{font-weight:700;font-size:1rem;line-height:1.2;}
.sup-entete .sup-sous{font-size:.76rem;opacity:.85;}
.sup-entete .sup-fermer{
  margin-left:auto;background:transparent;border:0;color:var(--sup-texte);
  font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;opacity:.85;
}
.sup-entete .sup-fermer:hover{opacity:1;}

/* min-height:0 est indispensable. Sans lui, un enfant de flexbox
   refuse de descendre sous la taille de son contenu : la zone de
   lecture gardait sa hauteur, le bloc du micro la poussait hors du
   panneau, et les trois points dattente disparaissaient dessous. */
.sup-fil{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;background:#f4f6fa;
  display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
}

.sup-bulle{
  max-width:88%;padding:10px 13px;border-radius:14px;
  line-height:1.5;white-space:pre-wrap;word-wrap:break-word;
}
.sup-bulle-support{
  align-self:flex-start;background:#fff;color:#1b2333;
  border-bottom-left-radius:5px;
  box-shadow:0 2px 8px rgba(13,44,84,.10);
}
.sup-bulle-client{
  align-self:flex-end;color:var(--sup-texte);
  background:var(--sup-fond);
  border-bottom-right-radius:5px;
}
.sup-heure{display:block;margin-top:5px;font-size:.68rem;opacity:.6;}

.sup-attente{
  align-self:flex-start;display:flex;gap:4px;padding:12px 14px;
  background:#fff;border-radius:14px;border-bottom-left-radius:5px;
}
.sup-attente span{
  width:7px;height:7px;border-radius:50%;background:#b7c0d0;
  animation:sup-rebond 1.1s infinite;
}
.sup-attente span:nth-child(2){animation-delay:.15s;}
.sup-attente span:nth-child(3){animation-delay:.3s;}
@keyframes sup-rebond{
  0%,60%,100%{transform:translateY(0);opacity:.5;}
  30%{transform:translateY(-5px);opacity:1;}
}

/* Suggestions de départ */
.sup-pistes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.sup-piste{
  background:#fff;border:1px solid #d8dfea;color:#17233a;
  border-radius:100px;padding:6px 12px;font-size:.8rem;cursor:pointer;
  font-family:inherit;
}
.sup-piste:hover{background:var(--sup-fond);color:var(--sup-texte);border-color:transparent;}

/* Lien vers une rubrique du site : même forme que les suggestions,
   mais reconnaissable au premier coup d'oeil. */
.sup-lien{
  text-decoration:none;
  background:var(--sup-fond);
  color:var(--sup-texte);border-color:transparent;font-weight:600;
}
.sup-lien:hover{filter:brightness(1.15);}

/* Escalade vers un humain */
.sup-humain{
  display:flex;gap:8px;padding:8px 14px;background:#fff;
  border-top:1px solid #e6eaf2;min-width:0;
}
.sup-humain a{
  flex:1 1 0;min-width:0;            /* deux parts egales, qui retrecissent */
  text-align:center;padding:8px 6px;border-radius:8px;
  font-size:.78rem;font-weight:600;text-decoration:none;
  /* Un libelle trop long revient a la ligne au lieu de deborder. */
  overflow-wrap:break-word;
  display:flex;align-items:center;justify-content:center;
  min-height:38px;line-height:1.25;
}
.sup-humain .sup-wa{background:#e8f8ee;color:#128c4a;}
.sup-humain .sup-tel{background:#fdeaea;color:var(--secondaire,#d32f2f);}

/* Saisie */
.sup-saisie{
  display:flex;gap:8px;padding:10px 12px;background:#fff;
  border-top:1px solid #e6eaf2;
  /* Un element flex refuse par defaut de retrecir en dessous de la
     largeur de son contenu (min-width:auto). Sans cette ligne, un mot
     long pousse la rangee hors du panneau et le bouton d'envoi sort de
     l'ecran. C'est vrai de chaque bande du panneau, voir plus bas. */
  min-width:0;
}
.sup-saisie textarea{
  flex:1 1 auto;min-width:0;         /* il retrecit, le bouton reste visible */
  resize:none;border:1px solid #d8dfea;border-radius:10px;
  padding:9px 12px;font-family:inherit;line-height:1.4;
  max-height:90px;color:#1b2333;background:#fff;

  /* SEIZE PIXELS, ET PAS UN DE MOINS.
     En dessous de 16 px, l'iPhone ZOOME la page des qu'on touche le
     champ. La page grossit, le panneau devient plus large que l'ecran,
     et tout le cote droit disparait : le bouton d'envoi, le bouton
     « Appeler », la note du bas. C'est exactement ce qui se voyait.
     Le seuil est bien 16, pas 15. */
  font-size:16px;
}
.sup-saisie textarea:focus{outline:2px solid var(--sup-fond);outline-offset:-1px;}
.sup-saisie button{
  flex:0 0 auto;                     /* il ne retrecit jamais */
  min-width:46px;min-height:44px;    /* la taille d'un pouce */
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:10px;cursor:pointer;padding:0 15px;
  background:var(--sup-fond);color:var(--sup-texte);font-size:1.05rem;
  font-family:inherit;
}
.sup-saisie button:disabled{opacity:.5;cursor:default;}

.sup-note{
  padding:6px 14px 10px;font-size:.7rem;color:#8a93a5;
  background:#fff;text-align:center;
}

/* ---------------- Téléphone ----------------
   Le panneau ne prend pas tout l'écran : le visiteur garde le site
   sous les yeux et peut refermer d'un geste. */
@media (max-width:600px){
  .sup-panneau{
    right:10px;left:10px;width:auto;
    border-radius:14px;

    /* LA BARRE DU BAS DE L'IPHONE.
       Les telephones sans bouton d'accueil gardent une barre en bas de
       l'ecran. Sans cette marge, le bas du panneau passe dessous et la
       note devient illisible. env() vaut zero sur les appareils qui
       n'en ont pas : aucun risque ailleurs. */
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));

    /* LE CLAVIER.
       « vh » ne bouge pas quand le clavier s'ouvre : le panneau garde
       sa hauteur et sa moitie basse passe SOUS le clavier. « dvh »
       suit la zone reellement visible. La ligne en vh reste au-dessus
       pour les navigateurs qui ne connaissent pas encore dvh : ils
       lisent la premiere, les autres la seconde. */
    height:70vh;      max-height:calc(100vh - 80px);
    height:70dvh;     max-height:calc(100dvh - 80px);
  }
  .sup-bouton{padding:11px 15px;font-size:.83rem;}
  .sup-fil{padding:12px;}
  .sup-bulle{max-width:92%;}

  /* Sur un petit ecran, deux boutons cote a cote deviennent illisibles
     des que le libelle s'allonge : on les met l'un sous l'autre. */
  .sup-humain{flex-wrap:wrap;}
  .sup-humain a{flex:1 1 130px;}
}

/* Quand le menu mobile du site est ouvert, le widget s'efface pour ne
   pas passer par-dessus, comme les autres boutons flottants. */
body.menu-ouvert .sup-panneau,
body.menu-ouvert .sup-bouton{display:none;}

/* Lien écrit dans le corps d'une réponse (itinéraire, page externe).
   Discret, souligné, et il revient à la ligne au lieu de déborder de
   la bulle sur les petits écrans. */
.sup-lien-texte{
  color:#0d2c54;font-weight:600;text-decoration:underline;
  word-break:break-word;
}
.sup-bulle-client .sup-lien-texte{color:inherit;}
.sup-lien-texte:hover{opacity:.75;}

/* =====================================================================
   SUPPORT VOCAL
   ---------------------------------------------------------------------
   Le micro est l'action principale, seul et centré : beaucoup de nos
   clients ne savent pas écrire, et le clavier les arrête net. Le champ
   de saisie reste dessous, intact, pour ceux qui préfèrent taper.
   ===================================================================== */
/* L attribut hidden doit l emporter sur display:flex. Sans cette
   ligne, le bloc restait visible meme quand le navigateur ne sait
   pas ecouter — un bouton qui ne repondait a rien. */
.sup-voix[hidden]{display:none !important;}
/* Le micro garde sa taille, il ne prend jamais la place de la
   conversation. */
.sup-voix{flex:0 0 auto;}
.sup-voix{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 14px 12px;border-top:1px solid #eef1f6;background:#fff;
}

.sup-micro{
  width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;
  background:var(--sup-fond);color:var(--sup-texte);
  box-shadow:0 6px 18px rgba(13,44,84,.18);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.sup-micro:active{transform:scale(.94);}
.sup-micro-ico{font-size:2rem;line-height:1;}

/* En écoute : le bouton respire, pour qu'on voie sans lire. */
.sup-voix.ecoute .sup-micro{
  background:#c8102e;color:#fff;
  animation:sup-pulse 1.25s ease-in-out infinite;
}
@keyframes sup-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.45);}
  50%    {box-shadow:0 0 0 16px rgba(200,16,46,0);}
}
.sup-voix.parle .sup-micro{background:#128c4a;color:#fff;}
.sup-voix.pause .sup-micro{background:#7a8397;color:#fff;}

.sup-voix-etat{
  font-size:.92rem;color:#5a6478;text-align:center;line-height:1.4;
  min-height:1.3em;max-width:270px;
}
.sup-voix.ecoute .sup-voix-etat{color:#c8102e;font-weight:600;}
.sup-voix.parle  .sup-voix-etat{color:#128c4a;font-weight:600;}
.sup-voix.muet   .sup-voix-etat{color:#c8102e;}

/* Meme garde que pour le bloc du micro : sans elle, display:flex
   l emporte sur l attribut hidden et les deux boutons restent
   affiches sous un message d erreur, sans rien commander. */
.sup-voix-boutons[hidden]{display:none !important;}
.sup-voix-boutons{display:flex;gap:8px;}
.sup-vbtn{
  border:1px solid var(--bordure,#e2e7f0);background:#fff;color:#1b2333;
  border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:600;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.sup-vbtn:active{background:#f4f6fa;}

/* Le haut-parleur posé sur chaque réponse : il sert aussi à ceux qui
   ont écrit leur question. */
.sup-ecouter{
  display:inline-block;margin-left:8px;vertical-align:middle;
  border:0;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;padding:2px 4px;opacity:.55;
}
.sup-ecouter:hover{opacity:1;}

/* Sur téléphone, le micro prend toute la largeur du regard. */
@media (max-width:600px){
  .sup-micro{width:88px;height:88px;}
  .sup-micro-ico{font-size:2.3rem;}
  .sup-voix{padding:18px 14px 14px;}
}

/* Le détail technique sous un message d'erreur. Discret : il ne
   s'adresse pas au client, il s'adresse à celui qui dépanne. */
.sup-detail{
  font-size:.68rem;color:#98a1b3;text-align:center;
  margin-top:2px;word-break:break-word;max-width:280px;
}

/* La porte de sortie quand le navigateur refuse d'écouter : le micro du
   clavier du téléphone, qui lui fonctionne toujours. */
.sup-secours{
  margin-top:4px;border:1px solid var(--sup-fond);
  background:#fff;color:#1b2333;
  border-radius:999px;padding:10px 18px;
  font-size:.88rem;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sup-secours:active{background:var(--sup-fond);}