/* Structure de l'interface TELIOS sur Tabler (plan, L2.10).
   Aucune couleur ici : elles viennent du thème actif, une feuille de
   static/telios/themes/ chargée après celle-ci (Configuration → Thème).
   Chaque thème fournit les mêmes jetons --telios-*, en sombre et en clair.
   Règles de la maison : l'orange est réservé à l'identité, jamais à une
   action ; le rouge à l'irréversible. */

/* Trois rayons : 6, 12, 999 px. */
/* Les deux arrondis viennent du thème ; à défaut, ceux du thème d'origine. */
.card, .alert, .modal-content { border-radius: var(--telios-rayon-grand); }
.btn, .form-control, .form-select { border-radius: var(--telios-rayon-petit); }
.badge { border-radius: 999px; }

/* La barrette orange NBILITY au-dessus des titres : la signature commune
   à TELIOS et à ses attestations. */
.telios-titre::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--telios-marque);
}
.telios-marque { color: var(--telios-marque); letter-spacing: 1px; font-size: 11px; font-weight: 700; }
.navbar-brand .telios-nom { font-weight: 800; letter-spacing: .5px; }

/* Les boutons d'action portent l'encre sombre sur l'accent. */
.btn-primary { color: var(--telios-encre-sur-accent); font-weight: 700; }
/* En thème sombre, le rouge est clair : du blanc dessus ne se lirait pas
   (2,7:1). Le bouton survolé prend l'encre sombre, comme l'action. */
html[data-bs-theme=dark] .btn-outline-danger { --tblr-btn-hover-color: var(--telios-encre-sur-accent);
  --tblr-btn-active-color: var(--telios-encre-sur-accent); }

/* Barre de l'espace client : neuf rubriques, la bascule de thème, trois
   langues et la déconnexion ne tiennent sur une ligne qu'à partir de 1200 px,
   la barre prenant toute la largeur (base.html) ; en dessous, le menu se
   replie. Les libellés ne se coupent jamais en deux lignes. */
@media (min-width: 1200px) {
  .page > header.navbar .navbar-nav .nav-link { padding-left: .55rem; padding-right: .55rem; white-space: nowrap; }
}

/* ── Smartphone (plan, L9.13) ──────────────────────────────────────────
   Cibles tactiles d'au moins 44 px, aucun débordement horizontal. */
@media (max-width: 767.98px) {
  .btn, .nav-link, .form-control, .form-select, .dropdown-item { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .page-header .btn-list, .telios-actions { width: 100%; }
  .telios-actions .btn, .page-header .btn-list .btn { flex: 1 1 100%; }
  .container-xl { padding-left: 12px; padding-right: 12px; }
  .telios-code { font-size: 1.1rem; }
}
.telios-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
  letter-spacing: .5px;
}
.telios-gros-chiffre { font-size: 2rem; font-weight: 700; font-feature-settings: "tnum"; line-height: 1.1; }
.telios-barre { height: 8px; border-radius: 999px; background: var(--telios-bg-alt); overflow: hidden; }
.telios-barre > span { display: block; height: 100%; border-radius: 999px; background: var(--telios-accent); }
.telios-verdict { border-radius: var(--telios-rayon-grand); padding: 16px 18px; font-weight: 700; border: 1px solid; }
.telios-verdict.ok { color: var(--telios-ok); border-color: var(--telios-ok); }
.telios-verdict.ko { color: var(--telios-danger); border-color: var(--telios-danger); }
.telios-verdict.attente { color: var(--telios-alerte); border-color: var(--telios-alerte); }
.telios-masque { display: none; }
/* QR code de la double authentification : toujours noir sur blanc (dessiné
   ainsi par le serveur), assez grand pour un téléphone tenu à 30 cm. */
/* Configuration → Thème : deux aperçus côte à côte, dessinés aux couleurs du thème. */
.telios-apercus { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.telios-apercu-theme { display: block; width: 100%; height: auto; border-radius: var(--telios-rayon-petit); border: 1px solid var(--telios-trait); }
.telios-theme-actif { box-shadow: inset 0 0 0 2px var(--telios-accent); }
.telios-qr { margin: 0; }
.telios-qr-image { display: block; width: 220px; max-width: 100%; height: auto; border-radius: var(--telios-rayon-petit); }
.telios-aide { color: var(--telios-texte-attenue); font-size: .875rem; }

/* Largeurs des barres d'histogramme : classes fixes, faute de styles en ligne
   (la politique de sécurité du contenu les refuse). */
.telios-l-0 { width: 0; } .telios-l-5 { width: 5%; } .telios-l-10 { width: 10%; }
.telios-l-15 { width: 15%; } .telios-l-20 { width: 20%; } .telios-l-25 { width: 25%; }
.telios-l-30 { width: 30%; } .telios-l-35 { width: 35%; } .telios-l-40 { width: 40%; }
.telios-l-45 { width: 45%; } .telios-l-50 { width: 50%; } .telios-l-55 { width: 55%; }
.telios-l-60 { width: 60%; } .telios-l-65 { width: 65%; } .telios-l-70 { width: 70%; }
.telios-l-75 { width: 75%; } .telios-l-80 { width: 80%; } .telios-l-85 { width: 85%; }
.telios-l-90 { width: 90%; } .telios-l-95 { width: 95%; } .telios-l-100 { width: 100%; }

/* Sélecteur de langue : trois boutons sur une ligne ; la langue courante est
   mise en avant, pas grisée comme un bouton désactivé ordinaire. */
.telios-langues [role=group] { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
.telios-langue { padding-left: 8px; padding-right: 8px; font-weight: 600; letter-spacing: .5px; }
.telios-langue[aria-current] { opacity: 1; color: var(--telios-texte); box-shadow: inset 0 -2px 0 var(--telios-accent); }

/* Ce qui n'a de sens qu'avec un script (bascule de thème, copie) ne s'affiche
   qu'une fois theme.js passé. */
html:not(.telios-js) .telios-js-seul { display: none !important; }

/* Surfaces que le navigateur dessine : elles portent aussi la maison. */
::selection { background: rgba(var(--tblr-primary-rgb), .35); color: var(--telios-texte); }
:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
html { accent-color: var(--telios-accent); color-scheme: dark; }
html[data-bs-theme=light] { color-scheme: light; }
.telios-chiffres td, .telios-chiffres th, .tb-valeur, .tb-valeur-moyenne, .tb-compte { font-variant-numeric: tabular-nums; }

/* ── Administration du propriétaire ─────────────────────────────────────
   Barre latérale d'un second neutre, plus froid que le fond ; en-tête avec
   recherche globale ; titre de page et période sur une même ligne. */
.telios-icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.telios-admin .telios-rail { background: var(--telios-rail); border-right: 1px solid var(--telios-trait); }
/* À partir de 992 px, Tabler fixe la barre à gauche sur toute la hauteur de
   la fenêtre. Une capture « pleine page » ne la montre que sur la hauteur du
   premier écran : c'est la capture, pas la page. */
/* Tabler met .page-title en flex : la barrette passait à gauche du titre,
   collée à sa première lettre, sur les pages de l'espace client. */
.telios-titre { display: block; }
.telios-rail-marque { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.telios-rail .navbar-brand, .telios-rail .telios-nom { color: var(--telios-rail-texte); }
.telios-rail .telios-marque { color: var(--telios-rail-marque); }
.telios-rail .btn-ghost-secondary { color: var(--telios-rail-texte); }
.telios-rail-marque::before { content: ""; align-self: center; width: 4px; height: 22px; border-radius: 999px;
  background: var(--telios-rail-marque); }
.telios-rail-liens .nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-rail-texte-attenue); padding: 8px 12px; }
/* Survol : un voile du texte de la barre, lisible sur une barre claire
   comme sur un champ foncé. Le thème d'origine garde son fond second. */
.telios-rail-liens .nav-link:hover { color: var(--telios-rail-texte);
  background: var(--telios-rail-survol, var(--telios-bg-alt)); }
.telios-rail-liens .nav-link.active { color: var(--telios-rail-texte); background: var(--telios-rail-actif);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--telios-rail-marque); }
.telios-rail-liens .nav-link.active .telios-icone { color: var(--telios-rail-icone-active, var(--telios-accent)); }
.telios-rail-groupe { list-style: none; margin: 18px 12px 6px; font-size: .75rem; font-weight: 600;
  color: var(--telios-rail-texte-attenue); }
.telios-rail-groupe:first-child { margin-top: 8px; }
.telios-rail-bouton { width: 100%; border: 0; background: none; text-align: left; }
.telios-rail-pied { margin: 24px 12px 12px; font-size: .75rem; color: var(--telios-rail-texte-attenue); word-break: break-all; }
.telios-entete { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--telios-trait); }
.telios-recherche { position: relative; flex: 1 1 auto; max-width: 560px; }
.telios-recherche .telios-icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--telios-texte-attenue); pointer-events: none; }
.telios-recherche .form-control { padding-left: 40px; min-height: 40px; }
.telios-entete .btn { gap: 8px; margin-left: auto; }
.telios-titre-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding: 24px 24px 8px; }
.telios-titre-bloc { flex: 1 1 280px; min-width: 0; }
.telios-titre-page .page-title { font-size: 1.5rem; margin: 0 0 4px; }
.telios-contenu { padding: 16px 24px 48px; }
.telios-action-entete { flex: none; }

/* Sélecteur de période : des liens, en contrôle segmenté. */
.telios-periode { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  margin-left: auto; }
.telios-segments { display: flex; margin: 0; padding: 3px; list-style: none; border-radius: var(--telios-rayon-petit);
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.telios-segment { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-texte-attenue); font-weight: 500; white-space: nowrap; cursor: pointer; }
.telios-segment:hover { color: var(--telios-texte); text-decoration: none; }
.telios-segment.actif { background: var(--telios-carte); color: var(--telios-texte); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.telios-periode-libre { position: relative; }
.telios-periode-libre summary { list-style: none; border: 1px solid var(--telios-trait); }
.telios-periode-libre summary::-webkit-details-marker { display: none; }
.telios-periode-dates { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; gap: 8px;
  padding: 12px; border-radius: var(--telios-rayon-grand); background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.telios-periode-texte { flex-basis: 100%; margin: 0; text-align: right; }

/* Indicateurs : le chiffre d'affaires mène, plus large et plus grand. */
.tb-indicateurs { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
/* Écran moyen : le chiffre d'affaires occupe sa ligne, les quatre autres
   la suivante ; à partir de 1400 px, les cinq tiennent sur une ligne. */
.tb-indicateur { margin: 0; }
.tb-indicateur .card-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px; }
.tb-principal { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .tb-indicateurs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .tb-indicateurs { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  .tb-principal { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .tb-principal .card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 32px;
    align-items: end; }
  .tb-principal .tb-mini { grid-column: 2; grid-row: 1 / span 3; height: 72px; }
  .tb-principal .g-mini { height: 72px; }
}
.tb-libelle { margin: 0; font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--telios-texte-attenue); }
.tb-valeur { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.tb-principal .tb-valeur { font-size: 2.5rem; }
.tb-valeur-moyenne { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.tb-valeur-texte { font-size: 1rem; }
.tb-ecart { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; font-size: .8125rem; font-weight: 600; }
.tb-ecart .telios-icone { width: 16px; height: 16px; stroke-width: 2.4; }
.tb-hausse { color: var(--telios-ok); }
.tb-baisse { color: var(--telios-danger); }
.tb-stable { color: var(--telios-texte-attenue); }
.tb-ecart-base { font-weight: 400; color: var(--telios-texte-attenue); }
.tb-mini { margin-top: auto; padding-top: 6px; height: 38px; }
.g-mini { display: block; width: 100%; height: 32px; }
.g-mini-trait { fill: none; stroke: var(--telios-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.g-mini-surface { fill: rgba(var(--tblr-primary-rgb), .14); stroke: none; }
.tb-principal .g-mini-trait { stroke: var(--telios-accent); stroke-width: 2; }
.tb-resume { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px;
  border-radius: var(--telios-rayon-grand); overflow: hidden; background: var(--telios-trait); border: 1px solid var(--telios-trait); }
.tb-resume > div { padding: 14px 18px; background: var(--telios-carte); }

/* Graphiques SVG : couleurs des jetons, deux dessins (bureau, smartphone). */
.tb-graphe { position: relative; }
/* La carte des ventes s'aligne sur la colonne « À traiter » : le graphique,
   dont la proportion est fixe, se centre dans la hauteur gagnée au lieu de
   laisser un vide sous lui. */
.tb-corps-graphe { display: flex; flex-direction: column; justify-content: center; }
.g-graphe { display: block; width: 100%; height: auto; }
/* Trois dessins du même graphique, un par classe d'écran : ses textes
   suivent l'échelle du SVG, et un seul dessin étiré sur 1600 px les
   affichait en très gros. */
.g-graphe.g-mobile, .g-graphe.g-large { display: none; }
@media (max-width: 575.98px) {
  .g-graphe.g-bureau { display: none; }
  .g-graphe.g-mobile { display: block; }
}
@media (min-width: 1600px) {
  .g-graphe.g-bureau { display: none; }
  .g-graphe.g-large { display: block; }
}
.g-grille { stroke: var(--telios-trait); stroke-width: 1; }
/* Les textes d'un SVG suivent son échelle : le dessin « bureau » (repère de
   760) s'affiche entre 520 et 800 px de large, le « smartphone » (360)
   autour de 320 px. Ces tailles gardent les étiquettes à 11 px au moins. */
.g-axe { fill: var(--telios-texte-attenue); font-size: 16px; font-family: inherit; font-variant-numeric: tabular-nums; }
.g-mobile .g-axe { font-size: 13px; }
.g-axe-courbe { fill: var(--telios-accent2); font-weight: 600; }
.g-barre { fill: var(--telios-accent); }
.g-barre:hover { fill-opacity: .8; }
.g-courbe { fill: none; stroke: var(--telios-accent2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-point { fill: var(--telios-carte); stroke: var(--telios-accent2); stroke-width: 2; }
.g-anneau { display: block; width: 140px; height: 140px; flex: none; }
.g-anneau-fond { fill: none; stroke: var(--telios-bg-alt); stroke-width: 22; }
.g-part { fill: none; stroke-width: 22; }
.g-centre { fill: var(--telios-texte); font-size: 22px; font-weight: 700; }
/* Six séries, des jetons du thème ; la légende répète la même couleur. */
.g-serie-0 { stroke: var(--telios-accent); }   .g-fond-0 { background: var(--telios-accent); }
.g-serie-1 { stroke: var(--telios-accent2); }  .g-fond-1 { background: var(--telios-accent2); }
.g-serie-2 { stroke: var(--telios-alerte); }   .g-fond-2 { background: var(--telios-alerte); }
.g-serie-3 { stroke: var(--telios-texte); }    .g-fond-3 { background: var(--telios-texte); }
.g-serie-4 { stroke: var(--telios-texte-attenue); } .g-fond-4 { background: var(--telios-texte-attenue); }
.g-serie-5 { stroke: var(--telios-trait); }    .g-fond-5 { background: var(--telios-trait); }
.tb-entete-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tb-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--telios-texte-attenue); }
.tb-legende li { display: inline-flex; align-items: center; gap: 6px; }
.tb-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 8px; flex: none; }
.tb-pastille-barre { background: var(--telios-accent); border-radius: 0; margin-right: 0; }
.tb-pastille-courbe { background: var(--telios-accent2); height: 3px; width: 14px; margin-right: 0; }
.tb-donnees { margin-top: 12px; }
.tb-donnees > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.tb-donnees > summary::-webkit-details-marker { display: none; }
.tb-donnees > summary .telios-icone { width: 16px; height: 16px; transition: transform .15s ease-out; }
.tb-donnees[open] > summary .telios-icone { transform: rotate(90deg); }
.tb-donnees summary, details > summary { cursor: pointer; color: var(--telios-accent); font-weight: 500; }
/* Carte des données : trois vues derrière des onglets en segments, centrés ;
   l'export à droite. La première colonne, vide, équilibre la troisième. */
.tb-carte-donnees { container-type: inline-size; }
.tb-entete-onglets { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 16px; }
.tb-entete-onglets .tb-onglets { grid-column: 2; }
.tb-export { grid-column: 3; justify-self: end; white-space: nowrap; }
.tb-export .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
/* La largeur qui compte est celle de la carte, pas celle de l'écran : sous
   900 px de carte, onglets et export ne tiennent plus sur une ligne sans se
   chevaucher. L'export passe alors dessous, centré lui aussi. */
@container (max-width: 900px) {
  .tb-entete-onglets { grid-template-columns: 1fr; justify-items: center; }
  .tb-entete-onglets .tb-onglets, .tb-export { grid-column: 1; justify-self: center; }
}
.tb-onglets { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--telios-bg-alt); box-shadow: inset 0 0 0 1px var(--telios-trait); }
.tb-onglet { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 0;
  border-radius: 999px; background: transparent; color: var(--telios-texte-attenue); font: inherit; font-size: .875rem;
  font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.tb-onglet .telios-icone { width: 16px; height: 16px; flex: none; }
.tb-onglet:hover { color: var(--telios-texte); }
.tb-onglet[aria-selected="true"] { background: var(--telios-carte); color: var(--telios-accent); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--telios-trait); }
.tb-onglet:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.tb-vue-lien .telios-icone { width: 14px; height: 14px; margin: 0 -2px 0 4px; }
.tb-vue:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: -2px; }
.tb-vue-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-bottom: 14px; }
.tb-vue-titre { margin: 0 0 12px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.tb-vue-tete .tb-vue-titre { margin: 0; }
.tb-table-donnees { margin: 0; font-size: .875rem; }
.tb-table-donnees thead th { padding: 10px 12px; border-bottom: 1px solid var(--telios-trait); background: var(--telios-bg-alt);
  font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--telios-texte-attenue);
  vertical-align: bottom; text-wrap: balance; }
.tb-table-donnees thead th:first-child { border-radius: 6px 0 0 6px; }
.tb-table-donnees thead th:last-child { border-radius: 0 6px 6px 0; }
.tb-table-donnees tbody th, .tb-table-donnees tbody td { padding: 9px 12px; border-bottom: 1px solid var(--telios-trait); }
.tb-table-donnees tbody th { font-weight: 500; white-space: nowrap; }
.tb-table-donnees tbody tr:last-child > * { border-bottom: 0; }
.tb-table-donnees tbody tr:hover > * { background: rgba(var(--tblr-primary-rgb), .05); }
/* Les indicateurs en petits multiples : un total, ses colonnes. */
.tb-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 22px;
  padding: 0; list-style: none; }
.tb-multiple { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; border-radius: 12px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.tb-multiple-principal { border-color: var(--telios-accent); box-shadow: inset 0 0 0 1px var(--telios-accent); }
.tb-multiple-tete { display: flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.tb-multiple-tete .telios-icone { width: 15px; height: 15px; flex: none; color: var(--telios-accent); }
.tb-multiple-valeur { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-colonnes { display: block; width: 100%; height: 46px; margin-top: 8px; }
.g-colonne { fill: var(--telios-accent); fill-opacity: .85; }
.g-colonne-vide { fill: var(--telios-trait); fill-opacity: 1; }
/* Le cumul : une surface pour l'argent, une courbe pour les licences. */
.g-surface { fill: rgba(var(--tblr-primary-rgb), .14); }
.g-surface-trait { fill: none; stroke: var(--telios-accent); stroke-width: 2.5; stroke-linejoin: round; }
.g-point-surface { stroke: var(--telios-accent); }
.tb-pastille-surface { width: 14px; height: 10px; border-radius: 0; margin-right: 0;
  background: rgba(var(--tblr-primary-rgb), .25); box-shadow: inset 0 2px 0 var(--telios-accent); }

/* Animation à l'affichage (voir noyau/graphiques.py). L'état de repos est
   l'état final : sous prefers-reduced-motion, qui coupe toute animation, le
   graphique s'affiche donc entier, jamais vide. */
@keyframes g-monte { from { transform: scaleY(0); } }
@keyframes g-trace { from { stroke-dashoffset: 1; } }
@keyframes g-apparait { from { opacity: 0; } }
.g-barre, .g-colonne, .g-surface { transform-box: fill-box; transform-origin: 50% 100%;
  animation: g-monte .7s cubic-bezier(.22, .8, .24, 1) both; }
.g-surface { animation-duration: .9s; }
.g-courbe, .g-surface-trait { stroke-dasharray: 1; stroke-dashoffset: 0; animation: g-trace 1.1s .25s ease-out both; }
.g-point { animation: g-apparait .35s 1.05s both; }
.g-v1 { animation-delay: 30ms; }   .g-v2 { animation-delay: 60ms; }   .g-v3 { animation-delay: 90ms; }
.g-v4 { animation-delay: 120ms; }  .g-v5 { animation-delay: 150ms; }  .g-v6 { animation-delay: 180ms; }
.g-v7 { animation-delay: 210ms; }  .g-v8 { animation-delay: 240ms; }  .g-v9 { animation-delay: 270ms; }
.g-v10 { animation-delay: 300ms; } .g-v11 { animation-delay: 330ms; } .g-v12 { animation-delay: 360ms; }
.g-v13 { animation-delay: 390ms; } .g-v14 { animation-delay: 420ms; } .g-v15 { animation-delay: 450ms; }

/* Un zéro reste écrit (c'est une donnée), mais ne capte pas l'œil. */
.tb-table-donnees .tb-zero { color: var(--telios-texte-attenue); }
@media (max-width: 575.98px) {
  .tb-onglets { display: flex; width: 100%; border-radius: 12px; }
  .tb-onglet { flex: 1 1 0; justify-content: center; padding: 0 8px; white-space: normal; text-align: center;
    border-radius: 6px; line-height: 1.2; }
  .tb-onglet .telios-icone { display: none; }
  .tb-onglet-long { display: none; }
  /* Six colonnes ne tiennent pas sur un smartphone : chaque mois devient une
     fiche, plutôt qu'un tableau qu'il faudrait faire défiler de côté. */
  .tb-table-fiches thead { display: none; }
  .tb-table-fiches, .tb-table-fiches tbody, .tb-table-fiches tr, .tb-table-fiches th, .tb-table-fiches td { display: block; }
  .tb-table-fiches tbody { display: grid; gap: 10px; }
  .tb-table-fiches tr { border: 1px solid var(--telios-trait); border-radius: 12px; overflow: hidden; }
  .tb-table-fiches tbody th { padding: 10px 14px; background: var(--telios-bg-alt); font-weight: 600; }
  .tb-table-fiches tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; }
  .tb-table-fiches tbody td::before { content: attr(data-libelle); color: var(--telios-texte-attenue); text-align: left; }
  .tb-table-fiches tbody tr:last-child > *, .tb-table-fiches tbody td:last-child { border-bottom: 0; }
}
.tb-onglet-court { display: none; }
@media (max-width: 575.98px) { .tb-onglet-court { display: inline; } }
.tb-repartition { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tb-table-legende { flex: 1 1 180px; margin: 0; }
.tb-table-legende th { font-weight: 500; }
.tb-table-legende td { white-space: nowrap; }
.telios-tri .telios-icone { width: 14px; height: 14px; vertical-align: -2px; }
.tb-action-libelle { font-weight: 500; }
.tb-barres-liste .telios-barre { margin: 6px 0 4px; }
.tb-barre-ligne { display: flex; justify-content: space-between; gap: 8px; }

/* À traiter, classement, santé, activité. */
.tb-tache { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px;
  color: var(--telios-texte); }
.tb-tache:hover { color: var(--telios-accent); text-decoration: none; }
.tb-compte { min-width: 2.25rem; padding: 2px 10px; border-radius: 999px; text-align: center;
  background: var(--telios-bg-alt); color: var(--telios-texte); }
.tb-grave .tb-compte { background: var(--telios-danger); color: var(--telios-encre-sur-accent); }
.tb-classement .list-group-item { display: flex; justify-content: space-between; gap: 12px; }
.tb-vide { display: flex; flex-direction: column; justify-content: center; }
.tb-controle { display: flex; align-items: flex-start; gap: 12px; }
.tb-controle .sceau { margin-top: 3px; }
.tb-controle-nom { margin: 0 0 2px; font-weight: 600; }
.tb-etat { margin-left: 6px; font-size: .75rem; font-weight: 600; }
.tb-etat-prouve { color: var(--telios-ok); }
.tb-etat-probable { color: var(--telios-accent2); }
.tb-etat-attente { color: var(--telios-alerte); }
.tb-etat-echec { color: var(--telios-danger); }
.tb-etat-texte { display: inline-flex; align-items: center; gap: 6px; }
div.tb-etat-texte { display: flex; margin-top: 2px; }
.tb-activite .list-group-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tb-etapes { display: grid; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.tb-etape { display: flex; gap: 12px; align-items: flex-start; }
.tb-etape .sceau { margin-top: 3px; }

/* ── Fiche client ─────────────────────────────────────────────────────────
   Une identité (monogramme, méta), des soldes qui disent leur nature, la
   consommation ou son absence expliquée, puis le contact. */
.fiche-monogramme { flex: none; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px;
  border-radius: var(--telios-rayon-grand); background: var(--telios-rail); color: var(--telios-rail-texte);
  font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--telios-trait); }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; padding: 0; list-style: none;
  font-size: .875rem; color: var(--telios-texte-attenue); }
.fiche-meta li { display: inline-flex; align-items: center; gap: 6px; }
.fiche-meta .telios-icone { width: 16px; height: 16px; }
.fiche-soldes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.fiche-solde { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.fiche-solde-illimite { border-color: var(--telios-accent); box-shadow: inset 0 0 0 1px var(--telios-accent); }
.fiche-pastille { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.fiche-pastille .telios-icone { width: 20px; height: 20px; }
.fiche-pastille-grande { width: 56px; height: 56px; }
.fiche-pastille-grande .telios-icone { width: 26px; height: 26px; }
.fiche-solde-valeur { display: inline-block; margin: 2px 0 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.fiche-solde-illimite .fiche-solde-valeur { color: var(--telios-accent); }
.telios-illimite { color: var(--telios-accent); }
.fiche-solde-note { margin: 4px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.fiche-chiffres { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 12px; }
.fiche-chiffres dt { font-size: .8125rem; font-weight: 500; color: var(--telios-texte-attenue); }
.fiche-chiffres dd { display: inline-block; margin: 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fiche-vide { display: flex; align-items: center; gap: 18px; padding: 28px 24px; }
.fiche-vide-petit { padding: 18px 20px; }
.fiche-lignes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fiche-lignes > li { display: flex; align-items: flex-start; gap: 12px; }
.fiche-lignes > li > .telios-icone { margin-top: 2px; color: var(--telios-texte-attenue); }
.fiche-lignes-serrees { gap: 6px; font-size: .875rem; }
.fiche-lignes-serrees .telios-icone { width: 16px; height: 16px; }
.fiche-ligne-libelle { display: block; font-size: .75rem; font-weight: 500; color: var(--telios-texte-attenue); }
.fiche-sous-titre { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--telios-trait);
  font-size: .8125rem; font-weight: 600; color: var(--telios-texte-attenue); }
/* Contact : l'entreprise à gauche, les personnes à droite, dès que le bloc a
   la place. Requête de conteneur et non d'écran : la largeur du bloc dépend
   de la colonne qui le porte, pas seulement de la fenêtre. */
.fiche-contact { container-type: inline-size; }
.fiche-contact-colonnes { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) {
  .fiche-contact-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .fiche-contact-personnes { padding-left: 28px; border-left: 1px solid var(--telios-trait); }
  .fiche-contact-personnes .fiche-sous-titre { margin-top: 0; padding-top: 0; border-top: 0; }
}
.fiche-personnes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fiche-personne { display: flex; align-items: flex-start; gap: 14px; }
.fiche-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); font-weight: 700; font-size: .875rem; }
.fiche-personne-corps { min-width: 0; }
.fiche-personne-nom { margin: 0 0 6px; }
.fiche-personne a { word-break: break-all; }
.fiche-poste { display: flex; align-items: flex-start; gap: 12px; }
.fiche-poste > .telios-icone { margin-top: 2px; color: var(--telios-texte-attenue); }
.telios-titre-page .fiche-monogramme { align-self: center; }
/* Un identifiant ne se coupe pas en deux, même dans la méta d'en-tête. */
.fiche-meta .telios-code { word-break: normal; font-size: inherit; letter-spacing: .02em; }
@media (max-width: 575.98px) {
  .fiche-monogramme { display: none; }
  .fiche-vide { flex-direction: column; align-items: flex-start; }
  .fiche-soldes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fiche-solde { flex-direction: column; gap: 8px; padding: 14px; }
  .fiche-solde-illimite { grid-column: 1 / -1; }
  .fiche-solde-valeur { font-size: 1.5rem; }
}

/* Les sceaux de preuve : une forme par état, la couleur ne fait que doubler. */
.sceau { flex: none; width: 16px; height: 16px; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.sceau-prouve circle { fill: var(--telios-ok); stroke: var(--telios-ok); }
.sceau-prouve .sceau-encre { stroke: var(--telios-carte); stroke-width: 2; }
.sceau-probable { stroke: var(--telios-accent2); }
.sceau-probable .sceau-coeur { fill: var(--telios-accent2); stroke: none; }
.sceau-attente { stroke: var(--telios-alerte); }
.sceau-echec { stroke: var(--telios-danger); }

/* Tableaux, filtres, pagination, formulaires de l'administration. */
.telios-tri { color: inherit; white-space: nowrap; }
.telios-tri:hover { color: var(--telios-accent); text-decoration: none; }
.tb-conso { display: inline-flex; align-items: center; gap: 10px; }
.tb-mini-ligne { display: inline-block; width: 72px; }
.tb-mini-ligne .g-mini { height: 22px; }
.telios-onglets .nav-link { min-height: 32px; padding: 4px 12px; }
.telios-onglets .nav-link.active { background: var(--telios-bg-alt); color: var(--telios-texte); }
.telios-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tb-beneficiaire { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.tb-soldes { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.tb-soldes dt { font-size: .75rem; font-weight: 500; color: var(--telios-texte-attenue); }
.tb-soldes dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-soldes-illimite { display: inline-flex; align-items: center; gap: 6px; color: var(--tblr-success); }
.tb-soldes-illimite .telios-icone { width: 18px; height: 18px; }
.tb-soldes-cadre { flex: 1 1 320px; min-width: 0; }
.tb-soldes-note { margin: 6px 0 0; }
.tb-beneficiaire .btn { margin-left: auto; }
.tb-abonnement { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.tb-revocation, .tb-actions-devis { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pages de formulaires : sur un grand écran, des champs de 800 px pour
   quelques chiffres se lisent mal. Le contenu garde une largeur de lecture. */
.telios-largeur-formulaires { max-width: 1200px; }
.telios-largeur-moyenne { max-width: 760px; }
.tb-gestes-abonnement { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.tb-modifier > summary { list-style: none; }
.tb-modifier > summary::-webkit-details-marker { display: none; }
.tb-modifier[open] > summary { box-shadow: inset 0 0 0 1px var(--telios-accent); }
.tb-modification { display: grid; gap: 10px; margin-top: 8px; padding: 12px; min-width: min(320px, 100%);
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
/* Liste déroulante de la recherche d'entreprise (telios.js) : sous le champ,
   au-dessus du reste ; chaque proposition est une cible tactile de 44 px. */
.telios-autocompletion { position: relative; }
.telios-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; margin: 0; padding: 4px;
  list-style: none; max-height: 340px; overflow-y: auto; background: var(--telios-carte);
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.telios-suggestion { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 12px;
  border-radius: var(--telios-rayon-petit); cursor: pointer; }
.telios-suggestion small { color: var(--telios-texte-attenue); }
.telios-suggestion[aria-selected=true], .telios-suggestion:hover { background: rgba(var(--tblr-primary-rgb), .14); }
.telios-suggestion-vide { padding: 10px 12px; color: var(--telios-texte-attenue); }
.tb-revocation .form-control, .tb-actions-devis .form-control { width: auto; flex: 1 1 140px; }
.tb-creation > summary { list-style: none; display: flex; }
.tb-creation > summary::-webkit-details-marker { display: none; }
.tb-creation > summary::after { content: "Ouvrir"; margin-left: auto; font-size: .8125rem; color: var(--telios-accent); }
.tb-creation[open] > summary::after { content: "Fermer"; }
@media (min-width: 992px) {
  .tb-formulaire-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

@media (max-width: 991.98px) {
  .telios-entete { padding: 10px 12px; }
  .telios-titre-page { padding: 16px 12px 4px; }
  .telios-contenu { padding: 12px 12px 40px; }
  .telios-periode-texte { text-align: left; }
  .telios-rail .navbar-collapse { padding-bottom: 12px; }
}
@media (max-width: 575.98px) {
  .telios-periode { width: 100%; }
  .telios-segments { flex: 1 1 auto; }
  .telios-segments li { flex: 1 1 0; }
  .telios-segment { justify-content: center; padding: 0 6px; width: 100%; min-height: 44px; }
  .telios-periode-dates { left: 0; right: auto; flex-wrap: wrap; width: calc(100vw - 24px); max-width: 340px; }
  .telios-action-entete { width: 100%; }
  .tb-principal .tb-valeur { font-size: 2rem; }
  .tb-valeur { font-size: 1.5rem; }
  .tb-ecart-base { flex-basis: 100%; }
  .g-anneau { width: 120px; height: 120px; }
}

@media print {
  .telios-rail, .telios-entete, .telios-periode, .tb-donnees summary { display: none !important; }
  .tb-donnees > *:not(summary) { display: block; }
  .tb-onglets { display: none !important; }
  .tb-vue[hidden] { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Blocs à ranger (Forfaits) ─────────────────────────────────────────── */
.telios-ordre-entete { gap: 8px; }
.telios-poignee, .telios-fleche {
  display: inline-flex; align-items: center; justify-content: center;
  /* 24 px au moins : la cible minimale de la WCAG 2.2 (critère 2.5.8). */
  min-width: 28px; min-height: 28px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--telios-rayon-petit);
  color: var(--telios-texte-attenue);
}
.telios-poignee { cursor: grab; }
.telios-poignee:hover, .telios-fleche:hover { color: var(--telios-texte); border-color: var(--telios-trait); }
.telios-poignee:focus-visible, .telios-fleche:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.telios-poignee .telios-icone, .telios-fleche .telios-icone { width: 18px; height: 18px; }
.telios-poignee .telios-icone circle { fill: currentColor; stroke: none; }
.telios-ordre-fleches { display: inline-flex; gap: 2px; }
.telios-fleche:disabled { opacity: .35; cursor: default; border-color: transparent; }
.telios-ordonnable.telios-glisse > .card { opacity: .45; outline: 2px dashed var(--telios-accent); outline-offset: -2px; }
.telios-ordre-etat { min-height: 1.5em; margin: 0 0 8px; font-size: .875rem; color: var(--telios-texte-attenue); }
.telios-ordre-etat.ok { color: var(--telios-ok); }
.telios-ordre-etat.ko { color: var(--telios-danger); }
/* Piège : le display ci-dessus l'emporterait sur l'attribut hidden, et
   afficherait sans script des commandes qui ne font rien. */
.telios-poignee[hidden], .telios-ordre-fleches[hidden] { display: none; }

/* ── Console des devis ────────────────────────────────────────────────────
   Trois volets : les dossiers, le dossier ouvert, les échanges. Au-dessous
   de 1100 px, le dossier ouvert prend la place de la liste (lien « Tous les
   dossiers ») ; au-dessous de 1500 px, les échanges passent sous le dossier. */
.dv-prealable, .dv-obstacles { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 14px 16px;
  border-radius: var(--telios-rayon-grand); border: 1px solid var(--telios-alerte);
  background: rgba(var(--tblr-warning-rgb), .08); }
.dv-prealable .sceau, .dv-obstacles .sceau { margin-top: 3px; }
.dv-prealable ul, .dv-obstacles ul { padding-left: 18px; margin-top: 4px; }

.dv-indicateurs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 18px; }
.dv-indicateur { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; overflow: hidden;
  border-radius: var(--telios-rayon-grand); background: var(--telios-carte); border: 1px solid var(--telios-trait);
  color: inherit; transition: border-color .15s ease, transform .15s ease; }
a.dv-indicateur:hover { text-decoration: none; border-color: var(--telios-accent); transform: translateY(-1px); }
.dv-indicateur-vif { border-color: var(--telios-accent); box-shadow: inset 0 0 0 1px var(--telios-accent); }
.dv-indicateur-corps { display: flex; flex-direction: column; min-width: 0; }
.dv-indicateur-valeur { margin-top: 2px; font-size: 1.625rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.dv-indicateur-note { margin-top: 4px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.dv-indicateur-tendance { position: absolute; right: 14px; bottom: 12px; width: 96px; opacity: .9; }
.dv-indicateur-tendance .g-mini { height: 30px; }

.dv-console { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.dv-volet { min-width: 0; }
.dv-carte { margin-bottom: 16px; padding: 18px 20px; border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.dv-carte-titre { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 600; }
.dv-carte-tete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.dv-carte-pied { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px -20px -18px; padding: 14px 20px;
  border-top: 1px solid var(--telios-trait); background: var(--telios-bg-alt);
  border-radius: 0 0 var(--telios-rayon-grand) var(--telios-rayon-grand, 12px); }
.dv-a-droite { margin-left: auto; }
.dv-console .btn .telios-icone, .dv-client .btn .telios-icone, .dv-client-dossier-grille .btn .telios-icone,
.telios-action-entete .telios-icone { width: 16px; height: 16px; margin-right: 6px; }

/* La liste des dossiers. */
.dv-liste { display: flex; flex-direction: column; border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); overflow: hidden; }
.dv-liste-recherche { position: relative; padding: 12px; border-bottom: 1px solid var(--telios-trait); }
.dv-liste-recherche .telios-icone { position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--telios-texte-attenue); pointer-events: none; }
.dv-liste-recherche .form-control { padding-left: 36px; }
/* Pendant la recherche vive, l'ancienne liste pâlit : elle n'est plus la réponse. */
.dv-resultats { transition: opacity .15s ease-out; }
/* Le titre est en capitales ; le terme cherché reste tel qu'il a été saisi. */
.dv-liste-terme { text-transform: none; letter-spacing: 0; color: var(--telios-texte); }
.dv-recherche-en-cours + .dv-resultats { opacity: .55; }
.dv-filtres { padding: 8px; border-bottom: 1px solid var(--telios-trait); }
.dv-filtres ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dv-filtre { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px;
  border-radius: var(--telios-rayon-petit); border-left: 3px solid transparent; color: var(--telios-texte); font-size: .875rem; }
.dv-filtre:hover { text-decoration: none; background: var(--telios-bg-alt); }
.dv-filtre .telios-icone { width: 16px; height: 16px; flex: none; color: var(--telios-texte-attenue); }
.dv-filtre-nom { flex: 1; min-width: 0; }
.dv-filtre.actif { background: rgba(var(--tblr-primary-rgb), .12); border-left-color: var(--telios-accent); color: var(--telios-accent);
  font-weight: 600; }
.dv-filtre.actif .telios-icone { color: var(--telios-accent); }
.dv-compte { min-width: 24px; padding: 1px 7px; border-radius: 999px; font-size: .75rem; font-weight: 600; text-align: center;
  background: var(--telios-bg-alt); color: var(--telios-texte-attenue); font-variant-numeric: tabular-nums; }
.dv-compte-vif { background: var(--telios-accent); color: var(--telios-encre-sur-accent); }
.dv-compte-nul { background: transparent; opacity: .7; }
.dv-liste-titre { margin: 0; padding: 12px 18px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--telios-texte-attenue); }
.dv-dossiers { margin: 0; padding: 6px; list-style: none; max-height: 70vh; overflow-y: auto; }
.dv-dossier-ligne { display: flex; gap: 12px; padding: 10px; border-radius: var(--telios-rayon-petit); color: inherit;
  border-left: 3px solid transparent; }
.dv-dossier-ligne:hover { text-decoration: none; background: var(--telios-bg-alt); }
.dv-dossier-ligne.actif { background: rgba(var(--tblr-primary-rgb), .12); border-left-color: var(--telios-accent); }
.dv-monogramme { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--telios-rayon-petit);
  background: var(--telios-rail); color: var(--telios-rail-texte); font-size: .8125rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--telios-trait); }
.dv-dossier-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dv-dossier-haut { display: flex; align-items: center; gap: 8px; }
.dv-dossier-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-pastille-non-lu { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--telios-accent);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .22); }
.dv-dossier-detail { font-size: .8125rem; color: var(--telios-texte-attenue); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-dossier-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.dv-quand { margin-left: auto; font-size: .75rem; color: var(--telios-texte-attenue); white-space: nowrap; }
.dv-liste-vide { display: flex; align-items: center; gap: 10px; padding: 14px 12px 18px; font-size: .875rem;
  color: var(--telios-texte-attenue); }
.dv-liste-vide .telios-icone { width: 18px; height: 18px; flex: none; }
/* Premier usage : les trois temps d'un devis. */
.dv-etapes { display: grid; gap: 14px; width: min(520px, 100%); margin: 0; padding: 0; list-style: none; text-align: left; }
.dv-etapes li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.dv-etapes strong { display: block; margin-bottom: 2px; }
.dv-etapes span:not(.dv-etape-icone) { color: var(--telios-texte-attenue); font-size: .875rem; }
.dv-etape-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.dv-etape-icone .telios-icone { width: 17px; height: 17px; }
.dv-accueil.dv-premier-pas { border-style: solid; background: var(--telios-bg-alt); }
/* Le panneau d'accueil reste en vue quand la liste des dossiers défile. */
@media (min-width: 1100px) { .dv-accueil { position: sticky; top: 16px; align-self: start; } }
.dv-liste-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--telios-trait); }

/* Les états : une pastille de texte, la couleur ne fait que doubler le mot. */
.dv-etat { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: .75rem;
  font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--telios-bg-alt); color: var(--telios-texte-attenue);
  border: 1px solid var(--telios-trait); }
.dv-etat::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.dv-etat-nouvelle, .dv-etat-acceptee, .dv-etat-devis-accepte { color: var(--telios-accent); border-color: currentColor;
  background: rgba(var(--tblr-primary-rgb), .1); }
.dv-etat-envoyee, .dv-etat-devis-envoye { color: var(--telios-accent2); border-color: currentColor; }
.dv-etat-payee, .dv-etat-devis-regle { color: var(--telios-ok); border-color: currentColor; background: rgba(var(--tblr-success-rgb), .1); }
.dv-etat-refusee, .dv-etat-devis-refuse, .dv-etat-expire { color: var(--telios-danger); border-color: currentColor;
  background: rgba(var(--tblr-danger-rgb), .08); }
.dv-etat-brouillon { color: var(--telios-alerte); border-color: currentColor; border-style: dashed; }

/* Le dossier ouvert. */
.dv-retour { display: none; align-items: center; gap: 4px; margin-bottom: 10px; font-size: .875rem; }
.dv-retour .telios-icone { width: 16px; height: 16px; }
.dv-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dv-entete-corps { flex: 1 1 320px; min-width: 0; }
.dv-entete-titre { margin: 0 0 4px; font-size: 1.375rem; font-weight: 700; }
.dv-entete-titre a { color: inherit; }
.dv-entete-actions { margin-left: auto; }
.dv-entete-simple { display: flex; align-items: center; gap: 14px; }
.dv-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-style: dashed; }
.dv-editeur { border-color: var(--telios-accent); box-shadow: 0 0 0 1px var(--telios-accent),
  0 12px 32px -18px rgba(var(--tblr-primary-rgb), .55); }
.dv-editeur-grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.dv-champs { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-content: start; }
.dv-champ-large { grid-column: 1 / -1; }
.dv-champ .form-hint { margin: 4px 0 0; }
.dv-champ-interne .form-label { display: inline-flex; align-items: center; gap: 6px; color: var(--telios-texte-attenue); }
.dv-champ-interne .telios-icone { width: 14px; height: 14px; }
.dv-champ-interne textarea { border-style: dashed; }
.dv-totaux { align-self: start; padding: 16px 18px; border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt);
  border: 1px solid var(--telios-trait); font-variant-numeric: tabular-nums; }
.dv-totaux dl { display: grid; gap: 8px; margin: 0; }
.dv-totaux dl > div { display: flex; justify-content: space-between; gap: 12px; }
.dv-totaux dt { font-weight: 400; color: var(--telios-texte-attenue); }
.dv-totaux dd { margin: 0; font-weight: 600; }
.dv-totaux-ht { padding-top: 8px; border-top: 1px solid var(--telios-trait); }
.dv-totaux-ttc { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px -18px 0; padding: 14px 18px;
  background: var(--telios-accent); color: var(--telios-encre-sur-accent); font-weight: 600; }
.dv-totaux-ttc strong { font-size: 1.5rem; font-weight: 700; }
.dv-totaux-mention { margin: 10px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
.dv-ecart-baisse { color: var(--telios-alerte); font-weight: 600; }
.dv-ecart-hausse { color: var(--telios-ok); font-weight: 600; }

/* Une version de devis. */
.dv-version { position: relative; }
.dv-version::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 999px;
  background: var(--telios-trait); }
.dv-version-envoye::before { background: var(--telios-accent2); }
.dv-version-accepte::before { background: var(--telios-accent); }
.dv-version-regle::before { background: var(--telios-ok); }
.dv-version-refuse::before, .dv-version-expire::before { background: var(--telios-danger); }
.dv-version-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dv-version-numero { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.dv-version-v { margin-left: 8px; padding: 0 6px; border-radius: var(--telios-rayon-petit); font-size: .75rem; font-weight: 600;
  background: var(--telios-bg-alt); color: var(--telios-texte-attenue); }
.dv-version-montants { margin: 12px 0 4px; }
.dv-version-ht { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dv-version-ht span { margin-left: 6px; font-size: .875rem; font-weight: 500; color: var(--telios-texte-attenue); }
.dv-frise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 16px 0 6px; padding: 0; list-style: none; }
.dv-jalon { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; }
.dv-jalon::after { content: ""; position: absolute; top: 7px; left: 22px; right: 4px; height: 2px; border-radius: 999px;
  background: var(--telios-trait); }
.dv-jalon:last-child::after { display: none; }
.dv-jalon.fait::after { background: var(--telios-ok); }
.dv-jalon > span { display: flex; flex-direction: column; font-size: .8125rem; }
.dv-jalon small { color: var(--telios-texte-attenue); font-variant-numeric: tabular-nums; }
.dv-version-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--telios-trait); }
.dv-version-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dv-empreinte { font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--telios-texte-attenue); }
.dv-citation { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--telios-danger); font-style: italic; }
.dv-note-interne { display: flex; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--telios-trait);
  border-radius: var(--telios-rayon-petit); font-size: .875rem; color: var(--telios-texte-attenue); }
.dv-note-interne .telios-icone { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.dv-anciennes { margin-bottom: 16px; }
.dv-anciennes > summary { margin-bottom: 10px; cursor: pointer; font-size: .875rem; color: var(--telios-texte-attenue); }
.dv-anciennes .dv-version { opacity: .78; }
.dv-accueil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 360px;
  padding: 32px; text-align: center; border-radius: var(--telios-rayon-grand); border: 1px dashed var(--telios-trait); }

/* Le fil des échanges. */
.dv-fil { display: flex; flex-direction: column; border-radius: var(--telios-rayon-grand); background: var(--telios-carte);
  border: 1px solid var(--telios-trait); overflow: hidden; }
.dv-fil-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--telios-trait); }
.dv-fil-titre { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 600; }
.dv-fil-liste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; list-style: none;
  max-height: 62vh; overflow-y: auto; background: var(--telios-bg-alt); }
.dv-message { max-width: 92%; padding: 10px 14px; border-radius: var(--telios-rayon-grand); background: var(--telios-carte);
  border: 1px solid var(--telios-trait); }
.dv-message-client { align-self: flex-start; border-bottom-left-radius: var(--telios-rayon-petit); }
.dv-message-editeur { align-self: flex-end; border-bottom-right-radius: var(--telios-rayon-petit);
  background: rgba(var(--tblr-primary-rgb), .1); border-color: rgba(var(--tblr-primary-rgb), .35); }
.dv-message-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8125rem; }
.dv-message-tete time { margin-left: auto; color: var(--telios-texte-attenue); font-size: .75rem; }
.dv-message-tete .telios-icone { width: 14px; height: 14px; color: var(--telios-texte-attenue); }
.dv-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; font-size: .6875rem;
  font-weight: 700; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.dv-avatar-editeur { background: var(--telios-accent); color: var(--telios-encre-sur-accent); border-color: var(--telios-accent); }
.dv-message-texte { margin: 0; overflow-wrap: anywhere; }
.dv-message-lien { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
.dv-message-lien .telios-icone { width: 14px; height: 14px; }
.dv-message-erreur { margin: 8px 0 0; font-size: .8125rem; color: var(--telios-danger); }
.dv-evenement { display: flex; align-items: flex-start; gap: 10px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.dv-evenement-texte { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dv-evenement time { font-size: .75rem; }
.dv-evenement-icone { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.dv-evenement-icone .telios-icone { width: 14px; height: 14px; }
.dv-evenement-consulte .dv-evenement-icone, .dv-evenement-accepte .dv-evenement-icone, .dv-evenement-regle .dv-evenement-icone {
  color: var(--telios-ok); border-color: var(--telios-ok); }
.dv-evenement-refuse .dv-evenement-icone { color: var(--telios-danger); border-color: var(--telios-danger); }
.dv-evenement-envoye .dv-evenement-icone { color: var(--telios-accent2); border-color: var(--telios-accent2); }
.dv-fil-vide { font-size: .875rem; color: var(--telios-texte-attenue); }
.dv-composer { padding: 12px; border-top: 1px solid var(--telios-trait); }
.dv-composer .form-label { display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }
.dv-composer .form-label .telios-icone { width: 14px; height: 14px; }
/* Le lien vers la conversation (echanges), à la place de l'ancien tchat du dossier. */
.dv-conversation { margin: 0; padding: 14px 18px; border-top: 1px solid var(--telios-trait);
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), .08), transparent 70%); }
.dv-conversation-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 700; }
.dv-conversation-titre .telios-icone { width: 16px; height: 16px; color: var(--telios-accent); }
.dv-conversation .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.dv-composer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (min-width: 1100px) {
  .dv-console { grid-template-columns: 330px minmax(0, 1fr); }
  .dv-fil { grid-column: 2; }
}
@media (min-width: 1300px) {
  .dv-editeur-grille { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (min-width: 1500px) {
  .dv-console.dv-avec-dossier { grid-template-columns: 320px minmax(0, 1fr) 380px; }
  .dv-avec-dossier .dv-fil { grid-column: 3; position: sticky; top: 16px; }
  .dv-avec-dossier .dv-fil-liste { max-height: calc(100vh - 260px); }
}
@media (max-width: 1099.98px) {
  /* Un dossier ouvert sur petit écran : il passe avant les chiffres de tête. */
  .dv-indicateurs-replies { display: none; }
  .dv-avec-dossier .dv-liste { display: none; }
  .dv-avec-dossier .dv-retour { display: inline-flex; }
  .dv-accueil:not(.dv-premier-pas) { display: none; }
}
@media (max-width: 575.98px) {
  .dv-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dv-indicateur { flex-direction: column; gap: 8px; padding: 14px; }
  .dv-indicateur-valeur { font-size: 1.25rem; }
  .dv-indicateur-tendance { display: none; }
  .dv-accueil { padding: 22px 14px; }
  .dv-carte { padding: 14px; }
  .dv-carte-pied { margin: 14px -14px -14px; padding: 12px 14px; }
  .dv-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dv-jalon::after { display: none; }
  .dv-entete .fiche-monogramme { display: none; }
  .dv-version-actions { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-indicateur { transition: none; }
  a.dv-indicateur:hover { transform: none; }
}

/* Devis, côté client : la liste, puis le devis et ses échanges côte à côte. */
.dv-client { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 1200px; }
.dv-client-liste { display: grid; gap: 10px; }
.dv-client-dossier { display: flex; align-items: center; gap: 14px; margin: 0; color: inherit; }
.dv-client-dossier:hover { text-decoration: none; border-color: var(--telios-accent); }
.dv-client-dossier-grille { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; max-width: 1280px; }
.dv-client-montants { margin-top: 14px; padding: 14px 18px 0; border-radius: var(--telios-rayon-grand); overflow: hidden;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); font-variant-numeric: tabular-nums; }
.dv-client-montants dl { display: grid; gap: 8px; margin: 0 0 14px; }
.dv-client-montants dl > div { display: flex; justify-content: space-between; gap: 12px; }
.dv-client-montants dt { font-weight: 400; color: var(--telios-texte-attenue); }
.dv-client-montants dd { margin: 0; font-weight: 600; }
.dv-client-montants .dv-totaux-ttc { margin: 0 -18px; }
.dv-refus > summary { list-style: none; }
.dv-refus > summary::-webkit-details-marker { display: none; }
.dv-refus-corps { margin-top: 8px; padding: 12px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-bg-alt); }
@media (min-width: 992px) {
  .dv-client { grid-template-columns: minmax(0, 1fr) 380px; }
  .dv-client-dossier-grille { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ── Fenêtre d'édition (<dialog> natif) ──────────────────────────────────
   Le cadre défile à l'intérieur ; l'en-tête et le pied restent visibles,
   pour que « Enregistrer » ne disparaisse jamais sous un long formulaire. */
.tb-editer[hidden] { display: none; }
.tb-lien-modifier { display: inline-flex; align-items: center; gap: 6px; }
.tb-lien-modifier .telios-icone { width: 16px; height: 16px; }
.tb-editer .telios-icone { width: 18px; height: 18px; }
.tb-dialogue { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-carte); color: var(--telios-texte);
  box-shadow: 0 30px 80px -20px rgba(var(--tblr-primary-rgb), .35), 0 12px 32px rgba(0, 0, 0, .35); overflow: hidden; }
.tb-dialogue::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.tb-dialogue[open] { animation: tb-dialogue-entree .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes tb-dialogue-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.tb-dialogue-cadre { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.tb-dialogue-tete { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), .08), transparent); }
.tb-dialogue-titre { margin: 0; font-size: 1.125rem; font-weight: 700; }
.tb-dialogue-corps { display: grid; gap: 22px; padding: 20px 22px; overflow-y: auto; }
.tb-dialogue-rubrique { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .8125rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.tb-dialogue-rubrique .telios-icone { width: 16px; height: 16px; }
.tb-dialogue-grille { display: grid; gap: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-dialogue-large { grid-column: 1 / -1; }
.tb-dialogue-case { margin: 4px 0 0; }
.tb-dialogue-champ[hidden], .mb-3[hidden] { display: none; }
.tb-dialogue-champ .form-label { margin-bottom: 4px; }
.tb-dialogue-verrou { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; font-size: .8125rem;
  color: var(--telios-texte-attenue); border: 1px dashed var(--telios-trait); border-radius: var(--telios-rayon-petit); }
.tb-dialogue-verrou .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.tb-dialogue-personne { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 12px; padding: 14px; min-width: 0;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
.tb-dialogue-personne .fiche-avatar { margin-top: 24px; }
.tb-dialogue-grille-personne { flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr); }
.tb-dialogue-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--telios-trait);
  background: var(--telios-bg-alt); }
.tb-dialogue-pied .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 640px) {
  .tb-dialogue-grille, .tb-dialogue-grille-personne { grid-template-columns: minmax(0, 1fr); }
  .tb-dialogue-personne .fiche-avatar { display: none; }
  .tb-dialogue-pied .btn { flex: 1; }
}
/* Les cotillons : une toile posée sur la page, qui ne capte aucun clic. */
.tb-cotillons { position: fixed; inset: 0; z-index: 2000; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tb-dialogue[open] { animation: none; }
}

/* Logos des moyens de paiement : format carte bancaire, 38 × 24. */
.tb-logo-paiement { flex: none; display: inline-grid; place-items: center; width: 38px; height: 24px;
  border-radius: var(--telios-rayon-petit); vertical-align: middle; }
.tb-logo-contour { border: 1px solid var(--telios-trait); background: var(--telios-bg-alt); color: var(--telios-texte-attenue); }
.tb-logo-contour .telios-icone { width: 16px; height: 16px; }
.tb-moyen { display: inline-flex; align-items: center; gap: 10px; }
.tb-moyen-texte { display: flex; flex-direction: column; line-height: 1.3; }
.tb-moyen-detail { font-size: .8125rem; color: var(--telios-texte-attenue); font-variant-numeric: tabular-nums; }

/* Bilan d'une commande : livraison, facturation, paiement, côte à côte dès
   que la place le permet ; puis le détail chiffré. */
.tb-bilan { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-bottom: 20px;
  border-bottom: 1px solid var(--telios-trait); }
.tb-bilan-case { min-width: 0; }
.tb-bilan-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .9375rem; font-weight: 700; }
.tb-bilan-titre .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); }
.tb-bilan address { font-style: normal; line-height: 1.55; }
.tb-bilan-dates { display: grid; gap: 6px; margin: 10px 0 0; }
.tb-bilan-dates > div { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.tb-bilan-dates dt { font-weight: 400; color: var(--telios-texte-attenue); }
.tb-bilan-dates dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.tb-bilan-paiement { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tb-bilan-total { font-size: 1.375rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-bilan-note { margin: 8px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.tb-detail-commande { padding-top: 16px; }
.tb-detail-commande tfoot td { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; color: var(--telios-texte-attenue); }
.tb-detail-ttc td { color: var(--telios-texte) !important; font-size: 1.0625rem; font-weight: 700; }
.tb-traces { display: grid; gap: 8px; margin: 0; }
.tb-traces > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.tb-traces dt { font-weight: 400; color: var(--telios-texte-attenue); }
.tb-traces dd { margin: 0; overflow-wrap: anywhere; }

/* Avertissement de fin de session : au-dessus de tout, en bas à droite. */
.tb-alerte-session { position: fixed; right: 20px; bottom: 20px; z-index: 2002; width: min(360px, calc(100vw - 40px));
  padding: 16px 18px; border-radius: var(--telios-rayon-grand); background: var(--telios-carte);
  border: 1px solid var(--telios-alerte); border-left-width: 4px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); }
.tb-alerte-session[hidden] { display: none; }
.tb-alerte-session-titre { margin: 0 0 4px; font-weight: 700; }

/* État compact : une ligne, à la largeur de son contenu, pas un bandeau. */
.tb-etat-compact { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px;
  border-radius: 999px; background: var(--telios-carte); border: 1px solid var(--telios-ok); font-size: .9375rem; }
.tb-etat-compact-attente { border-color: var(--telios-alerte); border-radius: var(--telios-rayon-grand); }
/* Libellé de champ précédé de son icône. */
.tb-libelle-icone { display: flex; align-items: center; gap: 8px; }
.tb-libelle-icone .telios-icone { width: 16px; height: 16px; color: var(--telios-accent); flex: none; }

/* Titres de carte, indicateurs et états vides : chacun porte son icône. */
.tb-titre-icone { display: inline-flex; align-items: center; gap: 10px; }
.tb-titre-icone .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); flex: none; }
.tb-indicateur-tete { display: flex; align-items: center; gap: 10px; }
.tb-pastille-indicateur { width: 32px; height: 32px; }
.tb-pastille-indicateur .telios-icone { width: 17px; height: 17px; }
.tb-principal .tb-pastille-indicateur { width: 36px; height: 36px; }
.tb-pastille-ok { background: rgba(var(--tblr-success-rgb), .12); color: var(--telios-ok); }
.tb-etat-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 260px; padding: 24px; text-align: center; }
.tb-etat-vide .fiche-pastille { margin-bottom: 8px; }
.tb-vide-ligne { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--telios-texte-attenue); }
.tb-vide-ligne .telios-icone { width: 18px; height: 18px; flex: none; }
.tb-resume-case { display: flex; align-items: center; gap: 12px; }
.tb-activite-icone { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--telios-bg-alt); color: var(--telios-accent); }
.tb-activite-icone .telios-icone { width: 14px; height: 14px; }

/* ── Centre de sécurité (comptes/securite.html) ──────────────────────────
   L'anneau se remplit, le nombre défile (telios.js, data-compter), les
   contrôles et les cartes montent en vague. Toutes ces animations ont pour
   état de repos l'état final : prefers-reduced-motion les coupe sans rien
   cacher. La couleur suit le niveau, jamais l'inverse : le texte dit
   toujours le niveau en toutes lettres. */
.sec-hero { --sec-teinte: var(--telios-accent); --sec-teinte-rgb: var(--tblr-primary-rgb);
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; margin-bottom: 18px;
  padding: 28px 32px; border-radius: 12px; overflow: hidden; background: var(--telios-carte);
  border: 1px solid var(--telios-trait); }
.sec-excellent { --sec-teinte: var(--telios-ok); --sec-teinte-rgb: var(--tblr-success-rgb); }
.sec-faible { --sec-teinte: var(--telios-alerte); --sec-teinte-rgb: var(--tblr-warning-rgb); }
/* Un halo de la couleur du niveau, derrière l'anneau. */
.sec-hero::before { content: ""; position: absolute; left: -80px; top: -80px; width: 340px; height: 340px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(var(--sec-teinte-rgb), .16), transparent); pointer-events: none; }
.sec-jauge { position: relative; flex: none; width: 148px; height: 148px; }
.sec-anneau { display: block; width: 100%; height: 100%; }
.sec-anneau-fond { fill: none; stroke: var(--telios-bg-alt); stroke-width: 10; }
.sec-anneau-valeur { fill: none; stroke: var(--sec-teinte); stroke-width: 10; stroke-linecap: round;
  animation: sec-remplit 1.2s cubic-bezier(.22, .8, .24, 1) .15s both; }
@keyframes sec-remplit { from { stroke-dasharray: 0 100; } }
.sec-jauge-centre { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center;
  padding-top: 52px; font-variant-numeric: tabular-nums; }
.sec-jauge-centre strong { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--telios-texte); }
.sec-jauge-centre span { margin-left: 2px; font-size: .875rem; color: var(--telios-texte-attenue); }
.sec-hero-corps { position: relative; flex: 1 1 320px; min-width: 0; }
.sec-surtitre { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--sec-teinte); }
.sec-surtitre .telios-icone { width: 15px; height: 15px; }
.sec-hero-titre { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; }
.sec-a-faire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sec-a-faire a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(var(--tblr-warning-rgb), .45); background: rgba(var(--tblr-warning-rgb), .1);
  color: var(--telios-texte); font-size: .8125rem; font-weight: 500; }
.sec-a-faire a:hover { text-decoration: none; border-color: var(--telios-alerte); }
.sec-a-faire .telios-icone { width: 14px; height: 14px; color: var(--telios-alerte); }

.sec-controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 18px;
  padding: 0; list-style: none; }
.sec-controle { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--telios-carte);
  border: 1px solid var(--telios-trait); }
.sec-controle-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.sec-controle-icone .telios-icone { width: 17px; height: 17px; }
.sec-attention .sec-controle-icone { background: rgba(var(--tblr-warning-rgb), .14); color: var(--telios-alerte); }
.sec-ok .sec-controle-icone { background: rgba(var(--tblr-success-rgb), .14); color: var(--telios-ok); }
.sec-controle-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sec-controle-titre { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.sec-controle-texte { font-size: .8125rem; color: var(--telios-texte-attenue); }
.sec-etat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; font-size: .75rem;
  font-weight: 800; }
.sec-ok .sec-etat { background: var(--telios-ok); color: var(--telios-carte); }
.sec-attention .sec-etat { background: var(--telios-alerte); color: var(--telios-carte); }
.sec-etat .telios-icone { width: 12px; height: 12px; stroke-width: 3; }

.sec-grille { display: grid; gap: 18px; }
@media (min-width: 1100px) { .sec-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.sec-colonne { display: grid; gap: 18px; min-width: 0; }
.sec-carte .card-header { display: flex; align-items: center; gap: 10px; }
.sec-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; }
.sec-badge-ok { background: rgba(var(--tblr-success-rgb), .14); color: var(--telios-ok); }
.sec-badge-attention { background: rgba(var(--tblr-warning-rgb), .16); color: var(--telios-alerte); }

/* La vague d'apparition : contrôles d'abord, cartes ensuite. */
@keyframes sec-monte { from { opacity: 0; transform: translateY(10px); } }
.sec-anime { animation: sec-monte .5s cubic-bezier(.22, .8, .24, 1) both; }
.sec-controle:nth-child(2) { animation-delay: 60ms; }  .sec-controle:nth-child(3) { animation-delay: 120ms; }
.sec-controle:nth-child(4) { animation-delay: 180ms; } .sec-controle:nth-child(5) { animation-delay: 240ms; }
.sec-carte { animation-delay: 280ms; }
.sec-colonne + .sec-colonne .sec-carte { animation-delay: 360ms; }

/* Robustesse du mot de passe : quatre barres, le niveau en mots. */
.sec-force { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.sec-force[hidden] { display: none; }
.sec-force-barres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 160px; }
.sec-force-barres i { height: 5px; border-radius: 999px; background: var(--telios-bg-alt); transition: background-color .2s ease-out; }
.sec-force-libelle { font-size: .8125rem; font-weight: 600; color: var(--telios-texte-attenue); }
.sec-force[data-niveau="1"] i:nth-child(-n+1) { background: var(--telios-danger); }
.sec-force[data-niveau="2"] i:nth-child(-n+2) { background: var(--telios-alerte); }
.sec-force[data-niveau="3"] i:nth-child(-n+3) { background: var(--telios-accent); }
.sec-force[data-niveau="4"] i { background: var(--telios-ok); }

/* Double authentification : étapes numérotées, saisie du code. */
.sec-etapes { display: grid; gap: 14px; margin: 0 0 8px; padding: 0; list-style: none; }
.sec-etapes > li { display: flex; gap: 12px; }
.sec-etape-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--telios-accent); color: var(--telios-encre-sur-accent); font-size: .8125rem; font-weight: 700; }
.sec-code-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sec-code { width: 9.5rem; font-size: 1.1rem; font-weight: 600; letter-spacing: .25em; text-align: center;
  font-variant-numeric: tabular-nums; }
.sec-code-ligne .btn .telios-icone, .sec-carte form > .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.sec-cle-manuelle { margin-top: 6px; font-size: .875rem; }
.sec-cle-manuelle > summary { margin-bottom: 6px; }

/* Sessions et journal. */
.sec-session { display: flex; align-items: center; gap: 12px; }
.sec-session-icone, .sec-evenement-icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; background: var(--telios-bg-alt); color: var(--telios-texte-attenue); }
.sec-session-icone .telios-icone, .sec-evenement-icone .telios-icone { width: 16px; height: 16px; }
.sec-courante { background: rgba(var(--tblr-success-rgb), .14); color: var(--telios-ok); }
.sec-session-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.sec-session-corps .telios-aide { flex-basis: 100%; }
.sec-journal { position: relative; margin: 0; padding: 14px 18px; list-style: none; }
/* Le fil vertical qui relie les événements. */
.sec-journal::before { content: ""; position: absolute; left: 34px; top: 26px; bottom: 26px; width: 2px;
  background: var(--telios-trait); }
.sec-evenement { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.sec-evenement-icone { position: relative; border: 2px solid var(--telios-carte); }
.sec-surveiller .sec-evenement-icone { background: rgba(var(--tblr-warning-rgb), .16); color: var(--telios-alerte); }
.sec-evenement-corps { display: flex; flex-direction: column; min-width: 0; font-size: .875rem; }

/* Codes de secours : en évidence, à noter tout de suite. */
.sec-codes { border-color: var(--telios-accent); box-shadow: inset 0 0 0 1px var(--telios-accent); }
.sec-codes-tete { display: flex; gap: 14px; margin-bottom: 14px; }
.sec-codes-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 0 0 14px;
  padding: 0; list-style: none; }
.sec-codes-liste li { padding: 8px 10px; border-radius: 6px; background: var(--telios-bg-alt); text-align: center; }
.sec-codes .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
@media (max-width: 575.98px) {
  .sec-hero { padding: 22px 18px; justify-content: center; text-align: center; }
  .sec-a-faire { justify-content: center; }
}
.sec-carte .telios-aide > .telios-icone { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
/* À droite de l'indice : qui est connecté, et sa dernière connexion. */
.sec-hero-infos { position: relative; display: grid; gap: 10px; flex: 0 1 300px; margin: 0; padding: 0 0 0 28px;
  border-left: 1px solid var(--telios-trait); }
.sec-hero-infos div { display: flex; flex-direction: column; min-width: 0; }
.sec-hero-infos dt { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.sec-hero-infos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .sec-hero-infos { flex-basis: 100%; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--telios-trait); } }

/* ── Journal d'audit (administration/audit*.html) ────────────────────────
   Un fil par jour, une ligne par geste, dite en mots ; le détail (avant /
   après, données brutes, empreinte) s'ouvre sous la ligne. Chaque famille
   d'actions a sa teinte, prise aux jetons du thème. */
.au-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.au-actions .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.au-pastille { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px;
  border-radius: 999px; background: var(--telios-accent); color: var(--telios-encre-sur-accent); font-size: .75rem;
  font-weight: 700; }

/* Des blocs à la mesure de leur contenu : ils ne s'étirent pas sur toute la largeur. */
.au-bandeau { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.au-bandeau .au-chiffre { flex: 0 1 300px; min-width: 240px; }
.au-chiffre { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); animation: sec-monte .45s ease-out both; }
.au-chiffre:nth-child(2) { animation-delay: 60ms; } .au-chiffre:nth-child(3) { animation-delay: 120ms; }
.au-anneau-cadre { position: relative; flex: none; width: 64px; height: 64px; }
.au-anneau { display: block; width: 100%; height: 100%; }
.au-anneau-fond { fill: none; stroke: var(--telios-bg-alt); stroke-width: 8; }
.au-chaine-jamais .au-anneau-fond { stroke-dasharray: 4 3; stroke: var(--telios-trait); }
.au-segment { fill: none; stroke-width: 8; animation: sec-remplit 1.1s cubic-bezier(.22, .8, .24, 1) .15s both; }
.au-segment:nth-of-type(3) { animation-delay: .25s; } .au-segment:nth-of-type(4) { animation-delay: .35s; }
.au-segment:nth-of-type(5) { animation-delay: .45s; } .au-segment:nth-of-type(6) { animation-delay: .55s; }
.au-segment:nth-of-type(7) { animation-delay: .65s; }
.au-teinte-comptes { stroke: var(--telios-accent); }      .au-teinte-ventes { stroke: var(--telios-ok); }
.au-teinte-licences { stroke: var(--telios-accent2); }    .au-teinte-devis { stroke: var(--telios-marque); }
.au-teinte-entreprises { stroke: var(--telios-texte-attenue); } .au-teinte-configuration { stroke: var(--telios-alerte); }
.au-teinte-archive { stroke: var(--telios-accent); stroke-linecap: round; }
.au-chaine-intacte .au-teinte-chaine { stroke: var(--telios-ok); }
.au-chaine-rompue .au-teinte-chaine { stroke: var(--telios-danger); }
.au-anneau-centre { position: absolute; inset: 0; display: grid; place-items: center; color: var(--telios-accent);
  font-weight: 700; font-variant-numeric: tabular-nums; }
.au-anneau-centre .telios-icone { width: 20px; height: 20px; }
.au-chaine-intacte .au-anneau-centre { color: var(--telios-ok); }
.au-chaine-rompue .au-anneau-centre { color: var(--telios-danger); }
.au-chaine-jamais .au-anneau-centre { color: var(--telios-texte-attenue); }
.au-anneau-texte { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: .9rem;
  color: var(--telios-texte); }
.au-anneau-texte small { font-size: .65rem; color: var(--telios-texte-attenue); }
.au-chiffre > div { display: flex; flex-direction: column; min-width: 0; }
.au-chiffre-valeur { font-size: 1.4rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.au-chiffre-texte { font-size: 1.1rem; }
.au-chiffre-libelle { font-size: .8125rem; color: var(--telios-texte-attenue); }

.au-verdict { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid; animation: sec-monte .4s ease-out both; }
.au-verdict-ok { border-color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .08); }
.au-verdict-ko { border-color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .08); }
.au-verdict-sceau { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: var(--telios-carte); animation: au-sceau .5s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
.au-verdict-ok .au-verdict-sceau { background: var(--telios-ok); }
.au-verdict-ko .au-verdict-sceau { background: var(--telios-danger); }
.au-verdict-sceau .telios-icone { width: 22px; height: 22px; stroke-width: 3; }
@keyframes au-sceau { from { transform: scale(.4); opacity: 0; } }
.au-verdict-titre { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.au-tete { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: var(--telios-bg-alt); overflow-wrap: anywhere;
  font-size: .8rem; }

.au-carte { overflow: hidden; }
.au-recherche { position: relative; padding: 16px 18px 12px; border-bottom: 1px solid var(--telios-trait); }
.au-recherche .telios-icone { position: absolute; left: 32px; top: 50%; width: 17px; height: 17px; transform: translateY(-40%);
  color: var(--telios-texte-attenue); pointer-events: none; }
.au-recherche .form-control { min-height: 44px; padding-left: 42px; font-size: .95rem; }
.au-resultats { transition: opacity .15s ease-out; }
.dv-recherche-en-cours + .au-resultats { opacity: .55; }
.au-familles { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--telios-trait); }
.au-famille { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--telios-trait); color: var(--telios-texte); font-size: .8125rem; font-weight: 500; }
.au-famille:hover { text-decoration: none; border-color: var(--telios-accent); }
.au-famille .telios-icone { width: 14px; height: 14px; color: var(--telios-texte-attenue); }
.au-famille span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--telios-bg-alt); font-size: .72rem;
  font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.au-famille.actif { border-color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent);
  font-weight: 600; }
.au-famille.actif .telios-icone { color: var(--telios-accent); }
.au-famille.vide { opacity: .55; }
.au-compte { margin: 0; padding: 10px 18px 0; font-size: .8125rem; color: var(--telios-texte-attenue); }

.au-fil { margin: 0; padding: 6px 0 10px; list-style: none; }
.au-jour { position: sticky; top: 0; z-index: 1; padding: 14px 18px 6px; background: var(--telios-carte); }
.au-jour span { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.au-entree { --au-teinte: var(--telios-accent); border-top: 1px solid var(--telios-trait); }
.au-jour + .au-entree { border-top: 0; }
.au-ventes { --au-teinte: var(--telios-ok); }
.au-licences { --au-teinte: var(--telios-accent2); }
.au-devis { --au-teinte: var(--telios-marque); }
.au-entreprises { --au-teinte: var(--telios-texte-attenue); }
.au-configuration { --au-teinte: var(--telios-alerte); }
.au-entree > details > summary { display: flex; align-items: center; gap: 14px; padding: 12px 18px; list-style: none;
  cursor: pointer; color: var(--telios-texte); font-weight: 400; transition: background-color .12s ease-out; }
.au-entree > details > summary::-webkit-details-marker { display: none; }
.au-entree > details > summary:hover { background: var(--telios-bg-alt); }
.au-entree > details[open] > summary { background: var(--telios-bg-alt); }
.au-icone { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  color: var(--au-teinte); background: color-mix(in srgb, var(--au-teinte) 14%, transparent); }
.au-icone .telios-icone { width: 18px; height: 18px; }
.au-alerte .au-icone { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .14);
  box-shadow: 0 0 0 3px rgba(var(--tblr-danger-rgb), .15); }
.au-corps { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.au-ligne1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.au-libelle { font-weight: 600; }
.au-badge-alerte { padding: 1px 8px; border-radius: 999px; background: var(--telios-danger); color: var(--telios-carte);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.au-entreprise { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--telios-accent); }
.au-entreprise .telios-icone { width: 13px; height: 13px; }
.au-ligne2 { display: flex; flex-wrap: wrap; align-items: center; font-size: .8125rem; color: var(--telios-texte-attenue); }
/* L'heure ouvre la ligne, à gauche ; l'auteur et le numéro suivent le
   résumé : plus de grand vide entre le texte et le bord droit. */
.au-heure { flex: none; width: 58px; font-size: .9rem; font-weight: 600; color: var(--telios-texte);
  font-variant-numeric: tabular-nums; }
.au-heure small { font-size: .72rem; font-weight: 400; color: var(--telios-texte-attenue); }
.au-ligne2 > span + span::before { content: "·"; margin: 0 7px; color: var(--telios-texte-attenue); }
.au-acteur { display: inline-flex; align-items: center; gap: 4px; }
.au-acteur .telios-icone { flex: none; width: 12px; height: 12px; }
.au-numero { font-variant-numeric: tabular-nums; }
.au-chevron { flex: none; color: var(--telios-texte-attenue); transition: transform .15s ease-out; }
.au-chevron .telios-icone { width: 16px; height: 16px; }
.au-entree > details[open] .au-chevron { transform: rotate(90deg); }
.au-detail { display: grid; gap: 14px; padding: 4px 18px 18px 142px; background: var(--telios-bg-alt);
  animation: sec-monte .25s ease-out both; }
.au-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; margin: 0; }
.au-details div { min-width: 0; }
.au-details dt { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.au-details dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.au-technique { padding-top: 12px; border-top: 1px dashed var(--telios-trait); }
.au-empreinte { font-size: .75rem; }
.au-changements { width: 100%; border-collapse: collapse; font-size: .875rem; }
.au-changements th, .au-changements td { padding: 7px 10px; border-bottom: 1px solid var(--telios-trait); text-align: left;
  vertical-align: top; overflow-wrap: anywhere; }
.au-changements thead th { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.au-avant { color: var(--telios-danger); text-decoration: line-through; text-decoration-thickness: 1px; }
.au-apres { color: var(--telios-ok); font-weight: 600; }
.au-brut > summary { font-size: .8125rem; }
.au-brut pre { max-height: 260px; margin: 8px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--telios-carte);
  font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.au-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 18px; text-align: center;
  color: var(--telios-texte-attenue); }
.au-vide .telios-icone { width: 32px; height: 32px; }

.au-portees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; border: 0; padding: 0; }
.au-portees legend { grid-column: 1 / -1; }
.au-portee { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--telios-trait); cursor: pointer; font-weight: 500; }
.au-portee:has(input:checked) { border-color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1);
  box-shadow: inset 0 0 0 1px var(--telios-accent); }
.au-garanties { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .875rem; }
.au-garanties li { display: flex; gap: 8px; }
.au-garanties .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-ok); }

.au-archives { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.au-archive { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); animation: sec-monte .4s ease-out both; }
.au-archive-icone { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.au-archive-icone .telios-icone { width: 22px; height: 22px; }
.au-archive-corps { flex: 1 1 320px; min-width: 0; }
.au-archive-titre { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; }
.au-archive-actions { display: flex; gap: 8px; }
.au-archive-actions .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }

@media (max-width: 767.98px) {
  .au-entree > details > summary { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .au-heure { width: 100%; }
  .au-chevron { display: none; }
  .au-ligne2 { white-space: normal; }
  .au-detail { padding: 4px 14px 16px; }
  .au-portees { grid-template-columns: 1fr; }
}
@media print {
  .au-actions, .au-recherche, .au-familles { display: none !important; }
}

/* ── Vitrine (noyau/accueil.html) ─────────────────────────────────────────
   Le hero porte une vidéo de fond quand elle est livrée ; sinon trois
   aurores floues dérivent lentement sur une grille fine. Tout est en jetons
   du thème : la vitrine passe du sombre au clair comme le reste. L'état de
   repos de chaque animation est l'état final (prefers-reduced-motion). */
.vi-page .page-body { margin: 0; padding: 0; }
.vi-page .footer { margin-top: 0; }
.vi-hero { position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 88px;
  border-bottom: 1px solid var(--telios-trait); }
.vi-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--telios-bg-alt); }
.vi-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vi-aurore { position: absolute; width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; border-radius: 999px;
  filter: blur(70px); opacity: .5; animation: vi-derive 22s ease-in-out infinite alternate; }
.vi-aurore-1 { left: -10vw; top: -18vw; background: var(--telios-accent); }
.vi-aurore-2 { right: -12vw; top: 0; background: var(--telios-accent2); animation-duration: 28s; animation-delay: -6s; opacity: .35; }
.vi-aurore-3 { left: 30vw; bottom: -30vw; background: var(--telios-marque); animation-duration: 34s; animation-delay: -12s; opacity: .18; }
@keyframes vi-derive { to { transform: translate(6vw, 4vw) scale(1.12); } }
.vi-grille { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--telios-trait) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--telios-trait) 70%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%); }
/* Un voile sous le texte : lisible quelle que soit la vidéo. */
.vi-fond::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--telios-bg-alt) 88%, transparent) 30%, transparent 85%); }

.vi-hero-cadre { display: grid; gap: 48px; align-items: center; }
@media (min-width: 992px) { .vi-hero-cadre { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
@keyframes vi-entre { from { opacity: 0; transform: translateY(18px); } }
.vi-hero-texte > * { animation: vi-entre .7s cubic-bezier(.22, .8, .24, 1) both; }
.vi-hero-texte > :nth-child(2) { animation-delay: .05s; } .vi-hero-texte > :nth-child(3) { animation-delay: .15s; }
.vi-hero-texte > :nth-child(4) { animation-delay: .25s; } .vi-hero-texte > :nth-child(5) { animation-delay: .35s; }
.vi-hero-texte > :nth-child(6) { animation-delay: .45s; }
.vi-devise { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--telios-marque); }
.vi-barrette { display: inline-block; width: 34px; height: 4px; border-radius: 999px; background: var(--telios-marque); }
.vi-titre { margin: 0 0 20px; font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.vi-titre-accent { display: block; color: var(--telios-accent); }
.vi-chapeau { max-width: 620px; margin: 0 0 28px; }
/* Une seule voix pour les textes courants de la vitrine : celle du chapeau. */
.vi-chapeau, .vi-principe p, .vi-etapes p { font-size: 1.12rem; line-height: 1.6; color: var(--telios-texte-attenue); }
.vi-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.vi-actions.vi-centre { justify-content: center; }
.vi-bouton { min-height: 52px; padding: 0 26px; font-weight: 600; }
.vi-bouton .telios-icone { width: 18px; height: 18px; margin-left: 8px; transition: transform .2s ease-out; }
.vi-bouton:hover .telios-icone { transform: translateX(3px); }
.vi-bouton-second { background: color-mix(in srgb, var(--telios-carte) 70%, transparent); backdrop-filter: blur(6px); }
.vi-offre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; color: var(--telios-texte-attenue); }
.vi-offre .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-ok); }

/* La scène : un téléphone dessiné, qui se contrôle sous nos yeux, et
   l'attestation qui en sort. Remplacée par hero-telephone.webp si livrée. */
.vi-scene { position: relative; display: grid; place-items: center; min-height: 460px;
  animation: vi-entre .9s cubic-bezier(.22, .8, .24, 1) .2s both; }
.vi-scene-image { width: min(100%, 520px); height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .35)); }
.vi-telephone { position: relative; width: 250px; height: 500px; padding: 14px; border-radius: 44px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .35), inset 0 0 0 6px color-mix(in srgb, var(--telios-bg-alt) 80%, transparent);
  animation: vi-flotte 7s ease-in-out infinite; }
@keyframes vi-flotte { 50% { transform: translateY(-12px) rotate(-1deg); } }
.vi-ecran { position: relative; height: 100%; overflow: hidden; padding: 26px 16px; border-radius: 32px;
  background: var(--telios-bg-alt); }
.vi-ecran-titre { display: flex; flex-direction: column; margin: 0 0 22px; font-weight: 800; letter-spacing: .08em; }
.vi-ecran-titre span { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--telios-texte-attenue); }
.vi-controles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vi-controles li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
  background: var(--telios-carte); font-size: .8rem; font-weight: 600; animation: vi-entre .5s ease-out both; }
.vi-controles li:nth-child(1) { animation-delay: .9s; }  .vi-controles li:nth-child(2) { animation-delay: 1.5s; }
.vi-controles li:nth-child(3) { animation-delay: 2.1s; } .vi-controles li:nth-child(4) { animation-delay: 2.7s; }
.vi-puce { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--telios-ok); color: var(--telios-carte); }
.vi-puce .telios-icone { width: 13px; height: 13px; stroke-width: 3; }
/* Le balayage : une lame de lumière qui relit l'écran, en boucle. */
.vi-balayage { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--telios-accent2) 28%, transparent), transparent);
  animation: vi-balaye 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes vi-balaye { from { transform: translateY(-100px); } to { transform: translateY(520px); } }
.vi-attestation { position: absolute; right: max(0px, calc(50% - 250px)); bottom: 38px; display: flex; align-items: center;
  gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .3); animation: vi-surgit .7s cubic-bezier(.3, 1.4, .5, 1) 3.3s both,
    vi-flotte 8s ease-in-out 4s infinite; }
@keyframes vi-surgit { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.vi-qr { display: grid; grid-template-columns: repeat(3, 10px); gap: 3px; padding: 6px; border-radius: 6px; background: var(--telios-texte); }
.vi-qr i { width: 10px; height: 10px; border-radius: 2px; background: var(--telios-carte); }
.vi-qr i:nth-child(2n) { background: transparent; }
.vi-attestation-titre { margin: 0; font-weight: 700; }
.vi-attestation-num { margin: 0; font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--telios-texte-attenue); }
.vi-sceau { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--telios-ok);
  color: var(--telios-carte); animation: au-sceau .5s cubic-bezier(.3, 1.6, .5, 1) 3.8s both; }
.vi-sceau .telios-icone { width: 20px; height: 20px; }

/* Les sections. */
.vi-principe { padding: 34px 0; border-bottom: 1px solid var(--telios-trait); background: var(--telios-carte); }
.vi-principe-cadre { display: flex; gap: 22px; align-items: center; max-width: 900px; }
.vi-principe-icone { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.vi-principe-icone .telios-icone { width: 28px; height: 28px; }
.vi-section { padding: 88px 0; }
.vi-section-alt { background: var(--telios-carte); border-top: 1px solid var(--telios-trait); border-bottom: 1px solid var(--telios-trait); }
.vi-surtitre { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; color: var(--telios-accent); }
.vi-surtitre.vi-gauche { text-align: left; }
.vi-h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.vi-centre { text-align: center; }
h2.vi-centre { max-width: 760px; margin: 0 auto 44px; }
.vi-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; }
.vi-h3 .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
.vi-intro { max-width: 640px; margin: -28px auto 36px; text-align: center; color: var(--telios-texte-attenue); }

.vi-usages { display: grid; gap: 20px; }
@media (min-width: 992px) { .vi-usages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vi-usage { padding: 26px; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out; }
.vi-usage:hover { transform: translateY(-4px); border-color: var(--telios-accent); box-shadow: 0 20px 40px rgba(0, 0, 0, .18); }
.vi-usage p { margin: 0; color: var(--telios-texte-attenue); }
.vi-usage-visuel { display: grid; place-items: center; height: 170px; margin: -6px -6px 20px; overflow: hidden; border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, rgba(var(--tblr-primary-rgb), .22), transparent 60%), var(--telios-bg-alt); }
.vi-usage-visuel img { width: 100%; height: 100%; object-fit: cover; }
.vi-usage-icone { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 999px; color: var(--telios-accent);
  background: var(--telios-carte); box-shadow: 0 0 0 10px rgba(var(--tblr-primary-rgb), .1), 0 0 0 22px rgba(var(--tblr-primary-rgb), .05);
  animation: vi-pulse 3.2s ease-in-out infinite; }
.vi-usage-icone .telios-icone { width: 34px; height: 34px; }
@keyframes vi-pulse { 50% { box-shadow: 0 0 0 14px rgba(var(--tblr-primary-rgb), .14), 0 0 0 30px rgba(var(--tblr-primary-rgb), .04); } }

.vi-etapes { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) {
  .vi-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Le fil qui relie les quatre étapes. */
  .vi-etapes::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 2px;
    background: linear-gradient(90deg, var(--telios-accent), var(--telios-accent2)); opacity: .5; }
}
.vi-etapes li { position: relative; padding: 0 8px; text-align: center; }
.vi-etapes p { margin: 0; color: var(--telios-texte-attenue); }
.vi-etape-icone { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px;
  border-radius: 999px; background: var(--telios-bg-alt); border: 2px solid var(--telios-accent); color: var(--telios-accent); }
.vi-etape-icone .telios-icone { width: 28px; height: 28px; }
.vi-etape-num { position: absolute; top: -6px; left: calc(50% + 18px); z-index: 1; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px; background: var(--telios-accent); color: var(--telios-encre-sur-accent);
  font-size: .8rem; font-weight: 800; }
.vi-etapes .vi-h3 { justify-content: center; }

.vi-preuve { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .vi-preuve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vi-garanties { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.vi-garanties li { display: flex; align-items: center; gap: 14px; font-size: 1.02rem; }
.vi-garanties .telios-icone { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 999px;
  background: rgba(var(--tblr-success-rgb), .14); color: var(--telios-ok); }
.vi-verifier { padding: 30px; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .16); }
.vi-verifier-image { display: block; width: 100%; height: 180px; margin-bottom: 20px; border-radius: 12px; object-fit: cover; }

.vi-forfaits { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.vi-forfait { padding: 24px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait);
  text-align: center; transition: transform .25s ease-out, border-color .25s ease-out; }
.vi-forfait:hover { transform: translateY(-4px); border-color: var(--telios-accent); }
.vi-forfait .vi-h3 { justify-content: center; }
.vi-forfait-quantite { margin: 0 0 10px; color: var(--telios-texte-attenue); }
.vi-forfait .vi-h3 { margin-bottom: 14px; }
.vi-forfait-prix { margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vi-forfait-prix small { margin-left: 4px; font-size: .8rem; font-weight: 600; color: var(--telios-texte-attenue); }

.vi-final { position: relative; overflow: hidden; padding: 90px 0; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tblr-primary-rgb), .22), transparent 65%), var(--telios-bg-alt); }
.vi-final-cadre p { max-width: 560px; margin: 0 auto 28px; color: var(--telios-texte-attenue); }

/* L'apparition au défilement (telios.js ajoute vi-anime puis vi-vu) : sans
   script, rien n'est caché. */
.vi-anime [data-apparition]:not(.vi-vu) { opacity: 0; transform: translateY(24px); }
.vi-anime [data-apparition] { transition: opacity .7s cubic-bezier(.22, .8, .24, 1), transform .7s cubic-bezier(.22, .8, .24, 1); }

@media (max-width: 575.98px) {
  .vi-hero { padding: 40px 0 56px; }
  .vi-scene { min-height: 420px; }
  .vi-telephone { width: 220px; height: 440px; }
  .vi-attestation { right: 0; bottom: 10px; }
  .vi-section { padding: 60px 0; }
  .vi-principe-cadre { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vi-anime [data-apparition]:not(.vi-vu) { opacity: 1; transform: none; }
  .vi-video { display: none; }
}

/* ── Connexion en deux temps (comptes/connexion.html) ────────────────────
   Le second temps prend la place du premier dans la même carte : le compte
   en rappel, puis le code, saisi comme sur la page Sécurité. */
.cx-code { animation: sec-monte .45s cubic-bezier(.22, .8, .24, 1) both; }
.cx-compte { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 12px; border-radius: 999px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.cx-compte-icone, .cx-compte-ok { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; }
.cx-compte-icone { background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent); }
.cx-compte-ok { background: var(--telios-ok); color: var(--telios-carte); }
.cx-compte .telios-icone { width: 15px; height: 15px; }
.cx-compte-ok .telios-icone { stroke-width: 3; }
.cx-compte-email { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cx-code-tete { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; text-align: center; }
.cx-titre { margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; }
.sec-code.cx-champ-code { width: 100%; max-width: 15rem; min-height: 56px; margin: 0 auto; font-size: 1.6rem; letter-spacing: .35em; }
.cx-champ-code.cx-mode-secours { font-size: 1.15rem; letter-spacing: .12em; }
.cx-secours { margin: 12px 0 0; text-align: center; }
.cx-code .card-footer .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }

/* Pied de page : liens à gauche, copyright tout à droite, sur la même ligne ;
   sur un écran étroit, le copyright passe dessous. */
.telios-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.telios-copyright { margin-left: auto; font-size: .8rem; color: var(--telios-texte-attenue); }
/* « Vérifier une attestation » du pied de page : la page remonte en douceur
   jusqu'au bloc, qui s'éclaire un instant pour qu'on le trouve. */
#verifier { scroll-margin-top: 24px; }
.vi-eclaire .vi-verifier { animation: vi-eclat 1.6s ease-out; }
@keyframes vi-eclat { 30% { box-shadow: 0 0 0 4px var(--telios-accent), 0 30px 60px rgba(0, 0, 0, .16); } }

/* ── Vitrine : fenêtres d'inscription et de confirmation ─────────────── */
.vi-dialogue { width: min(820px, calc(100vw - 24px)); border-radius: 12px; }
.vi-dialogue[open] { animation: vi-fenetre .4s cubic-bezier(.22, .8, .24, 1); }
@keyframes vi-fenetre { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.vi-dialogue::backdrop { background: color-mix(in srgb, var(--telios-bg-alt) 55%, rgba(0, 0, 0, .55)); backdrop-filter: blur(8px); }
.vi-dialogue-tete { background: radial-gradient(ellipse at 0% 0%, rgba(var(--tblr-primary-rgb), .16), transparent 60%), var(--telios-carte); }
.vi-dialogue .tb-dialogue-pied .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.vi-confirmation { width: min(560px, calc(100vw - 24px)); }
.vi-confirmation-corps { display: flex; flex-direction: column; align-items: center; padding: 38px 32px 10px; text-align: center; }
.vi-confirmation-icone { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 22px;
  border-radius: 999px; background: rgba(var(--tblr-primary-rgb), .12); color: var(--telios-accent);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .15s both, vi-pulse 3.2s ease-in-out 1s infinite; }
.vi-confirmation-icone > .telios-icone { width: 42px; height: 42px; }
.vi-confirmation-coche { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 3px solid var(--telios-carte); border-radius: 999px; background: var(--telios-ok); color: var(--telios-carte);
  font-weight: 800; animation: au-sceau .5s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
.vi-confirmation-coche .telios-icone { width: 17px; height: 17px; stroke-width: 3; }
.vi-confirmation-attention .vi-confirmation-coche { background: var(--telios-alerte); }
.vi-confirmation-titre { margin: 0 0 10px; font-size: 1.45rem; font-weight: 800; }
.vi-confirmation-texte { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.6; }
.vi-confirmation-etapes { display: grid; gap: 10px; width: 100%; margin: 18px 0 0; padding: 18px; border-radius: 12px; list-style: none;
  background: var(--telios-bg-alt); text-align: left; }
.vi-confirmation-etapes li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem;
  animation: vi-entre .5s ease-out both; }
.vi-confirmation-etapes li:nth-child(1) { animation-delay: .5s; } .vi-confirmation-etapes li:nth-child(2) { animation-delay: .65s; }
.vi-confirmation-etapes li:nth-child(3) { animation-delay: .8s; }
.vi-confirmation-etapes span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--telios-accent); color: var(--telios-encre-sur-accent); font-size: .78rem; font-weight: 800; }
.vi-confirmation-pied { justify-content: space-between; }
.vi-confirmation-pied .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
@media (max-width: 575.98px) { .vi-dialogue .tb-dialogue-grille { grid-template-columns: 1fr; } }

/* ── Scanner de QR code (_scanner_qr.html) ───────────────────────────── */
.sc-saisie { display: flex; gap: 8px; }
.sc-saisie .form-control { flex: 1; min-width: 0; }
.sc-bouton { flex: none; gap: 6px; }
.sc-bouton .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
@media (max-width: 400px) { .sc-bouton span { display: none; } }
.sc-dialogue { width: min(560px, calc(100vw - 24px)); }
.sc-zone { position: relative; aspect-ratio: 4 / 3; margin: 18px 22px 0; overflow: hidden; border-radius: 12px;
  background: var(--telios-bg-alt); }
.sc-video { width: 100%; height: 100%; object-fit: cover; }
.sc-video.sc-miroir { transform: scaleX(-1); }
/* Le cadre de visée : quatre coins et une lame qui balaie. */
.sc-cadre { position: absolute; inset: 14%; pointer-events: none; }
.sc-cadre i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--telios-accent2); }
.sc-cadre i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.sc-cadre i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.sc-cadre i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.sc-cadre i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.sc-ligne { position: absolute; left: 6%; right: 6%; top: 0; height: 3px; border-radius: 999px;
  background: var(--telios-accent2); box-shadow: 0 0 14px var(--telios-accent2); animation: sc-balaye 2.4s ease-in-out infinite; }
@keyframes sc-balaye { 50% { top: calc(100% - 3px); } }
.sc-dialogue[data-etat="lu"] .sc-cadre i { border-color: var(--telios-ok); }
.sc-dialogue[data-etat="lu"] .sc-ligne { display: none; }
.sc-dialogue[data-etat="erreur"] .sc-cadre { display: none; }
.sc-statut { min-height: 3em; margin: 14px 22px 4px; text-align: center; font-weight: 500; }
.sc-dialogue[data-etat="autre"] .sc-statut { color: var(--telios-alerte); }
.sc-dialogue[data-etat="erreur"] .sc-statut { color: var(--telios-danger); }
.sc-dialogue[data-etat="lu"] .sc-statut { color: var(--telios-ok); }
@media (prefers-reduced-motion: reduce) { .sc-ligne { animation: none; top: 50%; } }

/* ── Clé de licence (administration/fiche.html) ──────────────────────── */
.fiche-cle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-cle-actions .btn .telios-icone, .fiche-abo-cle-corps > form .btn .telios-icone, .fiche-cle-texte .btn .telios-icone {
  width: 16px; height: 16px; margin-right: 6px; }
.fiche-cle-note { display: flex; gap: 8px; align-items: flex-start; }
.fiche-cle-note .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.fiche-cle-dialogue { width: min(720px, calc(100vw - 24px)); }
.fiche-cle-revelee { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
.fiche-cle-qr { margin: 0; padding: 10px; border-radius: 12px; background: var(--telios-carte); }
.fiche-cle-qr svg { display: block; width: 220px; height: 220px; }
.fiche-cle-valeur { margin: 0 0 12px; padding: 12px 14px; border-radius: 6px; background: var(--telios-bg-alt);
  font-size: 1.05rem; letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; }
.fiche-cle-consignes { margin: 14px 0 0; padding-left: 18px; }
@media (max-width: 575.98px) { .fiche-cle-revelee { grid-template-columns: 1fr; justify-items: center; } }

/* Clés de licence (administration). Les anneaux et les puces reprennent ceux
   du journal d'audit ; tout ce qui bouge a pour état de repos l'état final,
   et prefers-reduced-motion le coupe sans rien cacher. */
.cl-bandeau .au-chiffre { flex: 1 1 230px; }
.cl-bandeau .au-chiffre:nth-child(4) { animation-delay: 180ms; }
.cl-teinte-actives { stroke: var(--telios-ok); stroke-linecap: round; }
.cl-teinte-revoquees { stroke: var(--telios-danger); stroke-linecap: round; }
.cl-teinte-sans { stroke: var(--telios-alerte); stroke-linecap: round; }
.cl-teinte-postes { stroke: var(--telios-accent); stroke-linecap: round; }
.cl-chiffre-actives .au-anneau-centre { color: var(--telios-ok); }
.cl-chiffre-revoquees .au-anneau-centre { color: var(--telios-danger); }
.cl-chiffre-sans .au-anneau-centre { color: var(--telios-alerte); }
.cl-bandeau .au-chiffre { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cl-bandeau .au-chiffre:hover { transform: translateY(-2px); border-color: rgba(var(--tblr-primary-rgb), .35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }

.cl-recherche-carte { margin-bottom: 16px; }
.cl-recherche-carte .au-recherche { border-bottom: 0; padding-bottom: 16px; }
.cl-resultats { display: grid; gap: 16px; }
.cl-resultats .card { margin: 0; }
.cl-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 18px 0; padding: 10px 14px; border-radius: 6px;
  background: var(--telios-bg-alt); font-size: .875rem; }
.cl-note .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-texte-attenue); }
.cl-note-cle { background: rgba(var(--tblr-primary-rgb), .1); }
.cl-note-cle .telios-icone { color: var(--telios-accent); }

.cl-liste { margin: 0; padding: 0; list-style: none; }
.cl-ligne { display: grid; grid-template-columns: 44px minmax(180px, 1.3fr) minmax(250px, 1.4fr) 110px auto; gap: 18px;
  align-items: center; padding: 14px 18px; border-top: 1px solid var(--telios-trait);
  animation: sec-monte .35s ease-out both; transition: background-color .15s ease; }
.cl-ligne:nth-child(2) { animation-delay: 30ms; } .cl-ligne:nth-child(3) { animation-delay: 60ms; }
.cl-ligne:nth-child(4) { animation-delay: 90ms; } .cl-ligne:nth-child(n+5) { animation-delay: 120ms; }
.cl-ligne:hover { background: var(--telios-bg-alt); }
.cl-mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-weight: 700;
  font-size: .875rem; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12);
  border: 1px solid rgba(var(--tblr-primary-rgb), .25); }
.cl-ligne-sans .cl-mono { color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border-color: var(--telios-trait); }
.cl-ligne-suspendue .cl-mono { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1);
  border-color: rgba(var(--tblr-danger-rgb), .3); }
.cl-ident { display: flex; flex-direction: column; min-width: 0; }
.cl-nom { font-weight: 600; color: var(--telios-texte); overflow-wrap: anywhere; }
.cl-nom:hover { color: var(--telios-accent); }
.cl-cle { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-masque { display: inline-block; width: fit-content; max-width: 100%; padding: 4px 10px; border-radius: 6px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); font-size: .8125rem; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--telios-texte-attenue); }
.cl-masque mark { padding: 0 2px; border-radius: 3px; background: rgba(var(--tblr-primary-rgb), .16);
  color: var(--telios-texte); font-weight: 700; }
.cl-etat { font-size: .8125rem; }
.cl-postes { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.cl-postes-n { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-postes .telios-aide { font-size: .75rem; }
.cl-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cl-actions .btn { min-height: 40px; }
.cl-actions .btn .telios-icone, .cl-modifier .telios-icone, .cl-dialogue .tb-dialogue-pied .telios-icone {
  width: 16px; height: 16px; margin-right: 6px; }

.cl-dialogue { width: min(620px, calc(100vw - 24px)); }
.cl-pastille-danger { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .12); }
.cl-consequences { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.cl-consequences li { display: flex; gap: 10px; align-items: flex-start; }
.cl-consequences .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-texte-attenue); }
.cl-consequences li:first-child .telios-icone { color: var(--telios-danger); }
.cl-consequences li:nth-child(2) .telios-icone { color: var(--telios-ok); }

/* L'historique : un fil vertical, chaque révocation un jalon. */
.cl-fil { position: relative; margin: 0; padding: 8px 18px 8px 18px; list-style: none; }
.cl-fil::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 37px; width: 2px;
  background: var(--telios-trait); }
.cl-evenement { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px;
  align-items: start; padding: 14px 0; animation: sec-monte .35s ease-out both; }
.cl-evenement + .cl-evenement { border-top: 1px dashed var(--telios-trait); }
.cl-evenement-point { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; color: var(--telios-danger); background: var(--telios-carte);
  border: 2px solid rgba(var(--tblr-danger-rgb), .45); box-shadow: 0 0 0 4px var(--telios-carte); }
.cl-evenement-point .telios-icone { width: 17px; height: 17px; }
.cl-evenement-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; }
.cl-evenement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cl-evenement-meta .telios-icone, .cl-modifie .telios-icone { width: 14px; height: 14px; }
.cl-modifie { display: flex; align-items: center; gap: 6px; }
.cl-motif { margin: 6px 0; padding: 10px 14px; border-left: 3px solid var(--telios-danger); border-radius: 0 6px 6px 0;
  background: var(--telios-bg-alt); font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 1199.98px) {
  .cl-ligne { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cl-cle { grid-column: 2 / -1; }
  .cl-postes { grid-column: 2; }
  .cl-actions { grid-column: 3; grid-row: 1; }
}
@media (max-width: 575.98px) {
  .cl-ligne { grid-template-columns: 44px minmax(0, 1fr); }
  .cl-actions { grid-column: 1 / -1; grid-row: auto; justify-content: stretch; }
  .cl-actions form, .cl-actions .btn { flex: 1; } .cl-actions form .btn { width: 100%; }
  .cl-evenement { grid-template-columns: 40px minmax(0, 1fr); }
  .cl-modifier { grid-column: 2; justify-self: start; }
  .cl-masque { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-ligne, .cl-evenement { animation: none; }
  .cl-bandeau .au-chiffre { transition: none; }
  .cl-bandeau .au-chiffre:hover { transform: none; }
}

/* Fiche client, bloc « Abonnements » : trois tuiles (type, jetons, numéro de
   licence), puis la note de sécurité et l'historique repliable. */
.fiche-abo-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; }
.fiche-abo-tuile { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 16px 18px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); animation: sec-monte .4s ease-out both; }
.fiche-abo-tuile:nth-child(2) { animation-delay: 60ms; } .fiche-abo-tuile:nth-child(3) { animation-delay: 120ms; }
.fiche-abo-tuile > div { min-width: 0; }
.fiche-abo-tuile .tb-libelle { margin: 0 0 2px; }
.fiche-abo-valeur { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fiche-abo-note { margin: 4px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.fiche-abo-illimite { border-color: rgba(var(--tblr-primary-rgb), .4); background: rgba(var(--tblr-primary-rgb), .08); }
.fiche-abo-illimite .fiche-abo-valeur { color: var(--telios-accent); }
.fiche-abo-alerte { border-color: var(--telios-alerte); }
.fiche-abo-alerte .fiche-abo-valeur { color: var(--telios-alerte); }
.fiche-abo-cle-corps { display: grid; gap: 10px; flex: 1; }
.fiche-abo-numero { margin: 0; font-size: .9rem; }
.fiche-abo-cle .fiche-cle-actions .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.fiche-abo-pied { display: grid; gap: 10px; padding: 0 20px 18px; }
.fiche-abo-historique summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .875rem;
  font-weight: 600; min-height: 44px; }
.fiche-abo-historique summary .telios-icone { width: 15px; height: 15px; }
@media (max-width: 1199.98px) { .fiche-abo-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fiche-abo-cle { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .fiche-abo-corps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fiche-abo-tuile { animation: none; } }

/* Fiche client, « Vérification et compte » : une frise en quatre jalons
   (inscription, registre, compléments, validation), puis l'appel à valider. */
.fiche-verif-etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.fiche-verif-verifiee { color: var(--telios-ok); border-color: rgba(var(--tblr-success-rgb), .4);
  background: rgba(var(--tblr-success-rgb), .1); }
.fiche-verif-refusee { color: var(--telios-danger); border-color: rgba(var(--tblr-danger-rgb), .4);
  background: rgba(var(--tblr-danger-rgb), .08); }
.fiche-verif-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 28px; }
.fiche-verif-principal { display: grid; gap: 18px; min-width: 0; }
.fiche-verif-frise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0;
  list-style: none; counter-reset: jalon; }
.fiche-verif-frise li { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: 12px; border: 1px dashed var(--telios-trait); color: var(--telios-texte-attenue);
  animation: sec-monte .4s ease-out both; }
.fiche-verif-frise li:nth-child(2) { animation-delay: 60ms; } .fiche-verif-frise li:nth-child(3) { animation-delay: 120ms; }
.fiche-verif-frise li:nth-child(4) { animation-delay: 180ms; }
.fiche-verif-frise li > .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.fiche-verif-frise li div { display: flex; flex-direction: column; min-width: 0; }
.fiche-verif-frise li strong { color: var(--telios-texte); font-size: .875rem; }
.fiche-verif-frise li .telios-aide { font-size: .75rem; overflow-wrap: anywhere; }
.fiche-verif-frise li.fait { border-style: solid; background: var(--telios-bg-alt); }
.fiche-verif-frise li.fait > .telios-icone { color: var(--telios-accent); }
.fiche-verif-frise li.fiche-verif-fin { border-color: rgba(var(--tblr-success-rgb), .5); background: rgba(var(--tblr-success-rgb), .08); }
.fiche-verif-frise li.fiche-verif-fin > .telios-icone { color: var(--telios-ok); }
.fiche-verif-frise li.refus { border-style: solid; border-color: rgba(var(--tblr-danger-rgb), .5); }
.fiche-verif-frise li.refus > .telios-icone { color: var(--telios-danger); }
.fiche-verif-preuve { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; margin: 0; }
.fiche-verif-preuve dt { font-size: .75rem; font-weight: 600; color: var(--telios-texte-attenue); }
.fiche-verif-preuve dd { margin: 0; font-size: .875rem; overflow-wrap: anywhere; }
.fiche-verif-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 12px;
  background: rgba(var(--tblr-primary-rgb), .08); border: 1px solid rgba(var(--tblr-primary-rgb), .3); }
.fiche-verif-appel .btn .telios-icone { width: 18px; height: 18px; margin-right: 8px; }
.fiche-verif-demandes ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fiche-verif-demandes .cl-motif { border-left-color: var(--telios-marque); }
.fiche-verif-detail summary { font-size: .8125rem; color: var(--telios-texte-attenue); cursor: pointer; }
.fiche-verif-compte { align-self: start; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--telios-trait); }

/* La fenêtre « Valider l'inscription ». */
.fiche-validation { width: min(920px, calc(100vw - 24px)); }
.fiche-validation-indice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 6px;
  background: var(--telios-bg-alt); font-size: .875rem; }
.fiche-validation-indice .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-accent); }
.fiche-complement { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--telios-trait);
  border-left: 4px solid var(--telios-marque); background: var(--telios-bg-alt); }
.fiche-complement .tb-dialogue-rubrique { color: var(--telios-texte); }
.fiche-complement-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; }
.fiche-complement-pied .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 1199.98px) {
  .fiche-verif-corps { grid-template-columns: minmax(0, 1fr); }
  .fiche-verif-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) { .fiche-verif-frise { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fiche-verif-frise li { animation: none; } }
.fiche-verif-compte .fiche-sous-titre, .fiche-verif-demandes .fiche-sous-titre { margin-top: 0; padding-top: 0; border-top: 0; }

/* Clé de signature du serveur (administration/cles.html) : trois tuiles qui
   disent à quoi elle sert, le registre, puis la procédure de changement. */
.sg-role { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.sg-tuile { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 12px;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); animation: sec-monte .4s ease-out both; }
.sg-tuile:nth-child(2) { animation-delay: 60ms; } .sg-tuile:nth-child(3) { animation-delay: 120ms; }
.sg-tuile-titre { margin: 0 0 6px; font-size: .95rem; font-weight: 700; }
.sg-liste { margin: 0; padding: 0; list-style: none; }
.sg-cle { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px auto; gap: 18px; align-items: center;
  padding: 16px 18px; border-top: 1px solid var(--telios-trait); }
.sg-cle:first-child { border-top: 0; }
.sg-cle-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.sg-cle-icone .telios-icone { width: 20px; height: 20px; }
.sg-cle-courante { background: rgba(var(--tblr-success-rgb), .06); }
.sg-cle-courante .sg-cle-icone { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12);
  border-color: rgba(var(--tblr-success-rgb), .35); }
.sg-cle-revoquee .sg-cle-icone { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1);
  border-color: rgba(var(--tblr-danger-rgb), .3); }
.sg-kid { font-size: .95rem; font-weight: 700; }
.sg-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); color: var(--telios-texte-attenue); }
.sg-badge-courante { color: var(--telios-ok); border-color: rgba(var(--tblr-success-rgb), .4); background: rgba(var(--tblr-success-rgb), .1); }
.sg-badge-revoquee { color: var(--telios-danger); border-color: rgba(var(--tblr-danger-rgb), .4); background: rgba(var(--tblr-danger-rgb), .08); }
.sg-cle-signes { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.sg-cle-n { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-cle-signes .telios-aide { font-size: .75rem; }
.sg-cle-actions .btn .telios-icone, .sg-dialogue .tb-dialogue-pied .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.sg-dialogue { width: min(640px, calc(100vw - 24px)); }
.sg-etapes { display: grid; gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.sg-etapes li { display: flex; gap: 14px; align-items: flex-start; }
.sg-etapes li > span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.sg-etapes li > div { min-width: 0; flex: 1; }
.sg-etapes pre { margin: 6px 0 0; padding: 10px 14px; border-radius: 6px; background: var(--telios-bg-alt); color: var(--telios-texte); opacity: 1;
  border: 1px solid var(--telios-trait); font-size: .8125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-attention { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 6px;
  font-size: .875rem; background: rgba(var(--tblr-warning-rgb), .1); border: 1px solid rgba(var(--tblr-warning-rgb), .35); }
.sg-attention .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-alerte); }
@media (max-width: 991.98px) { .sg-role { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .sg-cle { grid-template-columns: 44px minmax(0, 1fr); }
  .sg-cle-signes, .sg-cle-actions { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .sg-tuile { animation: none; } }
.sg-sauvegarde-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-geste { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.sg-geste .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.sg-reauth { padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(var(--tblr-primary-rgb), .3);
  background: rgba(var(--tblr-primary-rgb), .06); }
.sg-code { font-size: 1.15rem; letter-spacing: .3em; }
.sg-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.sg-verdict .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--telios-accent); }
.sg-verdict-ok { background: rgba(var(--tblr-success-rgb), .08); border-color: rgba(var(--tblr-success-rgb), .4); }
.sg-verdict-ok .telios-icone { color: var(--telios-ok); }
.sg-verdict-ko { background: rgba(var(--tblr-danger-rgb), .06); border-color: rgba(var(--tblr-danger-rgb), .4); }
.sg-verdict-ko .telios-icone { color: var(--telios-danger); }
@media (max-width: 767.98px) { .sg-sauvegarde-corps { grid-template-columns: minmax(0, 1fr); } }

/* Frise de vérification : coche verte à droite du titre d'une étape franchie. */
.fiche-verif-frise li > div { flex: 1; }
.fiche-verif-titre { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.fiche-verif-coche, .fiche-verif-attente, .fiche-verif-refus { flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px; }
.fiche-verif-coche { color: var(--telios-encre-sur-accent); background: var(--telios-ok);
  animation: au-sceau .35s cubic-bezier(.2, .8, .2, 1.4) .3s both; }
.fiche-verif-attente { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .15); }
.fiche-verif-refus { color: var(--telios-encre-sur-accent); background: var(--telios-danger); }
.fiche-verif-frise .fiche-verif-titre .telios-icone { width: 13px; height: 13px; margin: 0; stroke-width: 3; }
.fiche-verif-frise li.en-cours { border-style: solid; border-color: rgba(var(--tblr-warning-rgb), .45); }
.fiche-verif-frise li.en-cours > .telios-icone { color: var(--telios-alerte); }
.fiche-verif-recue { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8125rem; color: var(--telios-ok); }
.fiche-verif-recue .telios-icone { width: 14px; height: 14px; }
.fiche-verif-recevoir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fiche-verif-recevoir .btn .telios-icone { width: 14px; height: 14px; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .fiche-verif-coche { animation: none; } }

/* Fiche client : note libre et journal de l'entreprise dit en mots. */
.fiche-note-aide { font-size: .75rem; margin: -2px 0 10px; }
.fiche-verif-compte .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.fiche-journal { margin: 0; padding: 0; list-style: none; }
.fiche-journal-ligne { display: flex; gap: 14px; align-items: flex-start; padding: 12px 18px; border-top: 1px solid var(--telios-trait); }
.fiche-journal-ligne:first-child { border-top: 0; }
.fiche-journal-icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.fiche-journal-icone .telios-icone { width: 16px; height: 16px; }
.fiche-journal-corps { flex: 1; min-width: 0; }
.fiche-journal-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 2px; }
.fiche-journal-tete strong { font-size: .875rem; }
.fiche-journal-tete .telios-aide { font-size: .75rem; }
.fiche-journal-note .fiche-journal-icone { color: var(--telios-marque); background: rgba(var(--tblr-primary-rgb), .1); }
.fiche-journal-note .cl-motif { border-left-color: var(--telios-marque); margin-top: 6px; }
.fiche-journal-alerte .fiche-journal-icone { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }

/* Historique des abonnements (fiche client) : frise des illimités et crédits. */
.fiche-abo-fil { padding: 8px 0 0; }
.fiche-abo-fil::before { left: 19px; }
.fiche-abo-evenement { grid-template-columns: 40px minmax(0, 1fr); }
.fiche-abo-evenement .cl-evenement-point { color: var(--telios-accent); border-color: rgba(var(--tblr-primary-rgb), .45); }
.fiche-abo-en_cours .cl-evenement-point, .fiche-abo-credit .cl-evenement-point { color: var(--telios-ok);
  border-color: rgba(var(--tblr-success-rgb), .5); }
.fiche-abo-revoque .cl-evenement-point, .fiche-abo-debit .cl-evenement-point { color: var(--telios-danger);
  border-color: rgba(var(--tblr-danger-rgb), .45); }
.fiche-abo-termine .cl-evenement-point { color: var(--telios-texte-attenue); border-color: var(--telios-trait); }
.fiche-abo-quantite { padding: 2px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700;
  font-variant-numeric: tabular-nums; background: rgba(var(--tblr-success-rgb), .12); color: var(--telios-ok); }
.fiche-abo-debit .fiche-abo-quantite { background: rgba(var(--tblr-danger-rgb), .1); color: var(--telios-danger); }
.fiche-abo-evenement .cl-motif { border-left-color: var(--telios-accent); }

/* Postes TELIOS (administration/postes.html) et réglages de la fiche. */
.pt-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; margin-bottom: 16px; }
.pt-grille .card { margin: 0; }
.pt-version-ligne { display: flex; gap: 8px; }
.pt-version-ligne .form-control { max-width: 260px; }
.pt-version-ligne .btn .telios-icone, .fiche-plafond .btn .telios-icone, .fiche-cle-fin .btn .telios-icone {
  width: 16px; height: 16px; margin-right: 6px; }
.pt-versions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pt-versions li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px;
  background: var(--telios-bg-alt); }
.pt-versions-n { font-size: .8125rem; color: var(--telios-texte-attenue); font-variant-numeric: tabular-nums; }
.pt-ligne { grid-template-columns: 44px minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(170px, 1fr) minmax(130px, .8fr); }
.pt-ligne .cl-mono .telios-icone { width: 18px; height: 18px; }
.pt-version-cell, .pt-activite { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pt-activite .telios-aide, .pt-origine { font-size: .75rem; }
.fiche-plafond, .fiche-cle-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fiche-plafond { padding: 12px 18px; border-top: 1px solid var(--telios-trait); }
.fiche-plafond .form-control { width: 130px; }
.fiche-cle-fin .form-control { width: 170px; }
.inc-erreur .fiche-journal-icone { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.inc-alerte .fiche-journal-icone { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .14); }
@media (max-width: 1199.98px) {
  .pt-grille { grid-template-columns: minmax(0, 1fr); }
  .pt-ligne { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
  .pt-origine { grid-column: 2 / -1; }
}
@media (max-width: 575.98px) { .pt-ligne { grid-template-columns: 44px minmax(0, 1fr); } .pt-ligne > div { grid-column: 2; } }

/* Espace client, page Postes : la clé de licence (administrateurs). */
.cc-cle-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cc-cle-texte { flex: 1; min-width: 240px; }
.cc-cle-titre { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.cc-cle-corps .btn .telios-icone, .cc-dialogue .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.cc-dialogue { width: min(680px, calc(100vw - 24px)); }

/* ── Vérification d'une attestation (fenêtre et page directe) ───────────
   L'attente : un radar qui tourne et trois étapes qui s'allument. Le
   verdict : l'anneau se trace, la marque s'écrit, le halo pulse une fois,
   puis les contrôles arrivent l'un après l'autre. Tout a pour état de
   repos l'état final : prefers-reduced-motion coupe sans rien cacher. */
.vf-dialogue { width: min(720px, calc(100vw - 24px)); }
.vf-dialogue .tb-dialogue-pied .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.vf-corps { min-height: 320px; }
.vf-attente { display: grid; justify-items: center; gap: 14px; padding: 28px 0 10px; text-align: center; }
.vf-radar { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .08); box-shadow: inset 0 0 0 2px rgba(var(--tblr-primary-rgb), .18); }
.vf-radar .telios-icone { width: 40px; height: 40px; }
.vf-radar-balayage { position: absolute; inset: -4px; border-radius: 999px; border: 3px solid transparent;
  border-top-color: var(--telios-accent); border-right-color: rgba(var(--tblr-primary-rgb), .35);
  animation: vf-tourne .9s linear infinite; }
@keyframes vf-tourne { to { transform: rotate(360deg); } }
.vf-attente-numero { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; }
.vf-etapes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.vf-etapes li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--telios-texte-attenue);
  opacity: .35; animation: vf-etape .4s ease-out both; }
.vf-etapes li::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--telios-accent); }
.vf-etapes li:nth-child(1) { animation-delay: .15s; } .vf-etapes li:nth-child(2) { animation-delay: .7s; }
.vf-etapes li:nth-child(3) { animation-delay: 1.25s; }
@keyframes vf-etape { to { opacity: 1; color: var(--telios-texte); } }

.vf { --vf-teinte: var(--telios-danger); --vf-teinte-rgb: var(--tblr-danger-rgb); }
.vf-authentique { --vf-teinte: var(--telios-ok); --vf-teinte-rgb: var(--tblr-success-rgb); }
.vf-revoquee { --vf-teinte: var(--telios-alerte); --vf-teinte-rgb: var(--tblr-warning-rgb); }
.vf-tete { display: grid; justify-items: center; gap: 4px; text-align: center; margin-bottom: 18px; }
.vf-sceau { position: relative; width: 120px; height: 120px; margin-bottom: 8px; }
.vf-halo { position: absolute; inset: 10px; border-radius: 999px; background: rgba(var(--vf-teinte-rgb), .18);
  animation: vf-halo 1.4s ease-out .9s both; }
@keyframes vf-halo { 0% { transform: scale(.6); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.vf-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vf-anneau-fond { fill: rgba(var(--vf-teinte-rgb), .08); stroke: var(--telios-trait); stroke-width: 6; }
.vf-anneau-trait { fill: none; stroke: var(--vf-teinte); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100;
  animation: vf-trace .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes vf-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.vf-marque { position: absolute; inset: 30px; width: 60px; height: 60px; fill: none; stroke: var(--vf-teinte); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round; }
.vf-marque path { stroke-dasharray: 30; animation: vf-ecrit .45s ease-out .8s both; }
@keyframes vf-ecrit { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.vf-surtitre { margin: 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.vf-titre { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--vf-teinte); outline: none;
  animation: sec-monte .4s ease-out .95s both; }
.vf-phrase { max-width: 52ch; margin: 2px 0 0; color: var(--telios-texte); animation: sec-monte .4s ease-out 1.05s both; }

.vf-controles { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.vf-controle { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); animation: vf-arrive .35s ease-out both; }
.vf-controle:nth-child(1) { animation-delay: 1.15s; } .vf-controle:nth-child(2) { animation-delay: 1.3s; }
.vf-controle:nth-child(3) { animation-delay: 1.45s; } .vf-controle:nth-child(4) { animation-delay: 1.6s; }
@keyframes vf-arrive { from { opacity: 0; transform: translateX(-10px); } }
.vf-controle-icone { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-texte-attenue); }
.vf-controle-icone .telios-icone { width: 14px; height: 14px; stroke-width: 3; }
.vf-ok .vf-controle-icone { background: var(--telios-ok); }
.vf-ko .vf-controle-icone { background: var(--telios-danger); }
.vf-non_fait .vf-controle-icone { color: var(--telios-texte-attenue); background: transparent; box-shadow: inset 0 0 0 2px var(--telios-trait); }
.vf-controle-texte { flex: 1; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.vf-controle-texte .telios-code { font-size: .78rem; color: var(--telios-texte-attenue); }
.vf-controle-etat { flex: none; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--telios-texte-attenue); }
.vf-ok .vf-controle-etat { color: var(--telios-ok); }
.vf-ko .vf-controle-etat { color: var(--telios-danger); }

.vf-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin: 0 0 18px;
  padding: 16px 18px; border-radius: 12px; border: 1px solid var(--telios-trait); animation: sec-monte .4s ease-out 1.7s both; }
.vf-details dt { font-size: .75rem; font-weight: 600; color: var(--telios-texte-attenue); }
.vf-details dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.vf-details-large { grid-column: 1 / -1; }
.vf-pdf { padding: 16px 18px; border-radius: 12px; background: var(--telios-bg-alt); animation: sec-monte .4s ease-out 1.8s both; }
.vf-pdf-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.vf-pdf-titre .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); }
.vf-carte .card-body { padding: 28px; }

@media (prefers-reduced-motion: reduce) {
  .vf-radar-balayage, .vf-etapes li, .vf-halo, .vf-anneau-trait, .vf-marque path, .vf-titre, .vf-phrase,
  .vf-controle, .vf-details, .vf-pdf { animation: none; }
  .vf-etapes li { opacity: 1; }
  .vf-halo { opacity: 0; }
}
.vf-controle-texte .telios-code { word-break: normal; white-space: nowrap; }
@media (max-width: 575.98px) {
  .vf-dialogue .tb-dialogue-pied { flex-direction: column-reverse; }
  .vf-dialogue .tb-dialogue-pied .btn { width: 100%; }
  .vf-controle-texte .telios-code { display: block; }
  .vf-sceau { width: 96px; height: 96px; } .vf-marque { inset: 24px; width: 48px; height: 48px; }
}

/* « Validation par l'équipe TELIOS » (comptes/_validation_equipe.html) :
   inscription hors Union, registre muet ou discordant. Une onde lente autour
   du bouclier dit « en cours », sans inquiéter. */
.ve { width: 100%; margin: 18px 0 4px; padding: 18px 20px; border-radius: 12px; text-align: left;
  background: rgba(var(--tblr-primary-rgb), .07); border: 1px solid rgba(var(--tblr-primary-rgb), .3);
  animation: sec-monte .45s ease-out .35s both; }
.ve-tete { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.ve-icone { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.ve-icone .telios-icone { position: relative; width: 22px; height: 22px; }
.ve-onde { position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .45);
  animation: ve-onde 2.4s ease-out infinite; }
@keyframes ve-onde { 70%, 100% { box-shadow: 0 0 0 14px rgba(var(--tblr-primary-rgb), 0); } }
.ve-titre { margin: 2px 0 4px; font-size: 1.05rem; font-weight: 800; }
.ve-raison { margin: 0; font-size: .875rem; color: var(--telios-texte-attenue); }
.ve-texte { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; }
.ve-promesses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ve-promesses li { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.ve-promesses .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-accent); }
@media (prefers-reduced-motion: reduce) { .ve, .ve-onde { animation: none; } }

/* ── Connexion en fenêtre (comptes/_dialogue_connexion.html) ────────────
   En-tête sombre et sceau, trois étapes qui se cochent, puis un sceau vert
   qui s'écrit avant l'ouverture de l'espace. Repos = état final. */
.cf-dialogue { width: min(500px, calc(100vw - 24px)); overflow: hidden; }
.cf-tete { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 28px 20px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tblr-primary-rgb), .22), transparent 70%), var(--telios-bg-alt);
  border-bottom: 1px solid var(--telios-trait); }
.cf-fermer { position: absolute; top: 12px; right: 12px; }
.cf-sceau { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin-bottom: 6px;
  color: var(--telios-encre-sur-accent); background: linear-gradient(145deg, var(--telios-accent), var(--telios-accent2));
  box-shadow: 0 12px 28px rgba(var(--tblr-primary-rgb), .35); animation: cf-sceau .6s cubic-bezier(.2, .8, .2, 1.3) both; }
@keyframes cf-sceau { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.cf-sceau .telios-icone { width: 30px; height: 30px; }
.cf-titre-principal { margin: 0; font-size: 1.35rem; font-weight: 800; }
.cf-etapes { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cf-etapes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: var(--telios-texte-attenue); background: var(--telios-carte);
  border: 1px solid var(--telios-trait); transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
.cf-etapes li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: .7rem;
  background: var(--telios-bg-alt); transition: background-color .3s ease, color .3s ease; }
.cf-etapes li.actif { color: var(--telios-accent); border-color: rgba(var(--tblr-primary-rgb), .5); }
.cf-etapes li.actif span { color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.cf-etapes li.fait { color: var(--telios-ok); border-color: rgba(var(--tblr-success-rgb), .45); }
.cf-etapes li.fait span { color: var(--telios-encre-sur-accent); background: var(--telios-ok); }
.cf-corps { padding: 24px 28px 8px; transition: opacity .2s ease; }
.cf-corps.cf-en-cours { opacity: .55; pointer-events: none; }
.cf-etape { animation: sec-monte .35s ease-out both; }
.cf-formulaire { display: grid; gap: 14px; }
.cf-champ .form-label { margin-bottom: 6px; }
.cf-saisie { position: relative; display: block; }
.cf-saisie > .telios-icone { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  color: var(--telios-texte-attenue); pointer-events: none; }
.cf-saisie .form-control { padding-left: 44px; }
.cf-formulaire .btn-lg .telios-icone { width: 18px; height: 18px; margin: 0 0 0 8px; }
.cf-formulaire .btn-lg .telios-icone:first-child { margin: 0 8px 0 0; }
.cf-lien { margin: 0; text-align: center; font-size: .875rem; }
.cf-alerte { margin-bottom: 14px; }
.cf-code-tete { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cf-code-icone { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.cf-code-icone .telios-icone { position: relative; width: 24px; height: 24px; }
.cf-titre { margin: 4px 0 0; font-size: 1.1rem; font-weight: 800; }
.cf-pied { padding: 14px 28px 20px; text-align: center; }
.cf-succes { display: grid; justify-items: center; gap: 6px; padding: 22px 0 26px; text-align: center; }
.cf-succes-sceau { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 999px; margin-bottom: 6px;
  background: rgba(var(--tblr-success-rgb), .14); box-shadow: inset 0 0 0 4px var(--telios-ok); animation: cf-sceau .5s ease-out both; }
.cf-succes-sceau svg { width: 42px; height: 42px; fill: none; stroke: var(--telios-ok); stroke-width: 2.6; stroke-linecap: round;
  stroke-linejoin: round; }
.cf-succes-sceau path { stroke-dasharray: 30; animation: vf-ecrit .45s ease-out .25s both; }
.cf-succes-titre { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--telios-ok); }
@media (max-width: 575.98px) { .cf-tete { padding: 26px 18px 16px; } .cf-corps { padding: 20px 18px 6px; } }
@media (prefers-reduced-motion: reduce) {
  .cf-sceau, .cf-etape, .cf-succes-sceau, .cf-succes-sceau path { animation: none; }
  .cf-etapes li, .cf-etapes li span, .cf-corps { transition: none; }
}
.sec-langue { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-langue .form-select { max-width: 220px; }
.sec-langue .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.tb-dialogue-grille-personne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .8fr); }

/* Indicateur « nouveau message » des fils de devis (_indicateur_messages.html) :
   une bulle et sa pastille qui pulse, puis la liste des fils à lire. */
.im { position: relative; }
.im > summary { list-style: none; }
.im > summary::-webkit-details-marker { display: none; }
.im-bouton { display: inline-flex; align-items: center; gap: 8px; }
.im-icone { position: relative; display: inline-grid; place-items: center; }
.im-icone .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
.im-pastille { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; color: var(--telios-encre-sur-accent);
  background: var(--telios-danger); box-shadow: 0 0 0 2px var(--telios-carte); animation: im-pulse 2s ease-out infinite; }
@keyframes im-pulse { 0% { box-shadow: 0 0 0 2px var(--telios-carte), 0 0 0 2px rgba(var(--tblr-danger-rgb), .55); }
  70%, 100% { box-shadow: 0 0 0 2px var(--telios-carte), 0 0 0 10px rgba(var(--tblr-danger-rgb), 0); } }
.im-texte { margin-left: 6px; font-weight: 600; }
.im-panneau { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1050; width: min(340px, calc(100vw - 24px));
  padding: 14px; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18); animation: sec-monte .2s ease-out both; }
.im-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .8125rem; font-weight: 700;
  color: var(--telios-texte-attenue); text-transform: uppercase; letter-spacing: .04em; }
.im-titre .telios-icone { width: 15px; height: 15px; }
.im-liste { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.im-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px;
  color: var(--telios-texte); background: var(--telios-bg-alt); text-decoration: none; }
.im-ligne:hover { text-decoration: none; background: rgba(var(--tblr-primary-rgb), .1); }
.im-ligne-texte { display: flex; flex-direction: column; min-width: 0; }
.im-ligne-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.im-ligne-texte .telios-aide { font-size: .75rem; }
.im-ligne-n { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800;
  text-align: center; color: var(--telios-encre-sur-accent); background: var(--telios-danger); }
.im-tout { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; }
.im-tout .telios-icone { width: 14px; height: 14px; }
@media (max-width: 991.98px) { .im-texte { display: none; } }
/* Le cadre que telios.js remplace : il ne doit rien changer à la barre. */
.im-cadre { display: contents; }
/* Notification d'un message arrivé pendant qu'on était sur la page : sous la
   barre, à droite, là où se trouve l'indicateur qu'elle vient d'allumer. */
.im-notif { position: fixed; top: 72px; right: 16px; z-index: 2002; width: min(380px, calc(100vw - 24px));
  border-radius: 12px; background: var(--telios-carte); color: var(--telios-texte); border: 1px solid var(--telios-trait);
  border-left: 4px solid var(--telios-accent); box-shadow: 0 22px 48px -14px rgba(0, 0, 0, .45);
  animation: im-notif-entree .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.im-notif[data-sortie] { animation: im-notif-sortie .25s ease-in forwards; }
/* La carte entière mène au fil : on clique où l'on veut. */
.im-notif-lien { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 14px 40px 14px 16px; border-radius: 8px; color: inherit; text-decoration: none; cursor: pointer; }
.im-notif-lien:hover { color: inherit; text-decoration: none; background: rgba(var(--tblr-primary-rgb), .06); }
.im-notif-lien:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: -2px; }
.im-notif-icone { grid-row: span 3; position: relative; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 999px; color: var(--telios-encre-sur-accent); background: var(--telios-accent); animation: im-pulse 2s ease-out 3; }
.im-notif-icone .telios-icone { width: 18px; height: 18px; color: inherit; }
.im-notif-titre { margin: 0; font-size: .9375rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-notif-texte { grid-column: 2; margin: 0; font-size: .875rem; color: var(--telios-texte-attenue);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.im-notif-texte strong { color: var(--telios-texte); }
.im-notif-indice { grid-column: 2; margin-top: 6px; font-size: .8125rem; font-weight: 700; color: var(--telios-accent); }
.im-notif-indice::after { content: " →"; }
.im-notif-lien:hover .im-notif-indice { text-decoration: underline; }
.im-notif-fermer { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent;
  color: var(--telios-texte-attenue); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.im-notif-fermer:hover, .im-notif-fermer:focus-visible { color: var(--telios-texte); background: var(--telios-bg-alt); }
@keyframes im-notif-entree { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes im-notif-sortie { to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .im-pastille, .im-panneau, .im-notif, .im-notif-icone { animation: none; } }

/* « Mon profil » (comptes/_profil.html) : qui est connecté se voit d'un coup
   d'œil — ses initiales dans l'en-tête, son nom au survol ou au clavier ; un
   clic ouvre la fenêtre du profil. */
.pf { position: relative; display: flex; align-items: center; margin: 0 4px; }
.pf-avatar { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .04em; color: var(--telios-encre-sur-accent);
  background: var(--telios-accent); box-shadow: 0 0 0 2px var(--telios-carte), 0 0 0 4px rgba(var(--tblr-primary-rgb), .28);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.pf-avatar:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--telios-carte), 0 0 0 5px rgba(var(--tblr-primary-rgb), .45); }
.pf-avatar:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 4px; }
.pf-bulle { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1060; display: grid; gap: 2px; min-width: 220px;
  max-width: 300px; padding: 12px 14px; border-radius: 12px; background: var(--telios-carte); color: var(--telios-texte);
  border: 1px solid var(--telios-trait); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); font-size: .8125rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none; }
.pf-bulle strong { font-size: .9375rem; overflow-wrap: anywhere; }
.pf-bulle span { color: var(--telios-texte-attenue); overflow-wrap: anywhere; }
.pf-bulle .pf-bulle-role { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--telios-trait); }
.pf:hover .pf-bulle, .pf-avatar:focus-visible + .pf-bulle { opacity: 1; visibility: visible; transform: none; }
.pf-dialogue { width: min(640px, calc(100vw - 24px)); }
.pf-tete { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 56px 22px 22px;
  border-bottom: 1px solid var(--telios-trait); background: rgba(var(--tblr-primary-rgb), .07); }
.pf-tete-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px;
  font-size: 1.375rem; font-weight: 800; letter-spacing: .04em; color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 0 0 3px var(--telios-carte), 0 0 0 6px rgba(var(--tblr-primary-rgb), .25); }
.pf-tete-texte { min-width: 0; }
.pf-tete-nom { margin: 0 0 2px; font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.pf-tete-detail { margin: 0; font-size: .875rem; color: var(--telios-texte-attenue); overflow-wrap: anywhere; }
.pf-fermer { position: absolute; top: 16px; right: 16px; }
.pf-bloc + .pf-bloc { padding-top: 20px; border-top: 1px solid var(--telios-trait); }
.pf-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.pf-actions .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.pf-attente { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 14px; border-radius: 12px;
  background: rgba(var(--tblr-warning-rgb), .1); border: 1px solid rgba(var(--tblr-warning-rgb), .35); }
.pf-attente-icone { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  color: var(--telios-texte); background: rgba(var(--tblr-warning-rgb), .25); }
.pf-attente-icone .telios-icone, .pf-attente .btn .telios-icone { width: 16px; height: 16px; }
.pf-attente .btn .telios-icone { margin-right: 4px; }
@media (max-width: 640px) { .pf-dialogue .tb-dialogue-grille { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pf-avatar, .pf-bulle { transition: none; } }

/* La page du lien reçu à l'ancienne adresse (comptes/confirmer_email.html). */
.pf-confirmation .card-body { padding: 32px; text-align: center; }
.pf-confirmation-icone { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.pf-confirmation-icone .telios-icone { width: 28px; height: 28px; }
.pf-confirmation-ok { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.pf-confirmation-ko { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.pf-confirmation-titre { margin: 0 0 18px; font-size: 1.375rem; font-weight: 800; }
.pf-adresses { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 0 0 18px;
  padding: 16px; border-radius: 12px; background: var(--telios-bg-alt); text-align: left; }
.pf-adresses dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.pf-adresses dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.pf-adresse-ancienne { color: var(--telios-texte-attenue); text-decoration: line-through; }
.pf-adresse-nouvelle { font-weight: 700; color: var(--telios-texte); }
.pf-adresses-fleche .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
.pf-confirmation .btn .telios-icone { width: 18px; height: 18px; margin-right: 6px; }
@media (max-width: 575.98px) { .pf-adresses { grid-template-columns: minmax(0, 1fr); } .pf-adresses-fleche { transform: rotate(90deg); justify-self: center; } }

/* La cloche des notifications (templates/_cloche.html), à côté des langues. */
.nt { position: relative; }
.nt > summary { list-style: none; }
.nt > summary::-webkit-details-marker { display: none; }
.nt-bouton { position: relative; display: inline-grid; place-items: center; }
.nt-bouton .telios-icone { width: 20px; height: 20px; }
.nt[open] .nt-bouton { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.nt-pastille { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; color: var(--telios-encre-sur-accent);
  background: var(--telios-danger); box-shadow: 0 0 0 2px var(--telios-carte); animation: im-pulse 2s ease-out infinite; }
.nt-panneau { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1050; width: min(380px, calc(100vw - 24px));
  border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18); animation: sec-monte .2s ease-out both; overflow: hidden; }
.nt-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--telios-trait); }
.nt-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; font-weight: 700;
  color: var(--telios-texte-attenue); text-transform: uppercase; letter-spacing: .04em; }
.nt-titre .telios-icone { width: 15px; height: 15px; }
.nt-effacer .telios-icone { width: 14px; height: 14px; margin-right: 4px; }
.nt-liste { max-height: min(60vh, 420px); margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.nt-ligne { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 6px; }
.nt-ligne + .nt-ligne { margin-top: 2px; }
.nt-nouvelle { background: rgba(var(--tblr-primary-rgb), .07); }
.nt-niveau { flex: none; margin-top: 2px; }
.nt-niveau .sceau { width: 16px; height: 16px; }
.nt-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-texte { font-size: .875rem; color: var(--telios-texte); overflow-wrap: anywhere; }
.nt-corps .telios-aide { font-size: .75rem; }
.nt-vide { display: flex; align-items: center; gap: 8px; margin: 0; padding: 22px 14px; color: var(--telios-texte-attenue); }
.nt-vide .telios-icone { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .nt-pastille, .nt-panneau { animation: none; }
}

/* Pop-ups de notification (templates/_messages.html) : une pile en haut, au
   centre. Entrée : descente amortie, flou qui se dissipe ; 5 s de présence,
   décomptées par la barre du bas ; sortie : remontée et fondu.
   Piège : le minutage des 5 s est tenu par telios.js (html.telios-js), PAS
   par une animation. La règle « moins d'animations » plus haut coupe toutes
   les animations (* { animation: none !important }) : un départ confié à une
   animation ne viendrait jamais, et le pop-up resterait figé — c'est arrivé
   sur un poste Mint réglé ainsi. Sans JavaScript seulement, le CSS minute. */
.nf-pile { position: fixed; top: 16px; left: 50%; z-index: 2001; display: grid; gap: 10px; width: min(460px, calc(100vw - 24px));
  transform: translateX(-50%); pointer-events: none; }
.nf { --nf-teinte: var(--telios-accent); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: start; padding: 14px 18px 17px 18px; overflow: hidden; border-radius: 12px; pointer-events: auto; cursor: pointer;
  background: var(--telios-carte); color: var(--telios-texte); border: 1px solid var(--telios-trait);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .08); font-weight: 600; line-height: 1.45;
  animation: nf-entree .55s cubic-bezier(.16, 1, .3, 1) both, nf-sortie .45s cubic-bezier(.7, 0, .84, 0) 5s forwards; }
.nf::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--nf-teinte); }
.nf-success { --nf-teinte: var(--telios-ok); }
.nf-error { --nf-teinte: var(--telios-danger); }
.nf-warning { --nf-teinte: rgb(var(--tblr-warning-rgb)); }
.nf-icone { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; }
.nf-icone .sceau { width: 20px; height: 20px; }
.nf-texte { overflow-wrap: anywhere; }
.nf-temps { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--nf-teinte); opacity: .6;
  transform-origin: left center; animation: nf-temps 5s linear forwards; }
.nf:nth-child(2) { animation-delay: .08s, 5.08s; }
.nf:nth-child(3) { animation-delay: .16s, 5.16s; }
html.telios-js .nf { animation: nf-entree .55s cubic-bezier(.16, 1, .3, 1) both; }
html.telios-js .nf:nth-child(2) { animation-delay: .08s; }
html.telios-js .nf:nth-child(3) { animation-delay: .16s; }
.nf[data-fermeture], html.telios-js .nf[data-fermeture] { animation: nf-sortie .45s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes nf-entree { from { opacity: 0; transform: translateY(-22px) scale(.95); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; } }
@keyframes nf-sortie { to { opacity: 0; transform: translateY(-14px) scale(.97); visibility: hidden; } }
@keyframes nf-temps { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes nf-fondu { to { opacity: 0; visibility: hidden; } }
@keyframes nf-fondu-entree { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* « Moins d'animations » : pas de déplacement, mais un fondu doux à
     l'entrée comme à la sortie, et la barre qui décompte. !important : la
     règle globale coupe tout le reste (voir plus haut). */
  .nf, html.telios-js .nf { animation: nf-fondu-entree .3s ease-out both !important; }
  html:not(.telios-js) .nf { animation: nf-fondu-entree .3s ease-out both, nf-fondu .3s linear 5s forwards !important; }
  .nf[data-fermeture], html.telios-js .nf[data-fermeture] { animation: nf-fondu .3s ease-in forwards !important; }
  .nf-temps { animation: nf-temps 5s linear forwards !important; }
  .im-notif { animation: nf-fondu-entree .3s ease-out both !important; }
  .im-notif[data-sortie] { animation: nf-fondu .25s ease-in forwards !important; }
}

/* Console des devis, sans dossier ouvert : la liste détaillée des dossiers
   (administration/devis.html, #dv-tableau). Toute la ligne est le lien. */
.dv-tableau { border: 1px solid var(--telios-trait); border-radius: 12px; background: var(--telios-carte); overflow: hidden; }
.dv-tableau-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
  border-bottom: 1px solid var(--telios-trait); }
.dv-tableau-titre { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 700; }
.dv-tableau-entetes, .dv-tableau-ligne { display: grid; gap: 16px; align-items: center;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.dv-tableau-entetes { padding: 10px 20px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border-bottom: 1px solid var(--telios-trait); }
.dv-tableau-lignes { margin: 0; padding: 0; list-style: none; }
.dv-tableau-lignes li + li { border-top: 1px solid var(--telios-trait); }
.dv-tableau-ligne { padding: 14px 20px; color: var(--telios-texte); text-decoration: none; transition: background .15s ease; }
.dv-tableau-ligne:hover { color: var(--telios-texte); text-decoration: none; background: rgba(var(--tblr-primary-rgb), .05); }
.dv-tableau-ligne:hover .dv-tableau-nom strong { color: var(--telios-accent); }
.dv-tableau-ligne:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: -2px; }
.dv-tableau-entreprise { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dv-tableau-nom { display: flex; flex-direction: column; min-width: 0; }
.dv-tableau-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tableau-nom .dv-pastille-non-lu { display: inline-block; margin-left: 4px; vertical-align: middle; }
.dv-tableau-nom small, .dv-tableau-quand small { font-size: .75rem; color: var(--telios-texte-attenue); }
.dv-tableau-devis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.dv-tableau-nombre { text-align: right; font-variant-numeric: tabular-nums; }
.dv-tableau-quand { display: flex; flex-direction: column; font-size: .875rem; }
.dv-tableau-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--telios-texte-attenue); }
.dv-tableau-vide .telios-icone { width: 28px; height: 28px; }
.dv-tableau .dv-liste-pages { padding: 12px 20px; border-top: 1px solid var(--telios-trait); }
@media (max-width: 991.98px) {
  .dv-tableau-entetes { display: none; }
  .dv-tableau-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  .dv-tableau-entreprise { grid-column: 1 / -1; }
  .dv-tableau-nombre { text-align: left; }
  .dv-tableau-ligne [data-libelle]::before { content: attr(data-libelle); display: block; font-size: .6875rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--telios-texte-attenue); }
}

/* ── Échanges clients (administration/echanges.html, echanges/client.html) ──
   Un salon de conversation : indicateurs vivants, liste des clients qui
   entre en cascade, anneau qui tourne autour d'un client qui attend, bulles
   qui arrivent en douceur. Tout le mouvement s'efface sous « moins
   d'animations » (règle globale) sans rien cacher. */
.telios-rail-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .7rem;
  font-weight: 800; line-height: 20px; text-align: center; color: var(--telios-encre-sur-accent); background: var(--telios-danger);
  box-shadow: 0 0 0 2px var(--telios-carte); animation: im-pulse 2s ease-out infinite; }

.ec-gauche { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Sous le tchat, la marge basse ordinaire (48 px) suffirait à faire défiler la page. */
.telios-contenu:has(> .ec-console) { padding-bottom: 16px; }
.ec-titre { padding: 8px 0 0; }
.ec-titre .page-title { font-size: 1.5rem; margin: 0 0 4px; }
.ec-bandeau { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .ec-bandeau { grid-template-columns: minmax(0, 1fr); } }
.ec-kpi { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; overflow: hidden;
  border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); animation: sec-monte .5s cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .2s ease, box-shadow .2s ease; }
.ec-kpi::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 180px; height: 180px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(var(--tblr-primary-rgb), .14), transparent); pointer-events: none; }
.ec-kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .35); }
.ec-kpi:nth-child(2) { animation-delay: 60ms; } .ec-kpi:nth-child(3) { animation-delay: 120ms; } .ec-kpi:nth-child(4) { animation-delay: 180ms; }
.ec-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.ec-kpi-icone { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.ec-kpi-icone .telios-icone { width: 24px; height: 24px; }
.ec-kpi-vif .ec-kpi-icone { color: var(--telios-encre-sur-accent); background: var(--telios-danger); animation: im-pulse 2s ease-out infinite; }
.ec-kpi-libelle { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.ec-kpi-valeur { font-size: 1.75rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ec-kpi-texte { font-size: 1.5rem; }
.ec-kpi-note { font-size: .8125rem; color: var(--telios-texte-attenue); }
.ec-kpi-large .ec-kpi-graphique { margin-left: auto; align-self: flex-end; width: 42%; max-width: 180px; }
.ec-kpi-graphique .g-colonnes { display: block; width: 100%; height: 40px; }
.ec-teinte-attente { stroke: var(--telios-alerte); stroke-linecap: round; }
.ec-teinte-ok { stroke: var(--telios-ok); stroke-linecap: round; }

.ec-console { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .ec-console { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ec-clients, .ec-salon { min-width: 0; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.ec-clients-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--telios-trait); }
.ec-clients-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.0625rem; font-weight: 700; }
.ec-clients-titre .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); }
.ec-recherche { position: relative; flex: 1 1 260px; max-width: 360px; }
.ec-recherche .telios-icone { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  color: var(--telios-texte-attenue); }
.ec-recherche .form-control { padding-left: 36px; }
.ec-filtres { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 4px; }
.ec-filtre { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: .8125rem;
  font-weight: 600; color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border: 1px solid transparent;
  text-decoration: none; transition: background .15s ease, color .15s ease; }
.ec-filtre .telios-icone { width: 14px; height: 14px; }
.ec-filtre:hover { color: var(--telios-texte); text-decoration: none; }
.ec-filtre.actif { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); border-color: rgba(var(--tblr-primary-rgb), .35); }
.ec-filtre.vide { opacity: .6; }
.ec-filtre-n { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: .7rem; line-height: 18px; text-align: center;
  background: var(--telios-carte); }
.ec-filtre-vif { color: var(--telios-encre-sur-accent); background: var(--telios-danger); }
.ec-compte { margin: 8px 18px 6px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.ec-lignes { margin: 0; padding: 0 8px 8px; list-style: none; }
.ec-ligne { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 10px;
  animation: sec-monte .45s cubic-bezier(.16, 1, .3, 1) both; transition: background .15s ease, box-shadow .15s ease; }
.ec-ligne:nth-child(2) { animation-delay: 30ms; } .ec-ligne:nth-child(3) { animation-delay: 60ms; }
.ec-ligne:nth-child(4) { animation-delay: 90ms; } .ec-ligne:nth-child(5) { animation-delay: 120ms; }
.ec-ligne:nth-child(6) { animation-delay: 150ms; } .ec-ligne:nth-child(7) { animation-delay: 180ms; }
.ec-ligne:nth-child(n+8) { animation-delay: 210ms; }
.ec-ligne + .ec-ligne { margin-top: 2px; }
.ec-ligne:hover { background: var(--telios-bg-alt); }
.ec-ligne.actif { background: rgba(var(--tblr-primary-rgb), .08); box-shadow: inset 3px 0 0 var(--telios-accent); }
.ec-ligne-non-lue .ec-ligne-nom { color: var(--telios-texte); }
.ec-ligne-lien { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; color: var(--telios-texte);
  text-decoration: none; border-radius: 8px; }
.ec-ligne-lien:hover { color: var(--telios-texte); text-decoration: none; }
.ec-ligne-lien:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 0; }
.ec-monogramme { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  font-size: .8125rem; font-weight: 800; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
/* Un client qui attend : un anneau tourne autour de son monogramme. */
.ec-ligne-non-lue .ec-monogramme::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; padding: 2px;
  background: conic-gradient(from 0deg, var(--telios-accent), var(--telios-danger), var(--telios-accent));
  /* Un masque ne lit que l'opacité : n'importe quelle teinte pleine convient, celle du thème évite toute couleur littérale. */
  -webkit-mask: linear-gradient(var(--telios-texte) 0 0) content-box, linear-gradient(var(--telios-texte) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--telios-texte) 0 0) content-box exclude, linear-gradient(var(--telios-texte) 0 0);
  animation: ec-tourne 2.4s linear infinite; }
@keyframes ec-tourne { to { transform: rotate(360deg); } }
.ec-ligne-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ec-ligne-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ec-ligne-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.ec-ligne-non-lue .ec-ligne-nom { font-weight: 800; }
.ec-ligne-quand { flex: none; font-size: .75rem; color: var(--telios-texte-attenue); }
.ec-ligne-apercu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--telios-texte-attenue); }
.ec-ligne-non-lue .ec-ligne-apercu { color: var(--telios-texte); font-weight: 600; }
.ec-vous { font-weight: 700; color: var(--telios-accent); }
.ec-ligne-actions { flex: none; display: flex; align-items: center; gap: 6px; padding-right: 6px; }
.ec-ligne-actions form { margin: 0; }
.ec-ligne-actions .btn .telios-icone { width: 14px; height: 14px; margin-right: 4px; }
.ec-repondre, .ec-cloturer { opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.ec-ligne:hover .ec-repondre, .ec-ligne:hover .ec-cloturer { opacity: 1; }
.ec-repondre:hover { transform: translateY(-1px); }
.ec-compteur { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: .75rem; font-weight: 800; line-height: 22px;
  text-align: center; color: var(--telios-encre-sur-accent); background: var(--telios-danger); animation: im-pulse 2s ease-out infinite; }
.ec-etat { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .75rem;
  font-weight: 700; white-space: nowrap; border: 1px solid currentColor; }
.ec-etat::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.ec-etat-ouvert { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .08); }
.ec-etat-clos { color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.ec-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--telios-texte-attenue); }
.ec-vide .telios-icone { width: 28px; height: 28px; }
.ec-clients .dv-liste-pages { padding: 10px 18px; border-top: 1px solid var(--telios-trait); }

/* Le salon : la conversation, à droite, qui reste à l'écran. */
.ec-salon { display: flex; flex-direction: column; overflow: hidden; }
/* Collant, et exactement aussi haut que l'espace qui reste sous lui à l'écran
   (telios.js, data-hauteur-ecran) : un long fil défile dans le salon, jamais
   la page. Sans script, au plus la hauteur de l'écran. */
@media (min-width: 1200px) {
  .ec-console .ec-salon { position: sticky; top: 16px; max-height: calc(100vh - 32px); }
  .ec-console .ec-salon[data-hauteur-ajustee] { max-height: none; }
}
.ec-salon-tete { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), .12), rgba(var(--tblr-primary-rgb), .02) 60%); }
.ec-salon-ident { flex: 1; min-width: 0; }
.ec-salon-nom { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-salon-nom a { color: inherit; }
.ec-salon-actions { display: flex; align-items: center; gap: 6px; }
.ec-salon-actions form { margin: 0; }
.ec-salon-actions .telios-icone { width: 15px; height: 15px; }
.ec-salon-actions .btn:not(.btn-ghost-secondary) .telios-icone { margin-right: 4px; }
.ec-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; font-size: .75rem;
  font-weight: 800; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.ec-avatar-telios { color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.ec-avatar-grand { width: 48px; height: 48px; font-size: 1rem; box-shadow: 0 0 0 3px var(--telios-carte), 0 0 0 5px rgba(var(--tblr-primary-rgb), .25); }
.ec-en-ligne { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; background: var(--telios-ok);
  vertical-align: middle; animation: im-pulse 2s ease-out infinite; }
.ec-membres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 18px; list-style: none;
  border-bottom: 1px solid var(--telios-trait); }
.ec-membres li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; font-size: .8125rem;
  background: var(--telios-bg-alt); }
.ec-membres small { color: var(--telios-texte-attenue); }
.ec-membre-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: .625rem; font-weight: 800;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.ec-fil { flex: 1 1 auto; min-height: 220px; max-height: 62vh; overflow-y: auto; padding: 18px; scroll-behavior: smooth;
  background: radial-gradient(circle at 100% 0, rgba(var(--tblr-primary-rgb), .05), transparent 45%), var(--telios-bg-alt); }
@media (min-width: 1200px) { .ec-console .ec-fil { max-height: none; min-height: 0; } }
.ec-fil-liste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ec-jour { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 600; color: var(--telios-texte-attenue); }
.ec-jour::before, .ec-jour::after { content: ""; flex: 1; height: 1px; background: var(--telios-trait); }
.ec-bulle { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.ec-moi { align-self: flex-end; flex-direction: row-reverse; }
.ec-corps { min-width: 0; padding: 10px 14px; border-radius: 16px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ec-autre .ec-corps { border-bottom-left-radius: 4px; }
.ec-moi .ec-corps { color: var(--telios-encre-sur-accent); background: var(--telios-accent); border-color: transparent;
  border-bottom-right-radius: 4px; box-shadow: 0 8px 20px -10px rgba(var(--tblr-primary-rgb), .7); }
.ec-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; font-size: .75rem; }
.ec-tete strong { font-size: .8125rem; }
.ec-tete time { opacity: .75; }
.ec-texte { margin: 0; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.ec-dossier { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: inherit; text-decoration: none; background: rgba(var(--tblr-primary-rgb), .1); }
.ec-dossier .telios-icone { width: 12px; height: 12px; }
.ec-dossier:hover { color: inherit; text-decoration: underline; }
.ec-moi .ec-dossier { background: rgba(0, 0, 0, .14); }
.ec-erreur { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .75rem; }
.ec-arrivee { animation: ec-arrivee .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ec-arrivee { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ec-fil-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: auto; padding: 40px 16px; text-align: center;
  color: var(--telios-texte-attenue); }
.ec-fil-vide strong { color: var(--telios-texte); }
.ec-fil-vide-icone { width: 54px; height: 54px; margin-bottom: 6px; border-radius: 999px; background: rgba(var(--tblr-primary-rgb), .12);
  box-shadow: 0 0 0 8px rgba(var(--tblr-primary-rgb), .06), 0 0 0 16px rgba(var(--tblr-primary-rgb), .03); }
.ec-clos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0;
  padding: 14px 18px; font-size: .8125rem; color: var(--telios-texte-attenue); border-top: 1px solid var(--telios-trait);
  background: var(--telios-carte); }
.ec-clos p { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; }
.ec-clos form { margin: 0; }
.ec-clos .btn .telios-icone { width: 15px; height: 15px; margin-right: 4px; }
.ec-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: end; padding: 14px 18px;
  border-top: 1px solid var(--telios-trait); background: var(--telios-carte); }
.ec-composer textarea { resize: none; min-height: 46px; border-radius: 12px; }
.ec-envoyer { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 12px; }
.ec-envoyer .telios-icone { width: 18px; height: 18px; transition: transform .2s ease; }
.ec-envoyer:hover .telios-icone { transform: translate(2px, -2px); }
.ec-envoi .telios-icone { animation: ec-envol .6s ease-in forwards; }
@keyframes ec-envol { to { transform: translate(18px, -18px); opacity: 0; } }
.ec-aide { grid-column: 1 / -1; margin: 0; font-size: .75rem; }

/* Sans conversation choisie : une orbe qui respire, et l'invitation à choisir. */
.ec-accueil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1;
  min-height: 460px; padding: 40px 32px; text-align: center; }
/* Les ondes débordent de l'orbe (14 px, puis × 1,6) : 52 px de marge en dessous,
   sinon elles mordent sur le titre. */
.ec-orbe { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 0 52px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 18px 40px -14px rgba(var(--tblr-primary-rgb), .8); }
.ec-orbe .telios-icone { width: 38px; height: 38px; }
.ec-orbe::before, .ec-orbe::after { content: ""; position: absolute; inset: -14px; border-radius: 999px;
  border: 2px solid rgba(var(--tblr-primary-rgb), .35); animation: ec-onde 2.8s ease-out infinite; }
.ec-orbe::after { animation-delay: 1.4s; }
@keyframes ec-onde { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ec-accueil-titre { margin: 0; font-size: 1.25rem; font-weight: 800; }
.ec-accueil-attente { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 14px; border-radius: 999px;
  font-size: .875rem; background: rgba(var(--tblr-warning-rgb), .12); }

/* Espace client : le même salon, en pleine page. */
.ec-salon-client { max-width: 920px; margin: 0 auto; }
.ec-salon-client .ec-fil { max-height: 60vh; }
@media (max-width: 767.98px) {
  .ec-ligne { flex-wrap: wrap; }
  .ec-ligne-actions { width: 100%; justify-content: flex-end; padding: 0 8px 8px; }
  .ec-bulle { max-width: 96%; }
  .ec-kpi-large .ec-kpi-graphique { display: none; }
}