/* 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 { flex-wrap: wrap; }
  .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; }
/* La période et le bouton d'action qui la suit (fiche client) : de l'air
   entre les deux, sans quoi ils se lisent comme un seul bloc. Grand écran
   seulement : plus étroit, le bouton passe à la ligne et ne doit pas se décaler.
   Centré en hauteur sur la période, entre la ligne des filtres et celle de la
   date : calé sur son bas, relevé de (68 − 42) / 2 = 13 px. Pas « center » : le
   titre, sur trois lignes à 1440 px, est plus haut que la période. */
@media (min-width: 992px) { .telios-periode + .telios-action-entete { margin-left: 40px; align-self: flex-end; margin-bottom: 13px; } }

/* Sélecteur de période : des liens, en contrôle segmenté. */
/* Une grille ajustée au contenu (filtres | Libre) : la date, sur toute sa
   largeur, commence ainsi exactement sous le premier filtre. En flex, le bloc
   débordait des filtres et la date partait plus à gauche qu'eux. */
.telios-periode { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; 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 { grid-column: 1 / -1; margin: 0; padding-left: 2px; text-align: left; }  /* sous le premier filtre (7 jours) */

/* 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; }

/* 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 { flex: none; white-space: nowrap; 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%; grid-template-columns: minmax(0, 1fr) auto; }
  .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; }
}
/* 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-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; }
.sec-codes-tete strong { color: var(--telios-texte); }
/* Imprimer, ranger au coffre : la consigne qui compte le plus, en encadré d'alerte. */
.sec-codes-alerte { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; font-size: .875rem;
  font-weight: 600; line-height: 1.5; color: var(--telios-texte); border: 1px solid rgba(var(--tblr-warning-rgb), .45);
  border-left: 4px solid var(--telios-alerte); border-radius: var(--telios-rayon-petit); background: rgba(var(--tblr-warning-rgb), .1); }
.sec-codes-alerte .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-alerte); }
@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-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. */
/* Notre engagement : un extrait d'attestation à gauche, le texte à droite,
   dans la mise en page de « La preuve ». La ligne « Non vérifié » est le
   cœur du propos : elle arrive la dernière et se distingue. */
.vi-principe { background: var(--telios-carte); border-bottom: 1px solid var(--telios-trait); }
.vi-engagement { display: grid; gap: 48px; align-items: center; }
@media (min-width: 992px) { .vi-engagement { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Sur petit écran, le texte d'abord : l'exemple illustre ce qu'il vient de dire. */
@media (max-width: 991.98px) { .vi-engagement-texte { order: -1; } }
.vi-engagement-chapeau { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--telios-texte-attenue); }
.vi-engagement .vi-garanties li { align-items: flex-start; }
.vi-engagement .vi-garanties li > span { display: grid; gap: 2px; color: var(--telios-texte-attenue); font-size: .98rem; }
.vi-engagement .vi-garanties strong { color: var(--telios-texte); font-size: 1.02rem; }
.vi-releve { margin: 0; padding: 26px 28px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.vi-releve-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--telios-trait); }
.vi-releve-marque { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--telios-texte-attenue); }
.vi-releve-marque .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); }
.vi-releve-numero { font-size: .8rem; color: var(--telios-texte-attenue); }
.vi-releve-lignes { margin: 0; padding: 0; list-style: none; }
.vi-releve-lignes li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px dashed var(--telios-trait); font-weight: 600; }
.vi-releve-etat { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 800; }
.vi-releve-ok { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.vi-releve-doute { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .14); }
.vi-releve-lignes li:last-child { border-bottom: 0; }
.vi-releve-pied { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--telios-trait);
  font-size: .86rem; color: var(--telios-texte-attenue); }
.vi-releve-pied .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-ok); }
/* À l'apparition (décision du 09/10/2026) :
   - l'extrait arrive de tout à gauche de l'écran et, arrivé à sa place,
     tremble comme s'il avait heurté un mur (--vi-choc : sa durée, dont les
     lignes attendent la fin) ; la section coupe ce qui dépasse, pour qu'aucune
     barre de défilement horizontale n'apparaisse pendant le trajet ;
   - puis ses lignes s'écrivent et leur verdict se tamponne, « Non vérifié »
     en dernier, un peu plus appuyé ;
   - à droite, les trois garanties surgissent de nulle part, une par une. */
.vi-principe { overflow: hidden; --vi-choc: 1.25s; }
.vi-anime .vi-releve.vi-vu { animation: vi-choc var(--vi-choc) both; }
.vi-anime .vi-releve.vi-vu li { animation: vi-monte .5s ease-out both; }
.vi-anime .vi-releve.vi-vu li:nth-child(1) { animation-delay: calc(var(--vi-choc) + .05s); }
.vi-anime .vi-releve.vi-vu li:nth-child(2) { animation-delay: calc(var(--vi-choc) + .3s); }
.vi-anime .vi-releve.vi-vu li:nth-child(3) { animation-delay: calc(var(--vi-choc) + .55s); }
.vi-anime .vi-releve.vi-vu li:nth-child(4) { animation-delay: calc(var(--vi-choc) + .9s); }
.vi-anime .vi-releve.vi-vu .vi-releve-etat { animation: vi-tampon .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.vi-anime .vi-releve.vi-vu li:nth-child(1) .vi-releve-etat { animation-delay: calc(var(--vi-choc) + .3s); }
.vi-anime .vi-releve.vi-vu li:nth-child(2) .vi-releve-etat { animation-delay: calc(var(--vi-choc) + .55s); }
.vi-anime .vi-releve.vi-vu li:nth-child(3) .vi-releve-etat { animation-delay: calc(var(--vi-choc) + .8s); }
.vi-anime .vi-releve.vi-vu li:nth-child(4) .vi-releve-etat {
  animation: vi-tampon-fort .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--vi-choc) + 1.2s) both; }
.vi-anime .vi-releve.vi-vu .vi-releve-pied { animation: vi-monte .5s ease-out calc(var(--vi-choc) + 1.5s) both; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li { animation: vi-du-neant .75s cubic-bezier(.2, .9, .3, 1.2) both; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(1) { animation-delay: .5s; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(2) { animation-delay: 1s; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(3) { animation-delay: 1.5s; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li > .telios-icone {
  animation: vi-icone .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(1) > .telios-icone { animation-delay: .65s; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(2) > .telios-icone { animation-delay: 1.15s; }
.vi-anime .vi-engagement-texte.vi-vu .vi-garanties li:nth-child(3) > .telios-icone { animation-delay: 1.65s; }
/* Le trajet ralentit à l'approche du mur (premier palier), puis le choc :
   des secousses qui s'amortissent. */
@keyframes vi-choc {
  0% { opacity: 0; transform: translateX(-110vw) rotate(-2deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  10% { opacity: 1; }
  62% { transform: translateX(0) rotate(0); animation-timing-function: ease-out; }
  68% { transform: translateX(-16px) rotate(-1.2deg); }
  74% { transform: translateX(11px) rotate(.8deg); }
  80% { transform: translateX(-7px) rotate(-.5deg); }
  86% { transform: translateX(4px) rotate(.3deg); }
  93% { transform: translateX(-2px); }
  100% { opacity: 1; transform: none; } }
@keyframes vi-du-neant { 0% { opacity: 0; transform: scale(.3); filter: blur(10px); }
  60% { opacity: 1; transform: scale(1.04); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes vi-tampon { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes vi-tampon-fort { 0% { opacity: 0; transform: scale(1.9) rotate(-6deg); } 70% { opacity: 1; transform: scale(.94) rotate(0); }
  100% { opacity: 1; transform: none; } }
.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); } }

/* Les trois usages, à leur entrée dans l'écran (vi-vu, posée par telios.js) :
   les cartes viennent du fond, dans un ordre au hasard, un reflet balaie le
   visuel, l'icône surgit et lance une onde, son trait se dessine, puis le
   titre et le texte montent. Seulement sous vi-anime : sans script, ou avec
   « réduire les animations », tout est là d'emblée.
   Piège : la carte garde sa transition de survol. Son entrée est une
   animation, pas une transition retardée, sinon le survol serait retardé aussi. */
/* Les trois cartes viennent du fond de l'écran (décision du 08/10/2026) : de
   loin, petites et floues, elles avancent jusqu'à leur place, chacune à son
   tour dans un ordre tiré au hasard à chaque visite (telios.js, --vi-retard). */
.vi-usages { perspective: 1400px; }
.vi-anime .vi-usage { transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out; }
.vi-anime .vi-usage.vi-vu { animation: vi-profondeur 1s cubic-bezier(.16, 1, .3, 1) var(--vi-retard, 0s) both; }
.vi-usage-visuel { position: relative; }
.vi-usage-visuel::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--telios-carte) 55%, transparent) 50%, transparent 65%); }
.vi-anime .vi-usage.vi-vu .vi-usage-visuel::after { animation: vi-reflet 1.3s ease-out calc(var(--vi-retard, 0s) + .35s) both; }
.vi-anime .vi-usage.vi-vu .vi-usage-visuel img { animation: vi-zoom 1.4s cubic-bezier(.2, .8, .2, 1) var(--vi-retard, 0s) both; }
.vi-usage-icone { position: relative; }
.vi-anime .vi-usage.vi-vu .vi-usage-icone {
  animation: vi-icone .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--vi-retard, 0s) + .25s) both,
             vi-pulse 3.2s ease-in-out calc(var(--vi-retard, 0s) + 1.2s) infinite; }
.vi-usage-icone::after { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  border: 2px solid var(--telios-accent); opacity: 0; }
.vi-anime .vi-usage.vi-vu .vi-usage-icone::after { animation: vi-onde 1.1s ease-out calc(var(--vi-retard, 0s) + .55s) both; }
.vi-anime .vi-usage.vi-vu .vi-usage-icone .telios-icone * { stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: vi-trace 1.1s ease-out calc(var(--vi-retard, 0s) + .45s) forwards; }
.vi-anime .vi-usage.vi-vu .vi-h3 { animation: vi-monte .6s ease-out calc(var(--vi-retard, 0s) + .45s) both; }
.vi-anime .vi-usage.vi-vu p { animation: vi-monte .6s ease-out calc(var(--vi-retard, 0s) + .58s) both; }
.vi-usage:hover .vi-usage-icone .telios-icone { transform: rotate(-8deg) scale(1.08); }
.vi-usage-icone .telios-icone { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes vi-profondeur { from { opacity: 0; transform: translateZ(-420px) scale(.72); filter: blur(10px); }
  60% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vi-carte { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vi-reflet { to { transform: translateX(120%); } }
@keyframes vi-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes vi-icone { 0% { opacity: 0; transform: scale(.3) rotate(-25deg); } 70% { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: none; } }
@keyframes vi-onde { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes vi-trace { to { stroke-dashoffset: 0; } }
@keyframes vi-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.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; }

/* « Du câble USB à la preuve », à son apparition : le fil se trace de gauche
   à droite et chaque étape s'allume quand il l'atteint (--vi-retard) — le
   cercle surgit et lance une onde, le pictogramme se dessine, la pastille
   numérotée se pose, puis le texte monte. Le fil attend l'apparition grâce à
   :has() ; un navigateur qui l'ignore le montre d'emblée, rien ne manque. */
.vi-etapes li:nth-child(2) { --vi-retard: .35s; } .vi-etapes li:nth-child(3) { --vi-retard: .7s; }
.vi-etapes li:nth-child(4) { --vi-retard: 1.05s; }
@supports selector(:has(a)) {
  .vi-anime .vi-etapes::before { transform: scaleX(0); transform-origin: left; }
  .vi-anime .vi-etapes:has(li.vi-vu)::before { animation: vi-fil 1.4s cubic-bezier(.45, 0, .2, 1) .15s both; }
}
.vi-anime .vi-etapes li.vi-vu { animation: vi-monte .6s ease-out var(--vi-retard, 0s) both; }
.vi-anime .vi-etapes li.vi-vu .vi-etape-icone { animation: vi-icone .8s cubic-bezier(.34, 1.56, .64, 1) var(--vi-retard, 0s) both; }
.vi-etape-icone::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; pointer-events: none;
  border: 2px solid var(--telios-accent); opacity: 0; }
.vi-anime .vi-etapes li.vi-vu .vi-etape-icone::after { animation: vi-onde 1.1s ease-out calc(var(--vi-retard, 0s) + .3s) both; }
.vi-anime .vi-etapes li.vi-vu .vi-etape-icone .telios-icone * { stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: vi-trace 1s ease-out calc(var(--vi-retard, 0s) + .2s) forwards; }
.vi-anime .vi-etapes li.vi-vu .vi-etape-num { animation: vi-pastille .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--vi-retard, 0s) + .45s) both; }
.vi-anime .vi-etapes li.vi-vu .vi-h3 { animation: vi-monte .6s ease-out calc(var(--vi-retard, 0s) + .3s) both; }
.vi-anime .vi-etapes li.vi-vu p { animation: vi-monte .6s ease-out calc(var(--vi-retard, 0s) + .42s) both; }
@keyframes vi-fil { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vi-pastille { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }

.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); }

/* Les forfaits, à leur apparition : une signature propre à ce bloc.
   - Les cartes basculent vers l'avant en 3D, l'une après l'autre, comme des
     panneaux d'affichage qui se retournent (--vi-retard).
   - Les prix défilent de 0 € à leur montant (telios.js, data-vi-montant) ; le
     texte final est toujours celui écrit par le serveur.
   - « Sur devis », l'offre des grands parcs : un liseré de lumière fait le
     tour de la carte, puis le texte bat comme un cœur, sans fin.
   - Au survol, un halo suit le curseur (data-projecteur : --vi-x, --vi-y).
   Comme ailleurs, la carte garde sa transition de survol : l'entrée est une
   animation, pas une transition retardée. */
.vi-forfaits { perspective: 1200px; }
.vi-forfait { position: relative; overflow: hidden; isolation: isolate; }
.vi-forfait:nth-child(2) { --vi-retard: .12s; } .vi-forfait:nth-child(3) { --vi-retard: .24s; }
.vi-forfait:nth-child(4) { --vi-retard: .36s; } .vi-forfait:nth-child(5) { --vi-retard: .48s; }
.vi-forfait:nth-child(6) { --vi-retard: .6s; }
.vi-anime .vi-forfait { transition: transform .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out; }
.vi-anime .vi-forfait.vi-vu { transform-origin: 50% 100%;
  animation: vi-bascule .9s cubic-bezier(.2, .9, .25, 1) var(--vi-retard, 0s) both; }
.vi-anime .vi-forfait.vi-vu .vi-forfait-prix + .telios-aide { animation: vi-monte .5s ease-out calc(var(--vi-retard, 0s) + 1.1s) both; }
.vi-forfait:hover { box-shadow: 0 18px 40px -18px rgba(var(--tblr-primary-rgb), .55); }
.vi-forfait:hover .vi-forfait-prix { color: var(--telios-accent); }
.vi-forfait-prix { transition: color .25s; font-variant-numeric: tabular-nums; }
/* Le halo qui suit le curseur. */
.vi-forfait::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--vi-x, 50%) var(--vi-y, 50%), rgba(var(--tblr-primary-rgb), .16), transparent 70%);
  transition: opacity .3s; }
.vi-forfait:hover::before { opacity: 1; }
/* « Sur devis » : le liseré de lumière, puis le texte qui s'illumine. */
.vi-forfait-devis { border-color: rgba(var(--tblr-primary-rgb), .45);
  background: linear-gradient(160deg, rgba(var(--tblr-primary-rgb), .1), var(--telios-bg-alt) 55%); }
.vi-forfait-devis::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--vi-angle, 0deg), transparent 0deg, var(--telios-accent) 40deg, var(--telios-marque) 80deg, transparent 120deg);
  /* Un masque ne lit que l'opacité : n'importe quel jeton opaque convient. */
  -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); opacity: 0; }
@property --vi-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vi-anime .vi-forfait-devis.vi-vu::after { animation: vi-lisere 2.4s cubic-bezier(.45, 0, .2, 1) calc(var(--vi-retard, 0s) + .6s) both; }
/* « Sur devis » respire : un battement de cœur (double pulsation, puis un
   repos), sans fin. Piège (08/10/2026) : un cadre bleu entourait le mot. Son
   animation s'appelait « vi-eclat », nom déjà pris plus bas par la fenêtre de
   vérification (un liseré de 4 px) : la dernière @keyframes du même nom
   l'emporte. Vérifier qu'un nom d'animation est libre avant de le prendre. */
.vi-forfait-devis .vi-forfait-prix { display: inline-block; transform-origin: 50% 60%; }
/* Toujours sur une ligne : « Quote on request », « Bajo presupuesto » passaient
   à la ligne et grandissaient toutes les cartes de la rangée. Hors du
   français, plus longs, ils prennent une taille un peu plus petite. */
.vi-forfait-devis .vi-forfait-prix { white-space: nowrap; }
html:not([lang|="fr"]) .vi-forfait-devis .vi-forfait-prix { font-size: 1.3rem; }
.vi-forfait-appel { white-space: nowrap; }
.vi-forfait-appel a { text-decoration: none; }
.vi-forfait-appel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vi-anime .vi-forfait-devis.vi-vu .vi-forfait-appel { animation: vi-monte .5s ease-out calc(var(--vi-retard, 0s) + 1.1s) both; }
.vi-forfait-devis:hover .vi-forfait-prix { color: var(--telios-accent); }
.vi-anime .vi-forfait-devis.vi-vu .vi-forfait-prix { animation: vi-coeur 2.4s ease-in-out calc(var(--vi-retard, 0s) + 1.2s) infinite; }
.vi-anime .vi-forfait-devis.vi-vu:hover .vi-forfait-prix { animation-play-state: paused; }
@keyframes vi-bascule { 0% { opacity: 0; transform: rotateX(-82deg) translateY(28px); }
  60% { opacity: 1; transform: rotateX(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes vi-lisere { 0% { opacity: 1; --vi-angle: 0deg; } 85% { opacity: 1; } 100% { opacity: 0; --vi-angle: 360deg; } }
@keyframes vi-coeur { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 22% { transform: scale(.98); }
  34% { transform: scale(1.06); } 48% { transform: scale(1); } }

.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); }
/* La compatibilité, entre le titre et la phrase d'inscription : la pastille
   en tête de la phrase, sur la même ligne, aux couleurs du bloc (accent sur
   fond transparent, demande du 15/10/2026). */
.vi-final-cadre .vi-compat { max-width: 680px; margin: 18px auto 14px; font-size: .9375rem; line-height: 1.7; color: var(--telios-texte); }
.vi-compat-pastille { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 1px 10px; border-radius: 999px;
  vertical-align: -1px; white-space: nowrap; font-size: .8125rem; font-weight: 700; color: var(--telios-accent); background: transparent;
  border: 1px solid color-mix(in srgb, var(--telios-accent) 55%, transparent); }
.vi-compat-pastille .telios-icone { width: 13px; height: 13px; stroke-width: 3; }

/* 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; }
}
@media (prefers-reduced-motion: reduce) {
  .vi-anime [data-apparition]:not(.vi-vu) { opacity: 1; transform: none; }
  .vi-usage-icone, .vi-usage-visuel::after, .vi-usage-icone::after, .vi-etape-icone::after, .vi-forfait::after,
  .vi-etapes::before, .vi-forfait-devis .vi-forfait-prix { animation: none !important; }
  .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; }
/* Le dernier envoi de la clé : vers qui, ou vers personne (administration/fiche.html). */
.fiche-cle-envoi { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: .8rem; font-weight: 600; }
.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 { flex-wrap: wrap; }
  .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: repeat(3, minmax(0, 1fr)); 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-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-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-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 { justify-content: center; }
  .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-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; }
/* L'aperçu prend la largeur de son contenu : aucune ligne ne passe à la ligne
   (width: max-content, white-space: nowrap). Seul garde-fou, la largeur de
   l'écran : au-delà, points de suspension plutôt qu'un débordement. */
.pf-bulle { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1060; display: grid; gap: 4px; width: max-content;
  max-width: calc(100vw - 24px); padding: 12px 16px; 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; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none; }
.pf-bulle-identite { display: grid; gap: 4px; min-width: 0; }
.pf-bulle-identite > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Le pont invisible entre l'avatar et la bulle : sans lui, la souris qui
   traverse les 10 px d'écart quitte .pf et referme la bulle avant d'atteindre
   « Se déconnecter ». */
.pf-bulle::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.pf-bulle-sortie { margin: 6px -8px -4px; padding-top: 6px; border-top: 1px solid var(--telios-trait); }
.pf-sortir { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px;
  font: inherit; font-weight: 600; color: var(--telios-danger); background: none; cursor: pointer; text-align: left;
  transition: background-color .15s ease; }
.pf-sortir:hover, .pf-sortir:focus-visible { background: rgba(var(--tblr-danger-rgb), .1); }
.pf-sortir:focus-visible { outline: 2px solid var(--telios-danger); outline-offset: 1px; }
.pf-sortir .telios-icone { width: 16px; height: 16px; transition: transform .2s ease; }
.pf-sortir:hover .telios-icone { transform: translateX(3px); }
.pf-bulle-entreprise { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding-bottom: 8px; font-size: .72rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-accent); border-bottom: 1px solid var(--telios-trait); }
.pf-bulle-nom { font-size: .9375rem; }
.pf-bulle-email { display: flex; align-items: center; gap: 6px; color: var(--telios-texte-attenue); }
.pf-bulle .telios-icone { flex: none; width: 14px; height: 14px; }
.pf:hover .pf-bulle, .pf:focus-within .pf-bulle { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.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, .pf-sortir, .pf-sortir .telios-icone { 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; }
}

/* ── Boutons (décision du 06/10/2026) ─────────────────────────────────────
   Un bouton n'est jamais aussi large que son emplacement : il prend la
   largeur de son libellé, avec un souffle généreux. Relief discret, survol
   qui soulève, appui qui s'enfonce, anneau de focus net. Jetons du thème
   uniquement.
   Exception voulue : les deux boutons d'appel de la vitrine (.vi-bouton,
   « Inscrire mon entreprise » et « Se connecter ») gardent leur dessin
   propre (demande du 06/10/2026) ; d'où les :not(.vi-bouton). */
.btn:not(.vi-bouton) { gap: 6px; padding-inline: 1.05rem; font-weight: 600; letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:not(.vi-bouton):not(.btn-link):not(.btn-ghost-secondary):not(:disabled):hover { transform: translateY(-1px); }
.btn:not(.vi-bouton):not(.btn-link):not(:disabled):active { transform: translateY(0) scale(.98); }
.btn:not(.vi-bouton):focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; box-shadow: none; }
.btn-primary:not(.vi-bouton) { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 16px -8px rgba(var(--tblr-primary-rgb), .75); }
.btn-primary:not(.vi-bouton):not(:disabled):hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 12px 24px -10px rgba(var(--tblr-primary-rgb), .85); }
.btn:not(.vi-bouton):not(.btn-primary):not(.btn-link):not([class*="btn-ghost"]):not(:disabled):hover { box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .45); }
.btn-lg:not(.vi-bouton) { padding-inline: 1.6rem; border-radius: var(--telios-rayon-grand); }
.btn .telios-icone { flex: none; }
/* Bouton seul sous un formulaire ou en pied de carte : centré, à sa largeur. */
.tb-btn-seul { display: flex; width: fit-content; min-width: 11rem; max-width: 100%; margin-inline: auto; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .btn:not(.vi-bouton), .btn:not(.vi-bouton):hover, .btn:not(.vi-bouton):active { transform: none !important; } }

/* ── Espace client à barre latérale (base.html, _barre_laterale.html) ─────
   Le même rail que l'administration : rubriques par catégorie, icônes
   vectorielles. En haut, l'entreprise et les outils (messages, thème,
   langues, cloche, profil). */
.ecl-entete { min-height: 64px; }
.ecl-entreprise { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ecl-entreprise-monogramme { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-size: .75rem; font-weight: 800; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.ecl-outils { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ecl-outils .btn { margin-left: 0; }
.ecl-outils .telios-langues { margin: 0 4px; }
.ecl-rail .telios-rail-liens .nav-link { transition: background .15s ease, color .15s ease, transform .15s ease; }
.ecl-rail .telios-rail-liens .nav-link:hover .telios-icone { transform: translateX(2px); }
.ecl-rail .telios-rail-liens .telios-icone { transition: transform .15s ease; }
.telios-client .page-header { padding-top: 8px; }
@media (max-width: 767.98px) { .ecl-entreprise { display: none; } }

/* Pages de l'espace client : vignette du titre, tuiles d'indicateurs,
   raccourcis, états vides ; entrées en cascade. Le mouvement s'efface sous
   « moins d'animations » (règle globale). */
.ecl-titre { display: flex; align-items: center; gap: 14px; }
.ecl-titre-texte { min-width: 0; }
.ecl-vignette { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 10px 24px -12px rgba(var(--tblr-primary-rgb), .9); animation: ecl-vignette .5s cubic-bezier(.16, 1, .3, 1) both; }
.ecl-vignette:empty { display: none; }
.ecl-vignette .telios-icone { width: 24px; height: 24px; }
@keyframes ecl-vignette { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
.telios-client .page-body .card, .telios-client .ecl-tuile, .telios-client .ecl-raccourci {
  animation: sec-monte .5s cubic-bezier(.16, 1, .3, 1) both; }
.telios-client .row-cards > :nth-child(2) .card, .ecl-tuiles > :nth-child(2), .ecl-raccourcis > :nth-child(2) { animation-delay: 50ms; }
.telios-client .row-cards > :nth-child(3) .card, .ecl-tuiles > :nth-child(3), .ecl-raccourcis > :nth-child(3) { animation-delay: 100ms; }
.telios-client .row-cards > :nth-child(4) .card, .ecl-tuiles > :nth-child(4), .ecl-raccourcis > :nth-child(4) { animation-delay: 150ms; }
.telios-client .row-cards > :nth-child(n+5) .card, .ecl-tuiles > :nth-child(n+5), .ecl-raccourcis > :nth-child(n+5) { animation-delay: 200ms; }
.telios-client .card-table tbody tr { transition: background .15s ease; }
.telios-client .card-table tbody tr:hover { background: rgba(var(--tblr-primary-rgb), .04); }
.telios-client .card-header .card-title { display: flex; align-items: center; gap: 8px; }
.telios-client .card-header .card-title .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); }

.ecl-tuiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 16px; }
.ecl-tuile { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; overflow: hidden;
  border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  transition: transform .2s ease, box-shadow .2s ease; }
.ecl-tuile::after { content: ""; position: absolute; inset: auto -40px -70px auto; width: 170px; height: 170px; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(var(--ecl-teinte-rgb, var(--tblr-primary-rgb)), .13), transparent); pointer-events: none; }
.ecl-tuile:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .4); }
.ecl-tuile > div { display: flex; flex-direction: column; min-width: 0; }
.ecl-tuile-icone { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  color: rgb(var(--ecl-teinte-rgb, var(--tblr-primary-rgb))); background: rgba(var(--ecl-teinte-rgb, var(--tblr-primary-rgb)), .12); }
.ecl-tuile-icone .telios-icone { width: 24px; height: 24px; }
.ecl-tuile-libelle { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.ecl-tuile-valeur { font-size: 1.75rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ecl-tuile-valeur.ecl-texte { font-size: 1.35rem; }
.ecl-tuile-note { font-size: .8125rem; color: var(--telios-texte-attenue); }
.ecl-ok { --ecl-teinte-rgb: var(--tblr-success-rgb); }
.ecl-alerte { --ecl-teinte-rgb: var(--tblr-warning-rgb); }
.ecl-danger { --ecl-teinte-rgb: var(--tblr-danger-rgb); }

.ecl-raccourcis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 16px; }
.ecl-raccourci { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; color: var(--telios-texte);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ecl-raccourci:hover { color: var(--telios-texte); text-decoration: none; transform: translateY(-2px);
  border-color: rgba(var(--tblr-primary-rgb), .45); box-shadow: 0 14px 30px -20px rgba(var(--tblr-primary-rgb), .8); }
.ecl-raccourci > .telios-icone:first-child { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ecl-raccourci span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ecl-raccourci strong { font-size: .9375rem; }
.ecl-raccourci small { color: var(--telios-texte-attenue); }
.ecl-raccourci > .telios-icone:last-child { flex: none; width: 16px; height: 16px; color: var(--telios-texte-attenue);
  transition: transform .2s ease; }
.ecl-raccourci:hover > .telios-icone:last-child { transform: translateX(3px); color: var(--telios-accent); }

.ecl-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center;
  color: var(--telios-texte-attenue); }
.ecl-vide > .telios-icone { width: 54px; height: 54px; padding: 14px; margin-bottom: 4px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1);
  box-shadow: 0 0 0 8px rgba(var(--tblr-primary-rgb), .05); }
.ecl-vide strong { color: var(--telios-texte); }

.ecl-cellule { display: inline-flex; align-items: center; gap: 8px; }
.ecl-cellule .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-texte-attenue); }
.ecl-plus { color: var(--telios-ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.ecl-moins { color: var(--telios-danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.ecl-barre { position: relative; height: 8px; border-radius: 999px; background: var(--telios-bg-alt); overflow: hidden; }
.ecl-barre > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--telios-accent);
  transform-origin: left center; animation: ecl-barre .9s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes ecl-barre { from { transform: scaleX(0); } }
.ecl-repartition { display: grid; gap: 12px; margin: 0; padding: 16px 18px; list-style: none; }
.ecl-repartition li { display: grid; gap: 6px; }
.ecl-repartition .ecl-ligne { display: flex; justify-content: space-between; gap: 10px; font-size: .875rem; }
.ecl-segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--telios-bg-alt); }
.ecl-segments a { padding: 6px 14px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--telios-texte-attenue);
  text-decoration: none; transition: background .15s ease, color .15s ease; }
.ecl-segments a:hover { color: var(--telios-texte); text-decoration: none; }
.ecl-segments a.actif { color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 6px 14px -8px rgba(var(--tblr-primary-rgb), .9); }
.ecl-fiche { display: grid; gap: 4px; margin: 0; padding: 10px; list-style: none; }
.ecl-fiche li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; transition: background .15s ease; }
.ecl-fiche li:hover { background: var(--telios-bg-alt); }
.ecl-fiche li > .telios-icone { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 10px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ecl-fiche li > span { display: flex; flex-direction: column; min-width: 0; }
.ecl-fiche small { font-size: .75rem; color: var(--telios-texte-attenue); }
.ecl-membre { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ecl-membre-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; font-size: .75rem;
  font-weight: 800; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.ecl-membre > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ecl-membre small { color: var(--telios-texte-attenue); overflow: hidden; text-overflow: ellipsis; }
.ecl-forfait { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ecl-forfait:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(var(--tblr-primary-rgb), .9);
  border-color: rgba(var(--tblr-primary-rgb), .45); }
.ecl-forfait-icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ecl-forfait-icone .telios-icone { width: 22px; height: 22px; }
.ecl-forfait-vedette { border-color: rgba(var(--tblr-primary-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--tblr-primary-rgb), .25); }
.ecl-forfait-vedette .ecl-forfait-icone { color: var(--telios-encre-sur-accent); background: var(--telios-accent); }

/* Comptes créés par l'administrateur de l'entreprise (comptes/utilisateurs.html) :
   accès en attente de première connexion, et le formulaire de création. */
.ecl-acces { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; font-weight: 600;
  color: var(--telios-texte-attenue); }
.ecl-acces .telios-icone { width: 14px; height: 14px; color: var(--telios-alerte); }
.ecl-acces-expire { color: var(--telios-danger); }
.ecl-acces-expire .telios-icone { color: var(--telios-danger); }
/* Rôle et langue : jamais tronqués (« Compta… »), la colonne du nom s'adapte. */
.ecl-choix { min-width: 9.5rem; }
.ecl-membre-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ecl-membre-actions .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.ecl-creation-corps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ecl-creation-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ecl-creation-aide { padding: 18px 20px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-bg-alt); }
.ecl-creation-aide h3 { margin: 0 0 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.ecl-creation-aide ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ecl-creation-aide li { display: flex; gap: 12px; font-size: .875rem; line-height: 1.5; animation: vi-entre .5s ease-out both; }
.ecl-creation-aide li:nth-child(2) { animation-delay: .1s; } .ecl-creation-aide li:nth-child(3) { animation-delay: .2s; }
.ecl-creation-aide li > span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px;
  font-size: .75rem; font-weight: 800; color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.ecl-creation-verrou { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding-top: 12px; font-size: .8125rem;
  color: var(--telios-texte-attenue); border-top: 1px dashed var(--telios-trait); }
.ecl-creation-verrou .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--telios-ok); }
.ecl-creation .card-footer .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 991.98px) { .ecl-creation-corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .ecl-creation-champs { grid-template-columns: minmax(0, 1fr); } }

/* Première connexion (comptes/premier_mdp.html) : la fenêtre que rien ne ferme
   tant que le mot de passe provisoire n'est pas remplacé. */
.mp-dialogue { width: min(520px, calc(100vw - 24px)); }
.mp-dialogue[open] { animation: vi-fenetre .45s cubic-bezier(.2, .8, .2, 1) both; }
.mp-dialogue::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(8px); }
.mp-tete { display: flex; flex-direction: column; align-items: center; padding: 34px 32px 6px; text-align: center; }
.mp-halo { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 18px;
  border-radius: 999px; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both, vi-pulse 3.2s ease-in-out 1s infinite; }
.mp-icone .telios-icone { width: 40px; height: 40px; }
.mp-cle { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 3px solid var(--telios-carte); border-radius: 999px; color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  animation: cf-sceau .55s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
.mp-cle .telios-icone { width: 16px; height: 16px; }
.mp-surtitre { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--telios-accent); }
.mp-titre { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; overflow-wrap: anywhere; }
.mp-texte { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--telios-texte-attenue); }
.mp-corps { gap: 14px; padding: 22px 32px 24px; }
.mp-champ .form-label { margin-bottom: 4px; font-weight: 600; }
.mp-saisie { position: relative; }
.mp-saisie .form-control { padding-right: 46px; }
.mp-voir { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--telios-rayon-petit); color: var(--telios-texte-attenue); background: transparent;
  transform: translateY(-50%); transition: color .15s ease, background .15s ease; }
.mp-saisie .is-invalid ~ .mp-voir { right: 30px; }
.mp-voir:hover, .mp-voir[aria-pressed="true"] { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.mp-voir:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.mp-voir .telios-icone { width: 18px; height: 18px; }
.mp-regles { display: grid; gap: 9px; margin: 2px 0 0; padding: 14px 16px; list-style: none; border-radius: var(--telios-rayon-grand);
  background: var(--telios-bg-alt); }
.mp-regles li { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--telios-texte-attenue);
  transition: color .2s ease; animation: vi-entre .45s ease-out both; }
.mp-regles li:nth-child(1) { animation-delay: .35s; } .mp-regles li:nth-child(2) { animation-delay: .45s; }
.mp-regles li:nth-child(3) { animation-delay: .55s; }
.mp-puce { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--telios-trait);
  border-radius: 999px; transition: background .2s ease, border-color .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.mp-puce .telios-icone { width: 12px; height: 12px; stroke-width: 3; opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.mp-regles .mp-ok { color: var(--telios-texte); }
.mp-ok .mp-puce { border-color: var(--telios-ok); color: var(--telios-carte); background: var(--telios-ok); transform: scale(1.08); }
.mp-ok .mp-puce .telios-icone { opacity: 1; transform: none; }
.mp-regles .mp-ko { color: var(--telios-danger); }
.mp-ko .mp-puce { border-color: var(--telios-danger); }
.mp-conseil { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.mp-conseil .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--telios-ok); }
.mp-pied { justify-content: space-between; align-items: center; }
.mp-pied form { margin: 0; }
.mp-sortir { padding-left: 0; color: var(--telios-texte-attenue); }
@media (max-width: 575.98px) {
  .mp-tete { padding: 28px 20px 4px; } .mp-corps { padding: 18px 20px 20px; }
  .mp-pied { flex-direction: column-reverse; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-dialogue[open], .mp-halo, .mp-cle, .mp-regles li, .ecl-creation-aide li { animation: none; }
  .mp-puce, .mp-puce .telios-icone, .mp-voir { transition: none; }
}

/* Page Entreprise de l'espace client (comptes/entreprise.html) : la carte
   d'identité et le formulaire en deux colonnes, sur un seul écran. */
.en-grille { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.en-grille > .card { margin: 0; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) both; }
.en-grille > .card + .card { animation-delay: .08s; }
.en-identite { display: flex; flex-direction: column; overflow: hidden; }
.en-identite-tete { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 20px 16px;
  text-align: center; border-bottom: 1px solid var(--telios-trait); background: rgba(var(--tblr-primary-rgb), .07); }
.en-monogramme { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 12px; border-radius: var(--telios-rayon-grand);
  font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 14px 30px -12px rgba(var(--tblr-primary-rgb), .8);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both, vi-pulse 3.6s ease-in-out 1.2s infinite; }
.en-nom { margin: 0 0 4px; font-size: 1.3rem; font-weight: 800; overflow-wrap: anywhere; }
.en-lieu { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .875rem; color: var(--telios-texte-attenue); }
.en-lieu .telios-icone { width: 15px; height: 15px; }
.en-sceau { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: .8125rem;
  font-weight: 700; border: 1px solid currentColor; animation: au-sceau .5s cubic-bezier(.3, 1.6, .5, 1) .45s both; }
.en-sceau-ok { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .1); }
.en-sceau-attente { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .1); }
.en-sceau-echec { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .08); }
.en-chiffres { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--telios-trait); }
.en-chiffre { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 12px 18px; }
.en-chiffre + .en-chiffre { border-left: 1px solid var(--telios-trait); }
.en-chiffre .telios-icone { grid-row: span 2; width: 34px; height: 34px; padding: 8px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.en-chiffre strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.en-chiffre small { font-size: .75rem; color: var(--telios-texte-attenue); }
.en-faits { display: grid; gap: 2px; margin: 0; padding: 8px 10px; list-style: none; }
.en-faits li { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--telios-rayon-petit);
  transition: background .15s ease; animation: sec-monte .45s ease-out both; }
.en-faits li:nth-child(1) { animation-delay: .2s; } .en-faits li:nth-child(2) { animation-delay: .27s; }
.en-faits li:nth-child(3) { animation-delay: .34s; } .en-faits li:nth-child(4) { animation-delay: .41s; }
.en-faits li:hover { background: var(--telios-bg-alt); }
.en-faits li > .telios-icone { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.en-faits li > span { display: flex; flex-direction: column; min-width: 0; }
.en-faits small { font-size: .72rem; color: var(--telios-texte-attenue); }
.en-faits strong { font-size: .9rem; overflow-wrap: anywhere; }
.en-code { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--telios-texte-attenue);
  border: 1px solid var(--telios-trait); }
.en-verrou { display: flex; gap: 10px; align-items: flex-start; margin: auto 0 0; padding: 12px 18px; font-size: .78rem; line-height: 1.5;
  color: var(--telios-texte-attenue); border-top: 1px solid var(--telios-trait); background: var(--telios-bg-alt); }
.en-verrou .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.en-formulaire { display: flex; flex-direction: column; }
.en-colonnes { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.en-section { padding: 14px 20px; }
.en-section + .en-section { border-left: 1px solid var(--telios-trait); }
.en-section-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.en-section-titre { margin-bottom: 10px; }
.en-section-titre .telios-icone { width: 26px; height: 26px; padding: 5px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.en-section-suite { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--telios-trait); }
.en-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.en-champ { min-width: 0; animation: sec-monte .4s ease-out both; }
.en-champs > .en-champ:nth-child(2) { animation-delay: .05s; } .en-champs > .en-champ:nth-child(3) { animation-delay: .1s; }
.en-champs > .en-champ:nth-child(4) { animation-delay: .15s; } .en-champs > .en-champ:nth-child(5) { animation-delay: .2s; }
.en-champs > .en-champ:nth-child(6) { animation-delay: .25s; }
.en-champ[hidden] { display: none; }
.en-large { grid-column: 1 / -1; }
.en-champ .form-label { margin-bottom: 3px; font-size: .84rem; font-weight: 600; }
.en-champ .form-control, .en-champ .form-select { padding-top: .4rem; padding-bottom: .4rem; }
.en-champ .form-hint { margin-top: 3px; font-size: .74rem; }
.en-case { display: flex; align-items: center; gap: 10px; min-height: 0; margin: 0; padding: 8px 12px 8px 38px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-petit); background: var(--telios-bg-alt); }
.en-case .form-check-label { font-size: .875rem; font-weight: 600; }
.en-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px;
  border-top: 1px solid var(--telios-trait); background: var(--telios-bg-alt); transition: box-shadow .25s ease; }
.en-etat span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; }
.en-etat .telios-icone { width: 16px; height: 16px; }
.en-etat-propre { color: var(--telios-texte-attenue); }
.en-etat-propre .telios-icone { color: var(--telios-ok); }
.en-etat-modifie { color: var(--telios-alerte); animation: nf-fondu-entree .25s ease-out; }
.en-etat-modifie .telios-icone { animation: vf-tourne 2.4s linear infinite; }
.en-boutons { display: flex; gap: 8px; }
.en-boutons .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.en-boutons [hidden] { display: none; }
/* Des modifications attendent : la barre s'éclaire, le bouton appelle. */
.en-formulaire.en-modifie .en-actions { box-shadow: inset 4px 0 0 var(--telios-alerte); }
.en-formulaire.en-modifie .en-boutons .btn-primary { animation: en-appel 2s ease-in-out infinite; }
@keyframes en-appel { 50% { box-shadow: 0 0 0 6px rgba(var(--tblr-primary-rgb), .22); } }
.en-faits-lecture { padding: 0; }
/* Écrans bas (portables 768 px) : la page tient encore sur l'écran. Les aides
   sous les champs passent en infobulle (title) : elles restent lisibles au survol. */
@media (min-width: 1200px) and (max-height: 860px) {
  .en-identite-tete { padding: 14px 18px 12px; }
  .en-monogramme { width: 52px; height: 52px; margin-bottom: 8px; font-size: 1.2rem; }
  .en-nom { font-size: 1.15rem; }
  .en-lieu { margin-bottom: 8px; }
  .en-chiffre { padding: 8px 16px; }
  .en-faits li { padding: 5px 10px; }
  .en-champ .form-hint { display: none; }
}
@media (max-width: 1199.98px) { .en-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
  .en-colonnes, .en-champs { grid-template-columns: minmax(0, 1fr); }
  .en-section + .en-section { border-left: 0; border-top: 1px solid var(--telios-trait); }
  .en-actions { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .en-grille > .card, .en-monogramme, .en-sceau, .en-faits li, .en-champ, .en-etat-modifie, .en-etat-modifie .telios-icone,
  .en-formulaire.en-modifie .en-boutons .btn-primary { animation: none; }
}

/* Pied de page : « Vérifier une attestation » ouvre la fenêtre (_verification.html). */
.telios-pied a[data-ouvrir-dialogue] { display: inline-flex; align-items: center; gap: 5px; }
.telios-pied a[data-ouvrir-dialogue] .telios-icone { width: 14px; height: 14px; transition: transform .2s ease; }
.telios-pied a[data-ouvrir-dialogue]:hover .telios-icone { transform: scale(1.18) rotate(-6deg); }
.telios-pied-admin { padding: 14px 24px 22px; border-top: 1px solid var(--telios-trait); }

/* La fenêtre « Vérifier une attestation », sur toutes les pages. */
.vg-dialogue { width: min(500px, calc(100vw - 24px)); }
.vg-dialogue[open] { animation: vi-fenetre .45s cubic-bezier(.2, .8, .2, 1) both; }
.vg-dialogue::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.vg-tete { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 30px 6px; text-align: center; }
.vg-fermer { position: absolute; top: 12px; right: 12px; }
.vg-fermer .telios-icone { width: 18px; height: 18px; }
.vg-embleme { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 16px;
  border-radius: 999px; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both; }
.vg-embleme > .telios-icone { position: relative; width: 38px; height: 38px; }
/* Deux ondes qui partent du sceau, comme un contrôle qui balaie le registre. */
.vg-onde { position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(var(--tblr-primary-rgb), .45);
  animation: ec-onde 2.6s ease-out infinite; }
.vg-onde + .vg-onde { animation-delay: 1.3s; }
.vg-coche { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 3px solid var(--telios-carte); border-radius: 999px; color: var(--telios-carte); background: var(--telios-ok);
  animation: cf-sceau .55s cubic-bezier(.3, 1.6, .5, 1) .5s both; }
.vg-coche .telios-icone { width: 14px; height: 14px; stroke-width: 3; }
.vg-surtitre { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--telios-accent); }
.vg-titre { margin: 0 0 8px; font-size: 1.45rem; font-weight: 800; }
.vg-texte { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--telios-texte-attenue); }
.vg-corps { gap: 14px; padding: 20px 30px 22px; }
.vg-numero { text-align: center; letter-spacing: .12em; font-weight: 700; }
.vg-option:has(.vg-camera[hidden]) { display: none; }
.vg-ou { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--telios-texte-attenue); }
.vg-ou::before, .vg-ou::after { content: ""; flex: 1; height: 1px; background: var(--telios-trait); }
.vg-camera { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  color: var(--telios-texte); border: 1px dashed rgba(var(--tblr-primary-rgb), .55); border-radius: var(--telios-rayon-grand);
  background: rgba(var(--tblr-primary-rgb), .05); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.vg-camera[hidden] { display: none; }
.vg-camera:hover { border-style: solid; border-color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); transform: translateY(-1px); }
.vg-camera:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.vg-camera-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.vg-camera-icone .telios-icone { width: 22px; height: 22px; }
.vg-camera-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vg-camera-texte strong { font-size: .92rem; }
.vg-camera-texte small { font-size: .78rem; color: var(--telios-texte-attenue); }
.vg-camera-fleche .telios-icone { width: 18px; height: 18px; color: var(--telios-accent); transition: transform .2s ease; }
.vg-camera:hover .vg-camera-fleche .telios-icone { transform: translateX(3px); }
.vg-garanties { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.vg-garanties li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .75rem;
  font-weight: 600; color: var(--telios-texte-attenue); background: var(--telios-bg-alt); animation: vi-entre .45s ease-out both; }
.vg-garanties li:nth-child(1) { animation-delay: .35s; } .vg-garanties li:nth-child(2) { animation-delay: .45s; }
.vg-garanties li:nth-child(3) { animation-delay: .55s; }
.vg-garanties .telios-icone { width: 13px; height: 13px; color: var(--telios-ok); }
.vg-dialogue .tb-dialogue-pied .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 575.98px) { .vg-tete { padding: 26px 20px 4px; } .vg-corps { padding: 16px 20px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .vg-dialogue[open], .vg-embleme, .vg-onde, .vg-coche, .vg-garanties li { animation: none; }
  .vg-onde { display: none; }
  .vg-camera, .vg-camera-fleche .telios-icone, .telios-pied a[data-ouvrir-dialogue] .telios-icone { transition: none; }
}

/* Solde bas (comptes/tableau.html) : un signal compact, à sa largeur, avec un
   halo qui pulse autour de la cloche. */
.ecl-signal { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0 0 18px;
  padding: 10px 12px 10px 10px; border: 1px solid rgba(var(--tblr-warning-rgb), .45); border-radius: 999px;
  background: rgba(var(--tblr-warning-rgb), .1); animation: ecl-signal-entree .55s cubic-bezier(.3, 1.4, .5, 1) both,
  ecl-signal-lueur 2.8s ease-in-out .8s infinite; }
.ecl-signal-halo { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px;
  color: var(--telios-carte); background: var(--telios-alerte); }
.ecl-signal-halo > .telios-icone { position: relative; width: 19px; height: 19px; animation: ecl-signal-cloche 2.8s ease-in-out .8s infinite;
  transform-origin: 50% 15%; }
.ecl-signal-onde { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--telios-alerte);
  animation: ec-onde 2.2s ease-out infinite; }
.ecl-signal-onde + .ecl-signal-onde { animation-delay: 1.1s; }
.ecl-signal-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ecl-signal-texte strong { font-size: .9rem; color: var(--telios-texte); }
.ecl-signal-texte span { font-size: .82rem; color: var(--telios-texte-attenue); }
.ecl-signal-action { margin-left: 6px; border-radius: 999px; font-weight: 700; }
.ecl-signal-action .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
@keyframes ecl-signal-entree { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes ecl-signal-lueur { 50% { box-shadow: 0 0 0 6px rgba(var(--tblr-warning-rgb), .14), 0 10px 30px -12px rgba(var(--tblr-warning-rgb), .8); } }
@keyframes ecl-signal-cloche { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); }
  88% { transform: rotate(8deg); } 94% { transform: rotate(-4deg); } }
@media (max-width: 575.98px) { .ecl-signal { width: 100%; border-radius: var(--telios-rayon-grand); } }
@media (prefers-reduced-motion: reduce) {
  .ecl-signal, .ecl-signal-halo > .telios-icone { animation: none; }
  .ecl-signal-onde { display: none; }
}

/* Acheter des tokens (paiements/acheter.html) : un seul écran. */
.ac-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.ac-infos { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ac-info { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: .84rem;
  color: var(--telios-texte); border: 1px solid rgba(var(--tblr-primary-rgb), .3); background: rgba(var(--tblr-primary-rgb), .07);
  animation: vi-entre .45s ease-out both; }
.ac-info .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-accent); }
.ac-info-alerte { border-color: rgba(var(--tblr-warning-rgb), .45); background: rgba(var(--tblr-warning-rgb), .1); }
.ac-info-alerte .telios-icone { color: var(--telios-alerte); }
.ac-info-ok { border-color: rgba(var(--tblr-success-rgb), .45); background: rgba(var(--tblr-success-rgb), .1); }
.ac-info-ok .telios-icone { color: var(--telios-ok); }
.ac-promo { position: relative; display: flex; align-items: center; gap: 8px; width: min(380px, 100%); padding: 5px 5px 5px 14px;
  border: 1px solid var(--telios-trait); border-radius: 999px; background: var(--telios-carte);
  transition: border-color .2s ease, box-shadow .2s ease; animation: vi-entre .45s ease-out .05s both; }
.ac-promo:focus-within { border-color: var(--telios-accent); box-shadow: 0 0 0 4px rgba(var(--tblr-primary-rgb), .15); }
.ac-promo > .telios-icone { flex: none; width: 17px; height: 17px; color: var(--telios-accent); }
.ac-promo-champ { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--telios-texte); background: transparent; }
.ac-promo-champ::placeholder { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--telios-texte-attenue); }
.ac-promo-bouton { border-radius: 999px; }
.ac-promo-refus { border-color: var(--telios-danger); animation: ac-secoue .4s ease-out; }
.ac-promo-ok { border-color: var(--telios-ok); }
.ac-promo-message { position: absolute; top: calc(100% + 4px); right: 12px; margin: 0; font-size: .78rem; color: var(--telios-danger); }
@keyframes ac-secoue { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.ac-forfaits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ac-forfait { position: relative; display: flex; flex-direction: column; margin: 0; overflow: hidden;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
  animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) both; }
.ac-forfait:nth-child(2) { animation-delay: .06s; } .ac-forfait:nth-child(3) { animation-delay: .12s; }
.ac-forfait:nth-child(4) { animation-delay: .18s; } .ac-forfait:nth-child(5) { animation-delay: .24s; }
.ac-forfait:nth-child(n+6) { animation-delay: .3s; }
.ac-forfait:hover { transform: translateY(-4px); border-color: rgba(var(--tblr-primary-rgb), .5);
  box-shadow: 0 22px 44px -24px rgba(var(--tblr-primary-rgb), .9); }
.ac-corps { flex: 1; padding: 18px 18px 12px; }
.ac-icone { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ac-icone .telios-icone { width: 21px; height: 21px; }
.ac-forfait:hover .ac-icone { transform: rotate(-8deg) scale(1.08); }
.ac-nom { margin: 0 0 6px; font-size: .95rem; font-weight: 700; }
.ac-barre { display: block; font-size: .8rem; color: var(--telios-texte-attenue); }
.ac-prix { margin: 0; font-size: clamp(1.25rem, 1.55vw, 1.65rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.ac-prix small { font-size: .78rem; font-weight: 600; color: var(--telios-texte-attenue); }
.ac-detail { margin: 2px 0 10px; font-size: .78rem; color: var(--telios-texte-attenue); }
.ac-unitaire { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .8rem; color: var(--telios-texte);
  background: var(--telios-bg-alt); }
.ac-offert { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: var(--telios-ok); }
.ac-offert .telios-icone { width: 14px; height: 14px; }
.ac-refus { margin: 8px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
.ac-action { padding: 12px 18px 16px; }
.ac-action form { margin: 0; }
.ac-bouton { width: 100%; }
.ac-bouton .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
/* Le meilleur prix au token : bordure qui respire et ruban. */
.ac-vedette { border-color: var(--telios-accent); animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) both,
  ac-respire 3s ease-in-out 1s infinite; }
.ac-vedette .ac-icone { color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.ac-ruban { position: absolute; top: 14px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 76px);
  padding: 4px 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 6px 16px -8px rgba(var(--tblr-primary-rgb), .9);
  animation: au-sceau .5s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
.ac-ruban .telios-icone { flex: none; width: 12px; height: 12px; }
@keyframes ac-respire { 50% { box-shadow: 0 0 0 4px rgba(var(--tblr-primary-rgb), .18), 0 18px 40px -22px rgba(var(--tblr-primary-rgb), .9); } }

.ac-devis { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr) auto; align-items: center; gap: 18px 24px;
  margin: 0; padding: 16px 20px; animation: vi-entre .5s ease-out .3s both; }
.ac-devis-intro { display: flex; gap: 14px; align-items: flex-start; }
.ac-devis-icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ac-devis-icone .telios-icone { width: 22px; height: 22px; }
.ac-devis-titre { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.ac-devis-texte { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--telios-texte-attenue); }
.ac-devis-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 14px; }
.ac-devis-champs .en-champ { animation: none; }
.ac-devis-champs textarea { resize: vertical; min-height: 0; }
.ac-devis-envoi .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
/* Préremplie depuis un forfait : le formulaire s'éclaire un instant. */
.ac-devis-eclaire { animation: ac-eclaire 1.2s ease-out; }
@keyframes ac-eclaire { 0% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .55); border-color: var(--telios-accent); }
  100% { box-shadow: 0 0 0 14px rgba(var(--tblr-primary-rgb), 0); } }

@media (max-width: 1199.98px) { .ac-forfaits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Écrans bas (portables 768 px) : cartes et formulaire resserrés. */
@media (min-width: 1200px) and (max-height: 860px) {
  .ac-haut { margin-bottom: 12px; }
  .ac-corps { padding: 14px 14px 8px; }
  .ac-icone { width: 34px; height: 34px; margin-bottom: 8px; }
  .ac-icone .telios-icone { width: 18px; height: 18px; }
  .ac-detail { margin-bottom: 6px; }
  .ac-action { padding: 8px 14px 12px; }
  .ac-forfaits { margin-bottom: 12px; }
  .ac-devis { padding: 12px 16px; }
  .ac-devis-texte { display: none; }
}
@media (min-width: 1200px) and (max-width: 1499.98px) { .ac-ruban span, .ac-ruban { font-size: .6rem; } .ac-corps, .ac-action { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 1199.98px) { .ac-devis { grid-template-columns: minmax(0, 1fr); } .ac-devis-envoi { justify-self: end; } }
@media (min-width: 1200px) and (max-width: 1499.98px) { .ac-devis { grid-template-columns: minmax(170px, .55fr) minmax(0, 2fr) auto; gap: 14px 18px; } }
@media (max-width: 767.98px) {
  .ac-forfaits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-devis-champs { grid-template-columns: minmax(0, 1fr); }
  .ac-promo { width: 100%; }
}
@media (max-width: 479.98px) { .ac-forfaits { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .ac-info, .ac-promo, .ac-forfait, .ac-vedette, .ac-devis, .ac-promo-refus, .ac-devis-eclaire { animation: none; }
  .ac-forfait, .ac-icone { transition: none; }
}

/* Confirmation d'une demande de devis (paiements/acheter.html, #dialogue-devis). */
.dc-dialogue { width: min(640px, calc(100vw - 24px)); }
.dc-dialogue[open] { animation: vi-fenetre .45s cubic-bezier(.2, .8, .2, 1) both; }
.dc-dialogue::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.dc-tete { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 30px 4px; text-align: center; }
.dc-fermer { position: absolute; top: 12px; right: 12px; }
.dc-fermer .telios-icone { width: 18px; height: 18px; }
.dc-embleme { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 12px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both, vi-pulse 3.4s ease-in-out 1s infinite; }
.dc-embleme > .telios-icone { width: 34px; height: 34px; }
/* L'avion en papier tourne autour du document : la demande s'apprête à partir. */
.dc-avion { position: absolute; inset: -6px; animation: dc-orbite 3.2s linear infinite; }
.dc-avion .telios-icone { position: absolute; top: 0; left: 50%; width: 22px; height: 22px; padding: 4px; margin-left: -11px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 4px 10px -2px rgba(var(--tblr-primary-rgb), .7); }
@keyframes dc-orbite { to { transform: rotate(360deg); } }
.dc-surtitre { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--telios-accent); }
.dc-titre { margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; }
.dc-texte { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--telios-texte-attenue); }
.dc-corps { gap: 14px; padding: 18px 26px 20px; }
.dc-recap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 12px; }
.dc-prix { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 16px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); animation: vi-entre .45s ease-out .2s both; }
.dc-prix small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.dc-prix strong { font-size: 1.55rem; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.dc-ht { font-size: .8rem; font-weight: 600; opacity: .85; }
.dc-prix-detail { font-size: .8rem; opacity: .9; }
.dc-prix-detail [hidden] { display: none; }
.dc-foi { margin-top: 6px; font-size: .72rem; opacity: .8; }
.dc-faits { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
.dc-faits li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; animation: sec-monte .4s ease-out both; }
.dc-faits li:nth-child(1) { animation-delay: .25s; } .dc-faits li:nth-child(2) { animation-delay: .32s; }
.dc-faits li:nth-child(3) { animation-delay: .39s; }
.dc-faits li > .telios-icone { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.dc-faits li > span { display: flex; flex-direction: column; min-width: 0; }
.dc-faits small { font-size: .68rem; color: var(--telios-texte-attenue); }
.dc-faits strong { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-faits em { font-style: normal; font-size: .75rem; color: var(--telios-texte-attenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.dc-champs .form-label { margin-bottom: 4px; font-size: .84rem; font-weight: 600; }
.dc-champs { align-items: end; }
.dc-champs .form-control { height: 40px; }
.dc-champs textarea.form-control { min-height: 40px; resize: vertical; }
.dc-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.dc-etapes li { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: var(--telios-texte-attenue);
  animation: vi-entre .45s ease-out both; }
.dc-etapes li:nth-child(1) { animation-delay: .45s; } .dc-etapes li:nth-child(2) { animation-delay: .55s; }
.dc-etapes li:nth-child(3) { animation-delay: .65s; }
.dc-etapes span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-size: .72rem;
  font-weight: 800; color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.dc-dialogue .tb-dialogue-pied .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
@media (max-width: 639.98px) { .dc-recap, .dc-champs, .dc-etapes { grid-template-columns: minmax(0, 1fr); } .dc-corps { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .dc-dialogue[open], .dc-embleme, .dc-avion, .dc-prix, .dc-faits li, .dc-etapes li { animation: none; }
}

/* Essais offerts, un compteur par onglet de TELIOS (fiche client de
   l'administration et tableau de bord du client). */
.essais-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.essais-modules li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .78rem; color: var(--telios-texte-attenue);
  animation: sec-monte .4s ease-out both; }
.essais-modules li:nth-child(2) { animation-delay: .05s; } .essais-modules li:nth-child(3) { animation-delay: .1s; }
.essais-modules li:nth-child(4) { animation-delay: .15s; }
.essais-modules li > .telios-icone { flex: none; width: 14px; height: 14px; color: var(--telios-ok); }
.essais-modules span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.essais-modules strong { margin-left: auto; font-size: .95rem; font-weight: 800; color: var(--telios-texte); }
.essais-modules .essais-vide, .essais-modules .essais-vide strong { color: var(--telios-texte-attenue); opacity: .7; }
.essais-modules .essais-vide > .telios-icone { color: var(--telios-texte-attenue); }
.fiche-solde-essais > div, .ecl-tuile-essais > div { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .essais-modules li { animation: none; } }
/* Dans l'espace client, la tuile est étroite : un module par ligne, sans troncature. */
.ecl-tuile-essais .essais-modules { grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 4px; }
.ecl-tuile-essais .essais-modules li { font-size: .76rem; }
.ecl-tuile-essais .essais-modules strong { font-size: .85rem; }

/* ── Attribuer des tokens (administration/attribuer.html) ─────────────────
   Une page qui tient dans l'écran : le bénéficiaire en tête, l'atelier (un
   geste à la fois, en onglets) et, à droite, ce qui existe déjà. Les champs
   ont la largeur de ce qu'ils reçoivent : une quantité tient en 170 px, un
   montant en 200, seul le motif s'étire. L'état de repos de chaque animation
   est l'état final : prefers-reduced-motion les coupe sans rien cacher. */
.telios-contenu:has(.at-grille) { padding-bottom: 16px; }
.at-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; max-width: 1360px; }
.at-grille-choix { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); max-width: 1180px; }

/* Le bénéficiaire : monogramme, identité, soldes en tuiles. Un reflet le
   traverse une fois à l'arrivée. */
.at-beneficiaire { position: relative; max-width: 1360px; margin-bottom: 16px; overflow: hidden; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) both; }
.at-beneficiaire::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 35%, rgba(var(--tblr-primary-rgb), .10) 50%, transparent 65%);
  animation: at-reflet 1.6s ease-out .5s both; }
@keyframes at-reflet { to { transform: translateX(100%); } }
.at-beneficiaire .tb-beneficiaire { display: grid; grid-template-columns: auto minmax(200px, 270px) minmax(0, 1fr); gap: 14px 22px;
  align-items: center; padding: 16px 20px; background: radial-gradient(120% 160% at 0 0, rgba(var(--tblr-primary-rgb), .10), transparent 55%); }
.at-monogramme { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--telios-rayon-grand); font-size: 1.15rem;
  font-weight: 800; letter-spacing: .04em; color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 14px 30px -12px rgba(var(--tblr-primary-rgb), .8);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both, vi-pulse 3.6s ease-in-out 1.2s infinite; }
.at-identite { min-width: 0; }
.at-nom { margin: 1px 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.at-nom a { color: var(--telios-texte); text-decoration: none; }
.at-nom a:hover { color: var(--telios-accent); }
.at-identifiant { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 3px 0 0; font-size: .8rem; color: var(--telios-texte-attenue); }
.at-identifiant .en-sceau { padding: 2px 9px 2px 6px; font-size: .72rem; }
.at-identifiant .en-sceau svg { width: 13px; height: 13px; }
.at-soldes.tb-soldes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.at-solde { min-width: 0; padding: 8px 12px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); animation: sec-monte .45s ease-out both; }
.at-solde:nth-child(2) { animation-delay: .06s; } .at-solde:nth-child(3) { animation-delay: .12s; }
.at-solde:nth-child(4) { animation-delay: .18s; } .at-solde:nth-child(5) { animation-delay: .24s; }
.at-soldes dt { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: .72rem; font-weight: 600; white-space: nowrap;
  text-overflow: ellipsis; color: var(--telios-texte-attenue); }
.at-soldes dt .telios-icone { flex: none; width: 14px; height: 14px; color: var(--telios-accent); }
.at-soldes dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 800; line-height: 1.15; }
.at-soldes dd small { font-size: .7rem; font-weight: 600; color: var(--telios-texte-attenue); }
.at-soldes .tb-soldes-illimite { font-size: .95rem; }
.at-solde-tokens { border-color: rgba(var(--tblr-primary-rgb), .35); background: rgba(var(--tblr-primary-rgb), .07); }
.at-solde-vide dd { color: var(--telios-texte-attenue); }
.at-beneficiaire .tb-soldes-note { margin: 8px 0 0; font-size: .76rem; }
.at-changer { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.at-changer .telios-icone { width: 13px; height: 13px; transition: transform .4s; }
.at-changer:hover .telios-icone { transform: rotate(-180deg); }

/* L'atelier : deux onglets, un formulaire visible à la fois. */
.at-atelier { margin: 0; overflow: hidden; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) .08s both; }
.at-atelier-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 18px;
  border-bottom: 1px solid var(--telios-trait); background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), .06), transparent); }
.at-journal { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .76rem; color: var(--telios-texte-attenue); }
.at-journal .telios-icone { width: 14px; height: 14px; }
.at-alerte { display: flex; align-items: flex-start; gap: 10px; margin: 12px 20px 0; padding: 6px 12px; font-size: .78rem; line-height: 1.45;
  color: var(--telios-alerte); border: 1px solid rgba(var(--tblr-warning-rgb), .35); border-radius: var(--telios-rayon-petit);
  background: rgba(var(--tblr-warning-rgb), .08); }
.at-alerte .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.at-panneau-geste { display: grid; gap: 12px; padding: 12px 20px 0; animation: at-volet .35s cubic-bezier(.2, .8, .2, 1); }
.at-panneau-geste[hidden] { display: none; }
@keyframes at-volet { from { opacity: 0; transform: translateX(14px); } }
.at-panneau-geste fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.at-panneau-geste legend { float: none; margin-bottom: 4px; font-size: .84rem; font-weight: 600; }
.at-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; }
.at-quantite { width: 170px; }
.at-champ { min-width: 0; animation: sec-monte .4s ease-out both; }
.at-champ .form-label { margin-bottom: 4px; font-size: .84rem; font-weight: 600; }
.at-champ .form-hint { margin-top: 3px; font-size: .74rem; }
.at-champs { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 12px 18px; align-items: start; }
.at-champs > :nth-child(2) { animation-delay: .05s; } .at-champs > :nth-child(3) { animation-delay: .1s; }
.at-champs-dates { grid-template-columns: minmax(0, 175px) minmax(0, 175px) minmax(0, 1fr); }
.at-suffixe .input-group-text { font-weight: 700; color: var(--telios-texte-attenue); }
.at-inactif { opacity: .45; transition: opacity .25s; }
.at-interrupteur { padding-top: 28px; }
.at-interrupteur .form-check { margin: 0; }
.at-interrupteur .form-check-label { font-size: .875rem; font-weight: 600; }
/* « Prévenir le client » : la même grille que les champs au-dessus, la case à
   gauche, le message à droite. Un filet le sépare du geste : ce qui suit ne
   change rien au compte, seulement à ce que le client en apprend. */
.at-avis { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 10px 18px; align-items: start;
  padding-top: 12px; border-top: 1px dashed var(--telios-trait); animation: sec-monte .4s ease-out .12s both; }
.at-avis-case { padding-top: 24px; }
.at-avis-case .form-check-label { font-size: .875rem; font-weight: 600; }
.at-avis-aide { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; color: var(--telios-texte-attenue); font-size: .74rem; line-height: 1.4; }
.at-avis-aide .telios-icone { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--telios-accent); }
.at-avis-message textarea { min-height: 0; resize: vertical; }
/* Dans les panneaux : le message en troisième colonne, la case dans la barre du bas. */
.at-champs-trois { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 1fr); }
.at-avis-message .form-control { height: 2.5rem; }
.at-pied .at-avis-case { padding-top: 0; }
.tb-dialogue .at-avis { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
.tb-dialogue .at-avis-case { padding-top: 0; }

/* Créditer / Débiter : un interrupteur à curseur glissant. */
.at-segment { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--telios-trait);
  border-radius: 999px; background: var(--telios-bg-alt); }
.at-segment::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--telios-carte); box-shadow: 0 0 0 1px rgba(var(--tblr-success-rgb), .45), 0 6px 16px -8px rgba(var(--tblr-success-rgb), .9);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s; }
.at-segment:has(input[value="debit"]:checked)::before { transform: translateX(100%);
  box-shadow: 0 0 0 1px rgba(var(--tblr-warning-rgb), .55), 0 6px 16px -8px rgba(var(--tblr-warning-rgb), .9); }
.at-segment input, .at-puces input { position: absolute; opacity: 0; pointer-events: none; }
.at-segment label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px;
  padding: 0 16px; border-radius: 999px; font-size: .875rem; font-weight: 600; white-space: nowrap; color: var(--telios-texte-attenue);
  cursor: pointer; transition: color .25s; }
.at-segment label .telios-icone { width: 15px; height: 15px; }
.at-segment input:checked + .at-segment-credit { color: var(--telios-ok); }
.at-segment input:checked + .at-segment-debit { color: var(--telios-alerte); }
.at-segment input:focus-visible + label, .at-puces input:focus-visible + .at-puce { outline: 2px solid var(--telios-accent); outline-offset: 2px; }

/* Le compteur : cinq tuiles, une par compteur, la choisie s'allume. */
.at-puces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.at-puce { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; margin: 0; padding: 8px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-carte); text-align: center;
  cursor: pointer; transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.3, 1.4, .5, 1);
  animation: sec-monte .4s ease-out both; }
.at-puces .at-puce:nth-of-type(2) { animation-delay: .05s; } .at-puces .at-puce:nth-of-type(3) { animation-delay: .1s; }
.at-puces .at-puce:nth-of-type(4) { animation-delay: .15s; } .at-puces .at-puce:nth-of-type(5) { animation-delay: .2s; }
.at-puce:hover { transform: translateY(-2px); border-color: rgba(var(--tblr-primary-rgb), .45); }
.at-puce > .telios-icone { width: 30px; height: 30px; padding: 6px; border-radius: var(--telios-rayon-petit); color: var(--telios-accent);
  background: rgba(var(--tblr-primary-rgb), .1); transition: color .25s, background .25s; }
.at-puce > span { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.at-puce strong { overflow: hidden; font-size: .82rem; white-space: nowrap; text-overflow: ellipsis; }
.at-puce small { overflow: hidden; font-size: .7rem; white-space: nowrap; text-overflow: ellipsis; color: var(--telios-texte-attenue); }
.at-puces input:checked + .at-puce { border-color: var(--telios-accent); transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15), 0 12px 26px -14px rgba(var(--tblr-primary-rgb), .8); }
.at-puces input:checked + .at-puce > .telios-icone { color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.at-puces input:checked + .at-puce::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--telios-accent); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .2); animation: au-sceau .4s cubic-bezier(.3, 1.6, .5, 1) both; }

/* Le pied : l'aperçu du résultat et le bouton, qui s'éclaire quand tout est prêt. */
.at-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 -20px; padding: 10px 20px;
  border-top: 1px solid var(--telios-trait); background: var(--telios-bg-alt); }
.at-envoyer { margin-left: auto; }
.at-envoyer .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.at-envoyer.at-pret { animation: en-appel 2s ease-in-out infinite; }
.at-projection { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: .82rem;
  color: var(--telios-texte-attenue); animation: nf-fondu-entree .3s ease-out; }
.at-projection[hidden] { display: none; }
.at-projection strong { display: inline-block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--telios-accent); }
.at-projection small { font-size: .74rem; font-weight: 600; color: var(--telios-danger); }
.at-projection-negatif strong { color: var(--telios-danger); }
.at-rebond { animation: at-rebond .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes at-rebond { from { opacity: .3; transform: scale(.8); } }
.at-intro { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--telios-texte-attenue); }
.at-intro .telios-icone { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .1); }

/* La colonne : abonnements de l'entreprise et échéances de tous. */
.at-cote { display: grid; gap: 16px; }
.at-panneau { margin: 0; overflow: hidden; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) .16s both; }
.at-cote > .at-panneau + .at-panneau, .at-grille-choix > .at-panneau { animation-delay: .24s; }
.at-panneau-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--telios-trait); }
.at-panneau-titre { margin: 0; font-size: .92rem; font-weight: 700; }
.at-pastille { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.at-pastille .telios-icone { width: 18px; height: 18px; }
.at-pastille-danger { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.at-compte { min-width: 22px; margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-align: center;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.tb-onglet .at-compte { margin-left: 2px; }
.at-onglets-mini { display: flex; width: 100%; }
.at-onglets-mini .tb-onglet { flex: 1; justify-content: center; min-height: 30px; padding: 0 10px; font-size: .8rem; }
.at-abonnements { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; }
.at-abonnement { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 7px 8px 7px 10px; border-radius: var(--telios-rayon-petit);
  animation: sec-monte .4s ease-out both; transition: background .2s; }
.at-abonnement:nth-child(2) { animation-delay: .06s; } .at-abonnement:nth-child(3) { animation-delay: .12s; }
.at-abonnement:hover { background: var(--telios-bg-alt); }
.at-abonnement p { margin: 0; }
.at-abonnement-pastille { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--telios-texte-attenue);
  background: var(--telios-bg-alt); }
.at-abonnement-pastille .telios-icone { width: 16px; height: 16px; }
.at-etat-en_cours .at-abonnement-pastille { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); animation: at-signal 2.4s ease-in-out infinite; }
@keyframes at-signal { 50% { box-shadow: 0 0 0 6px rgba(var(--tblr-success-rgb), .12); } }
.at-etat-a_venir .at-abonnement-pastille { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.at-abonnement-texte { min-width: 0; }
.at-abonnement-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84rem; }
.at-badge { margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.at-etat-en_cours .at-badge { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.at-etat-a_venir .at-badge { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.at-etat-revoque .at-badge { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.at-abonnement-motif { overflow: hidden; font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.at-abonnement-detail { overflow: hidden; font-size: .72rem; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; color: var(--telios-texte-attenue); }
.at-gestes { display: flex; gap: 2px; }
.at-gestes .btn .telios-icone, .at-voir-tout .telios-icone { width: 14px; height: 14px; }
.at-gestes .btn { width: 30px; height: 30px; padding: 0; }
.at-voir-tout { margin: 0 12px 10px; }
.at-voir-tout .telios-icone { margin-left: 6px; }
.at-gestes [hidden], .at-voir-tout[hidden] { display: none; }
.at-echeances-liste { display: grid; gap: 1px; margin: 0; padding: 6px; list-style: none; }
.at-echeances-liste a, .at-candidates a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--telios-rayon-petit); color: var(--telios-texte); text-decoration: none;
  transition: background .2s, transform .2s; }
.at-echeances-liste a:hover, .at-candidates a:hover { background: var(--telios-bg-alt); transform: translateX(3px); }
.at-echeances-liste li, .at-candidates li { animation: sec-monte .4s ease-out both; }
.at-echeances-liste li:nth-child(2), .at-candidates li:nth-child(2) { animation-delay: .05s; }
.at-echeances-liste li:nth-child(3), .at-candidates li:nth-child(3) { animation-delay: .1s; }
.at-echeances-liste li:nth-child(4), .at-candidates li:nth-child(4) { animation-delay: .15s; }
.at-echeances-liste li:nth-child(5), .at-candidates li:nth-child(5) { animation-delay: .2s; }
.at-echeances-liste strong { overflow: hidden; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.at-date { font-size: .74rem; white-space: nowrap; color: var(--telios-texte-attenue); }
.at-date-proche { font-weight: 700; color: var(--telios-alerte); }
.at-monogramme-mini { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--telios-rayon-petit); font-size: .66rem;
  font-weight: 800; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.at-vide { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; font-size: .82rem; color: var(--telios-texte-attenue); }
.at-vide .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-ok); }
.at-echeances-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 12px 16px 18px; }

/* Choisir le bénéficiaire. Pas d'overflow masqué : la liste des suggestions
   déborde de la carte. */
.at-choix { margin: 0; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) both; }
.at-choix-tete { display: flex; align-items: center; gap: 16px; padding: 22px 24px 6px; }
.at-embleme { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 14px 30px -12px rgba(var(--tblr-primary-rgb), .8);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .1s both, vi-pulse 3.6s ease-in-out 1.2s infinite; }
.at-embleme .telios-icone { width: 26px; height: 26px; }
.at-titre { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; }
.at-choix-corps { padding: 14px 24px 22px; }
.at-recherche { display: flex; gap: 8px; }
.at-recherche .telios-autocompletion { flex: 1; }
.at-recherche .form-control { height: 44px; font-size: 1rem; }
.at-recherche .btn { height: 44px; }
.at-candidates { display: grid; gap: 1px; margin: 12px 0 0; padding: 0; list-style: none; }
.at-candidates a > span:not(.at-monogramme-mini) { display: flex; flex-direction: column; min-width: 0; }
.at-candidates small { font-size: .74rem; color: var(--telios-texte-attenue); }
.at-candidates a > .telios-icone { width: 16px; height: 16px; color: var(--telios-texte-attenue); }

/* Les fenêtres des gestes. */
.at-dialogue-etroit { width: min(540px, calc(100vw - 24px)); }
.at-dialogue-large { width: min(1080px, calc(100vw - 24px)); }
.at-abonnements-tous { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 18px; overflow-y: auto; }
.at-consequences { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.at-consequences li { display: flex; align-items: flex-start; gap: 10px; }
.at-consequences .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--telios-ok); }

/* Grand écran (1600 px et plus) : la page prend toute la largeur et respire.
   L'espace gagné en largeur paie l'air en hauteur : les tuiles de compteur se
   couchent (icône à gauche), ce qui rend la place des marges plus larges. La
   page tient toujours sans défilement à 1900 × 900. */
@media (min-width: 1600px) {
  .at-grille, .at-beneficiaire { max-width: none; }
  .at-grille { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 22px; }
  .at-beneficiaire { margin-bottom: 18px; }
  .at-beneficiaire .tb-beneficiaire { grid-template-columns: auto minmax(240px, 320px) minmax(0, 1fr); gap: 16px 32px; padding: 15px 28px; }
  .at-monogramme { width: 60px; height: 60px; font-size: 1.3rem; }
  .at-nom { font-size: 1.3rem; }
  .at-soldes.tb-soldes { gap: 12px; }
  .at-solde { padding: 10px 16px; }
  .at-soldes dt { font-size: .76rem; }
  .at-soldes dd { font-size: 1.45rem; }
  .at-atelier-tete { padding: 12px 26px; }
  .at-alerte { margin: 14px 28px 0; }
  .at-panneau-geste { gap: 16px; padding: 18px 28px 0; }
  .at-ligne { gap: 16px 32px; }
  .at-quantite { width: 200px; }
  .at-segment label { height: 38px; padding: 0 22px; }
  .at-puces { gap: 12px; }
  .at-puce { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 16px; text-align: left; }
  .at-puce > .telios-icone { flex: none; width: 36px; height: 36px; padding: 8px; }
  .at-puce strong { font-size: .875rem; }
  .at-puce small { font-size: .74rem; }
  .at-champs { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 14px 32px; }
  .at-champs-dates { grid-template-columns: minmax(0, 210px) minmax(0, 210px) minmax(0, 1fr); }
  .at-avis { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px 32px; padding-top: 14px; }
  .at-champs-trois { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; }
  .at-pied .at-avis-case { padding-top: 0; }
  .tb-dialogue .at-avis { grid-template-columns: minmax(0, 1fr); }
  .at-avis-case { padding-top: 28px; }
  .tb-dialogue .at-avis-case { padding-top: 0; }
  .at-champ .form-label, .at-panneau-geste legend { margin-bottom: 6px; }
  .at-pied { margin: 4px -28px 0; padding: 12px 28px; }
  .at-cote { gap: 22px; }
  .at-panneau-tete { padding: 14px 20px; }
  .at-abonnements, .at-echeances-liste { padding: 8px 10px; }
  .at-abonnement { padding: 10px 12px; }
  .at-echeances-liste a { padding: 9px 12px; }
  .at-vide { padding: 18px 20px; }
}
@media (max-width: 1279.98px) {
  .at-beneficiaire .tb-beneficiaire { grid-template-columns: auto minmax(0, 1fr); }
  .at-beneficiaire .tb-soldes-cadre { grid-column: 1 / -1; }
}
@media (max-width: 1099.98px) {
  .at-grille, .at-grille-choix { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719.98px) {
  .at-soldes.tb-soldes, .at-puces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-champs, .at-champs-dates, .at-champs-trois, .at-echeances-colonnes, .at-abonnements-tous { grid-template-columns: minmax(0, 1fr); }
  .at-interrupteur, .at-avis-case { padding-top: 0; }
  .at-avis { grid-template-columns: minmax(0, 1fr); }
}

/* Fiche client : le tutoriel d'installation est-il parvenu au client ? */
.fiche-tutoriel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; padding: 10px 12px; font-size: .84rem;
  border-radius: var(--telios-rayon-petit); }
.fiche-tutoriel > .telios-icone { flex: none; width: 18px; height: 18px; }
.fiche-tutoriel > span { flex: 1 1 260px; }
.fiche-tutoriel .btn .telios-icone { width: 14px; height: 14px; margin-right: 6px; }
.fiche-tutoriel-manque { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .1); border: 1px solid rgba(var(--tblr-warning-rgb), .35); }

/* ── Installer TELIOS (administration/installer_telios.html) ──────────────
   Un en-tête sombre aux couleurs de la marque, un dégradé qui dérive
   lentement, la version qui défile, la ligne qui se tape, les étapes qui
   montent au défilement. Couleurs : jetons du thème seulement (les tons
   transparents par color-mix). L'état de repos est l'état final :
   prefers-reduced-motion coupe tout sans rien cacher. */
/* Toujours sur fond sombre, quel que soit le thème : en sombre, les couleurs
   du rail ; en clair, l'encre du thème sert de fond et son fond d'encre. Les
   jetons du thème étant posés sur html, on ne peut pas y forcer le sombre
   pour un seul bloc : d'où ces quatre variables locales. */
.it-heros, .it-console, .it-etape-commande { --it-fond: var(--telios-rail); --it-encre: var(--telios-rail-texte);
  --it-attenue: var(--telios-rail-texte-attenue); --it-marque: var(--telios-rail-marque);
  --it-ok: var(--telios-ok); --it-alerte: var(--telios-alerte); }
html[data-bs-theme=light] :is(.it-heros, .it-console, .it-etape-commande) { --it-fond: var(--telios-texte); --it-encre: var(--telios-bg);
  --it-attenue: color-mix(in srgb, var(--telios-bg) 74%, transparent);
  --it-marque: color-mix(in srgb, var(--telios-marque) 70%, var(--telios-bg));
  --it-ok: color-mix(in srgb, var(--telios-ok) 45%, var(--telios-bg)); --it-alerte: color-mix(in srgb, var(--telios-alerte) 45%, var(--telios-bg)); }
.it-heros { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 24px; align-items: center;
  max-width: 1240px; margin-bottom: 20px; padding: 30px 32px; overflow: hidden; border-radius: var(--telios-rayon-grand);
  color: var(--it-encre);
  background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--telios-marque) 38%, transparent), transparent 60%),
              radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--telios-accent) 22%, transparent), transparent 60%),
              var(--it-fond);
  background-size: 160% 160%, 160% 160%, auto;
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--telios-marque) 70%, transparent);
  animation: vi-entre .55s cubic-bezier(.2, .8, .2, 1) both, it-derive 18s ease-in-out infinite alternate; }
@keyframes it-derive { to { background-position: 60% 40%, 40% 60%, 0 0; } }
.it-heros::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(color-mix(in srgb, var(--it-encre) 7%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--it-encre) 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, black 40%, transparent); }
.it-heros > * { position: relative; }
.it-surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--it-marque); }
.it-surtitre .telios-icone { width: 15px; height: 15px; }
.it-titre { margin: 0 0 10px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.15; color: var(--it-encre); }
.it-accroche { max-width: 60ch; margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--it-attenue); }
.it-systemes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.it-systemes li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--it-marque); border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--it-encre); background: color-mix(in srgb, var(--telios-marque) 16%, transparent);
  animation: vi-surgit .5s cubic-bezier(.3, 1.4, .5, 1) .35s both; }
.it-systemes li + li { animation-delay: .45s; }
.it-systemes .telios-icone { width: 15px; height: 15px; color: var(--it-marque); }
.it-compatible { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; font-weight: 700; color: var(--it-encre); }
.it-compatible .telios-icone { width: 18px; height: 18px; color: var(--it-ok); }

/* La carte de version, et son halo qui respire. */
.it-version { position: relative; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--it-marque) 55%, transparent);
  border-radius: var(--telios-rayon-grand); background: color-mix(in srgb, var(--it-fond) 75%, transparent); backdrop-filter: blur(6px);
  animation: vi-surgit .6s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
.it-halo { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  animation: it-halo 3.8s ease-in-out 1.2s infinite; }
@keyframes it-halo { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--telios-marque) 22%, transparent),
                                      0 0 40px 4px color-mix(in srgb, var(--telios-marque) 30%, transparent); } }
.it-version p { margin: 0; }
.it-version-libelle { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--it-attenue); }
.it-version-numero { margin-top: 4px !important; font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--it-encre); }
.it-version-numero span { color: var(--it-marque); }
.it-version-absente .it-version-numero { font-size: 1.15rem; }
.it-version-date { margin-top: 2px !important; font-size: .85rem; color: var(--it-attenue); }
.it-version-preuve { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px !important; font-size: .78rem; font-weight: 700;
  color: var(--it-ok); }
.it-version-preuve svg { width: 15px; height: 15px; }
.it-version-secours { margin-top: 10px !important; font-size: .78rem; line-height: 1.5; color: var(--it-alerte); }
.it-notes { margin-top: 12px; }
.it-notes summary { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--it-encre); cursor: pointer;
  list-style: none; }
.it-notes summary::-webkit-details-marker { display: none; }
.it-notes summary .telios-icone { width: 14px; height: 14px; }
.it-notes[open] .it-notes-texte { animation: sec-monte .3s ease-out; }
.it-notes-texte { margin-top: 8px; padding: 10px 12px; font-size: .78rem; line-height: 1.55; border-radius: var(--telios-rayon-petit);
  color: var(--it-attenue); background: color-mix(in srgb, var(--it-encre) 6%, transparent); }

.it-section-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; }
.it-section-titre .telios-icone { width: 18px; height: 18px; color: var(--telios-marque); }

/* La console. */
.it-console-cadre { max-width: 1240px; margin-bottom: 24px; animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) .1s both; }
.it-console { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--it-fond); overflow: hidden; }
.it-console-barre { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--it-encre) 10%, transparent); }
.it-console-barre span { width: 10px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--it-encre) 25%, transparent); }
.it-console-barre span:first-child { background: var(--telios-danger); } .it-console-barre span:nth-child(2) { background: var(--telios-alerte); }
.it-console-barre span:nth-child(3) { background: var(--telios-ok); }
.it-console-barre em { margin-left: 10px; font-size: .72rem; font-style: normal; color: var(--it-attenue); }
.it-console-ligne { display: flex; gap: 10px; min-width: 0; padding: 16px 18px; font-family: var(--tblr-font-monospace); font-size: .92rem; line-height: 1.6; }
.it-invite { color: var(--it-marque); font-weight: 700; user-select: none; }
.it-console-ligne code { padding: 0; color: var(--it-encre); background: none; overflow-wrap: anywhere; }
.it-en-frappe::after { content: ""; display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom;
  background: var(--it-marque); animation: it-curseur .8s steps(1) infinite; }
@keyframes it-curseur { 50% { opacity: 0; } }
.it-copier { margin-right: 14px; min-width: 120px; color: var(--telios-encre-sur-accent); background: var(--telios-marque); border-color: transparent; }
.it-copier:hover { filter: brightness(1.08); color: var(--telios-encre-sur-accent); }
.it-copier .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.it-copier.it-copie { color: var(--telios-encre-sur-accent); background: var(--telios-ok); animation: au-sceau .35s cubic-bezier(.3, 1.6, .5, 1); }
.it-console-note { margin: 8px 2px 0; }
.it-hors-ecran { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

/* Les six étapes. */
.it-etapes-cadre { max-width: 1240px; margin-bottom: 24px; }
.it-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.it-etape { position: relative; padding: 18px 18px 16px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); font-size: .875rem; line-height: 1.55; transition: transform .25s, box-shadow .25s, border-color .25s; }
.it-etape:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--telios-marque) 50%, transparent);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--telios-marque) 70%, transparent); }
.it-etape.it-a-venir { opacity: 0; transform: translateY(18px); }
.it-etape.it-visible { opacity: 1; transform: none; transition: opacity .55s ease-out calc(var(--it-rang, 0) * 90ms),
  transform .55s cubic-bezier(.2, .8, .2, 1) calc(var(--it-rang, 0) * 90ms), box-shadow .25s, border-color .25s; }
.it-etape-numero { position: absolute; top: 14px; right: 16px; font-size: 2.2rem; font-weight: 800; line-height: 1;
  color: color-mix(in srgb, var(--telios-marque) 30%, transparent); }
.it-etape-icone { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-encre-sur-accent); background: var(--telios-marque); }
.it-etape-icone .telios-icone { width: 20px; height: 20px; }
.it-etape-titre { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.it-etape p { margin: 0 0 6px; color: var(--telios-texte-attenue); }
.it-etape ul { margin: 0; padding-left: 18px; color: var(--telios-texte-attenue); }
.it-etape li { margin-bottom: 3px; }
.it-etape strong { color: var(--telios-texte); }
.it-etape-commande { display: block; margin-top: 8px; padding: 8px 10px; font-size: .74rem; line-height: 1.5; overflow-wrap: anywhere;
  color: var(--it-encre); background: var(--it-fond); border-radius: var(--telios-rayon-petit); }
.it-etape-note { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; }
.it-etape-note .telios-icone { flex: none; width: 15px; height: 15px; color: var(--telios-ok); }
.it-etape-note strong { color: var(--telios-ok); }

/* L'envoi par courriel. */
.it-envoi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 24px; align-items: end; max-width: 1240px;
  padding: 20px 22px; }
.it-envoi-texte { display: flex; gap: 14px; align-items: flex-start; }
.it-envoi-embleme, .it-dialogue-embleme { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-encre-sur-accent); background: var(--telios-marque);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--telios-marque) 90%, transparent); }
.it-envoi-embleme .telios-icone, .it-dialogue-embleme .telios-icone { width: 22px; height: 22px; }
.it-envoi-formulaire { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 10px; align-items: end; }
.it-envoi-formulaire .form-label { margin-bottom: 4px; font-size: .84rem; font-weight: 600; }
.it-envoyer .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.it-derniers { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 0 0; list-style: none;
  border-top: 1px dashed var(--telios-trait); font-size: .8rem; }
.it-derniers li { display: inline-flex; align-items: center; gap: 6px; }
.it-derniers svg { width: 14px; height: 14px; }
.it-derniers small { color: var(--telios-texte-attenue); }

/* La fenêtre de confirmation : entrée en échelle, coche dessinée au succès. */
.it-dialogue { width: min(560px, calc(100vw - 24px)); }
.it-dialogue[open] { animation: it-fenetre .35s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes it-fenetre { from { opacity: 0; transform: scale(.88); } }
.it-dialogue-contenu { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.it-dialogue-contenu li { display: flex; align-items: center; gap: 10px; animation: sec-monte .35s ease-out both; }
.it-dialogue-contenu li:nth-child(2) { animation-delay: .06s; } .it-dialogue-contenu li:nth-child(3) { animation-delay: .12s; }
.it-dialogue-contenu li:nth-child(4) { animation-delay: .18s; }
.it-dialogue-contenu .telios-icone { flex: none; width: 18px; height: 18px; color: var(--telios-marque); }
.it-dialogue-succes { display: grid; justify-items: center; gap: 10px; padding: 8px 0; text-align: center; }
.it-dialogue-succes[hidden], .it-dialogue-recap[hidden] { display: none; }
.it-coche { width: 64px; height: 64px; fill: none; stroke: var(--telios-ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.it-coche circle { stroke-dasharray: 150; stroke-dashoffset: 0; animation: it-trace 0.6s ease-out both; }
.it-coche path { stroke-dasharray: 40; stroke-dashoffset: 0; animation: it-trace-coche .35s ease-out .5s both; }
@keyframes it-trace { from { stroke-dashoffset: 150; } }
@keyframes it-trace-coche { from { stroke-dashoffset: 40; } }
.it-dialogue-message { margin: 0; font-size: .9rem; font-weight: 600; }
.it-dialogue .tb-dialogue-pied [hidden] { display: none; }

@media (max-width: 991.98px) {
  .it-heros, .it-envoi { grid-template-columns: minmax(0, 1fr); }
  .it-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .it-heros { padding: 22px 18px; }
  .it-etapes, .it-envoi-formulaire { grid-template-columns: minmax(0, 1fr); }
  .it-console { grid-template-columns: minmax(0, 1fr); }
  .it-copier { margin: 0 14px 14px; }
}

/* Fiche client : supprimer un poste. */
/* Supprimer un poste : un bouton libellé, discret au repos (contour), qui
   s'affirme au survol (fond rouge plein, ombre teintée) ; l'icône bascule. */
.fiche-poste-supprimer { display: inline-flex; flex: none; align-self: center; align-items: center; gap: 8px; margin-left: auto; padding: 7px 14px 7px 11px;
  border: 1px solid rgba(var(--tblr-danger-rgb), .35); border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1;
  color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .06); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .2s; }
.fiche-poste-supprimer[hidden] { display: none; }
.fiche-poste-supprimer .telios-icone { width: 17px; height: 17px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fiche-poste-supprimer:hover, .fiche-poste-supprimer:focus-visible { color: var(--telios-encre-sur-accent); background: var(--telios-danger);
  border-color: var(--telios-danger); box-shadow: 0 8px 20px -10px rgba(var(--tblr-danger-rgb), .9); transform: translateY(-1px); }
.fiche-poste-supprimer:hover .telios-icone { transform: rotate(-12deg) scale(1.08); }
.fiche-poste-supprimer:focus-visible { outline: 2px solid var(--telios-danger); outline-offset: 2px; }
.fiche-poste-supprimer:active { transform: translateY(0); box-shadow: none; }

/* « Attribuer des tokens » (en-tête de la fiche) : même facture que
   « Supprimer » — pilule, contour, fond teinté, plein au survol — dans la
   couleur d'accent. Essai sur ce seul bouton avant d'étendre. */
.fiche-bouton-attribuer { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 20px 6px 6px;
  border: 1.5px solid var(--telios-accent); border-radius: 999px; font-size: .92rem; font-weight: 700; line-height: 1;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .14); text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(var(--tblr-primary-rgb), .85);
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .2s; }
/* L'icône dans une pastille pleine : c'est elle qui accroche l'œil au repos. */
.fiche-bouton-attribuer .telios-icone { width: 28px; height: 28px; margin: 0; padding: 6px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), color .2s, background .2s; }
.fiche-bouton-attribuer:hover, .fiche-bouton-attribuer:focus-visible { color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  text-decoration: none; box-shadow: 0 12px 26px -12px rgba(var(--tblr-primary-rgb), 1); transform: translateY(-1px); }
.fiche-bouton-attribuer:hover .telios-icone, .fiche-bouton-attribuer:focus-visible .telios-icone { color: var(--telios-accent);
  background: var(--telios-encre-sur-accent); transform: rotate(-14deg) scale(1.06); }
.fiche-bouton-attribuer:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.fiche-bouton-attribuer:active { transform: translateY(0); box-shadow: none; }
.fiche-dialogue-poste { width: min(560px, calc(100vw - 24px)); }
.fiche-pastille-danger { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.fiche-pastille-danger .telios-icone { width: 20px; height: 20px; }
.fiche-consequences { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.5; }
.fiche-consequences li { display: flex; align-items: flex-start; gap: 10px; }
.fiche-consequences .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.fiche-consequence-part .telios-icone { color: var(--telios-danger); }
.fiche-consequence-reste .telios-icone { color: var(--telios-ok); }

/* Fiche client : les essais offerts, à la hauteur des tuiles voisines. Une
   grille 2 × 2 sans cases, séparée d'une croix fine ; le chiffre contre son
   icône, le nom à la suite. */
.fe-corps { flex: 1; min-width: 0; }
.fe-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.fe-total { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--telios-texte-attenue); }
.fe-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fe-module { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 10px; animation: sec-monte .4s ease-out both; }
.fe-module:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--telios-trait); }
.fe-module:nth-child(even) { padding-right: 0; }
.fe-module:nth-child(-n+2) { border-bottom: 1px solid var(--telios-trait); }
.fe-module:nth-child(2) { animation-delay: .05s; } .fe-module:nth-child(3) { animation-delay: .1s; }
.fe-module:nth-child(4) { animation-delay: .15s; }
.fe-module .telios-icone { flex: none; width: 15px; height: 15px; color: var(--telios-accent); }
.fe-module strong { font-size: 1rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--telios-texte); }
.fe-module span { overflow: hidden; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; color: var(--telios-texte-attenue); }
.fe-vide strong, .fe-vide .telios-icone { color: var(--telios-texte-attenue); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .fe-module { animation: none; } }
/* Plus étroit, les tuiles rétrécissent : on resserre pour garder les noms entiers. */
@media (max-width: 1599.98px) {
  .fe-module { gap: 5px; padding: 5px 7px; }
  .fe-module span { font-size: .74rem; }
}

/* ── Norme des boutons (décision du 07/10/2026) ───────────────────────────
   Validée sur « Attribuer des tokens » et « Supprimer » (fiche client) :
   pilule, contour, fond teinté au repos ; plein au survol, ombre teintée,
   l'icône bascule. Pour les deux tableaux de bord seulement (body:is(.telios-admin:not(.vi-page), .telios-norme) :
   administration et espace des entreprises). La vitrine (vi-page) n'est pas
   concernée : « Inscrire mon entreprise » et « Se connecter » gardent leur
   dessin, décision antérieure. Piège : un client connecté qui ouvre la vitrine
   porte aussi telios-admin ; d'où :not(.vi-page) sur chaque règle. Le sélecteur de langue (FR · EN · ES) n'est pas
   un bouton d'action : il garde son soulignement.
   Trois familles : principale (accent, l'icône dans une pastille pleine),
   destructive (danger), secondaire (neutre). Les boutons-liens (btn-link) et
   les croix de fermeture (btn-close) restent à part.
   Piège : la base est dans :where() pour ne peser que (0,2,0) ; les familles,
   écrites après, l'emportent. Sans lui, la base gagnerait et tout serait gris.
   Hors des tableaux de bord, une zone la reçoit en portant .telios-norme : la
   fenêtre et la page de connexion (09/10/2026). :is() prend le poids de son
   plus lourd argument, (0,2,0) dans les deux cas : l'équilibre ci-dessus tient. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn:where(:not(.btn-link, .btn-close, .telios-langue)) {
  --tblr-btn-border-radius: 999px; --tblr-btn-font-weight: 600; --tblr-btn-box-shadow: none;
  --tblr-btn-color: var(--telios-texte); --tblr-btn-bg: var(--telios-carte); --tblr-btn-border-color: var(--telios-trait);
  --tblr-btn-hover-color: var(--telios-texte); --tblr-btn-hover-bg: var(--telios-bg-alt);
  --tblr-btn-hover-border-color: rgba(var(--tblr-primary-rgb), .45);
  --tblr-btn-active-color: var(--telios-texte); --tblr-btn-active-bg: var(--telios-bg-alt);
  --tblr-btn-active-border-color: rgba(var(--tblr-primary-rgb), .45);
  /* Le rayon en clair aussi : « .btn { border-radius } » plus haut (rayon du thème)
     l'impose sans passer par la variable de Tabler. */
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s, transform .2s; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn:where(:not(.btn-link, .btn-close, .telios-langue)):hover:not(:disabled, .disabled) {
  transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(var(--tblr-primary-rgb), .7); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn:where(:not(.btn-link, .btn-close, .telios-langue)):active { transform: none; box-shadow: none; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn:where(:not(.btn-link, .btn-close, .telios-langue)):focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn > .telios-icone { flex: none; width: 16px; height: 16px; margin: 0;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), color .2s, background-color .2s; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn:hover > .telios-icone { transform: rotate(-10deg) scale(1.08); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-sm > .telios-icone { width: 14px; height: 14px; }

/* Principale : la couleur d'accent, l'icône dans une pastille pleine. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary {
  --tblr-btn-color: var(--telios-accent); --tblr-btn-bg: rgba(var(--tblr-primary-rgb), .14); --tblr-btn-border-color: var(--telios-accent);
  --tblr-btn-hover-color: var(--telios-encre-sur-accent); --tblr-btn-hover-bg: var(--telios-accent); --tblr-btn-hover-border-color: var(--telios-accent);
  --tblr-btn-active-color: var(--telios-encre-sur-accent); --tblr-btn-active-bg: var(--telios-accent); --tblr-btn-active-border-color: var(--telios-accent);
  --tblr-btn-disabled-color: var(--telios-accent); --tblr-btn-disabled-bg: rgba(var(--tblr-primary-rgb), .14);
  --tblr-btn-disabled-border-color: var(--telios-accent);
  border-width: 1.5px; font-weight: 700; box-shadow: 0 8px 20px -12px rgba(var(--tblr-primary-rgb), .85); }
/* La couleur du texte en clair aussi : « .btn-primary { color } » plus haut
   l'impose (encre claire, pour l'ancien bouton plein), et le survol doit la
   reprendre, sans quoi le texte resterait bleu sur fond bleu. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary { color: var(--tblr-btn-color); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary:is(:hover, :focus-visible, :active):not(:disabled, .disabled) { color: var(--tblr-btn-hover-color); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary:hover:not(:disabled, .disabled) { box-shadow: 0 12px 26px -12px rgba(var(--tblr-primary-rgb), 1); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary:has(> .telios-icone:first-child) { padding-left: 5px; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary.btn-sm:has(> .telios-icone:first-child) { padding-left: 4px; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary > .telios-icone:first-child { width: 26px; height: 26px; padding: 5px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary.btn-sm > .telios-icone:first-child { width: 22px; height: 22px; padding: 4px; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-primary:hover > .telios-icone:first-child { color: var(--telios-accent); background: var(--telios-encre-sur-accent); }

/* Destructive : la couleur de danger, plein au survol. */
:is(.telios-admin:not(.vi-page), .telios-norme) :is(.btn-danger, .btn-outline-danger, .btn-ghost-danger) {
  --tblr-btn-color: var(--telios-danger); --tblr-btn-bg: rgba(var(--tblr-danger-rgb), .06);
  --tblr-btn-border-color: rgba(var(--tblr-danger-rgb), .35);
  --tblr-btn-hover-color: var(--telios-encre-sur-accent); --tblr-btn-hover-bg: var(--telios-danger); --tblr-btn-hover-border-color: var(--telios-danger);
  --tblr-btn-active-color: var(--telios-encre-sur-accent); --tblr-btn-active-bg: var(--telios-danger); --tblr-btn-active-border-color: var(--telios-danger); }
/* La confirmation d'un geste destructif, dans sa fenêtre : contour plein. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-danger { --tblr-btn-bg: rgba(var(--tblr-danger-rgb), .12); --tblr-btn-border-color: var(--telios-danger); border-width: 1.5px; font-weight: 700; }
:is(.telios-admin:not(.vi-page), .telios-norme) :is(.btn-danger, .btn-outline-danger, .btn-ghost-danger):hover:not(:disabled, .disabled) {
  box-shadow: 0 8px 20px -10px rgba(var(--tblr-danger-rgb), .9); }

/* Réussite (réponse reçue, validée) : la couleur du succès. */
:is(.telios-admin:not(.vi-page), .telios-norme) :is(.btn-success, .btn-outline-success) {
  --tblr-btn-color: var(--telios-ok); --tblr-btn-bg: rgba(var(--tblr-success-rgb), .08); --tblr-btn-border-color: rgba(var(--tblr-success-rgb), .4);
  --tblr-btn-hover-color: var(--telios-encre-sur-accent); --tblr-btn-hover-bg: var(--telios-ok); --tblr-btn-hover-border-color: var(--telios-ok);
  --tblr-btn-active-color: var(--telios-encre-sur-accent); --tblr-btn-active-bg: var(--telios-ok); --tblr-btn-active-border-color: var(--telios-ok); }
:is(.telios-admin:not(.vi-page), .telios-norme) :is(.btn-success, .btn-outline-success):hover:not(:disabled, .disabled) { box-shadow: 0 8px 20px -10px rgba(var(--tblr-success-rgb), .9); }

/* Discrète (fermer une fenêtre, barre d'outils) : sans fond ni contour au repos. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-ghost-secondary { --tblr-btn-bg: transparent; --tblr-btn-border-color: transparent;
  --tblr-btn-color: var(--telios-texte-attenue); --tblr-btn-hover-color: var(--telios-texte); }
/* Icône seule : un rond. */
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-icon:where(:not(.btn-link)) { aspect-ratio: 1; padding: 0; min-width: 36px; }
:is(.telios-admin:not(.vi-page), .telios-norme) .btn-icon.btn-sm { min-width: 30px; }
@media (prefers-reduced-motion: reduce) {
  :is(.telios-admin:not(.vi-page), .telios-norme) .btn, :is(.telios-admin:not(.vi-page), .telios-norme) .btn > .telios-icone { transition: none; }
  :is(.telios-admin:not(.vi-page), .telios-norme) .btn:hover, :is(.telios-admin:not(.vi-page), .telios-norme) .btn:hover > .telios-icone { transform: none; }
}

/* Tableau de bord client : les essais offerts rappelés sous le solde de tokens. */
.ecl-tuile-reserve { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 9px 2px 6px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .1); }
.ecl-tuile-reserve .telios-icone { width: 13px; height: 13px; }

/* Clé de signature : la clé en service, en grand, et le bandeau tant
   qu'elle n'a pas été sauvegardée. */
.sg-alerte-sauvegarde { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; padding: 16px 20px;
  border: 1.5px solid var(--telios-danger); border-radius: var(--telios-rayon-grand); color: var(--telios-texte);
  background: rgba(var(--tblr-danger-rgb), .08); box-shadow: 0 10px 26px -18px rgba(var(--tblr-danger-rgb), .9); }
.sg-alerte-sauvegarde > div { flex: 1 1 360px; font-size: .875rem; line-height: 1.55; }
.sg-alerte-icone { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-danger); animation: at-signal-rouge 2.4s ease-in-out infinite; }
.sg-alerte-icone .telios-icone { width: 20px; height: 20px; }
@keyframes at-signal-rouge { 50% { box-shadow: 0 0 0 8px rgba(var(--tblr-danger-rgb), .16); } }
.sg-alerte-titre { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--telios-danger); }
.sg-alerte-sauvegarde .btn[hidden] { display: none; }
.sg-en-service-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.sg-en-service-icone { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 12px 26px -14px rgba(var(--tblr-primary-rgb), .9); }
.sg-en-service-icone .telios-icone { width: 26px; height: 26px; }
.sg-en-service-texte { flex: 1 1 360px; min-width: 0; }
.sg-en-service-libelle { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.sg-en-service-kid { margin: 2px 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: .06em; color: var(--telios-texte); }
.sg-en-service-publique { overflow-wrap: anywhere; }
.sg-sauvegarde-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--telios-ok); }
.sg-sauvegarde-ok .telios-icone { width: 14px; height: 14px; }
.sg-sauvegarde-manque { font-weight: 700; color: var(--telios-danger); }
@media (prefers-reduced-motion: reduce) { .sg-alerte-icone { animation: none; } }

/* Fiche client : les trois dernières actions de « Historiques », en défilement
   (_fiche_fil.html, telios.js). Une ligne à la fois, la suivante monte ; le
   point actif se remplit pendant les cinq secondes de la ligne. Sans script ou
   avec « réduire les animations », les trois lignes s'empilent, sans clip. */
.fiche-fil { position: relative; margin-top: 14px; padding: 10px 14px 10px 18px; border-radius: 12px; overflow: hidden;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); animation: sec-monte .4s ease-out both; }
/* Le bloc s'étire à la hauteur de la colonne « Compte » : la ligne se centre dans ce qui reste. */
.fiche-fil { display: flex; flex-direction: column; }
.fiche-fil-cadre { margin-block: auto; }
.fiche-fil::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--telios-accent); }
.fiche-fil-tete { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.fiche-fil-tete > .telios-icone { width: 14px; height: 14px; color: var(--telios-accent); }
.fiche-fil-tete a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: .76rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; text-decoration: none; }
.fiche-fil-tete a .telios-icone { width: 13px; height: 13px; transition: transform .2s; }
.fiche-fil-tete a:hover .telios-icone { transform: translateX(3px); }
/* La navigation : flèches, barre segmentée, compteur « 02 / 05 ». Chaque
   segment a une cible de clic plus haute que son trait (::before). */
.fiche-fil-nav { display: flex; align-items: center; gap: 8px; margin-left: 14px; text-transform: none; letter-spacing: 0; }
.fiche-fil-nav[hidden] { display: none; }
.fiche-fil-fleche { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--telios-trait);
  border-radius: 999px; background: var(--telios-carte); color: var(--telios-texte-attenue); cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s; }
.fiche-fil-fleche .telios-icone { width: 13px; height: 13px; }
.fiche-fil-fleche:hover { color: var(--telios-accent); border-color: var(--telios-accent); }
.fiche-fil-fleche[data-fil-precedent]:hover { transform: translateX(-2px); }
.fiche-fil-fleche[data-fil-suivant]:hover { transform: translateX(2px); }
.fiche-fil-fleche:focus-visible, .fiche-fil-point:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.fiche-fil-points { display: flex; align-items: center; gap: 4px; }
.fiche-fil-point { position: relative; width: 26px; height: 4px; padding: 0; border: 0; border-radius: 999px; overflow: visible;
  background: color-mix(in srgb, var(--telios-texte-attenue) 25%, transparent); cursor: pointer; transition: background .2s, height .2s; }
.fiche-fil-point::before { content: ""; position: absolute; inset: -9px -2px; }
.fiche-fil-point::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--telios-accent);
  transform: scaleX(0); transform-origin: left; }
.fiche-fil-point:hover { height: 6px; background: color-mix(in srgb, var(--telios-texte-attenue) 40%, transparent); }
.fiche-fil-point.vu::after { transform: scaleX(1); opacity: .55; transition: opacity .3s; }
.fiche-fil-point.actif::after { opacity: 1; animation: fil-remplit 5s linear both; }
.fiche-fil-pause .fiche-fil-point.actif::after { animation-play-state: paused; }
@keyframes fil-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fiche-fil-compteur { display: inline-flex; align-items: baseline; gap: 3px; margin-left: 4px; font-variant-numeric: tabular-nums;
  overflow: hidden; }
.fiche-fil-rang { display: inline-block; font-size: .8rem; font-weight: 800; color: var(--telios-texte); }
.fiche-fil-rang.change { animation: fil-rang .35s cubic-bezier(.2, .8, .2, 1); }
.fiche-fil-total { font-size: .7rem; font-weight: 600; color: var(--telios-texte-attenue); }
@keyframes fil-rang { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
.fiche-fil-etat-pause { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1);
  opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; }
.fiche-fil-etat-pause .telios-icone { width: 11px; height: 11px; }
.fiche-fil-pause .fiche-fil-etat-pause { opacity: 1; transform: none; }
.fiche-fil-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fiche-fil-pastille { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.fiche-fil-pastille .telios-icone { width: 15px; height: 15px; }
.fiche-fil-credit .fiche-fil-pastille { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.fiche-fil-debit .fiche-fil-pastille { color: var(--telios-texte-attenue); background: color-mix(in srgb, var(--telios-texte-attenue) 14%, transparent); }
.fiche-fil-echec .fiche-fil-pastille { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.fiche-fil-ligne { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; }
/* Les rubriques, séparées d'un filet, comme les colonnes d'un tableau : le
   titre en petites capitales, la valeur dessous ; coupée au besoin, entière au survol. */
.fiche-fil-champs { display: flex; align-items: stretch; min-width: 0; margin: 0; }
.fiche-fil-champ { flex: 1 1 auto; min-width: 0; padding: 0 14px; border-left: 1px solid var(--telios-trait); }
.fiche-fil-champ:first-child { flex-grow: 1.4; padding-left: 0; border-left: 0; }
.fiche-fil-champ dt { margin: 0 0 3px; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.fiche-fil-champ dd { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: .84rem; font-weight: 600; }
.fiche-fil-champ dd > span:last-child, .fiche-fil-champ dd time { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fiche-fil-signe { flex: none; padding: 0 7px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--telios-texte-attenue); background: color-mix(in srgb, var(--telios-texte-attenue) 14%, transparent); }
.fiche-fil-credit .fiche-fil-signe { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.fiche-fil-echec .fiche-fil-cause dd { color: var(--telios-danger); }
.fiche-fil-date { flex: 0 0 auto; }
.fiche-fil-date time { font-variant-numeric: tabular-nums; }
.fiche-fil-date small { margin-left: 6px; font-size: .78rem; font-weight: 500; color: var(--telios-texte-attenue); }
.fiche-fil-anime .fiche-fil-cadre { height: 52px; overflow: hidden; }
.fiche-fil-anime .fiche-fil-liste { gap: 0; transform: translateY(calc(var(--fil-index, 0) * -52px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.fiche-fil-anime .fiche-fil-ligne { height: 52px; opacity: .15; transition: opacity .5s ease; }
.fiche-fil-anime .fiche-fil-ligne.est-courante { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fiche-fil, .fiche-fil-point.actif::after, .fiche-fil-rang.change { animation: none; } }
@media (max-width: 991.98px) { .fiche-fil-par { display: none; } }
@media (max-width: 575.98px) { .fiche-fil-motif { display: none; } .fiche-fil-date small { display: none; }
  .fiche-fil-fleche, .fiche-fil-etat-pause { display: none; } .fiche-fil-point { width: 16px; } }
/* « Historiques » : un courriel d'information, ou son échec, parmi les mouvements. */
.fiche-histo-courriel td[data-label="Cause"] .telios-icone, .fiche-histo-echec td[data-label="Cause"] .telios-icone {
  width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.fiche-histo-courriel td[data-label="Cause"] .telios-icone { color: var(--telios-accent); }
.fiche-histo-echec td[data-label="Cause"], .fiche-histo-echec td[data-label="Motif"] { color: var(--telios-danger); }

/* Fiche client : la clé de licence tient en une tuile, comme ses voisines ;
   « Gérer la clé de licence » ouvre la fenêtre qui porte tout le reste. */
.fiche-abo-cle-fin { letter-spacing: .06em; }
.fiche-abo-cle-fin > span { margin-right: 4px; color: var(--telios-texte-attenue); letter-spacing: .1em; }
.fiche-abo-cle .fiche-cle-envoi { margin: 6px 0 0; }
.fiche-abo-gerer { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none;
  font-size: .875rem; font-weight: 700; color: var(--telios-accent); cursor: pointer; }
.fiche-abo-gerer .telios-icone { width: 15px; height: 15px; transition: transform .2s ease; }
.fiche-abo-gerer:hover { text-decoration: underline; text-underline-offset: 3px; }
.fiche-abo-gerer:hover .telios-icone, .fiche-abo-gerer:focus-visible .telios-icone { transform: translateX(4px); }
.fiche-abo-gerer:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 3px; border-radius: 6px; }

/* La fenêtre « Gérer la clé de licence ». La carte se pose à chaque
   ouverture : une fenêtre fermée ne s'affiche pas, ses animations repartent
   donc de zéro quand elle s'ouvre. */
.cg-dialogue { width: min(640px, calc(100vw - 24px)); }
.cg-corps { gap: 18px; }
.cg-carte { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 20px 22px; border-radius: 12px;
  color: var(--telios-encre-sur-accent);
  background: linear-gradient(135deg, var(--telios-accent), color-mix(in srgb, var(--telios-accent) 60%, var(--telios-marque)));
  box-shadow: 0 18px 40px -18px rgba(var(--tblr-primary-rgb), .7);
  transform-origin: 50% 100%; animation: cg-pose .7s cubic-bezier(.2, .8, .2, 1) both; }
.cg-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--telios-carte) 45%, transparent) 50%, transparent 65%);
  animation: cg-reflet 1.4s .45s ease-out both; }
.cg-carte-expiree { background: color-mix(in srgb, var(--telios-texte-attenue) 55%, var(--telios-carte)); box-shadow: none; }
.cg-carte-tete { display: flex; align-items: center; gap: 10px; }
.cg-puce { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px;
  background: color-mix(in srgb, var(--telios-encre-sur-accent) 14%, transparent); }
.cg-puce .telios-icone { width: 18px; height: 18px; }
.cg-marque { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cg-etat { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  background: color-mix(in srgb, var(--telios-encre-sur-accent) 16%, transparent); }
.cg-numero { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; }
.cg-groupe { animation: cg-groupe .45s cubic-bezier(.2, .8, .2, 1) both; }
.cg-groupe:nth-child(2) { animation-delay: .25s; } .cg-groupe:nth-child(3) { animation-delay: .32s; }
.cg-groupe:nth-child(4) { animation-delay: .39s; } .cg-groupe:nth-child(5) { animation-delay: .46s; }
.cg-groupe:nth-child(6) { animation-delay: .6s; }
.cg-groupe:first-child { animation-delay: .18s; }
.cg-fin { padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--telios-encre-sur-accent) 18%, transparent); }
.cg-carte-pied { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.cg-carte-pied dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.cg-carte-pied dd { margin: 0; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cg-envoi { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.cg-rubrique .tb-dialogue-rubrique { margin-bottom: 10px; }
.cg-rubrique .fiche-cle-actions .btn .telios-icone { width: 16px; height: 16px; margin-right: 6px; }
.cg-corps > :not(.cg-carte) { animation: sec-monte .45s ease-out both; }
.cg-corps > :nth-child(3) { animation-delay: .1s; } .cg-corps > :nth-child(4) { animation-delay: .16s; }
.cg-corps > :nth-child(5) { animation-delay: .22s; }
@keyframes cg-pose { from { opacity: 0; transform: perspective(900px) rotateX(22deg) translateY(18px) scale(.95); }
  to { opacity: 1; transform: none; } }
@keyframes cg-reflet { to { transform: translateX(120%); } }
@keyframes cg-groupe { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .cg-carte, .cg-carte::after, .cg-groupe, .cg-corps > * { animation: none; }
  .cg-carte::after { display: none; }
}

/* ── Codes promo (administration/codes.html) ──────────────────────────────
   Quatre indicateurs, la liste en lignes lisibles, et la création dans une
   fenêtre où un coupon se dessine pendant la saisie. Champs à leur juste
   largeur : un code, une date, un plafond n'ont pas besoin de toute la page. */
.cp-indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
/* Les tuiles d'indicateurs (Codes promo, Ventes) : une teinte par tuile,
   dérivée des jetons du thème ; tout le reste en découle. */
.cp-teinte-accent { --cp-teinte: var(--telios-accent); }
.cp-teinte-violet { --cp-teinte: color-mix(in srgb, var(--telios-accent) 55%, var(--telios-marque)); }
.cp-teinte-ok { --cp-teinte: var(--telios-ok); }
.cp-teinte-marque { --cp-teinte: var(--telios-marque); }
.cp-indicateur { position: relative; overflow: hidden; display: grid; gap: 10px; padding: 18px 20px 16px; border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cp-teinte) 7%, var(--telios-carte)) 0%, var(--telios-carte) 60%);
  border: 1px solid color-mix(in srgb, var(--cp-teinte) 22%, var(--telios-trait));
  animation: cp-tuile .6s cubic-bezier(.2, .8, .2, 1) both; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.cp-indicateur:nth-child(2) { animation-delay: .07s; } .cp-indicateur:nth-child(3) { animation-delay: .14s; }
.cp-indicateur:nth-child(4) { animation-delay: .21s; }
/* Le trait de couleur, en haut, qui se déroule à l'arrivée. */
.cp-indicateur::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cp-teinte);
  transform-origin: left; animation: cp-trait .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.cp-indicateur:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cp-teinte) 45%, var(--telios-trait));
  box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--cp-teinte) 70%, transparent); }
.cp-indicateur-tete { display: flex; align-items: center; gap: 10px; }
.cp-indicateur-tete .tb-libelle { margin: 0; }
.cp-indicateur-icone { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px;
  color: var(--telios-encre-sur-accent); background: var(--cp-teinte);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cp-teinte) 80%, transparent);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cp-indicateur-icone .telios-icone { width: 19px; height: 19px; }
.cp-indicateur:hover .cp-indicateur-icone { transform: rotate(-8deg) scale(1.08); }
.cp-indicateur-valeur { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--telios-texte); }
.cp-indicateur-pied { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: .78rem; font-weight: 600;
  color: var(--telios-texte-attenue); }
.cp-indicateur-pied > .telios-icone { flex: none; width: 14px; height: 14px; color: var(--cp-teinte); }
.cp-mini-jauge { flex: 0 0 56px; height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--cp-teinte) 18%, transparent); }
.cp-mini-jauge > span { display: block; width: var(--cp-part, 0%); height: 100%; border-radius: inherit; background: var(--cp-teinte);
  transition: width 1.2s .3s cubic-bezier(.2, .8, .2, 1); }
/* L'icône en filigrane, grande et pâle, qui glisse à l'arrivée et au survol. */
.cp-filigrane { position: absolute; right: -14px; bottom: -18px; color: var(--cp-teinte); opacity: .08; pointer-events: none;
  animation: cp-filigrane .9s .2s cubic-bezier(.2, .8, .2, 1) both; transition: transform .4s ease, opacity .4s; }
.cp-filigrane .telios-icone { width: 108px; height: 108px; }
.cp-indicateur:hover .cp-filigrane { transform: translate(-6px, -4px) rotate(-6deg); opacity: .13; }
@keyframes cp-tuile { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cp-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cp-filigrane { from { opacity: 0; transform: translate(18px, 18px) rotate(12deg); } to { opacity: .08; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cp-indicateur, .cp-indicateur::before, .cp-filigrane { animation: none; }
  .cp-indicateur, .cp-indicateur-icone, .cp-filigrane { transition: none; }
}

.cp-codes { margin: 0; padding: 0; list-style: none; }
.cp-code { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 16px 20px; border-top: 1px solid var(--telios-trait); animation: sec-monte .35s ease-out both; transition: background .2s; }
.cp-code:first-child { border-top: 0; }
.cp-code:hover { background: var(--telios-bg-alt); }
.cp-code-pastille { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.cp-code-pastille .telios-icone { width: 21px; height: 21px; }
.cp-type-licences.cp-code-pastille { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.cp-type-montant.cp-code-pastille { color: var(--telios-marque); background: color-mix(in srgb, var(--telios-marque) 12%, transparent); }
.cp-code-identite, .cp-code-usage { min-width: 0; }
.cp-code-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.cp-code-valeur { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border: 1px dashed var(--telios-trait);
  border-radius: 6px; background: var(--telios-bg-alt); color: var(--telios-texte); font-size: .95rem; font-weight: 800;
  letter-spacing: .06em; cursor: pointer; transition: border-color .2s, color .2s; }
.cp-code-valeur .telios-icone { width: 14px; height: 14px; color: var(--telios-texte-attenue); }
.cp-code-valeur:hover { border-color: var(--telios-accent); color: var(--telios-accent); }
.cp-code-remise { margin: 6px 0 0; font-size: .875rem; }
.cp-code-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 0; font-size: .78rem; color: var(--telios-texte-attenue); }
.cp-code-meta .telios-icone { width: 13px; height: 13px; }
.cp-badge { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800;
  color: var(--telios-texte-attenue); background: color-mix(in srgb, var(--telios-texte-attenue) 14%, transparent); }
.cp-badge-actif { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.cp-badge-programme { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.cp-badge-epuise, .cp-badge-alerte { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .14); }
.cp-etat-desactive .cp-code-identite, .cp-etat-expire .cp-code-identite { opacity: .6; }
.cp-code-chiffre { margin: 0; font-size: .84rem; }
.cp-code-chiffre strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.cp-jauge { display: block; height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--telios-texte-attenue) 18%, transparent); }
.cp-jauge > span { display: block; width: var(--cp-part, 0%); max-width: 100%; height: 100%; border-radius: inherit;
  background: var(--telios-accent); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cp-etat-epuise .cp-jauge > span { background: var(--telios-alerte); }
.cp-code-montants { display: flex; gap: 22px; margin: 0; text-align: right; }
.cp-code-montants dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.cp-code-montants dd { margin: 0; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-vide { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--telios-texte-attenue); }
.cp-vide > .telios-icone { width: 36px; height: 36px; color: var(--telios-accent); }
.cp-vide strong { color: var(--telios-texte); }
@media (max-width: 1199.98px) {
  .cp-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-code { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cp-code-usage { grid-column: 2; } .cp-code-montants { grid-column: 3; grid-row: 1; } .cp-code-geste { grid-column: 3; grid-row: 2; }
}
@media (max-width: 575.98px) { .cp-indicateurs { grid-template-columns: minmax(0, 1fr); }
  .cp-code { grid-template-columns: 44px minmax(0, 1fr); } .cp-code-montants, .cp-code-geste { grid-column: 2; grid-row: auto; text-align: left; } }

/* La fenêtre « Nouveau code promo » : la saisie à gauche, le coupon à droite. */
.cp-dialogue { width: min(980px, calc(100vw - 24px)); }
.cp-corps { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.cp-saisie { display: grid; gap: 18px; min-width: 0; }
.cp-rubrique .tb-dialogue-rubrique { margin-bottom: 8px; }
.cp-rubrique .form-label { margin-bottom: 4px; font-size: .82rem; font-weight: 600; }
.cp-code-saisie { display: flex; gap: 10px; align-items: center; }
.cp-code-saisie .form-control { max-width: 280px; font-family: var(--tblr-font-monospace); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; }
.cp-code-saisie .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.cp-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cp-types > input { position: absolute; opacity: 0; pointer-events: none; }
.cp-type { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--telios-trait); border-radius: 12px;
  cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.cp-type .telios-icone { width: 20px; height: 20px; margin-bottom: 4px; color: var(--telios-texte-attenue); transition: color .2s, transform .3s; }
.cp-type strong { font-size: .875rem; }
.cp-type small { font-size: .74rem; color: var(--telios-texte-attenue); }
.cp-type:hover { border-color: rgba(var(--tblr-primary-rgb), .5); transform: translateY(-1px); }
.cp-types > input:checked + .cp-type { border-color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .08);
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15); }
.cp-types > input:checked + .cp-type .telios-icone { color: var(--telios-accent); transform: scale(1.12); }
.cp-types > input:focus-visible + .cp-type { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.cp-valeur { max-width: 260px; margin-top: 12px; }
.cp-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cp-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; }
.cp-forfaits { margin: 0 0 12px; padding: 0; border: 0; }
.cp-forfaits legend { float: none; }
.cp-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-puce { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.cp-puce input { position: absolute; opacity: 0; pointer-events: none; }
.cp-puce span { padding: 5px 12px; border: 1px solid var(--telios-trait); border-radius: 999px; font-size: .82rem; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s; }
.cp-puce:hover span { border-color: var(--telios-accent); }
.cp-puce input:checked + span { color: var(--telios-encre-sur-accent); background: var(--telios-accent); border-color: var(--telios-accent); }
.cp-puce input:focus-visible + span { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
/* Le coupon : deux encoches découpées dans la couleur de la fenêtre, un
   pointillé de détachement, un reflet qui le balaie à l'ouverture. */
.cp-apercu { position: sticky; top: 0; display: grid; gap: 10px; }
.cp-coupon { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 20px 22px; border-radius: 12px;
  color: var(--telios-encre-sur-accent);
  background: linear-gradient(140deg, var(--telios-accent), color-mix(in srgb, var(--telios-accent) 55%, var(--telios-marque)));
  box-shadow: 0 18px 40px -20px rgba(var(--tblr-primary-rgb), .75); animation: cg-pose .7s cubic-bezier(.2, .8, .2, 1) both; }
.cp-coupon::before, .cp-coupon::after { content: ""; position: absolute; top: 112px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--telios-carte); }
.cp-coupon::before { left: -11px; } .cp-coupon::after { right: -11px; }
.cp-coupon-marque { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; opacity: .85; }
.cp-coupon-marque .telios-icone { width: 14px; height: 14px; }
.cp-coupon-code { margin: 4px 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: .1em; overflow-wrap: anywhere; }
.cp-coupon-remise { margin: 0 0 10px; padding-bottom: 14px; border-bottom: 2px dashed color-mix(in srgb, var(--telios-encre-sur-accent) 35%, transparent);
  font-size: 2rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cp-coupon-remise.cp-rebond { animation: cp-rebond .45s cubic-bezier(.2, .8, .2, 1); }
.cp-coupon-details { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .8rem; font-weight: 600; }
.cp-coupon-details li { display: flex; gap: 8px; align-items: flex-start; }
.cp-coupon-details .telios-icone { flex: none; width: 14px; height: 14px; margin-top: 2px; opacity: .85; }
.cp-apercu-note { font-size: .76rem; }
@keyframes cp-rebond { 0% { transform: scale(.92); opacity: .4; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
@media (max-width: 899.98px) { .cp-corps { grid-template-columns: minmax(0, 1fr); } .cp-apercu { position: static; order: -1; } }
@media (max-width: 575.98px) { .cp-types, .cp-deux { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cp-indicateur, .cp-code, .cp-coupon, .cp-coupon-remise.cp-rebond { animation: none; } }

/* ── Espace client : les codes promo disponibles (_promo_client.html) ─────
   Centrés entre le nom de l'entreprise et les outils : deux marges
   automatiques autour du bandeau, aucune sur les outils. */
.ecl-promo { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 620px; margin: 0 auto;
  padding: 4px 6px 4px 6px; border: 1px solid rgba(var(--tblr-primary-rgb), .35); border-radius: 999px;
  background: rgba(var(--tblr-primary-rgb), .07); animation: ecl-promo-entree .6s cubic-bezier(.2, .8, .2, 1) both; overflow: hidden; }
.ecl-promo + .ecl-outils { margin-left: 0; }
.ecl-promo::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--telios-carte) 55%, transparent) 50%, transparent 60%);
  animation: cg-reflet 1.6s .8s ease-out both; }
.ecl-promo-icone { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); animation: ecl-promo-pouls 2.4s ease-in-out infinite; }
.ecl-promo-icone .telios-icone { width: 15px; height: 15px; }
.ecl-promo-cadre { min-width: 0; height: 30px; overflow: hidden; }
.ecl-promo-liste { margin: 0; padding: 0; list-style: none; transform: translateY(calc(var(--promo-index, 0) * -30px));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ecl-promo-ligne { height: 30px; opacity: .2; transition: opacity .4s; }
.ecl-promo-ligne.est-courante { opacity: 1; }
.ecl-promo-bouton { display: flex; align-items: center; gap: 10px; max-width: 100%; height: 30px; padding: 0 8px 0 2px; border: 0;
  background: none; color: var(--telios-texte); cursor: pointer; white-space: nowrap; }
.ecl-promo-code { padding: 2px 9px; border: 1px dashed rgba(var(--tblr-primary-rgb), .6); border-radius: 6px; font-size: .82rem;
  font-weight: 800; letter-spacing: .06em; color: var(--telios-accent); background: var(--telios-carte); }
.ecl-promo-texte { overflow: hidden; text-overflow: ellipsis; font-size: .84rem; font-weight: 600; }
.ecl-promo-texte small { font-size: .78rem; font-weight: 500; color: var(--telios-texte-attenue); }
.ecl-promo-copier { display: grid; place-items: center; flex: none; color: var(--telios-texte-attenue); transition: color .2s, transform .2s; }
.ecl-promo-copier .telios-icone { width: 15px; height: 15px; }
.ecl-promo-bouton:hover .ecl-promo-copier, .ecl-promo-bouton:focus-visible .ecl-promo-copier { color: var(--telios-accent); transform: scale(1.15); }
.ecl-promo-bouton:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; border-radius: 999px; }
.ecl-promo-bouton.copie .ecl-promo-texte { color: var(--telios-ok); }
.ecl-promo-bouton.copie .ecl-promo-copier { color: var(--telios-ok); }
.ecl-promo-rang { flex: none; padding-right: 8px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--telios-texte-attenue); }
@keyframes ecl-promo-entree { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ecl-promo-pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .45); }
  50% { box-shadow: 0 0 0 6px rgba(var(--tblr-primary-rgb), 0); } }
@media (max-width: 991.98px) { .ecl-promo-texte small { display: none; } }
@media (max-width: 767.98px) { .ecl-promo { margin-left: 0; } .ecl-promo-texte { display: none; } }
@media (prefers-reduced-motion: reduce) { .ecl-promo, .ecl-promo::after, .ecl-promo-icone { animation: none; }
  .ecl-promo::after { display: none; } .ecl-promo-liste { transition: none; } }

/* Page Entreprise : le contact pour les tokens, sous l'alerte de solde. */
.en-contact-choix { display: flex; gap: 8px; margin-bottom: 8px; }
.en-contact-choix .form-select { min-width: 0; }
.en-contact-choix .btn { flex: none; }
.en-contact-choix .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.en-contact-detail { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 4px; font-size: .8rem; overflow-wrap: anywhere; }
.en-contact-detail .telios-icone { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--telios-texte-attenue); }

/* Fiche client, « Consommation » : trois chiffres en colonne, le graphique en
   bande basse à côté (classe g-fiche, dessins plus larges que hauts). */
.fiche-conso { display: grid; gap: 20px; align-items: center; }
@media (min-width: 992px) { .fiche-conso { grid-template-columns: 230px minmax(0, 1fr); } }
.fiche-conso-chiffres { display: grid; gap: 10px; margin: 0; }
@media (min-width: 576px) and (max-width: 991.98px) { .fiche-conso-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fiche-conso-chiffre { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--telios-trait); background: var(--telios-bg-alt); animation: sec-monte .45s ease-out both; }
.fiche-conso-chiffre:nth-child(2) { animation-delay: .08s; } .fiche-conso-chiffre:nth-child(3) { animation-delay: .16s; }
.fiche-conso-chiffre:first-child { border-color: rgba(var(--tblr-primary-rgb), .35);
  background: linear-gradient(160deg, rgba(var(--tblr-primary-rgb), .1), var(--telios-bg-alt) 70%); }
.fiche-conso-icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .12); }
.fiche-conso-icone .telios-icone { width: 18px; height: 18px; }
.fiche-conso-chiffre dt { font-size: .76rem; font-weight: 600; color: var(--telios-texte-attenue); }
.fiche-conso-chiffre dd { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fiche-conso-graphe { min-width: 0; }
.g-fiche .g-axe { font-size: 12px; }
.g-fiche.g-mobile .g-axe { font-size: 11px; }
.g-fiche .g-grille { stroke-dasharray: 3 5; stroke-opacity: .8; }
.g-fiche .g-barre { rx: 4px; fill: var(--telios-accent); filter: drop-shadow(0 4px 8px rgba(var(--tblr-primary-rgb), .3)); }
.g-fiche .g-barre:hover { fill: var(--telios-accent2); fill-opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fiche-conso-chiffre { animation: none; } }

/* CGV et CGU, lecture publique (juridique/document.html). */
.jd-page { display: grid; gap: 24px; align-items: start; }
@media (min-width: 992px) { .jd-page { grid-template-columns: 280px minmax(0, 1fr); } }
.jd-sommaire { position: sticky; top: 16px; padding: 18px 18px 14px; border-radius: 12px; border: 1px solid var(--telios-trait);
  background: var(--telios-carte); animation: sec-monte .45s ease-out both; }
.jd-sommaire-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.jd-sommaire-titre .telios-icone { width: 15px; height: 15px; color: var(--telios-accent); }
.jd-sommaire ol { display: grid; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; }
.jd-sommaire ol a { display: block; padding: 5px 10px; border-radius: 6px; font-size: .84rem; color: var(--telios-texte);
  text-decoration: none; transition: background .2s, color .2s; }
.jd-sommaire ol a:hover { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .08); }
.jd-autre { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--telios-trait);
  font-size: .84rem; font-weight: 600; text-decoration: none; }
.jd-autre .telios-icone { width: 14px; height: 14px; }
.jd-texte { padding: 28px 34px; max-width: 900px; animation: sec-monte .5s ease-out .08s both; }
.jd-texte .jd-article { scroll-margin-top: 20px; margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--telios-trait);
  font-size: 1.05rem; font-weight: 800; color: var(--telios-accent); }
.jd-texte .jd-article:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.jd-texte p, .jd-texte li { line-height: 1.65; color: var(--telios-texte); }
.jd-texte ul { padding-left: 20px; }
.jd-langue { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: .86rem;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.jd-langue .telios-icone { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .jd-sommaire, .jd-texte { animation: none; } }

/* Administration, CGV & CGU (administration/juridique.html) : deux cartes
   qui entrent l'une après l'autre, un emblème en pastille et en filigrane. */
.jd-alerte { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .1); border: 1px solid rgba(var(--tblr-warning-rgb), .35); }
.jd-alerte .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.jd-cartes { display: grid; gap: 18px; }
@media (min-width: 1100px) { .jd-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jd-carte { position: relative; overflow: hidden; padding: 22px 24px; border-radius: 12px; --jd-teinte: var(--telios-accent);
  animation: cp-tuile .6s cubic-bezier(.2, .8, .2, 1) both; transition: transform .25s, box-shadow .25s; }
.jd-carte-cgu { --jd-teinte: var(--telios-marque); animation-delay: .1s; }
.jd-carte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--jd-teinte);
  transform-origin: left; animation: cp-trait .9s .25s cubic-bezier(.2, .8, .2, 1) both; }
.jd-carte:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -22px color-mix(in srgb, var(--jd-teinte) 70%, transparent); }
.jd-filigrane { position: absolute; right: -20px; bottom: -26px; color: var(--jd-teinte); opacity: .07; pointer-events: none; }
.jd-filigrane .telios-icone { width: 160px; height: 160px; }
.jd-carte-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.jd-embleme { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px;
  color: var(--telios-encre-sur-accent); background: var(--jd-teinte);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--jd-teinte) 80%, transparent); }
.jd-embleme .telios-icone { width: 26px; height: 26px; }
.jd-sigle { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .14em; color: var(--jd-teinte); }
.jd-carte-titre { margin: 0; font-size: 1.15rem; font-weight: 800; }
.jd-version { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap;
  color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.jd-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.jd-faits > div { padding: 10px 12px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.jd-faits dt { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--telios-texte-attenue); }
.jd-faits dt .telios-icone { width: 13px; height: 13px; }
.jd-faits dd { margin: 2px 0 0; font-weight: 800; }
.jd-motif { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: .86rem; color: var(--telios-texte-attenue); }
.jd-motif .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.jd-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jd-historique summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .86rem; font-weight: 700; }
.jd-historique summary .telios-icone { width: 15px; height: 15px; }
.jd-historique ol { margin: 10px 0 0; padding: 0; list-style: none; }
.jd-historique li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--telios-trait); font-size: .84rem; }
.jd-historique li span { color: var(--telios-texte-attenue); overflow: hidden; text-overflow: ellipsis; }
.jd-historique li a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600; }
.jd-historique li a .telios-icone { width: 14px; height: 14px; }
.jd-historique-n { white-space: nowrap; }
.jd-dialogue { width: min(860px, calc(100vw - 24px)); }
.jd-editeur { width: min(1100px, calc(100vw - 24px)); }
.jd-texte-fenetre { display: block; max-height: 62vh; overflow-y: auto; padding: 22px 28px; }
.jd-editeur-corps { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.jd-zone { font-family: var(--tblr-font-monospace); font-size: .84rem; line-height: 1.55; min-height: 50vh; }
.jd-aide { padding: 14px 16px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.jd-aide-liste { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .8rem; }
.jd-aide-liste code { font-size: .76rem; }
.jd-envoi-chiffre { margin: 0 0 12px; font-size: 1rem; }
.jd-envoi-chiffre strong { font-size: 1.8rem; font-weight: 800; color: var(--telios-accent); margin-right: 6px; }
.jd-envoi-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jd-envoi-liste li { display: flex; gap: 8px; align-items: flex-start; }
.jd-envoi-liste .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-accent); }
.jd-deja { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; color: var(--telios-alerte); font-weight: 600; }
.jd-deja .telios-icone { width: 16px; height: 16px; }
@media (max-width: 899.98px) { .jd-editeur-corps { grid-template-columns: minmax(0, 1fr); } .jd-faits { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .jd-carte, .jd-carte::before { animation: none; } .jd-carte:hover { transform: none; } }

/* La case des CGV et CGU avant un engagement (juridique/_case.html). */
.jd-case { flex-basis: 100%; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); text-align: left; transition: border-color .2s, background-color .2s; }
.jd-case:has(input:checked) { border-color: rgba(var(--tblr-success-rgb), .5); background: rgba(var(--tblr-success-rgb), .06); }
.jd-case .form-check-input { flex: none; float: none; margin: 1px 0 0; }
.jd-case .form-check-label { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.45; }
.jd-case .form-check-label .telios-icone { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--telios-accent); }
.tb-dialogue-conditions { display: grid; gap: 6px; }
.ac-carte { width: min(560px, calc(100vw - 24px)); }
.ac-carte-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 12px; color: var(--telios-texte-attenue); }
.ac-carte-prix strong { font-size: 1.9rem; font-weight: 800; color: var(--telios-texte); }
.ac-carte-prix span { flex-basis: 100%; font-size: .86rem; }
.ac-carte-faits { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.ac-carte-faits li { display: flex; gap: 8px; align-items: center; }
.ac-carte-faits .telios-icone { flex: none; width: 16px; height: 16px; color: var(--telios-accent); }

/* Clients : la colonne « CGV & CGU ». Vert scellé si les deux textes sont
   acceptés ; sinon un triangle d'alerte, jamais vert — la fenêtre de la
   prochaine connexion les demandera (comptes.middleware). */
.cl-cgv { display: inline-flex; align-items: flex-start; gap: 8px; white-space: nowrap; font-weight: 600; }
.cl-cgv > span { display: flex; flex-direction: column; line-height: 1.25; }
.cl-cgv small { font-size: .74rem; font-weight: 400; color: var(--telios-texte-attenue); }
.cl-cgv .sceau { margin-top: 1px; }
.cl-cgv-ok { color: var(--telios-ok); }
.cl-cgv-manque { color: var(--telios-alerte); }
.cl-cgv-manque .telios-icone { flex: none; width: 17px; height: 17px; animation: cl-cgv-appel 2.4s ease-in-out infinite; }
@keyframes cl-cgv-appel { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-4deg); } }
/* Une ancienne version acceptée : la nouvelle est demandée à la prochaine
   connexion. Ni vert (rien de prouvé pour le texte en vigueur), ni alerte. */
.cl-cgv-attente { color: var(--telios-accent); }
@media (prefers-reduced-motion: reduce) { .cl-cgv-manque .telios-icone { animation: none; } }

/* Fenêtre imposée des CGV et CGU (juridique/accepter.html) : la famille de
   celle du premier mot de passe (mp-*), deux documents qui entrent l'un après
   l'autre et passent au vert une fois leur case cochée. */
.ja-dialogue { width: min(600px, calc(100vw - 24px)); }
.ja-corps { gap: 12px; }
.ja-document { padding: 14px 16px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait);
  --ja-teinte: var(--telios-accent); animation: vi-entre .5s cubic-bezier(.2, .8, .2, 1) .3s both;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.ja-document-cgu { --ja-teinte: var(--telios-marque); animation-delay: .42s; }
.ja-document:has(input:checked) { border-color: rgba(var(--tblr-success-rgb), .55); background: rgba(var(--tblr-success-rgb), .07);
  box-shadow: 0 10px 24px -18px rgba(var(--tblr-success-rgb), .9); }
.ja-document-tete { display: flex; align-items: center; gap: 12px; }
.ja-pastille { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  color: var(--telios-encre-sur-accent); background: var(--ja-teinte); transition: background-color .25s ease; }
.ja-document:has(input:checked) .ja-pastille { background: var(--telios-ok); }
.ja-pastille .telios-icone { width: 20px; height: 20px; }
.ja-document-nom { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.3; }
.ja-document-nom small { font-size: .78rem; color: var(--telios-texte-attenue); }
.ja-lire { flex: none; }
.ja-case { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding-top: 12px; cursor: pointer;
  border-top: 1px dashed var(--telios-trait); font-size: .875rem; line-height: 1.45; }
.ja-case .form-check-input { flex: none; float: none; margin: 1px 0 0; }
.ja-document:has(input:checked) .ja-case { color: var(--telios-texte); }
@media (max-width: 575.98px) { .ja-document-tete { flex-wrap: wrap; } .ja-document-nom { flex-basis: calc(100% - 52px); } }
/* Après une mise à jour : la pastille « Nouvelle version » luit une fois
   par cycle, et ce qui change s'affiche sous le texte, filet à la teinte du
   document, pour que la case ne se coche pas à l'aveugle. */
.ja-nouveau { flex: none; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ja-teinte); background: var(--telios-carte); border: 1px solid var(--ja-teinte);
  animation: ja-nouveau-lueur 2.8s ease-in-out .9s infinite; }
@keyframes ja-nouveau-lueur { 0%, 60%, 100% { box-shadow: 0 0 0 0 transparent; } 75% { box-shadow: 0 0 0 5px var(--telios-lueur); } }
.ja-motif { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--ja-teinte); border-radius: 6px;
  background: var(--telios-carte); font-size: .85rem; line-height: 1.45; color: var(--telios-texte); }
.ja-motif b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--telios-texte-attenue); }
@media (prefers-reduced-motion: reduce) { .ja-document, .ja-nouveau { animation: none; transition: none; } }

/* CGV & CGU : l'état des traductions de la version en vigueur, et leurs
   zones dans l'éditeur. Une langue faite est verte ; absente, elle reste
   neutre — la page publique affiche alors le français, et le dit. */
.jd-langues { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: .8rem; color: var(--telios-texte-attenue); }
.jd-langues > .telios-icone { width: 14px; height: 14px; }
.jd-langues > span:first-of-type { margin-right: 4px; }
.jd-langue-puce { padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: .72rem; letter-spacing: .06em;
  border: 1px dashed var(--telios-trait); color: var(--telios-texte-attenue); }
.jd-langue-faite { border-style: solid; border-color: rgba(var(--tblr-success-rgb), .45); color: var(--telios-ok);
  background: rgba(var(--tblr-success-rgb), .1); }
.jd-traduction summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.jd-traduction summary .telios-icone { width: 15px; height: 15px; }
.jd-trad-ok { font-weight: 400; font-size: .78rem; color: var(--telios-texte-attenue); }
.jd-zone-traduction { min-height: 30vh; margin-top: 8px; }

/* Tableau de bord client : « Appareils couverts en ce moment »
   (comptes/tableau.html, comptes/appareils.py). Un en-tête qui résume, des
   chiffres qui filtrent, un filtre sous chaque titre de colonne, une jauge
   des trente jours. Les lignes entrent en cascade ; tout s'arrête sous
   prefers-reduced-motion. */
.ap { overflow: hidden; border-radius: 12px; }
.ap-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(120deg, rgba(var(--tblr-primary-rgb), .07), transparent 60%); }
.ap-intitule { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ap-embleme { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 10px 22px -12px rgba(var(--tblr-primary-rgb), .9); }
.ap-embleme .telios-icone { width: 22px; height: 22px; }
.ap-titre { margin: 0; font-size: 1.08rem; font-weight: 800; }
.ap-sous-titre { margin: 2px 0 0; font-size: .82rem; color: var(--telios-texte-attenue); }
.ap-chiffres { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chiffre { display: flex; flex-direction: column; min-width: 112px; padding: 9px 14px; border-radius: 12px; text-decoration: none;
  color: var(--telios-texte); background: var(--telios-carte); border: 1px solid var(--telios-trait);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ap-chiffre strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-chiffre span { font-size: .74rem; color: var(--telios-texte-attenue); white-space: nowrap; }
a.ap-chiffre:hover { transform: translateY(-2px); border-color: rgba(var(--tblr-primary-rgb), .45);
  box-shadow: 0 12px 24px -16px rgba(var(--tblr-primary-rgb), .8); }
a.ap-chiffre:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.ap-chiffre-alerte { border-color: rgba(var(--tblr-warning-rgb), .5); background: rgba(var(--tblr-warning-rgb), .08); }
.ap-chiffre-alerte strong { color: var(--telios-alerte); }
.ap-chiffre-direct strong { color: var(--telios-accent); }
.ap-chiffre-neutre { background: var(--telios-bg-alt); }
.ap-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 22px;
  border-bottom: 1px solid var(--telios-trait); }
.ap-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: .84rem; color: var(--telios-texte-attenue); }
.ap-filtres-actifs { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-weight: 700;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ap-filtres-actifs .telios-icone, .ap-effacer .telios-icone { width: 13px; height: 13px; }
.ap-effacer { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.ap-actions { display: flex; gap: 8px; margin: 0; }
.ap-actions .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.ap-table { margin: 0; }
.ap-table thead .ap-titres th { white-space: nowrap; }
.ap-tri { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.ap-tri:hover { color: var(--telios-accent); }
.ap-tri-sens .telios-icone { width: 13px; height: 13px; opacity: .4; transition: opacity .2s ease; }
.ap-tri:hover .ap-tri-sens .telios-icone { opacity: .8; }
.ap-tri-sens.est-actif .telios-icone { opacity: 1; color: var(--telios-accent); }
.ap-titres th[aria-sort] .ap-tri { color: var(--telios-accent); }
.ap-ligne-filtres th { padding-top: 6px; padding-bottom: 10px; background: var(--telios-bg-alt); text-transform: none;
  letter-spacing: 0; font-weight: 400; }
/* Une largeur plancher : une valeur choisie (« COMPTOIR-LYON », « 7 jours ou
   ≤ 7 jours ») se lit en entier ; au-delà, le tableau défile plutôt que de rogner. */
.ap-filtre { min-width: 120px; font-size: .8rem; transition: border-color .2s ease, box-shadow .2s ease; }
.ap-filtre.est-actif { border-color: var(--telios-accent); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .14);
  color: var(--telios-accent); font-weight: 700; }
.ap-filtre-nom { display: none; }
@media (max-width: 1399.98px) { .ap-filtre { min-width: 108px; } .ap-table th, .ap-table td { padding-left: 10px; padding-right: 10px; } }
.ap-ligne { animation: ap-ligne-entre .45s cubic-bezier(.2, .8, .2, 1) both; transition: background-color .15s ease; }
.ap-ligne:hover { background: rgba(var(--tblr-primary-rgb), .035); }
.ap-ligne:nth-child(2) { animation-delay: .03s; } .ap-ligne:nth-child(3) { animation-delay: .06s; }
.ap-ligne:nth-child(4) { animation-delay: .09s; } .ap-ligne:nth-child(5) { animation-delay: .12s; }
.ap-ligne:nth-child(6) { animation-delay: .15s; } .ap-ligne:nth-child(7) { animation-delay: .18s; }
.ap-ligne:nth-child(8) { animation-delay: .21s; } .ap-ligne:nth-child(n+9) { animation-delay: .24s; }
@keyframes ap-ligne-entre { from { opacity: 0; transform: translateY(6px); } }
.ap-appareil { display: flex; align-items: center; gap: 10px; }
.ap-appareil > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.ap-appareil small { font-size: .72rem; color: var(--telios-texte-attenue); }
.ap-pastille { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ap-pastille .telios-icone { width: 16px; height: 16px; }
.ap-cellule { display: inline-flex; align-items: center; gap: 7px; }
.ap-cellule .telios-icone { flex: none; width: 15px; height: 15px; color: var(--telios-texte-attenue); }
.ap-droit { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  white-space: nowrap; color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.ap-droit .telios-icone { width: 13px; height: 13px; }
.ap-droit-essai { color: var(--telios-marque); background: color-mix(in srgb, var(--telios-marque) 12%, transparent); }
.ap-droit-illimite { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.ap-etat { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ap-etat i { width: 8px; height: 8px; border-radius: 999px; }
.ap-etat-couvert { color: var(--telios-ok); } .ap-etat-couvert i { background: var(--telios-ok); }
.ap-etat-cours { color: var(--telios-accent); }
.ap-etat-cours i { background: var(--telios-accent); animation: ap-battement 1.6s ease-in-out infinite; }
@keyframes ap-battement { 50% { box-shadow: 0 0 0 5px rgba(var(--tblr-primary-rgb), .18); } }
.ap-date { display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; }
.ap-date small { font-size: .72rem; color: var(--telios-texte-attenue); }
.ap-echeance { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.ap-jours { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.ap-jours strong { font-size: 1rem; font-weight: 800; }
.ap-jours small { margin-left: 4px; font-size: .72rem; color: var(--telios-texte-attenue); }
.ap-jauge { display: block; height: 5px; border-radius: 999px; background: var(--telios-trait); overflow: hidden; }
.ap-jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--telios-ok); transform-origin: left;
  animation: ap-jauge-remplit .8s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes ap-jauge-remplit { from { transform: scaleX(0); } }
.ap-jauge-0 { width: 0; } .ap-jauge-1 { width: 10%; } .ap-jauge-2 { width: 20%; } .ap-jauge-3 { width: 30%; }
.ap-jauge-4 { width: 40%; } .ap-jauge-5 { width: 50%; } .ap-jauge-6 { width: 60%; } .ap-jauge-7 { width: 70%; }
.ap-jauge-8 { width: 80%; } .ap-jauge-9 { width: 90%; } .ap-jauge-10 { width: 100%; }
.est-proche .ap-jours strong { color: var(--telios-alerte); }
.est-proche .ap-jauge > span { background: var(--telios-alerte); }
.ap-unique { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border: 1px dashed var(--telios-trait); }
.ap-unique .telios-icone { width: 13px; height: 13px; }
.ap-vide { padding: 28px 20px; }
.ap-vide .btn .telios-icone { width: 14px; height: 14px; margin-right: 6px; }
.ap-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ap-pages .page-link { display: inline-flex; align-items: center; gap: 4px; }
.ap-pages .telios-icone { width: 14px; height: 14px; }
/* Mobile : l'en-tête de Tabler disparaît (table-mobile-md) ; la ligne des
   filtres, elle, reste, en grille, chaque liste nommée par sa colonne. */
@media (max-width: 767.98px) {
  .ap-table thead { display: block; }
  .ap-table thead .ap-titres { display: none; }
  .ap-table .ap-ligne-filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
  .ap-table .ap-ligne-filtres th { display: block; padding: 0; border: 0; background: none; }
  .ap-filtre { min-width: 0; }
  .ap-filtre-nom { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: .74rem; font-weight: 700; }
  .ap-filtre-nom .telios-icone { width: 13px; height: 13px; }
  .ap-tete, .ap-barre { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-ligne, .ap-jauge > span, .ap-etat-cours i { animation: none; }
  .ap-chiffre, .ap-filtre, .ap-tri-sens .telios-icone { transition: none; }
}

/* CGV & CGU : une version en vigueur jamais envoyée aux clients. Les textes
   promettent l'envoi de chaque mise à jour par courriel : le rappel tient la
   tête de page tant qu'elle n'est pas partie. */
.jd-a-envoyer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(var(--tblr-primary-rgb), .07); border: 1px solid rgba(var(--tblr-primary-rgb), .3); }
.jd-a-envoyer-icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); animation: vi-pulse 3.2s ease-in-out infinite; }
.jd-a-envoyer-icone .telios-icone { width: 18px; height: 18px; }
.jd-a-envoyer-texte { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; font-size: .88rem; }
.jd-a-envoyer-texte span { color: var(--telios-texte-attenue); }
.jd-a-envoyer-gestes { display: flex; gap: 8px; }
.jd-a-envoyer-gestes .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .jd-a-envoyer-icone { animation: none; } }

/* ── Atelier → Banc UAT (administration/banc.html, banc_seance.html) ─────
   Le banc d'essai de l'éditeur. L'en-tête vit (orbites, téléphone balayé,
   bulles du flacon), les chiffres défilent, les barres se remplissent, les
   arcs du bilan se dessinent ; en direct, la jauge avance et l'onde pulse.
   Couleurs de sens : vert conforme, rouge écart, orange impossible ; tout
   en jetons du thème. Sous prefers-reduced-motion, rien ne bouge. */
.bc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px 28px; align-items: center;
  margin: 0 0 18px; padding: 26px 28px; border-radius: 12px; overflow: hidden; color: var(--telios-texte);
  background: linear-gradient(125deg, rgba(var(--tblr-primary-rgb), .16), rgba(var(--tblr-primary-rgb), .03) 55%, transparent),
              var(--telios-carte);
  border: 1px solid rgba(var(--tblr-primary-rgb), .22); animation: bc-surgit .7s cubic-bezier(.2, .8, .2, 1) both; }
.bc-hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 360px; height: 360px; border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--tblr-primary-rgb), .18), transparent 65%); pointer-events: none;
  animation: bc-respire 6s ease-in-out infinite; }
@keyframes bc-surgit { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes bc-respire { 50% { transform: scale(1.12); opacity: .7; } }
.bc-surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--telios-accent);
  background: rgba(var(--tblr-primary-rgb), .1); }
.bc-surtitre .telios-icone { width: 14px; height: 14px; }
.bc-titre { margin: 0 0 10px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; }
.bc-accroche { max-width: 62ch; margin: 0; color: var(--telios-texte-attenue); line-height: 1.55; }
.bc-embleme { position: relative; grid-row: span 2; display: grid; place-items: center; width: 200px; height: 200px; justify-self: end; }
.bc-orbite { position: absolute; inset: 14px; border-radius: 999px; border: 1px dashed rgba(var(--tblr-primary-rgb), .45);
  animation: bc-tourne 18s linear infinite; }
.bc-orbite::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 999px;
  background: var(--telios-accent); box-shadow: 0 0 12px rgba(var(--tblr-primary-rgb), .9); }
.bc-orbite-2 { inset: 38px; border-style: solid; border-color: rgba(var(--tblr-success-rgb), .35); animation-duration: 11s;
  animation-direction: reverse; }
.bc-orbite-2::before { background: var(--telios-ok); box-shadow: 0 0 12px rgba(var(--tblr-success-rgb), .9); }
@keyframes bc-tourne { to { transform: rotate(360deg); } }
.bc-telephone { position: relative; width: 62px; height: 110px; padding: 6px; border-radius: 12px; background: var(--telios-texte);
  box-shadow: 0 18px 30px -14px rgba(var(--tblr-primary-rgb), .9); animation: bc-flotte 4s ease-in-out infinite; }
@keyframes bc-flotte { 50% { transform: translateY(-6px) rotate(-2deg); } }
.bc-ecran { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 6px; border-radius: 6px;
  overflow: hidden; background: var(--telios-carte); }
.bc-ecran i { display: block; height: 7px; border-radius: 999px; background: rgba(var(--tblr-primary-rgb), .25); }
.bc-ecran i:nth-child(3) { width: 70%; } .bc-ecran i:nth-child(4) { width: 45%; background: rgba(var(--tblr-success-rgb), .45); }
.bc-balayage { position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(var(--tblr-primary-rgb), .45), transparent); animation: bc-balaie 2.6s ease-in-out infinite; }
@keyframes bc-balaie { from { transform: translateY(-24px); } to { transform: translateY(100px); } }
.bc-bulle { position: absolute; bottom: 26px; width: 8px; height: 8px; border-radius: 999px; background: rgba(var(--tblr-primary-rgb), .5);
  animation: bc-monte 3.4s ease-in infinite; }
.bc-bulle-1 { left: 52px; } .bc-bulle-2 { left: 136px; width: 6px; height: 6px; animation-delay: 1.1s; }
.bc-bulle-3 { left: 96px; width: 5px; height: 5px; animation-delay: 2.2s; background: rgba(var(--tblr-success-rgb), .55); }
@keyframes bc-monte { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-150px); opacity: 0; } }
.bc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bc-kpi { padding: 12px 14px; border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait);
  animation: bc-surgit .55s cubic-bezier(.2, .8, .2, 1) both; }
.bc-kpi:nth-child(2) { animation-delay: .06s; } .bc-kpi:nth-child(3) { animation-delay: .12s; }
.bc-kpi:nth-child(4) { animation-delay: .18s; } .bc-kpi:nth-child(5) { animation-delay: .24s; }
.bc-kpi dt { font-size: .72rem; font-weight: 600; color: var(--telios-texte-attenue); }
.bc-kpi dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bc-kpi dd small { margin-left: 2px; font-size: .9rem; color: var(--telios-texte-attenue); }
.bc-kpi-reussite dd { color: var(--telios-accent); }
.bc-kpi-ok dd { color: var(--telios-ok); }
.bc-kpi-alerte { border-color: rgba(var(--tblr-danger-rgb), .5); background: rgba(var(--tblr-danger-rgb), .07); }
.bc-kpi-alerte dd { color: var(--telios-danger); }

/* En direct */
.bc-direct { margin: 0 0 18px; }
.bc-direct-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 800; }
.bc-point-vivant { position: relative; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--telios-ok); }
.bc-point-vivant::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--telios-ok);
  animation: bc-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes bc-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.bc-direct-cartes { display: grid; gap: 12px; }
@media (min-width: 1100px) { .bc-direct-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bc-live { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--telios-carte); border: 1px solid rgba(var(--tblr-success-rgb), .45);
  box-shadow: 0 18px 34px -24px rgba(var(--tblr-success-rgb), .9); animation: bc-surgit .5s ease both; }
.bc-live:hover { border-color: var(--telios-lueur); }
/* Le halo d'une séance en cours : un liseré de lumière qui fait le tour de
   la carte (::before, dégradé conique dont l'angle tourne) et une lueur qui
   respire autour (::after). La carte n'est jamais remplacée pendant la
   séance (telios.js, bancFusionner) : le halo tourne sans à-coup. */
@property --bc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.bc-live { position: relative; isolation: isolate; border-color: transparent;
  box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--telios-lueur) 90%, transparent); }
/* Piège : dans le contexte d'empilement de la carte (isolation), un
   pseudo-élément en z-index négatif se peint AU-DESSUS du fond de la carte :
   sans masque, le dégradé couvrirait tout le contenu. Le masque n'en garde
   que l'anneau de 2 px du bord (padding), par composition « exclude ». */
.bc-live::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 14px; padding: 2px;
  -webkit-mask: linear-gradient(currentcolor 0 0) content-box, linear-gradient(currentcolor 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(currentcolor 0 0) content-box exclude, linear-gradient(currentcolor 0 0);
  pointer-events: none;
  /* --telios-lueur (thème), pas --telios-alerte : ce dernier est foncé pour
     rester lisible en texte, et tire sur le brun en lumière. */
  background: conic-gradient(from var(--bc-angle), color-mix(in srgb, var(--telios-lueur) 22%, transparent) 0deg,
              color-mix(in srgb, var(--telios-lueur) 22%, transparent) 200deg, var(--telios-lueur) 295deg,
              color-mix(in srgb, var(--telios-lueur) 85%, transparent) 330deg, color-mix(in srgb, var(--telios-lueur) 22%, transparent) 360deg);
  animation: bc-halo-tourne 3.6s linear infinite; }
.bc-live::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--telios-lueur) 45%, transparent),
              0 0 30px 7px color-mix(in srgb, var(--telios-lueur) 45%, transparent);
  animation: bc-halo-respire 2.8s ease-in-out infinite; }
.bc-live { background: var(--telios-carte); background-clip: padding-box; }
@keyframes bc-halo-tourne { to { --bc-angle: 360deg; } }
/* Le halo dit l'état : orange pendant la campagne (décision de l'éditeur du
   10/10/2026), rouge dès qu'un faux succès est compté, gris éteint quand le
   poste se tait depuis plus de cinq minutes (vues_banc._carte, « halo »). */
.bc-live.est-faux::before { background: conic-gradient(from var(--bc-angle), rgba(var(--tblr-danger-rgb), .2) 0deg,
  rgba(var(--tblr-danger-rgb), .2) 200deg, var(--telios-danger) 300deg, rgba(var(--tblr-danger-rgb), .2) 360deg); }
.bc-live.est-faux::after { box-shadow: 0 0 0 1px rgba(var(--tblr-danger-rgb), .3), 0 0 28px 6px rgba(var(--tblr-danger-rgb), .4); }
.bc-live.est-silence::before { background: conic-gradient(from var(--bc-angle), var(--telios-trait) 0deg, var(--telios-trait) 220deg,
  var(--telios-texte-attenue) 320deg, var(--telios-trait) 360deg); animation-duration: 9s; }
.bc-live.est-silence::after { box-shadow: 0 0 0 1px var(--telios-trait), 0 0 18px 2px rgba(var(--tblr-primary-rgb), .08); animation: none; opacity: .7; }
.bc-live.est-faux .bc-jauge-plein { stroke: var(--telios-danger); }
.bc-live.est-silence .bc-jauge-plein { stroke: var(--telios-texte-attenue); }
/* Une séance finie quitte le direct en fondu. */
.bc-live.bc-sortie { opacity: 0; transform: scale(.98); transition: opacity .4s ease, transform .4s ease; }
@keyframes bc-halo-respire { 0%, 100% { opacity: .35; transform: scale(.99); } 50% { opacity: 1; transform: scale(1.01); } }
.bc-live-jauge { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; }
.bc-live-jauge strong { position: absolute; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-live-jauge strong small { font-size: .65rem; }
.bc-live-jauge-grande { width: 120px; height: 120px; } .bc-live-jauge-grande strong { font-size: 1.7rem; }
.bc-jauge { width: 100%; height: 100%; }
.bc-jauge-fond { fill: none; stroke: var(--telios-trait); stroke-width: 6; }
.bc-jauge-plein { fill: none; stroke: var(--telios-ok); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dasharray .8s cubic-bezier(.2, .8, .2, 1), stroke .4s ease; }
.bc-live-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bc-live-tete { display: flex; flex-direction: column; line-height: 1.25; }
.bc-live-tete small { color: var(--telios-texte-attenue); font-size: .78rem; }
.bc-live-test { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; min-width: 0; }
.bc-live-test b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-live-attente { color: var(--telios-texte-attenue); font-style: italic; }
.bc-onde { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bc-onde i { width: 3px; border-radius: 999px; background: var(--telios-ok); animation: bc-onde 1s ease-in-out infinite; }
.bc-onde i:nth-child(2) { animation-delay: .15s; } .bc-onde i:nth-child(3) { animation-delay: .3s; }
@keyframes bc-onde { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.bc-seance-chiffres { justify-content: flex-start; }
.bc-live-chiffres, .bc-legende, .bc-seance-chiffres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: .76rem; }
.bc-live-chiffres > span { color: var(--telios-texte-attenue); }
.bc-c-ok, .bc-c-ko, .bc-c-imp, .bc-c-faux, .bc-c-manque, .bc-c-np { padding: 2px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.bc-c-ok { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); }
.bc-c-ko { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.bc-c-imp { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .12); }
.bc-c-manque { color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
/* Non prévu sur ce téléphone (24/10/2026) : gris, en pointillé — hors bilan,
   ni réussi ni échoué ; à ne pas confondre avec « non joué » (plein). */
.bc-c-np { color: var(--telios-texte-attenue); border: 1px dashed var(--telios-trait); font-weight: 600; }
.bc-c-faux { color: var(--telios-encre-sur-accent); background: var(--telios-danger); }
.bc-live-fil { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-live-fil span { padding: 1px 7px; border-radius: 6px; font-size: .7rem; font-family: var(--tblr-font-monospace);
  border: 1px solid var(--telios-trait); }
/* Seul le dernier résultat arrivé (le premier du fil) entre en scène. */
.bc-live-fil span:first-child { animation: bc-surgit .4s ease both; }
.bc-fil-conforme { color: var(--telios-ok); } .bc-fil-ecart { color: var(--telios-danger); } .bc-fil-impossible { color: var(--telios-alerte); }
.bc-fil-non_prevu { color: var(--telios-texte-attenue); text-decoration: line-through; }
/* Au repos, le bloc prend la largeur de son texte, pas celle de la page. */
.bc-repos { display: inline-flex; max-width: 100%; align-items: center; gap: 16px; padding: 14px 22px 14px 16px; border-radius: 12px; background: var(--telios-bg-alt);
  border: 1px dashed var(--telios-trait); }
.bc-repos > div { display: flex; flex-direction: column; font-size: .86rem; }
.bc-repos span { color: var(--telios-texte-attenue); }
.bc-radar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(var(--tblr-primary-rgb), .35);
  overflow: hidden; }
.bc-radar i { position: absolute; inset: 0; border-radius: 999px; }
.bc-radar i:first-child { background: conic-gradient(from 0deg, rgba(var(--tblr-primary-rgb), .4), transparent 30%); animation: bc-tourne 3s linear infinite; }
.bc-radar i:last-child { inset: 18px; background: var(--telios-accent); }

/* Blocs */
.bc-grille { display: grid; gap: 18px; margin-bottom: 18px; }
@media (min-width: 1100px) { .bc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bc-bloc { padding: 20px 22px; border-radius: 12px; animation: bc-surgit .6s cubic-bezier(.2, .8, .2, 1) .1s both; }
.bc-bloc-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.bc-pastille { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px;
  color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .1); }
.bc-pastille .telios-icone { width: 18px; height: 18px; }
.bc-bloc-titre { margin: 0; font-size: 1.02rem; font-weight: 800; }
.bc-sous-titre { margin: 18px 0 8px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.bc-vide { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; color: var(--telios-texte-attenue); }
.bc-vide .telios-icone { width: 42px; height: 42px; padding: 10px; margin-bottom: 4px; border-radius: 999px; background: var(--telios-bg-alt); }
.bc-vide strong { color: var(--telios-texte); }
.bc-entreprise { padding: 12px 0; border-top: 1px solid var(--telios-trait); }
.bc-entreprise-tete { display: flex; align-items: center; gap: 12px; }
.bc-monogramme { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); }
.bc-entreprise-nom { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bc-entreprise-nom small { color: var(--telios-texte-attenue); font-size: .76rem; }
.bc-entreprise-tete .btn .telios-icone { width: 14px; height: 14px; margin-right: 4px; }
.bc-postes { display: grid; gap: 6px; margin: 10px 0 0 50px; padding: 0; list-style: none; }
.bc-poste { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--telios-trait);
  transition: border-color .2s ease, background-color .2s ease; }
.bc-poste.est-accorde { border-color: rgba(var(--tblr-success-rgb), .45); background: rgba(var(--tblr-success-rgb), .06); }
.bc-poste-icone .telios-icone { width: 16px; height: 16px; color: var(--telios-texte-attenue); }
.bc-poste.est-accorde .bc-poste-icone .telios-icone { color: var(--telios-ok); }
.bc-poste-nom { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.bc-poste-nom small { color: var(--telios-texte-attenue); font-size: .72rem; }
.bc-poste form { margin: 0; }
.bc-interrupteur { position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--telios-trait); transition: background-color .25s ease; }
.bc-interrupteur span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--telios-carte);
  box-shadow: 0 2px 6px rgba(var(--tblr-primary-rgb), .25); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.bc-interrupteur[aria-checked="true"] { background: var(--telios-ok); }
.bc-interrupteur[aria-checked="true"] span { transform: translateX(18px); }
.bc-interrupteur:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.bc-ajout { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--telios-trait); }
.bc-ajout .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
/* Le champ prenait toute la ligne et écrasait « + Désigner » (20/10/2026) :
   il s'arrête à 340 px, le bouton garde sa largeur et ne passe jamais à la ligne ;
   16 px entre les deux, sinon le bouton paraît collé au champ. */
.bc-ajout .form-select { flex: 0 1 340px; min-width: 0; }
.bc-ajout .btn { flex: none; white-space: nowrap; }
/* Le cartouche de la version en service (20/10/2026) : la version à gauche,
   un filet, puis trois faits en colonnes égales qui occupent toute la largeur
   — avant, ils se serraient au début de la ligne et laissaient le reste vide.
   Mêmes fond, bordure et accent qu'avant. Étroit (fenêtre réduite, deux
   colonnes de cartes), il s'empile : la mesure suit la carte, pas l'écran. */
.bc-version { display: flex; align-items: stretch; margin-bottom: 14px; padding: 18px 22px; border-radius: 12px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); container-type: inline-size; }
.bc-version-identite { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0;
  padding-right: 24px; border-right: 1px solid var(--telios-trait); }
.bc-version-sur { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.bc-version-numero { font-size: 2.2rem; line-height: 1.1; font-weight: 800; color: var(--telios-accent);
  font-variant-numeric: tabular-nums; }
.bc-version-faits { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.bc-version-faits > div { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 2px 0 2px 22px; }
.bc-version-faits > div + div { border-left: 1px solid var(--telios-trait); margin-left: 0; }
.bc-version-faits dt { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--telios-texte-attenue); }
.bc-version-faits dt .telios-icone { width: 14px; height: 14px; color: var(--telios-accent); }
.bc-version-faits dd { margin: 0; font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 520px) {
  .bc-version-identite { padding-right: 18px; }
  .bc-version-faits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bc-version-faits > div, .bc-version-faits > div + div { flex-direction: row; justify-content: space-between; align-items: center;
    padding: 0 0 0 18px; border-left: 0; }
}
.bc-depot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(var(--tblr-primary-rgb), .45); transition: background-color .2s ease, border-color .2s ease; }
.bc-depot:hover, .bc-depot:focus-within { background: rgba(var(--tblr-primary-rgb), .06); border-color: var(--telios-accent); }
.bc-depot > .telios-icone { flex: none; width: 22px; height: 22px; color: var(--telios-accent); transform: rotate(180deg); }
.bc-depot span { display: flex; flex-direction: column; }
.bc-depot small { color: var(--telios-texte-attenue); font-size: .76rem; }
.bc-avancement { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .8rem; }
.bc-avancement-barre { flex: 1; height: 8px; border-radius: 999px; background: var(--telios-trait); overflow: hidden; }
.bc-avancement-barre > span { display: block; height: 100%; border-radius: 999px; background: var(--telios-accent); transition: width .3s ease; }
.bc-televerser-erreur { margin: 10px 0 0; color: var(--telios-danger); font-weight: 600; font-size: .84rem; }
.bc-anciens { margin: 12px 0 0; font-size: .76rem; color: var(--telios-texte-attenue); }

/* Barres de réussite : largeur par pas de 5 % (bc-l-0 … bc-l-20), remplies à l'ouverture. */
.bc-barres { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bc-barres li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: .82rem; }
.bc-barres-cle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bc-barres li strong { text-align: right; font-variant-numeric: tabular-nums; }
.bc-barres-piste { display: block; height: 10px; border-radius: 999px; background: var(--telios-trait); overflow: hidden; }
.bc-barres-piste > span { display: block; height: 100%; border-radius: 999px; background: var(--telios-ok); transform-origin: left;
  animation: bc-remplit .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
.bc-barres-piste > span.est-faible { background: var(--telios-alerte); }
@keyframes bc-remplit { from { transform: scaleX(0); } }
.bc-l-0 { width: 0; } .bc-l-1 { width: 5%; } .bc-l-2 { width: 10%; } .bc-l-3 { width: 15%; } .bc-l-4 { width: 20%; }
.bc-l-5 { width: 25%; } .bc-l-6 { width: 30%; } .bc-l-7 { width: 35%; } .bc-l-8 { width: 40%; } .bc-l-9 { width: 45%; }
.bc-l-10 { width: 50%; } .bc-l-11 { width: 55%; } .bc-l-12 { width: 60%; } .bc-l-13 { width: 65%; } .bc-l-14 { width: 70%; }
.bc-l-15 { width: 75%; } .bc-l-16 { width: 80%; } .bc-l-17 { width: 85%; } .bc-l-18 { width: 90%; } .bc-l-19 { width: 95%; }
.bc-l-20 { width: 100%; }

/* Préconisations */
.bc-precos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bc-preco { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--telios-trait); border-left-width: 4px;
  animation: bc-surgit .5s ease both; }
.bc-preco:nth-child(2) { animation-delay: .08s; } .bc-preco:nth-child(3) { animation-delay: .16s; } .bc-preco:nth-child(n+4) { animation-delay: .24s; }
.bc-preco p { margin: 2px 0 0; font-size: .84rem; color: var(--telios-texte-attenue); }
.bc-preco-icone .telios-icone { width: 18px; height: 18px; margin-top: 2px; }
.bc-preco-bloquant { border-left-color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .05); }
.bc-preco-bloquant .bc-preco-icone { color: var(--telios-danger); }
.bc-preco-avertissement { border-left-color: var(--telios-alerte); } .bc-preco-avertissement .bc-preco-icone { color: var(--telios-alerte); }
.bc-preco-conseil { border-left-color: var(--telios-accent); } .bc-preco-conseil .bc-preco-icone { color: var(--telios-accent); }
.bc-preco-felicitation { border-left-color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .05); }
.bc-preco-felicitation .bc-preco-icone { color: var(--telios-ok); }
.bc-preco-tests summary { margin-top: 6px; cursor: pointer; font-size: .78rem; font-weight: 700; }
.bc-preco-tests ul { margin: 6px 0 0; padding-left: 18px; font-size: .76rem; }
.bc-preco-rien { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--telios-texte-attenue); }
.bc-preco-rien .telios-icone { width: 16px; height: 16px; color: var(--telios-ok); }

/* Séances récentes */
.bc-seances { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bc-seance { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) minmax(120px, 1fr) 210px 120px; gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid var(--telios-trait);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.bc-seance:hover { transform: translateY(-2px); border-color: rgba(var(--tblr-primary-rgb), .45);
  box-shadow: 0 14px 26px -20px rgba(var(--tblr-primary-rgb), .9); }
.bc-seance-sceau { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; }
.bc-seance-sceau .telios-icone { width: 17px; height: 17px; }
.bc-verdict-conforme .bc-seance-sceau { color: var(--telios-encre-sur-accent); background: var(--telios-ok); }
.bc-verdict-ecarts .bc-seance-sceau { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .12); }
.bc-verdict-bloquant .bc-seance-sceau { color: var(--telios-encre-sur-accent); background: var(--telios-danger); }
.bc-verdict-en_cours .bc-seance-sceau { color: var(--telios-ok); background: rgba(var(--tblr-success-rgb), .12); animation: bc-battement 1.6s ease-in-out infinite; }
.bc-verdict-vide .bc-seance-sceau { color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
@keyframes bc-battement { 50% { box-shadow: 0 0 0 6px rgba(var(--tblr-success-rgb), .15); } }
.bc-seance-quoi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bc-seance-quoi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--telios-texte-attenue); font-size: .76rem; }
.bc-seance-taux { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: .82rem; }
.bc-seance-taux strong { text-align: right; font-variant-numeric: tabular-nums; }
.bc-seance-quand { display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem; font-variant-numeric: tabular-nums; }
.bc-seance-quand small { color: var(--telios-texte-attenue); }

/* Bilan d'une séance */
.bc-bilan { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 18px; padding: 22px 26px;
  border-radius: 12px; background: var(--telios-carte); border: 1px solid var(--telios-trait); animation: bc-surgit .6s ease both; }
.bc-bilan.bc-verdict-conforme { border-color: rgba(var(--tblr-success-rgb), .5); }
.bc-bilan.bc-verdict-bloquant { border-color: rgba(var(--tblr-danger-rgb), .55); background: linear-gradient(120deg, rgba(var(--tblr-danger-rgb), .07), transparent 60%), var(--telios-carte); }
.bc-bilan.bc-verdict-ecarts { border-color: rgba(var(--tblr-warning-rgb), .5); }
.bc-bilan-visuel { display: grid; place-items: center; }
.bc-anneau-cadre { position: relative; display: grid; place-items: center; width: 180px; height: 180px; }
.bc-anneau { width: 100%; height: 100%; }
.bc-anneau-fond { fill: none; stroke: var(--telios-trait); stroke-width: 16; }
.bc-arc { fill: none; stroke-width: 16; animation: bc-trace 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.bc-arc-1 { animation-delay: .15s; } .bc-arc-2 { animation-delay: .3s; } .bc-arc-3 { animation-delay: .45s; }
@keyframes bc-trace { from { opacity: 0; stroke-width: 2; } }
.bc-arc-ok { stroke: var(--telios-ok); } .bc-arc-ko { stroke: var(--telios-danger); } .bc-arc-imp { stroke: var(--telios-alerte); }
.bc-arc-manque { stroke: var(--telios-texte-attenue); }
.bc-anneau-centre { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.bc-anneau-centre strong { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-anneau-centre small { margin-top: 4px; font-size: .72rem; color: var(--telios-texte-attenue); }
.bc-bilan-etiquette { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; }
.bc-bilan-etiquette .telios-icone { width: 15px; height: 15px; }
.bc-verdict-conforme .bc-bilan-etiquette { color: var(--telios-ok); }
.bc-verdict-bloquant .bc-bilan-etiquette { color: var(--telios-danger); }
.bc-verdict-ecarts .bc-bilan-etiquette { color: var(--telios-alerte); }
.bc-verdict-en_cours .bc-bilan-etiquette { color: var(--telios-ok); }
.bc-bilan-titre { margin: 0 0 12px; font-size: 1.4rem; font-weight: 800; }
.bc-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.bc-tuile { padding: 10px 12px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.bc-tuile dt { font-size: .72rem; font-weight: 600; color: var(--telios-texte-attenue); }
.bc-tuile dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bc-tuile-ok dd { color: var(--telios-ok); } .bc-tuile-ko dd { color: var(--telios-danger); }
.bc-tuile-faux { border-color: rgba(var(--tblr-danger-rgb), .5); } .bc-tuile-faux dd { color: var(--telios-danger); }
.bc-autres { margin: 0; padding-left: 18px; font-size: .84rem; }
.bc-table td { vertical-align: top; }
.bc-ligne { animation: bc-surgit .35s ease both; }
.bc-pourquoi { display: block; margin-top: 2px; font-size: .74rem; color: var(--telios-texte-attenue); }
.bc-ecarts summary { margin-top: 4px; cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--telios-danger); }
.bc-ecarts ul { margin: 4px 0 0; padding-left: 18px; font-size: .76rem; }
/* Un non prévu porte sa raison, pas un écart (24/10/2026) : gris, jamais rouge. */
.bc-raison summary, .bc-raison ul { color: var(--telios-texte-attenue); }
.bc-issue { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .82rem; white-space: nowrap; }
.bc-issue .telios-icone { width: 14px; height: 14px; }
.bc-issue-conforme { color: var(--telios-ok); } .bc-issue-ecart { color: var(--telios-danger); } .bc-issue-impossible { color: var(--telios-alerte); }
.bc-issue-non_prevu { color: var(--telios-texte-attenue); font-weight: 600; }
.bc-ligne-non_prevu td { color: var(--telios-texte-attenue); }
.bc-issue + .bc-c-faux { margin-left: 6px; font-size: .72rem; }
@media (max-width: 991.98px) {
  .bc-hero { grid-template-columns: minmax(0, 1fr); } .bc-embleme { display: none; }
  .bc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-bilan { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .bc-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-seance { grid-template-columns: 36px minmax(0, 1fr); } .bc-seance-taux, .bc-seance-chiffres, .bc-seance-quand { grid-column: 2; align-items: flex-start; }
  .bc-postes { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-hero, .bc-hero::after, .bc-orbite, .bc-telephone, .bc-balayage, .bc-bulle, .bc-kpi, .bc-live, .bc-point-vivant::after,
  .bc-onde i, .bc-live-fil span, .bc-radar i, .bc-live::before, .bc-live::after, .bc-bloc, .bc-barres-piste > span, .bc-preco, .bc-seance-sceau, .bc-bilan, .bc-arc, .bc-ligne { animation: none; }
  .bc-jauge-plein, .bc-interrupteur, .bc-interrupteur span, .bc-seance { transition: none; }
}

/* Banc UAT : une séance jouée avec un banc qui n'est pas la version publiée
   (le banc du dépôt, geste 13 de la recette de l'éditeur, ou une ancienne
   version). Signalée, jamais refusée : on ne compare pas deux bancs sans le savoir. */
.bc-banc { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.bc-banc .telios-icone { width: 12px; height: 12px; }
.bc-banc-non_publie { color: var(--telios-alerte); background: rgba(var(--tblr-warning-rgb), .14); border: 1px dashed rgba(var(--tblr-warning-rgb), .55); }
.bc-banc-ancien { color: var(--telios-texte-attenue); background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.bc-bilan-texte > .bc-banc { margin: 0 0 8px; }


/* Banc UAT, séances récentes : une séance qui tourne n'a pas de taux final.
   À la place de la barre (qui disait « 100 % » après un seul test réussi),
   une piste où file une lueur, et « En cours ». */
.bc-encours { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .82rem; }
/* Orange, comme le halo de la carte en direct (décision de l'éditeur du
   10/10/2026) : --telios-lueur pour la piste et le point ; le libellé, lui,
   assombrit la lueur vers le texte du thème pour rester lisible. */
.bc-encours-piste { position: relative; display: block; height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--telios-lueur) 16%, transparent); }
.bc-encours-piste i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--telios-lueur), transparent); animation: bc-file 1.6s ease-in-out infinite; }
@keyframes bc-file { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.bc-encours strong { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: color-mix(in srgb, var(--telios-lueur) 70%, var(--telios-texte)); }
.bc-encours .bc-point-vivant { width: 8px; height: 8px; background: var(--telios-lueur); }
.bc-encours .bc-point-vivant::after { border-color: var(--telios-lueur); }
@media (prefers-reduced-motion: reduce) { .bc-encours-piste i { animation: none; width: 100%; opacity: .5; } }

/* Pied de page : chaque lien centré sur la même ligne, icône ou non (le lien
   à icône est un inline-flex : sans cela, CGV et CGU tombaient plus bas). */
.telios-pied .list-inline-item { display: inline-flex; align-items: center; }
.telios-pied .list-inline-item > a { display: inline-flex; align-items: center; gap: 5px; line-height: 1.4; }

/* Fenêtre de lecture des CGV et CGU (juridique/_dialogue.html) : deux onglets,
   le texte chargé à la demande (vues juridique.lire, ?fragment=1), un squelette
   qui pulse pendant le chargement. */
.jl-dialogue { width: min(980px, calc(100vw - 24px)); }
.jl-dialogue[open] { animation: vi-fenetre .45s cubic-bezier(.2, .8, .2, 1) both; }
.jl-tete { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(120deg, rgba(var(--tblr-primary-rgb), .1), transparent 65%); }
.jl-embleme { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px;
  color: var(--telios-encre-sur-accent); background: var(--telios-accent); box-shadow: 0 10px 22px -12px rgba(var(--tblr-primary-rgb), .9); }
.jl-embleme .telios-icone { width: 22px; height: 22px; }
.jl-titres { min-width: 0; margin-right: auto; }
.jl-titre { margin: 0; font-size: 1.1rem; font-weight: 800; }
.jl-version { margin: 2px 0 0; font-size: .8rem; color: var(--telios-texte-attenue); min-height: 1.2em; }
.jl-onglets { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.jl-onglet { padding: 6px 16px; border: 0; border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  color: var(--telios-texte-attenue); background: none; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.jl-onglet[aria-selected="true"] { color: var(--telios-encre-sur-accent); background: var(--telios-accent);
  box-shadow: 0 6px 14px -8px rgba(var(--tblr-primary-rgb), .9); }
.jl-onglet:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
/* Hauteur imposée et débordement coupé : chaque colonne défile seule (le
   sommaire fait défiler le texte, jamais le cadre ni la page). */
.jl-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0;
  height: min(66vh, 720px); padding: 0; overflow: hidden; }
.jl-corps > * { min-height: 0; }
.jl-sommaire { overflow-y: auto; padding: 16px 12px 16px 22px; border-right: 1px solid var(--telios-trait); }
.jl-sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.jl-sommaire a { display: block; padding: 5px 8px; border-radius: 6px; font-size: .78rem; line-height: 1.3; text-decoration: none;
  color: var(--telios-texte-attenue); transition: background-color .15s ease, color .15s ease; }
.jl-sommaire a:hover { color: var(--telios-accent); background: rgba(var(--tblr-primary-rgb), .08); }
.jl-texte { overflow-y: auto; padding: 18px 26px 26px; scroll-behavior: smooth; }
.jl-texte .jd-article { scroll-margin-top: 12px; }
.jl-contenu { animation: vi-entre .35s ease both; }
.jl-squelette { display: grid; gap: 12px; }
.jl-squelette i { display: block; height: 12px; border-radius: 999px; background: var(--telios-bg-alt); animation: jl-pulse 1.2s ease-in-out infinite; }
.jl-squelette i:nth-child(1) { width: 45%; height: 18px; } .jl-squelette i:nth-child(3) { width: 92%; } .jl-squelette i:nth-child(4) { width: 70%; }
@keyframes jl-pulse { 50% { opacity: .45; } }
.jl-erreur { color: var(--telios-danger); font-weight: 600; }
@media (max-width: 767.98px) { .jl-corps { grid-template-columns: minmax(0, 1fr); } .jl-sommaire { display: none; }
  .jl-tete { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .jl-dialogue[open], .jl-contenu, .jl-squelette i, .bc-encours-piste i { animation: none; } }

/* Banc UAT, bilan : « Échecs à traiter » et la copie du prompt pour la
   conversation qui corrige TELIOS. */
.bc-echecs { margin-bottom: 18px; border-color: rgba(var(--tblr-danger-rgb), .35); }
.bc-pastille-ko { color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .1); }
.bc-echecs-liste { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.bc-echec { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--telios-trait); border-left-width: 4px;
  animation: bc-surgit .45s ease both; }
.bc-echec:nth-child(2) { animation-delay: .06s; } .bc-echec:nth-child(3) { animation-delay: .12s; } .bc-echec:nth-child(n+4) { animation-delay: .18s; }
.bc-echec-ecart { border-left-color: var(--telios-danger); }
.bc-echec-impossible { border-left-color: var(--telios-alerte); }
.bc-echec-manque { border-left-color: var(--telios-texte-attenue); border-style: dashed; border-left-style: solid; }
.bc-echec-rang { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  color: var(--telios-texte-attenue); background: var(--telios-bg-alt); }
.bc-echec-corps { min-width: 0; }
.bc-echec-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.bc-echec-tete small { color: var(--telios-texte-attenue); font-weight: 400; font-size: .76rem; }
.bc-echec-pourquoi { margin: 4px 0 0; font-size: .82rem; color: var(--telios-texte-attenue); }
.bc-echec-verdict { margin: 4px 0 0; font-size: .82rem; }
.bc-echec-ecarts { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; color: var(--telios-danger); }
.bc-echec-manque .bc-echec-ecarts { color: var(--telios-texte); }
.bc-prompts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bc-prompts .btn .telios-icone { width: 15px; height: 15px; margin-right: 6px; }
.bc-prompts-statut { font-size: .84rem; font-weight: 600; }
.bc-prompts-statut.est-ok { color: var(--telios-ok); } .bc-prompts-statut.est-ko { color: var(--telios-alerte); }
.bc-prompt-apercu { margin-top: 12px; }
.bc-prompt-apercu summary { cursor: pointer; font-size: .84rem; font-weight: 700; }
.bc-prompt { max-height: 360px; margin: 8px 0 0; padding: 14px 16px; overflow: auto; border-radius: 12px; font-size: .76rem; line-height: 1.5;
  white-space: pre-wrap; color: var(--telios-texte); background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
@media (prefers-reduced-motion: reduce) { .bc-echec { animation: none; } }

@media (prefers-reduced-motion: reduce) { .bc-live::after { opacity: .8; } .bc-live.bc-sortie { transition: none; } }

/* Banc UAT : supprimer une séance (liste et bilan). La corbeille se tient à
   droite de la ligne, discrète, rouge au survol ; la confirmation est une
   fenêtre centrée, sans détour sur ce qui sera effacé. */
/* La colonne de la corbeille est réservée sur chaque ligne, même sans
   corbeille (séance en cours, ou avant que telios.js ne l'affiche) : sans
   cela, la ligne en cours s'étirait sous la colonne et n'avait plus la
   largeur des autres. */
.bc-seance-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; align-items: center; }
.bc-seance-ligne > .bc-seance { grid-column: 1; }
.bc-supprimer { grid-column: 2; width: 36px; height: 36px; padding: 0; opacity: .55; transition: opacity .2s ease; }
.bc-seance-ligne:hover .bc-supprimer, .bc-supprimer:focus-visible { opacity: 1; }
.bc-supprimer .telios-icone { width: 17px; height: 17px; }
.bc-suppr { width: min(480px, calc(100vw - 24px)); }
.bc-suppr[open] { animation: vi-fenetre .4s cubic-bezier(.2, .8, .2, 1) both; }
.bc-suppr-tete { display: flex; flex-direction: column; align-items: center; padding: 26px 26px 4px; text-align: center; }
.bc-suppr-embleme { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: 999px;
  color: var(--telios-danger); background: rgba(var(--tblr-danger-rgb), .12); animation: bc-secousse .6s ease .2s both; }
.bc-suppr-embleme .telios-icone { width: 28px; height: 28px; }
@keyframes bc-secousse { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.bc-suppr-titre { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; }
.bc-suppr-texte { margin: 0; color: var(--telios-texte-attenue); font-size: .9rem; }
.bc-suppr-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.bc-suppr-fiche > div { padding: 8px 10px; border-radius: 12px; background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.bc-suppr-fiche dt { font-size: .7rem; font-weight: 600; color: var(--telios-texte-attenue); }
.bc-suppr-fiche dd { margin: 0; font-weight: 700; font-size: .86rem; overflow-wrap: anywhere; }
.bc-suppr .telios-aide .telios-icone { width: 14px; height: 14px; vertical-align: -2px; }
@media (prefers-reduced-motion: reduce) { .bc-suppr[open], .bc-suppr-embleme { animation: none; } }

/* ── Configuration → Alertes : le centre d'alertes ──────────────────────
   Maquette validée le 11/10/2026 (nimbalyst-local/mockups). Le héros est une
   salle de veille : un radar où chaque alerte est un point à place fixe
   (ca-pos-N), dont la forme dit l'état (plein vert, rouge qui bat, anneau
   ambre en pointillé) ; le balai et les pouls sont décoratifs. Chaque carte
   porte ses destinataires, son rythme et son essai. Rien n'est porté par la
   seule couleur : sceau et mot partout. */
.ca-page { max-width: 1400px; padding-bottom: 72px; }
.ca-heros { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 24px 28px; margin-bottom: 24px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); overflow: hidden; }
.ca-heros::after { content: ""; position: absolute; top: -45%; right: -8%; width: 520px; height: 520px; border-radius: 999px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--telios-accent) 16%, transparent), transparent); pointer-events: none; }
.ca-heros-texte { position: relative; z-index: 1; min-width: 0; }
.ca-radar { position: relative; width: 220px; height: 220px; margin: auto; }
.ca-anneau { position: absolute; inset: 0; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--telios-accent) 45%, transparent); }
.ca-anneau:nth-child(2) { inset: 30px; border-style: solid; border-color: var(--telios-trait); }
.ca-anneau:nth-child(3) { inset: 62px; border-color: color-mix(in srgb, var(--telios-accent2) 40%, transparent); }
/* Le balai : un bord d'attaque lumineux, la traîne derrière lui. Il part du
   haut (0°) et tourne en 6 s ; chaque point émet son onde quand il passe
   (--ca-delai = angle / 360 × 6 s), d'où un radar qui « voit » ses alertes. */
.ca-balai { position: absolute; inset: 0; border-radius: 999px; animation: ca-tourner 6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--telios-accent) 14%, transparent) 88%,
    color-mix(in srgb, var(--telios-accent) 45%, transparent) 99.4%, var(--telios-accent) 100%);
  -webkit-mask: radial-gradient(circle, var(--telios-texte) 69%, transparent 70%); mask: radial-gradient(circle, var(--telios-texte) 69%, transparent 70%); }
.ca-coeur { position: absolute; inset: 92px; display: grid; place-items: center; border-radius: 999px; background: var(--telios-bg-alt);
  border: 1px solid var(--telios-trait); }
.ca-coeur .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
/* Neuf alertes, une tous les 40°, posées sur l'anneau extérieur (rayon 110 px)
   par rotation : aucune coordonnée à la main, l'écart est le même partout. */
.ca-point { --ca-angle: 0deg; --ca-teinte: var(--telios-ok); position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px; border-radius: 999px; background: var(--ca-teinte);
  transform: rotate(var(--ca-angle)) translateY(-110px) rotate(calc(-1 * var(--ca-angle)));
  box-shadow: 0 0 0 3px var(--telios-carte), 0 0 14px 2px color-mix(in srgb, var(--ca-teinte) 55%, transparent); }
.ca-point::after { content: ""; position: absolute; inset: -1px; border-radius: 999px; border: 2px solid var(--ca-teinte); opacity: 0;
  animation: ca-onde 6s linear infinite; animation-delay: var(--ca-delai, 0s); }
/* Délai de l'onde = angle / 360 × 6 s, écrit en clair : la division d'un
   angle par un angle dans calc() n'est pas comprise partout. */
.ca-pos-1 { --ca-angle: 0deg; --ca-delai: 0s; } .ca-pos-2 { --ca-angle: 40deg; --ca-delai: .667s; }
.ca-pos-3 { --ca-angle: 80deg; --ca-delai: 1.333s; } .ca-pos-4 { --ca-angle: 120deg; --ca-delai: 2s; }
.ca-pos-5 { --ca-angle: 160deg; --ca-delai: 2.667s; } .ca-pos-6 { --ca-angle: 200deg; --ca-delai: 3.333s; }
.ca-pos-7 { --ca-angle: 240deg; --ca-delai: 4s; } .ca-pos-8 { --ca-angle: 280deg; --ca-delai: 4.667s; }
.ca-pos-9 { --ca-angle: 320deg; --ca-delai: 5.333s; }
.ca-point-ok { --ca-teinte: var(--telios-ok); }
.ca-point-info { --ca-teinte: var(--telios-accent2); }
.ca-point-ko { --ca-teinte: var(--telios-danger); width: 16px; height: 16px; margin: -8px; }
/* En alerte : l'onde du balai, plus un battement à elle, qui ne s'arrête pas. */
.ca-point-ko::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--ca-teinte);
  animation: ca-battement 1.6s ease-out infinite; }
/* Non vérifié (contrôle impossible, pas encore vu) : anneau ambre en
   pointillé et cœur plein, la forme des sceaux « attente ». */
.ca-point-att, .ca-point-neuf { --ca-teinte: var(--telios-alerte); background: var(--telios-carte);
  border: 2px dashed var(--ca-teinte); }
.ca-point-att::before, .ca-point-neuf::before { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ca-teinte); }
/* Non surveillée : un anneau vide, sans lueur ni onde. */
.ca-point-off { --ca-teinte: var(--telios-texte-attenue); background: var(--telios-carte); border: 2px solid var(--telios-trait);
  box-shadow: 0 0 0 3px var(--telios-carte); }
.ca-point-off::after { display: none; }
@keyframes ca-tourner { to { transform: rotate(360deg); } }
@keyframes ca-onde { 0% { transform: scale(1); opacity: .95; } 14% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes ca-battement { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@keyframes ca-entree { from { opacity: 0; transform: translateY(10px); } }
@keyframes ca-halo { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--telios-danger) 14%, transparent),
  0 0 32px color-mix(in srgb, var(--telios-danger) 22%, transparent); } }

.ca-verdict { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.375rem; font-weight: 700; }
.ca-verdict .sceau { width: 18px; height: 18px; }
.ca-verdict-ko { color: var(--telios-danger); } .ca-verdict-att { color: var(--telios-alerte); } .ca-verdict-ok { color: var(--telios-ok); }
.ca-compte { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ca-souffrance { color: var(--telios-danger); }
.ca-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ca-tuile { padding: 12px 14px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt);
  animation: ca-entree .5s ease-out both; }
.ca-tuile:nth-child(2) { animation-delay: .08s; } .ca-tuile:nth-child(3) { animation-delay: .16s; } .ca-tuile:nth-child(4) { animation-delay: .24s; }
.ca-tuile b { display: block; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ca-tuile span { font-size: .8125rem; font-weight: 500; color: var(--telios-texte-attenue); }
.ca-tuile-ko b { color: var(--telios-danger); } .ca-tuile-att b { color: var(--telios-alerte); } .ca-tuile-ok b { color: var(--telios-ok); }

.ca-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.ca-carte { position: relative; min-width: 0; padding: 18px 18px 14px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); animation: ca-entree .5s ease-out both; transition: transform .2s ease-out, box-shadow .2s, opacity .2s; }
.ca-carte:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.ca-carte:nth-child(2) { animation-delay: .06s; } .ca-carte:nth-child(3) { animation-delay: .12s; } .ca-carte:nth-child(4) { animation-delay: .18s; }
.ca-carte:nth-child(5) { animation-delay: .24s; } .ca-carte:nth-child(6) { animation-delay: .3s; } .ca-carte:nth-child(7) { animation-delay: .36s; }
.ca-carte-ko { border-color: color-mix(in srgb, var(--telios-danger) 60%, var(--telios-trait)); animation: ca-entree .5s ease-out both, ca-halo 2.4s ease-in-out .6s infinite; }
.ca-carte-att { border: 1px dashed var(--telios-alerte); }
.ca-carte:has(.ca-inter:not(:checked)) { opacity: .62; }
.ca-tete { display: flex; align-items: flex-start; gap: 12px; }
.ca-embleme { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--telios-rayon-grand);
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); }
.ca-embleme .telios-icone { width: 20px; height: 20px; color: var(--telios-accent); }
.ca-carte-ko .ca-embleme .telios-icone { color: var(--telios-danger); } .ca-carte-att .ca-embleme .telios-icone { color: var(--telios-alerte); }
.ca-nom { min-width: 0; }
.ca-titre { margin: 0; font-size: 1rem; font-weight: 600; }
.ca-grave { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: var(--telios-danger);
  border: 1px solid color-mix(in srgb, var(--telios-danger) 50%, transparent); vertical-align: 2px; }
.ca-etat { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .75rem; font-weight: 600; }
.ca-etat .sceau { width: 14px; height: 14px; }
.ca-etat-ok { color: var(--telios-ok); } .ca-etat-ko { color: var(--telios-danger); }
.ca-etat-att, .ca-etat-neuf { color: var(--telios-alerte); } .ca-etat-off { color: var(--telios-texte-attenue); }

.ca-inter { flex: none; position: relative; margin-left: auto; width: 44px; height: 24px; border-radius: 999px; appearance: none; cursor: pointer;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); transition: background .2s, border-color .2s; }
.ca-inter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--telios-texte-attenue); transition: transform .25s cubic-bezier(.3, 1.4, .6, 1), background .2s; }
.ca-inter:checked { background: color-mix(in srgb, var(--telios-ok) 30%, var(--telios-bg-alt)); border-color: var(--telios-ok); }
.ca-inter:checked::after { transform: translateX(20px); background: var(--telios-ok); }
.ca-inter:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }

.ca-constat { margin: 12px 0 0; color: var(--telios-texte-attenue); }
.ca-details { display: grid; gap: 2px; margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-petit);
  background: var(--telios-bg-alt); font-size: .8125rem; }
.ca-details > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.ca-details dt { font-weight: 600; } .ca-details dd { margin: 0; color: var(--telios-texte-attenue); overflow-wrap: anywhere; }

.ca-section { min-width: 0; margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--telios-trait); }
.ca-etiquette { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: .75rem; font-weight: 600; color: var(--telios-texte-attenue); }
.ca-puces { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ca-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 0 6px 0 10px; border-radius: 999px;
  background: var(--telios-bg-alt); border: 1px solid var(--telios-trait); font-size: .8125rem; cursor: pointer; overflow-wrap: anywhere;
  animation: ca-apparition .3s cubic-bezier(.3, 1.4, .6, 1) both; transition: opacity .2s; }
.ca-puce:has(input:not(:checked)) { opacity: .5; text-decoration: line-through; }
.ca-puce:has(input:focus-visible) { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.ca-defaut { font-size: .6875rem; font-weight: 600; color: var(--telios-accent); text-decoration: none; }
.ca-retirer { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; color: var(--telios-texte-attenue); }
.ca-retirer .telios-icone { width: 12px; height: 12px; }
.ca-puce:hover .ca-retirer { background: var(--telios-trait); color: var(--telios-texte); }
.ca-ajout { height: 28px; min-width: 0; width: 200px; max-width: 100%; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--telios-trait);
  background: transparent; color: var(--telios-texte); font-size: .8125rem; }
.ca-ajout:focus { outline: 2px solid var(--telios-accent); outline-offset: 2px; border-style: solid; }
@keyframes ca-apparition { from { opacity: 0; transform: scale(.6); } }
.ca-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
.ca-note .telios-icone { width: 14px; height: 14px; flex: none; }
.ca-prevenir { display: none; color: var(--telios-alerte); }
.ca-dest:has(.ca-puce input:not(:checked)) .ca-prevenir { display: flex; animation: ca-entree .3s ease-out both; }

.ca-segments { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--telios-rayon-petit); border: 1px solid var(--telios-trait);
  background: var(--telios-bg-alt); }
.ca-segments label { display: grid; place-items: center; min-height: 28px; padding: 0 10px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-texte-attenue); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.ca-segments label:has(input:checked) { color: var(--telios-texte); background: var(--telios-carte); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ca-segments label:has(input:focus-visible) { outline: 2px solid var(--telios-accent); outline-offset: 1px; }

.ca-curseurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ca-curseur { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; font-size: .75rem; color: var(--telios-texte-attenue); }
.ca-curseur b { color: var(--telios-texte); font-variant-numeric: tabular-nums; }
.ca-curseur input { grid-column: 1 / -1; width: 100%; accent-color: var(--telios-accent); }

/* Le bouton d'essai centré dans la carte, un peu plus compact que la norme
   (demande de l'éditeur du 11/10/2026) ; le dernier courriel dessous. */
.ca-pied { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; text-align: center; }
.ca-pied .btn-primary.ca-essai-bouton { font-size: .8125rem; padding-top: 4px; padding-bottom: 4px; padding-right: 14px; }
.ca-pied .btn-primary.ca-essai-bouton > .telios-icone:first-child { width: 24px; height: 24px; padding: 5px; }
.ca-dernier { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--telios-texte-attenue); }
.ca-dernier .telios-icone, .ca-dernier .sceau { width: 14px; height: 14px; flex: none; }
.ca-dernier-echec { color: var(--telios-danger); font-weight: 600; }
.ca-essai { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .75rem; }
.ca-essai li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; animation: ca-entree .3s ease-out both; }
.ca-essai .sceau { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ca-essai-prouve { color: var(--telios-ok); } .ca-essai-probable { color: var(--telios-accent2); } .ca-essai-echec { color: var(--telios-danger); }

.ca-barre { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px;
  padding: 12px 16px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: color-mix(in srgb, var(--telios-carte) 92%, transparent); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  animation: ca-surgir .35s cubic-bezier(.3, 1.3, .6, 1) both; }
.ca-barre p { flex: 1 1 260px; margin: 0; }
/* Posé par telios.js seulement : sans script, la barre reste visible. Retirée
   du flux au repos (sinon un vide avant l'historique), elle surgit au premier
   changement : l'animation repart quand elle redevient affichée. */
.ca-barre.ca-barre-repos { display: none; }
@keyframes ca-surgir { from { transform: translateY(40px); opacity: 0; } }

.ca-historique { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-carte); }
.ca-historique h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
.ca-frise { margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 2px solid var(--telios-trait); }
.ca-frise li { position: relative; display: grid; padding: 0 0 14px 16px; overflow-wrap: anywhere; animation: ca-entree .5s ease-out both; }
.ca-frise li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--telios-carte); border: 2px solid var(--telios-accent); }
.ca-frise-ko::before { border-color: var(--telios-danger) !important; }
.ca-frise-ok::before { border-color: var(--telios-ok) !important; background: var(--telios-ok) !important; }
.ca-frise time { font-size: .75rem; color: var(--telios-texte-attenue); }

@media (max-width: 767.98px) {
  .ca-heros { grid-template-columns: 1fr; padding: 18px 16px; }
  .ca-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-curseurs { grid-template-columns: 1fr; }
  .ca-segments label, .ca-puce, .ca-ajout { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-balai, .ca-point::after, .ca-point-ko::before, .ca-tuile, .ca-carte, .ca-puce, .ca-frise li, .ca-essai li { animation: none !important; }
  .ca-barre { animation: none !important; }
  .ca-carte, .ca-inter::after { transition: none !important; }
}

/* Confirmation directe depuis un courriel (telios.js, data-envoi-automatique) :
   avec script, « Confirmation en cours… » à la place du bouton ; sans script,
   ou si l'envoi traîne plus de 4 s, le bouton revient en secours. */
.tb-envoi-auto { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
html.telios-js form[data-envoi-automatique]:not(.tb-envoi-auto-lent) .tb-sans-js { display: none; }
form.tb-envoi-auto-lent .tb-envoi-auto { display: none !important; }

/* Carte « Version du banc d'essai » : ce que les postes reçoivent, dit en clair. */
.bc-en-service { display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; font-size: .75rem; color: var(--telios-texte-attenue); }
.bc-en-service .sceau { width: 14px; height: 14px; flex: none; }


/* ── Atelier → Campagnes et Séances (maquette validée le 11/10/2026) ───────
   Préfixe atl- (« Atelier, pages ») : at- appartient à « Attribuer des
   tokens ». La teinte d'un élément (atl-t-ok, -ko, -att, -vif) passe par
   --atl-t ; l'état se lit toujours aussi par le sceau et le mot. */
.atl-page { max-width: 1400px; }
.atl-t-ok { --atl-t: var(--telios-ok); } .atl-t-ko { --atl-t: var(--telios-danger); }
.atl-t-att { --atl-t: var(--telios-alerte); } .atl-t-vif { --atl-t: var(--telios-accent2); }
@keyframes atl-entree { from { opacity: 0; transform: translateY(10px); } }
@keyframes atl-anneau { from { stroke-dasharray: 0 999; } }
@keyframes atl-pousse { from { transform: scaleX(0); } }
@keyframes atl-battement { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--telios-accent2) 18%, transparent); } }

.atl-heros { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 12px; margin-bottom: 20px; padding: 18px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); }
.atl-heros::after { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 999px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--telios-accent) 14%, transparent), transparent); pointer-events: none; }
.atl-ind, .atl-spark { position: relative; z-index: 1; padding: 12px 14px; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); animation: atl-entree .5s ease-out both; }
.atl-ind:nth-child(2) { animation-delay: .06s; } .atl-ind:nth-child(3) { animation-delay: .12s; } .atl-ind:nth-child(4) { animation-delay: .18s; }
.atl-spark { animation-delay: .24s; }
.atl-ind b { display: block; font-size: 1.75rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.atl-ind span, .atl-spark small { font-size: .8125rem; font-weight: 500; color: var(--telios-texte-attenue); }
.atl-ind-ok b { color: var(--telios-ok); } .atl-ind-ko b { color: var(--telios-danger); }
.atl-ind-att b { color: var(--telios-alerte); } .atl-ind-vif b { color: var(--telios-accent2); }
.atl-spark .g-mini { display: block; width: 100%; height: 54px; margin-top: 4px; }
.atl-spark-vide { display: block; margin-top: 12px; font-size: .75rem; color: var(--telios-texte-attenue); }

.atl-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.atl-nombre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; font-size: .8125rem;
  color: var(--telios-texte-attenue); }
.atl-nombre small { font-size: .75rem; }
.atl-segments { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--telios-rayon-petit); border: 1px solid var(--telios-trait);
  background: var(--telios-bg-alt); }
.atl-segments a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--telios-rayon-petit);
  color: var(--telios-texte-attenue); font-size: .8125rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.atl-segments a[aria-current="page"] { color: var(--telios-texte); background: var(--telios-carte); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.atl-segments i { font-style: normal; font-size: .6875rem; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--telios-trait); }
.atl-recherche { position: relative; }
.atl-recherche .telios-icone { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--telios-texte-attenue); }
.atl-recherche input { height: 36px; width: 280px; max-width: 100%; padding: 0 12px 0 34px; border-radius: var(--telios-rayon-petit);
  border: 1px solid var(--telios-trait); background: var(--telios-carte); color: var(--telios-texte); }
.atl-recherche input:focus { outline: 2px solid var(--telios-accent); outline-offset: 2px; }

.atl-jour { margin: 8px 0 -4px -34px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.atl-jour-seances { margin: 14px 0 8px; }
.atl-frise { position: relative; display: grid; gap: 16px; padding-left: 34px; }
.atl-frise::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 6px; width: 2px; background: var(--telios-trait); }
.atl-campagne { position: relative; padding: 16px 18px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); animation: atl-entree .5s ease-out both; transition: transform .2s ease-out, box-shadow .2s;
  scroll-margin-top: 80px; }
.atl-campagne:nth-of-type(2) { animation-delay: .08s; } .atl-campagne:nth-of-type(3) { animation-delay: .16s; }
.atl-campagne:nth-of-type(4) { animation-delay: .24s; }
.atl-campagne:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.atl-campagne:target { box-shadow: 0 0 0 2px var(--telios-accent); }
.atl-campagne::before { content: ""; position: absolute; left: -29px; top: 22px; width: 14px; height: 14px; border-radius: 999px;
  background: var(--atl-t); box-shadow: 0 0 0 4px var(--telios-bg), 0 0 14px color-mix(in srgb, var(--atl-t) 60%, transparent); }
.atl-campagne.atl-t-vif::before { animation: atl-battement 1.6s ease-in-out infinite; }
/* Une ligne : anneau, verdict, téléphones, durée (demande du 11/10/2026 :
   les tuiles à droite du verdict, pour gagner la hauteur d'une rangée). */
.atl-c-tete { display: grid; grid-template-columns: auto minmax(180px, max-content) minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.atl-anneau { position: relative; width: 64px; height: 64px; flex: none; }
.atl-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.atl-anneau circle { fill: none; stroke-width: 7; }
.atl-anneau-fond { stroke: var(--telios-bg-alt); }
.atl-anneau-val { stroke: var(--atl-t); stroke-linecap: round; animation: atl-anneau 1.1s ease-out both; }
.atl-anneau b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.atl-anneau-petit { width: 48px; height: 48px; } .atl-anneau-petit circle { stroke-width: 6; } .atl-anneau-petit b { font-size: .75rem; }
.atl-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 700; color: var(--atl-t); }
.atl-verdict .sceau { width: 18px; height: 18px; }
.atl-vif { display: inline-flex; align-items: center; gap: 6px; color: var(--telios-accent2); font-weight: 700; }
.atl-vif::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--telios-accent2); animation: atl-battement 1.4s ease-in-out infinite; }
.atl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.atl-meta b { color: var(--telios-texte); font-weight: 600; }
.atl-c-droite { text-align: right; font-size: .8125rem; color: var(--telios-texte-attenue); }
/* La corbeille sur sa ligne, sous la durée, au bord droit de la carte. */
/* Sélecteur renforcé : la norme des boutons (:is(.telios-admin…) .btn) impose inline-flex. */
.atl-c-droite .btn.atl-supprimer-campagne { display: flex; margin: 8px 0 0 auto; }
.atl-duree { display: block; font-size: 1.125rem; font-weight: 700; color: var(--telios-texte); font-variant-numeric: tabular-nums; }
.atl-note { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 10px; border-radius: 999px; font-size: .75rem;
  font-weight: 600; color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 12%, transparent); }
.atl-note .telios-icone { width: 14px; height: 14px; flex: none; }
/* Un téléphone = un bandeau d'une ligne : icône, modèle, issue, barre
   (demande du 11/10/2026 : la place est en long, pas en haut). Plusieurs
   téléphones s'empilent, un bandeau fin chacun. */
.atl-telephones { display: grid; gap: 6px; min-width: 0; }
.atl-tel { display: grid; grid-template-columns: auto max-content minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 6px 12px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); color: var(--telios-texte);
  text-decoration: none; transition: border-color .15s, transform .15s; }
a.atl-tel:hover { border-color: var(--telios-accent); transform: translateY(-1px); color: var(--telios-texte); }
.atl-tel-manque { border-style: dashed; color: var(--telios-alerte); }
.atl-tel-manque .sceau { width: 18px; height: 18px; }
.atl-mobile { position: relative; display: grid; place-items: end center; width: 22px; height: 36px; padding-bottom: 2px; border-radius: 5px;
  border: 2px solid var(--atl-t); background: var(--telios-carte); }
.atl-mobile::before { content: ""; position: absolute; top: 3px; left: 50%; width: 8px; height: 2px; margin-left: -4px; border-radius: 2px;
  background: var(--telios-trait); }
.atl-mobile i { font-style: normal; font-size: .5625rem; font-weight: 800; color: var(--atl-t); }
.atl-tel-nom { font-size: .875rem; white-space: nowrap; }
/* Centrée entre le modèle et la barre (demande du 12/10/2026). */
.atl-tel-issue { min-width: 0; font-size: .75rem; color: var(--telios-texte-attenue); text-align: center; }
.atl-tel .atl-barre { margin-top: 0; }
.atl-tel-manque { grid-template-columns: auto max-content minmax(0, 1fr); }
/* Carte très étroite (téléphone) : le modèle sur sa ligne, l'issue et la
   barre dessous. */
@container (max-width: 560px) {
  .atl-tel { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
  .atl-tel-nom { white-space: normal; overflow-wrap: anywhere; }
  .atl-tel-issue, .atl-tel .atl-barre { grid-column: 2; }
  .atl-tel-issue { text-align: left; }
}
.atl-barre { display: flex; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--telios-carte); overflow: hidden; }
.atl-seance .atl-barre { background: var(--telios-bg-alt); }
.atl-barre > span { display: block; height: 100%; background: var(--atl-t); transform-origin: left; animation: atl-pousse .9s ease-out both; }

.atl-seances { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.atl-seance { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1.1fr) auto auto 36px; gap: 16px;
  align-items: center; padding: 12px 16px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); animation: atl-entree .45s ease-out both; transition: transform .15s, box-shadow .2s, border-color .15s; }
.atl-seance:nth-child(2) { animation-delay: .05s; } .atl-seance:nth-child(3) { animation-delay: .1s; } .atl-seance:nth-child(4) { animation-delay: .15s; }
.atl-seance:hover { transform: translateX(3px); border-color: var(--telios-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
/* Toute la ligne ouvre la séance ; les puces et la corbeille restent au-dessus. */
.atl-s-lien { color: var(--telios-texte); text-decoration: none; }
.atl-s-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.atl-s-lien:focus-visible { outline: none; } .atl-s-lien:focus-visible::after { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.atl-puces, .atl-supprimer, .atl-seance dialog { position: relative; z-index: 1; }
.atl-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.atl-puce { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700;
  border: 1px solid var(--telios-trait); color: var(--telios-texte-attenue); text-decoration: none; }
.atl-puce .telios-icone { width: 12px; height: 12px; }
.atl-puce-camp { color: var(--telios-accent); border-color: color-mix(in srgb, var(--telios-accent) 45%, transparent); }
a.atl-puce-camp:hover { background: color-mix(in srgb, var(--telios-accent) 12%, transparent); color: var(--telios-accent); }
.atl-puce-att { color: var(--telios-alerte); border-color: color-mix(in srgb, var(--telios-alerte) 45%, transparent); }
.atl-puce-ko { color: var(--telios-danger); border-color: color-mix(in srgb, var(--telios-danger) 45%, transparent); }
.atl-issue { font-size: .8125rem; font-weight: 700; color: var(--atl-t); }
.atl-chiffres { display: flex; gap: 6px; }
.atl-quand { text-align: right; font-size: .8125rem; color: var(--telios-texte-attenue); white-space: nowrap; }
.atl-quand b { display: block; color: var(--telios-texte); }

/* Page Banc UAT : les raccourcis vers les deux pages. */
.atl-raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; }
.atl-raccourci { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-carte); color: var(--telios-texte); text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s, border-color .2s; }
.atl-raccourci:hover { transform: translateY(-2px); border-color: var(--telios-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, .16); color: var(--telios-texte); }
.atl-raccourci > .telios-icone:first-child { width: 22px; height: 22px; color: var(--telios-accent); flex: none; }
.atl-raccourci > .telios-icone:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--telios-texte-attenue); transition: transform .2s; }
.atl-raccourci:hover > .telios-icone:last-child { transform: translateX(4px); color: var(--telios-accent); }
.atl-raccourci strong { display: block; } .atl-raccourci small { display: block; font-size: .8125rem; color: var(--telios-texte-attenue); }
.telios-rail-badge-vif { background: color-mix(in srgb, var(--telios-accent2) 22%, transparent); color: var(--telios-accent2); }

/* Les tuiles à droite du verdict tant que la CARTE est assez large (pas
   l'écran : la barre latérale et les marges varient) ; sinon dessous, côte à
   côte. Plus étroites, elles s'empileraient et la carte grandirait. */
.atl-campagne { container-type: inline-size; }
@container (max-width: 1000px) {
  .atl-c-tete { grid-template-columns: auto minmax(0, 1fr) auto; } .atl-telephones { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 991.98px) {
  .atl-heros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atl-spark { grid-column: 1 / -1; }
  .atl-seance { grid-template-columns: 48px minmax(0, 1fr) 36px; } .atl-s-issue, .atl-chiffres, .atl-quand { grid-column: 2 / 3; }
  .atl-quand { text-align: left; } .atl-supprimer { grid-column: 3; grid-row: 1; }
  .atl-c-tete { grid-template-columns: auto minmax(0, 1fr); } .atl-c-droite { grid-column: 1 / -1; text-align: left; }
  .atl-nombre { margin-left: 0; }
}
@media (max-width: 575.98px) { .atl-frise { padding-left: 24px; } .atl-jour { margin-left: -24px; } .atl-campagne::before { left: -22px; }
  .atl-frise::before { left: 5px; } .atl-segments a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .atl-ind, .atl-spark, .atl-campagne, .atl-seance, .atl-anneau-val, .atl-barre > span, .atl-vif::before, .atl-campagne::before { animation: none !important; }
  .atl-campagne, .atl-seance, .atl-tel, .atl-raccourci, .atl-raccourci > .telios-icone { transition: none !important; }
}

/* ── Demander un devis : achat de tokens ou Analyse spécifique (12/10/2026) ──
   Le type se choisit en CSS (:has) : sans script, la page marche ; telios.js
   ne fait que tenir le total à jour. Maquette validée le 12/10/2026. */
.ac-demande { margin-top: 24px; }
.ac-demande-titre { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; }
.ac-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 16px; }
.ac-type { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; cursor: pointer;
  border: 1.5px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt);
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.ac-type:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.ac-type:has(input:checked) { border-color: var(--telios-accent); background: color-mix(in srgb, var(--telios-accent) 8%, var(--telios-carte));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--telios-accent) 18%, transparent); }
.ac-type:has(input:focus-visible) { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.ac-type strong { display: block; } .ac-type small { color: var(--telios-texte-attenue); }
.ac-type-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--telios-rayon-grand);
  background: var(--telios-carte); border: 1px solid var(--telios-trait); color: var(--telios-accent); }
.ac-type-nouveau { position: absolute; top: -9px; right: 14px; padding: 1px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 800;
  background: var(--telios-accent2); color: var(--telios-encre-sur-accent); }
.ac-demande .ac-analyse { display: none; }
.ac-demande:has(input[name="ac-type"][value="analyse"]:checked) .ac-analyse { display: grid; }
.ac-demande:has(input[name="ac-type"][value="analyse"]:checked) .ac-devis { display: none; }
.ac-analyse { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 22px; padding: 20px 22px; animation: atl-entree .35s ease-out both; }
.ac-analyse-texte { margin: 0 0 16px; color: var(--telios-texte-attenue); }
.ac-champ { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.ac-telephones { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-tel { display: grid; place-items: center; min-width: 74px; height: 84px; padding: 0 12px; cursor: pointer; font-weight: 800;
  border: 1.5px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); transition: all .2s; }
.ac-tel input { position: absolute; opacity: 0; pointer-events: none; }
.ac-tel span { display: grid; justify-items: center; gap: 4px; }
.ac-tel i { display: block; width: 18px; height: 30px; border-radius: 4px; border: 2px solid currentColor; }
.ac-tel:has(input:checked) { border-color: var(--telios-accent); color: var(--telios-accent); transform: translateY(-2px);
  background: color-mix(in srgb, var(--telios-accent) 10%, var(--telios-carte)); }
.ac-tel-plus { font-size: .8125rem; color: var(--telios-texte-attenue); }
.ac-tel-plus:has(input:checked) { color: var(--telios-alerte); border-color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 10%, var(--telios-carte)); }
.ac-tel:has(input:focus-visible) { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.ac-interrupteur { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
.ac-interrupteur small { display: block; color: var(--telios-texte-attenue); }
.ac-inter { flex: none; position: relative; width: 44px; height: 24px; border-radius: 999px; appearance: none; cursor: pointer;
  background: var(--telios-carte); border: 1px solid var(--telios-trait); }
.ac-inter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: var(--telios-texte-attenue);
  transition: transform .25s cubic-bezier(.3, 1.4, .6, 1); }
.ac-inter:checked { border-color: var(--telios-accent); background: color-mix(in srgb, var(--telios-accent) 25%, var(--telios-carte)); }
.ac-inter:checked::after { transform: translateX(20px); background: var(--telios-accent); }
.ac-inter:focus-visible { outline: 2px solid var(--telios-accent); outline-offset: 2px; }
.ac-jours { display: none; align-items: center; gap: 10px; margin-top: 10px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.ac-jours input { width: 90px; }
.ac-deplacement:has(.ac-inter:checked) .ac-jours { display: flex; }
.ac-recap { position: sticky; top: 16px; align-self: start; display: grid; gap: 12px; padding-bottom: 16px; overflow: hidden;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-carte); }
.ac-recap > :not(.ac-recap-tete) { margin-left: 18px; margin-right: 18px; }
.ac-recap-tete { padding: 16px 18px; border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(135deg, color-mix(in srgb, var(--telios-accent) 16%, var(--telios-carte)), var(--telios-carte)); }
.ac-recap-tete small { font-weight: 600; color: var(--telios-texte-attenue); }
.ac-recap-total { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--telios-accent); font-variant-numeric: tabular-nums; }
.ac-recap-total.saute { animation: ac-saute .3s ease-out; }
@keyframes ac-saute { 50% { transform: scale(1.06); } }
.ac-recap-solde { margin-top: 0; margin-bottom: 0; padding: 10px 12px; border-radius: var(--telios-rayon-grand); font-size: .8125rem;
  background: var(--telios-bg-alt); }
.ac-recap-solde.est-ok { color: var(--telios-ok); background: color-mix(in srgb, var(--telios-ok) 12%, transparent); }
.ac-recap-solde.est-court { color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 14%, transparent); }
.ac-recap-solde a { color: inherit; font-weight: 700; }
@media (max-width: 991.98px) { .ac-analyse { grid-template-columns: minmax(0, 1fr); } .ac-recap { position: static; } }
@media (max-width: 767.98px) { .ac-tel { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ac-type, .ac-tel, .ac-inter::after { transition: none !important; } .ac-analyse, .ac-recap-total.saute { animation: none !important; } }

/* Console des devis : le dossier d'une Analyse spécifique. */
.dv-badge-analyse { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; color: var(--telios-accent2);
  background: color-mix(in srgb, var(--telios-accent2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--telios-accent2) 40%, transparent); }
.dv-analyse-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.dv-analyse-fiche { display: grid; gap: 6px; margin: 0; }
.dv-analyse-fiche > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.dv-analyse-fiche dt { font-weight: 500; color: var(--telios-texte-attenue); } .dv-analyse-fiche dd { margin: 0; font-weight: 600; }
.dv-analyse-champs { display: grid; gap: 10px; margin-bottom: 10px; }
.dv-analyse-champs label { display: grid; gap: 4px; font-size: .8125rem; font-weight: 600; }
.dv-analyse-champs input { max-width: 160px; }
.dv-analyse-total { margin: 0 0 4px; } .dv-analyse-total strong { font-size: 1.125rem; color: var(--telios-accent); }
.dv-analyse-jauge { display: block; height: 10px; margin: 6px 0 4px; border-radius: 999px; background: var(--telios-bg-alt); overflow: hidden; }
.dv-analyse-jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--telios-ok); transition: width .3s; }
.dv-analyse-jauge > span.est-court { background: var(--telios-danger); }
.dv-analyse-reste { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .8125rem; color: var(--telios-texte-attenue); }
.dv-analyse-reste.est-court { color: var(--telios-danger); font-weight: 600; }
.dv-analyse-reste .sceau, .dv-analyse-fait .sceau { width: 16px; height: 16px; flex: none; }
.dv-analyse-fait { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--telios-rayon-grand);
  color: var(--telios-ok); background: color-mix(in srgb, var(--telios-ok) 10%, transparent); }
.dv-analyse-fait span { color: var(--telios-texte); }
@media (max-width: 991.98px) { .dv-analyse-grille { grid-template-columns: minmax(0, 1fr); } }

/* ── Atelier → Interventions (vues_interventions.py, maquette validée le 12/10/2026) ──
   Une teinte par étape, portée par --iv-t : colis attendu (alerte), reçue
   (accent), en cours (accent2), validée (ok), renvoyée (violet, mélange
   d'accent et de danger : aucun jeton n'en porte, aucune couleur écrite). */
.iv-e-attente, .iv-e-confirmee { --iv-t: var(--telios-alerte); }
.iv-e-recue { --iv-t: var(--telios-accent); }
.iv-e-cours { --iv-t: var(--telios-accent2); }
.iv-e-validee { --iv-t: var(--telios-ok); }
.iv-e-renvoyee { --iv-t: color-mix(in srgb, var(--telios-accent) 58%, var(--telios-danger)); }
.iv-e-livree { --iv-t: var(--telios-marque); }
.iv-e-correction, .iv-e-relance { --iv-t: var(--telios-texte-attenue); }
.iv-page { display: grid; gap: 22px; }
.iv-titre { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.iv-note { margin: 8px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
@keyframes iv-entre { from { opacity: 0; transform: translateY(10px); } }
@keyframes iv-pouls { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--iv-t) 22%, transparent); } }
@keyframes iv-flux { to { background-position: 12px 0; } }
@keyframes iv-balaye { 0%, 100% { top: 4%; } 50% { top: calc(96% - 3px); } }
@keyframes iv-eclot { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
@keyframes iv-trace { from { stroke-dashoffset: 40; } }
@keyframes iv-jauge { from { transform: scaleX(0); } }

/* Le héros : la chaîne des cinq étapes, reliées par un flux qui avance. */
.iv-heros { position: relative; overflow: hidden; padding: 20px 22px; border: 1px solid var(--telios-trait);
  border-radius: var(--telios-rayon-grand); background: var(--telios-carte); animation: iv-entre .5s ease-out both; }
.iv-heros::after { content: ""; position: absolute; right: -90px; top: -150px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--telios-accent2) 15%, transparent), transparent); pointer-events: none; }
.iv-chaine { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.iv-fil { position: absolute; left: 8.33%; right: 8.33%; top: 31px; height: 3px; border-radius: 999px; overflow: hidden; background: var(--telios-trait); }
.iv-fil span { position: absolute; inset: 0; animation: iv-flux .8s linear infinite;
  background: repeating-linear-gradient(90deg, var(--telios-accent2) 0 6px, transparent 6px 12px); }
.iv-etape { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  color: var(--telios-texte); text-decoration: none; animation: iv-entre .5s ease-out both; }
.iv-etape:nth-child(3) { animation-delay: .06s; } .iv-etape:nth-child(4) { animation-delay: .12s; }
.iv-etape:nth-child(5) { animation-delay: .18s; } .iv-etape:nth-child(6) { animation-delay: .24s; }
.iv-etape:nth-child(7) { animation-delay: .3s; }
.iv-etape:hover { color: var(--telios-texte); }
.iv-noeud { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: var(--iv-t); background: var(--telios-bg-alt); border: 2px solid var(--iv-t); transition: transform .2s ease-out, box-shadow .2s; }
.iv-noeud .telios-icone { width: 26px; height: 26px; }
.iv-noeud b { position: absolute; top: -6px; right: -9px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; font-size: .8125rem; color: var(--telios-encre-sur-accent); background: var(--iv-t); box-shadow: 0 0 0 3px var(--telios-carte); }
.iv-etape:hover .iv-noeud, .iv-etape:focus-visible .iv-noeud { transform: translateY(-3px) scale(1.05); }
.iv-etape.est-vif .iv-noeud { animation: iv-pouls 1.8s ease-in-out infinite; }
.iv-etape.est-choisie .iv-noeud { box-shadow: 0 0 0 5px color-mix(in srgb, var(--iv-t) 24%, transparent); }
.iv-etape strong { font-size: .875rem; } .iv-etape small { font-size: .75rem; color: var(--telios-texte-attenue); }
.iv-bandeau { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--telios-trait); }
.iv-bandeau p { margin: 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.iv-bandeau b { color: var(--telios-texte); }
.iv-vigie { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 12%, transparent); text-decoration: none; }
.iv-vigie .telios-icone { width: 14px; height: 14px; }

/* Le poste de scan : l'étape (des cases radio habillées), le renvoi qui
   n'apparaît que pour lui, la saisie, la caméra. */
.iv-poste { display: block; padding: 18px 20px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-carte); animation: iv-entre .5s .08s ease-out both; }
.iv-poste-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.iv-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 12px; padding: 0; border: 0; }
.iv-act { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--telios-rayon-grand); cursor: pointer;
  border: 1px solid var(--telios-trait); background: var(--telios-bg-alt); transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; }
.iv-act:hover { transform: translateY(-1px); }
.iv-act-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--iv-t);
  background: color-mix(in srgb, var(--iv-t) 16%, transparent); }
.iv-act-ic .telios-icone { width: 18px; height: 18px; }
.iv-act strong { display: block; font-size: .875rem; } .iv-act small { display: block; font-size: .75rem; color: var(--telios-texte-attenue); }
.iv-act:has(input:checked) { border-color: var(--iv-t); background: color-mix(in srgb, var(--iv-t) 9%, var(--telios-carte));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iv-t) 18%, transparent); }
.iv-act:has(input:focus-visible) { outline: 2px solid var(--iv-t); outline-offset: 2px; }
.iv-renvoi { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.iv-poste-form:has(input[value="renvoyee"]:checked) .iv-renvoi { display: grid; animation: iv-entre .35s ease-out both; }
.iv-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .8125rem; font-weight: 600; }
.iv-champ .form-control, .iv-champ .form-select { font-weight: 400; }
.iv-large { grid-column: 1 / -1; }
.iv-saisie { display: flex; gap: 8px; }
.iv-saisie .form-control { flex: 1; min-width: 0; }
.iv-resultat { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-top: 12px; padding: 14px;
  border-radius: var(--telios-rayon-grand); border: 1px solid color-mix(in srgb, var(--telios-ok) 50%, transparent);
  background: color-mix(in srgb, var(--telios-ok) 8%, var(--telios-carte)); animation: iv-entre .3s ease-out both; }
.iv-resultat.est-refus { border-color: color-mix(in srgb, var(--telios-danger) 50%, transparent);
  background: color-mix(in srgb, var(--telios-danger) 7%, var(--telios-carte)); }
.iv-rond { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--telios-encre-sur-accent);
  background: var(--telios-ok); animation: iv-eclot .6s ease-out both; }
.iv-resultat.est-refus .iv-rond { background: var(--telios-danger); }
.iv-rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.iv-rond path { stroke-dasharray: 40; animation: iv-trace .5s .25s ease-out both; }
.iv-resultat strong, .iv-resultat small { display: block; } .iv-resultat small { color: var(--telios-texte-attenue); }
.iv-resultat a { display: inline-block; margin-top: 4px; font-size: .8125rem; font-weight: 600; }
/* La fenêtre du scanner (demande du 12/10/2026) : l'étape en tête, à sa
   teinte ; la caméra dans un cadre qui balaie ; la saisie en dessous. Le
   cadre passe au vert à la lecture, une coche éclot ; sans caméra, la zone
   s'efface et la saisie reste. */
.iv-scanner { width: min(560px, calc(100vw - 24px)); }
.iv-scanner-tete { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px;
  border-bottom: 1px solid var(--telios-trait);
  background: linear-gradient(120deg, color-mix(in srgb, var(--iv-t) 18%, var(--telios-carte)), var(--telios-carte) 70%); }
.iv-scanner-pastille { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--iv-t);
  background: color-mix(in srgb, var(--iv-t) 16%, var(--telios-carte)); border: 2px solid var(--iv-t); animation: iv-eclot .5s ease-out both; }
.iv-scanner-pastille svg { width: 22px; height: 22px; }
.iv-scanner-surtitre { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--telios-texte-attenue); }
.iv-scanner-titre { margin: 0; font-size: 1.25rem; }
.iv-scanner-zone { position: relative; aspect-ratio: 4 / 3; margin: 18px 20px 0; overflow: hidden; border-radius: var(--telios-rayon-grand);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--iv-t) 22%, var(--telios-rail)), var(--telios-rail));
  box-shadow: inset 0 0 0 1px var(--telios-trait), 0 18px 40px -24px color-mix(in srgb, var(--iv-t) 70%, transparent); }
.iv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iv-video.iv-miroir { transform: scaleX(-1); }
.iv-cadre { position: absolute; inset: 14% 20%; pointer-events: none; }
.iv-cadre i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--iv-t); transition: border-color .25s; }
.iv-cadre i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.iv-cadre i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.iv-cadre i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.iv-cadre i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.iv-ligne-scan { position: absolute; left: 4%; right: 4%; height: 3px; border-radius: 999px; background: var(--iv-t);
  box-shadow: 0 0 16px 2px var(--iv-t); animation: iv-balaye 2.4s ease-in-out infinite; }
.iv-scanner-lu { position: absolute; left: 50%; top: 50%; display: none; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; color: var(--telios-encre-sur-accent); background: var(--telios-ok); box-shadow: 0 0 0 10px color-mix(in srgb, var(--telios-ok) 25%, transparent); }
.iv-scanner-lu svg { width: 36px; height: 36px; }
.iv-scanner[data-etat="lu"] .iv-cadre i { border-color: var(--telios-ok); }
.iv-scanner[data-etat="lu"] .iv-ligne-scan { display: none; }
.iv-scanner[data-etat="lu"] .iv-scanner-lu { display: grid; animation: iv-eclot .5s ease-out both; }
.iv-scanner[data-etat="sans"] .iv-scanner-zone { display: none; }
.iv-scanner-statut { min-height: 1.5em; margin: 12px 20px 0; text-align: center; font-weight: 500; }
.iv-scanner[data-etat="autre"] .iv-scanner-statut { color: var(--telios-alerte); }
.iv-scanner[data-etat="sans"] .iv-scanner-statut { margin-top: 18px; color: var(--telios-texte-attenue); }
.iv-scanner-saisie { padding: 6px 20px 20px; }
.iv-scanner-ou { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--telios-texte-attenue); }
.iv-scanner-ou::before, .iv-scanner-ou::after { content: ""; flex: 1; height: 1px; background: var(--telios-trait); }

/* L'historique : des lignes, un liseré à la teinte de l'étape, la mini-chaîne. */
.iv-historique { animation: iv-entre .5s .14s ease-out both; }
.iv-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }
.iv-recherche { position: relative; flex: 0 1 280px; }
.iv-recherche .telios-icone { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--telios-texte-attenue); }
.iv-recherche .form-control { padding-left: 34px; }
.iv-liste { display: grid; gap: 8px; }
.iv-ligne { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(170px, 1fr) minmax(0, .9fr); gap: 16px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--telios-trait); border-left: 4px solid var(--iv-t); border-radius: var(--telios-rayon-grand);
  color: var(--telios-texte); background: var(--telios-carte); text-decoration: none; animation: iv-entre .45s ease-out both;
  transition: transform .15s, box-shadow .2s, border-color .15s; }
.iv-ligne:nth-child(2) { animation-delay: .04s; } .iv-ligne:nth-child(3) { animation-delay: .08s; } .iv-ligne:nth-child(4) { animation-delay: .12s; }
.iv-ligne:nth-child(5) { animation-delay: .16s; } .iv-ligne:nth-child(n+6) { animation-delay: .2s; }
.iv-ligne:hover, .iv-ligne:focus-visible { color: var(--telios-texte); transform: translateX(3px); border-color: var(--telios-accent); border-left-color: var(--iv-t);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.iv-ref { font-family: var(--tblr-font-monospace, ui-monospace, monospace); font-size: .875rem; font-weight: 700; }
.iv-sous { display: block; font-size: .75rem; color: var(--telios-texte-attenue); }
.iv-puce { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 700;
  border: 1px solid var(--telios-trait); color: var(--telios-texte-attenue); }
.iv-puce .telios-icone { width: 12px; height: 12px; }
.iv-puce-gratuit { color: var(--telios-accent2); border-color: color-mix(in srgb, var(--telios-accent2) 45%, transparent); }
.iv-puce-retard { color: var(--telios-alerte); border-color: color-mix(in srgb, var(--telios-alerte) 45%, transparent); }
.iv-ligne-quoi { font-size: .8125rem; }
.iv-mini { display: flex; align-items: center; }
.iv-mini span { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--telios-trait); background: var(--telios-carte); }
.iv-mini em { flex: 1; min-width: 10px; height: 2px; background: var(--telios-trait); }
.iv-mini .est-fait { background: var(--iv-t); border-color: var(--iv-t); }
.iv-mini span.est-ici { border-color: var(--iv-t); animation: iv-pouls 1.8s ease-in-out infinite; }
.iv-etiq { display: block; margin-top: 4px; font-size: .75rem; font-weight: 700; color: var(--iv-t); }
.iv-ligne-quand { font-size: .8125rem; text-align: right; color: var(--telios-texte-attenue); }
.iv-ligne-quand b { display: block; color: var(--telios-texte); }
.iv-pied-liste { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.iv-vide { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px dashed var(--telios-trait); border-radius: var(--telios-rayon-grand); }
.iv-vide .telios-icone { flex: none; width: 34px; height: 34px; color: var(--telios-texte-attenue); }
.iv-vide p { margin: 0; }

/* La fenêtre de gestion : en-tête à la teinte de l'étape, progression,
   fiches des appareils, journal des courriels. */
.iv-fenetre { width: min(940px, calc(100vw - 24px)); }
.iv-f-tete { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 18px 22px;
  border-bottom: 1px solid var(--telios-trait); background: linear-gradient(120deg, color-mix(in srgb, var(--iv-t) 16%, var(--telios-carte)), var(--telios-carte) 60%); }
.iv-f-tete .iv-noeud { width: 52px; height: 52px; animation: iv-eclot .5s ease-out both; }
.iv-f-tete .iv-noeud .telios-icone { width: 22px; height: 22px; }
.iv-f-titre h2 { margin: 0; font-size: 1.25rem; }
.iv-f-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.iv-f-corps { display: grid; gap: 18px; }
.iv-progression { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.iv-progression::before, .iv-progression::after { content: ""; position: absolute; left: 8.33%; top: 15px; height: 3px; border-radius: 999px; }
.iv-progression::before { right: 8.33%; background: var(--telios-trait); }
.iv-progression::after { width: 0; transform-origin: left; animation: iv-jauge .9s ease-out both;
  background: linear-gradient(90deg, var(--telios-alerte), var(--telios-accent), var(--telios-accent2), var(--telios-ok), var(--telios-marque)); }
/* Six étapes : chaque palier avance d'un sixième de la largeur (centres à 1/12, 3/12…). */
.iv-jauge-20::after { width: 16.67%; } .iv-jauge-40::after { width: 33.33%; } .iv-jauge-60::after { width: 50%; }
.iv-jauge-80::after { width: 66.67%; } .iv-jauge-100::after { width: 83.33%; }
.iv-progression li { position: relative; text-align: center; font-size: .75rem; color: var(--telios-texte-attenue); }
/* Au-dessus du trait et de sa jauge : le numéro ne doit pas être barré. */
.iv-progression span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; font-weight: 700;
  border: 2px solid var(--telios-trait); background: var(--telios-bg-alt); }
.iv-progression .est-fait span { color: var(--telios-encre-sur-accent); background: var(--iv-t); border-color: var(--iv-t); }
.iv-progression .est-ici span { color: var(--iv-t); border-color: var(--iv-t); animation: iv-pouls 1.8s ease-in-out infinite; }
.iv-progression strong { display: block; font-size: .8125rem; color: var(--telios-texte); }
.iv-blocs { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.iv-bloc { padding: 14px 16px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
.iv-bloc-titre { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.iv-annonce { margin: 0 0 10px; font-size: .8125rem; }
.iv-appareils { display: grid; gap: 10px; }
.iv-appareil { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0; padding: 10px 0 0;
  border: 0; border-top: 1px dashed var(--telios-trait); }
.iv-appareil:first-child { padding-top: 0; border-top: 0; }
.iv-appareil .iv-large { grid-column: 2 / -1; }
.iv-mobile { position: relative; grid-row: span 3; align-self: start; width: 28px; height: 46px; margin-top: 18px; border-radius: 7px;
  border: 2px solid var(--iv-t); background: var(--telios-carte); }
.iv-mobile::before { content: ""; position: absolute; top: 4px; left: 50%; width: 10px; height: 2px; margin-left: -5px; border-radius: 2px; background: var(--telios-trait); }
.iv-ajouter { margin-top: 10px; }
.iv-renvoi-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--telios-trait); }
.iv-renvoi-fiche .iv-bloc-titre { grid-column: 1 / -1; margin: 0; }
.iv-suivre { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }
.iv-journal { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.iv-journal li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: .8125rem; }
.iv-journal li::before { content: ""; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--iv-t); }
.iv-journal time { display: block; font-size: .75rem; color: var(--telios-texte-attenue); }
.iv-courriel { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; }
.iv-courriel .telios-icone { width: 13px; height: 13px; }
.iv-t-ok { color: var(--telios-ok); } .iv-t-att { color: var(--telios-alerte); } .iv-t-ko { color: var(--telios-danger); } .iv-t-neutre { color: var(--telios-texte-attenue); }
.iv-question { margin-top: 14px; padding: 14px 16px; border-radius: var(--telios-rayon-grand); border: 1px solid color-mix(in srgb, var(--telios-accent) 50%, transparent);
  background: color-mix(in srgb, var(--telios-accent) 8%, var(--telios-carte)); animation: iv-entre .3s ease-out both; }
.iv-question p { margin: 0 0 10px; }
.iv-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-f-pied { flex-wrap: wrap; }
.iv-avancer { display: grid; gap: 8px; width: 100%; }
.iv-avancer .iv-gestes { justify-content: flex-end; }
.iv-avancer .iv-note { margin: 0; }
.iv-avancer-renvoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }

/* Côté client (interventions/mes_interventions.html) : une frise par intervention. */
.iv-client { display: grid; gap: 16px; }
.iv-suivi { padding: 20px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-carte); animation: iv-entre .45s ease-out both; }
.iv-suivi-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.iv-suivi-tete .iv-ref { margin: 0; font-size: 1rem; }
.iv-etat { font-size: .8125rem; font-weight: 700; color: var(--iv-t); }
.iv-frise { display: grid; margin: 16px 0 0; padding: 0; list-style: none; }
.iv-pas { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; min-height: 62px; animation: iv-entre .45s ease-out both; }
.iv-pas:nth-child(2) { animation-delay: .08s; } .iv-pas:nth-child(3) { animation-delay: .16s; }
.iv-pas:nth-child(4) { animation-delay: .24s; } .iv-pas:nth-child(5) { animation-delay: .32s; }
.iv-pas:nth-child(6) { animation-delay: .4s; }
.iv-confirmer { margin: 6px 0 10px; }
.iv-pas::before { content: ""; position: absolute; left: 19px; top: 38px; bottom: 2px; width: 2px; background: var(--telios-trait); }
.iv-pas:last-child::before { display: none; }
.iv-pas.est-fait::before { background: var(--iv-t); }
.iv-pas-rond { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--telios-texte-attenue);
  border: 2px solid var(--telios-trait); background: var(--telios-bg-alt); }
.iv-pas-rond .telios-icone { width: 16px; height: 16px; }
.iv-pas.est-fait .iv-pas-rond { color: var(--telios-encre-sur-accent); background: var(--iv-t); border-color: var(--iv-t); }
.iv-pas.est-ici .iv-pas-rond { color: var(--iv-t); border-color: var(--iv-t); animation: iv-pouls 1.8s ease-in-out infinite; }
.iv-pas strong { display: block; } .iv-pas small { display: block; color: var(--telios-texte-attenue); }
.iv-pas .iv-etiquette { margin: 6px 0 10px; }
.iv-appareils-client, .iv-pas .iv-appareils { margin: 6px 0 10px; padding-left: 18px; font-size: .8125rem; }
.iv-colis { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; padding: 6px 12px; border-radius: var(--telios-rayon-grand);
  border: 1px solid var(--telios-trait); background: var(--telios-bg-alt); font-size: .8125rem; }

@media (max-width: 1199.98px) { .iv-blocs { grid-template-columns: minmax(0, 1fr); } .iv-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .iv-noeud { width: 46px; height: 46px; } .iv-noeud .telios-icone { width: 20px; height: 20px; }
  .iv-noeud b { min-width: 22px; height: 22px; font-size: .6875rem; } .iv-fil { top: 22px; }
  .iv-etape strong { font-size: .6875rem; } .iv-etape small { display: none; }
  .iv-actions, .iv-renvoi, .iv-avancer-renvoi, .iv-renvoi-fiche, .iv-offre-bloc, .iv-offerte { grid-template-columns: minmax(0, 1fr); }
  .iv-ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; } .iv-ligne-quand { text-align: left; }
  .iv-recherche { flex: 1 1 100%; }
  .iv-progression small { display: none; } .iv-progression strong { font-size: .6875rem; }
  .iv-f-tete { grid-template-columns: 1fr auto auto; } .iv-f-tete .iv-noeud { display: none; }
  .iv-appareil { grid-template-columns: minmax(0, 1fr); } .iv-appareil .iv-large { grid-column: auto; } .iv-mobile { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-heros, .iv-poste, .iv-historique, .iv-etape, .iv-ligne, .iv-fil span, .iv-noeud, .iv-mini span, .iv-ligne-scan, .iv-resultat, .iv-rond, .iv-scanner-pastille, .iv-scanner-lu,
  .iv-rond path, .iv-progression::after, .iv-progression span, .iv-question, .iv-suivi, .iv-pas, .iv-pas-rond, .iv-renvoi { animation: none !important; transition: none; }
}

/* Console d'un devis d'Analyse spécifique : la case « à l'atelier » et le lien
   vers l'intervention ouverte (Atelier → Interventions). */
.dv-analyse-atelier { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; font-size: .875rem; }
.dv-analyse-atelier .form-check-input { flex: none; float: none; margin: 2px 0 0; }
.dv-analyse-intervention { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; }
.dv-analyse-intervention .telios-icone { width: 16px; height: 16px; }

/* « Avez-vous reçu votre colis ? » (interventions/_reception.html) : une
   fois par session de l'Espace client, tant qu'un renvoi n'est pas confirmé. */
.iv-reception { width: min(560px, calc(100vw - 24px)); }
.iv-reception-tete { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 24px 10px; text-align: center; }
.iv-reception-halo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--telios-marque);
  background: color-mix(in srgb, var(--telios-marque) 14%, var(--telios-carte)); animation: iv-eclot .6s ease-out both, iv-route 2.6s 1s ease-in-out infinite; }
.iv-reception-halo .telios-icone { width: 30px; height: 30px; }
@keyframes iv-route { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.iv-reception-titre { margin: 0; font-size: 1.25rem; }
.iv-reception-corps { display: grid; gap: 10px; }
.iv-reception-colis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); animation: iv-entre .4s .15s ease-out both; }
.iv-reception-colis small { display: block; color: var(--telios-texte-attenue); }
@media (prefers-reduced-motion: reduce) { .iv-reception-halo, .iv-reception-colis { animation: none; } }

/* Banc : les relances (TELIOS 2.15.59). Sur la relance, son origine ; sur
   l'origine, l'issue de chaque relance, à la teinte de cette issue. Le
   verdict de l'origine, lui, ne change jamais. */
.atl-relance { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.atl-relance .telios-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--telios-accent); }
small.atl-relance { font-size: .75rem; }
.atl-relance-conforme b { color: var(--telios-ok); }
.atl-relance-ecart b { color: var(--telios-danger); }
.atl-relance-impossible b, .atl-relance-attente b { color: var(--telios-alerte); }
.atl-relance-non_prevu b { color: var(--telios-texte-attenue); }

/* « Validation offerte » (12/10/2026) : le bloc de la page, puis la fenêtre
   d'envoi. Le halo du colis éclot, trois éclats en partent, comme un cadeau
   qu'on ouvre ; tout s'arrête sous « moins d'animations ». */
.iv-offerte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); animation: iv-entre .5s .1s ease-out both;
  background: linear-gradient(110deg, color-mix(in srgb, var(--telios-accent2) 12%, var(--telios-carte)), var(--telios-carte) 55%); }
.iv-offerte-halo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--telios-accent2);
  background: color-mix(in srgb, var(--telios-accent2) 16%, var(--telios-carte)); border: 2px solid var(--telios-accent2); }
.iv-offerte-halo .telios-icone { width: 24px; height: 24px; }
.iv-offerte-choix { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iv-offerte-choix .form-select { min-width: 240px; }
.iv-offre { width: min(680px, calc(100vw - 24px)); }
.iv-offre-tete { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px 18px; text-align: center;
  border-bottom: 1px solid var(--telios-trait); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--telios-accent2) 22%, var(--telios-carte)), var(--telios-carte) 70%); }
.iv-offre-halo { position: relative; flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: var(--telios-encre-sur-accent);
  background: var(--telios-accent2); box-shadow: 0 0 0 10px color-mix(in srgb, var(--telios-accent2) 18%, transparent),
  0 18px 40px -12px color-mix(in srgb, var(--telios-accent2) 70%, transparent); animation: iv-eclot .6s ease-out both, iv-flotte 3.2s 1s ease-in-out infinite; }
.iv-offre-halo .telios-icone { width: 34px; height: 34px; }
@keyframes iv-flotte { 50% { transform: translateY(-4px); } }
.iv-offre-eclat { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--telios-alerte); opacity: 0;
  animation: iv-eclat 1.1s .45s ease-out both; }
.iv-offre-eclat:nth-child(2) { background: var(--telios-accent); animation-delay: .55s; --iv-dx: 46px; --iv-dy: -30px; }
.iv-offre-eclat:nth-child(3) { background: var(--telios-ok); animation-delay: .65s; --iv-dx: -44px; --iv-dy: -24px; }
@keyframes iv-eclat { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--iv-dx, 4px)), calc(-50% + var(--iv-dy, -54px))) scale(1.1); } }
.iv-offre-surtitre { margin: 8px 0 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-accent2); }
.iv-offre-titre { margin: 0; font-size: 1.375rem; }
.iv-offre-texte { margin: 0; max-width: 460px; font-size: .875rem; color: var(--telios-texte-attenue); }
.iv-offre-fermer { position: absolute; top: 14px; right: 14px; }
.iv-offre-corps { display: grid; gap: 14px; }
.iv-offre-bloc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 0; padding: 14px 16px;
  border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); animation: iv-entre .4s ease-out both; }
.iv-offre-bloc:nth-of-type(2) { animation-delay: .08s; } .iv-offre-bloc:nth-of-type(3) { animation-delay: .16s; }
.iv-offre-bloc legend { display: flex; align-items: center; gap: 8px; float: left; width: 100%; grid-column: 1 / -1; margin: 0; font-size: .75rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--telios-texte-attenue); }
.iv-offre-bloc legend .telios-icone { width: 16px; height: 16px; color: var(--telios-accent2); }
.iv-offre-langue { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: var(--telios-rayon-grand);
  font-size: .875rem; background: color-mix(in srgb, var(--telios-accent) 8%, var(--telios-carte)); }
.iv-offre-langue .telios-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--telios-accent); }
@media (prefers-reduced-motion: reduce) { .iv-offerte, .iv-offre-halo, .iv-offre-eclat, .iv-offre-bloc { animation: none; } }

/* Paramètres facturation (administration/identite.html) : un bloc par sujet,
   une grille de 12 colonnes dans chacun, des champs à la taille de leur
   contenu (demande du 12/10/2026). */
.em-formulaire { display: grid; gap: 16px; }
.em-bloc { margin: 0; padding: 18px 20px 6px; animation: iv-entre .4s ease-out both; }
.em-bloc:nth-of-type(2) { animation-delay: .04s; } .em-bloc:nth-of-type(3) { animation-delay: .08s; }
.em-bloc:nth-of-type(4) { animation-delay: .12s; } .em-bloc:nth-of-type(n+5) { animation-delay: .16s; }
.em-tete { display: flex; align-items: center; gap: 12px; float: left; width: 100%; margin: 0 0 14px; padding: 0 0 12px;
  border-bottom: 1px dashed var(--telios-trait); font-size: 1rem; }
.em-tete strong { display: block; font-size: 1rem; } .em-tete small { display: block; font-size: .8125rem; font-weight: 400; color: var(--telios-texte-attenue); }
.em-pastille { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: var(--telios-accent);
  background: color-mix(in srgb, var(--telios-accent) 12%, var(--telios-carte)); }
.em-pastille .telios-icone { width: 19px; height: 19px; }
.em-grille { clear: both; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 16px; }
.em-champ { margin-bottom: 14px; min-width: 0; }
.em-l-2 { grid-column: span 2; } .em-l-3 { grid-column: span 3; } .em-l-4 { grid-column: span 4; } .em-l-5 { grid-column: span 5; }
.em-l-6 { grid-column: span 6; } .em-l-7 { grid-column: span 7; } .em-l-8 { grid-column: span 8; } .em-l-9 { grid-column: span 9; }
.em-l-12 { grid-column: 1 / -1; }
.em-pied { display: flex; justify-content: flex-start; }
@media (max-width: 991.98px) { .em-l-2, .em-l-3 { grid-column: span 4; } .em-l-4, .em-l-5 { grid-column: span 6; }
  .em-l-6, .em-l-7, .em-l-8, .em-l-9 { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .em-grille > .em-champ { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .em-bloc { animation: none; } }

/* Banc UAT : la réussite du banc en mini-tableau (maquette validée le
   12/10/2026). Toute la largeur, comme les préconisations dessous. */
.bc-grille > .rb-bloc, .bc-grille > .rb-pleine { grid-column: 1 / -1; }
.rb-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px;
  padding: 10px 12px; border: 1px solid var(--telios-trait); border-radius: var(--telios-rayon-grand); background: var(--telios-bg-alt); }
.rb-segments { display: inline-flex; padding: 3px; border-radius: var(--telios-rayon-petit); border: 1px solid var(--telios-trait); background: var(--telios-carte); }
.rb-segments button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--telios-rayon-petit);
  background: none; color: var(--telios-texte-attenue); font-size: .8125rem; font-weight: 500; cursor: pointer; }
.rb-segments button[aria-pressed="true"] { color: var(--telios-texte); font-weight: 700; background: var(--telios-bg-alt); box-shadow: inset 0 0 0 1px var(--telios-trait); }
.rb-segments i { font-style: normal; font-size: .6875rem; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid var(--telios-trait); }
.rb-tri { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; color: var(--telios-texte-attenue); }
.rb-tri .form-select { width: auto; }
.rb-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.rb-puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.rb-puce .telios-icone { width: 13px; height: 13px; }
.rb-puce-ok { color: var(--telios-ok); background: color-mix(in srgb, var(--telios-ok) 12%, transparent); }
.rb-puce-att { color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 14%, transparent); }
.rb-puce-ko { color: var(--telios-danger); background: color-mix(in srgb, var(--telios-danger) 12%, transparent); }
.rb-table { width: 100%; border-collapse: collapse; }
.rb-table th { padding: 8px 10px; border-bottom: 1px solid var(--telios-trait); font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--telios-texte-attenue); text-align: left; white-space: nowrap; }
.rb-table td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--telios-trait) 60%, transparent); vertical-align: middle; }
.rb-table th.rb-n, .rb-table td.rb-n { text-align: right; }
.rb-ligne { animation: iv-entre .4s ease-out both; transition: background-color .15s; }
.rb-ligne:hover { background: color-mix(in srgb, var(--telios-accent) 6%, transparent); }
.rb-ligne:nth-child(2) { animation-delay: .03s; } .rb-ligne:nth-child(3) { animation-delay: .06s; } .rb-ligne:nth-child(4) { animation-delay: .09s; }
.rb-ligne:nth-child(n+5) { animation-delay: .12s; }
.rb-etat { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; animation: iv-eclot .45s ease-out both; }
.rb-etat .telios-icone { width: 15px; height: 15px; }
.rb-etat-ok { color: var(--telios-encre-sur-accent); background: var(--telios-ok); }
.rb-etat-att { color: var(--telios-alerte); background: color-mix(in srgb, var(--telios-alerte) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--telios-alerte); }
.rb-etat-ko { color: var(--telios-danger); background: color-mix(in srgb, var(--telios-danger) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--telios-danger); }
.rb-nom a { font-weight: 700; color: var(--telios-texte); text-decoration: none; }
.rb-nom a:hover { color: var(--telios-accent); text-decoration: underline; }
.rb-nom small { display: block; font-size: .75rem; color: var(--telios-texte-attenue); }
.rb-taux { min-width: 90px; }
.rb-taux b { display: block; font-size: .9375rem; }
.rb-ok .rb-taux b { color: var(--telios-ok); } .rb-att .rb-taux b { color: var(--telios-alerte); } .rb-ko .rb-taux b { color: var(--telios-danger); }
.rb-mini { display: block; height: 4px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: var(--telios-bg-alt); }
.rb-mini > span { display: block; height: 100%; border-radius: 999px; transform-origin: left; animation: iv-jauge .8s ease-out both; }
.rb-att .rb-mini > span { background: var(--telios-alerte); } .rb-ko .rb-mini > span { background: var(--telios-danger); }
.rb-sous { color: var(--telios-texte-attenue); }
.rb-zero { color: var(--telios-texte-attenue); } .rb-nb-att { color: var(--telios-alerte); } .rb-nb-ko { color: var(--telios-danger); }
.rb-panneau + .rb-panneau { margin-top: 18px; }
.rb-vide { margin: 12px 0 0; text-align: center; color: var(--telios-texte-attenue); }
.rb-pied { margin: 10px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); text-align: right; }
.rb-compte { margin: 8px 0 0; font-size: .75rem; color: var(--telios-texte-attenue); }
@media (max-width: 767.98px) { .rb-cache { display: none; } }
@media (prefers-reduced-motion: reduce) { .rb-ligne, .rb-etat, .rb-mini > span { animation: none; } }