/* Bastide Console — feuille des composants, recopiée du système de design (bundle.css du 23/09/2026).
   Tirée de la variante E du canevas « Console Bastide » : couleur.css et les styles des planches, en classes.
   Toutes les couleurs viennent des jetons ; une teinte locale se passe par --teinte sur l'élément. */

:root, [data-theme="sombre"] { --goutte: 0.2; --melange: screen; --voile-carte: 74%; --halo: 12%; }
[data-theme="clair"] { --goutte: 0.11; --melange: multiply; --voile-carte: 80%; --halo: 8%; }

@keyframes c-roue { to { transform: rotate(360deg); } }
@keyframes derive-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, 10%) scale(1.15); } 100% { transform: translate(-6%, 18%) scale(0.92); } }
@keyframes derive-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-16%, 14%) scale(0.9); } 100% { transform: translate(8%, -6%) scale(1.12); } }
@keyframes derive-c { 0% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(-12%, -14%) scale(1.1); } 100% { transform: translate(10%, 8%) scale(1); } }

body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }

/* ── Icône ─────────────────────────────────────────────────────────────────── */
.c-icone { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Bouton ────────────────────────────────────────────────────────────────── */
.c-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--rayon-controle);
  border: 1px solid var(--bord-fort); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--encre);
  font: 500 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.c-bouton:hover { border-color: var(--bord-controle); background: var(--surface-2); }
.c-bouton .c-icone { width: 15px; height: 15px; }
.c-vif { border: 0; background: linear-gradient(120deg, var(--glacier), var(--violet)); color: var(--sur-vif); font-weight: 600; }
.c-vif:hover { filter: brightness(1.08); background: linear-gradient(120deg, var(--glacier), var(--violet)); }
.c-petit { height: 32px; padding: 0 12px; font-size: 13.5px; }
.c-grand { height: 46px; padding: 0 18px; font-size: 15px; }
.c-bouton:disabled, .c-bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ── Statut : une pastille teintée, un point lumineux, toujours un mot ─────── */
.c-statut {
  --teinte: var(--encre-3);
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--rayon-pilule);
  background: color-mix(in srgb, var(--teinte) 13%, transparent); color: var(--teinte);
  font: 600 12.5px/1 var(--font-sans); white-space: nowrap;
}
.c-statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 8px var(--teinte); flex-shrink: 0; }
.c-statut-pret { --teinte: var(--menthe); }
.c-statut-cours { --teinte: var(--glacier); }
.c-statut-epingle { --teinte: var(--violet); }
.c-statut-attention { --teinte: var(--ambre); }
.c-statut-arret { --teinte: var(--corail); }
.c-statut-neutre { background: var(--surface-2); color: var(--encre-2); }
.c-statut-neutre::before { background: var(--encre-3); box-shadow: none; }
.c-statut-cours::before, .c-roue {
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; background: none; box-shadow: none; flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--glacier) 30%, transparent); border-top-color: var(--glacier);
  animation: c-roue 0.9s linear infinite;
}

/* ── Pilule : formule, environnement, compte ───────────────────────────────── */
.c-pilule {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--rayon-pilule);
  border: 1px solid var(--bord-fort); font: 400 12px/1 var(--font-sans); color: var(--encre-2); white-space: nowrap;
}
.c-pilule-vive {
  border-color: transparent; font-weight: 600; color: var(--encre);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--glacier), var(--violet)) border-box;
}
.c-compteur {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--rayon-pilule);
  background: linear-gradient(120deg, var(--glacier), var(--violet)); color: var(--sur-vif); font: 700 11.5px/1 var(--font-sans);
}

/* ── Icône de projet et tuile ──────────────────────────────────────────────── */
.c-icone-projet {
  --teinte: var(--glacier); --taille: 36px;
  width: var(--taille); height: var(--taille); flex-shrink: 0; display: grid; place-items: center; border-radius: calc(var(--taille) * 0.28);
  background: linear-gradient(140deg, color-mix(in srgb, var(--teinte) 70%, white), var(--teinte)); color: var(--sur-vif);
  font: 700 calc(var(--taille) * 0.42)/1 var(--font-sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -10px var(--teinte);
}
.c-tuile {
  --teinte: var(--glacier); --taille: 28px;
  width: var(--taille); height: var(--taille); flex-shrink: 0; display: grid; place-items: center; border-radius: calc(var(--taille) * 0.28);
  background: color-mix(in srgb, var(--teinte) 15%, transparent); color: var(--teinte);
}
.c-tuile .c-icone { width: calc(var(--taille) * 0.54); height: calc(var(--taille) * 0.54); }

/* ── Carte : translucide, la couleur du fond passe dessous ─────────────────── */
.c-carte, .c-verre {
  background: color-mix(in srgb, var(--surface) var(--voile-carte), transparent);
  -webkit-backdrop-filter: blur(var(--flou-carte)) saturate(150%); backdrop-filter: blur(var(--flou-carte)) saturate(150%);
}
.c-carte { border: 1px solid var(--bord); border-radius: var(--rayon-carte); }
.c-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--bord); }
.c-carte-tete h2, .c-carte-tete h3 { margin: 0; font-size: 14px; font-weight: 600; }
.c-carte-halo {
  --teinte: var(--glacier);
  background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--teinte) var(--halo), transparent), transparent 70%), color-mix(in srgb, var(--surface) var(--voile-carte), transparent);
}
/* Le bord en dégradé est dessiné par un masque : le fond de la carte reste translucide. */
.c-bord-degrade { position: relative; border: 0; }
.c-bord-degrade::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, var(--glacier), var(--violet) 55%, var(--rose));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.c-production { border-radius: var(--rayon-carte); box-shadow: var(--ombre-production), 0 0 0 4px color-mix(in srgb, var(--violet) 5%, transparent); }

/* ── Enceinte : trois coins, le passage bas-gauche ouvert, un lot en dégradé ── */
.c-enceinte { position: relative; }
.c-coin { position: absolute; width: 14px; height: 14px; border: 0 solid var(--encre-3); pointer-events: none; }
.c-coin-hg { left: -8px; top: -8px; border-width: 1.5px 0 0 1.5px; }
.c-coin-hd { right: -8px; top: -8px; border-width: 1.5px 1.5px 0 0; }
.c-coin-bd { right: -8px; bottom: -8px; border-width: 0 1.5px 1.5px 0; }
.c-lot { position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: linear-gradient(120deg, var(--glacier), var(--violet)); pointer-events: none; }

/* ── Fond vivant : cinq gouttes fondues qui dérivent de 38 à 52 s ──────────── */
.c-fond-vivant { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.c-goutte {
  position: absolute; border-radius: 50%; opacity: var(--goutte); mix-blend-mode: var(--melange); filter: blur(48px);
  background: radial-gradient(closest-side, var(--teinte), color-mix(in srgb, var(--teinte) 35%, transparent) 55%, transparent);
  animation: var(--derive) var(--duree) ease-in-out infinite alternate; will-change: transform;
}

/* ── Barre de contexte et onglets ──────────────────────────────────────────── */
.c-entete { border-bottom: 1px solid var(--bord); background: color-mix(in srgb, var(--fond) 45%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.c-contexte { height: var(--barre-contexte); display: flex; align-items: center; gap: 10px; padding: 0 24px; }
.c-contexte-sep { color: var(--bord-controle); font-size: 20px; font-weight: 300; }
.c-contexte-lien { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 2px; color: var(--encre); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-onglets { display: flex; gap: 2px; padding: 0 14px; }
.c-onglet { position: relative; display: flex; align-items: center; height: var(--barre-onglets); padding: 0 10px; font: 400 14px var(--font-sans); color: var(--encre-2); text-decoration: none; white-space: nowrap; }
.c-onglet:hover { color: var(--encre); }
.c-onglet[aria-current="page"] { color: var(--encre); font-weight: 600; }
.c-onglet[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(120deg, var(--glacier), var(--violet)); }

/* ── Segments ──────────────────────────────────────────────────────────────── */
.c-segments { display: flex; gap: 2px; padding: 3px; width: fit-content; border-radius: var(--rayon-segments); border: 1px solid var(--bord); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.c-segment { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--encre-2); font: 400 13.5px var(--font-sans); cursor: pointer; }
.c-segment[aria-selected="true"] { background: var(--surface-2); color: var(--encre); font-weight: 600; box-shadow: 0 0 0 1px var(--bord-fort); }
.c-segment .c-point { width: 7px; height: 7px; border-radius: 50%; background: var(--teinte); }

/* ── Champ ─────────────────────────────────────────────────────────────────── */
.c-libelle { display: flex; flex-direction: column; gap: 6px; font: 400 13px var(--font-sans); color: var(--encre-2); }
.c-libelle-mono { font-family: var(--font-mono); font-size: 12.5px; }
.c-champ {
  box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; border-radius: var(--rayon-controle);
  border: 1px solid var(--bord-fort); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--encre); font: 400 14px var(--font-sans);
}
.c-champ::placeholder { color: var(--encre-3); }
.c-champ-attention { border-color: var(--ambre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambre) 18%, transparent); }

/* ── Jauge ─────────────────────────────────────────────────────────────────── */
.c-jauge { --teinte: var(--glacier); height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.c-jauge > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--teinte) 45%, transparent), var(--teinte)); }
.c-empile { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.c-empile > span { display: block; background: var(--teinte); }

/* ── Origine : un agent et son mandant, une personne, la forge ─────────────── */
.c-origine { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--font-sans); color: var(--encre-2); white-space: nowrap; }
.c-origine b { color: var(--encre); font-weight: 600; }
.c-agent-marque { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: color-mix(in srgb, var(--violet) 16%, transparent); }
.c-agent-marque svg { width: 13px; height: 13px; fill: var(--violet); }
.c-avatar {
  --teinte: var(--rose);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(140deg, color-mix(in srgb, var(--teinte) 60%, white), var(--teinte)); color: var(--sur-vif); font: 700 9px/1 var(--font-sans);
}
.c-forge { font-family: var(--font-mono); font-size: 12.5px; }
.c-personne { color: var(--encre); }

/* ── Citation : un texte d'agent ou du dépôt, avec sa source ───────────────── */
.c-cite { margin: 0; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid var(--bord); overflow: hidden; }
.c-cite figcaption { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--bord); font: 400 12px var(--font-sans); color: var(--encre-3); }
.c-cite blockquote { margin: 0; padding: 10px 12px; font: 400 13.5px/1.55 var(--font-sans); color: var(--encre); }

/* ── Menu ──────────────────────────────────────────────────────────────────── */
.c-menu { padding: 6px; border-radius: var(--rayon-menu); border: 1px solid var(--bord-fort); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--ombre-menu); }
.c-menu-ligne { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--rayon-controle); background: transparent; color: var(--encre); font: 400 14px var(--font-sans); text-align: left; cursor: pointer; }
.c-menu-ligne:hover, .c-menu-ligne:focus-visible { background: var(--surface-2); }
.c-menu-ligne > .c-icone { color: var(--teinte, var(--encre-2)); }
.c-menu-ligne kbd { margin-left: auto; font: 400 12.5px var(--font-mono); color: var(--encre-3); }

/* ── Texte en dégradé ──────────────────────────────────────────────────────── */
.c-texte-degrade { background: linear-gradient(120deg, var(--glacier), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .c-goutte, .c-statut-cours::before, .c-roue { animation: none; }
}

/* ── Dialogue : l'élément <dialog> du navigateur, en verre, bord en dégradé ── */
.c-dialogue {
  /* `.c-bord-degrade` pose `position: relative`, qui écraserait le `fixed` du navigateur. */
  position: fixed; inset: 0; height: fit-content;
  width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; box-sizing: border-box;
  margin: auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px;
  border-radius: var(--rayon-modale); color: var(--encre);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: var(--ombre-modale), 0 24px 70px -30px color-mix(in srgb, var(--violet) 40%, transparent);
}
.c-dialogue:not([open]) { display: none; }
.c-dialogue::backdrop { background: color-mix(in srgb, var(--fond) 62%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.c-dialogue-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.c-dialogue-tete h2 { margin: 0; font: 600 22px/1.25 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.c-dialogue-fermer {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--bord); border-radius: var(--rayon-controle); background: transparent; color: var(--encre-2);
}
.c-dialogue-fermer:hover { color: var(--encre); border-color: var(--bord-controle); }
.c-dialogue-pied { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.c-dialogue-pied > p { flex: 1 1 320px; margin: 0; }