/* =============================================================================
   assets/css/tableau-vues-2027.css - turf.bzh
   -----------------------------------------------------------------------------
   Vues du tableau des partants (10/10/2026) : la barre d'onglets, les vues
   L'essentiel, Forme, IA et ELO, Cotes, Conditions, MathBZH, Ma vue, en
   tableau ou en cartes, et la fenetre de composition de « Ma vue ».
   Logique : js/tableau_vues.js. Balisage : tableau_partants.php.

   Meme systeme que course-2027.css et labo-2027.css : les jetons --tbz-ag-*
   du theme sont recopies en --tpv-*, avec une valeur de secours en dur.
   Classes prefixees .tpv-, mobile d'abord.

   LE TABLEAU COMPLET N'EST PAS TOUCHE. Quand une autre vue est active, il
   est mis hors champ (position absolue, visibility:hidden) et non masque
   par display:none : Tabulator garde ainsi ses largeurs exactes et MathBZH,
   le Borda et l'export continuent de travailler sur lui.

   !important : seulement pour (1) mettre le tableau complet hors champ et
   rendre la largeur a la barre d'outils, dont les styles sont poses en
   ligne par index.php, (2) neutraliser la hauteur fixe de 40 px que les
   formatteurs du tableau complet ecrivent en ligne dans leurs cellules,
   reprises ici telles quelles.

   Contrastes mesures sur blanc : texte #0f172a 17,8:1 ; secondaire #475569
   7,6:1 ; onglet actif #fff sur #0a7c91 4,88:1 ; or #a16207 4,92:1 ;
   bleu #0a7c91 4,88:1 ; rouge #b91c1c 6,47:1 ; vert #047857 5,48:1 ;
   ambre #b45309 5,02:1.

   Aucune bordure gauche d'accent (consigne de Paul).

   @author Claude (2026-10-10)
   @version 1.0.0
   ========================================================================== */

.tpv,
.tpv-dlg-fond {
  --tpv-bg:      var(--tbz-ag-bg, #f8fafc);
  --tpv-soft:    var(--tbz-ag-bg-soft, #f1f5f9);
  --tpv-card:    var(--tbz-ag-card, #ffffff);
  --tpv-bd:      var(--tbz-ag-border, #e5e7eb);
  --tpv-bd-soft: var(--tbz-ag-border-soft, #eef0f3);
  --tpv-ink:     var(--tbz-ag-text, #0f172a);
  --tpv-ink2:    var(--tbz-ag-text-2, #1e293b);
  --tpv-mut:     #475569;
  --tpv-acc:     var(--tbz-ag-accent, #0a7c91);
  --tpv-acc-d:   var(--tbz-ag-accent-d, #075d6e);
  --tpv-acc-l:   var(--tbz-ag-accent-l, #e0f2f6);
  --tpv-acc-l2:  var(--tbz-ag-accent-l2, #ecf7fa);
  --tpv-or:      #a16207;
  --tpv-ok:      #047857;
  --tpv-warn:    #b45309;
  --tpv-warn-bg: #fffbeb;
  --tpv-warn-bd: #fde68a;
  --tpv-ko:      #b91c1c;
  --tpv-r-sm:    10px;
  --tpv-r-md:    14px;
  --tpv-sh-sm:   0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04);
  --tpv-sh-lg:   0 20px 50px -12px rgba(15,23,42,.35);
  --tpv-ease:    cubic-bezier(.16,1,.3,1);
  --tpv-font:    var(--tbz-ag-font, 'Inter','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif);
}

/* ── Le tableau complet hors champ quand une autre vue est active ─────────── */
.tpv:not([data-vue="complet"]) ~ .pmu-wrap {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  visibility: hidden !important;
}
html.tpv-hors-complet .tbz-toolbar-container { max-width: none !important; }

/* ── Socle ───────────────────────────────────────────────────────────────── */
.tpv {
  padding: 0 clamp(16px, 5vw, 50px);
  margin: 8px 0 14px;
  font-family: var(--tpv-font);
  color: var(--tpv-ink);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.005em;
}
.tpv *, .tpv *::before, .tpv *::after { box-sizing: border-box; }
.tpv [hidden] { display: none !important; }
.tpv button { font-family: inherit; }
.tpv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── La barre d'onglets ──────────────────────────────────────────────────── */
.tpv-barre { display: flex; align-items: center; gap: 10px; }
.tpv-onglets-box { position: relative; flex: 1 1 auto; min-width: 0; }
.tpv-onglets-box::before,
.tpv-onglets-box::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 30px;
  pointer-events: none; opacity: 0; z-index: 1;
  transition: opacity .18s var(--tpv-ease);
}
.tpv-onglets-box::before { left: 1px; border-radius: 12px 0 0 12px; background: linear-gradient(270deg, rgba(241,245,249,0) 0%, var(--tpv-soft) 85%); }
.tpv-onglets-box::after { right: 1px; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(241,245,249,0) 0%, var(--tpv-soft) 85%); }
.tpv-onglets-box.a-gauche::before, .tpv-onglets-box.a-droite::after { opacity: 1; }
.tpv-onglets {
  display: flex; gap: 4px; padding: 4px;
  background: var(--tpv-soft);
  border: 1px solid var(--tpv-bd);
  border-radius: 12px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: 30px;
}
.tpv-onglets::-webkit-scrollbar { display: none; }
.tpv-onglet {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--tpv-ink2);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background .16s var(--tpv-ease), color .16s var(--tpv-ease);
}
.tpv-onglet:hover { background: var(--tpv-card); color: var(--tpv-acc-d); }
.tpv-onglet:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-onglet[aria-selected="true"] {
  background: var(--tpv-acc); color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.14);
}
.tpv-onglet[aria-selected="true"]:hover { background: var(--tpv-acc-d); color: #fff; }
/* Sur grand ecran, les huit onglets occupent toute la largeur : plus de
   defilement ni de voile de bord. */
@media (min-width: 992px) {
  .tpv-onglets { overflow-x: visible; }
  .tpv-onglet { flex: 1 1 auto; }
  .tpv-onglets-box::before, .tpv-onglets-box::after { display: none; }
}

/* Choix Cartes ou Tableau : telephone et tablette, hors tableau complet. */
.tpv-affichage { display: none; flex: 0 0 auto; }
@media (max-width: 1023px) {
  .tpv:not([data-vue="complet"]) .tpv-affichage {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--tpv-soft); border: 1px solid var(--tpv-bd); border-radius: 10px;
  }
}
@media (max-width: 640px) {
  .tpv:not([data-vue="complet"]) .tpv-barre { flex-wrap: wrap; }
  .tpv:not([data-vue="complet"]) .tpv-affichage {
    display: flex; flex: 1 1 100%; gap: 2px; padding: 3px;
    background: var(--tpv-soft); border: 1px solid var(--tpv-bd); border-radius: 10px;
  }
  .tpv:not([data-vue="complet"]) .tpv-affichage button { flex: 1 1 50%; justify-content: center; }
  .tpv:not([data-vue="complet"]) .tpv-onglets-box { flex-basis: 100%; }
}
.tpv-affichage button {
  min-height: 36px; padding: 6px 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--tpv-ink2); font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tpv-affichage button[aria-pressed="true"] { background: var(--tpv-card); color: var(--tpv-acc-d); box-shadow: var(--tpv-sh-sm); }
.tpv-affichage button:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 1px; }

/* ── Le panneau de la vue ────────────────────────────────────────────────── */
.tpv[data-vue="complet"] .tpv-panneau { display: none; }
.tpv-panneau { margin-top: 10px; }
.tpv-panneau:focus { outline: none; }
.tpv-entete { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tpv-intro { flex: 1 1 320px; margin: 0; color: var(--tpv-mut); font-size: 14px; min-height: 20px; }
.tpv-aide-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--tpv-bd); border-radius: 999px;
  background: var(--tpv-card); color: var(--tpv-acc-d);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tpv-aide-btn:hover { border-color: var(--tpv-acc); background: var(--tpv-acc-l2); }
.tpv-aide-btn:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-aide-btn i { transition: transform .18s var(--tpv-ease); }
.tpv-aide-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.tpv-aide {
  margin: 0 0 12px; padding: 14px 16px;
  background: var(--tpv-acc-l2); border: 1px solid var(--tpv-acc-l); border-radius: var(--tpv-r-md);
}
.tpv-aide dl {
  margin: 0; display: grid; gap: 10px 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tpv-aide dt { font-weight: 700; color: var(--tpv-ink); font-size: 13.5px; }
.tpv-aide dd { margin: 2px 0 0; color: var(--tpv-ink2); font-size: 13.5px; }
.tpv-aide-note { margin: 10px 0 0; font-size: 13px; color: var(--tpv-mut); }

/* ── Le contexte de la carriere ──────────────────────────────────────────── */
.tpv-ctx { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 10px; }
.tpv-ctx-lib { font-weight: 700; font-size: 13.5px; color: var(--tpv-ink); }
.tpv-ctx-pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.tpv-pastille {
  min-height: 36px; padding: 6px 13px;
  border: 1px solid var(--tpv-bd); border-radius: 999px;
  background: var(--tpv-card); color: var(--tpv-ink2);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .16s var(--tpv-ease), border-color .16s var(--tpv-ease);
}
.tpv-pastille:hover { border-color: var(--tpv-acc); color: var(--tpv-acc-d); }
.tpv-pastille:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-pastille[aria-pressed="true"] { background: var(--tpv-acc); border-color: var(--tpv-acc); color: #fff; }
.tpv-ctx-note { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--tpv-mut); }
/* Telephone : pastilles plus compactes, toujours entieres (pas de defilement
   qui couperait la derniere). */
@media (max-width: 640px) {
  .tpv-ctx-pastilles { gap: 5px; }
  .tpv-pastille { min-height: 34px; padding: 5px 11px; font-size: 13px; }
}

/* ── Bandeau d'acces (colonnes reservees) ────────────────────────────────── */
.tpv-alerte {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 14px;
  background: var(--tpv-warn-bg); border: 1px solid var(--tpv-warn-bd); border-radius: var(--tpv-r-sm);
  color: #7c2d12; font-size: 13.5px;
}
.tpv-alerte span { flex: 1 1 260px; }
.tpv-alerte a { color: var(--tpv-acc-d); font-weight: 700; text-decoration: underline; }

/* ── Le tableau des vues ─────────────────────────────────────────────────── */
.tpv-corps { width: 100%; }
.tpv-defil {
  width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--tpv-card);
  border: 1px solid var(--tpv-bd); border-radius: var(--tpv-r-md);
  box-shadow: var(--tpv-sh-sm);
}
.tpv-defil:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-table {
  width: 100%; margin: 0;
  border-collapse: separate; border-spacing: 0;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.tpv-table thead th {
  background: var(--tpv-bg);
  color: #334155; font-size: 12.5px; font-weight: 650;
  text-align: center; vertical-align: bottom;
  padding: 8px 6px;
  border-bottom: 1px solid var(--tpv-bd);
  min-width: 50px; max-width: 84px;
  line-height: 1.25;
}
.tpv-table thead th[title] .tpv-tri,
.tpv-table thead th[title] .tpv-th { text-decoration: underline dotted rgba(71,85,105,.55); text-underline-offset: 3px; }
.tpv-tri {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.tpv-tri:hover { background: var(--tpv-soft); color: var(--tpv-acc-d); }
.tpv-tri:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 1px; }
.tpv-tri i { font-size: 11px; color: var(--tpv-acc); }
.tpv-table thead th.tpv-gr {
  text-align: center; vertical-align: bottom; max-width: none;
  padding: 7px 6px 3px; border-bottom: 1px solid var(--tpv-bd-soft);
  color: var(--tpv-acc-d); font-size: 12px; font-weight: 750; letter-spacing: .01em;
}
.tpv-table thead tr.tpv-sous th { padding-top: 3px; max-width: 76px; }
.tpv-table th[aria-sort="ascending"] .tpv-tri i,
.tpv-table th[aria-sort="descending"] .tpv-tri i { color: var(--tpv-acc); }
.tpv-table tbody td,
.tpv-table tbody th {
  padding: 8px 5px;
  border-bottom: 1px solid var(--tpv-bd-soft);
  text-align: center; vertical-align: middle;
  background: var(--tpv-card);
  font-weight: 400;
}
.tpv-table tbody tr:last-child > * { border-bottom: 0; }
.tpv-table tbody tr:hover > * { background: #f8fbfc; }
.tpv-table .tpv-g { text-align: left; }
.tpv-table thead th.tpv-g { text-align: left; }
.tpv-table .tpv-col-num { width: 66px; white-space: nowrap; text-align: left; padding-left: 12px; }
.tpv-table .tpv-col-cheval { text-align: left; min-width: 150px; }
.tpv-table thead .tpv-col-cheval { text-align: left; }
.tpv-table .tpv-col-actif { width: 64px; }
.tpv-table .tpv-large { min-width: 150px; }
.tpv-table thead th.tpv-large, .tpv-table thead th.tpv-col-cheval, .tpv-table thead th.tpv-col-partant, .tpv-table thead th.tpv-g { max-width: none; }
.tpv-table td .tpv-mus { max-width: 190px; }
/* Identite compacte (vues larges) */
.tpv-table .tpv-col-partant { text-align: left; min-width: 180px; max-width: 240px; padding-left: 12px; }
.tpv-partant { display: flex; align-items: flex-start; gap: 8px; }
.tpv-partant-n { flex: 0 0 auto; white-space: nowrap; padding-top: 1px; }
.tpv-partant-c { min-width: 0; }
.tpv-partant-p { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
.tpv-partant-p + .tpv-partant-p { margin-top: 0; }
.tpv-partant .tpv-meta { display: inline; margin: 0 0 0 6px; }
/* Tableau qui defile encore (petit ecran) : la colonne d'identite reste. */
.tpv-defil.is-defile .tpv-col-partant { position: sticky; left: 0; z-index: 1; box-shadow: 6px 0 6px -6px rgba(15,23,42,.2); }
.tpv-defil.is-defile thead .tpv-col-partant { z-index: 2; background: var(--tpv-bg); }
.tpv-defil-note { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12.5px; color: var(--tpv-mut); }
/* Voile du bord droit tant qu'il reste des colonnes a voir. */
.tpv-corps .tpv-defil.is-defile:not(.is-fin) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0,0,0,.25) 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0,0,0,.25) 100%);
}
.tpv-table tr.is-inactif > * { opacity: .55; }
.tpv-table tr.is-inactif > .tpv-col-actif { opacity: 1; }

/* Telephone, affichage tableau : numero et cheval restent visibles. */
@media (max-width: 640px) {
  .tpv-table .tpv-col-num { position: sticky; left: 0; z-index: 1; }
  .tpv-table .tpv-col-cheval { position: sticky; left: 66px; z-index: 1; min-width: 132px; max-width: 150px; box-shadow: 6px 0 6px -6px rgba(15,23,42,.18); }
  .tpv-table thead .tpv-col-num, .tpv-table thead .tpv-col-cheval { z-index: 2; background: var(--tpv-bg); }
}

/* Cellules reprises du tableau complet : meme rendu, sans la hauteur fixe de
   40 px qu'elles portent en ligne. */
.tpv .tpv-leg [style*="height"] { height: auto !important; min-height: 0 !important; }
.tpv .tpv-leg [style*="background"] { padding: 4px 8px !important; border-radius: 6px; }
.tpv .tpv-leg { line-height: 1.3; }
/* Vue large en identite compacte : marges reduites pour tenir en largeur. */
.tpv-defil.is-compact .tpv-table tbody td { padding-left: 3px; padding-right: 3px; }
.tpv-defil.is-compact .tpv-leg [style*="background"] { padding: 4px 5px !important; }
.tpv-defil.is-compact .tpv-table thead th { padding-left: 4px; padding-right: 4px; }

/* ── Contenu des cellules ────────────────────────────────────────────────── */
.tpv-num-b { display: inline-block; min-width: 18px; font-weight: 800; font-size: 15px; color: var(--tpv-ink); }
.tpv-casaque { margin-left: 5px; vertical-align: -4px; }
.tpv-cheval {
  display: inline; padding: 0; border: 0; background: none;
  color: var(--tpv-ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(10,124,145,.35); text-underline-offset: 3px;
}
.tpv-cheval:hover { color: var(--tpv-acc-d); text-decoration-color: currentColor; }
.tpv-cheval:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; border-radius: 3px; }
.tpv-cheval.is-np { color: var(--tpv-ko); text-decoration: line-through; cursor: default; }
.tpv-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--tpv-mut); font-weight: 500; }
.tpv-np { color: var(--tpv-ko); font-weight: 700; }
.tpv-tag {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px;
  background: var(--tpv-soft); color: var(--tpv-mut); font-size: 11.5px; font-weight: 600;
}
.tpv-meta .tpv-tag { margin-left: 0; }
.tpv-lien {
  padding: 0; border: 0; background: none; color: var(--tpv-acc-d);
  font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(7,93,110,.35); text-underline-offset: 3px;
}
.tpv-lien:hover { text-decoration-color: currentColor; }
.tpv-lien[data-tpv-pers="trainer"] { color: #6d28d9; text-decoration-color: rgba(109,40,217,.35); }
.tpv-table .tpv-g .tpv-lien { display: inline-block; max-width: 150px; }
.tpv-lien:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; border-radius: 3px; }
.tpv-vide { color: #64748b; }   /* 4,76:1 sur blanc */
.tpv-mut { color: var(--tpv-mut); font-size: 12.5px; }
.tpv-mus { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.tpv-mus-j { font-size: 12px; font-weight: 700; color: var(--tpv-mut); white-space: nowrap; }
.tpv .tbz-mus { margin-top: 0; max-width: none; flex-wrap: wrap; row-gap: 2px; }
.tpv-avis { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.tpv-avis i { font-size: 16px; }
.tpv-avis.is-pos { color: var(--tpv-ok); }
.tpv-avis.is-neu { color: var(--tpv-warn); }
.tpv-avis.is-neg { color: var(--tpv-ko); }
.tpv-car { min-width: 128px; max-width: 200px; }
.tpv-car-l { display: flex; align-items: baseline; gap: 10px; font-size: 13px; white-space: nowrap; }
.tpv-car-v { color: var(--tpv-or); font-weight: 750; }
.tpv-car-p { color: var(--tpv-acc); font-weight: 750; }
.tpv-car small { font-size: 12px; font-weight: 500; color: var(--tpv-mut); }
.tpv-car-b { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; font-size: 11.5px; line-height: 1.3; }
.tpv-car-n { color: var(--tpv-mut); }
.tpv-car-barre { display: flex; height: 6px; margin-top: 4px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.tpv-car-barre i { display: block; height: 100%; }
.tpv-car-barre .v { background: var(--tpv-or); }
.tpv-car-barre .p { background: var(--tpv-acc); }
.tpv-car-inc { color: var(--tpv-ko); }
.tpv-recul { color: var(--tpv-warn); font-weight: 700; }
.tpv-ferrure {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--tpv-soft); border: 1px solid var(--tpv-bd);
  font-weight: 700; font-size: 12.5px; color: var(--tpv-ink2);
}
.tpv-borda { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tpv-rang {
  display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 999px;
  background: var(--tpv-acc-l); color: var(--tpv-acc-d); font-size: 12px; font-weight: 700;
}
.tpv-switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; cursor: pointer; }
.tpv-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tpv-switch span[aria-hidden] {
  position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1;
  transition: background .16s var(--tpv-ease);
}
.tpv-switch span[aria-hidden]::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25);
  transition: transform .16s var(--tpv-ease);
}
.tpv-switch input:checked + span[aria-hidden] { background: var(--tpv-acc); }
.tpv-switch input:checked + span[aria-hidden]::before { transform: translateX(18px); }
.tpv-switch input:focus-visible + span[aria-hidden] { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }

/* Note IA et analyse depliable */
.tpv-note {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 3px 8px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; font: inherit; font-weight: 800; font-size: 15px; cursor: default;
  white-space: nowrap; color: var(--tpv-ink2);
}
button.tpv-note { cursor: pointer; border-color: var(--tpv-bd); background: var(--tpv-card); }
button.tpv-note:hover { border-color: var(--tpv-acc); }
button.tpv-note:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-note small { font-size: 11px; font-weight: 600; color: var(--tpv-mut); }
.tpv-note i { align-self: center; margin-left: 5px; font-size: 10px; color: var(--tpv-mut); transition: transform .18s var(--tpv-ease); }
.tpv-note[aria-expanded="true"] i { transform: rotate(180deg); }
.tpv-note.is-pos { color: var(--tpv-ok); }
.tpv-note.is-neg { color: var(--tpv-ko); }
.tpv-table tr.tpv-detail > td { background: var(--tpv-acc-l2); text-align: left; padding: 10px 16px 12px; }
.tpv-table tr.tpv-detail p, .tpv-carte-analyse { margin: 0; max-width: 110ch; color: var(--tpv-ink2); font-size: 13.5px; line-height: 1.55; }
.tpv-carte-analyse { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--tpv-acc-l2); }

/* ── Les cartes (telephone) ──────────────────────────────────────────────── */
.tpv-cartes { display: grid; gap: 10px; }
.tpv-cartes-tri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.tpv-cartes-tri label { font-weight: 650; }
.tpv-cartes-tri select,
.tpv-mv select {
  min-height: 38px; padding: 6px 10px; max-width: 100%;
  border: 1px solid var(--tpv-bd); border-radius: 8px; background: var(--tpv-card);
  color: var(--tpv-ink); font: inherit;
}
.tpv-sens {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--tpv-bd); border-radius: 8px; background: var(--tpv-card);
  color: var(--tpv-ink2); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tpv-carte {
  background: var(--tpv-card);
  border: 1px solid var(--tpv-bd); border-radius: var(--tpv-r-md);
  padding: 12px;
  box-shadow: var(--tpv-sh-sm);
}
.tpv-carte.is-inactif { opacity: .6; }
.tpv-carte-tete { display: flex; align-items: center; gap: 10px; }
.tpv-carte-num { flex: 0 0 auto; display: flex; align-items: center; }
.tpv-carte-nom { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tpv-carte-cote { flex: 0 0 auto; min-width: 54px; text-align: right; }
.tpv-carte-lib { display: block; font-size: 11px; font-weight: 650; color: var(--tpv-mut); }
.tpv-carte-pers { margin: 6px 0 0; font-size: 13px; color: var(--tpv-ink2); }
.tpv-carte-pers > span { font-size: 11.5px; font-weight: 650; color: var(--tpv-mut); }
.tpv-carte-pers > span + .tpv-lien { margin-right: 10px; }
.tpv-carte-grille {
  display: grid; gap: 10px 14px; margin: 10px 0 0; padding-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  border-top: 1px solid var(--tpv-bd-soft);
}
.tpv-item { min-width: 0; }
.tpv-item dt { margin: 0 0 2px; font-size: 11.5px; font-weight: 650; color: var(--tpv-mut); }
.tpv-item dd { margin: 0; font-size: 14px; text-align: left; }
.tpv-item.tpv-large { grid-column: 1 / -1; }
.tpv-item.tpv-leg dd > span, .tpv-item.tpv-leg dd > div > span { display: inline-flex !important; justify-content: flex-start !important; }
.tpv-carte .tpv-car { max-width: none; }

/* ── Ma vue : barre de profil ────────────────────────────────────────────── */
.tpv-mv { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }
.tpv-mv label { font-weight: 650; font-size: 13.5px; }
.tpv-mv-nom { font-size: 15px; }
.tpv-mv-auto {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--tpv-acc-l); color: var(--tpv-acc-d); font-size: 12.5px; font-weight: 650;
}
.tpv-mv-act { display: inline-flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.tpv-bt,
.tpv-dlg-fond .tpv-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--tpv-bd); border-radius: 10px;
  background: var(--tpv-card); color: var(--tpv-ink2);
  font-family: var(--tpv-font); font-size: 14px; font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.tpv-bt:hover { border-color: var(--tpv-acc); color: var(--tpv-acc-d); text-decoration: none; }
.tpv-bt:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 2px; }
.tpv-bt-plein,
.tpv-dlg-fond .tpv-bt-plein { background: var(--tpv-acc); border-color: var(--tpv-acc); color: #fff; }
.tpv-bt-plein:hover { background: var(--tpv-acc-d); border-color: var(--tpv-acc-d); color: #fff; }
.tpv-bt-danger { color: var(--tpv-ko); }
.tpv-bt-danger:hover { border-color: var(--tpv-ko); color: var(--tpv-ko); }
.tpv-bt[disabled] { opacity: .55; cursor: default; }

/* ── Carte d'information (vue vide, acces) ───────────────────────────────── */
.tpv-info {
  padding: 28px 22px; text-align: center;
  background: var(--tpv-card); border: 1px solid var(--tpv-bd); border-radius: var(--tpv-r-md);
  box-shadow: var(--tpv-sh-sm);
}
.tpv-info-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 10px;
  background: var(--tpv-acc-l); color: var(--tpv-acc-d); font-size: 20px;
}
.tpv-info h3 { margin: 0 0 6px; font-size: 18px; font-weight: 750; color: var(--tpv-ink); letter-spacing: -.015em; }
.tpv-info p { margin: 0 auto 14px; max-width: 62ch; color: var(--tpv-mut); }
.tpv-info-act { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Fenetre de composition de « Ma vue » ────────────────────────────────── */
.tpv-dlg-fond {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15,23,42,.5);
  font-family: var(--tpv-font); color: var(--tpv-ink); font-size: 14px; line-height: 1.45;
}
.tpv-dlg-fond *, .tpv-dlg-fond *::before, .tpv-dlg-fond *::after { box-sizing: border-box; }
.tpv-dlg-fond [hidden] { display: none !important; }
.tpv-dlg {
  width: min(980px, 100%); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: var(--tpv-card); border-radius: 16px; overflow: hidden;
  box-shadow: var(--tpv-sh-lg);
}
.tpv-dlg-tete {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: linear-gradient(120deg, #04566c 0%, #067a93 100%); color: #fff;
}
.tpv-dlg-tete h2 { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.015em; }
.tpv-dlg-x {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 18px; cursor: pointer;
}
.tpv-dlg-x:hover { background: rgba(255,255,255,.28); }
.tpv-dlg-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tpv-dlg-corps { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; display: grid; gap: 12px; }
.tpv-dlg-ligne { display: grid; gap: 4px; }
.tpv-dlg-ligne label, .tpv-cond-lib { font-weight: 650; font-size: 13.5px; }
.tpv-dlg input[type="text"], .tpv-dlg input[type="search"], .tpv-dlg input[type="number"], .tpv-dlg select {
  width: 100%; min-height: 40px; padding: 7px 10px;
  border: 1px solid var(--tpv-bd); border-radius: 8px; background: var(--tpv-card);
  color: var(--tpv-ink); font: inherit;
}
.tpv-dlg input:focus-visible, .tpv-dlg select:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 1px; }
.tpv-dlg-note { margin: 0; font-size: 13px; color: var(--tpv-mut); }
.tpv-dlg-note a { color: var(--tpv-acc-d); font-weight: 650; }
.tpv-dlg-cols { display: grid; gap: 14px; }
@media (min-width: 768px) { .tpv-dlg-cols { grid-template-columns: 1fr 1fr; } }
.tpv-dlg-cols h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 750; }
.tpv-choisies { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tpv-choisies li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--tpv-bd); border-radius: 10px; background: var(--tpv-bg);
}
.tpv-choisies li.tpv-ch-vide { justify-content: center; color: var(--tpv-mut); border-style: dashed; background: none; padding: 12px; }
.tpv-ch-nom { flex: 1 1 auto; font-weight: 600; }
.tpv-ch-act { display: inline-flex; gap: 4px; }
.tpv-ch-act button {
  width: 34px; height: 34px; border: 1px solid var(--tpv-bd); border-radius: 8px;
  background: var(--tpv-card); color: var(--tpv-ink2); cursor: pointer;
}
.tpv-ch-act button:hover:not([disabled]) { border-color: var(--tpv-acc); color: var(--tpv-acc-d); }
.tpv-ch-act button[disabled] { opacity: .35; cursor: default; }
.tpv-ch-act button:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 1px; }
.tpv-dlg-dispo input[type="search"] { margin-bottom: 8px; }
#tbzVuesDispo { display: grid; gap: 10px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.tpv-dispo-g h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--tpv-mut); text-transform: none; }
.tpv-dispo-g ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tpv-dispo-g li button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 10px;
  border: 1px solid var(--tpv-bd); border-radius: 999px; background: var(--tpv-card);
  color: var(--tpv-ink2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tpv-dispo-g li button:hover { border-color: var(--tpv-acc); color: var(--tpv-acc-d); background: var(--tpv-acc-l2); }
.tpv-dispo-g li button:focus-visible { outline: 2px solid var(--tpv-acc); outline-offset: 1px; }
.tpv-dispo-g li button i { font-size: 11px; color: var(--tpv-acc); }
.tpv-dlg-cond { margin: 0; padding: 12px 14px; border: 1px solid var(--tpv-bd); border-radius: 12px; display: grid; gap: 10px; }
.tpv-dlg-cond legend { padding: 0 6px; font-size: 14.5px; font-weight: 750; width: auto; margin: 0; float: none; }
.tpv-dlg-cond[disabled] .tpv-cond-grille, .tpv-dlg-cond[disabled] > .tpv-coche { opacity: .5; }
.tpv-cond-grille { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tpv-cond-grille > div { display: grid; gap: 4px; align-content: start; }
.tpv-coche { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 30px; cursor: pointer; }
.tpv-coche input { width: 18px; height: 18px; accent-color: var(--tpv-acc); }
.tpv-bornes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tpv-dlg-msg { margin: 0; min-height: 20px; font-size: 13.5px; color: var(--tpv-acc-d); font-weight: 600; }
.tpv-dlg-msg.is-ko { color: var(--tpv-ko); }
.tpv-dlg-pied {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--tpv-bd); background: var(--tpv-bg);
}
.tpv-dlg-espace { flex: 1 1 auto; }
@media (max-width: 640px) {
  .tpv-dlg-fond { padding: 0; align-items: flex-end; }
  .tpv-dlg { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .tpv-dlg-pied .tpv-bt { flex: 1 1 auto; }
  .tpv-dlg-espace { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tpv *, .tpv-dlg-fond * { transition: none !important; }
}