/* onROCKY — le poste de travail (page Lignes) et le cadre des vues intégrées. S'ajoute à rapport/bilan.css (les
   composants partagés : boutons, touches, puces d'état, bande des minéraux, transport, panneau latéral) et aux
   primitives de styles/theme.css (symbole, mot, pictogrammes, gemme, témoin).
   Thèmes nacré et graphite : surfaces mates sans contour décoratif, accents lilas / turquoise.
   Les jetons partagés portent les deux palettes ; les états gardent leur couleur et leur libellé.
   Aucun flou sur les rangées actualisées chaque seconde ; les mouvements utilisent transform et opacity. */

[hidden] { display: none !important; }

/* ------------------------------------------------------------ Page : navigation, barre et vue active */
body.oaa-geode {
  --oaa-entete-marque: 0px;
  --oaa-bouton-ombre: none;
  --oaa-bouton-ombre-survol: none;
  --oaa-bouton-satin: var(--oaa-surface-alt);
  --oaa-surface-satin: var(--oaa-surface);
  --oaa-barre: calc(var(--oaa-entete-marque) + 112px);
  --rail: clamp(320px, 28vw, 430px); /* largeur du rail des lignes (le poste et l'alerte s'en servent) */
  /* Teintes de fond des rangées et des blocs (un minéral à quelques pour cent sur la surface). */
  --attention-teinte: color-mix(in srgb, var(--oaa-attention) 8%, var(--oaa-surface));
  --danger-teinte: color-mix(in srgb, var(--oaa-danger) 7%, var(--oaa-surface));
  display: grid; grid-template-columns: var(--oaa-nav) minmax(0, 1fr); height: 100vh; overflow: hidden;
  background: var(--oaa-fond); font-variant-numeric: tabular-nums;
}
.page {
  grid-column: 2; grid-row: 1; display: grid; grid-template-rows: var(--oaa-barre) minmax(0, 1fr); height: 100vh;
  min-width: 0; max-width: none; margin: 0; padding: 0;
}
/* Une vue qui s'ouvre vient en fondu, une fois (jamais les rangées ni la barre). */
#vue-lignes:not([hidden]), .vue-integree:not([hidden]) { animation: oaa-fondu var(--oaa-duree) ease; }

/* ------------------------------------------------------------ Navigation */
/* Posée sur le fond, sans verre ni trait : des entrées arrondies (rayon 18), l'entrée active en surface avec l'ombre
   douce et son pictogramme en accent ; les autres transparentes, en secondaire. */
.nav-app {
  grid-column: 1; grid-row: 1; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 0; z-index: 2; min-height: 0; overflow: hidden auto; scrollbar-width: none;
}
.nav-symbole { --oaa-taille-symbole: 36px; margin-bottom: 12px; }
.onglets { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.onglets [role="tab"], .nav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none;
  width: 62px; min-height: 56px; margin: 0; padding: 6px 2px; border: 0; border-radius: 18px; background: transparent;
  color: var(--oaa-secondaire); font: 550 11.5px/1.2 var(--oaa-police); text-align: center; cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease, color var(--oaa-duree-rapide) ease;
}
.onglets .oaa-ic { --oaa-taille-ic: 20px; }
.nav-item::before {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--oaa-ic) center / contain no-repeat; mask: var(--oaa-ic) center / contain no-repeat;
}
#ouvrir-licence { --oaa-ic: var(--oaa-ic-licence); }
#ouvrir-telephonie { --oaa-ic: var(--oaa-ic-telephone); }
#ouvrir-mise-a-jour { --oaa-ic: var(--oaa-ic-reessayer); }
#maintenance { --oaa-ic: var(--oaa-ic-entretien); }
.onglets [role="tab"]:hover, .nav-item:hover { background: color-mix(in srgb, var(--oaa-surface) 65%, transparent); color: var(--oaa-encre); }
.onglets [role="tab"][aria-selected="true"] { background: var(--oaa-accent-doux); box-shadow: none; color: var(--oaa-encre); font-weight: 650; }
.onglets [role="tab"][aria-selected="true"] .oaa-ic { color: var(--oaa-accent); }
.onglets [role="tab"]:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
.onglets [role="tab"]:disabled { opacity: .6; cursor: wait; }
.stats-direct { width: calc(100% - 20px); flex: none; margin-top: 8px; padding: 12px 8px; border-radius: 16px; background: var(--oaa-surface); text-align: center; }
.stats-direct-etat { display: block; color: var(--oaa-secondaire); font-size: 9px; line-height: 1.3; }
.stats-direct[data-etat="actif"] .stats-direct-etat { color: var(--oaa-accent); }
.stats-direct dl { display: grid; gap: 10px; margin: 8px 0 0; }
.stats-direct dl > div { display: flex; flex-direction: column-reverse; gap: 3px; }
.stats-direct dt { font-size: 10px; line-height: 1.25; color: var(--oaa-secondaire); }
.stats-direct dd { margin: 0; color: var(--oaa-encre); font-size: 20px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats-direct dd small { font-size: 10px; font-weight: 500; color: var(--oaa-secondaire); }
@media (max-width: 620px) {
  body.oaa-geode .nav-app:has(.stats-direct:not([hidden])) { flex-wrap: wrap; }
  .stats-direct { flex-basis: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 8px; border-radius: 12px; }
  .stats-direct dl { display: flex; gap: 18px; margin: 0; }
  .stats-direct dl > div { flex-direction: row; align-items: center; gap: 6px; }
  .stats-direct dt { max-width: 65px; }
  .stats-direct dd { font-size: 17px; white-space: nowrap; }
}
/* Point d'état de la licence (le résumé, #licence-resume, est dans la barre) : turquoise vérifiée, citrine à régler
   (l'attention, comme « Activation requise » dans la page Licence). Posé sur le coin du pictogramme, sans anneau. */
.nav-licence::after {
  content: none; position: absolute; top: 5px; right: 17px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--oaa-info);
}
:root:has(#licence-resume[data-etat="verifiee"]) .nav-licence::after { content: ""; }
:root:has(#licence-resume[data-etat="attention"]) .nav-licence::after { content: ""; background: var(--oaa-attention); }

/* ------------------------------------------------------------ Barre d'état (commune à toutes les vues) */
/* Posée sur le fond, sans verre, trait ni séparateur : la liste et le transport en pilules de surface avec l'ombre
   douce, les états en points ronds, le taux et sa jauge, la licence. */
.barre-etat {
  grid-row: 1; position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 12px; height: var(--oaa-barre); min-width: 0;
  padding: var(--oaa-entete-marque) 16px 0; container: barre / inline-size; z-index: 2;
  overflow-x: auto; scrollbar-width: thin;
}
.barre-etat > * { flex: none; }
.panel-actions { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 4px; }
.panel-bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: transparent; box-shadow: none; color: var(--oaa-encre); font: 600 12px/1.2 var(--oaa-police);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--oaa-duree-rapide) ease, background-color var(--oaa-duree-rapide) ease;
}
.panel-bouton:hover { color: var(--oaa-encre); background: var(--oaa-surface-alt); }
.panel-bouton:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 3px; }
.panel-bouton svg { flex: none; }
.panel-support svg { color: var(--oaa-info); }
.panel-groupe { color: var(--oaa-accent); }
.panel-groupe:hover { color: var(--oaa-accent); background: color-mix(in srgb, var(--oaa-accent) 18%, var(--oaa-surface)); }
.panel-compte::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--oaa-ic-contacts) center / contain no-repeat; mask: var(--oaa-ic-contacts) center / contain no-repeat; }
.panel-compte::after { top: 8px; left: 24px; right: auto; width: 5px; height: 5px; }
.panel-deconnexion { width: 40px; min-width: 40px; padding: 0; background: transparent; }
.panel-deconnexion:hover { color: var(--oaa-danger); background: var(--oaa-danger-doux); }
.panel-deconnexion:disabled { opacity: .6; cursor: wait; }
.panel-theme { padding-left: 2px; }
.panel-theme .oaa-theme-control { gap: 2px; padding: 3px; background: transparent; box-shadow: none; }
.panel-theme .oaa-theme-control button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; }
.panel-theme .oaa-theme-control svg { width: 16px; height: 16px; }
.panel-actions .notifications-cloche { width: 42px; height: 42px; background: transparent; box-shadow: none; }
.panel-actions .licence-acces { margin-left: 0; }
.panel-actions .licence-renouveler { min-height: 40px; }
@container barre (max-width: 1140px) {
  .panel-actions { gap: 5px; }
  .panel-support, .panel-groupe { width: 40px; padding: 0; }
  .panel-support > span, .panel-groupe > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Signature compacte et lisible, à côté des commandes, présente à toutes les largeurs. */
.barre-mot {
  --oaa-hauteur-mot: 22px;
  margin-right: 8px;
}
/* « Liste » et son menu : une pilule en surface, le surtitre dedans et le chevron au bout ; l'anneau de focus entoure
   toute la pilule. */
.barre-liste {
  position: relative; display: flex; flex: 1 1 300px; min-width: 210px; max-width: 380px; align-items: center; gap: 10px;
  height: 44px; margin: 0; padding: 0 0 0 16px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-surface-satin); box-shadow: var(--oaa-bouton-ombre); cursor: pointer;
  font: 650 11px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; color: var(--oaa-secondaire);
  transition: background-color var(--oaa-duree-rapide) ease;
}
.barre-liste:hover:not(:has(select:disabled)) { background: var(--oaa-surface-alt); }
.barre-liste:has(select:focus-visible) { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
.barre-liste select {
  flex: 1; min-width: 0; height: 42px; padding: 0 34px 0 0; appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 0 var(--oaa-rayon-pilule) var(--oaa-rayon-pilule) 0; background: transparent;
  color: var(--oaa-encre); font: 600 13.5px var(--oaa-police); letter-spacing: 0; text-transform: none;
  white-space: nowrap; text-overflow: ellipsis; box-shadow: none; cursor: pointer;
}
.barre-liste select:focus-visible { outline: 0; }
/* Liste en cours : on ne la change pas, mais son nom reste lisible (pas d'opacité sur le texte). */
.barre-liste select:disabled { opacity: 1; color: var(--oaa-encre); cursor: default; }
.barre-liste:has(select:disabled) { cursor: default; }
.barre-liste select option { background: var(--oaa-surface); color: var(--oaa-encre); }
.barre-liste::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border: solid var(--oaa-secondaire); border-width: 0 1.8px 1.8px 0; border-radius: 0 0 1.5px 0; transform: translateY(-70%) rotate(45deg);
}
.barre-liste:has(select:disabled)::after { border-color: var(--oaa-bord-fort); }
/* Pilules autonomes : leur position reste stable quand le transport change d'état. */
.barre-etat .transport { gap: 6px; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.barre-etat .transport .segment, .barre-etat .transport-direct { min-height: 42px; }
.barre-etat .transport .segment:hover:not(:disabled),
.bouton:not(.principal, .irise, .danger-doux, .danger-plein, .fantome):hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-encre) 8%, var(--oaa-surface-alt)); }
.bouton:is(.principal, .irise, .danger-doux):hover:not(:disabled), .transport #principal:hover:not(:disabled) { opacity: .9; }
/* Transport : pictogramme du bouton principal selon son mode (texte réécrit par suivi.js). */
.transport .segment::before {
  content: ""; width: 15px; height: 15px; flex: none; background: var(--oaa-secondaire);
  -webkit-mask: var(--oaa-ic) center / contain no-repeat; mask: var(--oaa-ic) center / contain no-repeat;
}
#principal[data-mode="demarrer"] { --oaa-ic: var(--oaa-ic-demarrer); }
#principal[data-mode="pause"] { --oaa-ic: var(--oaa-ic-pause); }
#principal[data-mode="reprendre"] { --oaa-ic: var(--oaa-ic-reprendre); }
#arreter { --oaa-ic: var(--oaa-ic-arreter); }
.transport #principal::before { background: currentColor; }
.transport-direct i { flex: none; }
.bande-etats [data-etat="sonne"] { --etat: var(--etat-sonne); }
.bande-etats [data-etat="en-ligne"] { --etat: var(--etat-en-ligne); }
.bande-etats [data-etat="decroche"] { --etat: var(--etat-decroche); }
.bande-etats [data-etat="probleme"] { --etat: var(--etat-probleme); }
.bande-etats [data-etat="libre"] { --etat: var(--etat-neutre); }
.barre-espace { flex: 1 1 0; }
/* Le taux de réponse et sa jauge, côte à côte (« de réponse » part quand la barre se serre). */
.barre-progression { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--oaa-secondaire); white-space: nowrap; }
.barre-progression b { color: var(--oaa-encre); font: 700 15px/1 var(--oaa-police-affiche); }
.barre-progression .jauge-marque { width: 56px; }
.barre-progression .jauge-marque > span, .rail-pied .jauge-marque > span { transition-duration: var(--oaa-duree-lente); }
/* Le panel garde un accès direct à la recharge ; le solde se consulte dans le compte. */
.licence-acces {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  flex: 0 0 auto; min-width: 0; margin-left: 4px;
}
.licence-duree { display: contents; }
.licence-identite { grid-column: 1; grid-row: 1; min-width: 0; }
.licence-acces:has(.licence-duree:not([hidden])) .licence-identite { display: none; }
#licence-nom { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--oaa-encre); font: 650 13px/19px var(--oaa-police); }
.licence-resume { margin: 2px 0 0; overflow: hidden; color: var(--oaa-secondaire); font-size: 10px; line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
.licence-resume[data-etat="verifiee"]::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: var(--oaa-info); }
.licence-resume[data-etat="attention"] { color: var(--oaa-attention); }
.licence-acces:has(.licence-duree[hidden]) .licence-identite { grid-column: 1 / -1; }
#licence-expiration, .licence-solde { display: none; }
.licence-portefeuille { display: flex; align-items: center; min-width: 0; }
.licence-renouveler { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-encre); color: var(--oaa-surface); font: 600 11px/1.2 var(--oaa-police); cursor: pointer; transition: opacity var(--oaa-duree-rapide) ease; }
.licence-renouveler:hover { opacity: .82; }
.licence-renouveler:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 3px; }
.licence-acces [data-solde-offre], .licence-acces [data-solde-erreur], .licence-acces [data-solde-reserve] { grid-column: 1 / -1; min-width: 0; font-size: 10px; line-height: 15px; overflow-wrap: anywhere; }
.licence-acces [data-solde-offre], .licence-acces [data-solde-reserve] { display: none; }
.licence-acces [data-solde-erreur] { color: var(--oaa-attention); }
@container barre (max-width: 1260px) { .licence-acces { margin-left: 0; } .bande-etats [data-zero] { display: none; } }
@container barre (max-width: 1500px) { .bande-etats [data-zero] { display: none; } }
@container barre (max-width: 1050px) { .barre-mot { display: none; } }
@container barre (max-width: 1320px) { .barre-progression .libelle { display: none; } }
@container barre (max-width: 1260px) {
  /* Fenêtre de 1280 à 1360 px : l'air entre les groupes et la jauge se resserrent, pour laisser la place au nom de la
     liste et à « Activation requise » en entier. */
  .barre-etat { gap: 8px; }
  .barre-progression { gap: 8px; }
  .barre-progression .jauge-marque { width: 40px; }
  .barre-liste { min-width: 190px; }
  .bande-etats > span { padding: 0 5px; }
  .transport .segment { padding: 0 11px; }
}
/* Fenêtre de moins de 1280 px seulement (barre de moins de 1150 px utiles) : l'état de la licence peut se raccourcir
   (« Activation… ») ; à 1280, il reste entier et c'est le nom de la liste qui se raccourcit. */
@container barre (max-width: 1150px) { .licence-resume { flex-shrink: 1; } }
@container barre (max-width: 1180px) { .bande-etats [data-zero] { display: none; } }
@container barre (max-width: 1040px) { .barre-progression { display: none; } }
/* Police plus large que prévu (Segoe UI, Verdana), liste en pause, licence à régler : si la barre déborde encore,
   suivi.js pose ces niveaux un par un (mesure à chaque changement de taille, jamais chaque seconde). */
.barre-etat.serree-1 { gap: 8px; }
.barre-etat.serree-2 .barre-liste { min-width: 170px; }
.barre-etat.serree-3 .bande-etats [data-zero] { display: none; }
.barre-etat.serree-4 .barre-progression { display: none; }
.barre-etat.serree-4 { overflow-x: auto; scrollbar-width: thin; }
/* Fenêtre très étroite (rare : le poste vise 1280 px et plus) : la barre défile plutôt que de couper une commande. */
@media (max-width: 1112px) { .barre-etat { overflow-x: auto; scrollbar-width: thin; } }

/* ------------------------------------------------------------ Alerte : elle flotte sous la barre, sans pousser le poste */
/* Un fond doux arrondi, le pictogramme dans la couleur du ton et l'ombre de flottant : ni liseré ni contour. */
.alerte-page {
  position: fixed; top: calc(var(--oaa-barre) + 8px); left: calc(50% + var(--oaa-nav) / 2); transform: translateX(-50%);
  display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(640px, calc(100vw - var(--oaa-nav) - 32px));
  margin: 0; padding: 11px 18px 11px 15px; z-index: 20; border: 1px solid transparent; border-radius: var(--oaa-rayon);
  background: var(--oaa-danger-doux); color: var(--oaa-encre); font-size: 13.5px; line-height: 1.4;
  box-shadow: var(--oaa-ombre-flottant);
}
.alerte-page::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; background: var(--oaa-danger);
  -webkit-mask: var(--oaa-ic-alerte) center / contain no-repeat; mask: var(--oaa-ic-alerte) center / contain no-repeat;
}
/* Sur la vue Lignes, elle se centre sur la fiche : un message long ne cache jamais la tête du rail (Réglages). */
@media (min-width: 1081px) {
  body:not(.vue-large) .alerte-page {
    left: calc((100vw + var(--oaa-nav) + var(--rail) + 12px) / 2);
    max-width: min(640px, calc(100vw - var(--oaa-nav) - var(--rail) - 68px));
  }
}
@keyframes alerte-apparition { from { opacity: 0; transform: translate(-50%, 4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.alerte-page:not([hidden]) { animation: alerte-apparition var(--oaa-duree) var(--oaa-courbe); }
/* Tons posés par suivi.js (data-ton) : info (transfert accepté), attention (refusé, expiré) ; sans ton, l'alerte rouge. */
.alerte-page[data-ton="info"] { background: var(--oaa-info-doux); }
.alerte-page[data-ton="info"]::before { background: var(--oaa-info); -webkit-mask-image: var(--oaa-ic-contacts); mask-image: var(--oaa-ic-contacts); }
.alerte-page[data-ton="attention"] { background: var(--oaa-attention-doux); }
.alerte-page[data-ton="attention"]::before { background: var(--oaa-attention); }

/* ------------------------------------------------------------ Vues intégrées (Contacts, Bilan, DataFiche, Administration) */
.vue-integree { grid-row: 2; display: flex; flex-direction: column; height: calc(100vh - var(--oaa-barre)); min-width: 0; min-height: 0; padding: 0; }
.vue-integree iframe { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.vue-integree iframe[hidden] { display: none; }
/* Barre de la vue DataFiche : posée sur le fond, sans filet ; l'espace la sépare de la page. */
.fiches-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; height: 36px; margin: 0;
  padding: 0 20px 0 18px; font-size: 12px;
}
.fiches-barre .sous-titre { min-width: 0; margin: 0; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fiches-barre .lien { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; }
.fiches-barre .lien .oaa-ic { --oaa-taille-ic: 14px; }
.administration-message { flex: none; margin: 12px 18px; }
/* L'administration (autre origine, thème reçu après son chargement) reste opaque : pas d'éclair à l'ouverture. */
#cadre-administration { background: var(--oaa-fond); }

/* ------------------------------------------------------------ Le poste : les six lignes et la personne en ligne */
#vue-lignes { grid-row: 2; min-height: 0; min-width: 0; }
.poste {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 16px;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - var(--oaa-barre)); min-height: 0; padding: 8px 18px 18px 10px;
}
.poste > .rail-lignes { grid-column: 1; grid-row: 2; }
.poste > .conversation { grid-column: 2; grid-row: 1 / span 2; }
/* La ligne émettrice reste visible séparément des appels simultanés. */
.numero-sortant { grid-column: 1; grid-row: 1; min-width: 0; padding: 10px 12px 0; }
.numero-sortant-titre { display: block; margin-bottom: 8px; font: 650 12px/1.3 var(--oaa-police); color: var(--oaa-secondaire); }
.numero-sortant-rangee { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-radius: 16px; background: var(--oaa-surface); }
.numero-sortant-rangee select {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 5px 10px 12px;
  border: 0; border-radius: 16px; background: transparent; color: var(--oaa-encre);
  font: 650 13px/1.4 var(--oaa-police); font-variant-numeric: tabular-nums; cursor: pointer;
}
.numero-sortant-rangee select:disabled { opacity: 1; color: var(--oaa-encre); cursor: default; -webkit-text-fill-color: var(--oaa-encre); }
.numero-sortant-rangee option { color: var(--oaa-encre); background: var(--oaa-surface); }
.numero-sortant-rangee button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--oaa-secondaire); box-shadow: none; font-size: 22px; }
.numero-sortant-rangee button:hover:not(:disabled) { background: var(--oaa-accent-doux); color: var(--oaa-accent); }
.numero-sortant-rangee :is(select, button):focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 3px; }
.numero-sortant-statut, .numero-sortant-utilise { margin: 6px 0 0; color: var(--oaa-secondaire); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.numero-sortant-utilise { color: var(--oaa-info); font-weight: 600; }

/* ------------------------------------------------------------ Contacts transférés par une autre licence : la pile se pose dans la barre */
/* Hors du flux, sur la droite de la barre d'état (compteurs des lignes, progression, licence), commune à toutes les vues :
   elle ne cache jamais l'identité, la fiche, la note ni les boutons de la personne en ligne, ni l'alerte de page posée
   sous la barre, et rien ne se déplace dans le poste quand un transfert arrive ou disparaît. Elle commence après le
   transport (ancre CSS) : la liste, Pause, Reprendre et Arrêter restent cliquables, quelle que soit leur largeur. Une
   carte à la fois, la plus ancienne (la première à expirer) ; « +1 » dit combien attendent derrière elle. */
.barre-etat .transport { anchor-name: --oaa-transport; }
.transferts-recus {
  position: fixed; top: calc(var(--oaa-entete-marque) + 6px); right: 14px; z-index: 19;
  display: flex; align-items: center; gap: 8px; width: min(700px, calc(100vw - var(--oaa-nav) - 560px));
}
@supports (anchor-name: --a) {
  .transferts-recus { left: max(anchor(--oaa-transport right, 0px) + 12px, 100vw - 714px); width: auto; }
}
.transfert-alerte ~ .transfert-alerte { display: none; }
/* « +1 » : pastille posée sur le coin de la carte, comme un compteur de notifications (elle ne prend pas de place). */
.transferts-recus:not([data-autres="0"])::after {
  content: "+" attr(data-autres); position: absolute; top: -4px; right: -6px; z-index: 1; min-width: 22px; height: 18px; padding: 0 5px;
  border-radius: var(--oaa-rayon-pilule); background: var(--oaa-attention); color: var(--oaa-fond); font: 700 11px/18px var(--oaa-police); text-align: center;
}
/* La carte : une pilule citrine douce avec l'ombre de flottant, sans contour ni liseré ; Accepter et Refuser dedans. */
.transfert-alerte {
  display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 0 6px 0 16px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-attention-doux); color: var(--oaa-encre); box-shadow: var(--oaa-ombre-flottant);
  animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe);
}
.transfert-alerte .oaa-ic { --oaa-taille-ic: 18px; flex: none; color: var(--oaa-attention); }
.transfert-texte { display: grid; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.22; }
.transfert-texte > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfert-de { color: var(--oaa-secondaire); font-size: 11.5px; }
.transfert-de b { color: var(--oaa-encre); font-weight: 650; }
.transfert-detail { display: none; }
/* Largeur fixe (« 9 min 58 » puis « 59 s ») : Accepter et Refuser ne glissent pas sous la souris à chaque seconde. */
.transfert-restant { flex: none; min-width: 8ch; color: var(--oaa-secondaire); font: 700 12.5px/1 var(--oaa-police-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-align: right; }
.transfert-alerte .bouton { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
.transfert-alerte .bouton.fantome:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-attention) 14%, var(--oaa-attention-doux)); }
.transfert-accepter { background: var(--oaa-accent); color: var(--oaa-sur-accent); }
.transfert-accepter:hover:not(:disabled) { background: var(--oaa-accent-fonce); }

/* ------------------------------------------------------------ Transférer à… : le choix des licences, au-dessus des boutons */
.transfert-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4; display: grid; gap: 4px; min-width: 260px; max-width: 100%;
  grid-template-columns: minmax(0, 1fr); max-height: min(420px, calc(100dvh - 24px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 8px 8px; border: 1px solid transparent; border-radius: var(--oaa-rayon);
  background: var(--oaa-surface); box-shadow: var(--oaa-ombre-flottant); color: var(--oaa-encre);
}
.transfert-menu:not([hidden]) { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe); }
.transfert-menu .surtitre { margin: 0 8px 4px; }
.transfert-menu .transfert-vide { margin: 2px 8px 6px; font-size: 13px; }
.transfert-licence {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--oaa-encre); font: 600 13.5px/1 var(--oaa-police); text-align: left; cursor: pointer;
  transition: background-color var(--oaa-duree-rapide) ease;
}
.transfert-licence:hover:not(:disabled), .transfert-licence:focus-visible { background: var(--oaa-surface-alt); }
/* Licence inactive : listée pour information, grisée, sans main ni survol (le serveur refuserait le transfert). */
.transfert-licence:disabled { color: var(--oaa-secondaire); cursor: default; }
.transfert-licence-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfert-licence-etat { flex: none; color: var(--oaa-secondaire); font-size: 11.5px; }
/* Poste actif : témoin turquoise qui bat ; inactif : point discret, sans anneau. */
.transfert-temoin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--oaa-info); --oaa-temoin: var(--oaa-info); }
.transfert-licence[data-actif="0"] .transfert-temoin { background: var(--oaa-discret); }
.transfert-licence[data-actif="0"] .transfert-temoin::after { display: none; }
.transfert-fermer { justify-self: end; margin: 4px 4px 0; font-size: 12.5px; }
/* Badge « Transféré par X » à côté de l'âge (fiche transfertDe) ; « Rappel » (demandé depuis Contacts) en turquoise. */
.conv-transfert { flex: none; align-self: center; max-width: min(240px, 100%); height: auto; min-height: 24px; padding-block: 4px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; background: var(--oaa-attention-doux); color: var(--oaa-encre); }
.conv-transfert[data-rappel="1"] { background: var(--oaa-info-doux); }

/* ------------------------------------------------------------ Le rail */
.rail-lignes { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; padding: 12px 4px; border: 1px solid transparent; border-radius: 26px; background: transparent; container: rail / inline-size; }
.rail-lignes > :not(.grille-lignes) { flex: none; }
.rail-lignes .grille-lignes { flex: 1 1 auto; }
.audio-reprise { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--oaa-rayon); background: var(--oaa-attention-doux); color: var(--oaa-encre); }
.audio-reprise p { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 12px; line-height: 1.4; }
.audio-reprise p .oaa-ic { flex: none; color: var(--oaa-attention); }
.audio-reprise .bouton { min-height: 36px; margin: 0; }
@media (max-width: 720px) { .audio-reprise .bouton { min-height: 44px; } }
.rail-lignes:has(.entrants-recus:not([hidden])) .grille-lignes { grid-template-rows: none; grid-auto-rows: minmax(53px, 1fr); overflow-y: auto; }
.appel-direct { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 8px 4px; border: 1px solid transparent; border-radius: 18px; background: transparent; }
.appel-direct label { font: 600 12px/1.3 var(--oaa-police); color: var(--oaa-encre); }
.appel-direct-rangee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#appel-direct-numero { width: 100%; min-width: 0; height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule); background: var(--oaa-surface); color: var(--oaa-encre); font: 500 14px/1.3 var(--oaa-police); font-variant-numeric: tabular-nums; }
#appel-direct-numero::placeholder { color: var(--oaa-secondaire); font-size: 12px; }
#appel-direct-numero:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 2px; }
#appel-direct-numero[aria-invalid="true"] { border-color: var(--oaa-danger); background: var(--oaa-danger-doux); color: var(--oaa-danger); }
.appel-direct-rangee .bouton { height: 40px; margin: 0; padding-inline: 14px; }
.appel-direct-statut { margin: 0; color: var(--oaa-secondaire); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.appel-direct-statut[data-ton="attention"] { color: var(--oaa-danger); }
.appel-direct-statut[data-ton="info"] { color: var(--oaa-info); }
.entrants-recus { display: grid; gap: 7px; max-height: 38vh; overflow: auto; padding: 4px 0; }
.entrant-carte { padding: 12px; border: 1px solid transparent; border-radius: var(--oaa-rayon); background: var(--oaa-info-doux); }
.entrant-carte p { margin: 0; }
.entrant-titre { font-size: 12px; font-weight: 650; color: var(--oaa-info); }
.entrant-nom { display: block; margin-top: 4px; font-size: 16px; overflow-wrap: anywhere; }
.entrant-numero, .entrant-aide { color: var(--oaa-secondaire); font-size: 12px; }
.entrant-carte .entrant-aide { margin-top: 7px; line-height: 1.4; }
.entrant-actions { display: flex; gap: 8px; margin-top: 9px; }
.entrant-actions button { flex: 1; }
.rail-tete { display: flex; align-items: center; gap: 8px; min-height: 28px; min-width: 0; padding: 0 2px; }
.rail-tete h2 { flex: none; margin: 0; font: 650 18px/1.2 var(--oaa-police-titre); letter-spacing: -.015em; color: var(--oaa-encre); }
.rail-resume { flex: 0 1 auto; min-width: 0; padding: 5px 0; margin-left: auto; font-size: 11.5px; color: var(--oaa-secondaire); white-space: nowrap; }
.rail-espace { flex: 1 1 0; }
/* Rappel en attente : pilule turquoise à la place du résumé des lignes ; le nom se coupe, Annuler reste. */
.rail-tete:has(.rail-rappels:not([hidden])) .rail-resume { display: none; }
/* Le titre « Lignes » lui laisse aussi sa place à l'écran (il reste lu par un lecteur d'écran). */
.rail-tete:has(.rail-rappels:not([hidden])) h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sa largeur est celle de son contenu (240 px au plus, le nom se coupe au-delà). Rail étroit : elle rétrécit deux fois
   plus vite que « Ouvrir N lignes de plus » (le nom se coupe), jusqu'à 140 px qui gardent le début du nom, +N et Annuler. */
.rail-rappels {
  display: flex; flex: 0 2 auto; align-items: center; gap: 5px; min-width: 140px; max-width: 240px; height: 24px; padding: 0 6px 0 10px;
  border: 1px solid transparent; border-radius: var(--oaa-rayon-pilule);
  background: var(--oaa-info-doux); color: var(--oaa-encre); font-size: 12px; white-space: nowrap;
}
.rail-rappels[hidden] { display: none; }
.rail-rappels .oaa-ic { --oaa-taille-ic: 13px; flex: none; color: var(--oaa-info); }
.rail-rappels-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.rail-rappels-plus { flex: none; color: var(--oaa-info); font-weight: 700; }
.rail-rappels-annuler { flex: none; padding: 0 4px; font-size: 12px; color: var(--oaa-info); }
/* Pilule affichée : « Réglages » ne garde que son pictogramme (nom lu et infobulle gardés), le nom du rappel se lit (≈ 80 px
   à 1280 px de large, avec « Ouvrir N lignes de plus » affiché). */
.rail-tete:has(.rail-rappels:not([hidden])) #ouvrir-reglages { gap: 0; padding-inline: 7px; }
.rail-tete:has(.rail-rappels:not([hidden])) .rail-reglages-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rail-tete:has(.rail-rappels:not([hidden])) .rail-rappels { min-width: 190px; }
/* « Ouvrir N lignes de plus » affiché (des lignes manquent) : « Réglages » ne garde que son pictogramme, pour que
   l'action se lise en entier. */
.rail-tete:has(.rail-ouvrir:not([data-etat="complet"])) #ouvrir-reglages { gap: 0; padding-inline: 7px; }
.rail-tete:has(.rail-ouvrir:not([data-etat="complet"])) .rail-reglages-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rail-tete .bouton { flex: none; }
.rail-tete .rail-ouvrir { flex: 0 1 auto; min-width: 0; max-width: 190px; height: 28px; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 28px; color: var(--oaa-info); }
.rail-tete .rail-ouvrir[data-etat="complet"] { display: none; }
.rail-tete .rail-ouvrir:disabled { color: var(--oaa-secondaire); }
#ouvrir-reglages[aria-expanded="true"] { background: var(--oaa-accent-doux); color: var(--oaa-encre); }
#ouvrir-reglages[aria-expanded="true"] .oaa-ic { color: var(--oaa-accent); }
/* Une rangée par ligne réelle ; les petites fenêtres font défiler le rail au lieu de rogner les touches. */
.grille-lignes { display: grid; grid-auto-rows: minmax(62px, 1fr); gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent; }

/* L'état est porté par le fond teinté, le numéro et son libellé. Le relief reste statique pendant les mises à jour
   du chrono ; les actions gardent leur place quand la ligne change de phase. */
.ligne {
  --etat: var(--etat-neutre); --ligne-decalage: 0s;
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: "badge l1 chrono" "badge l2 actions"; grid-template-rows: 16px minmax(0, 1fr); column-gap: 8px; row-gap: 1px;
  min-width: 0; min-height: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 16px;
  background: var(--oaa-surface); contain: layout paint; overflow: hidden; isolation: isolate;
  transition: background-color var(--oaa-duree) ease;
}
.ligne[data-etat="sonne"], .ligne[data-etat="lancement"] { --etat: var(--etat-sonne); }
.ligne[data-etat="en-ligne"] { --etat: var(--etat-en-ligne); background: var(--info-teinte); }
.ligne[data-etat="decroche"] { --etat: var(--etat-decroche); background: var(--attention-teinte); }
.ligne[data-etat="probleme"] { --etat: var(--etat-probleme); background: var(--danger-teinte); }
.ligne[data-etat="libre"], .ligne[data-etat="raccroche"], .ligne[data-etat="vide"] { --etat: var(--etat-neutre); }
.ligne[data-etat="vide"] { background: color-mix(in srgb, var(--oaa-surface) 55%, var(--oaa-fond)); }
/* La ligne qui a la main : turquoise et contour doux ; la puce reste lisible sur le fond teinté. */
.ligne.a-la-main { background: color-mix(in srgb, var(--etat) 13%, var(--oaa-surface)); }
.ligne.a-la-main[data-etat="en-ligne"] { background: var(--oaa-info-doux); }
.ligne.a-la-main .ligne-puce { background: var(--oaa-surface); }
.ligne-repere { grid-area: badge; align-self: center; position: relative; width: 32px; height: 32px; }
.ligne-titre {
  position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: var(--etat); font: 650 13px/1 var(--oaa-police-mono);
}
/* Libre, fin, sans onglet : un rond neutre (plus de pointillés). */
.ligne:is([data-etat="libre"], [data-etat="raccroche"], [data-etat="vide"]) .ligne-titre { color: var(--oaa-secondaire); }
.ligne.a-la-main .ligne-titre { color: var(--etat); }
/* Une signature par état. La lumière reste derrière les informations et les commandes restent immobiles.
   Les six rythmes décalés évitent que toutes les sonneries clignotent ensemble. Seuls opacity/transform bougent. */
.ligne[data-rythme="2"] { --ligne-decalage: -.37s; }
.ligne[data-rythme="3"] { --ligne-decalage: -.81s; }
.ligne[data-rythme="4"] { --ligne-decalage: -1.19s; }
.ligne[data-rythme="5"] { --ligne-decalage: -1.63s; }
.ligne[data-rythme="6"] { --ligne-decalage: -2.07s; }
.ligne > :not(.ligne-cinetique) { z-index: 1; }
.ligne-cinetique {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; user-select: none; contain: strict;
}
.ligne-cinetique > span { position: absolute; pointer-events: none; opacity: 0; }
.ligne-cinetique-halo {
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--etat) 18%, transparent), transparent 66%);
}
.ligne-cinetique-reflet {
  inset: -30% -30%; transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 36%, color-mix(in srgb, var(--etat) 13%, transparent) 47%, color-mix(in srgb, var(--oaa-surface) 65%, transparent) 50%, transparent 61%);
}
.ligne-cinetique-impulsion {
  inset: -25% 0 -25% -16%; transform-origin: 9% 50%;
  background: radial-gradient(ellipse at 10% 50%, color-mix(in srgb, var(--etat) 18%, transparent), transparent 68%);
}
/* Des repères pleins sous le numéro, sans anneaux ni contours animés. */
.ligne-repere::before, .ligne-repere::after {
  content: ""; position: absolute; bottom: -2px; left: 13px; width: 6px; height: 3px;
  border: 0; border-radius: 3px; background: var(--etat); pointer-events: none; opacity: 0;
}
.ligne[data-etat="lancement"] .ligne-repere::after { left: 8px; width: 16px; opacity: .55; transform-origin: left; }
.ligne[data-etat="sonne"] .ligne-repere::before { left: 9px; width: 5px; opacity: .65; }
.ligne[data-etat="sonne"] .ligne-repere::after { left: 18px; width: 5px; opacity: .3; }
.ligne[data-etat="decroche"] .ligne-repere::after { left: 10px; width: 12px; opacity: .8; }
.ligne[data-etat="en-ligne"] .ligne-repere::after { opacity: .75; }
.ligne[data-etat="probleme"] .ligne-repere::after { opacity: .8; }
.ligne:is([data-etat="lancement"], [data-etat="sonne"], [data-etat="decroche"], [data-etat="en-ligne"]) .ligne-cinetique-halo { opacity: .24; }
@media (prefers-reduced-motion: no-preference) {
  .ligne[data-etat="lancement"] .ligne-repere::after {
    animation: ligne-progression 2.8s ease-in-out infinite; animation-delay: var(--ligne-decalage);
  }
  .ligne[data-etat="lancement"] .ligne-cinetique-reflet {
    animation: ligne-traversee 5.6s cubic-bezier(.25, .6, .3, 1) infinite; animation-delay: var(--ligne-decalage);
  }
  .ligne[data-etat="sonne"] .ligne-repere::before,
  .ligne[data-etat="sonne"] .ligne-repere::after {
    animation: ligne-appel-cadence 3.2s ease-in-out infinite; animation-delay: var(--ligne-decalage);
  }
  .ligne[data-etat="sonne"] .ligne-repere::after { animation-delay: calc(var(--ligne-decalage) - .8s); }
  .ligne[data-etat="decroche"] .ligne-repere::after {
    animation: ligne-attention 3.6s ease-in-out infinite; animation-delay: var(--ligne-decalage);
  }
  .ligne[data-etat="en-ligne"] .ligne-cinetique-halo {
    animation: ligne-halo-presence 5.2s ease-in-out infinite; animation-delay: var(--ligne-decalage);
  }
}
@keyframes ligne-progression {
  0%, 100% { transform: scaleX(.28); opacity: .35; }
  50% { transform: scaleX(1); opacity: .75; }
}
@keyframes ligne-traversee {
  0%, 15% { opacity: 0; transform: translateX(-100%); }
  32% { opacity: .32; }
  66%, 100% { opacity: 0; transform: translateX(100%); }
}
@keyframes ligne-appel-cadence {
  0%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: .85; transform: translateY(-1px); }
  70% { opacity: .3; transform: translateY(0); }
}
@keyframes ligne-attention {
  0%, 100% { opacity: .45; }
  45% { opacity: .95; }
}
@keyframes ligne-halo-presence {
  0%, 100% { opacity: .16; }
  50% { opacity: .38; }
}
/* Le contrôleur suspend aussi ses transitions WAAPI : aucune animation ne rattrape son retard au retour. */
.ligne[data-mouvement="suspendu"] .ligne-repere::before,
.ligne[data-mouvement="suspendu"] .ligne-repere::after,
.ligne[data-mouvement="suspendu"] .ligne-cinetique > span { animation-play-state: paused; }
.ligne[data-mouvement="suspendu"] .ligne-cinetique-impulsion { opacity: 0; }
.ligne-l1 { grid-area: l1; display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 16px; }
.ligne-numero { flex: none; font: 650 14px/16px var(--oaa-police); letter-spacing: -.005em; color: var(--oaa-encre); white-space: nowrap; }
.ligne-contact { min-width: 0; overflow: hidden; color: var(--oaa-secondaire); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.ligne-chrono { grid-area: chrono; justify-self: end; color: var(--oaa-encre); font: 700 13px/16px var(--oaa-police-affiche); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-l2 {
  grid-area: l2; align-self: start; min-width: 0; color: var(--oaa-secondaire); font-size: 11.5px; line-height: 14px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
/* Puce du rail : une pilule teintée en casse de phrase (« Sonne », « À décider »), plus étroite que les capitales. */
.ligne-puce { height: 15px; padding: 0 7px; margin-right: 5px; vertical-align: -2px; font: 650 11px/1 var(--oaa-police); letter-spacing: 0; text-transform: none; }
.ligne-badge { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; color: var(--etat); font-weight: 650; vertical-align: -2px; line-height: 14px; }
.ligne-badge .oaa-ic { --oaa-taille-ic: 13px; }
.ligne-badge-mot:empty { display: none; }
.ligne[data-etat="decroche"] .ligne-etat, .ligne[data-etat="probleme"] .ligne-etat { color: var(--oaa-encre); }
/* Sans numéro (libre, sans onglet, en panne) : le détail prend les deux rangées, trois lignes au plus. */
.ligne.sans-numero .ligne-l1 { display: none; }
.ligne.sans-numero .ligne-l2 { grid-area: 1 / 2 / 3 / 3; align-self: center; -webkit-line-clamp: 3; }
.ligne-actions { grid-area: actions; align-self: end; display: flex; align-items: center; gap: 3px; }
.ligne.sans-numero .ligne-actions { grid-row: 1 / 3; align-self: center; }
.ligne-actions .touche { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--oaa-encre) 5%, transparent); }
.ligne-actions .touche:disabled { background: transparent; }
.ligne-actions .touche.marquee:not(:disabled) { background: var(--oaa-attention-doux); }
.ligne-actions .touche:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-encre) 10%, var(--oaa-surface)); }
.ligne-lien {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 24px; padding: 0 3px;
  border-radius: var(--oaa-rayon-pilule); color: var(--oaa-secondaire); font-size: 12px; font-weight: 650;
}
.ligne-lien:hover:not(:disabled) { background: var(--oaa-surface-alt); color: var(--oaa-encre); text-decoration: none; }
.ligne-lien:disabled { opacity: .45; cursor: default; }
.ligne-lien[data-action="ouvrir"] { flex-direction: row-reverse; padding: 0 7px; color: var(--oaa-info); }
.ligne-lien-mot:empty { display: none; }
/* En panne, Réessayer (premier enfant, posé par suivi.js) prend la place des touches. Combinateur de frères et pas :has :
   un :has(… :not([hidden])) sur la rangée faisait recalculer le style de tout le document à chaque rendu (1 s). */
.ligne-actions > .ligne-reessayer:not([hidden]) ~ * { display: none; }
/* Réessayer : la seule action de la ligne en panne, en rubis plein (pilule). */
.ligne-reessayer.bouton.mini { height: 24px; padding: 0 9px 0 8px; gap: 4px; background: var(--oaa-danger); color: var(--oaa-sur-danger); font-size: 12px; font-weight: 650; }
.ligne-reessayer.bouton.mini:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-danger) 88%, var(--oaa-encre)); }
.ligne-reessayer .oaa-ic { --oaa-taille-ic: 13px; width: 13px; height: 13px; color: currentColor; }
/* Ligne en panne sans numéro : Réessayer se dresse sur les deux rangées (pictogramme au-dessus du mot), le message
   garde la largeur et se lit en entier sur trois lignes. */
.ligne.sans-numero .ligne-reessayer.bouton.mini { flex-direction: column; height: 40px; padding: 3px 7px 2px; gap: 1px; font-size: 11.5px; line-height: 1.1; }
.ligne.sans-numero .ligne-reessayer .oaa-ic { --oaa-taille-ic: 15px; width: 15px; height: 15px; }
/* Jauge de sonnerie : une pilule de 3 px en bas de la rangée, avancée par transform (composité). */
.jauge {
  position: absolute; left: 50px; right: 110px; bottom: 3px; height: 3px; border-radius: var(--oaa-rayon-pilule);
  background: color-mix(in srgb, var(--etat) 16%, transparent); overflow: hidden;
}
.jauge span { display: block; height: 100%; border-radius: inherit; background: var(--etat); transform: scaleX(0); transform-origin: left; transition: transform 1s linear; }
@media (min-width: 621px) and (min-height: 860px) {
  @container rail (max-width: 330px) {
    .grille-lignes { grid-auto-rows: minmax(78px, 1fr); }
    .ligne { grid-template-rows: auto minmax(30px, 1fr); }
    .ligne-l1 { display: block; line-height: 16px; }
    .ligne-contact { display: block; font-size: 11px; line-height: 14px; }
    .ligne-chrono { align-self: start; }
  }
}

/* Progression au-dessus des lignes : lisible pendant un appel, à toutes les hauteurs de fenêtre. */
.rail-pied {
  display: grid; gap: 7px; min-width: 0; margin: 0; padding: 8px 4px;
  border: 1px solid transparent; border-radius: 18px; background: transparent; color: var(--oaa-secondaire); font-size: 12px;
}
.rail-pied-texte { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rail-pied-avancement { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.rail-pied b { color: var(--oaa-encre); font: 700 18px/1 var(--oaa-police-affiche); font-variant-numeric: tabular-nums; }
.rail-pied-total, .rail-pied-total b { color: var(--oaa-secondaire); font-size: 13px; font-weight: 500; }
.rail-pied-libelle { margin-left: 2px; font-size: 12px; }
.rail-pied .jauge-marque { width: 100%; height: 7px; grid-row: 1; }
.rail-pied-comptes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rail-pied-comptes > span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rail-pied-comptes > span:last-child { justify-content: flex-end; }
.rail-pied-comptes b { font-size: 15px; }
.rail-pied-comptes > span > span { font-size: 11.5px; }
#pied-en-cours { color: var(--oaa-info); }
.rail-pied-detail { margin: 0; font-size: 11px; }

/* ------------------------------------------------------------ La fiche « Personne en ligne » */
/* Une seule surface mate ; les espaces séparent identité, données et commandes. */
.conversation {
  --etat: var(--etat-neutre);
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; margin: 0;
  padding: 24px; border: 1px solid transparent; border-radius: 28px;
  background: var(--oaa-surface); box-shadow: none;
  container: conversation / inline-size;
}
.conversation[data-etat="sonne"], .conversation[data-etat="lancement"] { --etat: var(--etat-sonne); }
.conversation[data-etat="en-ligne"] { --etat: var(--etat-en-ligne); }
.conversation[data-etat="decroche"] { --etat: var(--etat-decroche); }
.conversation[data-etat="probleme"] { --etat: var(--etat-probleme); }
.conversation[data-etat="vide"], .conversation[data-etat="raccroche"], .conversation[data-etat="libre"] { --etat: var(--etat-neutre); }

/* Personne en ligne : le filigrane du symbole, un mot, l'essentiel de la liste en cours. */
.conv-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 24px; text-align: center; }
.conv-vide-icone { --oaa-taille-symbole: min(200px, 34vh); margin-bottom: 10px; }
.conv-vide h2 { margin: 0; font: 650 22px/1.2 var(--oaa-police-titre); letter-spacing: -.015em; color: var(--oaa-encre); }
.conv-vide .sous-titre { max-width: 440px; margin: 0; color: var(--oaa-secondaire); font-size: 13.5px; line-height: 1.6; }
.conv-direct { margin: 6px 0 0; color: var(--oaa-secondaire); font-size: 13px; font-variant-numeric: tabular-nums; }
.conv-direct:empty { display: none; }

.conv-plein { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; height: 100%; min-height: 0; min-width: 0; }
.conv-plein:has(#conv-medias:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto auto; }
#conv-medias .oaa-medias-grille { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
#conv-medias .oaa-medias-carte { flex: 0 0 130px; grid-template-rows: 68px auto; }
#conv-medias { padding-block: 9px; }
/* Quelqu'un décroche : la zone vient en fondu. Quand la main passe à une autre personne, suivi.js refait ce mouvement
   sur l'identité seulement (rien ne bouge sous les boutons). */
.conv-plein:not([hidden]) { animation: oaa-apparition var(--oaa-duree-lente) var(--oaa-courbe); }

/* Bande 1 : l'identité d'abord, une gemme compacte et le temps de conversation. */
.conv-identite { display: flex; align-items: center; gap: 20px; min-width: 0; }
.conv-age { --oaa-taille-gemme: clamp(86px, 13vh, 116px); overflow: hidden; }
.conv-age b { font-size: clamp(42px, 6vh, 56px); }
/* L'éclat : une seule traversée, quand une nouvelle personne décroche (jamais en boucle). */
.conv-age { --eclat: color-mix(in srgb, var(--oaa-surface) 55%, transparent); }
:root[data-theme="dark"] .conv-age { --eclat: color-mix(in srgb, var(--oaa-encre) 35%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .conv-age { --eclat: color-mix(in srgb, var(--oaa-encre) 35%, transparent); } }
.conv-age.eclat::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--eclat) 50%, transparent);
  animation: oaa-eclat 900ms var(--oaa-courbe) 1 both;
}
.conv-personne { display: grid; gap: 5px; flex: 1 1 auto; min-width: 0; }
.conv-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; color: var(--oaa-secondaire); font-size: 12.5px; line-height: 22px; white-space: nowrap; }
/* Le point plein accompagne le libellé ; aucun anneau supplémentaire autour du contact. */
.pastille-etat {
  flex: none; width: 8px; height: 8px; margin: 0 2px 0 4px; border-radius: 50%; background: var(--etat); --oaa-temoin: var(--etat);
  box-shadow: none; transition: background-color var(--oaa-duree) ease;
}
.pastille-etat::after { display: none; }
/* Le témoin bat tant que quelqu'un est en ligne, plus vite pendant qu'on écoute qui a décroché ; sinon il se tait. */
.conversation[data-etat="decroche"] .pastille-etat::after { animation-duration: 1.2s; }
.conversation:not([data-etat="en-ligne"]):not([data-etat="decroche"]) .pastille-etat::after { display: none; }
.conv-ligne { flex: none; color: var(--oaa-secondaire); font: 650 12px/1 var(--oaa-police); letter-spacing: .03em; text-transform: uppercase; }
/* Puce de l'état : une pilule de 22 px en casse de phrase (« En ligne »). */
.conv-puce { flex: none; height: 22px; padding: 0 9px; font: 650 12px/1 var(--oaa-police); letter-spacing: 0; text-transform: none; }
.conv-puce:empty { display: none; }
.conv-etat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.conv-etat:empty { display: none; }
.conv-son { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.conv-son .oaa-ic { --oaa-taille-ic: 15px; color: var(--oaa-info); }
.conv-son-coupe .oaa-ic { color: var(--oaa-danger); }
.conv-nom-ligne { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conv-nom {
  min-width: 0; margin: 0; color: var(--oaa-encre); white-space: normal; overflow-wrap: anywhere; text-wrap: balance;
  font: 650 clamp(26px, 4vh, 36px)/1.15 var(--oaa-police-titre); letter-spacing: -.025em;
}
/* Nom très long (suivi.js pose data-long) : plus petit et sur deux lignes au plus, pour le lire en entier sans survol. */
.conv-nom[data-long="oui"] {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; text-wrap: balance;
  font-size: clamp(20px, 3.2vh, 30px); line-height: 1.1;
}
.conv-civilite { margin-right: .02em; color: var(--oaa-secondaire); font-size: .76em; font-weight: 400; letter-spacing: 0; }
.conv-nom-ligne .puce-genre { flex: none; height: 28px; padding: 0 12px; }
.conv-sous-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; margin: 0; color: var(--oaa-secondaire); font-size: 13px; line-height: 1.35; }
.conv-numero { color: var(--oaa-encre); font: 700 clamp(17px, 2.9vh, 24px)/1.15 var(--oaa-police); letter-spacing: -.01em; white-space: nowrap; }
/* Numéro inconnu (sans nom) : pas de ligne vide en tête, le numéro redevient le repère principal. */
.conv-nom-ligne:has(#conv-nom:empty) { display: none; }
.conv-identite:has(#conv-nom:empty) .conv-numero { font: 750 clamp(26px, 4.4vh, 42px)/1.12 var(--oaa-police-titre); letter-spacing: -.02em; }
/* À droite : depuis quand (le chrono dans la couleur de l'état), et l'onglet Onoff en bas, en pilule surface-alt. */
.conv-duree { display: grid; flex: none; align-self: stretch; align-content: center; justify-items: end; gap: 4px; text-align: right; }
.conv-duree .surtitre { color: var(--oaa-secondaire); }
.conv-chrono {
  min-height: 1em; margin-top: 3px; color: var(--oaa-encre); font: 700 clamp(26px, 4.6vh, 44px)/1 var(--oaa-police-affiche);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.conversation[data-etat="en-ligne"] .conv-chrono { text-shadow: none; }
.conv-onglet { margin-top: 2px; }
.conv-onglet.bouton.mini { flex-direction: row; height: 30px; padding: 0 10px 0 12px; gap: 6px; background: var(--oaa-surface-alt); font-size: 12.5px; font-weight: 550; }
.conv-onglet.bouton.mini:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-encre) 6%, var(--oaa-surface-alt)); }

/* Bande 2 : la fiche (blocs de fond, chacun avec son pictogramme) et la note sur toute la hauteur. */
.conv-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .65fr); gap: 24px; min-width: 0; min-height: 0; }
.conv-fiche {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent;
}
.conv-corps.note-large { grid-template-columns: minmax(0, 1fr) minmax(230px, .75fr); }
.conv-fiche:empty { display: none; }
.conv-corps:has(.conv-fiche:empty) { grid-template-columns: minmax(0, 1fr); }
/* Des titres et de l'air séparent les données, sans cartes imbriquées. */
.fiche-section {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre source" "lignes lignes"; align-content: start;
  column-gap: 12px; flex: none; min-width: 0; padding: 16px; border: 1px solid transparent; border-radius: 18px;
  background: transparent;
}
/* Le dernier bloc s'étire jusqu'à la note : pas de trou sous la fiche. */
.fiche-section:last-child { flex: 1 0 auto; }
/* Une nouvelle fiche se compose bloc par bloc (les blocs ne sont recréés qu'au changement de personne). */
.fiche-section { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe) backwards; }
.fiche-section:nth-child(2) { animation-delay: 40ms; }
.fiche-section:nth-child(3) { animation-delay: 80ms; }
/* Titre du bloc : son pictogramme (agence, coordonnées, banque) puis le surtitre, sans numéro. */
.fiche-titre {
  --oaa-ic: var(--oaa-ic-coordonnees);
  grid-area: titre; display: flex; align-items: center; gap: 8px; margin: 0 0 5px; min-width: 0;
  color: var(--oaa-secondaire); font: 650 11px/16px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase;
}
.fiche-titre::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--oaa-ic) center / contain no-repeat; mask: var(--oaa-ic) center / contain no-repeat;
}
.fiche-agence .fiche-titre { --oaa-ic: var(--oaa-ic-agence); }
.fiche-coordonnees .fiche-titre { --oaa-ic: var(--oaa-ic-coordonnees); }
.fiche-banque .fiche-titre { --oaa-ic: var(--oaa-ic-banque); }
.fiche-source {
  grid-area: source; align-self: center; justify-self: end; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 5px;
  color: var(--oaa-secondaire); font: 400 11.5px/16px var(--oaa-police); text-align: right;
}
.fiche-source-lien { display: inline-flex; color: var(--oaa-secondaire); }
.fiche-source-lien:hover { color: var(--oaa-encre); }
.fiche-source-lien .oaa-ic { --oaa-taille-ic: 13px; }
.fiche-lignes { grid-area: lignes; display: grid; gap: 6px; min-width: 0; margin: 0; }
.fiche-ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; align-items: baseline; min-width: 0; }
/* Sur surface-alt, le secondaire (jamais le discret) pour les libellés et les précisions. */
.conv-fiche dt { color: var(--oaa-secondaire); font-size: 12px; font-weight: 450; }
.conv-fiche dd { margin: 0; min-width: 0; color: var(--oaa-encre); font-size: clamp(14px, 2.2vh, 18px); line-height: 1.35; overflow-wrap: break-word; }
.conv-fiche .non-renseigne { color: var(--oaa-secondaire); font-size: 13px; font-style: italic; }
/* Agence : un fond turquoise très doux ; « Banque · Agence » en titre, l'adresse dessous en secondaire ; libellés gardés
   pour les lecteurs d'écran. */
.fiche-agence { background: var(--oaa-surface-alt); }
.fiche-agence .fiche-lignes { display: block; }
.fiche-agence [data-champ="Adresse"] dd { margin-top: 1px; color: var(--oaa-secondaire); }
.fiche-agence .fiche-ligne { display: block; min-width: 0; }
/* Banque et agence se suivent comme une phrase (le retour à la ligne se fait entre les mots, jamais avant le point). */
.fiche-agence :is([data-champ="Banque"], [data-champ="Agence"]), .fiche-agence :is([data-champ="Banque"], [data-champ="Agence"]) dd { display: inline; }
.fiche-agence dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fiche-agence :is([data-champ="Banque"], [data-champ="Agence"]) dd { font: 650 clamp(16px, 2.6vh, 22px)/1.25 var(--oaa-police-titre); letter-spacing: -.012em; }
.fiche-agence [data-champ="Agence"] dd.non-renseigne { font: italic 500 13px/1.5 var(--oaa-police); }
.fiche-agence [data-champ="Banque"] + [data-champ="Agence"]::before {
  content: "\00a0· "; color: var(--oaa-secondaire); font: 650 clamp(16px, 2.6vh, 22px)/1.25 var(--oaa-police-titre);
}
/* Banque : l'IBAN en chiffres sur une ligne, jamais coupé ; BIC, compte et codes se suivent sur la même rangée s'il y a la place. */
.fiche-banque .fiche-lignes { display: flex; flex-wrap: wrap; gap: 2px 24px; }
.fiche-banque .fiche-ligne { display: flex; align-items: baseline; gap: 8px; }
.fiche-banque dt { flex: none; }
.conv-fiche dd.chiffres { font: 600 13.5px/1.35 var(--oaa-police-mono); letter-spacing: .01em; white-space: nowrap; }

/* Mode dense (posé par suivi.js quand la fiche déborderait) : blocs et valeurs resserrés, rien ne défile. */
.conv-fiche.dense { gap: 6px; }
.conv-fiche.dense .fiche-section { padding: 6px 14px 7px; border-radius: 16px; }
.conv-fiche.dense .fiche-titre, .conv-fiche.dense .fiche-source { margin-bottom: 1px; line-height: 15px; }
.conv-fiche.dense .fiche-lignes { row-gap: 0; }
.conv-fiche.dense .fiche-ligne { grid-template-columns: 66px minmax(0, 1fr); }
.conv-fiche.dense dd { font-size: 13.5px; line-height: 1.3; }
.conv-fiche.dense .fiche-agence :is([data-champ="Banque"], [data-champ="Agence"]) dd,
.conv-fiche.dense .fiche-agence [data-champ="Banque"] + [data-champ="Agence"]::before { font-size: 15.5px; line-height: 1.22; }
.conv-fiche.dense dd.chiffres { font-size: 13px; }
/* La saisie téléphonique reste lisible et sélectionnable, y compris sur la fiche de l'appel terminé. */
.conv-saisie { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; min-height: 0; }
.conv-saisie:has(.conv-facture[hidden]) { grid-template-rows: minmax(0, 1fr); }
.conv-facture { display: grid; gap: 8px; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 18px; background: transparent; }
.conv-facture-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 3px 10px; }
.conv-facture-entete label { color: var(--oaa-encre); font-size: 12px; font-weight: 650; }
#conv-facture-statut { color: var(--oaa-secondaire); font-size: 11.5px; line-height: 1.35; }
.conv-facture[data-etat="terminee"] #conv-facture-statut { color: var(--oaa-info); }
.conv-facture[data-etat="trop-longue"] #conv-facture-statut { color: var(--oaa-danger); }
#conv-facture-numero { width: 100%; min-width: 0; height: 42px; padding: 8px 13px; border: 1px solid transparent; border-radius: 12px; background: var(--oaa-champ-fond); color: var(--oaa-encre); font: 600 15px/1.3 var(--oaa-police-mono); user-select: text; }
#conv-facture-numero::placeholder { color: var(--oaa-secondaire); font: 400 12px/1.3 var(--oaa-police); }
#conv-facture-aide { margin: 0; color: var(--oaa-secondaire); font-size: 11.5px; line-height: 1.4; }
/* La note garde un champ clairement identifiable, sans second cadre autour. */
.conv-note { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 18px; background: transparent; }
.conv-note-titre { padding: 0 4px; overflow: hidden; color: var(--oaa-secondaire); font: 650 11px/16px var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.conv-note-titre::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -4px; background: currentColor;
  -webkit-mask: var(--oaa-ic-note) center / contain no-repeat; mask: var(--oaa-ic-note) center / contain no-repeat;
}
.conv-note textarea {
  width: 100%; height: 100%; min-height: 0; padding: 13px 16px; resize: none; field-sizing: fixed;
  border: 1px solid transparent; border-radius: 16px; background: var(--oaa-champ-fond);
  color: var(--oaa-encre); font: 450 clamp(14px, 2.2vh, 18px)/1.45 var(--oaa-police); box-shadow: none;
  scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent;
}
.conv-note textarea:hover:not(:focus):not(:disabled) { background: var(--oaa-surface-alt); }
.conv-note textarea:disabled { opacity: .7; }
.conv-note textarea.dense { padding: 8px 12px; font-size: 13.5px; line-height: 1.38; }

/* Bande 3 : les actions, toujours en bas, en pilules de 44 px sur surface-alt. Messagerie et Raccrocher à gauche ;
   Quelqu'un et le micro à part, à droite (l'espace entre les deux groupes, sans filet). */
.conv-pied { position: relative; min-width: 0; }
.conv-actions { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; }
.conv-rangee { display: flex; gap: 8px; }
.conv-ecart { justify-self: stretch; height: 1px; }
.conv-actions .bouton.fiche { height: 48px; padding: 0 17px 0 14px; gap: 7px; font: 600 13.5px/1 var(--oaa-police); }
.conv-actions .bouton.fiche.danger-doux { font-weight: 650; }
.conv-actions .bouton.fiche:is([data-conv="messagerie"], [data-conv="passer"], [data-conv="garder"]) { padding-right: 9px; }
/* Raccourci : un rond de 22 px en surface, posé sur le fond du bouton. */
.conv-actions kbd { width: 22px; min-width: 22px; height: 22px; padding: 0; margin-left: 0; border-radius: 50%; }
.conv-actions .raccrocher kbd { color: var(--oaa-sur-bouton-danger); background: color-mix(in srgb, var(--oaa-sur-bouton-danger) 8%, transparent); }
/* Micro : libellé réécrit par suivi.js, pictogramme par la feuille ; coupé = rubis plein, bien visible. */
.conv-actions .micro::before {
  content: ""; width: 18px; height: 18px; flex: none; background: var(--oaa-secondaire);
  -webkit-mask: var(--oaa-ic-micro) center / contain no-repeat; mask: var(--oaa-ic-micro) center / contain no-repeat;
}
.conv-actions .micro[data-coupe="1"] { background: var(--oaa-danger); color: var(--oaa-sur-danger); }
.conv-actions .micro[data-coupe="1"]::before { background: currentColor; -webkit-mask-image: var(--oaa-ic-micro-coupe); mask-image: var(--oaa-ic-micro-coupe); }
.conv-actions .micro[data-coupe="1"]:hover:not(:disabled) { background: color-mix(in srgb, var(--oaa-danger) 88%, var(--oaa-encre)); }
/* Clic ignoré (la ligne affichée vient de changer) : avis de 4 s posé au-dessus des boutons, par-dessus la fiche.
   Il ne décale rien et laisse passer les clics, pour qu'un second clic ne tombe pas à côté. */
.conv-avis {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 3; max-width: 100%; margin: 0; padding: 9px 14px;
  border: 1px solid transparent; border-radius: 14px; background: var(--oaa-attention-doux);
  box-shadow: var(--oaa-ombre-flottant); color: var(--oaa-encre); font-size: 13px; pointer-events: none;
}
.conv-avis:not([hidden]) { animation: oaa-apparition var(--oaa-duree) var(--oaa-courbe); }

/* Après le raccrochage (suivi.js, data-termine) : la dernière personne reste affichée, estompée et sans couleur (qui et
   sa fiche) ; la note reste nette et modifiable. Rien ne change de taille : la fiche tient toujours sans défiler. */
.conversation[data-termine] :is(.conv-identite, .conv-fiche) { opacity: .55; filter: grayscale(1); }
.conversation[data-termine] .conv-etat { color: var(--oaa-encre); }
/* Rappeler à gauche ; à droite, le bilan d'une liste finie prend la place qui reste (deux lignes au plus). */
.conversation[data-termine] .conv-actions { grid-template-columns: auto 16px minmax(0, 1fr); }
.fin-liste-texte { margin: 0; color: var(--oaa-encre); font: 500 13px/1.35 var(--oaa-police); font-variant-numeric: tabular-nums; }
.conv-fin { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.conv-fin .fin-liste-texte {
  display: -webkit-box; min-width: 0; overflow: hidden; text-align: right;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.conv-fin .bouton { flex: none; }
/* Fiche vide : le bilan sous « Personne en ligne », dans un bloc doux, avec la relance en principal. */
.vide-fin { display: grid; justify-items: center; gap: 12px; max-width: 520px; margin-top: 10px; padding: 16px 22px; border-radius: 18px; background: var(--oaa-surface-alt); }
.vide-fin .fin-liste-texte { font-size: 14px; line-height: 1.5; }
.fin-liste-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Deux paires par rangée seulement si chacune dispose d'une largeur lisible ; les longues coordonnées gardent
   une rangée complète. L'adaptation dépend de la largeur réelle du bloc, pas de celle de l'écran. */
.fiche-coordonnees .fiche-lignes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); column-gap: 20px; }
.fiche-coordonnees :is([data-champ="Adresse"], [data-champ="Email"]) { grid-column: 1 / -1; }
/* Fiche extrême qui déborde encore une fois resserrée (suivi.js, ajusterDensite) : l'identité, déjà en tête, quitte le bloc. */
.conv-fiche.sans-doublons .fiche-coordonnees :is([data-champ="Nom"], [data-champ="Prénom"], [data-champ="Âge"], [data-champ="Naissance"], [data-champ="Téléphone"]) { display: none; }

/* La note passe sous la fiche seulement quand chaque colonne serait trop étroite. */
@container conversation (max-width: 580px) {
  .conv-corps, .conv-corps.note-large { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; overflow-y: auto; scrollbar-width: thin; }
  .conv-fiche { min-height: min-content; overflow: visible; }
  .conv-saisie { grid-template-rows: auto minmax(180px, auto); min-height: 320px; }
  .conv-note textarea { min-height: 120px; }
  .conv-identite { gap: 12px; flex-wrap: wrap; }
  .conv-age { --oaa-taille-gemme: 90px; }
  .conv-age b { font-size: 43px; }
  .conv-personne { flex-basis: 180px; }
  .conv-duree { align-self: center; }
  .conv-chrono { font-size: 30px; }
  .conv-nom, .conv-nom[data-long="oui"] { font-size: 27px; }
  .conv-tete { flex-wrap: wrap; gap: 5px 8px; white-space: normal; }
  .fiche-coordonnees .fiche-lignes { grid-template-columns: minmax(0, 1fr); }
}
/* Fiche étroite (1440 × 760 et moins) : les cinq boutons d'action (dont « Transférer à… ») se resserrent pour tenir dans
   la carte, sans retour à la ligne ; au-delà de 900 px, rien ne change. */
@container conversation (max-width: 900px) {
  .conv-actions { grid-template-columns: auto minmax(12px, 1fr) auto; }
  .conv-actions .bouton.fiche { padding: 0 13px 0 12px; gap: 6px; }
  .conv-actions .bouton.fiche:is([data-conv="messagerie"], [data-conv="passer"], [data-conv="garder"]) { padding-right: 8px; }
  .conv-rangee { gap: 6px; }
}
/* Fiche d'une fenêtre de 1280 px (≈ 800 px) : les pilules se resserrent encore d'un cran pour tenir dans la carte sans
   déborder, avec toujours l'écart qui isole Quelqu'un et le micro. */
@container conversation (max-width: 820px) {
  .conv-actions .bouton.fiche { padding: 0 10px 0 9px; gap: 5px; }
  .conv-actions .bouton.fiche:is([data-conv="messagerie"], [data-conv="passer"], [data-conv="garder"]) { padding-right: 6px; }
  .conv-rangee { gap: 5px; }
}
/* En fiche étroite, chaque groupe garde ses actions accessibles ; la rangée suivante évite tout débordement. */
@media (min-width: 721px) {
  @container conversation (max-width: 1000px) {
    .conv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .conv-rangee { flex-wrap: wrap; min-width: 0; }
    .conv-ecart { display: none; }
    .conv-rangee-secondaire { margin-left: auto; }
  }
}
/* Sur tablette et téléphone, les actions doivent rester dans la fiche, y compris après un appel. */
@container conversation (max-width: 700px) {
  .conv-actions, .conversation[data-termine] .conv-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .conv-rangee, .conv-fin { flex-wrap: wrap; }
  .conv-ecart { display: none; }
  .conv-fin { justify-content: flex-start; }
  .conv-fin .fin-liste-texte { flex-basis: 100%; text-align: left; }
}
/* Fenêtre haute : les créneaux grandissent (≈ 78 px à 960 de haut) ; le contenu de la rangée reste groupé au centre. */
@media (min-height: 860px) {
  .ligne { grid-template-rows: 18px auto; align-content: center; row-gap: 4px; }
  .ligne-l1 { line-height: 18px; }
  .ligne-numero { font-size: 15px; line-height: 18px; }
  .ligne-chrono { font-size: 14px; line-height: 18px; }
  .ligne-l2 { font-size: 12.5px; line-height: 15px; }
  .ligne-actions { align-self: center; }
}

/* ------------------------------------------------------------ Panneau latéral : réglages et derniers appels */
/* Surface pleine arrondie côté page, ombre de flottant (bilan.css, .panneau-lateral) ; dedans, ni cadre ni filet : les
   réglages dans un bloc surface-alt, les derniers appels en rangées arrondies au fond alterné très doux. */
.panneau-lignes { display: grid; align-content: start; gap: 22px; padding: 22px 22px 26px; outline: none; max-width: calc(100vw - var(--oaa-nav)); }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panneau-tete h2 { margin: 0; font: 650 16px/1.3 var(--oaa-police-titre); letter-spacing: -.015em; color: var(--oaa-encre); }
.reglages { padding: 16px 18px 14px; border: 1px solid transparent; border-radius: 18px; background: var(--oaa-surface-alt); }
.reglages summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; border-radius: var(--oaa-rayon-petit); }
.reglages summary::-webkit-details-marker { display: none; }
.reglages summary::before {
  content: ""; align-self: center; width: 7px; height: 7px; flex: none; border: solid var(--oaa-secondaire); border-width: 0 1.8px 1.8px 0;
  border-radius: 0 0 1.5px 0; transform: rotate(-45deg); transition: transform var(--oaa-duree-rapide) ease;
}
.reglages[open] summary::before { transform: rotate(45deg); }
.reglages summary h3 { flex: none; margin: 0; font: 650 14px/1.3 var(--oaa-police-titre); }
.reglages-resume { color: var(--oaa-secondaire); font-size: 12px; }
.reglages[open] .reglages-resume { display: none; }
.reglages[open] summary { margin-bottom: 8px; }
/* Réglages séparés par l'espace ; les champs en surface sur le bloc. */
.reglage-ligne {
  display: grid; grid-template-columns: 1fr 76px; align-items: center; column-gap: 12px; padding: 8px 0;
  color: var(--oaa-encre); font: 500 13.5px/1.35 var(--oaa-police);
}
.reglage-ligne small { grid-column: 1; color: var(--oaa-secondaire); font-size: 12px; }
.reglage-ligne input { grid-column: 2; grid-row: 1 / span 2; width: 76px; height: 36px; text-align: right; background: var(--oaa-surface); }
.reglage-ligne input:hover:not(:disabled):not(:focus) { background: color-mix(in srgb, var(--oaa-encre) 4%, var(--oaa-surface)); }
.reglage-case { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; color: var(--oaa-encre); font: 500 13.5px/1.4 var(--oaa-police); }
.reglage-case small { display: block; color: var(--oaa-secondaire); font-size: 12px; }
.reglages .sous-titre { font-size: 12.5px; line-height: 1.5; }
#estimation { color: var(--oaa-encre); font-weight: 550; }
.derniers { display: grid; gap: 10px; min-width: 0; }
.derniers .surtitre { padding: 0 4px; }
/* Derniers appels : chaque appel sur deux lignes (heure, contact, résultat / ligne, numéro, durée) pour tenir dans les
   420 px du panneau sans défilement horizontal ; les en-têtes restent pour les lecteurs d'écran. */
.derniers .defile { overflow: hidden; }
.derniers table, .derniers tbody { display: block; width: 100%; font-size: 13px; }
.derniers tbody { display: grid; gap: 2px; }
.derniers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.derniers tbody tr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 9px 12px; border-radius: 14px; background: transparent; transition: background-color var(--oaa-duree-rapide) ease;
}
.derniers tbody tr:nth-child(even) { background: var(--rangee-alternee); }
.derniers tbody tr:hover { background: var(--oaa-surface-alt); }
.derniers tbody td { display: block; min-width: 0; padding: 0; border: 0; background: none; white-space: nowrap; text-align: left; }
.derniers td:nth-child(1) { grid-area: 1 / 1; color: var(--oaa-encre); font-weight: 650; }
.derniers td:nth-child(2) { grid-area: 2 / 1; color: var(--oaa-secondaire); font-size: 12px; }
.derniers td:nth-child(2)::before { content: "Ligne "; }
.derniers td:nth-child(3) { grid-area: 2 / 2; color: var(--oaa-secondaire); font-size: 12px; }
.derniers td:nth-child(4) { grid-area: 1 / 2; overflow: hidden; text-overflow: ellipsis; color: var(--oaa-encre); font-weight: 600; }
.derniers td:nth-child(4) .contact { overflow: hidden; text-overflow: ellipsis; }
.derniers td:nth-child(5) { grid-area: 1 / 3; justify-self: end; }
.derniers td:nth-child(6) { grid-area: 2 / 3; justify-self: end; color: var(--oaa-secondaire); font-size: 12px; }
/* « Rappeler » (appels d'une liste) : une quatrième colonne sur les deux lignes de l'appel. */
.derniers tbody tr:has(td:nth-child(7)) { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.derniers td:nth-child(7) { grid-area: 1 / 4 / span 2 / 5; align-self: center; }
.derniers .rappeler-dernier.bouton.mini { width: 32px; height: 32px; padding: 0; justify-content: center; }
.derniers .resultat { height: 22px; font-size: 12px; }

/* ------------------------------------------------------------ Mouvement réduit : les témoins maison disparaissent */
@media (prefers-reduced-motion: reduce) {
  .ligne-repere::before, .ligne-repere::after, .ligne-cinetique, .conv-age.eclat::after { display: none; }
}

/* ------------------------------------------------------------ Couleurs forcées (contraste élevé de Windows)
   Un pictogramme dessiné par un pseudo-élément masqué garde une couleur système : son fond en currentColor ou en jeton
   serait forcé à Canvas (case vide). L'onglet actif perd son fond de surface : il
   prend le surlignage du système. Les bordures transparentes (rangées, fiche, blocs, note, pilules) redeviennent des
   contours. Spécificités égales aux règles de base, ce bloc venant après. */
@media (forced-colors: active) {
  .ligne-repere::before, .ligne-repere::after, .ligne-cinetique { display: none; }
  .nav-item::before, .transport .segment::before, .transport #principal::before,
  .conv-actions .micro::before, .conv-actions .micro[data-coupe="1"]::before { background: ButtonText; }
  .transport .segment:disabled::before, .transport #principal:disabled::before,
  .conv-actions .micro:disabled::before { background: GrayText; }
  .alerte-page::before, .licence-resume[data-etat="verifiee"]::before, .fiche-titre::before, .conv-note-titre::before { background: CanvasText; }
  /* Sans forced-color-adjust, Chrome poserait sa plaque Canvas derrière le mot : HighlightText y disparaîtrait. */
  .onglets [role="tab"][aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .onglets [role="tab"][aria-selected="true"] .oaa-ic { background: HighlightText; }
  .onglets [role="tab"][aria-selected="true"]:focus-visible { outline-color: HighlightText; }
  /* La ligne qui a la main se reconnaît aussi sans couleur : son badge plein en surlignage. */
  .ligne.a-la-main .ligne-titre { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ------------------------------------------------------------ Fenêtre étroite : la conversation active passe en tête */
@media (max-width: 999px), (max-height: 560px) {
  body.oaa-geode { overflow: auto; height: auto; min-height: 100vh; }
  .page { height: auto; min-height: 100vh; }
  .nav-app { position: sticky; top: 0; }
  .poste { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; }
  .poste > .conversation { grid-column: 1; grid-row: 3; }
  /* La page défile : la pile des transferts reprend sa place dans le flux, sous la barre, toutes ses cartes visibles. */
  .page { grid-template-rows: var(--oaa-barre) auto minmax(0, 1fr); }
  #vue-lignes, .vue-integree { grid-row: 3; }
  .transferts-recus { position: static; grid-row: 2; display: grid; width: auto; padding: 10px 12px 0; }
  .transferts-recus:not([data-autres="0"])::after { content: none; }
  .transfert-alerte ~ .transfert-alerte { display: flex; }
  .transfert-alerte { height: auto; padding: 9px 12px 9px 14px; }
  .transfert-texte { display: block; font-size: 14px; line-height: 1.35; }
  .transfert-texte > * { display: inline; white-space: normal; }
  .transfert-de { color: inherit; font-size: inherit; }
  .grille-lignes { grid-template-rows: none; grid-auto-rows: minmax(64px, auto); }
  .conv-plein { height: auto; }
  .conv-corps, .conv-corps.note-large { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .conv-fiche { overflow: visible; }
  .conv-note textarea { min-height: 6lh; field-sizing: content; max-height: 50vh; }
  .conv-identite { flex-wrap: wrap; }
  /* Un menu long reste dans la fenêtre, même si les actions de la fiche défilent. */
  .transfert-menu { position: fixed; right: 12px; bottom: 12px; min-width: 0; width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); z-index: 40; }
  .poste:has(.conversation:not([data-termine]) #conv-plein:not([hidden])) .conversation { grid-row: 2; }
  .poste:has(.conversation:not([data-termine]) #conv-plein:not([hidden])) .rail-lignes { grid-row: 3; }
}
/* Compte et Recharger utilisent la navigation principale du poste. */
.compte-navigation { display: none; }
.nav-licence[aria-current="page"] { background: var(--oaa-surface-alt); color: var(--oaa-accent); }

/* Notifications internes : panneau hors de la barre pour ne jamais être coupé par son défilement. */
.notifications-cloche { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--oaa-secondaire); background: var(--oaa-bouton-satin); box-shadow: var(--oaa-bouton-ombre); cursor: pointer; }
.notifications-cloche:hover, .notifications-cloche[aria-expanded="true"] { color: var(--oaa-encre); background: color-mix(in srgb, var(--oaa-accent) 12%, var(--oaa-surface)); }
.notifications-compteur { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--oaa-fond); border-radius: 12px; background: var(--oaa-encre); color: var(--oaa-surface); font: 700 9px/1 var(--oaa-police); }
.notifications-panel { position: fixed; z-index: 50; top: calc(var(--oaa-barre) - 5px); right: 16px; display: flex; flex-direction: column; width: min(430px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - var(--oaa-barre) - 16px)); padding: 0; border: 1px solid transparent; border-radius: 22px; background: var(--oaa-surface); color: var(--oaa-encre); box-shadow: var(--oaa-ombre-flottant); overflow: hidden; }
.notifications-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; }
.notifications-surtitre { color: var(--oaa-secondaire); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.notifications-entete h2 { margin: 4px 0 0; font: 600 23px/1.2 var(--oaa-police-affiche); letter-spacing: -.035em; }
.notifications-fermer { width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: var(--oaa-fond); color: var(--oaa-secondaire); font: 400 23px/1 var(--oaa-police); cursor: pointer; }
.notifications-outils { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; padding: 0 22px 15px; color: var(--oaa-secondaire); font-size: 11px; }
.notifications-outils .lien { font-size: 10px; }
.notifications-statut { margin: 0; padding: 24px 22px; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.6; text-align: center; }
.notifications-liste { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px; }
.notification-message { position: relative; padding: 17px 14px; margin-bottom: 6px; border-radius: 12px; background: var(--oaa-fond); }
.notification-message[data-non-lue="true"] { background: color-mix(in srgb, var(--oaa-accent) 8%, var(--oaa-fond)); }
.notification-message h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font: 650 13px/1.5 var(--oaa-police); overflow-wrap: anywhere; }
.notification-message[data-non-lue="true"] h3::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--oaa-accent); }
.notification-message p { margin: 0 0 10px; color: var(--oaa-secondaire); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-message time { color: var(--oaa-secondaire); font-size: 10px; }
.notifications-pied { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.notifications-cloche:focus-visible, .notifications-panel button:focus-visible, .notifications-pastille button:focus-visible, #notifications-titre:focus-visible { outline: 2px solid var(--oaa-info); outline-offset: 3px; }
/* Un aperçu borné ; l’annonce complète reste disponible dans la cloche. */
.notifications-pastille { position: fixed; z-index: 60; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 18px; border: 1px solid color-mix(in srgb, var(--oaa-accent) 24%, var(--oaa-bord)); border-radius: 18px; background: var(--oaa-surface); color: var(--oaa-encre); box-shadow: var(--oaa-ombre-flottant); animation: notification-arrive .18s ease-out; }
.notifications-pastille-surtitre { display: block; padding-right: 28px; color: var(--oaa-accent); font: 650 10px/1.5 var(--oaa-police); letter-spacing: .06em; text-transform: uppercase; }
.notifications-pastille-surtitre::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.notifications-pastille h3 { margin: 8px 0 6px; padding-right: 20px; font: 650 14px/1.4 var(--oaa-police); overflow-wrap: anywhere; }
.notifications-pastille p { margin: 0 0 14px; color: var(--oaa-secondaire); font: 400 12px/1.55 var(--oaa-police); overflow-wrap: anywhere; }
.notifications-pastille .bouton { min-height: 34px; }
.notifications-pastille-fermer { position: absolute; top: 10px; right: 10px; }
@keyframes notification-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .notifications-pastille { animation: none; } }
/* Deux niveaux avant que les commandes ne débordent : services en haut, liste et transport en dessous. */
@media (max-width: 1560px) {
  body.oaa-geode { --oaa-barre: 124px; }
  .barre-etat, .barre-etat.serree-4 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 44px; gap: 8px 12px; padding: 10px 16px; overflow: visible; }
  .panel-actions { grid-column: 2; grid-row: 1; justify-self: end; justify-content: flex-end; flex-wrap: wrap; max-width: 100%; margin: 0; }
  .barre-etat .barre-mot { display: block; grid-column: 1; grid-row: 1; }
  .barre-liste { grid-column: 1; grid-row: 2; min-width: 0; width: 100%; max-width: none; }
  .barre-etat .transport { grid-column: 2; grid-row: 2; justify-self: end; }
  .barre-etat .barre-espace, .barre-etat .bande-etats, .barre-etat .barre-progression { display: none; }
}
@media (max-width: 1112px) {
  .panel-actions { grid-column: 1 / -1; }
  .barre-etat .barre-mot { display: none; }
}
@media (min-width: 1000px) and (max-width: 1112px) {
  .barre-etat .panel-actions { grid-column: 2; }
  .barre-etat .barre-mot { display: block; }
}
/* Les transferts reçus utilisent une rangée dédiée lorsque la barre est sur deux niveaux. */
@media (min-width: 1000px) and (max-width: 1560px) and (min-height: 561px) {
  .page { grid-template-rows: var(--oaa-barre) auto minmax(0, 1fr); }
  #vue-lignes, .vue-integree { grid-row: 3; }
  .poste, .vue-integree { height: 100%; }
  .transferts-recus { position: static; grid-row: 2; display: grid; width: auto; padding: 0 18px 8px 10px; }
  .transferts-recus:not([data-autres="0"])::after { content: none; }
  .transfert-alerte ~ .transfert-alerte { display: flex; }
  .transfert-alerte { flex-wrap: wrap; height: auto; padding-block: 8px; }
}
@media (max-width: 620px) {
  body.oaa-geode { --oaa-barre: 156px; }
  .barre-etat { padding: 8px; gap: 6px; }
  .barre-liste { padding-left: 10px; }
  .barre-liste > span { display: none; }
  .barre-etat .transport .segment { padding: 0 7px; font-size: 11px; }
  .barre-etat .transport-direct { display: none; }
  .notifications-panel { right: 8px; top: 12px; max-height: calc(100dvh - 24px); }
}

.ligne-sortant { display: block; margin-top: 3px; font-size: 10px; color: var(--oaa-secondaire); }

/* Les cadres restent dans la colonne du téléphone, même si leur barre est longue. */
.vue-integree, .vue-integree iframe { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .fiches-barre { height: auto; min-height: 44px; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .fiches-barre .sous-titre, .fiches-barre .lien { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

/* Le vrai numéro sortant garde sa propre rangée et ne se fait pas couper par le statut. */
.ligne:has(.ligne-sortant:not([hidden])) {
  grid-template-areas: "badge l1 chrono" "badge l2 actions" "badge sortant actions";
  grid-template-rows: 16px minmax(0, 1fr) 12px;
}
.ligne:has(.ligne-sortant:not([hidden])) .ligne-l2 { -webkit-line-clamp: 1; }
.ligne-sortant { grid-area: sortant; margin: 0; min-width: 0; line-height: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Les lignes au repos restent compactes ; les appels gardent la place de leurs actions et de leur vrai numéro sortant. */
.grille-lignes { grid-template-rows: none; grid-auto-rows: minmax(min-content, 1fr); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent; }
.ligne { min-height: 54px; }
.ligne[data-etat="libre"].au-repos { min-height: 48px; padding-block: 8px; }
.ligne[data-etat="libre"].au-repos .ligne-l2 { grid-area: 1 / 2 / 3 / 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ligne[data-etat="libre"].au-repos .ligne-puce { flex: none; height: auto; margin: 0; padding: 0; background: transparent; color: var(--oaa-encre); font-size: 12.5px; }
.ligne[data-etat="libre"].au-repos .ligne-etat { min-width: 0; color: var(--oaa-secondaire); font-size: 11.5px; }
.ligne:has(.ligne-sortant:not([hidden])) { min-height: 70px; padding-bottom: 8px; }

/* Sur une petite hauteur, le rail entier défile plutôt que de réduire les cartes à une bande. */
@media (min-width: 1081px) and (max-height: 650px) {
  .rail-lignes { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--oaa-bord-fort) transparent; padding-right: 3px; }
  .rail-lignes .grille-lignes { flex: none; overflow: visible; }
}
@media (max-width: 1080px) {
  .rail-lignes .grille-lignes { flex: none; overflow: visible; }
  .ligne { min-height: 58px; }
}
@media (max-width: 620px) {
  .rail-tete { flex-wrap: wrap; min-height: 32px; }
  .rail-tete .rail-ouvrir { height: 40px; line-height: 40px; font-size: 12px; }
  #appel-direct-numero { height: 44px; font-size: 16px; }
  .appel-direct-rangee .bouton { height: 44px; padding-inline: 12px; }
  .ligne-actions .touche, .ligne-lien { min-width: 44px; height: 44px; }
  .ligne { min-height: 72px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ligne[data-etat="libre"].au-repos { min-height: 50px; }
  .ligne:has(.ligne-sortant:not([hidden])) { min-height: 84px; }
}

@media (max-width: 720px) {
  .conv-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .conv-rangee { min-width: 0; flex-wrap: wrap; }
  .conv-actions .bouton.fiche { flex: 1 1 auto; max-width: 100%; }
  .conv-ecart { display: none; }
}

/* La fiche et la saisie passent en blocs complets sur téléphone. */
@media (max-width: 720px) {
  .conv-corps, .conv-corps.note-large { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .conv-fiche { display: flex; flex-direction: column; width: 100%; overflow: visible; }
  .conv-saisie, .conv-note { width: 100%; grid-template-rows: auto auto; }
  body .conv-note #conv-note { height: auto; min-height: 140px !important; max-height: 40dvh; resize: vertical; }
  .fiche-section { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "source" "lignes"; padding: 12px 14px; }
  .fiche-source { justify-self: start; max-width: 100%; overflow-wrap: anywhere; }
  .fiche-coordonnees .fiche-lignes, .fiche-banque .fiche-lignes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fiche-coordonnees .fiche-ligne, .fiche-banque .fiche-ligne { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  .conv-fiche dd.chiffres { white-space: normal; overflow-wrap: anywhere; }
}

/* Téléphone : adaptation ciblée, sans changement du poste ordinateur. */
@media (max-width: 620px) {
  .poste { height: auto; padding: 8px; gap: 12px; }
  .rail-lignes { padding: 10px; border-radius: 22px; }
  .conversation { padding: 14px 12px; border-radius: 22px; }
  .poste:has(.conversation:not([data-termine]) #conv-plein:not([hidden])) .conversation { grid-row: 2; }
  .poste:has(.conversation:not([data-termine]) #conv-plein:not([hidden])) .rail-lignes { grid-row: 3; }
  .conv-plein, .conv-plein:has(#conv-medias:not([hidden])) { grid-template-rows: auto auto auto auto; height: auto; }
  .conv-plein > .conv-identite { grid-row: 1; }
  .conv-plein > .conv-pied { grid-row: 2; }
  .conv-plein > .conv-corps { grid-row: 3; }
  .conv-plein > #conv-medias { grid-row: 4; }
  .conv-identite { gap: 10px; }
  .conv-age { --oaa-taille-gemme: 78px; flex: none; }
  .conv-age b { font-size: 38px; }
  .conv-duree { display: flex; flex: 1 1 100%; align-items: baseline; justify-content: flex-start; gap: 10px; text-align: left; }
  .conv-chrono { margin-top: 0; font-size: 24px; }
  .conv-personne { flex: 1 1 170px; min-width: 0; }
  .conv-tete { flex-wrap: wrap; white-space: normal; }
  .conv-nom-ligne, .conv-sous-ligne { min-width: 0; overflow-wrap: anywhere; }
  #ouvrir-lignes { min-height: 44px; }
  .conv-nom, .conv-nom[data-long="oui"] { font-size: 24px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .conv-actions .bouton.fiche { min-height: 44px; height: auto; padding-block: 10px; white-space: normal; line-height: 1.3; }
  .conv-rangee { gap: 8px; }
  .conv-rangee .bouton { flex: 1 1 120px; }
  .conv-rangee-secondaire .micro { flex-basis: 150px; }
  .conv-corps, .conv-corps.note-large { grid-template-columns: minmax(0, 1fr); }
  .conv-fiche dd.chiffres { white-space: normal; overflow-wrap: anywhere; }
  .fiche-section { padding: 13px; border-radius: 17px; }
  .conv-note, .conv-facture { padding: 0; }
  .conv-note textarea { font-size: 16px; }
  .conv-saisie { min-height: 320px; }
  .rail-tete { flex-wrap: wrap; height: auto; }
  .rail-tete .rail-ouvrir { white-space: normal; max-width: 100%; line-height: 1.3; padding-block: 6px; }
  .conv-fin .fin-liste-texte { overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
  .notifications-panel { right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); }
  .notifications-fermer, .notifications-pastille-fermer { min-width: 44px; min-height: 44px; }
  .panel-actions .panel-bouton, .panel-actions .notifications-cloche, .panel-actions .licence-renouveler { min-height: 44px; }
  .panel-actions :is(.panel-support, .panel-groupe, .panel-deconnexion, .notifications-cloche) { min-width: 44px; }
  .panel-theme .oaa-theme-control button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .transfert-alerte { flex-wrap: wrap; padding: 12px; }
  .transfert-alerte .bouton { min-height: 44px; }
  .transfert-menu { bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .panneau-lateral { top: max(8px, env(safe-area-inset-top)); right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .alerte-page { top: max(12px, env(safe-area-inset-top)); max-width: calc(100vw - 24px); }
}

/* Les tablettes en paysage conservent le rail à côté de la conversation. */
@media (min-width: 1000px) and (max-width: 1200px) and (min-height: 561px) {
  body.oaa-geode { --rail: 290px; --oaa-barre: 124px; }
  .poste { gap: 12px; padding-right: 12px; }
  .rail-lignes { padding: 10px; }
  .rail-lignes .grille-lignes { flex: 1 1 0; overflow-y: auto; }
  .rail-tete { flex-wrap: wrap; }
  .rail-resume { padding-inline: 6px; }
  .rail-tete .rail-ouvrir { max-width: 100%; }
  .conversation { padding: 16px; }
}
/* Tablette basse : priorité à la vue simultanée des six lignes. L'aide de composition reste accessible
   aux lecteurs d'écran ; les retours d'erreur et de confirmation conservent leur place visible. */
@media (min-width: 1000px) and (max-width: 1200px) and (min-height: 561px) and (max-height: 859px) {
  .rail-lignes { padding: 8px; gap: 6px; }
  .rail-pied, .appel-direct { padding: 4px; }
  .grille-lignes { gap: 6px; }
  .ligne { padding-block: 6px; }
  .appel-direct-statut:not([data-ton="attention"]):not([data-ton="info"]) {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
/* Le rail et tous les appels restent utilisables avec un doigt, sans masquer d'action. */
@media (pointer: coarse), (max-width: 620px) {
  .panel-bouton, .panel-actions .notifications-cloche, .panel-actions .licence-renouveler,
  .barre-etat .transport .segment, .barre-etat .transport-direct { min-height: 44px; }
  .panel-theme .oaa-theme-control button { min-width: 44px; min-height: 44px; }
  .appel-direct-rangee .bouton, #appel-direct-numero, #conv-facture-numero { min-height: 44px; }
  #appel-direct-numero { font-size: 16px; }
  .grille-lignes { grid-auto-rows: minmax(76px, auto); }
  .ligne { grid-template-rows: 18px minmax(44px, 1fr); padding-block: 6px; }
  .ligne-actions .touche, .ligne-lien, .ligne-reessayer.bouton.mini { min-width: 44px; min-height: 44px; }
  .ligne-actions { gap: 4px; }
  .ligne-l2 { align-self: center; }
  .ligne.sans-numero .ligne-reessayer.bouton.mini { min-height: 44px; }
  .rail-rappels-annuler, .rail-tete .bouton, .transfert-licence, .transfert-fermer,
  .notifications-outils .lien, .notifications-pied .bouton, .notifications-pastille .bouton,
  .panneau-lignes .bouton, .panneau-lignes summary, .reglage-ligne input { min-height: 44px; }
  .transfert-fermer { padding-inline: 12px; }
  .reglages summary { align-items: center; }
}
@media (max-width: 620px) {
  .ligne { grid-template-areas: "badge l1 chrono" "badge l2 l2" ". actions actions"; grid-template-rows: 18px auto 44px; gap: 5px 8px; }
  .ligne-actions { justify-self: end; }
  .ligne.sans-numero .ligne-l2 { grid-area: 1 / 2 / 3 / 4; }
  .ligne.sans-numero .ligne-actions { grid-row: 3; }
}
/* Sur les petits téléphones, le nom de liste garde sa propre rangée. */
@media (max-width: 399px) {
  .numero-sortant-rangee #numero-sortant-choix:disabled { font-size: 13px !important; }
  body.oaa-geode .page .barre-etat { grid-template-rows: auto 44px 44px; }
  .barre-etat .barre-liste { grid-column: 1 / -1; grid-row: 2; }
  .barre-etat .transport { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; }
  .barre-etat .transport .segment { flex: 1; justify-content: center; }
}
/* Le nom conserve sa hauteur lorsqu’il passe sous le numéro. */
.ligne { grid-template-rows: max-content minmax(min-content, 1fr); }
@media (pointer: coarse) {
  .grille-lignes, .rail-lignes:has(.entrants-recus:not([hidden])) .grille-lignes { grid-auto-rows: minmax(min-content, 1fr); }
  .ligne { min-height: min-content; }
}
@media (max-width: 620px) {
  .ligne { grid-template-rows: max-content minmax(min-content, 1fr) minmax(44px, auto); }
}
@media (prefers-reduced-motion: reduce) {
  .panel-bouton, .ligne, .barre-liste, .conv-plein, .fiche-section { animation: none; transition: none; }
}