@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 100 800; font-display: swap;
}

:root {
  --ink: #10213a; --ink-2: #44506a; --ink-3: #5c6578; --ink-hover: #1d3557;
  --paper: #edede8; --paper-2: #e3e3dc; --sheet: #f6f6f2; --rule: #cfcfc5; --rule-2: #b9b9ad;
  --station: #ffffff; --on-ink: #dfe5ef; --on-ink-2: #a9bad6;
  --focus: var(--l-pve); --focus-encre: #8fb3f5;
  --l-info: #f2b705; --l-heb: #e5620b; --l-sav: #6ba539; --l-con: #1c9c9a; --l-pve: #1f5fbf;
  --l-info-ink: #7a5c00; --l-heb-ink: #a8430a; --l-sav-ink: #3f6e1c; --l-con-ink: #0f6e6c;
  --ok-bg: #e1edd5; --ok-text: #2f5714; --wait-bg: #fbefc8; --wait-text: #6d5200;
  --bad-bg: #f6ded3; --bad-text: #8a3309;
  --sans: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --line: var(--ink); --line-ink: var(--ink);
  --gutter: 1.1rem; --max: 76rem;
  --step--1: 0.8125rem; --step-0: 1.0625rem;
}
@media (min-width: 640px) { :root { --gutter: 1.75rem; } }
@media (min-width: 1000px) { :root { --gutter: 2.5rem; } }

[data-line='trafic'] { --line: var(--l-heb); --line-ink: var(--l-heb-ink); }
[data-line='sauvegarde'] { --line: var(--l-sav); --line-ink: var(--l-sav-ink); }
[data-line='attente'] { --line: var(--l-info); --line-ink: var(--l-info-ink); }
[data-line='preview'] { --line: var(--l-con); --line-ink: var(--l-con-ink); }
[data-line='encre'] { --line: var(--ink); --line-ink: var(--ink); }
[data-line='alerte'] { --line: var(--l-heb-ink); --line-ink: var(--l-heb-ink); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--sans); font-feature-settings: 'lnum';
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
a { color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--line); }
::selection { background: var(--l-info); color: var(--ink); }

h1, h2, h3 { margin: 0; font-weight: 720; line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); font-weight: 780; font-stretch: 112%; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-stretch: 110%; }
h3 { font-size: 1.25rem; font-weight: 680; font-stretch: 104%; line-height: 1.25; }
p { margin: 0 0 1rem; max-width: 68ch; }
.lede { font-size: 1.25rem; line-height: 1.55; color: var(--ink-2); max-width: 46rem; }
.small { font-size: var(--step--1); color: var(--ink-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.88em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: 1rem; }
section { padding-block: clamp(2rem, 4vw, 3.2rem); }
section + section { border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.section-head h2 { max-width: 46rem; }

/* En-tête des pages publiques (connexion, invitation, statut) : la marque, et « Se connecter ». La coquille
   des pages connectées (barre latérale, tiroir du téléphone) est dans src/ui/qol/coquille.ts. */
header.top {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom: 1px solid var(--rule);
}
header.top .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 3.5rem; flex-wrap: wrap; }
.brand { font-weight: 780; font-stretch: 112%; font-size: 1.3rem; letter-spacing: -0.03em; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand::before { content: ''; width: 1.1rem; height: 4px; border-radius: 999px; background: var(--l-heb); }
nav.top { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-left: auto; }
nav.top a {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  font-weight: 560; font-size: 0.9375rem; color: var(--ink-2); text-decoration: none;
}
nav.top a::before { content: ''; width: 0.8rem; height: 4px; border-radius: 999px; background: var(--dash, var(--rule-2)); }
nav.top a:hover { background: var(--sheet); color: var(--ink); }

/* Boutons : pilules d'encre. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--sheet);
  font: 650 0.875rem/1.2 var(--sans); font-stretch: 104%; cursor: pointer; text-decoration: none; transition: transform .16s ease-out, background .16s ease-out;
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--sheet); border-color: var(--ink); }
.btn--small { padding: 0.35rem 0.7rem; font-size: 0.8125rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Pastilles d'état. */
.chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 999px; font: 600 0.75rem/1.5 var(--sans); white-space: nowrap; }
.chip--ok { background: var(--ok-bg); color: var(--ok-text); }
.chip--wait { background: var(--wait-bg); color: var(--wait-text); }
.chip--bad { background: var(--bad-bg); color: var(--bad-text); }
.chip--neutre { background: var(--paper-2); color: var(--ink-2); }

/* Surfaces. */
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 1.2rem 1.3rem; }
.vitrine {
  background: var(--sheet) radial-gradient(circle, var(--rule-2) 1.1px, transparent 1.3px) 0 0 / 20px 20px;
  border: 1px solid var(--rule); border-radius: 14px; padding: 1rem; overflow: auto;
  box-shadow: 0 1px 1px rgba(16,33,58,.05), 0 24px 48px -28px rgba(16,33,58,.35);
}

/* Tableaux de données. */
/* Relative : le libellé masqué d'un en-tête (.sr, en absolu) reste dans le cadre au lieu d'élargir la page. */
.table-wrap { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; font-size: 0.9375rem; }
th { text-align: left; background: var(--paper-2); color: var(--ink-2); font: 650 0.875rem/1.4 var(--sans); padding: 0.6rem 0.9rem; }
td { padding: 0.65rem 0.9rem; border-top: 1px solid var(--rule); vertical-align: middle; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in srgb, var(--paper-2) 45%, transparent); }

/* Ligne de temps des versions : le trait de la rubrique, une station par version datée. */
.ligne { --gouttiere: 1.6rem; --st: 1.05rem; --rang: 1.6em; --trunk: var(--line); list-style: none; margin: 0; padding: 0; }
/* Ligne de métro verticale : une gouttière fixe, la station centrée sur la première ligne de texte,
   et le trait tracé d'une station à la suivante (jamais au-delà de la première ni de la dernière). */
.ligne > li { position: relative; display: grid; grid-template-columns: var(--gouttiere) minmax(0, 1fr); column-gap: 0.85rem; padding-bottom: 1.15rem; }
.ligne > li > * { grid-column: 2; min-width: 0; }
.ligne > li::before {
  content: ''; grid-column: 1; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  width: var(--st); height: var(--st); margin-top: calc((var(--rang) - var(--st)) / 2);
  border-radius: 999px; background: var(--station); border: 3px solid var(--ink);
}
.ligne > li::after {
  content: ''; position: absolute; left: calc(var(--gouttiere) / 2 - 3px); top: calc(var(--rang) / 2); height: 100%;
  width: 6px; background: var(--trunk);
}
.ligne > li:last-child { padding-bottom: 0; }
.ligne > li:last-child::after { display: none; }
.ligne > li[data-etat='echec']::before { border-color: var(--l-heb-ink); }
.ligne > li[data-etat='attente']::before { border-color: var(--l-info); }
.ligne > li[data-etat='passe']::before { border-color: var(--rule-2); }
.ligne__actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin-top: 0.35rem; }
.ligne__actions form { margin: 0; }
.ligne .quand { font-size: var(--step--1); color: var(--ink-3); font-family: var(--mono); }

/* Journal : fond encre, mots-clés en jaune, comme le journal des actions du site. */
.journal {
  background: var(--ink); color: var(--on-ink); border-radius: 10px; padding: 0.9rem 1rem;
  font: 400 0.8125rem/1.5 var(--mono); max-height: 28rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.journal b { color: var(--l-info); font-weight: 400; }
.journal .err { color: #ffb4a0; }
.journal .ok { color: #bfe49a; }
.journal:empty::after { content: 'En attente du constructeur…'; color: var(--on-ink-2); }

/* Grille des pages projet : schéma à gauche, état à droite. */
.deux { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .deux { grid-template-columns: minmax(0, 7fr) minmax(16rem, 3fr); } }

dl.faits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; font-size: 0.9375rem; }
dl.faits dt { color: var(--ink-3); }
dl.faits dd { margin: 0; font-weight: 560; overflow-wrap: anywhere; }

.copie { display: flex; gap: 0.5rem; align-items: stretch; }
.copie code {
  flex: 1; background: var(--ink); color: var(--on-ink); border-radius: 8px; padding: 0.7rem 0.85rem;
  font: 400 0.8125rem/1.5 var(--mono); overflow-x: auto; white-space: pre;
}
.copie button { white-space: nowrap; }

.vide { border: 1px dashed var(--rule-2); border-radius: 10px; padding: 1.4rem; color: var(--ink-2); background: transparent; }
.vide p:last-child { margin-bottom: 0; }

form.connexion { max-width: 24rem; }
/* Accès interne : l'écran qu'un employé voit avant d'entrer dans une appli. */
.acces { max-width: 34rem; }
.acces h1 { margin-top: 0.2rem; }
.acces__autre { margin-top: 1rem; }
.acces__autre > summary { cursor: pointer; color: var(--ink-2, inherit); }
.acces__autre form { margin-top: 0.8rem; }
input[type='password'], input[type='text'], input[type='email'], textarea, select {
  width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--station); font: 400 1rem/1.4 var(--sans); color: var(--ink);
}
textarea { font-family: var(--mono); font-size: 0.85rem; min-height: 16rem; }
label { display: block; font: 650 0.875rem/1.4 var(--sans); margin-bottom: 0.35rem; }

footer.bas { background: var(--ink); color: var(--on-ink-2); margin-top: 3rem; padding-block: 2rem; font-size: var(--step--1); }
footer.bas a { color: var(--on-ink); }
footer.bas .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }

/* Catalogue des briques : l'extrait YAML se lit comme du code, sans déborder. */
table.catalogue td { vertical-align: top; }
table.catalogue td:first-child { max-width: 30rem; }
table.catalogue .small { margin-top: 0.2rem; }
pre.extrait { margin: 0; font: 400 0.78rem/1.45 var(--mono); color: var(--ink); background: var(--paper-2); border-radius: 6px; padding: 0.45rem 0.6rem; white-space: pre; overflow-x: auto; max-width: 22rem; }
ul.contrat { margin: 0; padding-left: 1.1rem; max-width: 68ch; }
ul.contrat li + li { margin-top: 0.45rem; }

/* Le schéma d'architecture : seule vitrine de la page projet. */
.schema { margin: 0; container-type: inline-size; display: grid; gap: 0.7rem; }
.schema figcaption { max-width: 52ch; }

/* Les petits traits pleins sont des données : une barre par minute, en orange si des erreurs. */
.barres { display: flex; align-items: flex-end; gap: 2px; height: 40px; padding: 2px 0; }
.barres i { display: block; width: 4px; border-radius: 999px; background: var(--l-heb); opacity: .75; }
.barres i.err { background: var(--l-heb-ink); opacity: 1; }

/* Une alerte est une surface, précédée du tiret de sa ligne — jamais une bordure latérale épaisse. */
.alerte {
  display: flex; gap: 0.7rem; align-items: baseline;
  background: var(--wait-bg); color: var(--wait-text);
  border: 1px solid color-mix(in srgb, var(--l-info) 40%, var(--wait-bg));
  padding: 0.8rem 1rem; border-radius: 10px;
}
.alerte::before { content: ''; flex: none; width: 1rem; height: 4px; border-radius: 999px; background: var(--l-info); transform: translateY(-0.25em); }
.alerte--err { background: var(--bad-bg); color: var(--bad-text); border-color: color-mix(in srgb, var(--l-heb) 40%, var(--bad-bg)); }
.alerte--err::before { background: var(--l-heb-ink); }
.alerte a { color: inherit; }


/* ---- Projet : sélecteurs communs, onglets ---- */
.projet-tete { align-items: flex-end; margin-bottom: 0.6rem; }
.selecteurs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* Un choix exclusif (période, service, source) : un contrôle segmenté compact, posé sur le bloc qu'il change.
   Un rail, des segments à angles doux ; le choix pris se soulève en blanc. Jamais une rangée de pilules. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); vertical-align: middle; }
.seg__b { display: inline-flex; align-items: center; min-height: 1.85rem; padding: 0.2rem 0.65rem; border-radius: 6px;
  font: 600 0.8125rem/1.2 var(--sans); font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink-2); white-space: nowrap;
  transition: background-color .12s ease-out, color .12s ease-out; }
.seg__b:hover:not([aria-current]) { color: var(--ink); background: color-mix(in srgb, var(--sheet) 55%, transparent); }
.seg__b[aria-current] { background: var(--sheet); color: var(--ink); font-weight: 720; box-shadow: 0 0 0 1px var(--rule-2), 0 1px 3px rgba(16, 33, 58, .16); }
.seg__b:focus-visible { outline-offset: 1px; border-radius: 6px; }
@media (pointer: coarse) { .seg__b { min-height: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .seg__b { transition: none; } }
.onglets { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--rule); margin: 0.2rem 0 1.4rem; overflow-x: auto; }
.onglets a { position: relative; padding: 0.55rem 0; text-decoration: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.onglets a:hover { color: var(--ink); }
.onglets a[aria-current] { color: var(--ink); }
.onglets a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; border-radius: 999px; background: var(--line); }

/* ---- Plan en attente ---- */
.plan-attente { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1rem; border: 1.5px dashed var(--l-info-ink); border-radius: 10px; background: var(--wait-bg); color: var(--wait-text); margin-bottom: 1.2rem; }
.plan-attente p { margin: 0; }
.plan-attente strong { color: var(--ink); }
.plan-attente__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.plan-attente__actions form { margin: 0; }

/* ---- Panneau latéral d'une brique ou d'un moment ---- */
.panneau { transition: opacity .15s ease-out; }
.panneau--charge { opacity: .55; }
@media (min-width: 60rem) { .vue .panneau { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding-right: 0.2rem; } }
.panneau__tete { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.panneau__tete h2 { font-size: 1.5rem; outline: none; }
.panneau__tete p { margin: 0.2rem 0 0; }
.panneau__s { border-top: 1px solid var(--rule); padding: 0.9rem 0 0; margin: 1rem 0 0; }
.panneau__s h3 { font-size: 1rem; margin-bottom: 0.55rem; }
.panneau__s p:last-child { margin-bottom: 0; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.liste > li { display: grid; gap: 0.1rem; }
.liste--serree { gap: 0.25rem; }
.liste__t { font-weight: 600; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; line-height: 1.35; }
.liste form { margin: 0.25rem 0 0; }
.liste details { margin-top: 0.2rem; }
.journal--panneau { max-height: 16rem; overflow: auto; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 0 0 0.5rem; }
.graphique { margin: 0.7rem 0 0; }
.graphique svg { width: 100%; height: 64px; display: block; }
.g__r { fill: var(--l-heb); opacity: .7; }
.g__e { fill: var(--l-heb-ink); }
.g__base { stroke: var(--rule-2); stroke-width: 1; }
.graphique figcaption { display: flex; justify-content: space-between; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; margin-top: 0.2rem; }

/* ---- Bande de la ligne de temps : une ligne de métro, une station par moment ---- */
.bande { padding: 0.4rem 0.9rem 0.2rem; }
.bande__stations { position: relative; list-style: none; margin: 0; padding: 0; height: 2.2rem; }
.bande__stations::before { content: ''; position: absolute; left: -0.9rem; right: -0.9rem; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--ink); }
.bande__stations li { position: absolute; left: var(--x); top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.station { box-sizing: border-box; width: 1.15rem; height: 1.15rem; padding: 0; border-radius: 999px; background: var(--station); border: 3px solid var(--line);
  cursor: pointer; display: inline-grid; place-items: center; transition: transform .15s ease-out, box-shadow .15s ease-out; }
.station--groupe { width: auto; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-color: var(--ink); background: var(--station); }
.station--groupe.station--alerte { border-color: var(--l-heb-ink); }
.station--groupe.station--alerte span { color: var(--l-heb-ink); }
.station:hover { transform: scale(1.15); }
.station:focus-visible { outline-offset: 4px; }
.station[data-line='alerte'] { background: var(--line); }
.station[data-grave='error'] { background: var(--l-heb-ink); border-color: var(--l-heb-ink); }
.station[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink); }
.station span { font: 700 0.68rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.station[data-grave='error'] span, .station[data-line='alerte'] span { color: var(--station); }
.bande__reperes { position: relative; list-style: none; margin: 0.15rem 0 0; padding: 0; height: 1.5rem; font: 0.72rem/1 var(--mono); color: var(--ink-3); }
.bande__reperes li { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); white-space: nowrap; padding-top: 0.55rem; }
.bande__reperes li::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 0.4rem; margin-left: -1px; border-radius: 1px; background: var(--ink-3); opacity: .55; }
.bande__legende { display: flex; gap: 0.4rem 1.1rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0.9rem 0 0; }
.bande__legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.bande__legende li::before { content: ''; width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 3px solid var(--line); background: var(--station); }
.bande__legende li[data-line='alerte']::before { background: var(--line); }
.bande__vide { margin: 0.9rem 0 0; }


/* ---- Activité : un fil, une station par moment, couleur de ligne par famille ---- */
.filtres { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin: 0 0 1.6rem; }
.filtres > div { display: grid; gap: 0.25rem; }
.filtres select { min-width: 12rem; }
.fil__jour { font-size: 1.15rem; margin: 1.6rem 0 0.8rem; }
.fil > li::before { border-color: var(--line); }
.fil > li[data-line='alerte']::before { background: var(--line); }
/* Une erreur se lit en couleur d'alerte, quelle que soit sa famille : jamais une station pleine verte. */
.fil > li[data-grave='error']::before { background: var(--l-heb-ink); border-color: var(--l-heb-ink); }
.fil__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; line-height: var(--rang); }
.fil__tete .quand { flex: none; }
.fil__meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.45rem; align-items: baseline; color: var(--ink-3); }
.fil__meta > * + *::before { content: '·'; margin-right: 0.45rem; color: var(--rule-2); }
.fil__famille { color: var(--line-ink); font-weight: 600; }
.fil__actions { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; margin-top: 0.3rem; }
.fil__actions details { flex-basis: 100%; }
.fil__actions details > summary { cursor: pointer; font-size: var(--step--1); }
.fil__impact[open] { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.9rem; }
.impact table { font-size: var(--step--1); }


/* ---- Observer : graphiques sur la plage, mises en ligne marquées ---- */
.seg--services { margin: 0; }
.obs__titre { font-size: 1.35rem; margin: 2rem 0 0.4rem; }
.obs__grille { display: grid; gap: 1rem; margin-top: 0.8rem; }
@media (min-width: 60rem) { .obs__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .obs__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.courbe { margin: 0; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 0.9rem 0.6rem; min-width: 0; container-type: inline-size; }
.courbe figcaption { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; margin-bottom: 0.3rem; }
.courbe svg { width: 100%; height: auto; display: block; overflow: visible; }
.courbe__vide { margin: 1.4rem 0; }
.c__g { stroke: var(--rule); stroke-width: 1; }
/* Graduations. Le dessin (600 unités de large) suit la largeur de la carte, son texte aussi : --g est la
   taille en unités qui donne 12 à 14 px à l'écran, et elle grandit quand la carte rétrécit. Une valeur se
   lit au-dessus de sa ligne, à gauche (la marge du dessin est trop étroite pour un libellé lisible) ; les
   heures descendent sous la ligne du zéro quand elles grossissent. */
.courbe svg { --g: 9.1px; }
@container (max-width: 790px) { .courbe svg { --g: 10.6px; } }
@container (max-width: 680px) { .courbe svg { --g: 12.3px; } }
@container (max-width: 585px) { .courbe svg { --g: 14.3px; } }
@container (max-width: 505px) { .courbe svg { --g: 16.6px; } }
@container (max-width: 435px) { .courbe svg { --g: 19.2px; } }
@container (max-width: 375px) { .courbe svg { --g: 22.2px; } }
@container (max-width: 325px) { .courbe svg { --g: 25.7px; } }
@container (max-width: 280px) {
  .courbe svg { --g: 30px; }
  /* Une heure sur deux : à cette taille, elles se toucheraient (les trois premiers textes sont les valeurs). */
  .courbe svg > text.c__x:nth-of-type(odd) { display: none; }
}
@container (max-width: 240px) { .courbe svg { --g: 34px; } }
.c__y, .c__x { font: var(--g) var(--mono); fill: var(--ink-3); }
.c__y { text-anchor: start; transform: translate(-40px, -7px); }
/* Le zéro va de soi (une courbe part toujours de zéro) : sans lui, la première heure et les petites valeurs respirent. */
.courbe svg > text.c__y:first-of-type { display: none; }
.c__x { transform: translateY(max(0px, calc(var(--g) * 0.73 - 15px))); }
.c__m line { stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 3; }
.c__m text { font: 600 calc(var(--g) * 0.95) var(--sans); fill: var(--ink-2); }
.c__m--alerte line { stroke: var(--l-heb-ink); stroke-dasharray: none; stroke-width: 1.75; }
.c__m--alerte text { fill: var(--l-heb-ink); }
.c__p { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 6 4; }
.c__legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.c__legende li { display: inline-flex; align-items: center; gap: 0.35rem; }
.c__legende li::before { content: ''; width: 0.9rem; height: 3px; border-radius: 999px; background: var(--c); }
.obs__chiffre { font: 780 2.4rem/1 var(--sans); font-stretch: 110%; letter-spacing: -0.02em; margin: 0; font-variant-numeric: tabular-nums; }
.obs__erreurs details summary { cursor: pointer; }
.obs__erreurs td:first-child { max-width: 34rem; }
.journal--obs { max-height: 26rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.78rem; }
.filtres__large { flex: 1 1 22rem; }
.filtres__large input { width: 100%; }
.obs__promql { margin-top: 1.6rem; }
.obs__promql > summary { cursor: pointer; font-weight: 600; }


/* ---- Réglages ---- */
.copie--ligne { display: inline-flex; gap: 0.3rem; align-items: center; vertical-align: middle; max-width: 100%; }
.copie--ligne code { font-size: 0.78rem; padding: 0.15rem 0.45rem; overflow-x: auto; white-space: nowrap; max-width: 22rem; }
.dns > li { gap: 0.25rem; }
.reglages td { vertical-align: top; }


/* ---- Données ---- */
.base h3 { font-size: 1.15rem; }
.base .section-head p { margin: 0.2rem 0 0; }
.base form { margin: 0; }


/* ---- Tâches : un passage par barre, vert réussi, orange foncé échec, pointillé manqué ---- */
.histo { display: inline-flex; gap: 2px; align-items: end; vertical-align: middle; }
.histo i { width: 6px; height: 16px; border-radius: 2px; background: var(--l-sav); }
.histo i.histo--x { background: var(--l-heb-ink); }
.histo i.histo--m { background: transparent; border: 1.5px dashed var(--l-heb-ink); height: 13px; width: 3px; }
.histo i.histo--c { background: var(--l-info); }
.histo i.histo--h { opacity: .55; }
.taches td { vertical-align: top; }
.taches .actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; align-items: flex-start; }
.taches .actions form { margin: 0; }
.taches details.rattraper > summary { list-style: none; cursor: pointer; }
.taches details.rattraper > summary::-webkit-details-marker { display: none; }
.taches details.rattraper[open] form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; align-items: center; }
.tache-echec { border: 1px solid color-mix(in srgb, var(--l-heb) 40%, var(--bad-bg)); background: var(--bad-bg); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; }
.tache-echec > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tache-echec .journal { max-height: 14rem; overflow: auto; margin: 0.5rem 0 0; }
.tache-echec p { margin: 0.45rem 0 0; }

/* ---- Compte : budget ---- */
.budget { height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 0.35rem 0 0.2rem; min-width: 8rem; }
.budget__barre { display: block; height: 100%; width: var(--part); border-radius: 999px; background: var(--l-sav); }
.budget__barre--wait { background: var(--l-info); }
.budget__barre--bad { background: var(--l-heb-ink); }

/* ---- Journal de l'organisation : une ligne par entrée, le détail se déplie ---- */
.jn-barre { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: -0.6rem 0 1rem; }
.jn-barre > details > summary { cursor: pointer; font-weight: 600; font-size: var(--step--1); }
.jn-barre > details[open] { flex-basis: 100%; }
.jn-filtres { margin-top: 0.7rem; }
.jn-filtres select, .jn-filtres input[type='text'] { min-width: 10rem; }
.jn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.jn-e > summary { cursor: pointer; list-style: none; }
.jn-e > summary::-webkit-details-marker { display: none; }
.jn-e > summary:hover .jn-quoi { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.jn-qui { color: var(--ink-2); }
.jn-quoi code { font-size: 0.86em; }
.jn-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.8rem; margin: 0.45rem 0 0; font-size: var(--step--1); }
.jn-detail dt { color: var(--ink-3); }
.jn-detail dd { margin: 0; overflow-wrap: anywhere; }
.jn-detail dd code { white-space: pre-wrap; }
.jn-suite { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


.sch { display: block; max-width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.sch--etroit { display: none; }
@container (max-width: 37.5rem) { .sch--large { display: none; } .sch--etroit { display: block; } }
.sch__zone { fill: color-mix(in srgb, var(--l-heb) 5%, transparent); stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sch__tag { font: 650 13px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: color-mix(in srgb, var(--l-heb) 5%, var(--sheet)); stroke-width: 6px; stroke-linejoin: round; }
.sch__l { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sch__l--req { stroke: var(--l-heb); stroke-width: 3.5; }
.sch__l--sav { stroke: var(--l-sav); stroke-width: 3.5; }
.sch__l--test { stroke: var(--l-sav); stroke-width: 2.5; stroke-dasharray: 1 6; }
.sch__l--int { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 5; }
.fl--req { fill: var(--l-heb); }
.fl--sav { fill: var(--l-sav); }
.sch__lb rect { fill: var(--station); stroke: var(--l-heb); stroke-width: 1.5; }
.sch__lb text { font: 600 12px var(--sans); fill: var(--l-heb-ink); }
.sch__lb--sav rect, .sch__lb--test rect { stroke: var(--l-sav); }
.sch__lb--sav text, .sch__lb--test text { fill: var(--l-sav-ink); }
.cs__f { fill: var(--station); stroke: var(--ink); stroke-width: 2.25; transition: fill .15s ease-out, stroke-width .15s ease-out; }
.cs[data-brique] { cursor: pointer; outline: none; }
.cs[data-brique]:hover .cs__f { fill: var(--sheet); stroke-width: 3; }
.cs__focus { fill: none; stroke: var(--l-pve); stroke-width: 3; opacity: 0; }
.cs[data-brique]:focus-visible .cs__focus { opacity: 1; }
.cs[aria-pressed='true'] .cs__f { fill: var(--sheet); stroke: var(--line); stroke-width: 3.5; }
.cs[aria-pressed='true'] .cs__an { stroke-width: 3; }
.cs--p .cs__f { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.cs--delete .cs__f { stroke: var(--ink-3); stroke-dasharray: 5 4; opacity: .75; }
.cs--create .cs__f { stroke: var(--l-sav-ink); }
.cs--update .cs__f, .cs--replace .cs__f { stroke: var(--l-info-ink); }
.cs__an { stroke-width: 2; }
.cs__an--heb { fill: color-mix(in srgb, var(--l-heb) 13%, var(--station)); stroke: var(--l-heb); }
.cs__an--sav { fill: color-mix(in srgb, var(--l-sav) 15%, var(--station)); stroke: var(--l-sav); }
.cs__an--con { fill: color-mix(in srgb, var(--l-con) 13%, var(--station)); stroke: var(--l-con); }
.cs__an--ink { fill: var(--sheet); stroke: var(--ink); }
.cs__an--ink3 { fill: var(--sheet); stroke: var(--ink-3); }
.cs__ic { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs__t { font: 680 14px var(--sans); font-stretch: 104%; fill: var(--ink); }
.cs__s { font: 450 12.5px var(--sans); fill: var(--ink-2); }
.cs__p { font: 450 12px var(--mono); fill: var(--ink-3); }
.cs__e { font: 600 12.5px var(--sans); fill: var(--ink-2); }
.cs__e--ok { fill: var(--l-sav-ink); }
.cs__e--attente { fill: var(--l-info-ink); }
.cs__e--erreur { fill: var(--l-heb-ink); }
.cs__filet { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.cs__act rect { fill: var(--station); stroke-width: 1.5; }
.cs__act text { font: 600 12px var(--sans); }
.cs__act--create rect { stroke: var(--l-sav); } .cs__act--create text { fill: var(--l-sav-ink); }
.cs__act--update rect, .cs__act--replace rect { stroke: var(--l-info); }
.cs__act--update text, .cs__act--replace text { fill: var(--l-info-ink); }
.cs__act--delete rect { stroke: var(--ink-3); stroke-dasharray: 4 3; } .cs__act--delete text { fill: var(--ink-2); }

/* Survol ou focus : la brique, ses liens et ses voisines ressortent ; le reste s'atténue (sans flou). */
.sch .cs, .sch__l, .sch__lb, .sch__flux { transition: opacity .15s ease-out; }
.sch--trace .cs:not(.est-proche), .sch--trace .sch__l:not(.est-proche),
.sch--trace .sch__lb:not(.est-proche), .sch--trace .sch__flux:not(.est-proche) { opacity: .28; }
.sch--trace .sch__l.est-proche { stroke-width: 4.5; }
.sch--trace .sch__lb.est-proche rect { stroke-width: 2.25; }
.sch--trace .sch__lb.est-proche text { font-weight: 720; }
.sch__hit { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; }
.sch__lb { cursor: default; }

/* Le moment signature : le trafic réel avance sur le chemin des requêtes, à la vitesse du débit. */
.sch__flux { fill: none; stroke: var(--station); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 12; pointer-events: none;
  animation: sch-flux 1.6s linear infinite; }
@keyframes sch-flux { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { .sch__flux { animation: none; } }

/* Info-bulle d'un lien : sobre, encre et papier. */
.schema { position: relative; }
.sch-bulle { position: absolute; z-index: 5; pointer-events: none; max-width: 17rem; padding: 0.45rem 0.65rem; border-radius: 8px;
  background: var(--ink); color: var(--on-ink); font: 450 0.78rem/1.4 var(--sans); box-shadow: 0 8px 20px -10px rgba(16,33,58,.5); }
.sch-bulle b { display: block; font-weight: 680; color: var(--station); }
.sch-bulle .mono { display: block; color: var(--on-ink); }

/* Grand schéma : glisser pour se déplacer, + et − pour zoomer, « Ajuster » pour tout revoir. Les boutons
   ont leur propre rangée, au-dessus du cadre : posés sur le dessin, ils cachaient une brique. */
.sch-zoom { justify-self: end; display: flex; gap: 0.3rem; margin-bottom: -0.25rem; }
.sch-zoom[hidden] { display: none; }
.sch-zoom .btn { background: var(--station); min-width: 2rem; justify-content: center; }
@media (pointer: coarse) { .sch-zoom .btn { min-width: 2.75rem; min-height: 2.75rem; } }
.sch-zoom .btn:hover { background: var(--sheet); }
.vitrine--zoom { overflow: hidden; padding: 0; }
.vitrine--zoom .sch { width: 100%; height: 100%; max-width: none; cursor: grab; touch-action: none; }
.vitrine--zoom .sch.sch--glisse { cursor: grabbing; }

/* Rien en ligne : ce qui manque, la phrase pour l'agent, puis l'aperçu du schéma. */
.vide-projet > div > h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.vide-projet .stack > * + * { margin-top: 0.5rem; }
.vide-projet__l { margin: 0; font-weight: 600; }
.vide-projet .alerte { margin: 0; }
.vide-projet .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }
.schema--apercu { margin-top: 1.5rem; }

/* Aperçu de ce qui sera mis en ligne : tout en pointillés, rien de cliquable. */
.sch--apercu .cs__f { stroke: var(--ink-3); stroke-dasharray: 5 4; fill: color-mix(in srgb, var(--station) 70%, transparent); }
.sch--apercu .sch__l { stroke-dasharray: 7 7; }
.sch--apercu .sch__l--test { stroke-dasharray: 1 6; }
.sch--apercu .cs__an { stroke-dasharray: 3 3; }


.etat-vide {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1.2rem; align-items: start;
  border: 1px dashed var(--rule-2); border-radius: 10px; padding: 1.25rem 1.35rem; color: var(--ink-2);
}
.etat-vide__plan { width: 5.5rem; height: auto; margin-top: 0.1rem; display: block; }
.etat-vide__corps { min-width: 0; }
.etat-vide .etat-vide__titre { font: 700 1.15rem/1.25 var(--sans); font-stretch: 104%; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.35rem; }
.etat-vide p { margin: 0 0 0.6rem; }
.etat-vide__corps > :last-child { margin-bottom: 0; }
.etat-vide .copie { max-width: 44rem; }
/* Une phrase pour l'agent se lit en entier : elle passe à la ligne au lieu de défiler. */
.etat-vide .copie { align-items: flex-start; }
.etat-vide .copie code { align-self: stretch; white-space: pre-wrap; overflow-wrap: anywhere; }
.etat-vide + form, .etat-vide + .filtres { margin-top: 1rem; }
.etat-vide .etat-vide__etiquette, .demarrage .etat-vide__etiquette { font: 600 var(--step--1)/1.4 var(--sans); color: var(--ink-3); margin: 0.75rem 0 0.35rem; }
.etat-vide .etat-vide__action { margin-top: 0.8rem; }
.etat-vide--compact { padding: 0.9rem 1rem; gap: 0.3rem 1rem; }
.etat-vide--compact .etat-vide__plan { width: 4rem; }
.etat-vide--compact .etat-vide__titre { font-size: 1rem; }
.etat-vide--compact p { font-size: 0.9375rem; }
* + .etat-vide { margin-top: 0.4rem; }
/* Dans une surface (.sheet), pas de seconde bordure : le bloc reste à plat. */
.sheet .etat-vide { border: 0; padding: 0.2rem 0 0; }
.compte-s { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.compte-s h4 { margin: 0 0 0.5rem; font: 650 1rem/1.3 var(--sans); }
@media (max-width: 34rem) {
  .etat-vide { grid-template-columns: minmax(0, 1fr); }
  .etat-vide__plan { width: 4.5rem; }
  .etat-vide .copie { flex-direction: column; }
}

/* Démarrage guidé : trois stations reliées, la séquence est réelle (installer, demander, regarder). */
.demarrage { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.demarrage > li { position: relative; padding: 0 0 2rem 2.6rem; min-width: 0; }
.demarrage > li::before {
  content: ''; position: absolute; z-index: 1; left: 0; top: 0.1rem; box-sizing: border-box;
  width: 1.35rem; height: 1.35rem; border-radius: 999px; background: var(--station); border: 3.5px solid var(--ink);
}
.demarrage > li::after {
  content: ''; position: absolute; left: calc(0.675rem - 3px); top: 0.8rem; bottom: -0.8rem; width: 6px; background: var(--line);
}
.demarrage > li:last-child { padding-bottom: 0; }
.demarrage > li:last-child::after { display: none; }
.demarrage h2 { font-size: 1.3rem; font-stretch: 106%; margin-bottom: 0.45rem; }
.demarrage p { color: var(--ink-2); margin-bottom: 0.7rem; }
.demarrage .copie { margin-bottom: 0.6rem; flex-direction: column; align-items: stretch; }
.demarrage .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }
.demarrage .copie button { align-self: flex-start; }
.demarrage__attente { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 var(--step--1)/1.4 var(--sans); color: var(--wait-text);
  background: var(--wait-bg); border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.55rem; }
.demarrage__attente::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--l-info-ink); }
.demarrage > li[data-etat='attente']::before { border-color: var(--l-info); }
/* L'animation signature de l'écran : la dernière station attend le premier projet. */
.demarrage > li[data-etat='attente']::before { animation: demarrage-attente 2.4s ease-in-out infinite; }
@keyframes demarrage-attente {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--l-info) 55%, transparent); }
  50% { box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--l-info) 0%, transparent); }
}
@media (min-width: 60rem) {
  .demarrage { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.2rem; }
  .demarrage > li { padding: 2.6rem 0 0; }
  .demarrage > li::before { top: 0; }
  .demarrage > li::after { top: calc(0.675rem - 3px); bottom: auto; left: 0.6rem; right: -2.2rem; width: auto; height: 6px; }
}
.demarrage-suite { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.demarrage-suite > summary { cursor: pointer; font-weight: 650; }

/* Rappel discret de l'installation, sous la table des projets et en tête de /agent. */
.rappel-install { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 1.2rem 0 0; color: var(--ink-3); font-size: var(--step--1); max-width: none; }
.rappel-install .copie { flex: 1 1 24rem; min-width: 0; max-width: 40rem; }
.rappel-install .copie code { padding: 0.35rem 0.6rem; font-size: 0.78rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
.install-rapide { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 1.2rem 1.3rem; }
.install-rapide h2 { margin-bottom: 0.5rem; }
.install-rapide p:last-child { margin-bottom: 0; }

/* Ligne « rien en ligne » de la table des projets : ce qui manque, en une ligne. */
.manque { display: block; margin-top: 0.25rem; font-size: var(--step--1); color: var(--ink-3); }


/* ---- Chargement : barre de navigation, squelettes, erreurs récupérables ---- */
.nav-barre {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none;
  background: var(--line); border-radius: 0 999px 999px 0; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.nav-barre--active { opacity: 1; transform: scaleX(.86); transition: transform 9s cubic-bezier(.08, .75, .2, 1), opacity .12s linear; }

.sq-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sq-masque { display: none !important; }
section.sq-page { border-top: 0; }

.sq {
  display: block; height: 0.8rem; border-radius: 6px; background-color: var(--paper-2);
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--station) 60%, transparent) 50%, transparent 70%);
  background-size: 50vw 100%; background-repeat: no-repeat; background-attachment: fixed;
  animation: sq-balayage 1.6s ease-in-out infinite;
}
@keyframes sq-balayage { from { background-position: -50vw 0; } to { background-position: 100vw 0; } }
@media (prefers-reduced-motion: reduce) { .sq { animation: none; background-image: none; } }
.sq--fort { background-color: var(--rule); }
.sq--titre { height: 1.5rem; border-radius: 8px; }
.sq--h2 { height: 1.35rem; width: 9rem; border-radius: 8px; background-color: var(--rule); }
.sq--lede { height: 1.05rem; width: min(26rem, 60vw); max-width: 100%; margin-top: 0.7rem; }
.sq--seg { height: 1.9rem; width: 9rem; border-radius: 999px; }
.sq--champ { height: 2.6rem; width: 12rem; border-radius: 10px; }
.sq--pilule { height: 1.9rem; width: 5.5rem; border-radius: 999px; }
.sq--puce { height: 1.2rem; width: 6rem; border-radius: 999px; }

.sq-zone { display: grid; gap: 1.6rem; }
.sq-cadre { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.1rem; display: grid; gap: 0.7rem; min-width: 0; }
.sq-cadre .sq { background-color: var(--paper-2); }
.sq-col { display: grid; gap: 0.75rem; align-content: start; }
.sq-faits { display: grid; grid-template-columns: minmax(4rem, 2fr) 3fr; gap: 0.55rem 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.sq-graphique { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding-top: 0.6rem; border-top: 1px solid var(--rule); margin-top: 0.3rem; }
.sq-graphique .sq { flex: 1; border-radius: 999px; height: var(--h); }

/* Vue d'ensemble : le schéma (une vitrine) et la colonne du panneau. */
.sq-schema { position: relative; min-height: 22rem; border-radius: 14px; padding: 2.2rem 1.6rem; display: grid; align-content: center;
  background: var(--sheet) radial-gradient(circle, var(--rule-2) 1.1px, transparent 1.3px) 0 0 / 20px 20px; border: 1px solid var(--rule); }
.sq-schema__rail { position: absolute; left: 12%; right: 12%; top: 50%; height: 6px; margin-top: -3px; }
.sq-schema__briques { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 12%; }
.sq-schema__briques .sq { height: 4.2rem; border-radius: 12px; background-color: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.sq-bande { display: grid; gap: 1rem; padding-top: 0.6rem; }
.sq-bande__ligne { position: relative; height: 1.4rem; }
.sq-bande__ligne .sq { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; }
.sq-bande__ligne i { position: absolute; top: 50%; left: var(--x); width: 1.15rem; height: 1.15rem; margin: -0.575rem 0 0 -0.575rem; border-radius: 999px; background: var(--station); border: 3px solid var(--rule-2); }

/* Activité : des stations sur un trait, deux lignes de texte chacune. */
.sq-filtres { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.sq-filtres > div { display: grid; gap: 0.35rem; }
.sq-fil { list-style: none; margin: 0; padding: 0; }
.sq-fil li { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.85rem; padding-bottom: 1.3rem; }
.sq-fil li::before { content: ''; grid-row: 1 / span 2; justify-self: center; position: relative; z-index: 1; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: var(--station); border: 3px solid var(--rule-2); }
.sq-fil li::after { content: ''; position: absolute; left: calc(0.8rem - 3px); top: 0.5rem; bottom: -0.5rem; width: 6px; background: var(--rule); }
.sq-fil li:last-child::after { display: none; }
.sq-fil li .sq { grid-column: 2; }
.sq-fil li .sq + .sq { margin-top: 0.45rem; height: 0.65rem; }

/* Réglages et données : des sections, chacune un titre, une phrase et un tableau. */
.sq-section { display: grid; gap: 0.75rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.sq-section:last-child { border-bottom: 0; }
.sq-section__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sq-table { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.sq-table > div { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; padding: 0.75rem 0.9rem; }
.sq-table > div + div { border-top: 1px solid var(--rule); }
.sq-table > div:first-child { background: var(--paper-2); }
.sq-table > div:first-child .sq { background-color: var(--rule); height: 0.7rem; }


/* Fragments : impact, pile d'erreur. */
.sq-bloc { display: grid; gap: 0.5rem; padding-block: 0.4rem; }
.sq-bloc .sq--puce { margin-bottom: 0.2rem; }

/* Journal sombre en attente : des lignes de code esquissées, le texte reste lu par les lecteurs d'écran. */
.journal[aria-busy='true'] {
  position: relative; color: transparent; min-height: 8.5rem;
  --l: color-mix(in srgb, var(--on-ink) 16%, transparent);
  background-image: linear-gradient(var(--l), var(--l)), linear-gradient(var(--l), var(--l)), linear-gradient(var(--l), var(--l)),
    linear-gradient(var(--l), var(--l)), linear-gradient(var(--l), var(--l)), linear-gradient(var(--l), var(--l));
  background-repeat: no-repeat;
  background-size: 64% 0.5rem, 82% 0.5rem, 47% 0.5rem, 74% 0.5rem, 58% 0.5rem, 36% 0.5rem;
  background-position: 1rem 1.15rem, 1rem 2.35rem, 1rem 3.55rem, 1rem 4.75rem, 1rem 5.95rem, 1rem 7.15rem;
}
.journal[aria-busy='true']::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--on-ink) 10%, transparent) 50%, transparent 70%) no-repeat fixed;
  background-size: 50vw 100%; animation: sq-balayage 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .journal[aria-busy='true']::after { display: none; } }

/* Échec d'un chargement : le problème, et de quoi s'en sortir. */
.charge-err { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 0.7rem; align-items: baseline; }
.charge-err::before { align-self: start; margin-top: 0.75em; transform: none; }
.charge-err__texte, .charge-err__actions { grid-column: 2; }
.charge-err__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.charge-err .btn--ghost { border-color: currentColor; color: inherit; }
.charge-err .btn--ghost:hover { background: var(--sheet); color: var(--ink); border-color: var(--ink); }
.journal + .charge-err { margin: -0.2rem 0 0.6rem; }

/* Fil d'activité en direct : l'état du flux, la pastille des nouveautés, un bref surlignage. */
.direct { margin: 0 0 0 auto; align-self: flex-end; min-height: 2.6rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-3); }
.direct::before { content: ''; flex: none; width: 0.65rem; height: 0.65rem; border-radius: 999px; background: var(--station); border: 2px solid var(--rule-2); }
.direct[data-etat='direct']::before { background: var(--l-sav); border-color: var(--l-sav-ink); }
.direct[data-etat='reconnexion']::before { border-color: var(--l-info-ink); }
.direct[data-etat='coupe'] { color: var(--bad-text); }
.direct[data-etat='coupe']::before { border-color: var(--l-heb-ink); }
.fil-pastille {
  position: fixed; z-index: 30; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 2 * var(--gutter));
  top: calc(env(safe-area-inset-top, 0px) + 4.3rem); box-shadow: 0 10px 24px -12px rgba(16,33,58,.55);
}
.fil-pastille[hidden], .direct[hidden], .vide[hidden] { display: none; }
.fil > li.fil__nouveau { border-radius: 8px; animation: fil-nouveau 3.2s ease-out; }
@keyframes fil-nouveau { from { background: var(--wait-bg); box-shadow: 0 0 0 6px var(--wait-bg); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .fil > li.fil__nouveau { animation: none; background: var(--wait-bg); box-shadow: 0 0 0 6px var(--wait-bg); } }


/* ---- Touches dans la palette (le bouton Rechercher est dans la coquille : src/ui/qol/coquille.ts) ---- */
.pal__ic { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pal kbd {
  display: inline-block; min-width: 1.4rem; padding: 0.2rem 0.4rem; text-align: center;
  font: 500 0.75rem/1.1 var(--mono); color: var(--ink-2); background: var(--station);
  border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 6px; white-space: nowrap;
}

/* ---- Palette : une recherche légère en haut d'écran ---- */
.pal {
  padding: 0; margin: max(9vh, 0.75rem) auto auto; width: min(40rem, calc(100% - 2 * var(--gutter))); max-width: none;
  max-height: calc(100dvh - 1.5rem); overflow: hidden; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule-2); border-radius: 14px;
  box-shadow: 0 1px 1px rgba(16,33,58,.06), 0 28px 56px -24px rgba(16,33,58,.5);
}
.pal[open] { animation: pal-entree .14s ease-out; }
.pal::backdrop { background: rgba(16,33,58,.3); }
@keyframes pal-entree { from { opacity: 0; transform: translateY(-0.5rem) scale(.985); } }
.pal__boite { display: flex; flex-direction: column; max-height: inherit; }
.pal__vue { display: flex; flex-direction: column; min-height: 0; }
.pal__vue[hidden] { display: none; }
.pal__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pal__barre { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem 0.55rem 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.pal__barre .pal__ic { width: 1.25rem; height: 1.25rem; }
.pal input.pal__champ {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.5rem 0; border-radius: 0;
  font: 500 1.125rem/1.4 var(--sans); color: var(--ink);
}
.pal input.pal__champ::placeholder { color: var(--ink-3); }
.pal input.pal__champ:focus-visible { outline: none; }
.pal__barre:focus-within { box-shadow: inset 0 -2px 0 var(--l-pve); }
.pal__fermer {
  flex: none; display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.3rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.pal__fermer:hover { background: var(--paper-2); color: var(--ink); }
.pal__fermer .pal__ic { display: none; }
.pal__liste { overflow-y: auto; overscroll-behavior: contain; max-height: min(28rem, 62dvh); padding: 0.2rem 0 0.5rem; }
.pal__titre { padding: 0.7rem 1.4rem 0.3rem; font: 650 0.8125rem/1.3 var(--sans); color: var(--ink-3); }
.pal__o {
  display: flex; align-items: center; gap: 0.75rem; min-height: 2.6rem; margin: 0 0.4rem; padding: 0.4rem 1rem;
  border-radius: 8px; cursor: pointer;
}
.pal__o[aria-selected='true'] { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.pal__m { flex: none; width: 0.9rem; height: 4px; border-radius: 999px; background: var(--dash, var(--rule-2)); }
.pal__m--station { height: 0.9rem; background: var(--station); border: 2.5px solid var(--ink); }
.pal__l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.pal__ctx { color: var(--ink-3); font-weight: 500; }
.pal__ctx::after { content: ' · '; color: var(--rule-2); }
.pal__meta { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); color: var(--ink-3); }
.pal__meta.mono { font-size: 0.75rem; }
.pal__o .chip { flex: none; }
.pal__info { margin: 0.3rem 1.4rem; font-size: 0.9375rem; color: var(--ink-2); }
.pal__info--charge::before {
  content: ''; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.55rem; vertical-align: -0.05em;
  border-radius: 999px; border: 2px solid var(--l-info); border-right-color: transparent; animation: pal-tour .8s linear infinite;
}
@keyframes pal-tour { to { transform: rotate(360deg); } }
.pal__vide { margin: 0.9rem 1.4rem 0.4rem; padding: 0.9rem 1rem; border: 1px dashed var(--rule-2); border-radius: 10px; color: var(--ink-2); font-size: 0.9375rem; }
.pal__vide p { margin: 0; }
.pal__vide p + p { margin-top: 0.35rem; }
.pal__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; padding: 0.55rem 1rem; border-top: 1px solid var(--rule); background: var(--paper); font-size: var(--step--1); color: var(--ink-3); }
.pal__pied > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.pal__lien { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.35rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 600 var(--step--1)/1.3 var(--sans); cursor: pointer; }
.pal__lien:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* Aide des raccourcis */
.pal__aide-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 0.6rem 0.8rem 1.3rem; border-bottom: 1px solid var(--rule); }
.pal__aide-tete h2 { font-size: 1.25rem; }
.pal__aide-tete .btn { flex: none; white-space: nowrap; }
.pal__aide { overflow-y: auto; max-height: min(32rem, 70dvh); padding: 0.4rem 1.3rem 1.1rem; display: grid; gap: 0.2rem 2rem; }
@media (min-width: 40rem) { .pal__aide { grid-template-columns: 1fr 1fr; } .pal__aide section:first-child { grid-row: span 2; } }
.pal__aide section { padding: 0; border: 0; }
.pal__aide h3 { font-size: 0.9375rem; color: var(--ink-2); margin: 0.8rem 0 0.4rem; }
.pal__aide dl { margin: 0; display: grid; grid-template-columns: 8.6rem 1fr; gap: 0.35rem 0.8rem; align-items: center; font-size: 0.9375rem; }
.pal__aide dt { display: flex; gap: 0.25rem; align-items: center; white-space: nowrap; }
.pal__aide dd { margin: 0; }
.pal__aide .pal__puis { font-size: 0.75rem; color: var(--ink-3); }

@media (max-width: 40rem) {
  .pal { margin-top: 0.75rem; width: calc(100% - 1.5rem); }
  .pal__fermer kbd { display: none; }
  .pal__fermer .pal__ic { display: block; }
  .pal__pied, .pal__meta.mono { display: none; }
  .pal__liste { max-height: 72dvh; }
}

/* ---- Notifications : en bas, empilées, encre sur papier inversé ---- */
.toasts {
  position: fixed; z-index: 60; right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(26rem, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; max-width: 100%;
  padding: 0.5rem 0.4rem 0.5rem 0.9rem; border-radius: 10px; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 18px 36px -18px rgba(16,33,58,.65); animation: toast-entree .16s ease-out;
  transition: opacity .15s ease-out;
}
.toast::before { content: ''; flex: none; width: 1rem; height: 4px; border-radius: 999px; background: var(--on-ink-2); }
.toast--ok::before { background: var(--l-sav); }
.toast--erreur::before { background: var(--l-heb); }
.toast p { flex: 1; margin: 0; padding-block: 0.25rem; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.toast__fermer {
  flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--on-ink-2); cursor: pointer;
}
.toast__fermer:hover { color: var(--on-ink); background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
.toast__fermer svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.toast :focus-visible { outline-color: var(--on-ink); }
.toast--sortie { opacity: 0; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(0.5rem); } }
@media (max-width: 40rem) { .toasts { left: var(--gutter); right: var(--gutter); width: auto; align-items: stretch; } }

@media (prefers-reduced-motion: reduce) {
  .pal[open], .toast { animation: none; }
  .pal__info--charge::before { animation: none; border-right-color: var(--l-info); }
}


.journal-barre {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: var(--ink); color: var(--on-ink-2); border-radius: 10px 10px 0 0;
  padding: 0.4rem 0.5rem 0.4rem 1rem; font: 400 0.75rem/1.4 var(--sans);
  border-bottom: 1px solid rgba(169, 186, 214, 0.18);
}
.journal-barre + .journal { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
.journal-barre__compte { margin-right: auto; font-variant-numeric: tabular-nums; }
.journal-barre button {
  font: 600 0.75rem/1 var(--sans); color: var(--on-ink); background: transparent;
  border: 1px solid rgba(169, 186, 214, 0.35); border-radius: 999px; padding: 0.35rem 0.7rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.journal-barre button:hover { border-color: var(--on-ink); background: rgba(223, 229, 239, 0.08); }
.journal-barre button[aria-pressed='true'] { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.journal-barre button svg { width: 0.85rem; height: 0.85rem; }
.journal-barre .btn { margin: 0; }
.journal-barre [data-pause] {
  font: 600 0.75rem/1 var(--sans); color: var(--on-ink); background: transparent;
  border: 1px solid rgba(169, 186, 214, 0.35); padding: 0.35rem 0.7rem; min-height: 0;
}
.journal-barre [data-pause][aria-pressed='true'] { background: var(--l-info); color: var(--ink); border-color: var(--l-info); }
.journal-barre :focus-visible { outline: 3px solid var(--l-pve); outline-offset: 2px; }

.journal--nowrap { white-space: pre !important; word-break: normal !important; }
.journal .jl { display: block; position: relative; padding-right: 2rem; border-radius: 3px; }
/* Une ligne longue repart sous le texte, pas sous l'heure : la colonne des heures reste nette. */
.journal .jl--h { padding-left: 7ch; text-indent: -7ch; }
.journal--nowrap .jl--h { padding-left: 0; text-indent: 0; }
.journal .jl:hover { background: rgba(223, 229, 239, 0.06); }
.journal .jl--err { background: rgba(255, 120, 90, 0.11); }
.journal .jl--err:hover { background: rgba(255, 120, 90, 0.17); }
.journal .jl--warn { background: rgba(242, 183, 5, 0.09); }
.journal .j-h, .journal .j-ts, .journal .j-pid { color: var(--on-ink-2); }
.journal .j-k { color: #9fdcda; }
.journal .j-s { color: #c4e6a2; }
.journal .j-n { color: #ffcf96; }
.journal .j-b { color: #c9b8ff; }
.journal .j-p { color: var(--on-ink-2); }
.journal .j-err { color: #ffb4a0; font-weight: 700; }
.journal .j-warn { color: #f5d77e; font-weight: 700; }
.journal .j-info { color: #a9c8ff; }
.journal .j-ok { color: #c4e6a2; font-weight: 700; }
.journal .j-m { color: #fff; font-weight: 700; }
.journal .j-2 { color: #c4e6a2; font-weight: 700; }
.journal .j-3 { color: #a9c8ff; font-weight: 700; }
.journal .j-4 { color: #f5d77e; font-weight: 700; }
.journal .j-5 { color: #ffb4a0; font-weight: 700; }
.journal .j-u { color: var(--on-ink); text-decoration: underline; text-decoration-color: rgba(169, 186, 214, 0.5); text-underline-offset: 2px; }
.journal ::selection { background: var(--l-info); color: var(--ink); }

.journal-ligne-copier {
  position: absolute; z-index: 2; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 6px; border: 1px solid rgba(169, 186, 214, 0.4); background: var(--ink);
  color: var(--on-ink); cursor: pointer; padding: 0;
}
.journal-ligne-copier:hover { border-color: var(--on-ink); }
.journal-ligne-copier svg { width: 0.8rem; height: 0.8rem; }
@media (hover: none) { .journal-ligne-copier { display: none; } }


.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.val { display: grid; gap: 0.45rem; }
.val + .val { margin-top: 0.9rem; }
.val__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.val__tete h2 { margin: 0; font-size: 1.1rem; }
.val__tete h2 a { color: inherit; }
.val > p { margin: 0; }
.val__meta code { font-size: 0.8125rem; }
.val__proche { color: var(--wait-text); font-weight: 600; }
.val__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; margin-top: 0.3rem; }
.val__motif { display: grid; gap: 0.2rem; flex: 1 1 16rem; max-width: 30rem; }
.val__note { margin: 0.2rem 0 0; color: var(--ink-2); border-left: 2px solid var(--rule-2); padding-left: 0.7rem; }
.val__cite { margin: 0; color: var(--ink-2); font-style: italic; }
.val__force { margin-top: 0.3rem; }
.val__force > summary, .val-politique > summary, .org-plie > summary { cursor: pointer; font-size: var(--step--1); color: var(--ink-2); }
.val-regles { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; list-style: none; margin: 0.9rem 0 0.4rem; padding: 0; font-size: var(--step--1); color: var(--ink-2); }
.val-regles li { display: inline-flex; align-items: center; gap: 0.45rem; }
.val-regles li::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 2px solid var(--l-info); background: var(--station); }
.val-politique { margin-top: 0.6rem; }
.val-niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.8rem 1.6rem; margin-top: 0.6rem; }
.val-niveaux .val-niveau { margin: 0 0 0.3rem; font: 650 0.9375rem/1.3 var(--sans); color: var(--ink); }
.val-niveaux ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.org-enligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.org-enligne select { max-width: 16rem; }
.org-sujets { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.org-sujet { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.25rem 0.05rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8125rem; }
.org-x { border: 0; background: none; padding: 0 0.3rem; cursor: pointer; color: var(--ink-3); font-size: 0.9rem; line-height: 1; }
.org-x:hover, .org-x:focus-visible { color: var(--bad-text); }
.org-groupes > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.org-plie { display: inline-block; }
.org-plie[open] { display: block; margin-top: 0.3rem; }
.org-revoir td:first-child { box-shadow: inset 3px 0 0 var(--wait-text); }
.org-actions { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.org-h3 { margin: 1.4rem 0 0.5rem; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.5rem; }


.al-incidents > li { border-left: 3px solid var(--l-info); padding-left: 0.75rem; }
.al-incidents > li.al-inc--grave { border-left-color: var(--l-heb-ink); }
.al-incidents > li.al-inc--info { border-left-color: var(--rule-2); }
.al-incidents details, .al-liste details { margin-top: 0.15rem; }
.al-incidents details > summary, .al-liste details > summary { cursor: pointer; }
.al-incidents details p, .al-liste details p { margin: 0.3rem 0; }
.al-plie { margin-top: 0.7rem; }
.al-plie > summary { cursor: pointer; font-weight: 600; }
.al-plie[open] > summary { margin-bottom: 0.5rem; }
.al-liste .org-enligne { margin-left: auto; }
.statut { max-width: 46rem; }
.statut__global { font: 720 1.35rem/1.3 var(--sans); margin: 0.2rem 0 0.6rem; display: flex; align-items: center; gap: 0.55rem; }
.statut__global::before { content: ''; width: 0.9rem; height: 0.9rem; border-radius: 999px; background: var(--rule-2); border: 3px solid var(--station); box-shadow: 0 0 0 2px var(--rule-2); }
.statut__global--ok::before { background: var(--l-sav); box-shadow: 0 0 0 2px var(--l-sav); }
.statut__global--bad::before { background: var(--l-heb-ink); box-shadow: 0 0 0 2px var(--l-heb-ink); }
.statut__liste > li { padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.statut__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.25rem; }
.statut__ligne .histo i { width: 5px; }


.ca-page { display: grid; gap: 2rem; padding-block: clamp(1.4rem, 3vw, 2.2rem) clamp(2rem, 5vw, 3.5rem); min-width: 0; }
.ca-page > * { min-width: 0; }
.ca-page.cx { --line: var(--l-con); --line-ink: var(--l-con-ink); }
.ca-page.ac { --line: var(--l-pve); --line-ink: var(--l-pve); }
.ca-page section { padding-block: 0; }
.ca-page section + section { border-top: 0; }
.ca-page :not(pre, .copie) > code { font-family: var(--mono); font-size: 0.86em; background: var(--paper-2); padding: 0.05rem 0.3rem; border-radius: 4px; overflow-wrap: anywhere; }
.ca-page .alerte, .ca-page p.alerte { margin: 0; max-width: none; }
.ca-page .alerte > div > p { margin: 0 0 0.35rem; }
.ca-page .alerte > div > p:last-child { margin: 0; }
.ca-page .copie { align-items: flex-start; }
.ca-page .copie code { align-self: stretch; }
@media (max-width: 34rem) {
  .ca-page .copie { flex-direction: column; align-items: stretch; }
  .ca-page .copie button { align-self: flex-start; }
}
.ca-ic { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ca-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.ca-tete h1 { margin-bottom: 0.35rem; }
.ca-tete .lede { margin: 0; }
.ca-tete__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.ca-section { display: grid; gap: 0.8rem; align-content: start; min-width: 0; }
.ca-section > * { min-width: 0; }
.ca-section[id] { scroll-margin-top: 5rem; }
.ca-section__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.ca-section__tete h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); display: inline-flex; align-items: center; gap: 0.6rem; }
.ca-section__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.ca-section__action { margin-left: auto; }
.ca-compte { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--line) 16%, var(--sheet)); color: var(--ink); font: 700 0.875rem/1 var(--sans); }
.ca-compte--petit { min-width: 1.25rem; height: 1.25rem; font-size: 0.72rem; padding: 0 0.35rem; vertical-align: 0.1em; }
.ca-feuille { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 1.1rem 1.25rem; display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.ca-feuille > h2 { font-size: 1.25rem; }
.ca-feuille > p { margin: 0; }

/* La seule phrase pour l'agent de la page : un tiret bleu, la phrase à copier. */
.ca-phrase { display: grid; gap: 0.35rem; min-width: 0; }
.ca-phrase__titre { margin: 0; font: 650 var(--step--1)/1.3 var(--sans); color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.4rem; }
.ca-phrase__titre::before { content: ''; width: 0.8rem; height: 4px; border-radius: 999px; background: var(--l-pve); }
.ca-phrase .copie { align-items: flex-start; max-width: 46rem; }
.ca-phrase .copie code { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0.45rem 0.7rem; }

/* Replis : une liste au-delà de cinq lignes (« Voir les n », sans script), un détail, une section. */
.ca-pli { display: grid; gap: 0.4rem; min-width: 0; }
.ca-pli:not(:has(> .ca-pli__plus[open])) [data-pli] { display: none; }
.ca-pli__plus[open] .ca-pli__ouvrir, .ca-pli__plus:not([open]) .ca-pli__fermer { display: none; }
.ca-pli__plus > summary, .ca-plie > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font: 600 var(--step--1)/1.6 var(--sans); color: var(--ink-2); padding: 0.15rem 0; border-radius: 4px; }
.ca-pli__plus > summary::-webkit-details-marker, .ca-plie > summary::-webkit-details-marker { display: none; }
.ca-pli__plus > summary::after, .ca-plie > summary::after { content: ''; width: 0.42rem; height: 0.42rem; border-style: solid; border-color: currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.15s ease-out; }
.ca-pli__plus[open] > summary::after, .ca-plie[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.ca-pli__plus > summary:hover, .ca-plie > summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ca-plie > :not(summary) { margin-top: 0.6rem; }
.ca-plie--petit > :not(summary) { margin-top: 0.45rem; }
.ca-plie--droite > summary { color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.8125rem; }
.ca-plie--droite > summary:hover { text-decoration: none; background: var(--sheet); }
.ca-plie--droite > summary::after { display: none; }
.ca-plie--droite[open] { flex-basis: 100%; margin-left: 0; }
.ca-plie--droite[open] > summary { background: var(--ink); color: var(--sheet); }
.ca-plie--section > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; font: inherit; color: var(--ink); }
.ca-plie--section > summary h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.ca-plie--section[open] > summary { margin-bottom: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .ca-pli__plus > summary::after, .ca-plie > summary::after { transition: none; } }

/* Formulaires courts. */
.ca-form { display: grid; gap: 0.65rem; max-width: 34rem; }
.ca-form > div { display: grid; gap: 0.2rem; }
.ca-form label, .ca-enligne label { margin: 0; }
.ca-form p { margin: 0; }
.ca-form__ligne { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.ca-form__ligne > div { display: grid; gap: 0.2rem; flex: 0 1 9rem; }
.ca-form__ligne > .ca-form__large { flex: 1 1 14rem; }
/* Les champs sans type explicite (ou numériques, adresses) prennent le style des autres champs de while. */
.ca-page input:not([type]), .ca-page input[type='number'], .ca-page input[type='url'] {
  width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--station); font: 400 1rem/1.4 var(--sans); color: var(--ink);
}
.ca-form input, .ca-form select, .ca-enligne input, .ca-enligne select { padding-block: 0.45rem; }
.ca-enligne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.ca-enligne label { font-size: var(--step--1); }
.ca-enligne select, .ca-enligne input { width: auto; max-width: 18rem; }
.ca-case { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ca-case input { width: 1rem; height: 1rem; accent-color: var(--ink); }

/* Une personne : son initiale, son nom ; un niveau de validation ; le diff calculé par while. */
.ca-qui { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ca-qui strong { font-weight: 650; }
.ca-qui__via { color: var(--ink-3); font-size: 0.875em; }
.ca-avatar { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 700 0.75rem/1 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--line) 18%, var(--sheet)); border: 2px solid var(--station); box-shadow: 0 0 0 1.5px var(--ink); }
.ca-niveau { display: inline-flex; align-items: center; gap: 0.35rem; font: 650 0.75rem/1.5 var(--sans); padding: 0.05rem 0.55rem; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.ca-niveau::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.ca-niveau--libre { color: var(--ink-3); }
.ca-niveau--validation { color: var(--l-heb-ink); }
.ca-diff { margin: 0; padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 400 0.8125rem/1.6 var(--mono); overflow-x: auto; white-space: pre; }
.ca-diff .ajout { color: #c4e6a2; }
.ca-diff .retrait { color: #ffb4a0; }
.ca-diff .ctx { color: var(--on-ink-2); }

/* ---------- Au-dessus du titre, en petit : l'organisation et l'entrée de la barre latérale ---------- */
.ca-lieu { margin: 0 0 0.3rem; font: 600 0.875rem/1.3 var(--sans); color: var(--ink-3); max-width: none; }
.ca-compte--wait { background: var(--wait-bg); color: var(--wait-text); }
.ca-feuille[id], .ac-replis > details[id], .ac-etapes > li[id] { scroll-margin-top: 5rem; }

/* ---------- Organisation ---------- */
.ac-secret { max-width: 46rem; }
.ac-secret .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Personnes : une par ligne ; ses agents en embranchement, dépliés. */
.ac-personnes { list-style: none; margin: 0; padding: 0.25rem 1.25rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.ac-personnes > li { border-top: 1px solid var(--rule); }
.ac-personnes > li:first-child { border-top: 0; }
.ca-pli > .ac-personnes { margin: 0; }
.ac-pers > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(7rem, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 0.4rem 1.25rem; align-items: center; padding: 0.65rem 0; border-radius: 6px; }
.ac-pers > summary::-webkit-details-marker { display: none; }
.ac-pers > summary::after { content: ''; width: 0.45rem; height: 0.45rem; border-style: solid; border-color: var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s ease-out; }
.ac-pers[open] > summary::after { transform: rotate(45deg); }
.ac-pers__role { font-size: var(--step--1); color: var(--ink-2); display: inline-flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.ac-pers__role { min-width: 0; }
.ac-pers__role .chip { white-space: normal; text-align: left; }
.ac-pers__groupes, .ac-pers__agents { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; min-width: 0; }
.ac-pastille-agent { display: inline-flex; align-items: center; gap: 0.3rem; font: 600 var(--step--1)/1.4 var(--sans); color: var(--l-pve); }
.ac-pastille-agent .ca-ic { width: 0.95rem; height: 0.95rem; }
.ac-pers__detail { display: grid; gap: 0.5rem; padding: 0 0 0.9rem 2.05rem; }
.ac-pers__detail > p { margin: 0; }
.ac-agents { list-style: none; margin: 0; padding: 0; }
.ac-agent { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 0.8fr) auto; gap: 0.3rem 1.25rem; align-items: start; padding: 0.55rem 0 0.55rem 2.6rem; font-size: 0.9375rem; }
.ac-agent__st { position: absolute; left: 0; top: 0.55rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--station); border: 2.5px solid var(--l-pve); color: var(--l-pve); }
.ac-agent__st .ca-ic { width: 0.85rem; height: 0.85rem; stroke-width: 2.4; }
.ac-agent__via { display: grid; gap: 0.05rem; min-width: 0; }
.ac-agent__via strong { font-weight: 650; color: var(--l-pve); }
.ac-agent__der { min-width: 0; overflow-wrap: anywhere; }
.ac-agent > .ca-enligne { align-self: center; }
.ac-invitations { margin: 0; }
.ac-avatars { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.ac-sujet { display: inline-flex; align-items: center; gap: 0.15rem; }
.ac-sujets { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0; }
.ac-x { border: 0; background: none; padding: 0 0.3rem; cursor: pointer; color: var(--ink-3); font: 600 1rem/1 var(--sans); border-radius: 4px; }
.ac-x:hover, .ac-x:focus-visible { color: var(--bad-text); }
@media (prefers-reduced-motion: reduce) { .ac-pers > summary::after { transition: none; } }
@media (max-width: 64rem) { .ac-agent { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .ac-personnes { padding-inline: 0.9rem; }
  .ac-pers > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
  .ac-pers > summary > .ca-qui { flex: 1 1 calc(100% - 2rem); }
  .ac-pers > summary::after { order: 1; }
  .ac-pers > summary > :not(.ca-qui) { order: 2; }
  .ac-pers__detail { padding-left: 0; }
  .ac-agent { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* Qui a accès à quoi : par ressource, qui lit, met en ligne, valide ; jetons ; externes. */
.ac-rv__table td { vertical-align: top; }
.ac-rv__qui { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.ac-rv__valide { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.ac-rv__ag { display: inline-flex; align-items: center; gap: 0.2rem; font: 600 0.8125rem/1.4 var(--sans); color: var(--l-pve); white-space: nowrap; cursor: help; }
.ac-rv__ag .ca-ic { width: 0.95rem; height: 0.95rem; }
.ac-jeton-n { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; }
.ac-jeton-n .ca-ic { width: 0.9rem; height: 0.9rem; }
/* Une validation en attente : un lien, souligné, précédé d'une station d'attente (pas une pastille cliquable). */
.ac-attente { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--wait-text); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; white-space: nowrap; }
.ac-attente::before { content: ''; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--l-info); background: var(--station); }
.ac-changer { min-width: 6rem; }
.ac-changer__corps { display: grid; gap: 0.5rem; min-width: 16rem; }
.ac-changer__corps p { margin: 0; }
.ac-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ac-ext { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ac-ext li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; }
.ac-ext li .ca-enligne { margin-left: auto; }
.ac-garanties, .ac-fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: var(--step--1); color: var(--ink-2); }
.ac-garanties li, .ac-fixes li { display: inline-flex; align-items: center; gap: 0.35rem; }
.ac-garanties .ca-ic, .ac-fixes .ca-ic { width: 1rem; height: 1rem; color: var(--ink); }
/* Au téléphone, une ressource par bloc : Lit, Met en ligne, Valide l'un sous l'autre. */
@media (max-width: 40rem) {
  .ac-rv__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ac-rv__table, .ac-rv__table tbody { display: block; }
  .ac-rv__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; padding: 0.8rem 1rem; border-top: 1px solid var(--rule); }
  .ac-rv__table tbody tr:first-child { border-top: 0; }
  .ac-rv__table td { display: block; padding: 0; border: 0; }
  .ac-rv__table:not(.ac-rv__table--court) td:nth-child(2), .ac-rv__table:not(.ac-rv__table--court) td:nth-child(3), .ac-rv__table:not(.ac-rv__table--court) td:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
  .ac-rv__table:not(.ac-rv__table--court) td:nth-child(2)::before { content: 'Lit'; }
  .ac-rv__table:not(.ac-rv__table--court) td:nth-child(3)::before { content: 'Met en ligne'; }
  .ac-rv__table:not(.ac-rv__table--court) td:nth-child(4)::before { content: 'Valide'; }
  .ac-rv__table td::before { font-size: var(--step--1); font-weight: 600; color: var(--ink-3); }
  .ac-rv__jetons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ac-rv__jetons, .ac-rv__jetons tbody { display: block; }
  .ac-rv__jetons tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); }
  .ac-rv__jetons tbody tr:first-child { border-top: 0; }
  .ac-rv__jetons td { display: block; padding: 0; border: 0; }
  .ac-rv__jetons td:first-child, .ac-rv__jetons td:last-child { flex-basis: 100%; }
  .ac-rv__jetons td:nth-child(2)::before { content: 'utilisé '; }
  .ac-rv__jetons td:nth-child(3)::before { content: 'expire '; font-size: var(--step--1); color: var(--ink-3); }
  .ac-rv__table:not(.ac-rv__table--court) td:last-child { grid-column: 2; grid-row: 1; }
}

/* Brancher un agent : la ligne rapide, à la main, ce qu'un agent peut faire, l'exemple, le catalogue. */
.ac-brancher { display: grid; gap: 1rem; max-width: 52rem; }
.ac-rapide { display: grid; gap: 0.6rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: color-mix(in srgb, var(--l-pve) 7%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--l-pve) 30%, var(--sheet)); }
.ac-rapide h3 { font-size: 1.15rem; margin: 0; }
.ac-replis { display: grid; gap: 0.6rem; }
.ac-rapide p { margin: 0; }
.ac-rapide .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-etapes { margin-top: 0.8rem; }
.ac-etapes > li { --rang: 1.6em; }
.ac-etapes strong { font-weight: 680; display: block; line-height: var(--rang); }
.ac-etapes p { margin: 0.2rem 0 0.45rem; }
.ac-etapes .copie { margin: 0.3rem 0 0.4rem; }
.ac-etapes .copie code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; }
.ac-jeton { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; max-width: none; margin: 0.35rem 0 0.6rem; }
.ac-jeton > div { flex: 1 1 9rem; min-width: 0; }
.ac-outils { display: grid; gap: 1.75rem 2.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ac-groupe h4 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; margin: 0 0 0.35rem; }
.ac-groupe h4::before { content: ''; width: 1rem; height: 4px; border-radius: 999px; background: var(--trait, var(--ink)); }
.ac-groupe ul { list-style: none; margin: 0; padding: 0; }
.ac-groupe li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.ac-groupe li code { font-weight: 650; font-size: 0.875rem; background: none !important; padding: 0 !important; }
.ac-groupe li .ca-niveau { margin-left: auto; align-self: center; }
.ac-reveil { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; max-width: none; padding: 0.9rem 1.1rem; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); }
.ac-reveil .ca-ic { margin-top: 0.2rem; color: var(--l-pve); }
.ac-conv { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 46rem; }
.ac-conv > li { position: relative; display: grid; gap: 0.2rem; padding-left: 1.6rem; }
.ac-conv > li::before { content: ''; position: absolute; left: 0; top: 0.3rem; width: 0.8rem; height: 0.8rem; box-sizing: border-box; border-radius: 50%; background: var(--station); border: 2.5px solid var(--ink-3); }
.ac-conv > li[data-role='agent']::before { border-color: var(--l-pve); }
.ac-conv > li[data-role='personne']::before { border-color: var(--ink); background: var(--ink); }
.ac-conv > li[data-role='while']::before { border-color: var(--ink); }
.ac-conv > li:not(:last-child)::after { content: ''; position: absolute; left: calc(0.4rem - 1px); top: 1.15rem; bottom: -0.75rem; width: 2px; background: var(--rule-2); }
.ac-conv__nom { font: 650 var(--step--1)/1.5 var(--sans); color: var(--ink-2); }
.ac-conv p { margin: 0; }
.ac-conv > li[data-role='personne'] p { font-weight: 560; }
.ac-conv__appel { margin: 0; padding: 0.5rem 0.8rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); font: 400 0.8125rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-conv__appel--attente { background: var(--wait-bg); color: var(--wait-text); border-color: color-mix(in srgb, var(--l-info) 40%, var(--wait-bg)); }
.ac-catalogue { display: grid; gap: 1.25rem 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ac-famille h4 { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; margin: 0 0 0.3rem; }
.ac-famille h4::before { content: ''; width: 1rem; height: 4px; border-radius: 999px; background: var(--ink); }
.ac-famille ul { list-style: none; margin: 0; padding: 0; }
.ac-famille li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; }
.ac-famille li[data-etat='prevu'] > span { color: var(--ink-3); }
.ac-contrat { margin: 0; padding-left: 1.1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0.3rem 2.5rem; font-size: 0.9375rem; color: var(--ink-2); }

/* Organisation : connexion d'entreprise, budget, canaux, journal, politique. */
.ac-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.ac-feuille__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ac-feuille__tete h2, .ac-feuille__tete h3 { font-size: 1.125rem; }
.ac-budget__chiffre { margin: 0; font-size: 1.0625rem; }
.ac-budget__chiffre strong { font: 750 1.75rem/1 var(--sans); font-stretch: 110%; font-variant-numeric: tabular-nums; }
.ac-budget { position: relative; height: 22px; margin: 0.2rem 0 1.2rem; }
.ac-budget::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 999px; background: repeating-linear-gradient(90deg, var(--rule-2) 0 3px, transparent 3px 7px); }
.ac-budget__fait { position: absolute; left: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: var(--l-sav); }
.ac-budget__fait--wait { background: var(--l-info); }
.ac-budget__fait--bad { background: var(--l-heb-ink); }
.ac-budget__st { position: absolute; top: 50%; width: 1.05rem; height: 1.05rem; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; background: var(--station); border: 3px solid var(--ink); }
.ac-budget__seuil { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-3); border-radius: 2px; }
.ac-budget__seuil span { position: absolute; top: calc(100% + 0.15rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 0.75rem/1 var(--sans); color: var(--ink-3); }
.ac-budget__detail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.ac-budget__detail li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ac-budget__detail li > .mono { white-space: nowrap; }
.ac-canal { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-2); }
.ac-canal strong { color: var(--ink); }
.ac-url { font-size: 0.78rem; overflow-wrap: anywhere; }
.ac-nombre { width: 5rem !important; }
.ac-niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem 2rem; }
.ac-niveau h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.45rem; font: 400 var(--step--1)/1.4 var(--sans); color: var(--ink-2); }
.ac-niveau ul { list-style: none; margin: 0; padding: 0; }
.ac-niveau li { padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: 0.9375rem; text-wrap: pretty; }

/* ---------- L'écran d'une appli interne : ce que voit un employé, sobre ---------- */
body:has(.in-ecran) header.top nav.top { display: none; }
.in-ecran { display: grid; justify-items: center; padding-block: clamp(2rem, 8vh, 5rem); }
.in-carte { width: min(100%, 30rem); display: grid; justify-items: center; text-align: center; gap: 0.85rem; padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.25rem); background: var(--station); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 1px 1px rgba(16, 33, 58, .05), 0 24px 48px -28px rgba(16, 33, 58, .35); }
.in-carte > * { margin: 0; max-width: 26rem; }
.in-carte h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); overflow-wrap: anywhere; }
.in-org { font: 650 var(--step--1)/1.3 var(--sans); color: var(--ink-3); }
.in-carte .btn { padding: 0.75rem 1.3rem; font-size: 0.9375rem; }
.in-carte .alerte { text-align: left; width: 100%; }
.in-autre { width: 100%; text-align: left; }
.in-autre > summary { list-style: none; cursor: pointer; text-align: center; font: 600 var(--step--1)/1.6 var(--sans); color: var(--ink-2); }
.in-autre > summary::-webkit-details-marker { display: none; }
.in-autre > summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.in-autre form { margin-top: 0.8rem; display: grid; gap: 0.7rem; }
.in-autre form > div { display: grid; gap: 0.2rem; }
.in-autre label { margin: 0; }
/* Accès par projet : un projet replié par ligne ; le rôle effectif, sa raison, les autres sources dessous. */
.ac-ap + .ac-ap { margin-top: 0.4rem; }
.ac-ap > summary .small { margin-left: 0.5rem; }
.ac-ap__table td { vertical-align: top; }
.ac-raison { display: block; }
.ac-raison__autres { display: block; margin-top: 0.15rem; color: var(--ink-3); }
/* Politique : ce que l'organisation peut durcir, et son niveau ici. */
.ac-durcir__titre { margin: 1.25rem 0 0.5rem; font-size: var(--step-0); }
.ac-durcir td { vertical-align: middle; }
.in-note { font-size: var(--step--1); color: var(--ink-3); }
.in-carte--refus h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }

.cx-phase { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; vertical-align: middle; }
.cx-jauge { display: inline-flex; align-items: center; }
.cx-jauge i { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--station); }
.cx-jauge i + i { margin-left: 5px; }
.cx-jauge i + i::before { content: ''; position: absolute; right: calc(100% + 1.5px); top: calc(50% - 1px); width: 5px; height: 2px; background: var(--rule-2); }
.cx-jauge i.on { background: var(--l-con-ink); border-color: var(--l-con-ink); }
.cx-jauge i.on + i.on::before { background: var(--l-con-ink); }

.cx-nom { display: block; font-weight: 650; }
.cx-domaine { display: block; overflow-wrap: normal; }
.cx-refus { color: var(--bad-text); font-weight: 650; }
.cx-liste td:first-child { min-width: 11rem; }
/* Au téléphone, une connexion par bloc : son nom, sa phase et son état, puis ses appels. */
@media (max-width: 40rem) {
  .cx-liste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cx-liste, .cx-liste tbody { display: block; }
  .cx-liste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); }
  .cx-liste tbody tr:first-child { border-top: 0; }
  .cx-liste td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  .cx-liste td:nth-child(1) { grid-column: 1 / -1; }
  .cx-liste td:nth-child(4) { justify-self: end; align-self: center; }
  .cx-liste td.num { grid-column: 1 / -1; grid-row: 3; text-align: left; font-size: var(--step--1); color: var(--ink-2); }
  .cx-liste td.num::before { content: 'Appels 24 h : '; font-family: var(--sans); }
}
.cx-drapeau { display: inline-flex; align-items: center; gap: 0.35rem; font: 650 0.8125rem/1.5 var(--sans); color: var(--wait-text); background: var(--wait-bg); border-radius: 999px; padding: 0.1rem 0.6rem 0.1rem 0.45rem; white-space: nowrap; }
.cx-drapeau .ca-ic { width: 0.9rem; height: 0.9rem; }
.cx-drapeau--n { padding: 0.05rem 0.45rem; font-size: 0.75rem; gap: 0.2rem; vertical-align: middle; }
.cx-drapeau--n .ca-ic { width: 0.8rem; height: 0.8rem; }

/* Le chemin d'un appel : l'appelant, while, l'API, sur une ligne de métro ; la phrase pour l'agent à côté. */
.cx-principe-zone { grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 1fr); gap: 1.25rem 2.5rem; align-items: start; }
@media (max-width: 62rem) { .cx-principe-zone { grid-template-columns: minmax(0, 1fr); } }
.cx-principe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 1.25rem; }
.cx-principe > li { position: relative; display: grid; gap: 0.25rem; align-content: start; justify-items: start; padding-top: 1.75rem; min-width: 0; }
.cx-principe > li::before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--station); border: 3px solid var(--ink); box-sizing: border-box; }
.cx-principe > li::after { content: ''; position: absolute; top: calc(0.575rem - 3px); left: 1rem; right: -1.25rem; height: 6px; border-radius: 999px; background: var(--line); }
.cx-principe > li:first-child::after { height: 3px; top: calc(0.575rem - 1.5px); background: var(--rule-2); }
.cx-principe > li:last-child::after { display: none; }
.cx-principe__while::before { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5.5px var(--ink); }
.cx-principe strong { font-weight: 680; font-stretch: 104%; line-height: 1.3; }
.ca-page .cx-principe code { font-size: 0.75rem; max-width: 100%; overflow-wrap: normal; }
.cx-trois { list-style: none; margin: 0.1rem 0 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.9375rem; }
.cx-trois li { display: flex; align-items: center; gap: 0.45rem; }
.cx-trois .ca-ic { color: var(--l-con-ink); }
@media (max-width: 40rem) {
  .cx-principe { grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; }
  .cx-principe > li { padding: 0 0 0 2rem; }
  .cx-principe > li::after { left: calc(0.575rem - 3px); right: auto; top: 1rem; bottom: -1.1rem; width: 6px; height: auto; }
  .cx-principe > li:first-child::after { left: calc(0.575rem - 1.5px); width: 3px; }
}

/* Les trois phases d'une connexion, étirées sur la largeur ; la phase en cours porte sa jauge de jours. */
.cx-etapes { display: flex; list-style: none; margin: 0; padding: 0; }
.cx-etapes li { flex: 1 1 9rem; min-width: 0; display: grid; justify-items: start; align-content: start; gap: 0.3rem; position: relative; padding-right: 1.6rem; font-size: 0.9375rem; color: var(--ink-3); }
.cx-etapes li::before { content: ''; width: 1.05rem; height: 1.05rem; box-sizing: border-box; border-radius: 50%; background: var(--station); border: 3px solid var(--rule-2); position: relative; z-index: 1; }
.cx-etapes li::after { content: ''; position: absolute; top: calc(0.525rem - 2px); left: 1rem; right: 0.2rem; height: 4px; background: var(--rule); border-radius: 999px; }
.cx-etapes li:last-child::after { display: none; }
.cx-etapes li[data-etat='fait'] { color: var(--ink-2); }
.cx-etapes li[data-etat='fait']::before { border-color: var(--line); background: var(--line); }
.cx-etapes li[data-etat='fait']::after { background: var(--line); }
.cx-etapes li[data-etat='courant'] { color: var(--ink); font-weight: 650; }
.cx-etapes li[data-etat='courant']::before { border-color: var(--line); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--line); }
.cx-etapes__note { font-size: 0.78rem; font-weight: 400; color: var(--ink-3); line-height: 1.35; }
.cx-etapes li[data-etat='courant'] .cx-etapes__note { color: var(--ink-2); }
.cx-jours { display: inline-flex; gap: 3px; margin-left: 0.45rem; vertical-align: middle; }
.cx-jours i { width: 0.85rem; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--l-con) 22%, var(--sheet)); }
.cx-jours i.on { background: var(--l-con-ink); }
@media (max-width: 36rem) {
  .cx-etapes { flex-direction: column; }
  .cx-etapes li { flex: none; grid-template-columns: 1.05rem minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0; padding: 0 0 1rem; }
  .cx-etapes li > * { grid-column: 2; }
  .cx-etapes li::before { grid-row: 1 / span 2; }
  .cx-etapes li::after { top: 1rem; bottom: 0; left: calc(0.525rem - 2px); right: auto; width: 4px; height: auto; }
}

/* Onglets collés au contenu ; deux colonnes : le détail, puis la fiche. */
.cx-deux { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .cx-deux { grid-template-columns: minmax(0, 7fr) minmax(17rem, 3fr); } }
.cx-principal { display: grid; gap: 2.25rem; min-width: 0; }
.cx-cote { display: grid; gap: 1.25rem; min-width: 0; }
@media (min-width: 64rem) { .cx-cote { position: sticky; top: 4.5rem; } }
.cx-fiche dd.mono { font-size: 0.8rem; overflow-wrap: normal; }
.cx-attentes { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; max-width: none; }

/* Règles : méthode et chemin, appelants, le drapeau « valider chaque appel ». */
.cx-regles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cx-regle { display: grid; grid-template-columns: minmax(14rem, 1.2fr) minmax(0, 1.4fr) minmax(10rem, 0.8fr); gap: 0.5rem 1.25rem; align-items: start; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.cx-regle > * { min-width: 0; }
.cx-regle__appel { display: flex; gap: 0.55rem; align-items: baseline; }
.cx-regle__appel .cx-methode { flex: none; min-width: 2.8rem; }
.cx-regle__qui { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.cx-regle__chaque { display: grid; justify-items: start; }
@media (max-width: 48rem) { .cx-regle { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } }
.cx-benef { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.cx-benef .ca-ic { color: var(--ink-2); }
.cx-methode { font: 650 0.75rem/1 var(--mono); color: var(--l-con-ink); }
.ca-page code.cx-chemin { font-size: 0.8rem; background: none; padding: 0; overflow-wrap: normal; }
.cx-observes td:nth-child(4) { white-space: nowrap; }
.cx-quand, .cx-duree { white-space: nowrap; }
/* Au téléphone, un appel par bloc : quand et statut, puis qui, puis l'appel. */
@media (max-width: 40rem) {
  .cx-appels thead, .cx-observes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cx-appels, .cx-appels tbody, .cx-observes, .cx-observes tbody { display: block; }
  .cx-appels tr, .cx-observes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; padding: 0.7rem 1rem; border-top: 1px solid var(--rule); }
  .cx-appels tbody tr:first-child, .cx-observes tbody tr:first-child { border-top: 0; }
  .cx-appels td, .cx-observes td { display: block; padding: 0; border: 0; }
  .cx-appels td:nth-child(1) { grid-row: 1; grid-column: 1; }
  .cx-appels td:nth-child(4) { grid-row: 1; grid-column: 2; justify-self: end; }
  .cx-appels td:nth-child(2), .cx-appels td:nth-child(3), .cx-observes td:nth-child(1) { grid-column: 1 / -1; }
  .cx-observes td:nth-child(4) { grid-row: 2; grid-column: 2; justify-self: end; }
  .cx-observes td.num { text-align: left; font-size: var(--step--1); color: var(--ink-2); }
  .cx-observes td.num::after { content: ' appels'; font-family: var(--sans); }
}
.cx-appels .ca-qui { flex-wrap: wrap; }
.cx-appels .ca-qui__via { white-space: nowrap; }

/* Activité sur 24 h : les mesures, puis une barre par heure. */
.cx-activite { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: flex-end; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.cx-mesures { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin: 0; }
.cx-mesures > div { display: grid; gap: 0.15rem; align-content: start; }
.cx-mesures dt { font-size: var(--step--1); color: var(--ink-3); }
.cx-mesures dd { margin: 0; font: 600 1.6rem/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cx-mesure--bad dd { color: var(--bad-text); }
.cx-barres { flex: 1 1 16rem; max-width: 30rem; display: grid; gap: 0.3rem; min-width: 0; }
.cx-barres__b { display: flex; align-items: flex-end; height: 52px; gap: 3px; }
.cx-barres__b i { flex: 1 1 0; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--l-con); }
.cx-barres__b i.cx-zero { height: 2px; background: var(--rule-2); }
.cx-axe { display: flex; justify-content: space-between; font: 400 0.72rem/1 var(--sans); color: var(--ink-3); }

/* La boucle, en petit : un appel refusé est signalé à qui l'a fait. */
.cx-signal { display: grid; gap: 0.6rem; padding: 0.9rem 1.1rem; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); }
.cx-signal__titre { margin: 0; display: flex; gap: 0.55rem; align-items: flex-start; line-height: 1.4; max-width: none; }
.cx-signal__titre .ca-ic { margin-top: 0.15rem; color: var(--l-pve); }
.cx-signal__suite { list-style: none; margin: 0; padding: 0 0 0 0.4rem; display: grid; gap: 0.55rem; }
.cx-signal__suite li { position: relative; display: grid; gap: 0.1rem; padding-left: 1.25rem; font-size: 0.9375rem; line-height: 1.45; }
.cx-signal__suite li::before { content: ''; position: absolute; left: 0; top: 0.3rem; width: 0.7rem; height: 0.7rem; box-sizing: border-box; border-radius: 50%; background: var(--station); border: 2.5px solid var(--ink); }
.cx-signal__h { font: 400 0.78rem/1.4 var(--sans); color: var(--ink-3); }

/* Comment l'appeler : trois façons, la clé dans aucune. */
.cx-appeler { display: grid; gap: 1.25rem; }
.cx-appeler > div { display: grid; gap: 0.45rem; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.cx-appeler > div:first-child { border-top: 0; padding-top: 0; }
.cx-appeler h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.cx-appeler p { margin: 0; }
.cx-appeler .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Le secret : un champ masqué, en avant quand il manque ou que l'API le refuse. */
.cx-panne { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.cx-panne .alerte p { margin: 0 0 0.4rem; }
.cx-panne .alerte p:last-child { margin: 0; }
.cx-panne .alerte .small { color: inherit; }
.cx-cle label { display: flex; align-items: center; gap: 0.45rem; }
.cx-cle-zone { max-width: 36rem; }
.cx-declarer { justify-self: start; }


/* Le contenu d'un projet commence haut : l'en-tête dit le lieu, la barre latérale le reste. */
section.pj { padding-top: clamp(1.1rem, 2.4vw, 1.9rem); }

/* L'en-tête : en petit, où est la page (« entrepot · Réglages ») ; le titre ; à droite, « Ouvrir l'appli ». */
.pj-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0 0 1.5rem; }
.pj-tete__texte { flex: 1 1 20rem; min-width: 0; }
.pj-tete__lieu { margin: 0 0 0.35rem; font: 600 0.9375rem/1.3 var(--sans); color: var(--ink-3); overflow-wrap: anywhere; }
.pj-tete__titre { margin: 0; max-width: none; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 780; font-stretch: 112%; letter-spacing: -0.025em; line-height: 1.08; overflow-wrap: anywhere; }
.pj-tete .lede { margin: 0.45rem 0 0; font-size: 1.0625rem; line-height: 1.45; }
.pj-tete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pj-tete__appli { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.pj-sortie { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .pj-tete__appli { min-height: 2.75rem; } }

/* Hors production : une bande de la couleur des prévisualisations dit où l'on est. */
.pj-bande { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.2rem; max-width: none;
  margin: 0 0 1rem; padding: 0.6rem 1rem; border-radius: 10px; background: var(--l-con-ink); color: var(--station);
  font: 600 0.9375rem/1.4 var(--sans); }
.pj-bande[data-kind='staging'] { background: var(--l-info); color: var(--ink); }
.pj-bande a { color: inherit; text-decoration-color: currentColor; white-space: nowrap; }
.pj-bande a:focus-visible { outline-color: var(--station); }
.pj-bande[data-kind='staging'] a:focus-visible { outline-color: var(--ink); }

.pj-n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.32rem; border-radius: 999px;
  font: 700 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--paper-2); color: var(--ink-2); }
.pj-n--bad { background: var(--bad-bg); color: var(--bad-text); }
.pj-n--wait { background: var(--wait-bg); color: var(--wait-text); }

/* Le résumé de Santé : quatre tuiles qui mènent aux sous-pages ; l'état se lit à la station et au mot. */
.pj-tuiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0 0 1.4rem; padding: 0; list-style: none; }
@media (max-width: 40rem) { .pj-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .pj-tuile { min-height: 0; padding: 0.8rem 0.85rem; } }
.pj-tuile { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 0.45rem; min-height: 8.25rem; padding: 0.95rem 1rem 0.9rem;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.pj-tuile:hover { border-color: var(--rule-2); box-shadow: 0 1px 1px rgba(16, 33, 58, .04), 0 10px 22px -16px rgba(16, 33, 58, .45); }
.pj-tuile:focus-visible { outline-offset: 2px; border-radius: 12px; }
.pj-tuile__nom { display: flex; align-items: center; gap: 0.5rem; font: 650 0.9375rem/1.3 var(--sans); color: var(--ink-2); }
.pj-tuile__nom::before { content: ''; flex: none; box-sizing: border-box; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--station); border: 3px solid var(--l-sav); }
.pj-tuile[data-ton='bad'] .pj-tuile__nom::before { background: var(--l-heb-ink); border-color: var(--l-heb-ink); }
.pj-tuile[data-ton='wait'] .pj-tuile__nom::before { border-color: var(--l-info); background: var(--l-info); }
.pj-tuile[data-ton='neutre'] .pj-tuile__nom::before { border-color: var(--rule-2); }
.pj-tuile__valeur { margin: 0.15rem 0 0; font: 760 clamp(1.5rem, 1.2rem + 0.9vw, 2rem)/1.1 var(--sans); font-stretch: 108%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pj-tuile__valeur .small { font-size: 0.9375rem; font-weight: 560; letter-spacing: 0; color: var(--ink-3); }
.pj-tuile__note { margin: 0; font-size: var(--step--1); line-height: 1.4; color: var(--ink-3); }
.pj-tuile[data-ton='bad'] .pj-tuile__note { color: var(--bad-text); }
.pj-tuile::after { content: ''; position: absolute; top: 1.05rem; right: 1rem; width: 0.5rem; height: 0.5rem; border: solid var(--ink-3); border-width: 2px 2px 0 0;
  transform: rotate(45deg); transition: transform .15s ease-out; }
.pj-tuile:hover::after { transform: translateX(2px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .pj-tuile, .pj-tuile::after { transition: none; } }

.pj-sante, .pj-reglage, #taches, #fil { scroll-margin-top: 1rem; }
@media (max-width: 59.99rem) { .pj-sante, .pj-reglage, #taches, #fil { scroll-margin-top: 4.25rem; } }
.pj-sante + .pj-sante, .pj-reglage + .pj-reglage { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.pj-sous-titre { font: 680 1rem/1.3 var(--sans); font-stretch: 104%; margin: 1.3rem 0 0.5rem; }
.pj-note { margin: 0; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--paper); font-size: 0.9375rem; color: var(--ink-2); }

/* Les champs que la feuille commune ne dessine pas (adresse, nombre, date et heure) : comme les autres. */
.pj input[type='url'], .pj input[type='number'], .pj input[type='datetime-local'] {
  width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--station); font: 400 1rem/1.4 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Activité : les filtres rapides du fil (quoi, qui, quand, depuis). */
.pj-fil-filtres { display: grid; gap: 0.45rem; margin: 0.2rem 0 1.3rem; padding: 0.7rem 0.85rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.pj-rapides { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-width: 0; }
.pj-rapides__nom { flex: none; width: 3.6rem; font: 650 var(--step--1)/1.2 var(--sans); color: var(--ink-3); }
.pj-rapide { display: inline-flex; align-items: center; min-height: 2.1rem; padding: 0.2rem 0.75rem; border-radius: 999px;
  color: var(--ink-2); font: 600 0.875rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.pj-rapide:hover { background: var(--paper); color: var(--ink); }
.pj-rapide[aria-current] { background: var(--ink); color: var(--sheet); }
.pj-rapide:focus-visible { border-radius: 999px; }
.pj-rapides--quand { column-gap: 1rem; }
.pj-depuis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.pj-depuis label { margin: 0; font: 650 var(--step--1)/1.2 var(--sans); color: var(--ink-3); }
.pj .pj-depuis input { width: auto; min-height: 2.1rem; padding: 0.2rem 0.5rem; font-size: 0.875rem; }
.pj-depuis .btn { min-height: 2.1rem; }
@media (pointer: coarse) { .pj-rapide, .pj .pj-depuis input, .pj-depuis .btn { min-height: 2.75rem; } }
@media (max-width: 34rem) { .pj-rapides__nom { width: 100%; } .pj-rapides--quand > .pj-rapides { width: 100%; } }
.pj-fil .pj-bloc__tete .direct { margin: 0; }
.pj-fil .fil__jour { font-size: 1.05rem; margin: 1.4rem 0 0.7rem; }
.pj-fil .pj-compte { margin: 0; }
.pj-taches-plus { margin-top: 0.9rem; }

/* Blocs et titres : peu de niveaux, de l'air au-dessus d'un titre, peu en dessous. */
.pj-bloc { margin: 0 0 1.6rem; padding: 0; border: 0; }
section.pj-bloc + section.pj-bloc { border-top: 0; }
.pj-bloc__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.pj-bloc__tete .seg--services { margin: 0; }
/* Le choix qui règle un bloc (période, service, source) : à droite de son titre, centré sur lui. */
.pj-bloc__choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pj-bloc__tete:has(> .pj-bloc__choix) { align-items: center; margin: 0.4rem 0 0.85rem; }
.pj-bloc__tete:has(> .pj-bloc__choix) > .pj-titre, .pj-bloc__tete:has(> .pj-bloc__choix) > .pj-sous-titre { margin: 0; }
.pj-robots__tete { margin-top: 1.3rem; }
.pj-titre { font-size: 1.125rem; font-weight: 700; font-stretch: 104%; letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; }
.pj-titre .small { font-weight: 500; letter-spacing: 0; }
.pj-bloc > .pj-titre:first-child, .pj-bloc > .pj-bloc__tete:first-child .pj-titre { margin-top: 0.4rem; }
.pj-sous-t { font: 650 0.875rem/1.3 var(--sans); margin: 0 0 0.4rem; color: var(--ink-2); }
.pj-calme { margin: 0; padding: 0.4rem 0; color: var(--ink-2); font-size: 0.9375rem; }
.pj-liste { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; }
.pj-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.4rem; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pj-enligne { display: inline; margin: 0; }
.pj-limites { margin: 1.2rem 0 0; }
.pj-lignes + .pj-bloc, .pj-plus + .pj-bloc { margin-top: 1.4rem; }
.pj .table-wrap + p.small { margin: 0.5rem 0 0; }
table.pj-compact td { padding-block: 0.5rem; }

/* Une ligne qui se déplie : station, titre, méta courte, pastille ; le détail dessous. */
.pj-lignes { display: grid; gap: 0.5rem; }
.pj-li { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.pj-li > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 0.15rem 0.8rem; padding: 0.6rem 1rem; border-radius: 10px; }
.pj-li > summary::-webkit-details-marker { display: none; }
.pj-li > summary::after { content: ''; grid-column: 4; grid-row: 1 / span 2; width: 0.5rem; height: 0.5rem; border: solid var(--ink-3);
  border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s ease-out; }
.pj-li[open] > summary::after { transform: rotate(45deg); }
.pj-li > summary:hover { background: var(--paper); }
.pj-li > summary:focus-visible, .pj-plus > summary:focus-visible, .pj-v > summary:focus-visible { outline: 3px solid var(--l-pve); outline-offset: 2px; }
.pj-li__st { grid-row: 1 / span 2; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 3px solid var(--rule-2); background: var(--station); }
.pj-li--bad .pj-li__st { border-color: var(--l-heb-ink); background: var(--l-heb-ink); }
.pj-li--wait .pj-li__st { border-color: var(--l-info); }
.pj-li--ok .pj-li__st { border-color: var(--l-sav); }
.pj-li__t { font-weight: 650; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.pj-li__t code { background: none; padding: 0; font-size: 0.95em; }
.pj-li__m { grid-column: 2; grid-row: 2; font-size: var(--step--1); color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.15rem 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.pj-li > summary > .chip { grid-column: 3; grid-row: 1 / span 2; }
.pj-li__d { padding: 0 1rem 0.9rem 2.65rem; display: grid; gap: 0.5rem; min-width: 0; }
.pj-li__d > p { margin: 0; }
.pj-li__d .journal { max-height: 14rem; overflow: auto; margin: 0; }
@media (max-width: 40rem) {
  .pj-li > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pj-li > summary > .chip { grid-column: 2; grid-row: 3; justify-self: start; }
  .pj-li > summary::after { grid-column: 3; grid-row: 1; }
  .pj-li__d { padding-left: 1rem; }
}

/* Ce qui n'est pas essentiel : replié derrière un clic. */
.pj-plus { margin: 0.5rem 0 0; }
.pj-plus > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.5rem; font-weight: 600; color: var(--ink-2);
  padding: 0.3rem 0; border-radius: 4px; }
.pj-plus > summary::-webkit-details-marker { display: none; }
.pj-plus > summary::before { content: ''; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-0.1rem) rotate(-45deg); transition: transform .15s ease-out; flex: none; }
.pj-plus[open] > summary::before { transform: translateY(-0.2rem) rotate(45deg); }
.pj-plus > summary:hover { color: var(--ink); }
.pj-plus__d { padding-top: 0.6rem; display: grid; gap: 0.6rem; min-width: 0; }
.pj-plus__d > .obs__grille { margin-top: 0; }
.pj-plus__d > p, .pj-plus__d > form { margin: 0; }
.pj-plus__d .filtres { margin: 0; }

/* La phrase pour l'agent : une seule par page, en bas. */
.pj-phrase { margin-top: 1.8rem; }
.pj-phrase .etat-vide__etiquette { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; color: var(--ink-2); }
.pj-phrase .etat-vide__etiquette::before { content: ''; width: 0.9rem; height: 3px; border-radius: 999px; background: var(--l-pve); }
.pj-phrase .copie { max-width: 100%; align-items: flex-start; }
.pj-phrase .copie code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Vue d'ensemble. */
.pj > .alerte { margin: 0 0 0.6rem; }
.pj-rappel { padding: 0; margin: 0 0 1rem; border: 0; }
.pj-rappel > .bc--compact { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 1rem; }
/* La boucle ouverte, en entier, sur sa feuille : la ligne qui revient passe sous le texte « Pas encore fermée ». */
.pj-rappel--ouvert { display: grid; gap: 0.8rem; margin-bottom: 1.4rem; }
.pj-rappel--ouvert > .bc { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem 0.4rem; }
.pj-leg { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; margin: 0; padding: 0; font-size: var(--step--1); color: var(--ink-3); }
.pj-leg li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pj-leg__l { width: 1.4rem; height: 4px; border-radius: 999px; background: var(--l-heb); }
.pj-leg__l--sav { background: var(--l-sav); }
.pj-leg__z { width: 1.1rem; height: 0.8rem; border: 1.5px dashed var(--ink-3); border-radius: 3px; }
.pj-leg__aide { color: var(--ink-2); }
.schema figcaption:has(.pj-leg) { max-width: none; }
.pj-versions > li { padding-bottom: 0.75rem; }
.pj-v > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; border-radius: 4px; }
.pj-v > summary::-webkit-details-marker { display: none; }
.pj-v > summary::after { content: ''; width: 0.4rem; height: 0.4rem; border: solid var(--ink-3); border-width: 0 2px 2px 0;
  transform: translateY(-0.15rem) rotate(45deg); transition: transform .15s ease-out; }
.pj-v[open] > summary::after { transform: translateY(0) rotate(-135deg); }
.pj-v > summary strong { font-size: 1.05rem; }
.pj-v > .small { margin-top: 0.3rem; }
.pj-v__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.45rem; }
.pj-v__actions form { margin: 0; }
section.pj-fin { padding-top: 1.2rem; }
.vide-projet > h2 { font-size: 1.5rem; }

/* Santé. */
.pj-obs .seg--services { margin: 0; }
.pj-deux { margin-top: 1.4rem; align-items: start; }
.pj-deux > .pj-bloc { margin: 0; min-width: 0; }
.pj-deux .pj-titre { margin-top: 0; }
.pj-dispo { display: grid; gap: 0.7rem; }
.pj-dispo > p { margin: 0; }
.pj-sondes { list-style: none; margin: 0; padding: 0.7rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.55rem; }
.pj-sondes li { display: grid; grid-template-columns: minmax(5rem, auto) 1fr auto; align-items: center; gap: 0.3rem 0.8rem; }
.pj-sondes .histo { flex-wrap: nowrap; overflow: hidden; }
.pj-sondes .histo i { width: 5px; }
.pj-obs__plus { margin-top: 1rem; }

/* Sécurité. */
.pj-ids > span { white-space: nowrap; }
.pj-ligne-f { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0.9rem 0 0; }
.pj-ligne-f > .btn { margin-left: 0.4rem; }
.pj-ic { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pj-expo { list-style: none; margin: 0; padding: 0; display: grid; }
.pj-expo > li { padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.pj-expo > li:last-child { border-bottom: 1px solid var(--rule); }
.pj-expo__d summary { cursor: pointer; }
.pj-expo__d .mono { overflow-wrap: anywhere; }
.pj-expo__d > p, .pj-expo__d > ul { margin: 0.35rem 0 0; }

/* Tâches : la ligne du jour. */
.pj-metro { padding: 0; margin: 0 0 1rem; border: 0; }
.pj-metro .pj-sous-titre { margin-top: 0.4rem; }
.pj-m-cadre { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 0.4rem 0.75rem 0.2rem; }
.pj-m { display: block; max-width: none; height: auto; }
.pj-m__a { outline: none; }
.pj-m__a:hover text:first-child { text-decoration: underline; }
.pj-m__a:focus-visible circle { stroke: var(--l-pve); stroke-width: 4; }
.pj-m__a:focus-visible text:first-child { fill: var(--l-pve); text-decoration: underline; }
table.taches td:last-child { width: 1%; white-space: nowrap; }
table.taches .actions { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: flex-start; }
table.taches .actions form { margin: 0; }
table.taches .rattraper form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }

/* Réglages › Données. */
.pj-bases { display: grid; gap: 1rem; }
.pj-base { display: grid; gap: 0.8rem; }
.pj-base__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; }
.pj-base__tete h2 { font-size: 1.15rem; }
.pj-base__tete p { margin: 0.2rem 0 0; }
.pj-base__tete form { margin: 0; }
.pj-base .pj-plus { margin: 0; }
.pj-sauve { max-width: 40rem; }
.pj-bases + .pj-lignes { margin-top: 1rem; }
.pj-filtres { align-items: flex-end; }
@media (max-width: 34rem) { .pj-sondes li { grid-template-columns: 1fr auto; } .pj-sondes .histo { grid-column: 1 / -1; grid-row: 2; } }
.pj-dispo-bloc { margin-top: 1.2rem; }

/* La bande des 24 heures : le nombre d'un groupe de stations se lit (12 px au moins). */
.station--groupe { min-width: 1.75rem; height: 1.75rem; }
.station span { font-size: 0.75rem; }

/* Réglages : propriétaire, budget, réglages en ligne, dépôt. */
.pj-faits-larges { grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); row-gap: 0.9rem; }
.pj-faits-larges dd > p { margin: 0.2rem 0 0; }
.pj-enligne-f { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0; }
.pj .pj-enligne-f select, .pj .pj-enligne-f input { width: auto; max-width: 16rem; padding-block: 0.3rem; font-size: 0.9375rem; }
.pj .pj-enligne-f input[type='number'] { width: 7rem; }
.pj-depot-git { margin-top: 1rem; display: grid; gap: 0.4rem; }
.pj-depot-git > p { margin: 0; }

/* Zone dangereuse : ce qui ne se défait pas, à part, en couleur d'alerte. */
.pj-danger { display: grid; border: 1.5px solid color-mix(in srgb, var(--l-heb-ink) 55%, var(--sheet)); border-radius: 12px; background: var(--sheet); }
.pj-danger__l { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; padding: 0.9rem 1rem; }
.pj-danger__l + .pj-danger__l { border-top: 1px solid var(--rule); }
.pj-danger__l > div { flex: 1 1 18rem; min-width: 0; }
.pj-danger__l p { margin: 0.15rem 0 0; }
.pj-danger__l form { margin: 0; }
.pj-danger__f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.pj-danger__f label { flex-basis: 100%; margin: 0; font-size: var(--step--1); }
.pj-danger__f input { width: 14rem; max-width: 100%; }
.btn--danger { border-color: var(--l-heb-ink); color: var(--l-heb-ink); }
.btn--danger:not(.btn--ghost) { background: var(--l-heb-ink); color: var(--station); }
.btn--danger:hover { border-color: var(--bad-text); }
.btn--danger:not(.btn--ghost):hover { background: var(--bad-text); }
@media (prefers-reduced-motion: reduce) { .pj-li > summary::after, .pj-plus > summary::before, .pj-v > summary::after { transition: none; } }


/* ---- À traiter : une ligne par chose, le détail se déplie ---- */
.tr { display: grid; gap: 2rem; max-width: 60rem; }
.tr > * { min-width: 0; }
.tr-tete h1 { margin-bottom: 0.4rem; }
.tr-tete .lede { margin: 0; }
.tr-bloc { display: grid; gap: 0.45rem; padding: 0; border: 0; }
.tr-bloc + .tr-bloc { border-top: 0; }
.tr-bloc h2 { font-size: 1.1rem; font-stretch: 104%; margin-bottom: 0.3rem; color: var(--ink-2); }
.tr-ligne { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; }
.tr-ligne > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.15rem 0.8rem; padding: 0.7rem 1rem; border-radius: 10px;
}
.tr-ligne > summary::-webkit-details-marker { display: none; }
.tr-ligne > summary::after {
  content: ''; grid-column: 4; grid-row: 1 / span 2; width: 0.45rem; height: 0.45rem; margin: 0 0.15rem;
  border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s ease-out;
}
.tr-ligne[open] > summary::after { transform: rotate(45deg); }
.tr-ligne > summary:hover { background: var(--paper); }
.tr-ligne[open] > summary:hover { border-radius: 10px 10px 0 0; }
.tr-st { grid-row: 1 / span 2; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 3px solid var(--rule-2); background: var(--station); }
.tr-ligne--bad .tr-st { border-color: var(--l-heb-ink); background: var(--l-heb-ink); }
.tr-ligne--wait .tr-st { border-color: var(--l-info); }
.tr-titre { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.tr-meta { grid-column: 2; grid-row: 2; font-size: var(--step--1); color: var(--ink-3); overflow-wrap: anywhere; }
.tr-ligne > summary .chip { grid-column: 3; grid-row: 1 / span 2; }
.tr-detail { padding: 0.1rem 1rem 1rem 2.65rem; display: grid; gap: 0.7rem; }
.tr-detail p { margin: 0; }
.tr-erreur { background: var(--bad-bg); color: var(--bad-text); padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.8125rem; overflow-wrap: anywhere; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
.tr-actions > a { font-weight: 600; }
.tr-detail > *, .tr-phrase > * { min-width: 0; }
.tr-phrase { display: grid; gap: 0.35rem; }
.tr-phrase .copie code, .jn-phrase .copie code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-phrase .tr-phrase__titre { font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
.tr-boucles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.tr-boucles > li { background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 1rem; }
/* La ligne n'est pas cliquable : seul son titre est un lien, et il se lit comme un lien. L'état reste une pastille. */
.tr-boucles .bc__c-titre a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.tr-boucles .bc__c-titre a:hover { text-decoration-color: currentColor; }
.tr-plus > summary { cursor: pointer; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); padding: 0.3rem 0; }
.tr-plus[open] > summary { margin-bottom: 0.45rem; }
.tr-fin { display: grid; gap: 0; }
.tr-reste { margin: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; align-items: baseline; color: var(--ink-3); font-size: 0.9375rem; padding-bottom: 0.6rem; }
.tr-reste span:first-child { color: var(--ink-2); font-weight: 650; }
.tr-reste a { color: var(--ink-2); }
.tr-matin { border-top: 1px solid var(--rule); }
.tr-matin > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem;
  min-height: 2.75rem; padding: 0.35rem 0; font-size: 0.9375rem; color: var(--ink-2);
}
.tr-matin > summary::-webkit-details-marker { display: none; }
.tr-matin > summary::after {
  content: ''; width: 0.45rem; height: 0.45rem; margin-left: 0.1rem; border: solid var(--ink-3); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-0.15rem); transition: transform .15s ease-out;
}
.tr-matin[open] > summary::after { transform: rotate(-135deg) translateY(-0.05rem); }
.tr-matin > summary:hover .tr-titre { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.tr-matin .tr-titre { color: var(--ink); }
.tr-matin__ic { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding-inline: 0.15rem; }
.tr-matin__ic::before { content: ''; position: absolute; inset-inline: 0; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: var(--l-sav); }
.tr-matin__ic i { position: relative; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--station); border: 2px solid var(--ink); }
.tr-matin__d { display: grid; gap: 0.5rem; padding: 0.3rem 0 0.5rem; }
.tr-matin__d p { margin: 0; }
@media (max-width: 560px) {
  .tr-ligne > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tr-ligne > summary .chip { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 0.2rem; }
  .tr-ligne > summary::after { grid-column: 3; grid-row: 1; }
  .tr-detail { padding-left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-ligne > summary::after, .tr-matin > summary::after { transition: none; }
}

/* ---- Journal : une entrée = une ligne, qui (initiale) via quoi, le détail se déplie ---- */
.jn { display: grid; gap: 1.25rem; }
.jn > * { min-width: 0; }
.jn-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1.5rem; }
.jn-tete h1 { margin-bottom: 0.4rem; }
.jn-tete .lede { margin: 0; font-size: 1.0625rem; }
.onglets__n { display: inline-block; min-width: 1.4rem; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 600 0.75rem/1.5 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.jn-export { position: relative; }
.jn-export > summary { list-style: none; cursor: pointer; }
.jn-export > summary::-webkit-details-marker { display: none; }
.jn-export__menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 5; display: grid; gap: 0.5rem; justify-items: start; width: max-content; max-width: 18rem;
  padding: 0.75rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 1px 1px rgba(16,33,58,.05), 0 14px 32px -16px rgba(16,33,58,.35);
}
.jn-export__menu p { margin: 0; }
.jn-compte { margin: -0.5rem 0 0; }

/* ---- Le fil (src/ui/fil.ts) : un moment par ligne, groupés par jour ; partagé avec l'Activité d'un projet ---- */
.jn-fil { display: grid; gap: 0.6rem; min-width: 0; }
.jn-fil .fil__jour { font-size: 1rem; margin: 0.4rem 0 0.5rem; }
.jn-fil .fil > li { padding-bottom: 0.3rem; }
.jn-fil .fil__tete .quand { min-width: 2.9rem; font-size: max(0.75rem, 0.88em); }
.jn-fil .jn-e > .fil__tete { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; column-gap: 0.6rem; align-items: baseline; }
.jn-fil .jn-e > summary.fil__tete { cursor: pointer; }
.jn-aussi { margin: 0 0 0.3rem; }

/* ---- Une ligne répétée : « · 32 fois, de 06:52 à 06:54 » ; sa station se double d'un anneau ---- */
.jn-fois { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.jn-fil .fil > li[data-fois]::before { outline: 1.5px solid var(--rule-2); outline-offset: 1.5px; }
.pj-fil .filtrage { margin: 0.2rem 0 0.8rem; }

/* ---- La barre de filtres (src/ui/fil.ts, barreFiltres) : une recherche, des menus, Quand ----
   Une seule barre, d'un trait : chaque menu montre son nom au-dessus de son choix ; un menu posé
   (autre chose que « Tout ») s'écrit en encre. Elle passe sur deux lignes au téléphone. */
.filtrage {
  display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; min-width: 0;
  background: var(--station); border: 1.5px solid var(--rule-2); border-radius: 12px;
  transition: border-color .15s ease-out;
}
.filtrage:focus-within { border-color: var(--ink-2); }
.filtrage :focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 9px; }
.filtrage__cherche { position: relative; flex: 1 1 15rem; display: flex; align-items: center; min-width: 0; }
.filtrage__ic { position: absolute; left: 0.85rem; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.filtrage__cherche input {
  width: 100%; min-height: 3.1rem; padding: 0.5rem 0.75rem 0.5rem 2.45rem; border: 0; border-radius: 10px;
  background: transparent; font: 400 0.9375rem/1.3 var(--sans); color: var(--ink);
}
.filtrage__cherche input::placeholder { color: var(--ink-3); opacity: 1; }
.filtrage__cherche input::-webkit-search-cancel-button { cursor: pointer; }
.filtrage__menus { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }
.filtrage__menus > * { position: relative; border-left: 1px solid var(--rule); min-width: 0; }
.filtrage__menu { display: grid; }
.filtrage__menu label, .filtrage__nom {
  position: absolute; left: 0.85rem; top: 0.5rem; margin: 0; pointer-events: none;
  font: 650 0.71875rem/1 var(--sans); letter-spacing: 0.01em; color: var(--ink-3);
}
.filtrage__menu select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 3.1rem; margin: 0; cursor: pointer;
  padding: 1.35rem 2rem 0.45rem 0.85rem; border: 0; border-radius: 0; background-color: transparent; color: var(--ink-2);
  font: 600 0.875rem/1.2 var(--sans); max-width: 15rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6578' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1rem;
}
.filtrage__menu select:hover, .filtrage__quand > summary:hover { background-color: var(--paper); }
.filtrage__menu--pose select { color: var(--ink); font-weight: 700; }
.filtrage__menu--pose label { color: var(--ink-2); }
.filtrage__quand > summary {
  list-style: none; cursor: pointer; display: grid; align-content: end; height: 100%; min-height: 3.1rem;
  padding: 1.35rem 2rem 0.45rem 0.85rem; font: 600 0.875rem/1.2 var(--sans); color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6578' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 1rem;
}
.filtrage__quand > summary::-webkit-details-marker { display: none; }
.filtrage__quand > summary::before { content: none; }
.filtrage__valeur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem; }
.filtrage__panneau {
  position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 6; width: 18rem; max-width: calc(100vw - 2 * var(--gutter, 1rem));
  display: grid; gap: 0.35rem; padding: 0.4rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,33,58,.06), 0 16px 36px -18px rgba(16,33,58,.4);
}
.filtrage__periodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.filtrage__periodes a {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.3rem 0.6rem; border-radius: 8px;
  color: var(--ink-2); font: 600 0.875rem/1.2 var(--sans); text-decoration: none;
}
.filtrage__periodes a:hover { background: var(--paper); color: var(--ink); }
.filtrage__periodes a[aria-current] { color: var(--ink); font-weight: 700; }
.filtrage__coche { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.filtrage__periodes a[aria-current] .filtrage__coche { visibility: visible; }
.filtrage__dates { display: grid; gap: 0.45rem; margin: 0; padding: 0.6rem 0.6rem 0.35rem; border: 0; border-top: 1px solid var(--rule); min-width: 0; }
.filtrage__dates legend { float: left; width: 100%; padding: 0; margin: 0 0 0.1rem; font: 650 0.8125rem/1.3 var(--sans); color: var(--ink-2); }
.filtrage__dates > div { display: grid; gap: 0.15rem; }
.filtrage__dates label { margin: 0; font: 600 0.75rem/1.3 var(--sans); color: var(--ink-3); }
.filtrage__dates input {
  width: 100%; min-height: 2.25rem; padding: 0.3rem 0.5rem; border: 1.5px solid var(--rule-2); border-radius: 8px;
  background: var(--station); color: var(--ink); font: 400 0.875rem/1.2 var(--sans); font-variant-numeric: tabular-nums;
}
.filtrage__dates .btn { justify-self: start; margin-top: 0.15rem; }
.filtrage__fin { display: flex; align-items: center; gap: 0.5rem 0.85rem; padding: 0.4rem 0.55rem; border-left: 1px solid var(--rule); }
.filtrage__fin .btn { white-space: nowrap; }
.filtrage__effacer { font-size: var(--step--1); color: var(--ink-2); white-space: nowrap; }
@media (pointer: coarse) { .filtrage__periodes a, .filtrage__dates input { min-height: 2.75rem; } }
@media (max-width: 46rem) {
  .filtrage__cherche { flex-basis: 100%; border-bottom: 1px solid var(--rule); }
  .filtrage__menus { flex: 1 1 auto; }
  .filtrage__menus > * { flex: 1 1 7.5rem; }
  .filtrage__menus > :first-child { border-left: 0; }
  .filtrage__menu select, .filtrage__valeur { max-width: none; }
  .filtrage__panneau { right: auto; left: 0; }
  .filtrage__menus > .filtrage__quand:last-child .filtrage__panneau { left: auto; right: 0; }
}
@media (max-width: 30rem) {
  .filtrage__menus { flex-basis: 100%; }
  .filtrage__fin { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--rule); justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .filtrage { transition: none; } }
.jn-av { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); font: 700 0.75rem/1 var(--sans); vertical-align: 0.05em; margin-right: 0.35rem; }
.jn-av--while { background: var(--ink); color: var(--sheet); }
.jn-av--agent { background: var(--l-pve); color: var(--sheet); }
.jn-qui strong { font-weight: 650; }
.jn-e__detail { margin: 0.15rem 0 0.45rem; }
.jn-marque { display: inline-flex; align-self: center; color: var(--ink-3); }
.jn-marque svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jn-fil .fil > li.jn-boucle::before { border-color: var(--l-pve); }
.jn-fil .fil > li.jn-boucle .jn-famille { color: var(--l-pve); font-weight: 650; }
.jn-phrase { display: grid; gap: 0.35rem; max-width: 46rem; }
.jn-phrase p { margin: 0; font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
@media (max-width: 40rem) {
  .jn-export__menu { right: auto; left: 0; max-width: calc(100vw - 2 * var(--gutter)); }
}

/* ---- La boucle : une ligne de métro qui se referme ----
   Les stations sont les étapes (while en encre, l'agent en bleu, une personne en jaune), le trait épais va de
   l'une à l'autre, le trait fin revient à la première. Large : en ligne, le retour passe sous les textes.
   Étroit : en colonne, le retour remonte à gauche en épingle. */
.bc { --bc-fond: var(--sheet); container: bc / inline-size; display: grid; gap: 1rem; min-width: 0; }
.bc [data-acteur='while'], .bc-legende [data-acteur='while'] { --bc-c: var(--ink); --bc-t: var(--ink); }
.bc [data-acteur='agent'], .bc-legende [data-acteur='agent'] { --bc-c: var(--l-pve); --bc-t: var(--l-pve); }
.bc [data-acteur='humain'], .bc-legende [data-acteur='humain'] { --bc-c: var(--l-info); --bc-t: var(--l-info-ink); }
.bc [data-suite='while'] { --bc-s: var(--ink); }
.bc [data-suite='agent'] { --bc-s: var(--l-pve); }
.bc [data-suite='humain'] { --bc-s: var(--l-info); }
.bc [data-suite='avenir'] { --bc-s: repeating-linear-gradient(90deg, var(--rule-2) 0 7px, transparent 7px 13px); }
.bc__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.4rem 1rem; }
.bc__titre { font-size: 1.1875rem; }
.bc__meta { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--ink-3); }
.bc__meta a { color: var(--ink-2); }
.bc__marque { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; vertical-align: 0.15em; font: 650 0.75rem/1 var(--sans); color: var(--ink-2); }
.bc__marque svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.bc__boucle {
  --bc-ph: 1.55rem; --bc-d: 1.25rem; --bc-y: calc(var(--bc-ph) + var(--bc-d) / 2);
  --bc-gap: 1.1rem; --bc-r: 1.3rem; --bc-x: 1.7rem; --bc-ret: var(--ink);
  position: relative; padding: 0 1.5rem 2.5rem var(--bc-x);
}
.bc[data-etat='ouvert'] .bc__boucle { --bc-ret: var(--rule-2); }
.bc__boucle::before {
  content: ''; position: absolute; pointer-events: none;
  left: calc(var(--bc-x) + var(--bc-d) / 2 - var(--bc-r) - 1.5px); top: calc(var(--bc-y) - 1.5px);
  right: 0.4rem; bottom: 1rem; border: 3px solid var(--bc-ret); border-radius: var(--bc-r);
}
.bc[data-etat='ouvert'] .bc__boucle::before { border-style: dashed; }
.bc__ligne { display: flex; gap: var(--bc-gap); list-style: none; margin: 0; padding: 0; }
.bc__et { flex: 1 1 0; min-width: 0; position: relative; display: grid; grid-template-rows: var(--bc-ph) var(--bc-d) auto auto; align-content: start; }
.bc__corps { display: contents; }
.bc__corps p { max-width: none; }
.bc__et[data-suite]::after {
  content: ''; position: absolute; z-index: 1; top: calc(var(--bc-y) - 3px); left: calc(var(--bc-d) / 2);
  width: calc(100% + var(--bc-gap)); height: 6px; background: var(--bc-s);
}
.bc__st {
  grid-row: 2; position: relative; z-index: 2; display: grid; place-items: center;
  width: var(--bc-d); height: var(--bc-d); border-radius: 50%; background: var(--station); border: 3.5px solid var(--bc-c);
}
.bc__st svg { width: 0.85rem; height: 0.85rem; }
.bc__phase { grid-row: 1; margin: 0; align-self: start; font: 700 0.875rem/1.3 var(--sans); font-stretch: 106%; color: var(--bc-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc__quand { grid-row: 3; margin: 0.5rem 0 0.15rem; display: flex; flex-wrap: wrap; gap: 0 0.5rem; align-items: baseline; font-size: var(--step--1); line-height: 1.4; }
.bc__heure { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.bc__heure--mot { font-family: var(--sans); font-size: var(--step--1); }
.bc__qui { font-weight: 650; color: var(--bc-t); }
.bc__texte { grid-row: 4; margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); max-width: 32ch; }
.bc__et[data-attente] .bc__st { background: var(--l-info); }
.bc__et[data-attente] .bc__st::before { content: ''; width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--ink); }
.bc__et[data-attente] .bc__heure { color: var(--wait-text); font-weight: 600; }
.bc__et[data-ferme] .bc__st { background: var(--ink); color: var(--station); }
.bc__et[data-avenir] .bc__st { border-style: dashed; border-color: var(--rule-2); }
.bc__et[data-avenir] .bc__phase, .bc__et[data-avenir] .bc__qui { color: var(--ink-3); }
.bc__et[data-avenir] .bc__texte { color: var(--ink-3); font-style: italic; }
.bc__retour {
  position: absolute; left: calc(var(--bc-x) + 1.4rem); bottom: calc(1rem + 1.5px); transform: translateY(50%);
  max-width: calc(100% - var(--bc-x) - 4rem); margin: 0; padding: 0 0.6rem; background: var(--bc-fond);
  font-size: var(--step--1); line-height: 1.35; color: var(--ink-2);
}
.bc__retour strong { color: var(--ink); font-weight: 650; }
@container bc (max-width: 42rem) {
  .bc__boucle { --bc-w: 0.85rem; --bc-cy: calc(0.12rem + var(--bc-d) / 2); padding: 0 0 0 calc(var(--bc-w) + 0.2rem); }
  .bc__boucle::before { display: none; }
  .bc__ligne { display: block; }
  .bc__et { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); grid-template-rows: none; column-gap: 0.75rem; padding-bottom: 1.05rem; }
  .bc__corps { display: block; grid-column: 2; min-width: 0; }
  .bc__st { grid-column: 1; grid-row: 1; justify-self: center; margin-top: 0.12rem; }
  .bc__phase { margin: 0 0 0.1rem; white-space: normal; }
  .bc__phase--suite { display: none; }
  .bc__quand { margin: 0 0 0.1rem; }
  .bc__texte { max-width: none; }
  .bc__et[data-suite]::after { top: var(--bc-cy); left: calc(0.8rem - 3px); width: 6px; height: 100%; background: var(--bc-s); }
  .bc [data-suite='avenir'] { --bc-s: repeating-linear-gradient(180deg, var(--rule-2) 0 7px, transparent 7px 13px); }
  .bc__et::before { content: ''; position: absolute; left: calc(0.8rem - var(--bc-w) - 1.5px); top: 0; bottom: 0; border: 0 solid var(--bc-ret); border-left-width: 3px; }
  .bc[data-etat='ouvert'] .bc__et::before { border-style: dashed; }
  .bc__et:first-child::before { top: calc(var(--bc-cy) - 1.5px); width: calc(var(--bc-w) + 1.5px); border-top-width: 3px; border-top-left-radius: var(--bc-w); }
  .bc__et:last-child::before { top: calc(var(--bc-cy) - var(--bc-w) * 1.5); bottom: auto; height: calc(var(--bc-w) * 1.5 + 1.5px); width: calc(var(--bc-w) + 1.5px); border-bottom-width: 3px; border-bottom-left-radius: var(--bc-w); }
  .bc__et:last-child { padding-bottom: 0; }
  .bc__retour { position: static; transform: none; max-width: none; margin: 0.7rem 0 0 calc(-1 * (var(--bc-w) + 0.2rem)); padding: 0; background: none; }
}

/* Version compacte, une ligne : la petite boucle (quatre stations), le titre, l'état. */
.bc--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; }
.bc-mini-cadre { flex: none; display: flex; }
.bc-mini { flex: none; overflow: visible; }
.bc-mini__retour { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.bc-mini__retour--ouvert { stroke: var(--rule-2); stroke-dasharray: 2.4 2.4; }
.bc-mini__seg { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.bc-mini__seg--avenir { stroke-width: 2.2; stroke-dasharray: 2 2.6; }
.bc-mini__st { fill: var(--station); stroke-width: 2.2; }
.bc-mini__st--avenir { stroke-dasharray: 2 1.6; }
.bc-mini__st--attente { fill: var(--l-info); }
.bc-mini__st--ferme { fill: var(--ink); }
.bc__c { flex: 1 1 14rem; min-width: 0; }
.bc__c p { max-width: none; }
.bc__c-titre { margin: 0; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.bc__c-titre a { text-decoration: none; }
.bc__c-titre a:hover { text-decoration: underline; text-decoration-color: var(--rule-2); }
.bc__c-meta { margin: 0.1rem 0 0; }
.bc-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0; }
.bc-legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.bc-legende span::before { content: ''; width: 1rem; height: 5px; border-radius: 999px; background: var(--bc-c); }


/* ---- La ligne des passages : une station par passage, les noms à 45° ---- */
.lp-cadre { overflow-x: auto; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 0.4rem 0.75rem 0.2rem; }
.lp { display: block; max-width: none; height: auto; }
.lp__trait { fill: none; stroke: var(--l-sav); stroke-width: 6; stroke-linecap: round; }
.lp__trait--avenir { stroke: var(--rule-2); stroke-width: 4; stroke-dasharray: 2 8; }
.lp__st { fill: var(--station); stroke: var(--ink); stroke-width: 3; }
.lp__st--echec { fill: var(--l-heb-ink); stroke: var(--l-heb-ink); }
.lp__st--attention { fill: var(--wait-bg); stroke: var(--l-info-ink); stroke-width: 3; }
.lp__st--avenir { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 2.5; }
.lp__croix { stroke: var(--station); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.lp__nom { font: 620 13px var(--sans); fill: var(--ink); }
.lp__nom--avenir { fill: var(--ink-3); font-weight: 500; }
.lp__nom--echec { fill: var(--l-heb-ink); font-weight: 720; }
.lp__h { font: 500 12px var(--mono); fill: var(--ink-2); }
.lp__note { font: 500 11.5px var(--sans); fill: var(--ink-3); }
.lp__note--echec { fill: var(--l-heb-ink); font-weight: 700; }
.lp__note--attention { fill: var(--l-info-ink); font-weight: 650; }
.lp__now line { stroke: var(--l-pve); stroke-width: 2.5; stroke-linecap: round; }
.lp__now text { font: 650 12px var(--mono); fill: var(--l-pve); }
.lp__now .lp__now-s { font: 600 11.5px var(--sans); }
.lp__a { outline: none; }
.lp__a:hover .lp__nom { text-decoration: underline; }
.lp__a:hover .lp__st { stroke-width: 4; }
.lp__a:focus-visible .lp__nom { fill: var(--l-pve); text-decoration: underline; }
.lp__a:focus-visible circle { stroke: var(--l-pve); stroke-width: 4; }
.lp-liste { display: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem; }
.lp-liste .quand { margin-right: 0.35rem; }
.lp-liste__now { color: var(--l-pve); font-weight: 650; }
.lp-liste__now .quand { color: var(--l-pve); }
.lp-liste__note--echec { color: var(--l-heb-ink); font-weight: 650; }
.lp-liste__note--attention { color: var(--l-info-ink); font-weight: 650; }
.lp-liste li[data-etat='passe'] { color: var(--ink-3); }
@media (max-width: 40rem) {
  .lp-cadre { display: none; }
  .lp-liste { display: block; }
}



:root { --titre-2: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }

/* Le pied de page reste en bas, même sur une page courte. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .wrap { width: 100%; }

h1, h2 { text-wrap: balance; }

/* La rubrique allumée garde sa couleur : l'onglet ouvert. */
.onglets a[aria-current]::after { background: var(--rubrique, var(--line)); }

/* En-tête de page : un seul rendu pour toutes les rubriques. */
.tr-tete h1, .jn-tete h1, .ca-tete h1, .section-head h1 { margin-bottom: 0.35rem; }
.tr-tete .lede, .jn-tete .lede, .ca-tete .lede, .section-head .lede { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.jn-tete { align-items: flex-end; gap: 1rem 2rem; }

/* Titres de section : une seule taille, à l'encre, partout. */
h2, .tr-bloc h2, .ca-section__tete h2, .ca-plie--section > summary h2, .pj-titre, .obs__titre,
.vide-projet > h2, .vide-projet > div > h2 {
  font-size: var(--titre-2); font-weight: 720; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink);
}
.pj-titre .small { font-size: var(--step--1); }

/* Sections d'une page : le filet s'arrête au bord du contenu, l'écart reste mesuré. */
section.wrap + section.wrap { border-top: 0; position: relative; }
section.wrap + section.wrap::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule); }
/* Titre d'une carte (État, Dernière construction, Dépôt git) : sous les titres de section. */
.sheet__t { font-size: 1.25rem; font-stretch: 104%; }
section.pj ~ section.wrap { padding-block: clamp(1.5rem, 3vw, 2.2rem); }
section.pj ~ section.wrap .section-head { margin-bottom: 0.9rem; }

/* Le chiffre d'un onglet : la même pastille partout (projet, Accès, Journal, Connexions). */
.onglets a .pj-n, .onglets a .ca-compte, .onglets a .onglets__n {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: 0.35rem; padding: 0 0.35rem;
  border-radius: 999px; font: 700 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; vertical-align: 0.08em;
  background: var(--paper-2); color: var(--ink-2); box-shadow: none;
}
.onglets a .pj-n--bad, .onglets a .ca-compte--bad { background: var(--bad-bg); color: var(--bad-text); }
.onglets a .pj-n--wait, .onglets a .ca-compte--wait { background: var(--wait-bg); color: var(--wait-text); }

/* Tout dépliant porte le chevron de while, jamais le triangle du navigateur. Gardent leur propre dessin :
   le menu du compte, les sélecteurs d'un projet, les lignes du journal, d'À traiter et du projet, la fiche d'une personne, les versions,
   les dépliants en forme de bouton et le lien de la page de connexion. Spécificité nulle (:where) : une
   règle de rubrique l'emporte toujours. */
:where(details) > summary { list-style: none; cursor: pointer; }
:where(details) > summary::-webkit-details-marker { display: none; }
:where(details:not(.moi, .jn-e, .jn-export, .ca-plie--droite, .ac-pers, .pj-li, .tr-ligne, .tr-matin, .pj-v, .rattraper, .in-autre, .pj-choix) > summary:not(.btn))::before {
  content: ''; display: inline-block; flex: none; width: 0.42rem; height: 0.42rem; margin: 0 0.55rem 0 0.1rem; vertical-align: 0.16em;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s ease-out;
}
:where(details[open]:not(.moi, .jn-e, .jn-export, .ca-plie--droite, .ac-pers, .pj-li, .tr-ligne, .tr-matin, .pj-v, .rattraper, .in-autre, .pj-choix) > summary:not(.btn))::before {
  transform: translateY(-0.12rem) rotate(45deg);
}
:where(.tache-echec, .ca-plie--section) > summary::before { margin-right: 0; }
@media (prefers-reduced-motion: reduce) { :where(details) > summary::before { transition: none; } }

/* Dépliants seuls (« Créer un projet à la main », « Filtrer », « Voir les 6 »…) : le chevron devant, qui pivote. */
.pj-plus > summary, .ca-plie:not(.ca-plie--droite) > summary, .ca-pli__plus > summary, .jn-fins > summary, .tr-plus > summary,
.demarrage-suite > summary, details#creer > summary, .val-politique > summary, .val__force > summary, .org-plie > summary,
.al-plie > summary, .obs__promql > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px;
}
.demarrage-suite > summary::-webkit-details-marker, details#creer > summary::-webkit-details-marker, .val-politique > summary::-webkit-details-marker,
.val__force > summary::-webkit-details-marker, .org-plie > summary::-webkit-details-marker, .al-plie > summary::-webkit-details-marker,
.obs__promql > summary::-webkit-details-marker, .tr-plus > summary::-webkit-details-marker { display: none; }
.ca-plie:not(.ca-plie--droite) > summary::after, .ca-pli__plus > summary::after, .jn-fins > summary::after { content: none; }
.pj-plus > summary::before, .ca-plie:not(.ca-plie--droite) > summary::before, .ca-pli__plus > summary::before, .jn-fins > summary::before,
.tr-plus > summary::before, .demarrage-suite > summary::before, details#creer > summary::before, .val-politique > summary::before,
.val__force > summary::before, .org-plie > summary::before, .al-plie > summary::before, .obs__promql > summary::before {
  content: ''; flex: none; width: 0.42rem; height: 0.42rem; margin-inline: 0.05rem 0.1rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s ease-out;
}
.pj-plus[open] > summary::before, .ca-plie:not(.ca-plie--droite)[open] > summary::before, .ca-pli__plus[open] > summary::before,
.jn-fins[open] > summary::before, .tr-plus[open] > summary::before, .demarrage-suite[open] > summary::before, details#creer[open] > summary::before,
.val-politique[open] > summary::before, .val__force[open] > summary::before, .org-plie[open] > summary::before, .al-plie[open] > summary::before,
.obs__promql[open] > summary::before { transform: translateY(-0.12rem) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .pj-plus > summary::before, .ca-plie > summary::before, .ca-pli__plus > summary::before, .jn-fins > summary::before, .tr-plus > summary::before,
  .demarrage-suite > summary::before, details#creer > summary::before, .val-politique > summary::before, .val__force > summary::before,
  .org-plie > summary::before, .al-plie > summary::before, .obs__promql > summary::before { transition: none; }
}

/* Un bloc à copier : le texte passe à la ligne au lieu d'être coupé, le bouton reste à côté, centré. */
.copie, .etat-vide .copie, .ca-page .copie, .ca-phrase .copie, .pj-phrase .copie { align-items: center; }
.copie code, .etat-vide .copie code, .ca-phrase .copie code, .pj-phrase .copie code {
  min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
.copie button { flex: none; }
@media (max-width: 34rem) {
  .ca-page .copie, .etat-vide .copie { flex-direction: row; align-items: center; }
  .ca-page .copie button { align-self: center; }
}

/* La phrase pour l'agent : l'étiquette précédée du tiret bleu, la même largeur partout. */
.tr-phrase, .jn-phrase, .pj-phrase, .ca-phrase { display: grid; gap: 0.35rem; max-width: 46rem; min-width: 0; }
.tr-phrase .copie, .jn-phrase .copie, .pj-phrase .copie, .ca-phrase .copie { max-width: none; }
.tr-phrase__titre, .jn-phrase > p, .pj-phrase .etat-vide__etiquette {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font: 650 var(--step--1)/1.3 var(--sans); color: var(--ink-2);
}
.tr-phrase__titre::before, .jn-phrase > p::before, .pj-phrase .etat-vide__etiquette::before {
  content: ''; width: 0.8rem; height: 4px; border-radius: 999px; background: var(--l-pve);
}

/* Le mono reste aux données : un en-tête de colonne est un libellé. */
th.num { font-family: var(--sans); }
/* Le mono est plus petit d'œil : dans un texte déjà petit, il garde 12 px au moins. */
.small .mono, .small code, .ca-page .small code, .jn .fil__tete .quand, .jn-detail .mono { font-size: max(0.75rem, 0.88em); }

/* Journal : une phrase longue passe à la ligne sous elle-même, jamais sous l'heure. */
.jn .jn-e > summary.fil__tete { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; column-gap: 0.6rem; align-items: baseline; }
.jn-corps { min-width: 0; overflow-wrap: anywhere; }
.jn-corps .jn-qui { margin-right: 0.35rem; }
.jn-quoi .chip { vertical-align: 0.1em; }

/* Versions d'un projet : une ligne, la provenance s'abrège plutôt que de renvoyer le chevron à la ligne. */
.pj-v > summary { flex-wrap: nowrap; }
.pj-v > summary > .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Formulaires de filtre : le bouton a la hauteur des champs. */
.filtres .btn { min-height: 2.75rem; }

/* Liste des projets sur téléphone : une fiche par projet plutôt qu'un tableau écrasé ; le nom ouvre le projet. */
@media (max-width: 40rem) {
  table.projets, table.projets tbody, table.projets td { display: block; }
  table.projets thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.projets tr { display: grid; gap: 0.3rem; padding: 0.8rem 0.95rem; border-top: 1px solid var(--rule); }
  table.projets tbody tr:first-child { border-top: 0; }
  table.projets td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  table.projets td[data-vide] { display: none; }
  table.projets tr:hover td { background: none; }
}

/* Page de statut : alignée sur le fil d'Ariane comme les autres pages. */
.statut { max-width: var(--max); }
.statut > * { max-width: 46rem; }

/* Accès › Organisation : le budget, plus haut, occupe deux rangées ; pas de trou sous la carte voisine.
   Un réglage en ligne (« Garder 13 mois ») a des champs à la hauteur de son bouton. */
.ac-grille > #budget { grid-row: span 2; }
.ca-enligne input, .ca-enligne select { padding-block: 0.3rem; font-size: 0.9375rem; }

/* Connexions : la carte d'un appel refusé garde son retrait ; dans la colonne étroite d'une connexion, le
   bouton Copier passe sous la phrase et les intitulés au-dessus de leurs valeurs. */
.ca-page section.cx-signal { padding-block: 0.9rem; }
.cx-cote .copie { flex-direction: column; align-items: stretch; }
.cx-cote .copie button { align-self: flex-start; }
.cx-cote dl.faits { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
.cx-cote dl.faits dd + dt { margin-top: 0.45rem; }

/* Onglets trop nombreux pour la largeur : ils passent à la ligne. Un projet n'en a plus : ses rubriques et
   leurs sous-pages sont dans la barre latérale (src/ui/layout.ts). */
.onglets { flex-wrap: wrap; overflow: visible; row-gap: 0; }
@media (max-width: 34rem) {
  .onglets { column-gap: 1.1rem; }
}

/* Lien d'évitement : le premier arrêt du clavier, visible seulement quand il a le focus. */
.evitement {
  position: absolute; z-index: 40; left: var(--gutter); top: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--sheet); font: 650 0.9375rem/1.2 var(--sans); text-decoration: none;
  transform: translateY(calc(-100% - 1rem)); transition: transform .15s ease-out;
}
.evitement:focus { transform: none; }
main:focus { outline: none; }

/* Sur l'encre (pied de page, barre et lignes des journaux), l'anneau du focus passe au bleu clair : 7,6:1. */
footer.bas :focus-visible, .journal-barre :focus-visible, .journal :focus-visible, .journal-ligne-copier:focus-visible {
  outline-color: var(--focus-encre);
}


/* Une action en deux temps, sans script : « Révoquer », puis « Oui, révoquer » et « Annuler » sur place. */
.ca-confirme { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 0.4rem; vertical-align: middle; }
.ca-confirme > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.ca-confirme > summary::-webkit-details-marker { display: none; }
.ca-confirme__annuler, .ca-confirme[open] .ca-confirme__ouvrir { display: none; }
.ca-confirme[open] .ca-confirme__annuler { display: inline; }
.ca-confirme__oui { background: var(--l-heb-ink); border-color: var(--l-heb-ink); color: var(--sheet); white-space: nowrap; }
.ca-confirme__oui:hover { background: var(--bad-text); border-color: var(--bad-text); }

/* Jetons : la raison du « à revoir » sous le nom. */
.ac-jeton__nom { display: block; }
.ac-jeton__sous { display: block; margin-top: 0.15rem; }
.ac-jeton__raison { display: block; margin-top: 0.2rem; color: var(--l-info-ink); font-size: 0.8125rem; font-weight: 600; }
.ac-rv__jetons td:last-child { white-space: nowrap; }

/* Validations : la conséquence, le pourquoi, deux décisions au même poids, le détail technique replié. */
.val__consequence { margin: 0; padding: 0.55rem 0.8rem; border-radius: 8px; background: var(--bad-bg); color: var(--bad-text); line-height: 1.45; max-width: 72ch; }
.val__consequence[data-reversible] { background: color-mix(in srgb, var(--l-info) 18%, var(--sheet)); color: var(--ink); }
.val__consequence strong { font-weight: 720; }
.val__pourquoi { margin: 0; max-width: 72ch; }
.val__pourquoi span { font-weight: 650; }
.val__boutons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.val__boutons .btn { min-width: 7.5rem; justify-content: center; }
.val-technique > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.val-technique[open] > summary { margin-bottom: 0.6rem; }
.val-technique .journal { margin-top: 0.6rem; }

/* Budget : un tableau qui tient, montants sans retour à la ligne. */
.ac-budget__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ac-budget__table th { font-size: 0.75rem; font-weight: 650; color: var(--ink-3); text-align: left; padding: 0 0 0.3rem; border-bottom: 1px solid var(--rule); background: none; }
.ac-budget__table td { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.ac-budget__table tr:last-child td { border-bottom: 0; }
.ac-budget__table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 0.9rem; }
.ac-budget__table td:first-child { overflow-wrap: anywhere; }
.ac-budget__unites { margin: 0; }

/* Conservation du journal : la conséquence à côté du champ, la confirmation quand elle baisse. */
.ac-conservation { display: grid; gap: 0.5rem; }
.ac-conservation__effet { margin: 0; max-width: 46ch; }
.ac-conservation__confirme { display: grid; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: var(--bad-bg); color: var(--bad-text); }
.ac-conservation__confirme p { margin: 0; }
.ac-conservation__confirme .ca-enligne { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Canaux : l'option indisponible et son avertissement, dans le formulaire. */
.ac-canal-note { margin: 0; }

/* Connexions : le formulaire de déclaration s'ouvre depuis le bouton d'en-tête (#declarer), sans script. */
.cx-declarer-zone:not(:target):not([data-ouvert]) { display: none; }
.cx-declarer-zone { scroll-margin-top: 5rem; }
.cx-declarer-zone h2 { margin: 0; font-size: 1.15rem; }

/* Journal : la légende des couleurs, les noms d'agent, le détail technique replié. */
.jn-legende { margin: 0.2rem 0 0.4rem; color: var(--ink-2); }
.jn-legende li::before { width: 0.65rem; height: 0.65rem; }
.jn-technique > summary { cursor: pointer; font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.4rem; }
.jn-technique dl { margin-top: 0.4rem; }
.jn-supprime { color: var(--ink-3); }

/* Connexion : l'accès d'administration replié. */
.connexion__admin > summary { cursor: pointer; font-size: 0.8125rem; color: var(--ink-3); }


/* Versions : la date ne se coupe jamais ; la source cède la place ; l'erreur d'une version échouée dessous. */
.pj-v > summary { flex-wrap: wrap; }
.pj-v__quand { flex: none; font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pj-v > summary > .pj-v__qui { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-v__err { order: 10; flex: 1 1 100%; min-width: 0; margin: 0.1rem 0 0; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bad-text); }
.pj-v__aide { margin: 0.35rem 0 0; max-width: 52ch; }
.pj-v__actions { align-items: flex-start; flex-direction: column; gap: 0.35rem; }

/* L'adresse git se coupe après ses « / » (<wbr>), jamais au milieu d'un mot. */
.pj-git { overflow-wrap: normal; word-break: normal; }

/* Courbes : une série en pointillé (p99) se lit sans la couleur ; sa légende aussi. */
.c__legende li[data-pointille]::before { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

/* Logs : le choix de la source (services, base), un contrôle segmenté posé sur le journal. */
.pj-sources { margin: 0; }


:root { --barre-l: 15.5rem; --l-pve-clair: #8fb3f5; --sur-encre: color-mix(in srgb, var(--on-ink) 9%, transparent); --sur-encre-2: color-mix(in srgb, var(--on-ink) 15%, transparent); --trait-encre: color-mix(in srgb, var(--on-ink) 17%, transparent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- La barre ---- */
.barre {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0.7rem 0.7rem;
  background: var(--ink); color: var(--on-ink); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--trait-encre) transparent;
}
.barre :focus-visible { outline-color: var(--focus-encre); }
.barre ::selection { background: var(--l-info); color: var(--ink); }
.barre__haut { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.15rem 0.45rem 0.55rem; }
.barre .brand { color: var(--sheet); font-size: 1.25rem; }
.barre__fermer {
  display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--on-ink-2); cursor: pointer;
}
.barre__fermer:hover { background: var(--sur-encre); color: var(--on-ink); }
.barre svg, .coq-tete svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Rechercher : un champ qui n'en est pas un, le raccourci au bout. */
.barre .recherche {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; margin: 0 0 0.6rem; padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  border: 1px solid var(--trait-encre); border-radius: 8px; background: var(--sur-encre); color: var(--on-ink-2);
  font: 560 0.9375rem/1.3 var(--sans); cursor: pointer; text-align: left; transition: border-color .15s ease-out, color .15s ease-out;
}
.barre .recherche:hover { border-color: color-mix(in srgb, var(--on-ink) 35%, transparent); color: var(--on-ink); }
.recherche__texte { flex: 1; }
.barre .recherche kbd {
  padding: 0.15rem 0.35rem; font: 500 0.75rem/1.1 var(--mono); color: var(--on-ink-2); background: transparent;
  border: 1px solid var(--trait-encre); border-bottom-width: 2px; border-radius: 5px; white-space: nowrap;
}

/* Liens (À traiter, Journal, Organisation) : un tiret de la couleur de leur ligne. Le dessin du lien est
   commun avec les stations du projet, plus bas. */
.barre__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.barre__liste > li { position: relative; }
.barre__lien::before { content: ''; flex: none; width: 0.75rem; height: 4px; border-radius: 999px; background: var(--dash, var(--on-ink-2)); }
.barre__lien[aria-current]::before { width: 1.05rem; }
.barre .nav-pastille { margin-left: auto; }
.nav-pastille {
  display: inline-block; min-width: 1.35rem; padding: 0.2rem 0.38rem; text-align: center;
  border-radius: 999px; background: var(--l-info); color: var(--ink); font: 700 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums;
}

/* Groupe ORGANISATION : un titre, quatre entrées. */
.barre__groupe { margin-top: 0.85rem; }
.barre__titre {
  display: flex; align-items: center; min-height: 1.9rem; padding: 0 0.6rem; border-radius: 6px;
  font: 680 0.75rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-2); text-decoration: none;
}
.barre__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre__n {
  display: inline-grid; place-items: center; flex: none; min-width: 1.3rem; height: 1.3rem; margin-left: auto; padding: 0 0.34rem;
  border-radius: 999px; background: var(--sur-encre-2); color: var(--on-ink); font: 700 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums;
}
.barre__n--bad { background: var(--l-heb); color: var(--ink); }
.barre__n--wait { background: var(--l-info); color: var(--ink); }

/* ---- Le bloc du projet : « Organisation / projet », puis l'environnement. Les menus se déplient dans la barre. ---- */
.barre__projet { margin-top: 0.85rem; }
.barre__bloc { border: 1px solid var(--trait-encre); border-radius: 10px; background: color-mix(in srgb, var(--on-ink) 5%, transparent); }
.barre__bloc--ici { border-color: color-mix(in srgb, var(--on-ink) 34%, transparent); }
.barre__choix > summary, .barre__env > summary, .barre__env--seul {
  display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.4rem 0.6rem; border-radius: 9px;
  color: var(--on-ink); font: 560 0.9375rem/1.25 var(--sans); transition: background-color .12s ease-out;
}
.barre__choix > summary::before, .barre__env > summary::before { content: none; }
.barre__choix > summary:hover, .barre__env > summary:hover, .barre__choix[open] > summary, .barre__env[open] > summary { background: var(--sur-encre); }
.barre__choix-texte { display: flex; align-items: baseline; flex: 1; min-width: 0; }
.barre__choix-org { flex: 0 3 auto; min-width: 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-ink-2); font-weight: 540; }
.barre__choix-sep { flex: none; margin: 0 0.35rem; color: var(--on-ink-2); }
.barre__choix-nom { flex: 0 1 auto; min-width: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sheet); font-weight: 700; }
.barre__chevron { margin-left: auto; color: var(--on-ink-2); transition: transform .15s ease-out; }
.barre details[open] > summary .barre__chevron { transform: rotate(180deg); }
.barre__env, p.barre__env--seul { margin: 0; border-top: 1px solid var(--trait-encre); }
.barre__env > summary { border-radius: 0 0 9px 9px; font-size: 0.875rem; min-height: 2.25rem; }
.barre__env[open] > summary { border-radius: 0; }
.barre__env--seul { font-size: 0.875rem; min-height: 2.25rem; border-radius: 0 0 9px 9px; color: var(--on-ink-2); }
.barre__env-pt { flex: none; width: 0.625rem; height: 0.625rem; margin-inline: 0.0625rem; border-radius: 50%; background: var(--l-sav); }
.barre__env-pt[data-kind='preview'] { background: var(--l-con); }
.barre__env-pt[data-kind='staging'] { background: var(--l-info); }
.barre__env-pt[data-veille] { background: transparent; box-shadow: inset 0 0 0 2px var(--on-ink-2); }

.barre__menu { display: grid; gap: 1px; padding: 0.3rem; border-top: 1px solid var(--trait-encre); }
.barre__menu-titre { margin: 0; padding: 0.4rem 0.5rem 0.2rem; font: 650 0.75rem/1.3 var(--sans); color: var(--on-ink-2); }
.barre__menu-vide { margin: 0; padding: 0.45rem 0.5rem; font-size: 0.875rem; color: var(--on-ink-2); }
.barre__menu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.barre__menu-liste a {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.1rem; padding: 0.3rem 0.5rem; border-radius: 6px;
  color: var(--on-ink); text-decoration: none; font: 560 0.9375rem/1.3 var(--sans);
}
.barre__menu-liste a:hover { background: var(--sur-encre-2); }
.barre__menu-liste a[aria-current] { background: var(--sur-encre-2); color: var(--sheet); font-weight: 680; }
.barre__menu-detail { margin-left: auto; padding-left: 0.4rem; font-size: 0.75rem; color: var(--on-ink-2); white-space: nowrap; }
.barre__menu-liste a[aria-current] .barre__menu-detail { color: var(--on-ink); }
.barre__menu-liste--actions { margin-top: 0.15rem; padding-top: 0.25rem; border-top: 1px solid var(--trait-encre); }
.barre__menu-liste--actions a { color: var(--on-ink-2); font-weight: 540; }
.barre__menu-liste--actions a:hover { color: var(--on-ink); }
.barre__menu-liste--actions svg { width: 0.95rem; height: 0.95rem; }
.barre__filtre { padding: 0.15rem 0.1rem 0.25rem; }
.barre__filtre input {
  width: 100%; padding: 0.4rem 0.55rem; border: 1px solid var(--trait-encre); border-radius: 6px; background: var(--ink);
  color: var(--on-ink); font: 500 0.875rem/1.3 var(--sans); caret-color: var(--l-info);
}
.barre__filtre input::placeholder { color: var(--on-ink-2); }
.barre__filtre input:focus-visible { outline: 2px solid var(--focus-encre); outline-offset: 0; border-color: transparent; }
/* Le point d'un projet dit son état ; un incident est un losange (pas seulement une couleur). */
.barre__point { position: relative; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ink); border: 2px solid var(--on-ink-2); }
.barre__point--ok { background: var(--l-sav); border-color: var(--l-sav); }
.barre__point--attente { background: var(--l-info); border-color: var(--l-info); }
.barre__point--alerte { background: var(--l-heb); border-color: var(--l-heb); border-radius: 2px; transform: rotate(45deg) scale(0.9); }

/* ---- Le menu du projet : une branche de ligne de métro ----
   Chaque rubrique est une station sur la ligne orange (celle des projets) ; la station ouverte est pleine.
   Ses sous-pages partent sur un embranchement à 45°, en petites stations. Géométrie : le centre des
   stations (et des tirets des autres entrées) est à 0,975rem du bord du lien, à mi-hauteur d'un lien de
   2,25rem ; l'embranchement descend de 1,25rem vers la droite, à 45°. */
.metro { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; }
.metro__st { position: relative; }
.metro__st:not(:last-child)::before {
  content: ''; position: absolute; left: calc(0.975rem - 2px); top: 1.125rem; width: 4px; height: 100%; border-radius: 999px; background: var(--l-heb);
}
.metro__lien, .barre__lien {
  position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0.35rem 0.6rem; border-radius: 8px;
  color: var(--on-ink); text-decoration: none; font: 560 0.9375rem/1.3 var(--sans); transition: background-color .12s ease-out;
}
.metro__lien:hover, .barre__lien:hover { background: var(--sur-encre); }
.metro__lien[aria-current], .barre__lien[aria-current] { background: var(--sur-encre-2); color: var(--sheet); font-weight: 680; }
.metro__pt {
  position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--l-heb); transition: transform .15s ease-out;
}
.metro__st--ici > .metro__lien .metro__pt { background: var(--l-heb); transform: scale(1.2); box-shadow: 0 0 0 2px var(--ink); }
.metro__lien:hover .metro__pt { transform: scale(1.15); }

/* Les sous-pages : l'embranchement, puis une petite station par page. */
.sous { position: relative; list-style: none; margin: 0 0 0.2rem; padding: 0; display: grid; }
.sous::before {
  content: ''; position: absolute; left: calc(2.225rem - 1.5px); top: 0.05rem; bottom: 0.9rem; width: 3px; border-radius: 999px; background: var(--c);
}
.sous::after {
  content: ''; position: absolute; left: 0.975rem; top: calc(-1.125rem - 1.5px); width: 1.7678rem; height: 3px; border-radius: 999px;
  background: var(--c); transform-origin: 0 50%; transform: rotate(45deg);
}
.sous__lien {
  display: flex; align-items: center; gap: 0.55rem; min-height: 1.8rem; padding: 0.15rem 0.6rem 0.15rem 1.95rem; border-radius: 7px;
  color: var(--on-ink-2); text-decoration: none; font: 540 0.875rem/1.25 var(--sans); transition: background-color .12s ease-out, color .12s ease-out;
}
.sous__lien:hover { background: var(--sur-encre); color: var(--on-ink); }
.sous__lien[aria-current] { color: var(--sheet); font-weight: 650; background: var(--sur-encre-2); }
.sous__pt { position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); border: 2px solid var(--c); }
.sous__lien[aria-current] .sous__pt { background: var(--c); transform: scale(1.25); box-shadow: 0 0 0 2px var(--ink); }
.sous .barre__n { min-width: 1.15rem; height: 1.15rem; font-size: 0.6875rem; }

/* L'avatar, en bas : Mon compte et Se déconnecter. Le menu s'ouvre vers le haut. */
.barre > .moi { position: relative; margin-top: auto; padding-top: 0.7rem; }
.barre > .moi::before { content: ''; display: block; height: 1px; margin: 0 0.6rem 0.6rem; background: var(--trait-encre); }
.moi > summary { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.5rem; border-radius: 8px; transition: background-color .12s ease-out; }
.moi > summary::before { content: none; }
.moi > summary:hover, .moi[open] > summary { background: var(--sur-encre); }
.moi__av {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sheet); color: var(--ink); font: 700 0.875rem/1 var(--sans); font-stretch: 108%;
}
.moi__qui { display: grid; min-width: 0; line-height: 1.3; }
.moi__nom-court { font: 620 0.9375rem/1.3 var(--sans); color: var(--on-ink); }
.moi__email { font-size: 0.75rem; color: var(--on-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moi__menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 0.35rem); z-index: 30; display: grid; gap: 0.1rem; padding: 0.4rem;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 10px;
  box-shadow: 0 1px 1px rgba(16,33,58,.05), 0 14px 32px -16px rgba(0,0,0,.55);
}
.moi__menu :focus-visible { outline-color: var(--focus); }
.moi__menu a, .moi__sortir {
  display: block; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 6px; background: none; cursor: pointer;
  text-align: left; text-decoration: none; color: var(--ink); font: 560 0.9375rem/1.3 var(--sans);
}
.moi__menu a:hover, .moi__sortir:hover { background: var(--paper); }
.moi__menu a[aria-current] { font-weight: 680; }
.moi__menu form { margin: 0; }

/* ---- Ordinateur : la barre à gauche, permanente ---- */
@media (min-width: 60rem) {
  html.coq > body { display: grid; grid-template-columns: var(--barre-l) minmax(0, 1fr); align-items: start; }
  html.coq > body > .barre { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100dvh; }
  html.coq > body > .coq-page { grid-column: 2; grid-row: 1; }
  .coq-tete, .coq-voile, .coq-bas { display: none !important; }
}
.coq-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; min-width: 0; }
.coq-page > main { flex: 1 0 auto; }

/* ---- Tablette et téléphone : la barre en tiroir ---- */
.coq-tete { display: none; }
@media (max-width: 59.99rem) {
  .coq-tete { display: flex; align-items: center; gap: 0.25rem; min-height: 3.25rem; padding: 0 calc(var(--gutter) - 0.6rem); padding-top: env(safe-area-inset-top, 0px); }
  .coq-tete__menu, .coq-tete__chercher {
    display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--ink); cursor: pointer;
  }
  .coq-tete__menu:hover, .coq-tete__chercher:hover { background: var(--paper-2); }
  .coq-tete__menu { position: relative; }
  .coq-tete__point { position: absolute; top: 0.55rem; right: 0.45rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--l-info); box-shadow: 0 0 0 2px var(--paper); }
  .coq-tete svg { width: 1.35rem; height: 1.35rem; }
  .coq-tete__lieu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.0625rem/1.2 var(--sans); font-stretch: 106%; }
  .coq-tete__lieu::before { content: ''; display: inline-block; width: 0.8rem; height: 4px; margin-right: 0.5rem; vertical-align: 0.2em; border-radius: 999px; background: var(--rubrique, var(--line)); }
  /* Dans un projet : la pastille de l'environnement remplace le tiret (vert la production, turquoise une prévisualisation). */
  .coq-tete__lieu:has(.coq-tete__env)::before { content: none; }
  .coq-tete__env { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; vertical-align: 0.05em; border-radius: 50%; background: var(--l-sav); }
  .coq-tete__env[data-kind='preview'] { background: var(--l-con); }
  .coq-tete__env[data-kind='staging'] { background: var(--l-info); }
  html.coq > body > .barre {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(19rem, 86vw);
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%); visibility: hidden; transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 18px 0 40px -20px rgba(16,33,58,.6);
  }
  html.tiroir-ouvert > body > .barre { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  html.tiroir-ouvert { overflow: hidden; }
  .barre__fermer { display: inline-grid; }
  .coq-voile { position: fixed; inset: 0; z-index: 45; background: rgba(16,33,58,.42); }
  .coq-voile[hidden] { display: none; }
}

/* ---- Téléphone : quatre entrées en bas ---- */
.coq-bas { display: none; }
@media (max-width: 40rem) {
  html.coq > body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
  .coq-bas {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--rule);
    background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  }
  .coq-bas a, .coq-bas button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 3.6rem; padding: 0.45rem 0.2rem 0.4rem; border: 0; background: transparent; cursor: pointer;
    color: var(--ink-2); text-decoration: none; font: 600 0.8125rem/1.15 var(--sans);
  }
  .coq-bas a::before, .coq-bas button::before { content: ''; width: 1rem; height: 4px; border-radius: 999px; background: var(--dash, var(--rule-2)); transition: width .15s ease-out; }
  .coq-bas [aria-current] { color: var(--ink); font-weight: 720; }
  .coq-bas [aria-current]::before { width: 1.9rem; }
  .coq-bas__nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .coq-bas .nav-pastille { position: absolute; top: 0.2rem; left: calc(50% + 0.85rem); min-width: 1.2rem; padding: 0.18rem 0.32rem; font-size: 0.6875rem; }
  .coq-tete__point { display: none; }
  .toasts { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
}

/* Le pied de page, sous le contenu : discret, à côté de la barre d'encre. */
.coq-page > footer.bas { background: transparent; color: var(--ink-3); border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 1.4rem; }
.coq-page > footer.bas a { color: var(--ink-2); }
.coq-page > footer.bas :focus-visible { outline-color: var(--focus); }

@media (prefers-reduced-motion: reduce) {
  html.coq > body > .barre, html.tiroir-ouvert > body > .barre, .barre__chevron, .coq-bas a::before, .coq-bas button::before, .metro__pt { transition: none; }
}