/* Pilotage des appels · styles du module « Téléphone du PC » (telephone.js), bouton « Passer un appel » de la barre d'actions.
   Jetons et composants de la refonte : app.css ; contrat du socle : specs/front-v2.md.
   Version 3 : on appelle « depuis la ligne de » une agence ; le numéro que verra le client est affiché en clair.
   Panneau non modal : carte blanche bordée posée en bas à gauche du contenu, contre la barre latérale (loin des volets de droite,
   du bouton de Léa et des toasts) ; sous 900 px, feuille du bas sous la barre du haut. Empilement : panneau 46 (volets 45, toasts 50).
   Contrastes (WCAG 2.x) : Appeler blanc sur #0B7A55 5,3:1 ; Raccrocher blanc sur #D92D20 4,8:1 ; libellés secondaires ≥ 5:1. */

/* ===== Bouton « Passer un appel » de la barre d'actions (verre blanc), sur sa propre rangée dans la barre latérale ===== */
.m-telephone-action {
  position: relative; flex: 1 1 100%; display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  height: 44px; padding: 0 14px 0 9px; border: 1px solid var(--contour-carte); border-radius: 12px; cursor: pointer;
  background: var(--surface); color: var(--texte); font: 650 0.9375rem/1 var(--police); letter-spacing: -0.006em; text-align: left;
  box-shadow: 0 1px 2px rgba(33, 60, 160, .05);
  transition: background-color var(--d-rapide) var(--c-standard), border-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
@media (hover: hover) { .m-telephone-action:hover { background: #F5FBF8; border-color: rgba(11, 122, 85, .32); } }
.m-telephone-action:active { transform: scale(.98); }
/* Panneau ouvert : le bouton reste allumé */
.m-telephone-action[aria-expanded="true"] { background: #F1FAF6; border-color: rgba(11, 122, 85, .40); }
.m-telephone-action-icone {
  position: relative; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--vert-texte); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px -2px rgba(11, 122, 85, .45);
}
.m-telephone-action-icone svg { width: 14px; height: 14px; }
.m-telephone-action-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-telephone-action-puce { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vert-texte); font-variant-numeric: tabular-nums; }
/* En appel : l'icône bat en vert et l'état (ou le chronomètre) prend la place du libellé ; le nom accessible dit « appel en cours » */
.m-telephone-action.m-telephone-en-appel { border-color: rgba(11, 122, 85, .45); background: var(--vert-pale); }
.m-telephone-action.m-telephone-en-appel .m-telephone-action-libelle { display: none; }
.m-telephone-action.m-telephone-en-appel .m-telephone-action-icone { background: var(--vert); }
.m-telephone-action.m-telephone-en-appel .m-telephone-action-icone::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: m-telephone-onde 1.8s var(--c-sortie) infinite; }
@keyframes m-telephone-onde { from { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } to { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
/* Téléphone non activé : bouton discret (contour pointillé, icône éteinte) ; l'explication est dans le panneau */
.m-telephone-action.m-telephone-discret { border-style: dashed; border-color: var(--separateur-fort); background: rgba(255, 255, 255, .5); color: var(--texte-2); font-weight: 500; box-shadow: none; }
@media (hover: hover) { .m-telephone-action.m-telephone-discret:hover { background: var(--surface); border-color: var(--contour-champ); color: var(--texte); } }
.m-telephone-action.m-telephone-discret .m-telephone-action-icone { background: var(--remplissage); color: var(--texte-2); box-shadow: none; }
.m-telephone-action.m-telephone-discret[aria-expanded="true"] { background: var(--surface); border-color: var(--contour-champ); }

/* ===== Panneau ===== */
.m-telephone-panneau {
  position: fixed; z-index: 46; left: calc(var(--largeur-barre) + 24px); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 360px; max-width: calc(100vw - var(--largeur-barre) - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--texte); border: 1px solid var(--contour-carte); border-radius: var(--r-xl); box-shadow: var(--ombre-flottante);
  animation: m-telephone-entre var(--d-base) var(--c-sortie);
}
.m-telephone-panneau:focus { outline: none; }
.m-telephone-panneau.m-telephone-sortie {
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--d-sortie) var(--c-standard), transform var(--d-sortie) var(--c-standard);
}
@keyframes m-telephone-entre { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes m-telephone-monte { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* En-tête : icône, titre, numéro affiché chez le client, fermer (réduire pendant un appel) */
.m-telephone-tete { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 18px; border-bottom: 1px solid var(--separateur); }
.m-telephone-tete-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-teinte); color: var(--accent); }
.m-telephone-tete-icone svg { width: 18px; height: 18px; }
.m-telephone-tete-texte { flex: 1 1 auto; min-width: 0; }
.m-telephone-titre { margin: 0; font: 700 1.0625rem/1.25 var(--police); letter-spacing: -0.014em; }
.m-telephone-sous { margin: 2px 0 0; font: 400 0.8125rem/1.35 var(--police); letter-spacing: 0; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.m-telephone-icone-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--texte-2); cursor: pointer;
  transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide) var(--c-standard);
}
.m-telephone-icone-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .m-telephone-icone-btn:hover { background: var(--remplissage); color: var(--texte); } }

.m-telephone-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; scrollbar-width: thin; }

/* ===== Vue « prêt » : ligne d'agence et numéro présenté, afficheur, clavier, Appeler ===== */
.m-telephone-repos { display: grid; gap: 12px; }
.m-telephone-ligne { display: grid; gap: 8px; }
.m-telephone-champ { display: grid; gap: 6px; }
.m-telephone-etiquette { font: 600 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-telephone-select { width: 100%; height: 44px; font-weight: 600; }
.m-telephone-ligne-seule { margin: 0; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-m); background: var(--surface-inset); font: 600 0.9375rem/1.3 var(--police); overflow-wrap: anywhere; }
/* Numéro que verra le client : lisible d'un coup d'œil, sous la ligne choisie */
.m-telephone-presente {
  margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--vert-pale); color: var(--vert-texte);
  font: 500 0.875rem/1.4 var(--police); letter-spacing: 0; text-wrap: balance;
}
.m-telephone-presente-numero { display: block; margin-top: 1px; font: 700 1.125rem/1.3 var(--police); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.m-telephone-afficheur { position: relative; }
.m-telephone-numero {
  display: block; width: 100%; height: 64px; padding: 0 52px; border: 1px solid transparent; border-radius: var(--r-l);
  background: var(--surface-inset); color: var(--texte); text-align: center;
  font: 650 1.75rem/1 var(--police); letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  transition: border-color var(--d-rapide) var(--c-standard), box-shadow var(--d-rapide) var(--c-standard), background-color var(--d-rapide) var(--c-standard);
}
.m-telephone-numero[data-taille="moyenne"] { font-size: 1.375rem; }
.m-telephone-numero[data-taille="petite"] { font-size: 1.125rem; }
.m-telephone-numero::placeholder { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--texte-3); }
@media (hover: hover) { .m-telephone-numero:hover { border-color: var(--separateur-fort); } }
.m-telephone-numero:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--halo-champ); }
.m-telephone-numero[aria-invalid="true"] { border-color: var(--rouge-texte); }
.m-telephone-effacer {
  position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-m); background: transparent; color: var(--texte-2); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.m-telephone-effacer svg { width: 22px; height: 22px; }
@media (hover: hover) { .m-telephone-effacer:hover { background: var(--remplissage); color: var(--texte); } }
.m-telephone-invisible { visibility: hidden; }
.m-telephone-aide { margin: -4px 0 0; min-height: 1.45em; font: 500 0.8125rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); text-align: center; font-variant-numeric: tabular-nums; text-wrap: balance; }
.m-telephone-aide-erreur { color: var(--rouge-texte); }

/* Clavier : douze touches de 56 px, lettres comme sur un téléphone */
.m-telephone-clavier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-telephone-touche {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; min-width: 0; padding: 0;
  border: 1px solid var(--contour-carte); border-radius: 14px; background: var(--surface); color: var(--texte); cursor: pointer;
  box-shadow: 0 1px 2px rgba(33, 60, 160, .07); -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color var(--d-rapide) var(--c-standard), border-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
@media (hover: hover) { .m-telephone-touche:hover { background: var(--survol-ligne); border-color: var(--separateur-fort); } }
.m-telephone-touche:active, .m-telephone-touche.m-telephone-appuyee { background: var(--remplissage); border-color: var(--separateur-fort); transform: scale(.96); }
.m-telephone-chiffre { font: 600 1.375rem/1 var(--police); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* L'astérisque d'Inter est placé haut : recentré sur la ligne des chiffres */
.m-telephone-etoile { font-size: 1.75rem; line-height: .62; transform: translateY(.22em); }
.m-telephone-lettres { min-height: 0.6875rem; font: 600 0.625rem/1.1 var(--police); letter-spacing: 0.14em; color: var(--texte-3); }

/* Appeler (vert) et Raccrocher (rouge) : pleine largeur, 56 px */
.m-telephone-appeler, .m-telephone-raccrocher {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; padding: 0 20px; border: 0; border-radius: var(--r-l);
  color: #FFFFFF; font: 650 1.0625rem/1 var(--police); letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie), opacity var(--d-rapide) var(--c-standard);
}
.m-telephone-appeler svg { width: 22px; height: 22px; }
.m-telephone-raccrocher svg { width: 28px; height: 28px; }
.m-telephone-appeler:focus-visible, .m-telephone-raccrocher:focus-visible { outline-offset: 3px; }
.m-telephone-appeler { margin-top: 4px; background: var(--vert-texte); box-shadow: var(--reflet), 0 1px 2px rgba(11, 122, 85, .26), 0 8px 18px rgba(11, 122, 85, .18); }
@media (hover: hover) { .m-telephone-appeler:not(:disabled):hover { background: #096A49; } }
.m-telephone-appeler:not(:disabled):active { background: #07583C; transform: scale(.98); }
.m-telephone-appeler:disabled { opacity: .45; cursor: default; box-shadow: none; }
.m-telephone-raccrocher { background: #D92D20; box-shadow: var(--reflet), 0 1px 2px rgba(217, 45, 32, .26), 0 8px 18px rgba(217, 45, 32, .18); }
@media (hover: hover) { .m-telephone-raccrocher:hover { background: var(--rouge-texte); } }
.m-telephone-raccrocher:active { background: #9A1D14; transform: scale(.98); }
.m-telephone-mention { margin: 0; font: 400 0.75rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-3); text-align: center; text-wrap: balance; }

/* Issue du dernier appel et erreurs */
.m-telephone-issue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 4px 12px 12px; border-radius: var(--r-m); background: var(--surface-inset); }
.m-telephone-issue-ok { background: var(--vert-pale); }
.m-telephone-issue-icone { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--texte-2); box-shadow: var(--ombre-pouce); }
.m-telephone-issue-ok .m-telephone-issue-icone { color: var(--vert-texte); }
.m-telephone-issue-icone svg { width: 15px; height: 15px; }
.m-telephone-issue-texte { display: grid; justify-items: start; gap: 2px; min-width: 0; padding-top: 2px; }
.m-telephone-issue-texte strong { font: 600 0.9375rem/1.35 var(--police); }
.m-telephone-issue-texte span { font: 400 0.8125rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-telephone-issue-texte .btn { margin-top: 8px; }
.m-telephone-issue-fermer { margin: -8px 0; }
.m-telephone-alerte { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--rouge-pale); color: var(--rouge-texte); }
.m-telephone-alerte svg { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.m-telephone-alerte p { margin: 0; font: 500 0.875rem/1.45 var(--police); letter-spacing: 0; }

/* ===== Vue « appel » ===== */
.m-telephone-appel { display: grid; justify-items: center; text-align: center; padding-top: 6px; }
.m-telephone-etat {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 12px; border-radius: var(--r-capsule);
  background: var(--accent-teinte); color: var(--accent-texte); font: 600 0.8125rem/1 var(--police); letter-spacing: 0;
}
.m-telephone-ton-ambre { background: var(--ambre-pale); color: var(--ambre-texte); }
.m-telephone-ton-vert { background: var(--vert-pale); color: var(--vert-texte); }
.m-telephone-etat-point { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; animation: m-telephone-pouls 1.4s var(--c-standard) infinite; }
.m-telephone-ton-vert .m-telephone-etat-point { animation: none; }
@keyframes m-telephone-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.m-telephone-numero-appel { margin: 14px 0 0; max-width: 100%; font: 700 1.625rem/1.2 var(--police); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.m-telephone-qui { margin: 4px 0 0; font: 600 0.9375rem/1.4 var(--police); letter-spacing: -0.006em; color: var(--texte); overflow-wrap: anywhere; }
.m-telephone-qui-numero { margin: 2px 0 0; font: 400 0.8125rem/1.4 var(--police); letter-spacing: 0; color: var(--texte-2); font-variant-numeric: tabular-nums; text-wrap: balance; }
.m-telephone-chrono { margin: 10px 0 0; font: 600 1.25rem/1 var(--police); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.m-telephone-avertissement { margin: 12px 0 0; padding: 6px 10px; border-radius: var(--r-s); background: var(--ambre-pale); color: var(--ambre-texte); font: 500 0.8125rem/1.4 var(--police); letter-spacing: 0; }
.m-telephone-commandes { display: flex; justify-content: center; gap: 32px; margin: 22px 0 4px; }
.m-telephone-rond {
  display: grid; justify-items: center; gap: 8px; min-width: 72px; padding: 0; border: 0; border-radius: var(--r-m); background: none;
  color: var(--texte); font: 500 0.8125rem/1.2 var(--police); letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-telephone-rond-cercle {
  width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--remplissage); color: var(--texte);
  transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
.m-telephone-rond-cercle svg { width: 24px; height: 24px; }
@media (hover: hover) { .m-telephone-rond:not(:disabled):hover .m-telephone-rond-cercle { background: var(--remplissage-survol); } }
.m-telephone-rond:not(:disabled):active .m-telephone-rond-cercle { transform: scale(.95); }
.m-telephone-rond[aria-pressed="true"] .m-telephone-rond-cercle { background: var(--texte); color: #FFFFFF; }
.m-telephone-rond[aria-expanded="true"] .m-telephone-rond-cercle { background: var(--accent-teinte); color: var(--accent); }
.m-telephone-rond:disabled { cursor: default; color: var(--texte-3); }
.m-telephone-rond:disabled .m-telephone-rond-cercle { opacity: .5; }
.m-telephone-appel .m-telephone-clavier { width: 100%; margin-top: 14px; }
.m-telephone-touches { margin: 10px 0 0; font: 500 0.875rem/1.4 var(--police); letter-spacing: 0.06em; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.m-telephone-appel .m-telephone-raccrocher { margin-top: 18px; }

/* ===== Vues d'attente : préparation, non activé, panne passagère ===== */
.m-telephone-chargement { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: var(--texte-2); }
.m-telephone-chargement p { margin: 0; font: 500 0.9375rem/1.4 var(--police); }
.m-telephone-info { display: grid; justify-items: start; gap: 10px; padding: 6px 2px 4px; }
.m-telephone-info-icone { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-teinte); color: var(--accent); }
.m-telephone-info-icone svg { width: 20px; height: 20px; }
.m-telephone-info-icone.m-telephone-info-alerte { background: var(--ambre-pale); color: var(--ambre-texte); }
.m-telephone-info h3 { margin: 4px 0 0; font: 700 1rem/1.3 var(--police); letter-spacing: -0.012em; }
.m-telephone-info p { margin: 0; font: 400 0.9375rem/1.5 var(--police); color: var(--texte-2); }
.m-telephone-info .btn { margin-top: 4px; }

/* ===== Toasts : panneau ouvert sur un bureau étroit, ils restent à sa droite sans le recouvrir ===== */
@media (min-width: 900px) {
  html.m-telephone-ouvert #toasts { width: min(400px, calc(100vw - var(--largeur-barre) - 424px)); }
}

/* ===== Sous 900 px : bouton-icône dans la barre du haut, feuille du bas ===== */
@media (max-width: 899px) {
  .m-telephone-action { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
  .m-telephone-action[aria-expanded="true"], .m-telephone-action.m-telephone-discret, .m-telephone-action.m-telephone-discret[aria-expanded="true"] { background: transparent; }
  @media (hover: hover) { .m-telephone-action:hover, .m-telephone-action.m-telephone-discret:hover { background: transparent; } }
  .m-telephone-action-libelle, .m-telephone-action-puce { display: none; }
  .m-telephone-action-icone { width: 36px; height: 36px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px -2px rgba(11, 122, 85, .40); }
  .m-telephone-action-icone svg { width: 18px; height: 18px; }
  .m-telephone-action.m-telephone-en-appel { background: transparent; }
  .m-telephone-panneau {
    left: 0; right: 0; bottom: 0; width: min(560px, 100%); max-width: none; margin-inline: auto;
    max-height: calc(100vh - var(--haut-mobile) - env(safe-area-inset-top, 0px) - 8px);
    max-height: calc(100dvh - var(--haut-mobile) - env(safe-area-inset-top, 0px) - 8px);
    padding-bottom: env(safe-area-inset-bottom, 0px); border-bottom: 0; border-radius: 24px 24px 0 0;
    animation-name: m-telephone-monte;
  }
  .m-telephone-corps { padding: 14px 16px 16px; }
  /* Les toasts passent en haut : ils ne couvrent jamais Appeler ni Raccrocher */
  html.m-telephone-ouvert #toasts { top: calc(var(--haut-mobile) + env(safe-area-inset-top, 0px) + 8px); bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .m-telephone-panneau { animation: fondu var(--d-rapide) linear; }
  .m-telephone-panneau.m-telephone-sortie { transform: none; }
  .m-telephone-etat-point, .m-telephone-action.m-telephone-en-appel .m-telephone-action-icone::after { animation: none; }
  .m-telephone-action:active, .m-telephone-touche:active, .m-telephone-touche.m-telephone-appuyee, .m-telephone-appeler:not(:disabled):active, .m-telephone-raccrocher:active,
  .m-telephone-rond:not(:disabled):active .m-telephone-rond-cercle { transform: none; }
}