/* Diavi, appliqué à Swagger UI — mise en page comprise.
 *
 * Première tentative : recolorer. Résultat honnête, et le retour était juste
 * — la page restait laide, parce que ce n'était pas la couleur le problème.
 * Le contenu courait d'un bord à l'autre sur toute la largeur de l'écran,
 * soit des lignes de 180 caractères ; tout le texte vivait à 13 px sans
 * hiérarchie ; et un bandeau blanc coupait la page en deux.
 *
 * Cette feuille refait donc la MISE EN PAGE, pas seulement la palette :
 *   · une colonne de lecture bornée, autour de 75 caractères ;
 *   · une échelle typographique réelle, avec des titres qui sont des titres ;
 *   · un rythme vertical qui sépare les sections au lieu de les empiler ;
 *   · des opérations qui respirent.
 *
 * Ce qu'on ne touche pas : le comportement. Swagger UI garde son panneau
 * « Try it out », qui est la raison de l'utiliser plutôt que d'écrire un
 * rendu maison — un lecteur qui peut essayer un appel depuis la page
 * comprend l'API en une minute au lieu de dix.
 *
 * Suit le thème du lecteur. Pas de bascule : il n'y a pas de coquille
 * applicative ici pour la porter, et une page de documentation qui ignore un
 * lecteur en mode sombre est celle qu'on referme.
 */

/* ── Jetons ──────────────────────────────────────────────────────────
 * Les valeurs exactes de frontend/src/index.css, recopiées et non
 * importées : un e-mail ou une page servie hors de l'application ne doit
 * pas changer d'apparence parce que quelqu'un a retouché le thème du
 * produit sans y penser. */

/* Inter and IBM Plex Mono (#134), the application's pair, served by the
   same domain — the page loads nothing from a third party. */
@font-face { font-family: Inter; src: url('/fonts/Inter-Variable-latin.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-600-latin.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
  --dv-base:      rgb(245 243 239);
  --dv-surface:   rgb(255 255 255);
  --dv-raised:    rgb(241 238 232);
  --dv-border:    rgb(229 225 217);
  --dv-line:      rgb(140 135 126);
  --dv-text:      rgb(37 40 43);
  --dv-soft:      rgb(82 86 91);
  --dv-faint:     rgb(98 102 108);
  --dv-accent:    rgb(166 83 49);
  --dv-on-accent: rgb(255 255 255);
  --dv-success:   rgb(40 117 72);
  --dv-warning:   rgb(142 96 12);
  --dv-danger:    rgb(180 50 42);
  --dv-info:      rgb(52 92 168);
  --dv-code:      rgb(241 238 232);
  --dv-pill-bg:   rgb(82 86 91);
  --dv-pill-text: rgb(255 255 255);
  --dv-on-chip:   rgb(255 255 255);

  /* La colonne de lecture. 52rem donne environ 75 caractères sur le corps
   * de texte — la largeur au-delà de laquelle l'œil perd la ligne suivante.
   * Les blocs de code et les tableaux la débordent volontairement. */
  --dv-col:  52rem;
  --dv-wide: 64rem;
}

@media (prefers-color-scheme: dark) {
  /* Garde `:not([data-theme="light"])` : un choix explicite du lecteur doit
   * l'emporter sur le réglage de son système, dans les deux sens. */
  :root:not([data-theme="light"]) {
    --dv-base:      rgb(23 26 29);
    --dv-surface:   rgb(32 36 40);
    --dv-raised:    rgb(39 44 49);
    --dv-border:    rgb(46 51 57);
    --dv-line:      rgb(112 120 128);
    --dv-text:      rgb(242 240 237);
    --dv-soft:      rgb(190 193 197);
    --dv-faint:     rgb(160 165 171);
    --dv-accent:    rgb(218 153 111);
    --dv-on-accent: rgb(31 26 22);
    --dv-success:   rgb(110 193 141);
    --dv-warning:   rgb(222 178 84);
    --dv-danger:    rgb(241 140 128);
    --dv-info:      rgb(144 177 236);
    --dv-code:      rgb(20 23 26);
    --dv-pill-bg:   rgb(190 193 197);
    --dv-pill-text: rgb(31 26 22);
    --dv-on-chip:   rgb(31 26 22);
  }
}

:root[data-theme="dark"] {
    --dv-base:      rgb(23 26 29);
    --dv-surface:   rgb(32 36 40);
    --dv-raised:    rgb(39 44 49);
    --dv-border:    rgb(46 51 57);
    --dv-line:      rgb(112 120 128);
    --dv-text:      rgb(242 240 237);
    --dv-soft:      rgb(190 193 197);
    --dv-faint:     rgb(160 165 171);
    --dv-accent:    rgb(218 153 111);
    --dv-on-accent: rgb(31 26 22);
    --dv-success:   rgb(110 193 141);
    --dv-warning:   rgb(222 178 84);
    --dv-danger:    rgb(241 140 128);
    --dv-info:      rgb(144 177 236);
    --dv-code:      rgb(20 23 26);
    --dv-pill-bg:   rgb(190 193 197);
    --dv-pill-text: rgb(31 26 22);
    --dv-on-chip:   rgb(31 26 22);
  }

/* ── Fondations ─────────────────────────────────────────────────────── */

/* Swagger sets sans-serif on its headings, tags and buttons with selectors
   more specific than .swagger-ui; Inter is restated there (#134). Code
   keeps IBM Plex Mono through the rules further down. */
.swagger-ui .info .title, .swagger-ui .info, .swagger-ui .opblock-tag,
.swagger-ui .opblock .opblock-summary-description, .swagger-ui .markdown,
.swagger-ui h1, .swagger-ui h2, .swagger-ui h3, .swagger-ui h4, .swagger-ui h5,
.swagger-ui table, .swagger-ui .btn, .swagger-ui label, .swagger-ui input,
.swagger-ui select, .swagger-ui .model-title, .swagger-ui .response-col_status,
.swagger-ui .tab li, .swagger-ui .parameter__name, .swagger-ui .scheme-container {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body { background: var(--dv-base) !important; margin: 0; }

.swagger-ui {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--dv-text) !important;
  font-size: 15px;
  line-height: 1.65;
}

/* La colonne. Swagger empile ses sections dans des `.wrapper` pleine
 * largeur : c'est là qu'on borne, une fois, plutôt que sur chaque bloc. */
.swagger-ui .wrapper,
.swagger-ui .information-container .info,
.swagger-ui .scheme-container .schemes {
  max-width: var(--dv-wide) !important;
  margin-inline: auto !important;
  padding-inline: 2rem !important;
  box-sizing: border-box;
}

/* Le texte d'accueil se lit, donc il se borne plus court que les blocs
 * d'opération, qu'on parcourt. */
.swagger-ui .info .renderedMarkdown > p,
.swagger-ui .info .renderedMarkdown > ul,
.swagger-ui .info .renderedMarkdown > ol { max-width: var(--dv-col); }

.swagger-ui .information-container { padding: 3rem 0 1rem; }

/* Swagger cache la barre du haut ; on retire aussi les filets qui
 * découpaient la page sans rien séparer. */
.swagger-ui .topbar { display: none; }

/* ── Titre ──────────────────────────────────────────────────────────── */

.swagger-ui .info .title {
  font-size: 2.4rem !important;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--dv-text) !important;
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.swagger-ui .info .title small,
.swagger-ui .info .title small.version-stamp {
  background: var(--dv-pill-bg);
  color: var(--dv-pill-text);
  border-radius: 999px;
  padding: .2em .65em;
  font-size: .34em;
  font-weight: 600;
  letter-spacing: .04em;
}
.swagger-ui .info .title small.version-stamp { background: var(--dv-accent); color: var(--dv-on-accent); }

/* Le `<pre>` que Swagger niche dans la pastille : la règle générique sur
 * `.info pre` le repeignait en fond clair pendant que le texte restait
 * blanc — deux pastilles vides, que j'avais fabriquées moi-même. */
.swagger-ui .info .title small pre.version {
  background: none !important;
  border: 0; padding: 0; margin: 0;
  color: inherit; font-size: 1em;
}

.swagger-ui .info hgroup.main a { color: var(--dv-faint) !important; font-size: .8rem; }
.swagger-ui .info .description > p:first-of-type {
  font-size: 1.15rem; color: var(--dv-soft) !important; max-width: var(--dv-col);
}

/* ── Prose ──────────────────────────────────────────────────────────── */

.swagger-ui .info .renderedMarkdown h2 {
  font-size: 1.55rem !important;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dv-text) !important;
  margin: 3.2rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--dv-text);
  max-width: var(--dv-col);
}
.swagger-ui .info .renderedMarkdown h3 {
  font-size: 1.1rem !important; font-weight: 600;
  color: var(--dv-text) !important; margin: 2rem 0 .5rem;
}
.swagger-ui .info .renderedMarkdown p,
.swagger-ui .info .renderedMarkdown li { color: var(--dv-text) !important; }
.swagger-ui .info .renderedMarkdown p { margin: 0 0 1rem; }
.swagger-ui .info .renderedMarkdown li { margin-bottom: .35rem; }
.swagger-ui .info a, .swagger-ui a.nostyle { color: var(--dv-accent) !important; }

/* Code — en ligne et en bloc. Une taille lisible, une gouttière, et un
 * défilement propre plutôt qu'un débordement. */
.swagger-ui .renderedMarkdown code,
.swagger-ui .info code {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace !important;
  background: var(--dv-code);
  color: var(--dv-accent);
  border: 1px solid var(--dv-border);
  padding: .08em .38em; border-radius: 5px;
  font-size: .86em;
}
.swagger-ui .info pre, .swagger-ui .renderedMarkdown pre {
  background: var(--dv-code) !important;
  border: 1px solid var(--dv-border);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.4rem;
  overflow-x: auto;
  max-width: var(--dv-wide);
  font-size: .84rem; line-height: 1.6;
}
.swagger-ui .info pre code, .swagger-ui .renderedMarkdown pre code {
  background: none; border: 0; padding: 0;
  color: var(--dv-text); font-size: 1em;
}

/* Le tableau des codes de retour. */
.swagger-ui .renderedMarkdown table {
  border-collapse: collapse; width: 100%;
  max-width: var(--dv-wide); margin: 0 0 1.6rem; font-size: .92rem;
}
.swagger-ui .renderedMarkdown th,
.swagger-ui .renderedMarkdown td {
  border-bottom: 1px solid var(--dv-border);
  padding: .6rem .9rem .6rem 0; text-align: start; vertical-align: top;
}
.swagger-ui .renderedMarkdown th {
  color: var(--dv-faint) !important;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; border-bottom-color: var(--dv-line);
}
.swagger-ui .renderedMarkdown td:first-child { white-space: nowrap; }

/* ── Le bandeau « Servers » ─────────────────────────────────────────── */
/* Il coupait la page d'un bloc blanc pleine largeur. Ramené à une ligne
 * discrète, dans la colonne comme le reste. */
.swagger-ui .scheme-container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 1.5rem 0 0;
  margin: 0 0 1rem;
}
.swagger-ui .scheme-container .schemes { padding-inline: 2rem !important; }
.swagger-ui .scheme-container .schemes-title,
.swagger-ui .scheme-container label > span {
  color: var(--dv-faint) !important;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
}

/* ── Sections d'opérations ──────────────────────────────────────────── */

.swagger-ui .opblock-tag-section { margin-bottom: 2.4rem; }

.swagger-ui .opblock-tag {
  font-size: 1.3rem !important; font-weight: 700;
  letter-spacing: -.015em;
  color: var(--dv-text) !important;
  border-bottom: 1px solid var(--dv-border);
  padding: 0 0 .7rem; margin: 0 0 1rem;
}
.swagger-ui .opblock-tag small {
  color: var(--dv-soft) !important; font-size: .68em; font-weight: 400;
  letter-spacing: 0; padding-inline-start: .7rem;
}
.swagger-ui .opblock-tag:hover { background: transparent; }

.swagger-ui .opblock {
  background: var(--dv-surface) !important;
  border: 1px solid var(--dv-border) !important;
  border-radius: 12px;
  box-shadow: none !important;
  margin: 0 0 .7rem;
  overflow: hidden;
}
.swagger-ui .opblock .opblock-summary {
  background: transparent !important;
  border: 0 !important;
  padding: .85rem 1rem;
  gap: .85rem;
  align-items: center;
}
.swagger-ui .opblock .opblock-summary-method {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  border-radius: 7px; min-width: 4.6rem; padding: .42rem 0;
  text-shadow: none !important;
  color: var(--dv-on-chip) !important;
}
.swagger-ui .opblock.opblock-get .opblock-summary-method    { background: var(--dv-info) !important; }
.swagger-ui .opblock.opblock-post .opblock-summary-method   { background: var(--dv-success) !important; }
.swagger-ui .opblock.opblock-delete .opblock-summary-method { background: var(--dv-danger) !important; }
.swagger-ui .opblock.opblock-put .opblock-summary-method    { background: var(--dv-warning) !important; }

.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .93rem; font-weight: 500;
  color: var(--dv-text) !important;
}
.swagger-ui .opblock .opblock-summary-description {
  color: var(--dv-soft) !important; font-size: .88rem;
}

/* Le corps d'une opération ouverte. Swagger y applique une teinte par verbe
 * et un blanc translucide sur les bandeaux : le verbe porte déjà la couleur,
 * la répéter sur toute la surface délave le contenu. */
.swagger-ui .opblock.opblock-get,
.swagger-ui .opblock.opblock-post,
.swagger-ui .opblock.opblock-put,
.swagger-ui .opblock.opblock-delete,
.swagger-ui .opblock .opblock-body,
.swagger-ui .opblock .opblock-section,
.swagger-ui .opblock .responses-wrapper,
.swagger-ui .responses-inner { background: var(--dv-surface) !important; }

.swagger-ui .opblock-description-wrapper,
.swagger-ui .opblock-external-docs-wrapper,
.swagger-ui .opblock-title_normal { background: transparent !important; padding: 1rem 1rem 0; }
.swagger-ui .opblock-description-wrapper p { color: var(--dv-text) !important; font-size: .93rem; }

.swagger-ui .opblock .opblock-section-header {
  background: var(--dv-raised) !important;
  border-bottom: 1px solid var(--dv-border);
  box-shadow: none !important;
  padding: .7rem 1rem;
  min-height: 0;
}
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header h4 span,
.swagger-ui .opblock .opblock-section-header label,
.swagger-ui .opblock .opblock-section-header label span,
.swagger-ui .opblock-title, .swagger-ui .opblock-title span,
.swagger-ui table thead tr th, .swagger-ui table thead tr td {
  color: var(--dv-text) !important;
  font-size: .82rem; letter-spacing: .04em;
}

/* ── Réponses et exemples ───────────────────────────────────────────── */

.swagger-ui table.responses-table { margin: 0; }
.swagger-ui table.responses-table td,
.swagger-ui table.responses-table th {
  border-color: var(--dv-border) !important;
  padding: .8rem 1rem; vertical-align: top;
}
.swagger-ui .response-col_status {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .88rem; color: var(--dv-text) !important;
}
.swagger-ui .response-col_description__inner div.renderedMarkdown,
.swagger-ui .response-col_description__inner div.markdown {
  background: transparent !important; color: var(--dv-text) !important;
  font-size: .9rem; padding: 0;
}

.swagger-ui .highlight-code,
.swagger-ui .highlight-code > .microlight,
.swagger-ui .example .microlight,
.swagger-ui .body-param__example,
.swagger-ui .model-example {
  background: var(--dv-code) !important;
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.swagger-ui .microlight,
.swagger-ui .microlight code,
.swagger-ui .microlight span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  color: var(--dv-text) !important;
  text-shadow: none !important;
  font-size: .82rem !important; line-height: 1.6;
}

/* ── Contrôles ──────────────────────────────────────────────────────── */

.swagger-ui select,
.swagger-ui input[type=text],
.swagger-ui textarea {
  background: var(--dv-raised) !important;
  color: var(--dv-text) !important;
  border: 1px solid var(--dv-line) !important;
  border-radius: 8px; box-shadow: none !important;
  font-family: inherit; font-size: .88rem; padding: .5rem .7rem;
}
.swagger-ui textarea.body-param__text {
  background: var(--dv-code) !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}

.swagger-ui .btn {
  border-radius: 8px; box-shadow: none !important;
  border-color: var(--dv-line); color: var(--dv-text);
  font-weight: 600; font-size: .85rem; padding: .5rem 1rem;
}
.swagger-ui .btn.execute {
  background: var(--dv-accent) !important;
  border-color: var(--dv-accent) !important;
  color: var(--dv-on-accent) !important;
  width: auto; margin: 1rem;
}
.swagger-ui .btn.try-out__btn,
.swagger-ui .btn.cancel { color: var(--dv-danger); border-color: var(--dv-danger); }
.swagger-ui .btn.authorize { color: var(--dv-accent); border-color: var(--dv-accent); }
.swagger-ui .btn.authorize svg { fill: var(--dv-accent); }

/* ── Détails secondaires ────────────────────────────────────────────── */

.swagger-ui section.models,
.swagger-ui section.models .model-container {
  background: var(--dv-surface) !important;
  border-color: var(--dv-border) !important;
  border-radius: 12px;
}
.swagger-ui section.models h4,
.swagger-ui section.models h4 span,
.swagger-ui .models-control,
.swagger-ui .model-box-control { color: var(--dv-text) !important; }
.swagger-ui .model-box { background: var(--dv-raised); border-radius: 8px; }

.swagger-ui .parameter__name,
.swagger-ui label, .swagger-ui .tab li { color: var(--dv-text) !important; }
.swagger-ui .parameter__type,
.swagger-ui .parameter__in,
.swagger-ui .prop-format,
.swagger-ui .response-col_links,
.swagger-ui h4.message,
.swagger-ui .examples-select__section-label,
.swagger-ui .example__section-header,
.swagger-ui .response-control-media-type__accept-message,
.swagger-ui .response-control-media-type__accept-message code,
.swagger-ui .tab li button.tablinks { color: var(--dv-soft) !important; }

.swagger-ui svg.arrow { fill: var(--dv-text); }
.swagger-ui .expand-methods svg,
.swagger-ui .expand-operation svg { fill: var(--dv-soft); }

/* Une cible de focus visible : la page se parcourt aussi au clavier. */
.swagger-ui a:focus-visible,
.swagger-ui button:focus-visible,
.swagger-ui select:focus-visible,
.swagger-ui input:focus-visible,
.swagger-ui textarea:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .swagger-ui .wrapper,
  .swagger-ui .information-container .info,
  .swagger-ui .scheme-container .schemes { padding-inline: 1.2rem !important; }
  .swagger-ui .info .title { font-size: 1.9rem !important; }
}

/* ── Trois écarts relevés par mesure après la refonte ────────────────
 * Un audit de contraste dans le navigateur, pas un jugement à l'œil : il
 * nomme le sélecteur et le ratio, ce qu'aucune relecture ne fait. */

/* 1. `--dv-faint` tombait à 3,43:1 sur du 11 px — sous le seuil AA. Ces
 *    deux-là portent de l'information (l'adresse du schéma, l'en-tête du
 *    tableau des codes), donc ils se lisent. */
.swagger-ui .info hgroup.main a,
.swagger-ui .info hgroup.main a span.url,
.swagger-ui .renderedMarkdown th { color: var(--dv-soft) !important; }

/* 2. En thème sombre, les cellules du tableau de prose restaient sur le
 *    gris littéral de Swagger : 1,49:1, soit illisible. La règle posait la
 *    bordure sans reprendre la couleur — un fond et le texte posé dessus se
 *    décident ensemble, jamais l'un après l'autre. */
.swagger-ui .renderedMarkdown td,
.swagger-ui .renderedMarkdown td strong,
.swagger-ui .renderedMarkdown td em { color: var(--dv-text) !important; }

/* 3. Les titres de section (Account, Issues, Runs) sont des `<a>` : la règle
 *    générique sur les liens les peignait en accent, si bien qu'ils se
 *    lisaient comme des liens vers ailleurs. Ce sont des titres, au même
 *    titre que les `h2` du texte d'accueil, et ils s'écrivent pareil. */
.swagger-ui .opblock-tag,
.swagger-ui .opblock-tag a,
.swagger-ui .opblock-tag span { color: var(--dv-text) !important; }
.swagger-ui .opblock-tag small,
.swagger-ui .opblock-tag small a { color: var(--dv-soft) !important; }


/* ── Le sélecteur de thème ───────────────────────────────────────────
 * Absent au départ, et la raison que je m'étais donnée — « il n'y a pas de
 * coquille applicative pour le porter » — était une excuse : un lecteur dont
 * le système est en clair mais qui préfère le sombre n'avait aucun recours.
 *
 * Trois états et non deux : « système » est le défaut et doit rester
 * atteignable, sinon un choix fait un jour enferme le lecteur pour toujours.
 */
.dv-theme {
  position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 50;
  display: flex; gap: 2px; padding: 3px;
  background: var(--dv-surface);
  border: 1px solid var(--dv-border);
  border-radius: 10px;
}
.dv-theme button {
  all: unset;
  cursor: pointer;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 7px;
  color: var(--dv-soft);
  font-size: .82rem; line-height: 1;
}
.dv-theme button:hover { background: var(--dv-raised); color: var(--dv-text); }
.dv-theme button[aria-pressed="true"] {
  background: var(--dv-accent); color: var(--dv-on-accent);
}
.dv-theme button:focus-visible { outline: 2px solid var(--dv-accent); outline-offset: 2px; }

@media (max-width: 48rem) { .dv-theme { top: .5rem; inset-inline-end: .5rem; } }