/* TRACE — v54.css : le système révisé du fil ESTHETIQUE (12/10/2026, archive v54). Chargée en dernier, après refonte.css.
   Aucune couleur en dur : tout vient de jetons.css (section « v54 »). Les décisions qu'elle porte, et elles seules :
     L2 (journal D-TRACE-ESTHETIQUE-L4-LOT-2-REPONSES) : IBM Plex Sans ; filet fin, ombre pour ce qui flotte ; retour à l'appui ;
       vraies tailles au téléphone, à la place de la réduction à 82 % ;
     L4 lot 1 (D-TRACE-ESTHETIQUE-L4-LOT-1-REPONSES) : symbole Solarma et « TRACE » ; sous-entrées dans le menu, onglets du haut retirés
       au bureau ; mouvement (cascade, compteurs, survol, halo sur l'urgent, jauges) ; même largeur partout, jusqu'à 1 440 px ;
     L4 lot 2 : menu marine révisé (une couleur par lieu, icône sur tuile, entrée choisie éclairée) ; échelle serrée ; un seul fond
       gris-bleu ; états en couleur par famille ; rond d'affectation ; un seul modèle de page vide ; chasse fixe aux numéros seulement ;
     L4 lot 3 (D-TRACE-ESTHETIQUE-KPI-AJOUTS-A-CONFIRMER) : six formes de chiffre, minuteries, le direct (K1, marqué « ajout ») ;
       téléphone resserré.
   Les règles de couleur de refonte.css tiennent : rouge = un geste maintenant, ambre = une relance ; aucune couleur ne dit qu'un
   chiffre est bon ou mauvais. */

/* ================================================================== 1 · la coquille : marque et menu marine révisé */
.rf-barre.sd, .barre.sd { background: var(--nav-fond); }
.rf-barre .sd-nav { background: var(--nav-fond); color: var(--nav-texte); padding: 14px 10px 12px; gap: 2px; }
.rf-barre .sd-marque { grid-template-columns: 34px 1fr; padding: 2px 6px 16px; }
.sd-marque .lg.es-symbole { width: 34px; height: 34px; border-radius: 9px; box-shadow: none;
  background: var(--marque-tuile) url("../img/solarma-symbole.png") center / 26px auto no-repeat; }
.rf-barre .sd-marque b { font: 700 var(--taille-marque) / 1.1 var(--police-titre); letter-spacing: .14em; color: var(--nav-titre); }
.rf-barre .sd-marque small { font-size: var(--taille-secondaire); color: var(--nav-texte-doux); }

.es-lieu { --c: var(--lieu-reglages); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.es-lieu.l-accueil { --c: var(--lieu-accueil); }       .es-lieu.l-tickets { --c: var(--lieu-tickets); }
.es-lieu.l-messages { --c: var(--lieu-messages); }     .es-lieu.l-sites { --c: var(--lieu-sites); }
.es-lieu.l-planning { --c: var(--lieu-planning); }     .es-lieu.l-monitoring { --c: var(--lieu-monitoring); }
.es-lieu.l-savoir { --c: var(--lieu-savoir); }         .es-lieu.l-reglages { --c: var(--lieu-reglages); }
.rf-barre .sd-nav a.es-lieu-lien { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-height: 36px;
  padding: 0 34px 0 6px; border-radius: 8px; color: var(--nav-texte); font-size: var(--taille-texte); font-weight: var(--graisse-moyenne); }
.rf-barre .sd-nav a.es-lieu-lien:hover { background: var(--nav-survol); color: var(--nav-titre); }
.rf-barre .sd-nav a.es-lieu-lien.on { background: var(--nav-actif); color: var(--nav-actif-texte); font-weight: var(--graisse-grasse); }
.rf-barre .sd-nav a.es-lieu-lien.on::before { left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--c); }
.es-lieu-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-tuile { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) var(--nav-tuile-alpha), var(--nav-fond)); color: color-mix(in srgb, var(--c) 60%, var(--nav-tuile-encre)); }
.rf-barre .sd-nav .es-tuile .ic { width: 16px; height: 16px; }
.es-lieu .es-lieu-lien i { margin-left: auto; }
.es-deplier { grid-column: 2; grid-row: 1; z-index: 1; width: 28px; height: 28px; margin-right: 3px; display: grid; place-items: center; border: 0;
  border-radius: 6px; background: none; color: var(--nav-texte-doux); cursor: pointer; padding: 0; }
.es-deplier:hover { background: var(--nav-survol); color: var(--nav-titre); }
.es-deplier .ic { width: 14px; height: 14px; transition: transform var(--transition); }
.es-deplier[aria-expanded="true"] .ic { transform: rotate(90deg); }
.es-lieu:has(.es-lieu-lien i) .es-lieu-lien { padding-right: 34px; }
.es-lieu:has(.es-lieu-lien i) .es-deplier { margin-right: 3px; }
.es-lieu .es-lieu-lien i { margin-right: 2px; }
.es-sous { grid-column: 1 / -1; display: none; flex-direction: column; margin: 2px 0 6px 18px; padding-left: 12px; border-left: 1px solid var(--nav-sous-filet); }
.es-deplier[aria-expanded="true"] + .es-sous { display: flex; }
.rf-barre .sd-nav .es-sous a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 8px;
  border-radius: 6px; color: var(--nav-sous-texte); font-size: var(--taille-secondaire); font-weight: var(--graisse-normale); }
.rf-barre .sd-nav .es-sous a:hover { background: var(--nav-survol); color: var(--nav-titre); }
.rf-barre .sd-nav .es-sous a.on { background: none; color: var(--nav-actif-texte); font-weight: var(--graisse-grasse); }
.rf-barre .sd-nav .es-sous a.on::before { left: -13px; top: 7px; bottom: 7px; width: 2px; background: var(--c); }
.es-sous small { font: var(--graisse-grasse) var(--taille-petite) var(--police-chiffres); color: var(--nav-texte-doux); }
.rf-nav-pied .es-lieu { display: block; }
.rf-nav-pied .es-lieu-lien { padding-right: 6px; }

/* l'en-tête : « Lieu › Écran », les onglets du haut retirés au bureau (ils restent sous 900 px, où le menu est un tiroir) */
.rf-lieu-titre { font: var(--graisse-moyenne) var(--taille-texte) var(--police); color: var(--texte-faible); display: inline-flex; align-items: center; gap: 6px; }
.rf-lieu-titre.rf-lieu-seul, .rf-lieu-titre:not(:has(.es-fil-ecran)) { color: var(--texte); font-weight: var(--graisse-grasse); }
.es-fil-sep { color: var(--texte-faible); }
.es-fil-ecran { color: var(--texte); font-weight: var(--graisse-grasse); }
.rf-entete { height: var(--hauteur-entete); }
.rf-recherche, .rf-plus-ticket { height: var(--hauteur-commande); }
@container app (min-width: 901px) {
  .rf-onglets { display: none; }
}

/* ================================================================== 2 · un seul fond, la même largeur partout, filet fin */
.app.rf, .app.rf .app-corps { background: var(--fond); }
.app.rf .contenu { max-width: calc(var(--largeur-contenu) + 2 * var(--pas-8)); }
.app.rf .contenu > .mq, .app.rf .contenu > .bd-main, .app.rf .contenu > .v11, .app.rf .mq.bd-main { background: var(--fond); }
.rf-page, .v11 .v11-liste, .v11 .v11-note, .v11 .v11-vide, .v11 .v11-carte, .v11-bandeau, .mq-apres .av-note { max-width: var(--largeur-contenu); }
.mq { font-size: var(--taille-texte); }
/* une carte est posée : un filet fin, sans ombre ; seul ce qui flotte (menu, tiroir, bulle) garde l'ombre */
.rf-carte, .v11 .v11-al, .v11 .v11-carte, .mq-e33 .e33-paire { box-shadow: none; border: 1px solid var(--bordure); }

/* titres : la page à 20 px, le bloc à 15 px ; les chiffres en chiffres tabulaires */
.app.rf .contenu h1 { font-size: var(--taille-titre-page); letter-spacing: 0; }
.app.rf .contenu h2 { font-size: var(--taille-titre-section); }
.app.rf { font-variant-numeric: tabular-nums; }

/* chasse fixe : les numéros seulement (G7) — un mot écrit en chasse fixe reprend la police du texte */
.rf-sans-heure, .sd-ech > small, .rf-li-ech { font-family: var(--police); }
.rf-ref, .ref, .numero { font-family: var(--police-code); font-size: var(--taille-petite); letter-spacing: 0; }

/* ================================================================== 3 · états en couleur par famille (G5) et rond d'affectation (G6) */
.pastille-etat[data-famille="prendre"] { background: var(--etat-nouveau-fond); color: var(--etat-nouveau); }
.pastille-etat[data-famille="mouvement"] { background: var(--etat-planifie-fond); color: var(--etat-planifie); }
.pastille-etat[data-famille="bloque"] { background: var(--etat-attente-fond); color: var(--etat-attente); box-shadow: none; }
.pastille-etat[data-famille="fini"] { background: var(--etat-regle-fond); color: var(--etat-regle); }
.es-etat { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--rayon-pastille);
  font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); white-space: nowrap; }
.es-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--es-point, var(--texte-faible)); }
.es-etat { --es-point: var(--texte-faible); }
.es-etat.e-prendre { --es-point: var(--etat-nouveau); background: var(--etat-nouveau-fond); color: var(--etat-nouveau); }
.es-etat.e-mouvement { --es-point: var(--etat-planifie); background: var(--etat-planifie-fond); color: var(--etat-planifie); }
.es-etat.e-bloque { --es-point: var(--etat-attente); background: var(--etat-attente-fond); color: var(--etat-attente); }
.es-etat.e-surveiller { --es-point: var(--surveiller); background: var(--surveiller-fond); color: var(--surveiller); }
.es-etat.e-fini { --es-point: var(--etat-regle); background: var(--etat-regle-fond); color: var(--etat-regle); }
.es-etat.e-ferme { --es-point: var(--neutre); background: var(--neutre-fond); color: var(--neutre); }
.es-etat.e-urgent { --es-point: var(--etat-urgent); background: var(--etat-urgent-fond); color: var(--etat-urgent); }
/* personne n'est affecté : un rond en pointillé avec « + », et non un rond sombre qui ressemble à un bouton éteint */
.sd-av.es-personne-aucune { display: inline-grid; place-items: center; background: var(--surface); color: var(--texte-faible); border: 0; box-shadow: none;
  outline: 1.5px dashed var(--bordure-forte); outline-offset: -1.5px; }
.sd-av.es-personne-aucune .ic { width: 12px; height: 12px; stroke-width: 2; }

/* ================================================================== 4 · la page vide : une ligne, une icône, le geste utile (G4) */
.es-vide { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon-carte); color: var(--texte-doux); font-size: var(--taille-texte); }
.es-vide-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--texte-faible); }
.es-vide-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.es-vide-texte { flex: 1 1 260px; min-width: 0; }
.es-vide-texte b { color: var(--texte); font-weight: var(--graisse-grasse); }
.es-vide-geste { flex: none; display: inline-flex; align-items: center; height: var(--hauteur-commande); padding: 0 14px; border-radius: var(--rayon);
  border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte); font-weight: var(--graisse-moyenne); text-decoration: none; }
.es-vide-geste:hover { background: var(--surface-2); text-decoration: none; }
/* les anciens modèles (grand cadre centré, aplat vert) prennent la même forme */
.vide, .vide-etat, .rf-bravo, .v11 .v11-vide { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left; padding: 14px 16px;
  background: var(--surface); color: var(--texte-doux); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); max-width: none; min-height: 0; box-shadow: none; }
.vide-titre, .vide-etat > b, .rf-bravo b { color: var(--texte); font-size: var(--taille-texte); font-weight: var(--graisse-grasse); margin: 0; }
.vide-detail, .vide-etat > p { margin: 0; font-size: var(--taille-texte); }
.rf-bravo .rf-bravo-coche { width: 32px; height: 32px; border-radius: 8px; background: var(--etat-regle-fond); color: var(--etat-regle); flex: none; }
.rf-bravo p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.vide-action, .vide-etat .btn { margin-left: auto; }

/* ================================================================== 5 · les six formes de chiffre (L4 lot 3, §4) */
/* en rangées qui se remplissent : une tuile grandit plutôt que de laisser un trou ; la tuile large compte double */
.es-chiffres { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.es-chiffres > .es-k { flex: 1 1 190px; }
.es-chiffres > .es-k-large { flex: 2 1 390px; }
.es-chiffres.es-c-dense > .es-k { flex-basis: 160px; }
.es-chiffres.es-c-dense > .es-k-large { flex-basis: 330px; }
.es-k { --kc: var(--chiffre-canard); --kf: var(--chiffre-canard-fond); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); color: var(--texte);
  text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
a.es-k:hover { transform: translateY(-2px); box-shadow: var(--chiffre-ombre-survol); border-color: var(--bordure-forte); text-decoration: none; }
a.es-k:active { transform: scale(.98); }
.es-k.k-geste { --kc: var(--etat-urgent); --kf: var(--etat-urgent-fond); }
.es-k.k-relance { --kc: var(--etat-attente); --kf: var(--etat-attente-fond); }
.es-k.k-info { --kc: var(--etat-planifie); --kf: var(--etat-planifie-fond); }
.es-k.k-ok { --kc: var(--etat-regle); --kf: var(--etat-regle-fond); }
.es-k.k-neutre { --kc: var(--chiffre-gris); --kf: var(--chiffre-gris-fond); }
.es-k:has(.es-ajout) .es-k-tete { padding-right: 46px; }
.es-k-tete { display: flex; align-items: center; gap: 8px; color: var(--texte-doux); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); }
.es-k-ic { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--kf); color: var(--kc); }
.es-k-ic .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.es-k-n { display: flex; align-items: baseline; gap: 6px; font: var(--graisse-grasse) var(--taille-chiffre-tuile) / 1 var(--police-chiffres); color: var(--texte); }
.es-k.k-geste .es-k-n > b, .es-k.k-relance .es-k-n > b { color: var(--kc); }
.es-k-n > b { font-weight: inherit; }
.es-k-n small { font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); color: var(--texte-faible); }
.es-k-ctx { font-size: var(--taille-secondaire); color: var(--texte-faible); line-height: 1.35; }
.es-k-ctx b { color: var(--texte-doux); font-weight: var(--graisse-grasse); }
.es-ajout { position: absolute; top: 8px; right: 8px; font-size: var(--taille-petite); font-weight: var(--graisse-grasse); color: var(--chiffre-ajout);
  background: var(--chiffre-ajout-fond); border-radius: var(--rayon-pastille); padding: 0 6px; line-height: 17px; }
.es-ajout-ligne { display: inline-block; font-size: var(--taille-petite); font-weight: var(--graisse-grasse); color: var(--chiffre-ajout);
  background: var(--chiffre-ajout-fond); border-radius: var(--rayon-pastille); padding: 0 6px; line-height: 17px; vertical-align: middle; }
/* jauge : n sur N, le dénominateur écrit */
.es-jauge { height: 6px; border-radius: 3px; background: var(--chiffre-piste); overflow: hidden; }
.es-jauge > span { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--kc); transform-origin: left center; }
.es-jauge.j-seuil { position: relative; overflow: visible; }
.es-jauge.j-seuil::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--seuil, 100%); width: 2px; border-radius: 1px; background: var(--texte-faible); }
/* comparaison : deux barres, deux nombres, sans flèche « mieux / moins bien » */
.es-comp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: var(--taille-secondaire); color: var(--texte-faible); }
.es-comp > i { height: 6px; border-radius: 3px; background: var(--chiffre-piste); overflow: hidden; }
.es-comp > i > span { display: block; height: 100%; width: var(--p, 0%); background: var(--kc); border-radius: 3px; transform-origin: left center; }
.es-comp > i.avant > span { background: var(--bordure-forte); }
.es-comp > b { font-weight: var(--graisse-grasse); color: var(--texte); text-align: right; }
/* répartition : une barre découpée, la légende avec les comptes */
.es-rep { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--chiffre-piste); }
.es-rep > span { flex: var(--n) 1 0; min-width: 3px; transform-origin: left center; }
.es-rep .r-prendre { background: var(--etat-nouveau); }   .es-rep .r-mouvement { background: var(--etat-planifie); }
.es-rep .r-bloque { background: var(--etat-attente); }    .es-rep .r-surveiller { background: var(--surveiller); }
.es-rep .r-fini { background: var(--etat-regle); }        .es-rep .r-ferme { background: var(--neutre); }
.es-rep .r-urgent { background: var(--etat-urgent); }     .es-rep .r-canard { background: var(--chiffre-canard); }
.es-rep .r-gris { background: var(--bordure-forte); }
.es-rep-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: var(--taille-secondaire); color: var(--texte-faible); }
.es-rep-leg li { display: inline-flex; align-items: center; gap: 5px; }
.es-rep-leg li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lc, var(--bordure-forte)); }
.es-rep-leg b { color: var(--texte); font-weight: var(--graisse-grasse); }
.es-rep-leg .r-prendre { --lc: var(--etat-nouveau); }  .es-rep-leg .r-mouvement { --lc: var(--etat-planifie); }
.es-rep-leg .r-bloque { --lc: var(--etat-attente); }   .es-rep-leg .r-surveiller { --lc: var(--surveiller); }
.es-rep-leg .r-fini { --lc: var(--etat-regle); }       .es-rep-leg .r-ferme { --lc: var(--neutre); }
.es-rep-leg .r-urgent { --lc: var(--etat-urgent); }    .es-rep-leg .r-canard { --lc: var(--chiffre-canard); }
.es-rep-leg .r-gris { --lc: var(--bordure-forte); }
/* tendance : 14 jours (30 pour la production) en une ligne ; dernier point = aujourd'hui ; jour sans donnée en creux */
.es-tend { position: relative; display: block; width: 100%; height: 30px; }
.es-tend svg { display: block; width: 100%; height: 100%; overflow: visible; }
.es-tend .t-ligne { fill: none; stroke: var(--kc); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.es-tend .t-aire { fill: var(--kf); stroke: none; }
.es-tend-leg { display: flex; justify-content: space-between; font-size: var(--taille-petite); color: var(--texte-faible); }
.es-tend-bulle { position: absolute; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none;
  background: var(--chiffre-bulle); color: var(--chiffre-bulle-texte); font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); }
/* minuterie : une durée qui avance ; à la seconde sous une heure ; vers le seuil quand il existe */
.es-minuterie { font: var(--graisse-grasse) var(--taille-titre-section) / 1 var(--police-chiffres); color: var(--texte); white-space: nowrap; }
.es-minuterie.m-depasse { color: var(--etat-urgent); }
.es-minuterie small { font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); color: var(--texte-faible); margin-left: 4px; }
/* l'état du direct : « à jour · il y a 20 s » */
.es-direct { display: inline-flex; align-items: center; gap: 6px; font-size: var(--taille-secondaire); color: var(--texte-faible); }
.es-direct::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--etat-regle); box-shadow: 0 0 0 3px var(--etat-regle-fond); }
.es-direct.d-pause::before { background: var(--bordure-forte); box-shadow: none; }
.es-plus1 { position: absolute; margin-left: 4px; font-size: var(--taille-secondaire); font-weight: var(--graisse-grasse); color: var(--kc, var(--chiffre-canard)); pointer-events: none; }

/* ================================================================== 6 · le mouvement (L4 lot 1 Q4 a ; lot 3 §5) */
@media (prefers-reduced-motion: no-preference) {
  /* l'arrivée en cascade : chaque bloc de la page, 55 ms d'écart (posé par mouvement.js, --i) */
  .es-arrive { animation: es-arrivee var(--mv-arrivee) var(--mv-courbe) both; animation-delay: calc(var(--i, 0) * var(--mv-ecart)); }
  .es-arrive .es-jauge > span, .es-arrive .es-comp > i > span { animation: es-jauge var(--mv-jauge) var(--mv-courbe) both; animation-delay: calc(var(--i, 0) * var(--mv-ecart) + 150ms); }
  .es-arrive .es-rep > span { animation: es-jauge var(--mv-jauge) var(--mv-courbe) both; animation-delay: calc(var(--i, 0) * var(--mv-ecart) + 150ms); }
  .es-arrive .es-tend svg { animation: es-tendance var(--mv-tendance) var(--mv-courbe) both; animation-delay: calc(var(--i, 0) * var(--mv-ecart) + 200ms); }
  /* le halo lent, sur l'urgent seulement */
  .es-k.k-geste .es-k-ic, .sd-nav i.rf-n-geste { animation: es-halo 2.6s ease-in-out infinite; }
  .es-bat { animation: es-bat .5s ease-in-out 2; }
  .es-neuf { animation: es-neuf 4s ease-out both; }
  .es-plus1 { animation: es-plus1 1.6s ease-out both; }
  .rf-li, .es-k, .rf-bouton, .rf-bouton-sec, .btn { transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
  .rf-li:active, .rf-bouton:active, .rf-bouton-sec:active, .btn:active { transform: scale(.985); }
}
@keyframes es-arrivee { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes es-jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes es-tendance { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes es-halo { 0%, 100% { box-shadow: 0 0 0 0 var(--etat-urgent-fond); } 50% { box-shadow: 0 0 0 5px var(--etat-urgent-fond); } }
@keyframes es-bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes es-neuf { from { background-color: var(--chiffre-neuf); } to { background-color: var(--surface); } }
@keyframes es-plus1 { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }
/* le menu « Retenu C » coupait toute animation sous .sd : seul le mouvement voulu y revient */
@media (prefers-reduced-motion: no-preference) {
  .sd .es-arrive { animation: es-arrivee var(--mv-arrivee) var(--mv-courbe) both !important; animation-delay: calc(var(--i, 0) * var(--mv-ecart)) !important; }
}

/* ================================================================== 7 · « Commencer ici » et « Dans TRACE » (L3 Q2 a ; « Dans TRACE » : ajout) */
.es-commencer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 12px; background: var(--surface);
  border: 1px solid var(--bordure); border-left: 3px solid var(--etat-urgent); border-radius: var(--rayon-carte); }
.es-commencer b { font-size: var(--taille-titre-section); }
.es-commencer .es-k-ctx { flex: 1 1 240px; }
.es-commencer a.rf-bouton { margin-left: auto; }
.es-dans { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 14px; }
.es-dans a { --c: var(--lieu-reglages); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon-carte);
  background: var(--surface); border: 1px solid var(--bordure); color: var(--texte); text-decoration: none; min-width: 0; }
.es-dans a:hover { border-color: var(--bordure-forte); text-decoration: none; }
.es-dans .es-tuile { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 80%, var(--texte)); }
.es-dans .es-tuile .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.es-dans b { display: block; font: var(--graisse-grasse) var(--taille-titre-section) / 1.1 var(--police-chiffres); }
.es-dans small { display: block; font-size: var(--taille-secondaire); color: var(--texte-faible); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-dans .l-accueil { --c: var(--lieu-accueil); } .es-dans .l-tickets { --c: var(--lieu-tickets); } .es-dans .l-messages { --c: var(--lieu-messages); }
.es-dans .l-sites { --c: var(--lieu-sites); } .es-dans .l-planning { --c: var(--lieu-planning); } .es-dans .l-monitoring { --c: var(--lieu-monitoring); }
.es-dans .l-savoir { --c: var(--lieu-savoir); }
.es-section-titre { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: var(--taille-secondaire); font-weight: var(--graisse-grasse);
  color: var(--texte-faible); text-transform: uppercase; letter-spacing: .06em; }
.es-section-titre .es-direct { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: var(--graisse-normale); }
.es-lecture { justify-self: start; align-self: flex-start; width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--rayon-pastille); background: var(--neutre-fond);
  color: var(--neutre); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); }

/* ================================================================== 8 · le fil de conversation dans la fiche ticket (D1, ajout) */
.es-fil { display: flex; flex-direction: column; gap: 8px; }
.es-fil-bulles { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; padding: 10px; border-radius: var(--rayon);
  background: var(--bulle-fond); }
.es-bulle { max-width: 78%; padding: 7px 10px; border-radius: var(--bulle-rayon); background: var(--bulle-entrante); font-size: var(--taille-texte);
  line-height: 1.4; box-shadow: 0 1px 0 var(--bordure); }
.es-bulle.b-sortant { align-self: flex-end; background: var(--bulle-sortante); }
.es-bulle small { display: block; margin-top: 2px; font-size: var(--taille-petite); color: var(--texte-faible); text-align: right; }
.es-fil-repondre { display: flex; gap: 8px; align-items: flex-end; }
.es-fil-repondre textarea { flex: 1 1 auto; min-height: var(--hauteur-commande); max-height: 120px; resize: vertical; padding: 8px 10px; border-radius: var(--rayon);
  border: 1px solid var(--bordure-forte); font: inherit; font-size: var(--taille-texte); background: var(--surface); color: var(--texte); }
.es-fenetre { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--rayon); background: var(--etat-regle-fond);
  color: var(--etat-regle); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); }

/* ================================================================== 9 · la connexion : quatre lignes sous le formulaire (L3 Q1 a) */
.es-connexion-quatre { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--bordure); display: grid; gap: 8px; }
.es-connexion-quatre li { display: flex; gap: 10px; align-items: center; font-size: var(--taille-texte); color: var(--texte-doux); }
.es-connexion-quatre .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================== 10 · le téléphone : vraies tailles, blocs resserrés (L2 Q3 a ; lot 3 §8) */
@container app (max-width: 520px) {
  /* la réduction à 82 % (D-TRACE-PROTOTYPE-TELEPHONE-DEZOOME) est remplacée par les vraies tailles */
  .app-corps > .entete, .app-corps > .contenu, .app-corps > .pied { zoom: 1; }
  .app.rf .contenu { padding: 12px; }
  .app.rf .contenu, .app.rf .mq { font-size: var(--taille-texte-tel); }
  .app.rf .contenu h1 { font-size: var(--taille-titre-page-tel); }
  .app.rf .contenu h2, .rf-carte-tete h2 { font-size: var(--taille-titre-bloc-tel); }
  .rf-carte, .v11 .v11-al, .v11 .v11-carte { padding: 12px; }
  .rf-page { gap: 8px; }
  .rf-li b { font-size: var(--taille-texte-tel); }
  .rf-li small, .rf-li-ech { font-size: var(--taille-meta-tel); }
  .rf-recherche { height: 38px; }
  .rf-onglets a { padding: 7px 0 6px; }
  .rf-bouton, .rf-bouton-sec, .btn, .es-vide-geste { min-height: var(--hauteur-commande-tel); }
  .es-chiffres { gap: 6px; margin-bottom: 8px; }
  .es-chiffres > .es-k, .es-chiffres.es-c-dense > .es-k { flex: 1 1 140px; }
  .es-chiffres > .es-k-large, .es-chiffres.es-c-dense > .es-k-large { flex-basis: 100%; }
  .es-k { padding: 8px 10px; gap: 3px; }
  .es-k-tete { font-size: var(--taille-meta-tel); gap: 6px; }
  .es-k-ic { width: 20px; height: 20px; }
  .es-k-ic .ic { width: 12px; height: 12px; }
  .es-k-n { font-size: var(--taille-chiffre-tel); }
  .es-k-ctx, .es-comp, .es-rep-leg, .es-tend-leg { font-size: var(--taille-petite); }
  .es-k:has(.es-ajout) .es-k-tete { padding-right: 34px; }
  .es-ajout { top: 6px; right: 6px; line-height: 15px; padding: 0 5px; }
  .es-section-titre { margin: 2px 0 6px; }
  .es-tend { height: 20px; }
  /* au téléphone, trois colonnes sans défilement : le chiffre et son nom, l'icône retirée */
  .es-dans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .es-dans a { padding: 7px 8px; gap: 0; }
  .es-dans .es-tuile { display: none; }
  .es-dans small { font-size: var(--taille-petite); line-height: 1.25; white-space: normal; }
  .es-commencer { padding: 10px 12px; }
  .es-commencer a.rf-bouton { margin-left: 0; width: 100%; justify-content: center; }
}

/* ================================================================== 11 · la ligne de ticket : l'état en couleur a sa colonne (les lignes qui le portent seulement) */
.rf-li:has(> .es-etat) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; padding-top: 8px; padding-bottom: 8px; }
.rf-li:has(> .es-etat) > .rf-p { grid-column: 1; }
.rf-li:has(> .es-etat) > .rf-li-corps { grid-column: 2; }
.rf-li:has(> .es-etat) > .es-etat { grid-column: 3; }
.rf-li:has(> .es-etat) > .rf-li-ech { grid-column: 4; }
.rf-li:has(> .es-etat) > .sd-av { grid-column: 5; }
@container app (max-width: 640px) {
  /* au téléphone : le titre, puis l'état et l'échéance sur une même ligne ; la personne est dans la fiche */
  .rf-li:has(> .es-etat) { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 8px; row-gap: 4px; }
  .rf-li:has(> .es-etat) > .rf-li-corps { grid-column: 2 / -1; grid-row: 1; }
  .rf-li:has(> .es-etat) > .es-etat { grid-column: 2; grid-row: 2; justify-self: start; }
  .rf-li:has(> .es-etat) > .rf-li-ech { grid-column: 3; grid-row: 2; justify-self: start; align-self: center; }
  .rf-li:has(> .es-etat) > .sd-av, .rf-li:has(> .es-etat) > .sd-av.es-personne-aucune { display: none; }
}

.fiche-tete .es-bande, .page-tete + .es-bande, .page-tete .es-bande { margin-top: 14px; }

/* ================================================================== 12 · compléments v54 : tuile large, barres de charge, fil D1 */
.es-barres { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 64px; }
.es-barre { display: grid; grid-template-rows: 1fr auto auto; gap: 2px; height: 100%; text-align: center; font-size: var(--taille-petite); color: var(--texte-faible); }
.es-barre i { align-self: end; display: block; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--kc) 30%, var(--surface)); transform-origin: bottom; }
.es-barre b { font-weight: var(--graisse-grasse); color: var(--texte); font-variant-numeric: tabular-nums; }
.es-barre small { display: block; font-size: var(--taille-petite); }
.es-barre.b-auj i { background: var(--kc); }
.es-barre.b-auj small { color: var(--kc); font-weight: var(--graisse-grasse); }
@media (prefers-reduced-motion: no-preference) {
  .es-arrive .es-barre i { animation: es-monte .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
  @keyframes es-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
.es-fil h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-fil h3 a { margin-left: auto; }
.es-fil > p { margin: 0; }
.es-fil-bulles { list-style: none; margin: 0; }
.es-fil-champ { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; font-size: var(--taille-secondaire); color: var(--texte-faible); }
.es-fenetre.f-fermee { background: var(--neutre-fond); color: var(--neutre); }
@container app (max-width: 640px) { .es-bulle { max-width: 90%; } }

/* ================================================================== 13 · relecture : symbole sur la connexion, chasse fixe pour les nombres seuls */
.mq .cx-logo .logo.es-symbole { background: var(--marque-tuile) url("../img/solarma-symbole.png") center / 32px auto no-repeat; box-shadow: none; }
.mq .visite-carte .h { font-family: var(--police); font-variant-numeric: tabular-nums; }
.es-minuterie.m-depasse::after { content: " · " attr(data-es-depasse); font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); }
@media (prefers-reduced-motion: reduce) {
  .es-k, a.es-k:hover, a.es-k:active { transition: none; transform: none; }
}