/* Alpaga — administration.
   Les couleurs et les deux polices viennent de l'identité SubAlpine : vert sapin et
   blanc glacier du logo, Bricolage Grotesque pour les titres et les chiffres,
   Atkinson Hyperlegible pour le texte. Le rail sapin porte la marque et l'état du
   serveur ; le jaune-vert lichen est réservé à ce qui se passe maintenant ; le rouge
   oxyde aux limites atteintes et aux actions destructrices. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-var-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --glacier: #f2f6f6;      /* fond */
  --neve: #fbfdfd;         /* surfaces posées sur le fond */
  --sapin: #1d2e2b;        /* encre, action principale */
  --sapin-2: #2b4440;
  --roche: #5a706c;        /* texte secondaire */
  --moraine: #c6d4d2;      /* filets */
  --moraine-2: #e4eceb;
  --lichen: #b9c43c;       /* « maintenant », jauges */
  --lichen-encre: #59610f; /* lichen lisible sur fond clair */
  --oxyde: #a63a2b;        /* limites atteintes, destruction, erreurs */
  --profil: #3d5c56;
  --on-sapin: #f2f6f6;

  /* le rail reste sapin dans les deux thèmes */
  --rail: #1d2e2b;
  --rail-encre: #e9f0ef;
  --rail-roche: #9fb3af;
  --rail-filet: #334a46;
  --rail-survol: #263b37;
  --logo-trait: #1d2e2b;
  --logo-toison: #ffffff;

  --texte: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --titre: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, monospace;

  --r-ctl: 7px;
  --r-panneau: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glacier: #111b19;
    --neve: #172320;
    --sapin: #e4ecea;
    --sapin-2: #c6d4d2;
    --roche: #93a7a3;
    --moraine: #2c3e3a;
    --moraine-2: #1d2b28;
    --lichen: #c9d45a;
    --lichen-encre: #d4dd73;
    --oxyde: #ec8a7a;
    --profil: #8fb5ad;
    --on-sapin: #111b19;
    --rail: #0b1311;
    --rail-filet: #22312e;
    --rail-survol: #18241f;
    --logo-toison: #c3cecb;  /* grisée : un blanc pur éblouirait sur le fond sombre */
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--glacier);
  color: var(--sapin);
  font: 400 1rem/1.55 var(--texte);
}

h1, h2, h3 { font-family: var(--titre); font-weight: 650; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; font-stretch: 82%; font-weight: 700; }
h2 { font-size: 1.2rem; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
code { font-family: var(--code); font-size: .86em; }
:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; border-radius: 3px; }

.muted { color: var(--roche); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* --- squelette : rail sapin à gauche, contenu à droite ------------------- */

.shell { display: grid; grid-template-columns: 16rem 1fr; min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 1.5rem 1rem 1.25rem;
  background: var(--rail); color: var(--rail-encre);
}
.brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; padding: 0 .5rem;
}
.brand .logo { width: 2.6rem; height: 2.6rem; flex: none; }
/* le logo garde sa toison claire et son trait sapin, quel que soit le fond */
.logo { color: var(--logo-trait); }
.logo .fill { fill: var(--logo-toison); }
.brand span { font: 700 1.55rem/1 var(--titre); font-stretch: 82%; letter-spacing: -.015em; }
.rail nav { display: flex; flex-direction: column; gap: .15rem; }
.rail nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: var(--r-ctl);
  text-decoration: none; color: var(--rail-roche);
}
.rail nav a:hover { color: var(--rail-encre); background: var(--rail-survol); }
.rail nav a[aria-current="page"] { color: var(--rail-encre); background: var(--rail-survol); font-weight: 700; }
.rail nav a[aria-current="page"] .icon { color: var(--lichen); }

/* L'état du serveur, sur toutes les pages. */
.pulse {
  margin-top: auto; display: flex; flex-direction: column; gap: .6rem;
  padding: 1rem .75rem 0; border-top: 1px solid var(--rail-filet);
  font-size: .85rem; color: var(--rail-roche);
}
.pulse-state { display: flex; align-items: center; gap: .1rem; color: var(--rail-encre); }
.pulse-state strong { font-weight: 700; margin-right: .45rem; }
.pulse-state .muted { color: var(--rail-roche); font-size: .8rem; }
.rail .dot.ok { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lichen) 25%, transparent); }
.rail .dot { background: var(--rail-filet); }
.rail .dot.ok { background: var(--lichen); }
.rail .dot.ko { background: #ec8a7a; }
.rail-out {
  display: flex; align-items: center; justify-content: flex-start; gap: .7rem; padding: .3rem .75rem;
  color: var(--rail-roche); text-decoration: none;
}
.rail-out:hover { color: var(--rail-encre); }

/* État en une couleur, détail dessous ; replié, le rail ne garde que les icônes et la couleur. */
.rail .dot.warn { background: #e8c35a; box-shadow: 0 0 0 3px color-mix(in srgb, #e8c35a 25%, transparent); }
.pulse-issue {
  color: var(--rail-encre); line-height: 1.4; padding: .55rem .7rem; border-radius: var(--r-ctl);
  background: color-mix(in srgb, #ec8a7a 14%, transparent); border-left: 2px solid #ec8a7a;
}
.pulse-issue.pulse-warn { background: color-mix(in srgb, #e8c35a 12%, transparent); border-left-color: #e8c35a; }
.pulse-issue a { display: block; margin-top: .3rem; color: var(--rail-encre); font-weight: 700; }
.pulse-facts { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-variant-numeric: tabular-nums; }
.pulse-facts div { display: flex; justify-content: space-between; gap: .75rem; }
.pulse-facts dt { color: var(--rail-roche); }
.pulse-facts code { color: var(--rail-encre); }
.pulse-facts dd { margin: 0; color: var(--rail-encre); text-align: right; overflow-wrap: anywhere; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rail-toggle {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; flex: none;
  background: none; border: 0; border-radius: var(--r-ctl); color: var(--rail-roche); cursor: pointer;
}
.rail-toggle:hover { color: var(--rail-encre); background: var(--rail-survol); }
.rail-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 861px) {
  .shell { transition: grid-template-columns .18s ease; }
  .shell.folded { grid-template-columns: 4.5rem 1fr; }
  .shell.folded .rail { padding-inline: .6rem; align-items: center; }
  .shell.folded .rail-head { flex-direction: column; }
  .shell.folded .brand { padding: 0; }
  .shell.folded .brand .logo { width: 2.2rem; height: 2.2rem; }
  .shell.folded .rail .brand span, .shell.folded .rail nav a span, .shell.folded .rail-out span,
  .shell.folded .pulse-state strong {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .shell.folded .rail-toggle .icon { transform: scaleX(-1); }
  .shell.folded .rail nav a { justify-content: center; padding: .6rem; }
  .shell.folded .pulse { padding-inline: 0; align-items: center; width: 100%; }
  .shell.folded .pulse > :not(.pulse-state) { display: none; }
  .shell.folded .pulse-state .dot { margin: 0; width: .8rem; height: .8rem; }
  .shell.folded .rail-out { padding: .3rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }

.content { padding: 2.5rem clamp(1rem, 4vw, 3.5rem) 4rem; max-width: 78rem; min-width: 0; }

.page-head { margin-bottom: 2.25rem; }
.page-head p { color: var(--roche); max-width: 64ch; margin-top: .6rem; font-size: 1.05rem; }
.section { margin-top: 3rem; }
.section > h2 { margin-bottom: 1rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.period { font-family: var(--texte); font-weight: 400; font-size: .9rem; color: var(--roche); margin-left: .4rem; letter-spacing: 0; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; overflow: visible;
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: .75rem 1rem; padding: .85rem 1rem;
  }
  .brand .logo { width: 2.1rem; height: 2.1rem; }
  .brand span { font-size: 1.3rem; }
  .rail nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .rail nav a { padding: .4rem .6rem; gap: .45rem; font-size: .92rem; }
  .pulse {
    grid-column: 1 / -1; grid-row: 3; margin: 0; padding: .75rem 0 0;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem 1.25rem;
  }
  .rail-out { grid-column: 2; grid-row: 1; padding: .3rem 0; }
  .rail-out span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .content { padding-top: 1.75rem; }
  .rail-toggle { display: none; }
  .pulse-facts, .pulse-issue { display: none; }
}

.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem; flex: none; background: var(--moraine); }
.dot.ok { background: var(--lichen); }
.dot.ko { background: var(--oxyde); }

/* --- l'élément fort : l'activité d'Ollama, quart d'heure par quart d'heure - */

.profile {
  background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau);
  padding: 1.5rem 1.6rem 1.4rem;
}
.profile-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 2rem; margin-bottom: 1.5rem; }
.now { display: flex; align-items: center; gap: .7rem; color: var(--roche); line-height: 1.3; font-size: .9rem; }
.now b {
  font: 700 3.8rem/0.85 var(--titre); font-stretch: 76%; letter-spacing: -.025em;
  color: var(--sapin); font-variant-numeric: tabular-nums;
}
.bars { display: block; width: 100%; height: 11rem; overflow: visible; }
.bars .bar { fill: var(--profil); }
.bars .bar.hot { fill: var(--oxyde); }
.bars .bar.last { fill: var(--lichen); }
.bars .bar:hover { fill: var(--sapin); }
.bars .grid { stroke: var(--moraine); stroke-width: 1; stroke-dasharray: 2 4; }
.bars .floor { stroke: var(--moraine); stroke-width: 1; }
.bars .ceiling { stroke: var(--oxyde); stroke-width: 1; stroke-dasharray: 6 4; }
.axis { position: relative; height: 1.2rem; font-size: .8rem; color: var(--roche); margin-top: .45rem; }
.axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.axis span:nth-child(1) { left: 0; transform: none; }
.axis span:nth-child(2) { left: 25%; }
.axis span:nth-child(3) { left: 50%; }
.axis span:nth-child(4) { left: 75%; }
.axis span:nth-child(5) { right: 0; transform: none; }
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .85rem; color: var(--roche); margin-top: .9rem; }
.legend .hint { margin-left: auto; }
.key { display: inline-block; width: .7rem; height: .7rem; vertical-align: -.05em; margin-right: .45rem; border-radius: 2px; background: var(--profil); }
.key.ceiling { width: 1.1rem; height: 0; border-radius: 0; background: none; border-top: 1px dashed var(--oxyde); vertical-align: middle; }
.trace-block { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--moraine-2); }
.trace-label { font-size: .9rem; font-weight: 700; }
.trace-label .muted { font-weight: 400; margin-left: .35rem; }
.trace { display: block; width: 100%; height: 2.75rem; margin-top: .5rem; overflow: visible; }
.trace .line { fill: none; stroke: var(--roche); stroke-width: 1.25; }
@media (max-width: 560px) {
  .profile { padding: 1.1rem 1rem; }
  .legend .hint, .axis span:nth-child(2), .axis span:nth-child(4) { display: none; }
}

/* --- relevés : des chiffres, pas des cartes ------------------------------- */

.readings { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 2.5rem 4rem; }
.reading > h2 { margin-bottom: 1rem; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin: 0; }
.figures div { border-top: 1px solid var(--moraine); padding-top: .65rem; }
.figures .lead { grid-column: 1 / -1; border-top: 2px solid var(--sapin); }
.figures dt { font-size: .85rem; color: var(--roche); line-height: 1.3; }
.figures dd { margin: .35rem 0 0; color: var(--roche); font-size: .9rem; }
.figures dd b {
  font: 650 1.9rem/1 var(--titre); font-stretch: 80%; color: var(--sapin);
  font-variant-numeric: tabular-nums; margin-right: .25rem;
}
.figures .lead dd b { font-size: 3rem; font-weight: 700; font-stretch: 76%; letter-spacing: -.02em; }
.summary { margin-top: 1.1rem; color: var(--roche); font-size: .9rem; max-width: 70ch; }

/* --- tableaux ------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: .8rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--moraine); }
th { font-weight: 700; font-size: .82rem; color: var(--roche); border-bottom: 2px solid var(--sapin); white-space: nowrap; vertical-align: bottom; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th.num, td.num { text-align: right; }
tbody tr:hover td { background: color-mix(in srgb, var(--moraine-2) 55%, transparent); }
/* Les chiffres du tableau prennent la police des chiffres : le zéro barré d'Atkinson se lit mal en colonne. */
td.num { font-family: var(--titre); font-stretch: 90%; font-size: 1.05rem; }
td .sub { display: block; font-size: .8rem; color: var(--roche); margin-top: .1rem; }
tr.revoked td { color: var(--roche); }
tr.revoked .name { text-decoration: line-through; }
td.actions { text-align: right; white-space: nowrap; }
td.actions button + button { margin-left: .25rem; }
.name { font-weight: 700; }
.prefix { font-family: var(--code); font-size: .8rem; color: var(--roche); }

.meter { display: block; width: 6.5rem; height: 5px; margin: .45rem 0 0 auto; }
.usage-figure { display: block; white-space: nowrap; }
/* Même hauteur que la jauge plus sa marge : la ligne garde un seul alignement. */
.usage-none { display: block; margin-top: .2rem; font: 400 .74rem/1 var(--texte); color: var(--roche); white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Comptes : tout s'aligne sur la ligne du nom, les actions tiennent sur une ligne. */
table.accounts td { vertical-align: top; padding-top: 1rem; padding-bottom: 1rem; }
table.accounts td.num { line-height: 1.35; }
table.accounts td.last { white-space: nowrap; line-height: 1.35; padding-top: 1.05rem; }
.account-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; line-height: 1.35; }
.account-head .chip { margin-left: 0; }
.account-tags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.account-tags li {
  font-size: .76rem; line-height: 1; padding: .3rem .5rem; border-radius: 999px;
  background: var(--moraine-2); color: var(--roche); white-space: nowrap;
}
.account-tags code { font-size: .74rem; color: var(--sapin); }
.account-tags li.pending { background: transparent; border: 1px dashed var(--moraine); }
table.accounts td.actions { width: 1%; white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.row-actions button { margin: 0; }

.meter .track { fill: var(--moraine); }
.meter .fill { fill: var(--profil); }
.meter.full .fill { fill: var(--oxyde); }

.chip {
  display: inline-block; font: 700 .72rem/1.5 var(--texte); white-space: nowrap; vertical-align: .12em;
  color: var(--roche); background: var(--moraine-2); border-radius: 999px; padding: 0 .55rem; margin-left: .5rem;
}
.chip.live { color: var(--lichen-encre); background: color-mix(in srgb, var(--lichen) 22%, transparent); }
.chip.full { color: var(--oxyde); background: color-mix(in srgb, var(--oxyde) 13%, transparent); }

.empty { padding: 1.25rem 0; color: var(--roche); }
.empty a { color: var(--sapin); font-weight: 700; }

/* --- formulaires et boutons ---------------------------------------------- */

label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 700; }
label small { font-weight: 400; color: var(--roche); margin-left: .3rem; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--sapin);
  background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-ctl);
  padding: .6rem .75rem; min-width: 0; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--roche); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--roche); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--sapin); outline-offset: 0; }
textarea { resize: vertical; line-height: 1.5; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
label.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--sapin); }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 700 .95rem/1.2 var(--texte); cursor: pointer; text-decoration: none;
  border-radius: var(--r-ctl); padding: .65rem 1.15rem;
  background: var(--sapin); color: var(--on-sapin); border: 1px solid var(--sapin);
}
button:hover, .button:hover { background: var(--sapin-2); border-color: var(--sapin-2); }
button:disabled, button.htmx-request { opacity: .55; cursor: progress; }
button.quiet, .button.quiet { background: transparent; color: var(--sapin); border-color: var(--moraine); padding: .4rem .75rem; font-size: .85rem; }
button.quiet:hover, .button.quiet:hover { border-color: var(--sapin); background: transparent; }
button .icon { width: 1rem; height: 1rem; }
button.danger { background: transparent; color: var(--oxyde); border-color: transparent; padding: .4rem .55rem; font-size: .85rem; }
button.danger:hover { border-color: var(--oxyde); background: transparent; }
button.link { background: none; border: 0; padding: 0; color: var(--roche); font-weight: 400; }
button.link:hover { color: var(--sapin); background: none; text-decoration: underline; }
.rail button.link:hover { color: var(--rail-encre); }

.panel { background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); padding: 1.3rem 1.5rem 1.5rem; }
.panel > h2 { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem 1.25rem; align-items: end; }
.form-grid .wide { grid-column: span 2; }
@media (max-width: 560px) { .form-grid .wide { grid-column: 1 / -1; } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; color: var(--roche); font-size: .9rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.inline-form label { flex: 1 1 18rem; max-width: 30rem; }

/* Le formulaire de création se déplie : la page s'ouvre sur les comptes. */
.create { background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); }
.create summary {
  display: flex; align-items: center; gap: .55rem; cursor: pointer; list-style: none;
  padding: .95rem 1.4rem; font: 650 1.05rem/1.2 var(--titre);
}
.create summary::-webkit-details-marker { display: none; }
.create summary:hover { color: var(--sapin-2); }
.create summary .icon { transition: transform .15s ease; }
.create[open] summary { border-bottom: 1px solid var(--moraine-2); }
.create[open] summary .icon { transform: rotate(45deg); }
.create form { padding: 1.2rem 1.4rem 1.4rem; }
@media (prefers-reduced-motion: reduce) { .create summary .icon { transition: none; } }

/* --- messages ------------------------------------------------------------ */

.notice, .error {
  border-radius: var(--r-ctl); padding: .7rem .95rem; margin: 0 0 1.25rem;
  border-left: 3px solid; background: var(--neve);
}
.notice { border-color: var(--lichen); }
.error { border-color: var(--oxyde); color: var(--oxyde); }
.notice-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.25rem; }
.secret {
  border: 1px solid var(--lichen); background: color-mix(in srgb, var(--lichen) 10%, var(--neve));
  border-radius: var(--r-panneau); padding: 1.1rem 1.3rem 1.25rem; margin-bottom: 1.5rem;
}
.secret-title { font-weight: 700; }
.secret-help { margin-top: 1rem; color: var(--roche); font-size: .9rem; }
.copyable { display: flex; align-items: flex-start; gap: .75rem; margin-top: .5rem; }
.copyable pre {
  flex: 1; min-width: 0; margin: 0; padding: .65rem .85rem; border-radius: var(--r-ctl);
  background: var(--neve); border: 1px solid var(--moraine);
  font: .95rem/1.45 var(--code); white-space: pre-wrap; word-break: break-all; user-select: all;
}
.copyable pre.example { font-size: .82rem; user-select: text; word-break: normal; overflow-wrap: anywhere; }

/* --- essai --------------------------------------------------------------- */

.playground { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.playground form { display: flex; flex-direction: column; gap: 1rem; }
.playground .row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.playground .row label:not(.check) { flex: 0 1 8rem; }
.result-col { position: sticky; top: 1.5rem; }
.result-empty { border: 1px dashed var(--moraine); border-radius: var(--r-panneau); padding: 2.5rem 2rem; color: var(--roche); text-align: center; }
.working { display: none; align-items: center; margin-bottom: 1rem; color: var(--roche); font-size: .92rem; }
.working.htmx-request { display: flex; }
.working b { font-family: var(--titre); color: var(--sapin); margin: 0 .2rem; font-variant-numeric: tabular-nums; }
.working .dot { animation: souffle 1.6s ease-in-out infinite; }
@keyframes souffle { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .working .dot { animation: none; } }
.answer { background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); overflow: hidden; }
.answer-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem;
  padding: .7rem 1rem .7rem 1.4rem; border-bottom: 1px solid var(--moraine-2);
}
.answer-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--roche); }
.answer-meta b { font: 700 1.05rem/1 var(--titre); color: var(--sapin); font-variant-numeric: tabular-nums; }
.answer .error { margin: 1rem 1.4rem 0; }
.output {
  margin: 0; padding: 1.25rem 1.4rem 1.5rem; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 1.02rem/1.7 var(--texte); max-width: 75ch;
}
.reasoning { margin: 1rem 1.4rem 0; }
.reasoning summary { cursor: pointer; color: var(--roche); font-size: .9rem; }
.reasoning .output { padding: .75rem 0 0; font-size: .9rem; color: var(--roche); }
@media (max-width: 960px) { .playground { grid-template-columns: 1fr; } .result-col { position: static; } }

/* --- téléchargements ----------------------------------------------------- */

/* Suivi des téléchargements : en tête de page, une carte par modèle. */
.pulls { display: flex; flex-direction: column; gap: .75rem; }
.pulls.has-pulls { margin-bottom: 2.5rem; }
.pulls-title { font-size: 1.25rem; }
.pulls-note { color: var(--roche); font-size: .85rem; }
.pulls-note:empty { display: none; }
.pull {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.25rem;
  background: var(--neve); border: 1px solid var(--moraine); border-left: 3px solid var(--lichen);
  border-radius: var(--r-panneau);
}
.pull code { font-size: .8rem; color: var(--roche); margin-left: .35rem; }
.pull-head, .pull-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pull-percent { font: 700 1.6rem/1 var(--titre); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.pull progress, .card-pull progress, .pulse-pull progress {
  width: 100%; height: 8px; appearance: none; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--moraine-2); accent-color: var(--lichen);
}
.pull progress::-webkit-progress-bar, .card-pull progress::-webkit-progress-bar, .pulse-pull progress::-webkit-progress-bar { background: var(--moraine-2); }
.pull progress::-webkit-progress-value, .card-pull progress::-webkit-progress-value, .pulse-pull progress::-webkit-progress-value { background: var(--lichen); border-radius: 999px; }
.pull progress::-moz-progress-bar, .card-pull progress::-moz-progress-bar, .pulse-pull progress::-moz-progress-bar { background: var(--lichen); border-radius: 999px; }
.pull-meta { color: var(--roche); font-size: .88rem; font-variant-numeric: tabular-nums; }
.pull.done { border-left-color: var(--sapin); }
.pull.failed { border-left-color: var(--oxyde); color: var(--oxyde); }
.card-pull { width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.card-pull p { font-size: .8rem; color: var(--roche); font-variant-numeric: tabular-nums; }
.pulse-pull { display: flex; flex-direction: column; gap: .3rem; color: var(--rail-encre); text-decoration: none; }
.pulse-pull code { color: var(--rail-encre); }
.pulse-pull progress { height: 5px; background: var(--rail-filet); }
.pulse-pull progress::-webkit-progress-bar { background: var(--rail-filet); }
.pulse-pull-meta { color: var(--rail-roche); font-size: .8rem; }
.pulse-pull:hover .pulse-pull-name { text-decoration: underline; }

/* --- connexion ----------------------------------------------------------- */

.login { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem 9rem; overflow: hidden; }
.login-card { position: relative; z-index: 1; width: 100%; max-width: 22rem; }
.login-card .logo { width: 5rem; height: 5rem; display: block; margin-bottom: 1.25rem; }
.login-card h1 { font-size: 3rem; font-stretch: 78%; }
.login-card > p { color: var(--roche); margin: .5rem 0 2rem; }
.login-card form { display: flex; flex-direction: column; gap: 1rem; }
.login-card .error { margin: 0; }
.login-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 9rem; }
.login-ridge path { fill: var(--rail); }
.nowrap, td code.name { white-space: nowrap; }

/* --- stockage et mémoire des modèles ------------------------------------- */

.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }
.gauge-card { background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); padding: 1.2rem 1.4rem 1.3rem; }
.gauge-card h2 { font-size: 1.05rem; }
.gauge-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; margin: .5rem 0 .9rem; color: var(--roche); font-size: .9rem; }
.gauge-figure b { font: 700 2.6rem/1 var(--titre); font-stretch: 78%; letter-spacing: -.02em; color: var(--sapin); font-variant-numeric: tabular-nums; }
.gauge-bar { display: block; width: 100%; height: 10px; }
.gauge-bar .track { fill: var(--moraine-2); }
.gauge-bar .other { fill: color-mix(in srgb, var(--roche) 45%, transparent); }
.gauge-bar .mine { fill: var(--profil); }
.gauge-bar .mine.full { fill: var(--oxyde); }
.gauge-legend { margin: .9rem 0 0; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.gauge-legend div { display: flex; justify-content: space-between; gap: 1rem; }
.gauge-legend dt { color: var(--roche); }
.gauge-legend dd { margin: 0; font-family: var(--titre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge-legend .key { vertical-align: -.05em; }
.key.mine { background: var(--profil); }
.key.other { background: color-mix(in srgb, var(--roche) 45%, transparent); }
.key.track { background: var(--moraine-2); border: 1px solid var(--moraine); }
.gauge-note { margin-top: .9rem; font-size: .85rem; color: var(--roche); }

/* --- historique de la mémoire et du disque ------------------------------- */

.gauge-card h3 { font: 650 1.05rem/1.2 var(--titre); margin-bottom: 1rem; }
.history { display: block; width: 100%; height: 9rem; overflow: visible; }
.history .area.back { fill: color-mix(in srgb, var(--roche) 22%, transparent); }
.history .area.front { fill: color-mix(in srgb, var(--profil) 55%, transparent); }
.history .line { fill: none; stroke-width: 1.5; }
.history .line.back { stroke: var(--roche); }
.history .line.front { stroke: var(--profil); stroke-width: 2; }
.history .grid { stroke: var(--moraine); stroke-dasharray: 2 4; }
.history .floor { stroke: var(--moraine); }
.history .ceiling { stroke: var(--oxyde); stroke-dasharray: 6 4; }
.history-axis { display: block; width: 100%; height: 16px; margin-top: .35rem; overflow: visible; }
.history-axis text { font: .72rem var(--texte); fill: var(--roche); }
.key.ceiling { background: none; }
.periods { display: flex; gap: .25rem; padding: .2rem; border: 1px solid var(--moraine); border-radius: 999px; }
.periods a { padding: .25rem .8rem; border-radius: 999px; text-decoration: none; font-size: .85rem; color: var(--roche); }
.periods a:hover { color: var(--sapin); }
.periods a[aria-current] { background: var(--sapin); color: var(--on-sapin); font-weight: 700; }

/* --- catalogue et fiche ---------------------------------------------------- */

.catalog-group { font: 650 1rem/1.2 var(--titre); margin: 2rem 0 .8rem; color: var(--roche); }
.catalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.model-card { display: flex; flex-direction: column; gap: .6rem; background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); padding: 1rem 1.15rem 1.05rem; }
.model-card.installed { border-color: color-mix(in srgb, var(--lichen) 60%, var(--moraine)); }
.model-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; }
.model-card h4 { margin: 0; font: 650 1.05rem/1.2 var(--titre); }
.model-card code { font-size: .78rem; color: var(--roche); }
.model-card > p { font-size: .9rem; color: var(--roche); line-height: 1.45; }
.model-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: var(--roche); }
.model-facts .warn { color: var(--oxyde); font-weight: 700; }
.model-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .3rem; }
.model-card-foot .chip { margin-left: 0; }
td.actions { white-space: normal; }
td.actions button { margin: .1rem 0 .1rem .25rem; }
table.accounts td.actions button { margin: 0; }

.sheet { margin-top: 1.5rem; background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); padding: 1.2rem 1.4rem 1.3rem; }
.sheet-head h3 { font-size: 1.1rem; }
.sheet-head p { color: var(--roche); margin-top: .35rem; }
.sheet-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .9rem 1.5rem; margin: 1.1rem 0 .5rem; }
.sheet-facts dt { font-size: .8rem; color: var(--roche); }
.sheet-facts dd { margin: .15rem 0 0; font-weight: 700; }
.sheet-facts dd .chip { margin: 0 .3rem 0 0; }
.sheet-facts .sub { display: block; font-weight: 400; font-size: .8rem; color: var(--roche); }
.sheet details { margin-top: .75rem; }
.sheet summary { cursor: pointer; color: var(--roche); font-size: .9rem; }
.sheet-pre { margin: .5rem 0 0; padding: .75rem .9rem; max-height: 18rem; overflow: auto; background: var(--glacier); border-radius: var(--r-ctl); font: .8rem/1.5 var(--code); white-space: pre-wrap; }

/* --- côté public : accueil, inscription, espace du compte ---------------- */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding: 1.1rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--moraine);
}
.topbar .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.topbar nav > a:not(.button) { text-decoration: none; font-weight: 700; }
.topbar nav > a:not(.button):hover { text-decoration: underline; }
.topbar .who { color: var(--roche); font-size: .9rem; overflow-wrap: anywhere; }
.public { padding: 3rem clamp(1rem, 4vw, 3.5rem) 4rem; max-width: 64rem; margin: 0 auto; }
.public.narrow { max-width: 30rem; }
body:has(> .topbar) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .topbar) > .public { width: 100%; }
/* La crête ferme la page, sous le contenu : elle ne passe jamais devant le texte. */
.public-ridge { display: block; width: 100%; height: 6rem; margin-top: auto; }
.public-ridge path { fill: var(--moraine-2); }
.public .lede { color: var(--roche); margin: .75rem 0 2rem; font-size: 1.05rem; }
.public .aside { margin-top: 1.5rem; color: var(--roche); font-size: .92rem; }
.public .aside a, .public .notice a { color: var(--sapin); font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack .notice, .stack .error { margin: 0; }
/* Le code en six cases : un champ transparent sur six cases dessinées. L'espacement des
   lettres place chaque chiffre au milieu de sa case ; le champ déborde d'une case,
   masquée, pour que le curseur après le sixième chiffre ne fasse pas défiler le texte. */
.otp { --cell: 3rem; --gap: .55rem; position: relative; width: calc(6 * var(--cell) + 5 * var(--gap)); height: 3.6rem; overflow: clip; }
.otp-cells { position: absolute; inset: 0; display: flex; gap: var(--gap); pointer-events: none; }
.otp-cells span {
  flex: 0 0 var(--cell); background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-ctl);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.otp-cells span.filled { border-color: var(--roche); }
.otp:focus-within .otp-cells span.active { border-color: var(--sapin); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lichen) 45%, transparent); }
.otp .otp-input, .otp .otp-input:hover, .otp .otp-input:focus-visible {
  position: relative; z-index: 1; width: calc(100% + var(--cell)); height: 100%; margin: 0;
  padding: 0 0 0 calc((var(--cell) - 1ch) / 2); border: 0; border-radius: 0; background: transparent; outline: none;
  font: 700 1.75rem/1 var(--code); letter-spacing: calc(var(--cell) + var(--gap) - 1ch); color: var(--sapin); caret-color: var(--sapin);
}
.otp-help { margin-top: -.4rem; font-size: .85rem; color: var(--roche); }
@media (max-width: 380px) { .otp { --cell: 2.6rem; --gap: .45rem; } }
@media (prefers-reduced-motion: reduce) { .otp-cells span { transition: none; } }

.hero { max-width: 44rem; padding-top: 2rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-stretch: 78%; }
.hero p { color: var(--roche); font-size: 1.1rem; line-height: 1.6; margin-top: 1.25rem; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-actions .button.quiet { padding: .65rem 1.15rem; font-size: .95rem; }
.steps { margin-top: 4.5rem; max-width: 44rem; }
.steps h2 { margin-bottom: 1.25rem; }
.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 1.1rem; }
.steps li { counter-increment: etape; display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; color: var(--roche); line-height: 1.55; }
.steps li::before {
  content: counter(etape); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font: 700 1.1rem/1 var(--titre); color: var(--sapin); border: 1.5px solid var(--sapin);
}
.steps li b { color: var(--sapin); display: block; }

.quote { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--moraine); padding: .2rem 0 .2rem .9rem; margin: .5rem 0; }
.panel .quote + .muted { font-size: .88rem; }
.section.first { margin-top: 0; }
.account-figures { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.account-figures .meter { margin: .5rem 0 0; width: 100%; max-width: 12rem; }
.warn { color: var(--oxyde); }
.account-chart { margin-top: 2rem; }
.account-chart h3 { font: 650 1.05rem/1.2 var(--titre); }
.account-chart .bars { height: 8rem; }
.key-line { background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); padding: 1rem 1.2rem; }
.key-line p { max-width: 60ch; }
.examples-title { font: 650 1.05rem/1.2 var(--titre); margin-top: 2rem; }
.examples-help { font-size: .9rem; margin-top: .5rem; }
.examples { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.examples summary { cursor: pointer; font-weight: 700; padding: .35rem 0; }

/* --- demandes d'accès (administration) ----------------------------------- */

.requests { margin-bottom: 2rem; }
.requests > h2 { margin-bottom: 1rem; }
.request {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.25rem 2rem;
  background: var(--neve); border: 1px solid var(--lichen); border-radius: var(--r-panneau); padding: 1.2rem 1.4rem;
}
.request + .request { margin-top: 1rem; }
.request .sub { font-size: .8rem; color: var(--roche); }
.request .form-actions { margin-top: 1rem; }
@media (max-width: 860px) { .request { grid-template-columns: 1fr; } }

.fallback { margin-top: 1.5rem; }
.fallback summary { cursor: pointer; color: var(--roche); font-size: .9rem; }
.fallback form { margin-top: .9rem; }
.login-card .notice { margin: 0; }

/* --- limites d'un compte, dépliées sous sa ligne ------------------------- */

tr.limits-row td { background: var(--neve); padding: 1.1rem 1.25rem 1.25rem; }
tbody tr.limits-row:hover td { background: var(--neve); }
.limits-title { font-weight: 700; margin-bottom: .9rem; }
.limits-title .muted { font-weight: 400; }

/* --- documentation -------------------------------------------------------- */

.public.wide { max-width: 76rem; }
.doc { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 0 3.5rem; align-items: start; }
.doc-body { min-width: 0; max-width: 52rem; }
/* Le sommaire suit la lecture : collé en haut, la section en cours marquée par app.js. */
.doc-toc { position: sticky; top: 1.5rem; padding-top: .4rem; font-size: .92rem; }
.doc-toc-title { font-weight: 700; color: var(--roche); font-size: .82rem; margin-bottom: .6rem; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--moraine); }
.doc-toc li a {
  display: block; padding: .32rem 0 .32rem .9rem; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--roche); text-decoration: none; line-height: 1.35;
}
.doc-toc li a:hover { color: var(--sapin); }
.doc-toc li a[aria-current="true"] { color: var(--sapin); font-weight: 700; border-left-color: var(--lichen); }
.doc-toc-cta { margin-top: 1.5rem; font-size: .85rem; padding: .55rem .9rem; }
.doc-section { margin-top: 3rem; scroll-margin-top: 1.5rem; }
.doc-section h2 { margin-bottom: .9rem; }
.doc-section > p { max-width: 68ch; line-height: 1.65; }
.doc-section > p + p, .doc-section .copyable + p, .doc-section > p + .copyable, .doc-section .copyable + .copyable { margin-top: .9rem; }
.doc-section a { color: var(--sapin); font-weight: 700; }
.doc-params { margin: 0 0 1rem; display: flex; flex-direction: column; }
.doc-params div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .3rem 1.5rem; padding: .7rem 0; border-top: 1px solid var(--moraine); }
.doc-params dd { margin: 0; color: var(--roche); }
.doc-errors td:first-child { white-space: nowrap; font-weight: 700; }
.doc-errors td { vertical-align: top; }
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }
  .doc-toc { position: static; margin-bottom: 1rem; padding: .9rem 1.1rem; background: var(--neve); border: 1px solid var(--moraine); border-radius: var(--r-panneau); }
  .doc-toc ol { columns: 2; column-gap: 1.5rem; border-left: 0; }
  .doc-toc li a { padding-left: 0; border-left: 0; }
  .doc-toc-cta { display: none; }
}
@media (max-width: 640px) { .doc-params div { grid-template-columns: 1fr; } }

/* Exemples colorés (Pygments, côté serveur). Les couleurs suivent la charte, en clair
   comme en sombre ; le fond reste celui des blocs copiables. */
:root {
  --code-mot: #1d5c4c; --code-chaine: #6b6f12; --code-nombre: #a63a2b;
  --code-nom: #2b4f7a; --code-commentaire: #6d7f7b; --code-variable: #8a4b8f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-mot: #7fcbb4; --code-chaine: #d4dd73; --code-nombre: #ec8a7a;
    --code-nom: #9cc2ea; --code-commentaire: #8fa29e; --code-variable: #d5a6d8;
  }
}
:root[data-theme="dark"] {
  --code-mot: #7fcbb4; --code-chaine: #d4dd73; --code-nombre: #ec8a7a;
  --code-nom: #9cc2ea; --code-commentaire: #8fa29e; --code-variable: #d5a6d8;
}
.copyable pre.code { font-size: .84rem; line-height: 1.6; white-space: pre; overflow-x: auto; overflow-wrap: normal; word-break: normal; }
.code .k, .code .kn, .code .kd, .code .kc, .code .ow { color: var(--code-mot); font-weight: 700; }
.code .s, .code .s1, .code .s2, .code .sb, .code .sd, .code .se, .code .si, .code .sa, .code .dl { color: var(--code-chaine); }
.code .m, .code .mi, .code .mf, .code .il { color: var(--code-nombre); }
.code .nb, .code .bp, .code .nf, .code .fm, .code .nc, .code .nt { color: var(--code-nom); }
.code .nv, .code .vg, .code .nx { color: var(--code-variable); }
.code .c, .code .c1, .code .cm, .code .ch { color: var(--code-commentaire); font-style: italic; }
.section-intro { color: var(--roche); max-width: 68ch; margin: -.4rem 0 1.2rem; }
.model-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.model-list li { display: flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border: 1px solid var(--moraine); border-radius: var(--r-ctl); background: var(--neve); }

/* --- fiche d'un compte, en modale ------------------------------------------ */

button.link-name {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--moraine); text-underline-offset: .2em;
}
button.link-name:hover { text-decoration-color: currentColor; color: var(--sapin); }
.dialog {
  width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0;
  border: 1px solid var(--moraine); border-radius: var(--r-panneau);
  background: var(--glacier); color: inherit; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .35);
}
.dialog::backdrop { background: color-mix(in srgb, var(--rail) 55%, transparent); }
.dialog-body { padding: 1.5rem 1.75rem 1.75rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.dialog-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.6rem; }
.dialog-head .chip { margin-left: 0; font-size: .75rem; }
.dialog-head p { margin-top: .25rem; }
.dialog-section { margin-top: 1.75rem; }
.dialog-section > h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.dialog .profile { margin-top: 1.25rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.sheet-grid dt, .sheet-usage dt { font-size: .78rem; color: var(--roche); margin-bottom: .2rem; }
.sheet-grid dd { margin: 0; }
.sheet-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; }
.sheet-usage dd { margin: 0; font-family: var(--titre); font-stretch: 90%; font-size: 1.35rem; }
.sheet-usage .meter { margin-left: 0; width: 100%; }
@media (max-width: 640px) {
  .dialog-body { padding: 1.1rem 1rem 1.25rem; }
  .sheet-usage { grid-template-columns: 1fr; gap: .9rem; }
}
.dialog-head h2 code { font-size: .85rem; color: var(--roche); font-weight: 400; }
.sheet-modal .sheet-facts { margin-top: .25rem; }
.chip.loading { display: inline-flex; align-items: center; color: var(--lichen-encre); background: color-mix(in srgb, var(--lichen) 16%, transparent); }
.chip.loading .dot { width: .45rem; height: .45rem; margin-right: .35rem; background: var(--lichen); animation: souffle 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chip.loading .dot { animation: none; } }

/* --- onglets de la page Modèles -------------------------------------------- */

.tabs { display: flex; gap: .25rem; margin: -.75rem 0 2rem; border-bottom: 1px solid var(--moraine); overflow-x: auto; }
.tabs a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--roche); text-decoration: none; font-weight: 700; white-space: nowrap;
}
.tabs a:hover { color: var(--sapin); }
.tabs a[aria-current="page"] { color: var(--sapin); border-bottom-color: var(--lichen); }
.tabs .count {
  font-size: .75rem; line-height: 1; padding: .2rem .45rem; border-radius: 999px;
  background: var(--moraine-2); color: var(--roche); font-variant-numeric: tabular-nums;
}
.refresh-bar { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.refresh-bar p { font-size: .85rem; }
.refreshed { font-size: .85rem; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }

/* --- accueil : ce qui s'y branche ------------------------------------------ */
.fits { margin-top: 4.5rem; max-width: 52rem; }
.fits h2 { margin-bottom: 1.25rem; }
.fits-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.fits-list li { padding: 1rem 1.15rem; border: 1px solid var(--moraine); border-radius: var(--r-panneau); background: var(--neve); color: var(--roche); line-height: 1.55; }
.fits-list b { display: block; color: var(--sapin); margin-bottom: .3rem; }
.fits-note { margin-top: 1rem; color: var(--roche); font-size: .92rem; line-height: 1.6; max-width: 68ch; }
.fits-note a { color: var(--sapin); font-weight: 700; }
.doc-sub { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }