/* Pilotage des appels · styles du module « Direct : la cascade d’un appel en temps réel » (direct.js).
   Jetons et composants de la refonte : app.css ; contrat du socle : specs/front-v2.md.
   Fond #E9EDF4 et cartes blanches bordées partout ; la nuit reste à « barre-actions ». Empilement : scène de présentation 41
   (au-dessus des barres et du menu du compte, sous les volets), voile 44 et panneau « Activité » 45, toasts 50.
   Version 3 : un appel est présenté par sa ligne d'agence (pictogramme de ligne, jamais l'avatar d'une personne ; Léa, avatar libre). */

/* ===== « barre-actions » : cloche et « Mode présentation » (sur la nuit, même allure que le bouton de Léa) ===== */
.m-direct-action {
  position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0;
  height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: #FFFFFF; font: 600 0.9375rem/1 var(--police); letter-spacing: -0.006em; white-space: nowrap;
  transition: background-color var(--d-rapide) var(--c-standard), border-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
.m-direct-action svg { width: 19px; height: 19px; stroke-width: 1.8; }
@media (hover: hover) { .m-direct-action:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .22); } }
.m-direct-action:active { transform: scale(.98); }
.m-direct-action:focus-visible { outline: 2px solid var(--focus-nuit); outline-offset: 2px; }
.m-direct-action-icone { flex: none; width: 44px; padding: 0; }
/* « Mode présentation » : lien de l'en-tête, même allure que « Passer un appel » ; sous 900 px, il passe dans le menu du compte */
.m-direct-action-scene { flex: 1 1 100%; justify-content: flex-start; padding-left: 13px; text-decoration: none; }
.m-direct-action-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Compteur des notifications non lues : texte blanc sur l'action M&R (5,5:1), détouré sur la nuit */
.m-direct-compteur {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-capsule);
  background: var(--action); color: #FFFFFF; font: 700 0.6875rem/20px var(--police); letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--nuit);
}
/* Appel en cours : point vert qui respire sur la cloche */
.m-direct-vivant-cloche { position: absolute; left: 8px; bottom: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--direct); box-shadow: 0 0 0 2px var(--nuit); }
.m-direct-vivant-cloche::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: m-direct-onde 2s var(--c-sortie) infinite; }

/* ===== Points « en direct » (fond clair) ===== */
.m-direct-point { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex: none; }
.m-direct-point::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: m-direct-onde 2s var(--c-sortie) infinite; }
.m-direct-point-calme { background: #A3A8BA; }
.m-direct-point-calme::after { display: none; }
@keyframes m-direct-onde { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }

/* ===== Vue d'ensemble : section « En direct » sous le titre de la page ===== */
.emplacement-direct-vue { margin: -8px 0 36px; min-width: 0; }
.m-direct-vue-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.m-direct-vue-tete .section-titre { margin: 0; display: flex; align-items: center; gap: 10px; }
.m-direct-vue:not(.m-direct-vue-vivant) .m-direct-vue-tete .m-direct-point { background: #A3A8BA; }
.m-direct-vue:not(.m-direct-vue-vivant) .m-direct-vue-tete .m-direct-point::after { display: none; }
.m-direct-vue-cartes { display: grid; gap: 20px; }
/* La cascade remplace le bandeau « En direct » du cœur tant qu'elle est affichée (même appel, deux fois sinon) */
.page:has(> .emplacement-direct-vue > .m-direct-vue:not([hidden])) > .bandeau-direct { display: none; }

/* ===== Cascade d'un appel ===== */
.m-direct-cascade { container-type: inline-size; min-width: 0; background: var(--surface); border: 1px solid var(--contour-carte); border-radius: var(--r-xl); box-shadow: var(--ombre-carte); }
.m-direct-cascade[data-etat="vivant"] { box-shadow: 0 0 0 3px rgba(14, 159, 110, .12), var(--ombre-carte); }

.m-direct-tete { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 22px; border-bottom: 1px solid var(--separateur); }
.m-direct-tete-qui { flex: none; display: grid; place-items: center; min-width: 42px; }
/* Ligne d'agence : pictogramme d'appel entrant (bleu) ou sortant (vert), à la place d'un avatar de personne */
.m-direct-ligne-picto { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-teinte); color: var(--accent); }
.m-direct-ligne-picto svg { width: 20px; height: 20px; stroke-width: 1.9; }
.m-direct-ligne-picto-sortant { background: var(--vert-pale); color: var(--vert-texte); }
.m-direct-lea-tete { display: block; height: 48px; width: auto; }
.m-direct-tete-texte { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; justify-items: start; }
.m-direct-badge {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--r-capsule);
  background: var(--remplissage); color: var(--neutre-texte); font: 600 0.75rem/1 var(--police); letter-spacing: 0; white-space: nowrap;
}
.m-direct-badge .chargeur { width: 12px; height: 12px; }
.m-direct-cascade[data-etat="vivant"] .m-direct-badge { background: var(--vert-pale); color: var(--vert-texte); }
.m-direct-cascade[data-etat="traitement"] .m-direct-badge { background: var(--accent-teinte); color: var(--accent-texte); }
.m-direct-titre { margin: 2px 0 0; font: 650 1.0625rem/1.3 var(--police); letter-spacing: -0.012em; color: var(--texte); overflow-wrap: anywhere; }
.m-direct-titre-role { font-weight: 500; color: var(--texte-2); }
.m-direct-meta { margin: 0; font: 400 0.8125rem/1.4 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-icone-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--texte-2); transition: background-color var(--d-rapide) var(--c-standard), color var(--d-rapide) var(--c-standard);
}
.m-direct-icone-btn svg { width: 18px; height: 18px; }
@media (hover: hover) { .m-direct-icone-btn:hover { background: var(--remplissage); color: var(--texte); } }
.m-direct-icone-btn:active { background: var(--remplissage-presse); }
.m-direct-masquer { align-self: flex-start; margin-top: -4px; }

/* Corps : les étapes, puis le résultat ; côte à côte dès que la carte est assez large */
.m-direct-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 22px 22px; }
.m-direct-col-etapes, .m-direct-col-resultat { min-width: 0; }
/* Colonne du résultat : absente tant qu'il n'y a rien à montrer (sur une carte étroite, l'attente ne s'affiche pas) */
.m-direct-col-resultat { display: none; }
.m-direct-col-resultat:has(> .m-direct-resultat:not([hidden])) { display: block; }
.m-direct-resultat-attente { display: none; }
/* Carte étroite, appel fini : le résultat passe avant le déroulé */
.m-direct-cascade[data-etat="fini"] .m-direct-col-resultat { order: -1; }
@container (min-width: 720px) {
  .m-direct-cascade[data-etat="fini"] .m-direct-col-resultat { order: 0; }
  .m-direct-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .m-direct-cascade[data-etat="fini"] .m-direct-corps { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .m-direct-resultat-attente:not([hidden]) {
    display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 200px; padding: 24px; text-align: center;
    border: 1.5px dashed var(--separateur-fort); border-radius: var(--r-l); color: var(--texte-2);
  }
  .m-direct-resultat-attente svg { width: 24px; height: 24px; color: var(--texte-3); }
  .m-direct-resultat-attente p { margin: 0; max-width: 34ch; font: 400 0.875rem/1.5 var(--police); }
  .m-direct-col-resultat:has(> .m-direct-resultat-attente:not([hidden])) { display: block; height: 100%; }
}

/* Étapes : un rail, un nœud par étape ; la ligne se trace vers l'étape suivante quand elle apparaît */
.m-direct-etapes { list-style: none; margin: 0; padding: 0; display: grid; }
.m-direct-etape { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding-bottom: 16px; }
.m-direct-etape:last-child { padding-bottom: 0; }
.m-direct-rail { position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--separateur-fort); transform-origin: top; }
.m-direct-etape:last-child > .m-direct-rail { display: none; }
.m-direct-noeud {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--remplissage); color: var(--texte-2);
  transition: background-color var(--d-base) var(--c-standard), color var(--d-base) var(--c-standard);
}
.m-direct-noeud svg { width: 15px; height: 15px; stroke-width: 2; }
.m-direct-noeud .chargeur { width: 14px; height: 14px; }
.m-direct-etape[data-etat="fait"] > .m-direct-noeud { background: var(--vert-pale); color: var(--vert-texte); }
.m-direct-etape[data-etat="fait"] > .m-direct-noeud svg { stroke-width: 2.4; }
.m-direct-etape[data-etat="en_cours"] > .m-direct-noeud { background: var(--accent-teinte); color: var(--accent); animation: m-direct-halo 1.8s var(--c-sortie) infinite; }
.m-direct-etape[data-etat="attention"] > .m-direct-noeud { background: var(--ambre-pale); color: var(--ambre-texte); }
.m-direct-etape[data-etat="rouge"] > .m-direct-noeud { background: var(--rouge-pale); color: var(--rouge-texte); }
/* Léa : son avatar libre à la place du nœud, jamais dans un cercle */
.m-direct-etape[data-cle="lea"] > .m-direct-noeud { background: none; animation: none; border-radius: 0; place-items: end center; }
.m-direct-lea-noeud { display: block; height: 32px; width: auto; }
@keyframes m-direct-halo { 0% { box-shadow: 0 0 0 0 rgba(33, 60, 160, .28); } 70% { box-shadow: 0 0 0 9px rgba(33, 60, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 60, 160, 0); } }

.m-direct-etape-corps { min-width: 0; padding-top: 5px; }
.m-direct-etape-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.m-direct-etape-titre { font: 600 0.9375rem/1.35 var(--police); letter-spacing: -0.008em; color: var(--texte); }
.m-direct-etape[data-etat="en_cours"] .m-direct-etape-titre { color: var(--accent-texte); }
.m-direct-etape-droite { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font: 500 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-direct-note { font: 500 0.8125rem/1.3 var(--police); color: var(--accent-texte); }
.m-direct-chrono { font: 650 1.0625rem/1 var(--police); letter-spacing: 0; color: var(--vert-texte); font-variant-numeric: tabular-nums; }
.m-direct-etape-detail { margin-top: 4px; display: grid; gap: 6px; min-width: 0; }
.m-direct-sous { margin: 0; font: 400 0.875rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); }
/* Appel fini : le déroulé se resserre (titres et coches), le résultat dit l'essentiel ; les notes de Léa restent */
.m-direct-cascade[data-etat="fini"] .m-direct-etape:not([data-cle="lea"]) .m-direct-etape-detail { display: none; }
.m-direct-cascade[data-etat="fini"] .m-direct-etape { padding-bottom: 12px; }
.m-direct-cascade[data-etat="fini"] .m-direct-etape:last-child { padding-bottom: 0; }
.m-direct-client { color: var(--texte); }
.m-direct-numero { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-direct-attente-texte { color: var(--accent-texte); font-weight: 500; }
.m-direct-qui { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; font: 400 0.875rem/1.35 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-qui strong { color: var(--texte); font-weight: 600; }
.m-direct-lea-qui { display: block; height: 34px; width: auto; flex: none; }
/* Renseignements notés par Léa : une case par information, bien séparées, dans l'ordre de la conversation */
.m-direct-renseignements { margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.m-direct-renseignements > div { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 9px 12px 10px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); }
.m-direct-renseignements dt { font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-renseignements dd { margin: 0; font: 500 0.9375rem/1.4 var(--police); letter-spacing: -0.006em; color: var(--texte); overflow-wrap: anywhere; }
.m-direct-notes-renvoi { display: none; }
/* Appel fini : les renseignements deviennent une liste compacte (libellé, valeur) dans une seule case bordée */
.m-direct-cascade[data-etat="fini"] .m-direct-renseignements { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 2px 0; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); }
.m-direct-cascade[data-etat="fini"] .m-direct-renseignements > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; gap: 2px 12px; padding: 7px 12px; border: 0; border-radius: 0; background: none; }
.m-direct-cascade[data-etat="fini"] .m-direct-renseignements > div + div { box-shadow: inset 0 1px 0 var(--separateur); }
.m-direct-cascade[data-etat="fini"] .m-direct-renseignements dd { font-size: 0.875rem; }

/* Renseignements de Léa en grand, dans la colonne du résultat pendant l'appel (carte large et mode présentation seulement) :
   l'étape n'en donne alors que le nombre. Sur une carte étroite, ils restent dans l'étape. */
.m-direct-notes { display: none; }
.m-direct-notes-tete { display: flex; align-items: flex-end; gap: 12px; }
.m-direct-lea-notes { display: block; height: 46px; width: auto; flex: none; }
.m-direct-notes-titres { min-width: 0; display: grid; gap: 1px; padding-bottom: 2px; }
.m-direct-notes-titre { margin: 0; font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.008em; color: var(--texte); }
.m-direct-notes-sous { margin: 0; font: 500 0.8125rem/1.35 var(--police); letter-spacing: 0; color: var(--accent-texte); }
.m-direct-notes-liste { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.m-direct-notes-liste > div { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 12px 14px 13px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); }
.m-direct-notes-liste dt { font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-notes-liste dd { margin: 0; font: 600 1.0625rem/1.35 var(--police); letter-spacing: -0.01em; color: var(--texte); overflow-wrap: anywhere; }
@container (min-width: 720px) {
  .m-direct-notes:not([hidden]) { display: grid; gap: 16px; align-content: start; }
  .m-direct-col-resultat:has(> .m-direct-notes:not([hidden])) {
    display: block; padding: 18px 18px 20px; border-radius: var(--r-l); background: var(--surface-inset); border: 1px solid var(--separateur);
  }
  .m-direct-avec-notes .m-direct-etape[data-cle="lea"] .m-direct-renseignements { display: none; }
  /* Les renseignements ont la plus grande part de la carte pendant l'appel */
  .m-direct-cascade.m-direct-avec-notes .m-direct-corps { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .m-direct-avec-notes .m-direct-etape[data-cle="lea"] .m-direct-notes-renvoi { display: block; }
}

/* Résultat : sur un fond légèrement teinté, cases blanches bordées */
.m-direct-col-resultat:has(> .m-direct-resultat:not([hidden])) { padding: 18px 18px 20px; border-radius: var(--r-l); background: var(--surface-inset); border: 1px solid var(--separateur); }
.m-direct-resultat-titre { margin: 0 0 6px; font: 650 0.75rem/1.3 var(--police); letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.m-direct-resume { margin: 0; font: 400 0.9375rem/1.55 var(--police); letter-spacing: -0.006em; color: var(--texte); }
.m-direct-resultat-texte { margin: 0; font: 400 0.9375rem/1.5 var(--police); color: var(--texte); }
.m-direct-cases { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.m-direct-case { display: grid; gap: 7px; align-content: start; min-width: 0; padding: 11px 13px 13px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); }
.m-direct-case dt { font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-case dd { margin: 0; min-height: 26px; display: flex; align-items: center; min-width: 0; }
/* Carte étroite (panneau) : statut et ressenti côte à côte, les honoraires sur toute la largeur */
@container (max-width: 599px) {
  .m-direct-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-direct-case:last-child { grid-column: 1 / -1; }
}
.m-direct-montant { font: 700 1.125rem/1.2 var(--police); letter-spacing: -0.02em; white-space: nowrap; color: var(--texte); }
.m-direct-discret { font: 400 0.875rem/1.35 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-attente-chiffre { font: 600 1.125rem/1 var(--police); color: var(--texte-3); }
.m-direct-liste { margin-top: 16px; display: grid; gap: 8px; }
.m-direct-liste-titre { margin: 0; font: 650 0.8125rem/1.3 var(--police); letter-spacing: 0; color: var(--texte); }
.m-direct-opp { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 11px 13px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); }
.m-direct-opp-texte { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.m-direct-opp-type { font: 600 0.75rem/1.3 var(--police); letter-spacing: 0; color: var(--accent-texte); }
.m-direct-opp-titre { font: 500 0.875rem/1.4 var(--police); letter-spacing: -0.004em; color: var(--texte); }
.m-direct-opp-montant { flex: none; font: 650 0.9375rem/1.3 var(--police); letter-spacing: -0.01em; white-space: nowrap; color: var(--texte); }
.m-direct-opp-montant span { font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; color: var(--texte-2); }
.m-direct-point-verif { display: grid; gap: 5px; padding: 11px 13px 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--contour-carte); box-shadow: inset 3px 0 0 var(--ambre); }
.m-direct-point-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.m-direct-point-type { font: 600 0.875rem/1.35 var(--police); color: var(--texte); }
.m-direct-citation { font: italic 400 0.875rem/1.5 var(--police); color: var(--texte); overflow-wrap: anywhere; }
.m-direct-points > .m-direct-sous { font-size: 0.8125rem; }
.m-direct-actions { margin-top: 18px; }
.m-direct-actions .btn { min-height: 40px; }

/* ===== Panneau « Activité » (volet à droite, comme celui de Léa) ===== */
html.m-direct-panneau-ouvert { overflow: hidden; }
/* Sur grand écran, les toasts passent à gauche du panneau au lieu de le couvrir ; sinon ils restent derrière le voile
   (visibles, sans cacher les boutons du volet) */
@media (min-width: 1100px) { html.m-direct-panneau-ouvert #toasts { right: 484px; } }
@media (max-width: 1099px) { html.m-direct-panneau-ouvert #toasts { z-index: 43; } }
html.m-direct-gouttiere { scrollbar-gutter: stable; }
.m-direct-voile { position: fixed; inset: 0; z-index: 44; background: rgba(14, 22, 56, .32); animation: m-direct-fondu var(--d-base) var(--c-standard); }
.m-direct-voile.m-direct-sortie { opacity: 0; pointer-events: none; transition: opacity var(--d-sortie) var(--c-standard); }
.m-direct-panneau {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(460px, 100vw);
  display: flex; flex-direction: column; background: var(--fond); color: var(--texte);
  border-left: 1px solid var(--contour-carte); box-shadow: var(--ombre-flottante); animation: m-direct-entre-droite var(--d-base) var(--c-sortie);
}
.m-direct-panneau:focus { outline: none; }
.m-direct-panneau.m-direct-sortie { opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity var(--d-sortie) var(--c-standard), transform var(--d-sortie) var(--c-standard); }
.m-direct-panneau-tete {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 10px 14px 20px; background: var(--surface); border-bottom: 1px solid var(--separateur);
}
.m-direct-panneau-titres { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.m-direct-panneau-titre { margin: 0; font: 700 1.125rem/1.25 var(--police); letter-spacing: -0.014em; }
.m-direct-panneau-sous { margin: 0; font: 400 0.8125rem/1.35 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-panneau-corps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 28px;
  padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}
.m-direct-bloc { min-width: 0; }
.m-direct-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: 8px; }
.m-direct-bloc-tete h3 { margin: 0; font: 700 1rem/1.3 var(--police); letter-spacing: -0.01em; }
.m-direct-panneau-cartes { display: grid; gap: 14px; }
.m-direct-panneau-cartes:empty { display: none; }
.m-direct-panneau .m-direct-tete { padding: 14px 14px 14px 18px; }
.m-direct-panneau .m-direct-corps { padding: 16px 18px 18px; }
.m-direct-panneau-vide, .m-direct-notifs-etat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 16px 18px; border-radius: var(--r-l);
  background: var(--surface); border: 1px solid var(--contour-carte); font: 400 0.875rem/1.5 var(--police); letter-spacing: 0; color: var(--texte-2);
}
.m-direct-notifs-etat p { margin: 0; flex: 1 1 200px; }
.m-direct-tout-lu::after { display: none; }
.m-direct-tout-lu:disabled { color: var(--texte-3); cursor: default; text-decoration: none; }
.m-direct-notifs-liste { list-style: none; margin: 0; padding: 4px; display: grid; background: var(--surface); border: 1px solid var(--contour-carte); border-radius: var(--r-l); box-shadow: var(--ombre-carte); }
.m-direct-notifs-liste > li + li { box-shadow: inset 0 1px 0 var(--separateur); }
.m-direct-notif {
  width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: start; min-height: 56px; padding: 12px;
  border: 0; border-radius: 12px; background: none; color: var(--texte); text-align: left; text-decoration: none; font: inherit; cursor: pointer;
  transition: background-color var(--d-rapide) var(--c-standard);
}
button.m-direct-notif[aria-disabled="true"] { cursor: default; }
@media (hover: hover) { a.m-direct-notif:hover, button.m-direct-notif:not([aria-disabled="true"]):hover { background: var(--survol-ligne); text-decoration: none; } }
.m-direct-notif:focus-visible { outline-offset: -2px; }
.m-direct-notif-point { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.m-direct-non-lue .m-direct-notif-point { background: var(--action); }
.m-direct-notif-texte { min-width: 0; display: grid; gap: 2px; }
.m-direct-notif-titre { font: 500 0.9375rem/1.4 var(--police); letter-spacing: -0.006em; color: var(--texte); }
.m-direct-non-lue .m-direct-notif-titre { font-weight: 650; }
.m-direct-notif-corps { font: 400 0.8125rem/1.45 var(--police); letter-spacing: 0; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-direct-notif-quand { margin-top: 2px; font: 400 0.75rem/1.4 var(--police); letter-spacing: 0; color: var(--texte-3); }
.m-direct-notif-chevron { margin-top: 3px; width: 16px; height: 16px; color: var(--texte-3); }

/* ===== Mode présentation (#/direct) : plein écran clair, grande typographie ===== */
html.m-direct-projection { overflow: hidden; }
/* Pendant la projection, la cascade dit tout : pas de toasts par-dessus (la page annonce elle-même les étapes aux lecteurs d'écran) */
html.m-direct-projection #toasts { display: none; }
.m-direct-scene {
  position: fixed; inset: 0; z-index: 41; overflow-y: auto; overscroll-behavior: contain; color: var(--texte);
  padding: calc(24px + env(safe-area-inset-top, 0px)) clamp(16px, 3.4vw, 56px) calc(40px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(1200px 680px at -6% -12%, rgba(33, 60, 160, .10), transparent 62%),
    radial-gradient(900px 600px at 106% 112%, rgba(233, 30, 140, .06), transparent 62%),
    var(--fond);
}
.m-direct-scene-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: clamp(22px, 3.4vh, 40px); }
.m-direct-scene-marque { display: flex; align-items: center; gap: 14px; min-width: 0; }
.m-direct-scene-logo { display: block; height: 46px; width: auto; flex: none; }
.m-direct-scene-marque-texte { display: grid; gap: 2px; min-width: 0; }
.m-direct-scene-h1 { margin: 0; font: 700 1.25rem/1.2 var(--police); letter-spacing: -0.016em; }
.m-direct-scene-h1:focus { outline: none; }
.m-direct-scene-marque-texte span { font: 400 0.9375rem/1.3 var(--police); letter-spacing: -0.006em; color: var(--texte-2); }
.m-direct-scene-outils { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.m-direct-scene-statut {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: var(--r-capsule);
  background: var(--surface); border: 1px solid var(--contour-carte); color: var(--texte-2); font: 600 0.9375rem/1 var(--police); letter-spacing: -0.006em;
}
.m-direct-scene-statut-vivant { background: var(--vert-pale); border-color: transparent; color: var(--vert-texte); }
.m-direct-statut-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-direct-statut-numero { display: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-direct-scene-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-capsule); cursor: pointer;
  border: 1px solid var(--contour-carte); background: var(--surface); color: var(--texte); font: 600 0.9375rem/1 var(--police); letter-spacing: -0.006em;
  transition: background-color var(--d-rapide) var(--c-standard), transform var(--d-pression) var(--c-sortie);
}
.m-direct-scene-btn svg { width: 17px; height: 17px; }
@media (hover: hover) { .m-direct-scene-btn:hover { background: var(--survol-ligne); } }
.m-direct-scene-btn:active { transform: scale(.97); }
.m-direct-scene-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.m-direct-scene-principal { min-width: 0; }
.m-direct-scene-etiquette { margin: 0 0 12px; font: 600 1rem/1.3 var(--police); letter-spacing: -0.006em; color: var(--texte-2); }

/* Attente : une phrase, le numéro de la ligne, des ondes très lentes */
.m-direct-attente { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 28px); margin: 0 0 clamp(20px, 3.4vh, 36px); }
.m-direct-attente-ondes { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; }
.m-direct-attente-ondes > span:not(.m-direct-attente-icone) { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(33, 60, 160, .30); opacity: 0; animation: m-direct-ondes 3.6s var(--c-sortie) infinite; }
.m-direct-attente-ondes > span:nth-child(2) { animation-delay: 1.2s; }
.m-direct-attente-ondes > span:nth-child(3) { animation-delay: 2.4s; }
.m-direct-attente-icone { position: relative; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--contour-carte); box-shadow: var(--ombre-carte); color: var(--accent); }
.m-direct-attente-icone svg { width: 28px; height: 28px; }
@keyframes m-direct-ondes { 0% { transform: scale(.62); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.m-direct-attente-texte { min-width: 0; }
.m-direct-attente-titre { margin: 0; font: 700 clamp(1.875rem, 3.2vw, 2.875rem)/1.08 var(--police); letter-spacing: -0.03em; }
.m-direct-attente-numero { display: block; margin-top: 6px; font: 600 clamp(1.25rem, 2.1vw, 1.875rem)/1.2 var(--police); letter-spacing: -0.012em; color: var(--accent); font-variant-numeric: tabular-nums; }
.m-direct-attente-ligne { display: block; margin-top: 8px; font: 500 clamp(0.9375rem, 1.2vw, 1.125rem)/1.35 var(--police); letter-spacing: -0.004em; color: var(--texte-2); }
.m-direct-scene-vide { padding: 28px; border-radius: var(--r-xl); border: 1.5px dashed var(--separateur-fort); font: 400 1.0625rem/1.5 var(--police); color: var(--texte-2); }
.m-direct-scene-vide p { margin: 0; }
/* Un appel est affiché : l'attente, plus discrète, passe en tête de la colonne des appels précédents */
.m-direct-scene-cote .m-direct-attente { gap: 16px; margin: 0 0 28px; padding: 18px 20px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--contour-carte); box-shadow: var(--ombre-carte); }
.m-direct-scene-cote .m-direct-attente-ondes { width: 66px; height: 66px; }
.m-direct-scene-cote .m-direct-attente-icone { width: 46px; height: 46px; box-shadow: none; }
.m-direct-scene-cote .m-direct-attente-icone svg { width: 20px; height: 20px; }
.m-direct-scene-cote .m-direct-attente-titre { font-size: 1.5rem; letter-spacing: -0.024em; }
.m-direct-scene-cote .m-direct-attente-numero { margin-top: 4px; font-size: 1.25rem; }
.m-direct-scene-cote .m-direct-attente-ligne { margin-top: 4px; font-size: 0.9375rem; }

/* La cascade projetée : mêmes cases, en grand */
.m-direct-scene .m-direct-cascade { border-radius: 24px; box-shadow: var(--ombre-survol); }
.m-direct-scene .m-direct-cascade[data-etat="vivant"] { box-shadow: 0 0 0 4px rgba(14, 159, 110, .14), var(--ombre-survol); }
.m-direct-scene .m-direct-tete { gap: 18px; padding: 22px 28px; }
.m-direct-scene .m-direct-tete-qui { min-width: 56px; }
.m-direct-scene .m-direct-tete-qui .m-direct-ligne-picto { width: 56px; height: 56px; }
.m-direct-scene .m-direct-tete-qui .m-direct-ligne-picto svg { width: 26px; height: 26px; }
.m-direct-scene .m-direct-lea-tete { height: 76px; margin: -10px 0 -6px; }
.m-direct-scene .m-direct-badge { height: 28px; padding: 0 12px; font-size: 0.875rem; }
.m-direct-scene .m-direct-titre { font-size: clamp(1.375rem, 1.9vw, 1.75rem); letter-spacing: -0.02em; }
.m-direct-scene .m-direct-meta { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); }
.m-direct-scene .m-direct-corps { gap: 24px; padding: 26px 28px 30px; }
.m-direct-scene .m-direct-etape { grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; padding-bottom: 22px; }
.m-direct-scene .m-direct-etape:last-child { padding-bottom: 0; }
.m-direct-scene .m-direct-noeud { width: 40px; height: 40px; }
.m-direct-scene .m-direct-noeud svg { width: 19px; height: 19px; }
.m-direct-scene .m-direct-noeud .chargeur { width: 18px; height: 18px; }
.m-direct-scene .m-direct-rail { left: 19px; top: 46px; }
.m-direct-scene .m-direct-lea-noeud { height: 44px; }
.m-direct-scene .m-direct-etape-corps { padding-top: 7px; }
.m-direct-scene .m-direct-etape-titre { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); letter-spacing: -0.014em; }
.m-direct-scene .m-direct-etape-droite, .m-direct-scene .m-direct-note { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); }
.m-direct-scene .m-direct-chrono { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.m-direct-scene .m-direct-sous, .m-direct-scene .m-direct-qui { font-size: clamp(1rem, 1.2vw, 1.125rem); }
.m-direct-scene .m-direct-lea-qui { height: 42px; }
.m-direct-scene .m-direct-renseignements { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.m-direct-scene .m-direct-renseignements > div { padding: 11px 14px 12px; }
.m-direct-scene .m-direct-renseignements dt { font-size: 0.875rem; }
.m-direct-scene .m-direct-renseignements dd { font-size: clamp(1rem, 1.25vw, 1.125rem); }
.m-direct-scene .m-direct-col-resultat:has(> .m-direct-resultat:not([hidden])) { padding: 22px 24px 24px; }
/* Renseignements de Léa projetés : lisibles du fond de la salle */
.m-direct-scene .m-direct-col-resultat:has(> .m-direct-notes:not([hidden])) { padding: 22px 24px 24px; }
.m-direct-scene .m-direct-notes { gap: 18px; }
.m-direct-scene .m-direct-lea-notes { height: 60px; }
.m-direct-scene .m-direct-notes-titre { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); letter-spacing: -0.014em; }
.m-direct-scene .m-direct-notes-sous { font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); }
.m-direct-scene .m-direct-notes-liste { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.m-direct-scene .m-direct-notes-liste > div { gap: 6px; padding: 14px 16px 16px; }
.m-direct-scene .m-direct-notes-liste dt { font-size: clamp(0.875rem, 1vw, 1rem); }
.m-direct-scene .m-direct-notes-liste dd { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.25; letter-spacing: -0.016em; }
/* Sept renseignements ou plus : trois colonnes dès que la place le permet, valeurs à 20 px au plus ; les neuf cases tiennent sur l'écran
   (1440 × 900, 1024 × 768) et un montant (« 3 000 000 € ») reste sur une ligne */
.m-direct-scene .m-direct-notes-liste:has(> :nth-child(7)) { grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - 24px) / 3)), 1fr)); }
.m-direct-scene .m-direct-notes-liste:has(> :nth-child(7)) > div { padding: 12px 14px 14px; }
.m-direct-scene .m-direct-notes-liste:has(> :nth-child(7)) dd { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); }
.m-direct-scene .m-direct-notes-renvoi { font-size: clamp(1rem, 1.2vw, 1.125rem); }
.m-direct-scene .m-direct-cascade[data-etat="fini"] .m-direct-renseignements dt { font-size: 0.875rem; }
.m-direct-scene .m-direct-cascade[data-etat="fini"] .m-direct-renseignements dd { font-size: 1rem; }
.m-direct-scene .m-direct-resultat-titre { font-size: 0.875rem; }
.m-direct-scene .m-direct-resume { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.5; letter-spacing: -0.01em; }
.m-direct-scene .m-direct-resultat-texte { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.m-direct-scene .m-direct-cases { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-direct-scene .m-direct-case:last-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.m-direct-scene .m-direct-case:last-child dd { justify-content: flex-end; }
.m-direct-scene .m-direct-case { padding: 14px 16px 16px; }
.m-direct-scene .m-direct-case dt { font-size: 0.875rem; }
.m-direct-scene .m-direct-case dd { min-height: 34px; }
.m-direct-scene .pastille { height: 32px; padding: 0 14px; font-size: 0.9375rem; }
.m-direct-scene .m-direct-montant { font-size: clamp(1.5rem, 2.1vw, 2rem); }
.m-direct-scene .m-direct-liste-titre, .m-direct-scene .m-direct-point-type { font-size: 1rem; }
.m-direct-scene .m-direct-opp-type { font-size: 0.875rem; }
.m-direct-scene .m-direct-opp-titre { font-size: clamp(1rem, 1.2vw, 1.125rem); }
.m-direct-scene .m-direct-opp-montant { font-size: 1.0625rem; }
.m-direct-scene .gravite { font-size: 0.9375rem; }
.m-direct-scene .m-direct-actions .btn { height: 48px; padding: 0 22px; font-size: 1rem; }
.m-direct-scene .m-direct-resultat-attente p { font-size: 1.0625rem; }
@container (min-width: 760px) {
  .m-direct-scene .m-direct-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .m-direct-scene .m-direct-cascade[data-etat="fini"] .m-direct-corps { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .m-direct-scene .m-direct-cascade.m-direct-avec-notes .m-direct-corps { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Appels précédents */
.m-direct-scene-cote { min-width: 0; }
.m-direct-scene-h2 { margin: 0 0 14px; font: 700 1.125rem/1.3 var(--police); letter-spacing: -0.014em; }
.m-direct-precedents { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.m-direct-precedents > li { min-width: 0; }
.m-direct-precedent {
  height: 100%; display: grid; align-content: start; gap: 10px; padding: 18px 20px 20px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--contour-carte); box-shadow: var(--ombre-carte); color: var(--texte); text-decoration: none;
  transition: box-shadow var(--d-rapide) var(--c-standard), transform var(--d-rapide) var(--c-sortie);
}
@media (hover: hover) { .m-direct-precedent:hover { text-decoration: none; box-shadow: var(--ombre-survol); transform: translateY(-2px); } }
.m-direct-precedent:active { transform: scale(.99); }
.m-direct-precedent-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.m-direct-ligne-picto-petit { width: 40px; height: 40px; }
.m-direct-ligne-picto-petit svg { width: 18px; height: 18px; }
.m-direct-lea-precedent { display: block; height: 44px; width: auto; flex: none; }
.m-direct-precedent-qui { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.m-direct-precedent-qui strong { font: 650 1rem/1.3 var(--police); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.m-direct-precedent-qui span { font: 400 0.875rem/1.3 var(--police); letter-spacing: 0; color: var(--texte-2); }
.m-direct-precedent-resume { font: 400 1rem/1.5 var(--police); letter-spacing: -0.006em; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.m-direct-precedent-montant { display: inline-flex; align-items: center; height: 26px; font: 650 0.9375rem/1 var(--police); letter-spacing: -0.01em; white-space: nowrap; }
.m-direct-precedents-vide { padding: 18px 20px; border-radius: var(--r-xl); border: 1.5px dashed var(--separateur-fort); font: 400 0.9375rem/1.5 var(--police); color: var(--texte-2); }

/* ===== Animations communes ===== */
@keyframes m-direct-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-direct-entre-droite { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }

/* ===== Adaptations ===== */
@media (max-width: 1279px) {
  .m-direct-scene-grille { grid-template-columns: minmax(0, 1fr); }
  /* Une colonne : l'attente se lit dans le statut, en haut (la carte de l'appel ne bouge pas quand il se termine) */
  .m-direct-scene-cote .m-direct-attente { display: none; }
  .m-direct-scene:not(.m-direct-scene-sans-appel) .m-direct-statut-numero { display: inline; }
  .m-direct-precedents { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 899px) {
  /* Barre du haut : boutons-icônes de 40 px, libellés seulement en nom accessible */
  .m-direct-action { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: transparent; }
  .m-direct-action svg { width: 21px; height: 21px; }
  @media (hover: hover) { .m-direct-action:hover { background: rgba(255, 255, 255, .10); } }
  .m-direct-action:active { background: rgba(255, 255, 255, .14); }
  .m-direct-action-scene { display: none; }
  .m-direct-action-libelle { display: none; }
  .m-direct-compteur { top: -2px; right: -4px; }
  .m-direct-vivant-cloche { left: 6px; bottom: 6px; }
  .m-direct-scene-btn-libelle { display: none; }
  .m-direct-scene-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .m-direct-scene-statut { height: 44px; }
}
@media (max-width: 640px) {
  .emplacement-direct-vue { margin-bottom: 28px; }
  .m-direct-tete { padding: 14px 10px 14px 16px; gap: 12px; }
  .m-direct-corps { padding: 16px 16px 18px; }
  .m-direct-col-resultat:has(> .m-direct-resultat:not([hidden])) { padding: 16px 14px 18px; }
  .m-direct-cases { grid-template-columns: minmax(0, 1fr); }
  .m-direct-case { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .m-direct-case dd { justify-content: flex-end; }
  .m-direct-actions .btn { flex: 1 1 auto; height: 44px; }
  .m-direct-scene { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .m-direct-scene-logo { height: 38px; }
  /* Outils sur une ligne : le statut se resserre, les deux boutons-icônes restent entiers */
  .m-direct-scene-outils { flex: 1 1 100%; flex-wrap: nowrap; }
  .m-direct-scene-statut { flex: 1 1 auto; min-width: 0; padding: 0 14px; font-size: 0.875rem; }
  .m-direct-scene-h1 { font-size: 1.0625rem; }
  .m-direct-scene-marque-texte span { font-size: 0.8125rem; }
  .m-direct-attente { gap: 16px; }
  .m-direct-attente-ondes { width: 76px; height: 76px; }
  .m-direct-attente-icone { width: 52px; height: 52px; }
  .m-direct-attente-icone svg { width: 22px; height: 22px; }
  .m-direct-scene .m-direct-tete { padding: 16px 12px 16px 18px; gap: 12px; }
  .m-direct-scene .m-direct-tete-qui .m-direct-ligne-picto { width: 46px; height: 46px; }
  .m-direct-scene .m-direct-tete-qui .m-direct-ligne-picto svg { width: 22px; height: 22px; }
  .m-direct-scene .m-direct-lea-tete { height: 58px; margin: -6px 0 -4px; }
  .m-direct-scene .m-direct-corps { padding: 18px 16px 20px; }
  .m-direct-scene .m-direct-etape { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .m-direct-scene .m-direct-noeud { width: 34px; height: 34px; }
  .m-direct-scene .m-direct-rail { left: 16px; top: 40px; }
  .m-direct-scene .m-direct-col-resultat:has(> .m-direct-resultat:not([hidden])) { padding: 16px 14px 18px; }
  .m-direct-precedents { grid-template-columns: minmax(0, 1fr); }
  .m-direct-scene .m-direct-cases { grid-template-columns: minmax(0, 1fr); }
  .m-direct-scene .m-direct-case { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .m-direct-scene .m-direct-case dd { justify-content: flex-end; }
}
@media (max-width: 640px), (pointer: coarse) {
  .m-direct-tout-lu { min-height: 40px; }
  .m-direct-actions .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-direct-panneau, .m-direct-voile { animation: m-direct-fondu var(--d-rapide) linear; }
  .m-direct-panneau.m-direct-sortie { transform: none; }
  .m-direct-etape[data-etat="en_cours"] > .m-direct-noeud, .m-direct-point::after, .m-direct-vivant-cloche::after { animation: none; }
  .m-direct-attente-ondes > span:not(.m-direct-attente-icone) { animation: none; opacity: .5; transform: scale(1.12); }
  .m-direct-attente-ondes > span:nth-child(n+2):not(.m-direct-attente-icone) { display: none; }
  .m-direct-action:active, .m-direct-scene-btn:active, .m-direct-precedent:active { transform: none; }
  @media (hover: hover) { .m-direct-precedent:hover { transform: none; } }
  .m-direct-noeud { transition: none; }
}
@media (prefers-contrast: more) {
  .m-direct-rail { background: var(--texte-3); }
  .m-direct-renseignements, .m-direct-case, .m-direct-opp, .m-direct-point-verif { border-color: var(--separateur-fort); }
}