/* ==========================================================================
   Bouton d'appel (click-to-call)

   Chargé uniquement quand le module est configuré (cf. layouts/main.php), donc
   aucun coût pour les visiteurs quand il est éteint.

   Le panneau est un bloc flottant en bas à droite, sans overlay ni piège de
   focus : c'est une offre, pas une interruption. Le visiteur doit pouvoir
   l'ignorer et continuer à lire la page — d'où `role="dialog"` SANS
   `aria-modal`, qui décrirait un blocage qui n'existe pas.
   ========================================================================== */

/* `hidden` doit l'emporter sur TOUTE règle de ce fichier.
   La règle du navigateur pour `[hidden]` est `display: none`, mais elle perd
   face au moindre sélecteur de classe qui fixe `display` — la spécificité
   d'une classe bat celle de la feuille par défaut. `.c2c__keys` fixe
   `display: flex` : le clavier s'affichait donc AVANT tout appel, et ses deux
   boutons ne faisaient rien, le gestionnaire DTMF abandonnant tant que
   l'iframe du téléphone est masquée (cf. `click-to-call.js`). Deux boutons
   morts sur une offre commerciale, sans le moindre message.
   Portée au widget, et `!important` pour qu'aucune règle ajoutée plus tard ne
   puisse réintroduire la même panne. */
.c2c [hidden] {
  display: none !important;
}

.c2c {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60; /* au-dessus du contenu, sous le bandeau de consentement */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.c2c__launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--leaf-500);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}

.c2c__launch:hover {
  background: var(--leaf-600);
}

/* Contour de focus visible : le widget est atteignable au clavier et sa
   pastille arrondie masquerait un outline par défaut trop discret. */
.c2c__launch:focus-visible,
.c2c__call:focus-visible,
.c2c__hangup:focus-visible,
.c2c__close:focus-visible {
  outline: 3px solid var(--sun-500);
  outline-offset: 2px;
}

.c2c__launch-icon {
  font-size: 1.1em;
}

.c2c__panel {
  position: relative;
  width: min(320px, calc(100vw - 32px));
  padding: 20px 18px 18px;
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 36px rgb(0 0 0 / 20%);
}

.c2c__close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--pine-900);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.c2c__status {
  margin: 0 0 10px;
  color: var(--leaf-600);
  font-size: 0.9rem;
}

.c2c__status:empty {
  display: none; /* pas de blanc résiduel quand il n'y a rien à annoncer */
}

.c2c__lead {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.c2c__next {
  margin: 0 0 12px;
  font-weight: 600;
}

.c2c__call,
.c2c__hangup {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.c2c__call {
  background: var(--leaf-500);
}

.c2c__call:disabled {
  background: var(--muted-on-dark);
  cursor: progress;
}

.c2c__hangup {
  background: var(--fr-red);
}

.c2c__tel {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--leaf-600);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.c2c__hours {
  margin: 0;
  color: #5a6b60;
  font-size: 0.85rem;
}

/* L'iframe porte l'audio, pas d'interface : elle reste hors flux visuel mais
   DOIT rester rendue — `display:none` suspend la lecture média dans plusieurs
   navigateurs, et l'appel deviendrait muet. */
.c2c__phone {
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .c2c__panel {
    animation: c2c-rise 160ms ease-out;
  }
}

@keyframes c2c-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 480px) {
  .c2c {
    right: 12px;
    bottom: 12px;
  }
}

/* In-call keypad. A browser has no handset keys, so the after-hours menu
   ("tapez 1 / tapez 2") is unreachable without these — the call would be a
   dead end. Shown only while a call is up. */
.c2c__keys {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c2c__keys-hint {
  margin: 0;
  color: #5a6b60;
  font-size: 0.85rem;
}

.c2c__key {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--leaf-500);
  border-radius: 10px;
  background: #fff;
  color: var(--leaf-600);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.c2c__key:hover {
  background: var(--leaf-500);
  color: #fff;
}

.c2c__key:focus-visible {
  outline: 3px solid var(--sun-500);
  outline-offset: 2px;
}

/* Filet de séparation : au-dessus le MENU (deux actions), en dessous la SAISIE
   (un outil). Sans lui, quatorze boutons se lisent comme une seule liste. */
.c2c__keys-hint--sep {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e4ebe7;
}

/* Le pavé numérique. Les deux raccourcis ci-dessus couvrent le MENU ; celui-ci
   couvre la SAISIE — `[reglo-c2c-cb]` demande le numéro de rappel chiffre par
   chiffre et se termine par `#`. Même disposition 3×4 que le pavé de l'agent
   (`ActiveCall.tsx`) : c'est l'ordre d'un téléphone et non celui d'un pavé
   d'ordinateur, et le visiteur y trouve ses chiffres sans y penser.

   HIÉRARCHIE : les deux raccourcis sont les actions, le pavé est l'outil. D'où
   des touches NEUTRES ici — douze boutons cerclés de vert crieraient aussi fort
   que « Être rappelé » et le panneau n'aurait plus de point d'entrée. Le vert
   ne revient qu'au survol et sur la touche de validation. */
.c2c__dtmf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 4px;
}

/* 46 px : au-dessus de la cible tactile minimale. En dessous, dix chiffres
   saisis au pouce produisent des fautes de frappe que rien ne rattrape — une
   tonalité émise ne se reprend pas. */
.c2c__dtmf-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 6px 4px;
  border: 1px solid #dde5e0;
  border-radius: 12px;
  background: #fff;
  color: var(--leaf-600);
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.c2c__dtmf-digit {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Les lettres d'un cadran : muettes pour l'assistance vocale (`aria-hidden`
   dans le partiel), décisives pour l'œil — c'est ce détail qui fait reconnaître
   un téléphone au premier regard. `min-height` garde les douze touches de la
   même hauteur quand la ligne est vide (1, *). */
.c2c__dtmf-letters {
  min-height: 0.7em;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #93a49b;
}

.c2c__dtmf-key:hover {
  background: #f2f8f5;
  border-color: var(--leaf-500);
}

.c2c__dtmf-key:active {
  background: var(--leaf-500);
  border-color: var(--leaf-500);
  color: #fff;
}

.c2c__dtmf-key:active .c2c__dtmf-letters {
  color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
  .c2c__dtmf-key:active {
    transform: scale(0.96);
  }
}

.c2c__dtmf-key:focus-visible {
  outline: 3px solid var(--sun-500);
  outline-offset: 2px;
}

/* La touche qui TERMINE la saisie. `Read` ne rend la main qu'au terminateur (ou
   au bout du délai) : c'est donc la seule touche du pavé qui soit une action,
   et elle se signale comme telle. */
.c2c__dtmf-key--send {
  border-color: var(--leaf-500);
  background: #f2f8f5;
}

/* L'écho des tonalités : un afficheur, pas une ligne de texte. Encadré et
   tabulaire, il se lit d'un coup d'œil pendant qu'on parle — c'est là que le
   visiteur vérifie son propre numéro. `word-break` parce qu'un numéro
   international de quinze chiffres ne doit pas élargir le panneau. */
.c2c__digits {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f7f5;
  border: 1px solid #e4ebe7;
  word-break: break-all;
}

.c2c__digits-label {
  display: block;
  margin-bottom: 2px;
  color: #7d8f85;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.c2c__digits-value {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--leaf-600);
}