/* =====================================================================
   L'APPEL DANS LA FENETRE DU SUPPORT
   ---------------------------------------------------------------------
   On reprend les variables du support (--sup-fond, --sup-texte), qui
   suivent elles-memes la couleur d'accent reglee dans Parametres du
   site. Changer la charte du site changera aussi ce bouton, sans qu'on
   ait rien a retoucher ici.
   ===================================================================== */

.sup-appel-zone {
    padding: 8px 12px 0;
}

/* ---------------------------------------------------------------------
   LE BOUTON D'ENTREE — DANS LA MEME FAMILLE QUE SES VOISINS
   ---------------------------------------------------------------------
   Il vit juste sous « Conseiller WhatsApp » et « Appeler », qui sont
   doux et teintes. Lui etait un bloc plein en 15 px gras : il ecrasait
   la rangee. Un bouton qui crie plus fort que ses voisins ne parait pas
   plus important — il parait etranger.

   Il reste PRINCIPAL : plein, vert, pleine largeur. Mais a la meme
   echelle qu'eux. La difference se joue sur le remplissage et une ombre
   discrete, pas sur la taille.
   --------------------------------------------------------------------- */
.sup-appel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;                    /* la taille d'un pouce */
    padding: 8px 14px;
    border: 0;
    border-radius: 9px;
    background: #2e9b4f;                 /* le vert du telephone : on decroche */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(20, 80, 45, .28);
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
    -webkit-tap-highlight-color: transparent;
}

/* CE QUI VA SE PASSER, SOUS LE NOM DU BOUTON.
   « Appeler le support » ne dit pas ce que cela coute. Un client
   hesite devant un bouton dont il ignore le prix : va-t-on lui
   prendre ses minutes ? Trois mots levent le doute — et un doute
   leve, c'est un appel de plus. */
.sup-appel-sous {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    opacity: .82;
}

.sup-appel:hover {
    background: #278744;
    box-shadow: 0 2px 7px rgba(20, 80, 45, .34);
}
.sup-appel:active { transform: scale(.985); }
.sup-appel:focus-visible { outline: 3px solid rgba(46,155,79,.35); outline-offset: 2px; }


/* ---------------------------------------------------------------------
   LE PANNEAU D'APPEL — une seule chose visible a la fois
   --------------------------------------------------------------------- */
.sup-appel-panneau {
    padding: 16px 14px;
    text-align: center;
    border-top: 1px solid #eee;
    background: #f7fbf8;
}

.sup-appel-etat {
    font-size: 15px;
    font-weight: 600;
    color: #17233a;
    min-height: 22px;
}

/* La pastille d'etat, en couleur ET en mots : la couleur seule ne dit
   rien a qui ne la distingue pas. */
.sup-appel-etat::before {
    content: '';
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    background: #b7b7b7;
    vertical-align: middle;
}
.sup-appel-panneau[data-etat="parle"]       .sup-appel-etat::before { background: #2e9b4f; }
.sup-appel-panneau[data-etat="sonne"]       .sup-appel-etat::before { background: #2e9b4f; animation: supbat 1s infinite; }
.sup-appel-panneau[data-etat="attente"]     .sup-appel-etat::before { background: #e0a800; }
.sup-appel-panneau[data-etat="recherche"]   .sup-appel-etat::before { background: #e0a800; }
.sup-appel-panneau[data-etat="faible"]      .sup-appel-etat::before { background: #e0a800; }
.sup-appel-panneau[data-etat="reconnexion"] .sup-appel-etat::before { background: #e0a800; animation: supbat 1s infinite; }
.sup-appel-panneau[data-etat="fini"]        .sup-appel-etat::before { background: #b7b7b7; }

@keyframes supbat { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    .sup-appel-panneau .sup-appel-etat::before { animation: none !important; }
}

.sup-appel-duree {
    font-size: 30px;
    font-weight: 700;
    color: #0b5db0;
    font-variant-numeric: tabular-nums;   /* les chiffres ne dansent pas */
    margin: 8px 0 4px;
}

.sup-appel-avis {
    font-size: 13px;
    color: #8a6d3b;
    min-height: 18px;
    margin-bottom: 6px;
}

.sup-appel-boutons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.sup-appel-boutons button {
    padding: 10px 18px;
    border: 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.sup-appel-micro { background: #e8eef5; color: #17233a; }
.sup-appel-micro[data-coupe="1"] { background: #c0392b; color: #fff; }
.sup-appel-fin   { background: #c0392b; color: #fff; }


/* ---------------------------------------------------------------------
   LA DEMANDE DE RAPPEL
   --------------------------------------------------------------------- */
.sup-appel-rappel {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e6e6e6;
    text-align: left;
}

.sup-appel-rappel p {
    font-size: 13px;
    color: #555;
    margin: 0 0 8px;
}

.sup-appel-rappel input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    font-family: inherit;
    /* SEIZE PIXELS, ET PAS UN DE MOINS.
       J'avais ecrit ici « 15 px au moins » : c'etait faux, et 15 px
       zoomait donc encore. Le seuil de l'iPhone est bien 16. En
       dessous, il agrandit la page des qu'on touche le champ, et tout
       le cote droit du panneau sort de l'ecran. */
    font-size: 16px;
}

.sup-appel-rappel button {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 8px;
    background: var(--sup-fond, #f9c846);
    color: var(--sup-texte, #17233a);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}


/* ---------------------------------------------------------------------
   LES DEUX NIVEAUX SONORES
   ---------------------------------------------------------------------
   « On decroche et on n'entend rien » peut vouloir dire deux choses
   opposees : mon micro ne capte rien, ou le son de l'autre n'arrive
   pas. Ces deux barres tranchent d'un coup d'oeil, sans qu'on ait a
   deviner.
   --------------------------------------------------------------------- */
.sup-appel-niveaux {
    margin: 10px 0 4px;
    text-align: left;
}

.sup-niv {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
    font-size: 12px;
    color: #555;
}

.sup-niv span {
    flex: 0 0 108px;
}

/* La gouttiere, puis le remplissage. */
.sup-niv i {
    flex: 1 1 auto;
    display: block;
    height: 8px;
    border-radius: 4px;
    background: #e4e8ec;
    overflow: hidden;
}

.sup-niv b {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #2e9b4f;
    /* Le remplissage monte vite et redescend doucement : sinon la barre
       clignote a chaque syllabe et devient illisible. */
    transition: width .12s ease-out;
}

/* L'avertissement de la boucle micro / haut-parleur. Sans ecouteurs,
   le micro reprend ce que joue le haut-parleur : l'autre s'entend
   lui-meme, et la boucle s'emballe en un bruit. */
.sup-appel-boucle {
    margin: 8px 0;
    padding: 9px 12px;
    border-radius: 8px;
    background: #fdecea;
    border: 1px solid #f0c2bc;
    color: #7d2018;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* ---------------------------------------------------------------------
   LE MODE SUPPORT VOCAL
   ---------------------------------------------------------------------
   Le client parle au support avant qu'on derange un conseiller. Le
   bouton « Parler a un conseiller » reste toujours visible : on ne
   piege personne dans une machine.
   --------------------------------------------------------------------- */
.sup-mode-support {
    padding: 12px 14px;
    border-top: 1px solid #eee;
    background: #f7fbf8;
    text-align: center;
}

.sup-mode-titre {
    font-size: 15px;
    font-weight: 700;
    color: #17233a;
    margin-bottom: 4px;
}

.sup-mode-aide {
    font-size: 13px;
    color: #6b7a89;
    line-height: 1.5;
    margin-bottom: 10px;
}

.sup-mode-boutons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.sup-mode-boutons button {
    padding: 9px 15px;
    border: 0;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

#supVersAgent   { background: #0b5db0; color: #fff; }
#supFinSupport  { background: #e8eef5; color: #17233a; }

/* =====================================================================
   LES DEUX ACTIONS DE L'ACCUEIL VOCAL
   ---------------------------------------------------------------------
   Elles vivent sous la conversation, dans la ligne d'etat. Deux regles
   les gouvernent :

     - QUARANTE-DEUX PIXELS DE HAUT au minimum. C'est la taille d'un
       pouce sur un telephone. En dessous, on vise et on rate.
     - UNE SEULE EST PLEINE. « Parler a un conseiller » est l'action
       qu'on espere ; « Terminer » est celle qu'on subit. Les mettre au
       meme rang, c'est inviter a partir autant qu'a rester.
   ===================================================================== */
.sup-mode-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.sup-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}

/* L'action attendue : pleine, dans le vert du module. */
.sup-mode-btn.principal {
  flex: 1 1 190px;
  background: #2e9b4f;
  color: #fff;
}
.sup-mode-btn.principal:hover  { background: #278744; }
.sup-mode-btn.principal:active { transform: scale(.98); }

/* La sortie : un simple contour. Presente, jamais tentante. */
.sup-mode-btn.discret {
  flex: 0 0 auto;
  background: transparent;
  color: #5a6478;
  border-color: #cfd8dd;
}
.sup-mode-btn.discret:hover  { background: #eef2f4; border-color: #b9c4cb; }
.sup-mode-btn.discret:active { transform: scale(.98); }

/* Le clavier compte autant que le doigt. */
.sup-mode-btn:focus-visible {
  outline: 3px solid rgba(46, 155, 79, .45);
  outline-offset: 2px;
}

/* Sur les ecrans etroits, le bouton principal prend toute la largeur
   et « Terminer » passe dessous : deux boutons serres cote a cote sur
   un telephone, on appuie sur le mauvais. */
@media (max-width: 380px) {
  .sup-mode-btn.principal,
  .sup-mode-btn.discret { flex: 1 1 100%; }
}