/* Espace client Brioz - mobile d'abord, clair uniquement. Identité Brioz validée le 07/11/2026. */
:root {
  --bg: #F2EEE6; --surface: #ffffff; --ink: #141414; --ink2: #2e2c29; --muted: #6a655d; --line: #ddd5c7; --line-soft: #ece6db;
  --accent: #141414; --accent-ink: #F2EEE6; --accent-soft: #e9e3d8; --lien-h: #1E9E6A; --vert: #1E9E6A;
  --ok: #157a52; --ok-soft: #e1f3ea; --warn: #7a5a00; --warn-soft: #fff4cc; --bad: #9a3f0c; --bad-soft: #ffe9db;
  --info: #1d4f9e; --info-soft: #e2eeff; --pre-txt: #8a5200; --pre-soft: #fff0d6;
  --dev: var(--info); --pre: var(--pre-txt); --prod: var(--ok);
  --radius: 20px;
  --font: 'Rethink Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre: 'Rethink Sans', system-ui, sans-serif;
  --ombre: 0 1px 2px rgba(20, 20, 20, .04);
  --ombre-h: 0 2px 4px rgba(20, 20, 20, .05), 0 16px 32px rgba(20, 20, 20, .07);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Structure ---------- */
.entete { background: var(--surface); border-bottom: 1px solid var(--line); }
.entete-in, .principal, .pied {
  width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter);
}
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marque { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.marque img { display: block; height: 28px; width: auto; align-self: center; }
.marque small { display: none; font: 500 .78rem/1 var(--font); color: var(--muted); letter-spacing: .02em; }
.compte { display: flex; align-items: center; gap: 4px; min-width: 0; }
.compte-nom { font-size: .875rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }

.onglets { background: color-mix(in oklab, var(--surface) var(--brz-verre-opacite), transparent); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.onglets ul { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; max-width: 1080px; margin: 0 auto; padding-inline: calc(var(--gutter) - 6px); }
.onglets a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 6px;
  font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: opacity .12s, transform .12s;
}
.onglets a:active { transform: scale(.97); opacity: .7; }
.onglets a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.principal { padding-block: 28px 56px; }
.pied { padding-block: 0 40px; color: var(--muted); font-size: .8125rem; }
.pied a { color: inherit; }

.titre { margin-bottom: 24px; }
.titre h1 { font: 800 clamp(1.75rem, 6vw, 2.5rem)/1.12 var(--titre); letter-spacing: -.02em; }
.titre p { color: var(--muted); margin-top: 8px; max-width: 56ch; }
.retour { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; font-size: .9rem; text-decoration: none; }

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink);
  font: 700 .9375rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .12s ease-out, opacity .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--ink2); color: var(--accent-ink); }
.btn:active { transform: scale(.97); opacity: .85; }
.btn.bloc { width: 100%; }
.btn[aria-busy="true"], .btn:disabled { opacity: .7; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourne .7s linear infinite;
}
.btn.sobre { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px #d0d4df; }
.btn.sobre:hover { background: #f7f8fa; color: var(--ink); }
.lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none;
  font: 500 .9rem/1 var(--font); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  transition: transform .12s, opacity .12s; white-space: nowrap;
}
.lien:active { transform: scale(.97); opacity: .6; }
.lien[aria-busy="true"] { opacity: .6; pointer-events: none; }
.lien.discret { color: var(--muted); text-decoration: none; font-weight: 500; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Cartes, pastilles ---------- */
.carte { background: var(--surface); border-radius: 24px; padding: 20px; box-shadow: var(--brz-ombre-carte); }
@media (max-width: 639px) { .carte { box-shadow: var(--ombre); } }
.pile { display: grid; gap: 20px; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; line-height: 1.2; background: var(--line-soft); color: var(--muted); white-space: nowrap;
}
.pastille::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastille.ok { background: var(--ok-soft); color: var(--ok); }
.pastille.warn { background: var(--warn-soft); color: var(--warn); }
.pastille.acc { background: var(--accent-soft); color: var(--accent); }
.vide { text-align: center; padding: 48px 24px; }
.vide h2 { font: 700 1.5rem/1.2 var(--titre); margin-bottom: 8px; }
.vide p { color: var(--muted); max-width: 44ch; margin: 0 auto; }
.vide .trait { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent); }

/* ---------- Projets (façon Jira : dense, filtrable) ---------- */
.large .entete-in, .large .principal, .large .pied, .large .onglets ul { max-width: 1320px; }
:root { --todo: #4a5060; --haute: var(--bad); }
.seg-A_FAIRE { --c: var(--todo); } .seg-DEV { --c: var(--dev); } .seg-PREPROD { --c: var(--pre); } .seg-PROD { --c: var(--prod); }
.pt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.faible { color: var(--muted); }
.cle { font: 500 .8125rem/1.2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--muted); letter-spacing: -.01em; white-space: nowrap; }
.liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.liens a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: .9375rem; }

/* Cibles pressables : retour en moins de 100 ms, transform et opacity seulement */
.lp-nom h2 a, .cpt, .bande a, .onglets-p a, .puce-f, .plus, .tri, .pg, .tri-mobile a, .f-reinit, .f-ok, .liv .lien {
  transition: transform .12s ease-out, opacity .12s ease-out; -webkit-tap-highlight-color: transparent;
}
.lp-nom h2 a:active, .cpt:active, .bande a:active, .onglets-p a:active, .puce-f:active, .plus:active, .tri:active, .pg:active, .tri-mobile a:active, .f-reinit:active, .f-ok:active { transform: scale(.97); opacity: .7; }

/* Ensemble des projets */
.lps { gap: 12px; }
.lp { display: grid; gap: 16px; padding: 18px; }
.lp-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; align-content: start; }
.lp-nom h2 { font: 700 1.35rem/1.2 var(--titre); letter-spacing: -.01em; }
.lp-nom h2 a { color: var(--ink); text-decoration: none; display: inline-block; }
.lp-nom h2 a:hover { color: var(--accent); text-decoration: underline; }
.lp-resume { flex-basis: 100%; color: var(--ink2); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seg-barre { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line-soft); }
.seg { background: var(--c); min-width: 4px; }
.seg-PREPROD.seg { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 6px); }
.seg-A_FAIRE.seg { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, transparent 2px 5px); }
.cpts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; margin-top: 4px; }
.cpt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border-radius: 8px; font-size: .875rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.cpt:hover { background: var(--bg); }
.cpt b { font-weight: 700; }
.lp-liv { display: grid; gap: 2px; align-content: start; font-size: .875rem; }
.lp-liv b { font-weight: 600; }
.lp-etq { font-size: .8125rem; color: var(--muted); font-weight: 500; }
.liens-p { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 2px; }
.liens-p a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* En-tête de projet */
.miettes ol { display: flex; flex-wrap: wrap; align-items: center; font-size: .875rem; color: var(--muted); }
.miettes li + li::before { content: '/'; margin: 0 8px; color: var(--line); }
.miettes a { display: inline-flex; align-items: center; min-height: 44px; }
.miettes [aria-current] { color: var(--ink); font-weight: 500; }
.pj-tete { display: grid; gap: 8px; margin-bottom: 16px; }
.pj-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pj-titre h1 { font: 800 clamp(1.6rem, 5vw, 2.25rem)/1.12 var(--titre); letter-spacing: -.02em; }
.pj-resume { color: var(--ink2); max-width: 80ch; }
.avanc { font-size: .875rem; color: var(--muted); }
.avanc b { color: var(--ink); }
.bande { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 20px; }
.bande a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 52px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; color: var(--ink); text-decoration: none; }
.bande a:hover { border-color: var(--c); background: #f9faff; }
.bande b { font: 700 1.6rem/1 var(--titre); }
.bande span { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--muted); }

/* Onglets de vue, filtres */
.onglets-p { display: inline-flex; gap: 4px; padding: 4px; background: var(--line-soft); border-radius: 12px; margin-bottom: 14px; }
.onglets-p a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 9px; font-size: .9375rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.onglets-p a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,20,31,.12); }
.filtres { display: grid; gap: 8px; margin-bottom: 10px; }
.f-champ { position: relative; display: block; }
.f-champ select, .f-champ input[type=search] {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #8c93a5; border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 400 1rem/1 var(--font);
}
.f-champ select { padding-right: 8px; text-overflow: ellipsis; }
.f-q svg { position: absolute; left: 12px; top: 14px; color: var(--muted); pointer-events: none; }
.f-q input { padding-left: 36px !important; }
.f-champ select:focus-visible, .f-champ input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.f-ok { min-height: 44px; font-size: .9375rem; }
.js .f-ok { display: none; }
.f-reinit { justify-content: center; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.puce-f { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .8125rem; text-decoration: none; position: relative; }
.puce-f::after { content: ''; position: absolute; inset: -4px 0; } /* cible tactile 44 px */
.puce-f b { font-weight: 600; }
.puce-f:hover { background: #dcd9fb; }
.compte { font-size: .875rem; color: var(--muted); margin: 6px 0 14px; min-height: 22px; }

/* Chargement par filtre : la page reste affichée, une fine barre défile en haut */
.chargement { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: 0; z-index: 20; pointer-events: none; }
.zone-projet.charge .chargement { opacity: 1; animation: charge 1.1s ease-out infinite; }
.zone-projet .contenu { transition: opacity .15s; }
.zone-projet.charge .contenu { opacity: .55; pointer-events: none; }
@keyframes charge { from { transform: scaleX(0); } to { transform: scaleX(.9); } }

/* Tableau */
.tableau { display: grid; gap: 10px; align-items: start; }
.colt { background: #e8eaf1; border-radius: 14px; padding: 4px 10px 8px; }
.colt summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; cursor: pointer; list-style: none; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink2); }
.colt summary::-webkit-details-marker { display: none; }
.colt summary::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); }
.colt[open] summary::after { transform: rotate(-135deg); }
.colt-nom { display: grid; gap: 1px; line-height: 1.2; }
.colt-nom small { font-size: .75rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.cpt-n { margin-left: auto; background: var(--surface); border-radius: 99px; min-width: 28px; padding: 3px 9px; text-align: center; font-size: .8125rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.colt-corps { display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; padding: 2px 2px 4px; overscroll-behavior: contain; }
.colt-corps:focus-visible { outline-offset: 0; border-radius: 10px; }
.rien { font-size: .875rem; color: var(--muted); padding: 12px 6px; text-align: center; }
.plus { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border-radius: 10px; font-size: .875rem; font-weight: 600; text-decoration: none; background: var(--surface); }
.plus:hover { background: var(--accent-soft); }
.tk { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; transition: box-shadow .12s, border-color .12s; }
.tk:hover { border-color: #c3c8d6; box-shadow: 0 1px 4px rgba(22,20,31,.1); }
.tk-haut { display: flex; align-items: center; gap: 8px; }
.tk-haut .prio { margin-left: auto; }
.tk-titre { font-size: .875rem; line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-bas { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nat { display: inline-flex; align-items: center; gap: 6px; }
.nat svg, .prio svg, .puce-l svg { flex: none; }
.nat-FONCTIONNALITE { color: var(--info); } .nat-CORRECTION { color: var(--bad); } .nat-AMELIORATION { color: var(--ok); } .nat-TACHE { color: #4a5060; }
.prio { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; }
.prio-HAUTE { color: var(--haute); font-weight: 700; } .prio-NORMALE { color: #5b6172; } .prio-BASSE { color: #5b6172; opacity: .8; }
.puce-m, .puce-l { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 6px; font-size: .8125rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-m { background: var(--line-soft); color: var(--ink2); }
.puce-l { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.etp { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }

/* Liste dense */
.tri-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 10px; font-size: .8125rem; color: var(--muted); }
.tri-mobile a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.tri-mobile a[aria-current] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.liste-tk-cadre { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: clip; }
.liste-tk { width: 100%; border-collapse: collapse; font-size: .875rem; }
.liste-tk thead { display: none; }
.liste-tk tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.liste-tk tbody tr:first-child { border-top: 0; }
.liste-tk td { display: block; min-width: 0; }
.liste-tk .c-cle { order: 1; } .liste-tk .c-etape { order: 2; margin-left: auto; }
.liste-tk .c-titre { order: 3; flex-basis: 100%; }
.liste-tk .c-nature { order: 4; } .liste-tk .c-priorite { order: 5; } .liste-tk .c-module { order: 6; } .liste-tk .c-livraison { order: 7; }
.liste-tk .c-maj { order: 8; margin-left: auto; font-size: .8125rem; color: var(--muted); }
.liste-tk .c-maj::before { content: attr(data-l) ' '; }
.liste-tk .t { font-weight: 500; font-size: .9375rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liste-tk .d { font-size: .8125rem; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pagination { margin-top: 16px; }
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.pg { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.pg:hover { border-color: var(--accent); }
.pg[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pg.off { opacity: .45; background: transparent; border-color: transparent; }
.pg-trou { color: var(--muted); padding: 0 2px; }

/* Livraisons */
.chrono { display: grid; gap: 14px; position: relative; padding-left: 22px; }
.chrono::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.liv { position: relative; }
.liv::before { content: ''; position: absolute; left: -22px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.liv-PROD::before { border-color: var(--prod); background: var(--prod); } .liv-PREPROD::before { border-color: var(--pre); } .liv-PREVUE::before { border-color: var(--warn); border-style: dashed; }
.liv .carte { padding: 16px 18px; display: grid; gap: 6px; }
.liv-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.liv-tete h3 { font: 700 1.35rem/1.2 var(--titre); }
.liv-date { margin-left: auto; font-size: .875rem; color: var(--muted); }
.liv-notes { color: var(--ink2); font-size: .9375rem; max-width: 75ch; }
.liv-tk summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9375rem; color: var(--accent); }
.liv-tk ul, ul.liv-tk { display: grid; font-size: .875rem; }
.liv-tk li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--line-soft); }
.liv-tk .tk-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liv .lien { justify-self: start; margin-left: -6px; }

@media (min-width: 768px) {
  .lp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, .9fr); gap: 24px; align-items: start; }
  .bande { grid-template-columns: repeat(4, 1fr); }
  .filtres { grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(0, 1fr)) auto; align-items: center; gap: 8px; }
  .f-champ select, .f-champ input[type=search] { font-size: .875rem; }
  .f-ok { grid-column: auto; }
  .tableau { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .colt summary { pointer-events: none; cursor: default; }
  .colt summary::after { display: none; }
  .colt::details-content { content-visibility: visible; }
  .tri-mobile { display: none; }
  .liste-tk thead { display: table-header-group; }
  .liste-tk th { position: sticky; top: 49px; background: #f7f8fa; text-align: left; font-size: .8125rem; font-weight: 600; color: var(--muted); padding: 0 12px; height: 44px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .liste-tk th[aria-sort] { color: var(--ink); }
  .tri { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: inherit; text-decoration: none; }
  .tri svg { opacity: .45; } .tri:hover svg, th[aria-sort] .tri svg { opacity: 1; }
  .tri:hover { color: var(--accent); }
  .liste-tk tbody tr { display: table-row; padding: 0; }
  .liste-tk td { display: table-cell; padding: 10px 12px; vertical-align: middle; border-top: 1px solid var(--line-soft); }
  .liste-tk tbody tr:first-child td { border-top: 0; }
  .liste-tk tbody tr:hover td { background: #f5f6ff; }
  .liste-tk .c-maj { font-size: .875rem; color: var(--ink2); white-space: nowrap; }
  .liste-tk .c-maj::before { content: none; }
  .liste-tk .c-cle, .liste-tk .c-nature, .liste-tk .c-priorite, .liste-tk .c-etape, .liste-tk .c-livraison { white-space: nowrap; }
  .liste-tk .c-titre { width: 38%; }
  .liste-tk .d { display: none; }
  .liste-tk .c-module .puce-m, .liste-tk .c-livraison .puce-l { max-width: 150px; }
  .pagination ul { justify-content: flex-end; }
}
@media (min-width: 1100px) {
  .lp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .8fr); }
}
@media (max-width: 767px) {
  .f-champ select, .f-champ input[type=search] { font-size: 1rem; }
  .filtres { grid-template-columns: 1fr 1fr; }
  .f-q, .f-ok, .f-reinit { grid-column: 1 / -1; }
  .f-champ:has(select[name=module]), .f-champ:has(select[name=livraison]) { grid-column: auto; }
  .colt-corps { max-height: 60vh; }
  .bande a { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ---------- Contrats ---------- */
.liste { display: grid; gap: 12px; }
.ligne-contrat { display: grid; gap: 14px; align-items: center; }
.ligne-contrat h2 { font: 700 1.25rem/1.25 var(--titre); }
.ligne-contrat p { color: var(--muted); font-size: .875rem; margin-top: 6px; }
.ligne-contrat .btn { width: 100%; }

.signature-page { display: grid; gap: 20px; }
.pdf { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pdf iframe, .pdf object { display: block; width: 100%; height: 58vh; min-height: 380px; border: 0; background: #e8eaf1; }
.pdf-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; padding: 4px 16px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.empreinte { font: 400 .72rem/1.4 ui-monospace, 'SF Mono', Menlo, monospace; word-break: break-all; padding: 0 16px 12px; color: var(--muted); }
.empreinte b { font-family: var(--font); font-weight: 600; }
.form-sign h2 { font: 700 1.5rem/1.2 var(--titre); margin-bottom: 4px; }
.etape { display: flex; gap: 12px; padding-top: 20px; }
.etape + .etape { margin-top: 20px; border-top: 1px solid var(--line-soft); }
.etape-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .85rem; display: grid; place-items: center; margin-top: 2px; }
.etape-corps { flex: 1; min-width: 0; display: grid; gap: 14px; }
.etape h3 { font-size: 1rem; font-weight: 600; }
.champ { display: grid; gap: 6px; }
.champ label, .champ .lib { font-size: .875rem; font-weight: 600; }
.champ input[type=text], .champ input[type=email], .champ input[inputmode=numeric] {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #8c93a5; border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 400 1rem/1 var(--font);
}
.champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #8c93a5; border-radius: 12px;
  background: var(--surface); color: var(--ink); font: 400 1rem/1.4 var(--font);
}
.champ textarea { resize: vertical; }
.champ select:focus-visible, .champ textarea:focus-visible, .champ input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--bad); }
.champ input.code { letter-spacing: .5em; font-size: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.aide { font-size: .8125rem; color: var(--muted); }
.erreur { color: var(--bad); font-size: .875rem; font-weight: 500; }
.coche { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: .9375rem; cursor: pointer; }
.coche input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.zone-sig { position: relative; }
.zone-sig canvas {
  display: block; width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed #8c93a5; border-radius: 12px;
  touch-action: none; cursor: crosshair;
}
.zone-sig canvas.actif { border-style: solid; border-color: var(--accent); }
.zone-sig .invite { position: absolute; inset: 0; display: grid; place-items: center; color: #5b6172; font-size: .875rem; pointer-events: none; }
.zone-sig-pied { display: flex; justify-content: space-between; align-items: center; }
.message { padding: 10px 14px; border-radius: 12px; font-size: .9rem; font-weight: 500; background: var(--ok-soft); color: var(--ok); }
.message.ko { background: var(--bad-soft); color: var(--bad); }
.message.info { background: var(--accent-soft); color: var(--accent); }
.signe-ok { display: grid; gap: 14px; }

/* ---------- Factures ---------- */
.facture-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; }
.facture h2 { font: 700 1.5rem/1.2 var(--titre); }
.periode { color: var(--muted); font-size: .875rem; margin-top: 4px; }
.lignes { margin-top: 18px; border-top: 1px solid var(--line); }
.lignes li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.lignes b { font-weight: 600; display: block; }
.lignes span.d { display: block; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.lignes .m { white-space: nowrap; font-weight: 500; }
.totaux { margin-top: 14px; display: grid; gap: 4px; margin-left: auto; max-width: 320px; }
.totaux div { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; color: var(--muted); }
.totaux .ttc { color: var(--ink); font: 700 1.5rem/1.3 var(--titre); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.calcul { margin-top: 20px; background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.calcul summary { cursor: pointer; font-weight: 600; font-size: .9375rem; min-height: 44px; display: flex; align-items: center; }
.calcul ul { display: grid; gap: 8px; padding: 2px 0 8px; color: var(--ink2); font-size: .9375rem; }
.calcul li { padding-left: 16px; position: relative; }
.calcul li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.facture-pied { margin-top: 8px; margin-left: -6px; }

/* ---------- Résultats ---------- */
.kpis { display: grid; gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.kpi dt { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.kpi dd { font: 700 2.25rem/1.15 var(--titre); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi.principal-kpi { border-color: var(--accent); }
.kpi.principal-kpi dd { color: var(--accent); }
.bloc-titre { font: 700 1.35rem/1.25 var(--titre); margin-bottom: 4px; }
.sous { color: var(--muted); font-size: .875rem; margin-bottom: 16px; }
.graph svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.graph .barre-g { fill: var(--accent); }
.graph .axe { stroke: var(--line); stroke-width: 1; }
.graph .axe-b { stroke: #8c93a5; stroke-width: 1; }
.graph text { font-family: var(--font); fill: var(--muted); font-size: 11px; }
.graph text.val { fill: var(--ink); font-weight: 600; }
.donnees { margin-top: 12px; font-size: .875rem; }
.donnees summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.donnees table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.donnees th, .donnees td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.donnees th { font-weight: 600; color: var(--muted); font-size: .8125rem; }
.donnees td.r, .donnees th.r { text-align: right; font-variant-numeric: tabular-nums; }
.types { display: grid; gap: 16px; }
.types li > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .9375rem; }
.types b { font-weight: 600; }
.types small { color: var(--muted); font-size: .8125rem; }
.types .piste { height: 8px; border-radius: 99px; background: var(--line-soft); margin-top: 6px; overflow: hidden; }
.types .piste span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.deux { display: grid; gap: 20px; }

/* ---------- Connexion, erreur, VSL ---------- */
.centre { min-height: 100dvh; display: grid; align-content: center; justify-items: center; padding: 32px var(--gutter); gap: 24px; }
.centre .marque { font-size: 1.6rem; }
.boite { width: 100%; max-width: 440px; }
.boite h1 { font: 700 1.75rem/1.2 var(--titre); letter-spacing: -.01em; }
.boite > p, .boite form > p { color: var(--muted); margin-top: 8px; }
.boite form { margin-top: 20px; display: grid; gap: 16px; }
.renvoi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.renvoi form { margin: 0; display: block; }

.vsl { max-width: 880px; margin: 0 auto; padding: 24px var(--gutter) 64px; display: grid; gap: 24px; }
.vsl h1 { font: 800 clamp(1.9rem, 7vw, 3rem)/1.1 var(--titre); letter-spacing: -.02em; }
.cadre-video { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0f0d18; display: grid; place-items: center; color: #e7e4f0; position: relative; }
.cadre-video video { width: 100%; height: 100%; display: block; background: #0f0d18; }
.preparation { text-align: center; padding: 24px; display: grid; gap: 12px; justify-items: center; }
.preparation b { font: 700 1.35rem/1.25 var(--titre); }
.preparation p { color: #b8b3c9; font-size: .9rem; }
.pulse { width: 44px; height: 4px; border-radius: 4px; background: #3a3550; overflow: hidden; position: relative; }
.pulse::after { content: ''; position: absolute; inset: 0; width: 40%; background: #fff; border-radius: 4px; animation: glisse 1.4s ease-in-out infinite; }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cta { display: grid; gap: 8px; justify-items: start; }
.cta .btn { width: 100%; }

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .marque small { display: inline; }
  .compte-nom { max-width: none; font-size: .9375rem; }
  .onglets ul { display: flex; justify-content: flex-start; gap: 8px; }
  .onglets a { padding: 0 16px; }
  .principal { padding-block: 44px 72px; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .ligne-contrat { grid-template-columns: 1fr auto; }
  .ligne-contrat .btn { width: auto; }
  .cta .btn { width: auto; }
  .carte { padding: 28px; }
}
@media (min-width: 960px) {
  .signature-page { grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); align-items: start; }
  .signature-page .form-sign { position: sticky; top: 76px; }
  .pdf iframe, .pdf object { height: 78vh; }
  .deux { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn:active, .lien:active, .onglets a:active, .lp-nom h2 a:active, .cpt:active, .bande a:active, .onglets-p a:active, .puce-f:active, .plus:active, .tri:active, .pg:active, .tri-mobile a:active, .f-reinit:active, .f-ok:active { transform: none; }
  .zone-projet.charge .chargement { animation: none; transform: scaleX(.6); }
  .btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .5; }
  .pulse::after { animation: none; width: 100%; opacity: .5; }
}

/* ---------- Support, coûts et bilan ---------- */
.support-grille { display: grid; gap: 24px; align-items: start; }
.form-support { display: grid; gap: 16px; }
.sous-titre { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.demande { display: grid; gap: 8px; }
.demande h3 { font-size: 1rem; font-weight: 600; }
.demande-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reponse { margin: 4px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; font-size: .9rem; }
.reponse b { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-bottom: 2px; }
.tk-cout { font-size: .75rem; color: var(--muted); }
.tk-cout .vd { color: var(--accent); font-weight: 600; }
.tk-cout .facture { color: var(--warn); font-weight: 600; }
.tk-cout .gain { color: var(--ok); font-weight: 500; }
.demande .facture { color: var(--warn); font-weight: 600; }
.bilan { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.bilan div { display: grid; gap: 2px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.bilan span { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.bilan b { font: 700 1.5rem/1.1 var(--titre); }
.bilan small { font-size: .8125rem; color: var(--muted); }
@media (min-width: 768px) {
  .bilan { grid-template-columns: 1fr 1fr; }
  .support-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ---------- Alignement sur le cockpit : étapes, ombres ---------- */
.pastille.seg-A_FAIRE { background: var(--line-soft); color: #4a5060; }
.pastille.seg-DEV { background: var(--info-soft); color: var(--info); }
.pastille.seg-PREPROD { background: var(--pre-soft); color: var(--pre-txt); }
.pastille.seg-PROD { background: var(--ok-soft); color: var(--ok); }
.lp:hover, .tk:hover { box-shadow: var(--ombre-h); }
.bande a, .bilan div, .kpi, .liste-tk-cadre, .pdf { border: 0; box-shadow: var(--ombre); }
.bande a, .bilan div { border-radius: 18px; }
.bande a:hover { background: var(--surface); box-shadow: var(--ombre-h); }
.tk { border-radius: 14px; border-color: var(--line-soft); }
.colt { border-radius: 18px; }
.liste-tk-cadre { border-radius: 20px; }
.kpi.principal-kpi { box-shadow: inset 0 0 0 2px var(--accent); }

/* Reste à payer et contestation des relevés (contrat, partie B et annexe A3) */
.reste { display: flex; flex-direction: column; gap: 10px; }
.reste-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.reste-tete b { font-size: 1.125rem; }
.reste-tete span, .reste p { color: var(--muted); font-size: .875rem; margin: 0; }
.reste-barre { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.reste-barre i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.contester { margin-top: 12px; }
.contester summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--ink2); font-size: .9375rem; }
.contester textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.note-contest { margin: 12px 0 0; color: var(--muted); font-size: .875rem; }

/* Identité Brioz : titres serrés, soulignés discrets ; le vert ne sert qu'aux succès et au survol des liens. */
h1 { letter-spacing: -0.035em; }
a { text-decoration-color: rgba(20, 20, 20, .3); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .onglets { -webkit-backdrop-filter: none; backdrop-filter: none; } }