/* ══════════════════════════════════════════════════════════════════════════
   API ET WEBHOOKS — ce qui est propre à la page

   Le reste vient de page.css. Cette page avait été écrite avant la refonte :
   quatre cartes en rang pour le flux, trois pour la sécurité, deux tableaux
   plats, et des blocs de code dans un bleu nuit #101a2a qui venait d'ailleurs
   que du site. Tout ce qui pouvait passer sur le socle y est passé ; il reste
   ici les trois choses qu'aucune autre page n'a besoin de savoir faire :
   le trajet d'un appel, les fenêtres de code, et la carte de l'API.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Le trajet d'un appel ─────────────────────────────────────────────────
   Le sujet de la page en une image : ce qui part du combiné arrive dans le
   système d'en face, scellé. Quatre stations sur un rail, et le paquet qui
   le parcourt. Aplats pleins, aucun dégradé — le relief vient des ombres. */
.dv-scene { margin: 0 0 clamp(30px, 4vw, 44px); }
.dv-scene svg {
  display: block; width: 100%; height: auto;
  border-radius: 26px; background: var(--pg-creux);
  box-shadow: var(--pg-creuse);
}
/* Le paquet glisse d'une station à l'autre. Une translation, pas un
   `animateMotion` : on peut la couper proprement au goût de l'utilisateur. */
@keyframes dv-court {
  0%        { transform: translateX(0); opacity: 0; }
  6%, 26%   { opacity: 1; }
  32%, 100% { transform: translateX(784px); opacity: 0; }
}
.dv-paquet { animation: dv-court 7s var(--pg-ease) infinite; }
/* En étroit, le rail de 1 100 px ne se lit plus : les libellés tombent à
   quatre pixels. Plutôt que de faire défiler l'image principale de la page
   horizontalement, le téléphone reçoit le même trajet en flux vertical — le
   composant du socle, celui qui tient la ligne entre les pastilles. Les deux
   disent la même chose ; un seul est dans l'arbre à la fois. */
.dv-flux-mob { display: none; margin-top: 4px; }

.dv-legende {
  margin: 14px auto 0; max-width: 62ch; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--pg-ink3);
}

/* ── La fenêtre de code ───────────────────────────────────────────────────
   Une barre de titre qui dit la méthode et le chemin, et un bouton qui
   copie. Sur une page d'API, c'est le geste qu'on vient faire ; le laisser
   à la sélection à la souris, c'était l'oublier. */
.dv-code {
  border-radius: 20px; overflow: hidden; background: #16181F;
  box-shadow: 0 22px 48px -22px rgba(22, 24, 31, .58);
}
.dv-code-barre {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #1E212A;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dv-code-chemin {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: rgba(236, 239, 245, .78);
}
.dv-copier {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: none; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .09); color: #ECEFF5;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  transition: background .2s var(--pg-ease), color .2s var(--pg-ease);
}
.dv-copier svg { width: 13px; height: 13px; }
.dv-copier:hover { background: rgba(255, 255, 255, .17); }
.dv-copier:focus-visible { outline: 2px solid #068FFF; outline-offset: 2px; }
.dv-copier[data-fait="oui"] { background: #00D084; color: #16181F; }
.dv-code pre {
  margin: 0; padding: 22px 24px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; color: #DBE6F5; white-space: pre;
}
/* Les quatre encres du code, toutes au-dessus de 4,5:1 sur #16181F. */
.dv-code .c-key { color: #9ECFFF; }
.dv-code .c-str { color: #7EE0B8; }
.dv-code .c-num { color: #FFBE7A; }
.dv-code .c-com { color: #8595AD; }

/* ── Les gélules de méthode ───────────────────────────────────────────────
   Un aplat par verbe, encre sombre par-dessus : bleu 5,39:1, rose 8,8:1,
   orange 6,24:1, plaque 9,46:1. C'est le seul endroit de la page où les
   couleurs pures sont utilisées, et elles y sont un CODE, pas un décor. */
.dv-meth {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 5px 9px; border-radius: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--pg-plaque); color: #16181F;
}
.dv-meth--get    { background: #068FFF; }
.dv-meth--post   { background: #FF91E4; }
.dv-meth--patch  { background: #FF6B2B; }
.dv-meth--delete { background: var(--pg-plaque); }

/* ── La carte de l'API ────────────────────────────────────────────────────
   Treize ressources : c'est une table de référence, et vouloir la déplier en
   liste aurait donné une page sans fin. Elle reste donc une table, mais
   groupée par domaine — on cherche « les rendez-vous », pas la neuvième
   ligne. Le chemin porte sa gélule de méthode ; le reste est une phrase. */
.dv-api { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--pg-carte); border-radius: 20px; overflow: hidden;
  box-shadow: var(--pg-porte); }
.dv-api th, .dv-api td { text-align: left; padding: 15px 22px; font-size: 14px; }
.dv-api thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pg-ink3); background: var(--pg-plaque);
}
.dv-api tbody td { border-top: 1.5px dashed var(--pg-trait); color: var(--pg-ink2); line-height: 1.55; }
.dv-api tbody td b { color: var(--pg-ink); font-weight: 700; }
.dv-api-groupe th {
  padding: 18px 22px 9px; background: transparent;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pg-bleu-s); border-top: 1.5px dashed var(--pg-trait);
}
.dv-api-groupe:first-child th { border-top: 0; }
.dv-api-groupe + tr td { border-top: 0; }
.dv-route { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-route code, .dv-api code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; color: var(--pg-ink); white-space: nowrap;
}
.dv-api td:first-child { width: 42%; }

/* ── Le nom d'un événement ──
   Dans la liste à pointillés, le titre est un identifiant : il se compose en
   chasse fixe, sinon il se lit comme un titre de section. */
.dv-evt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* ── L'encadré de remarque ── */
.dv-note {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  padding: 20px 24px; border-radius: 16px;
  background: var(--pg-creux); box-shadow: var(--pg-creuse);
}
.dv-note-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--pg-carte); box-shadow: var(--pg-porte); color: var(--pg-bleu-s);
}
.dv-note-i svg { width: 18px; height: 18px; }
.dv-note p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--pg-ink2); }
.dv-note p b { color: var(--pg-ink); font-weight: 700; }
.dv-note + .dv-note { margin-top: 14px; }

/* La colonne de code d'une bascule ne doit pas s'étirer à la hauteur du
   texte d'en face : elle se cale en haut. */
.dv-bascule > * { align-items: start; }

@media (max-width: 860px) {
  .dv-api td:first-child { width: auto; }
}
@media (max-width: 760px) {
  .dv-scene-svg { display: none; }
  .dv-flux-mob { display: grid; }
  .dv-legende { text-align: left; margin-top: 22px; }
}
@media (max-width: 620px) {
  .dv-api th, .dv-api td { padding: 13px 15px; font-size: 13px; }
  /* Téléphone : chaque ressource devient un bloc (route, puis ce qu'elle donne)
     au lieu de deux colonnes qui débordent de l'écran. */
  .dv-api, .dv-api thead, .dv-api tbody, .dv-api tr, .dv-api th, .dv-api td { display: block; }
  .dv-api thead { display: none; }
  .dv-api tbody tr:not(.dv-api-groupe) { border-top: 1.5px dashed var(--pg-trait); padding: 6px 0; }
  .dv-api-groupe + tr { border-top: 0; }
  .dv-api tbody td { border-top: 0; padding: 5px 15px; }
  .dv-api td:first-child { width: auto; }
  .dv-api code { white-space: normal; overflow-wrap: anywhere; }
  /* Les blocs de code défilent dans leur cadre au lieu d'élargir la grille. */
  .dv-code, .pg-g2 > *, .pg-bascule > *, .pg-bascule > * > * { min-width: 0; max-width: 100%; }
  /* Le code cité dans le texte peut se couper plutôt que sortir de l'écran. */
  p code, li code { overflow-wrap: anywhere; white-space: normal; }
  .pg-liste li > *, .pg-flux li > * { min-width: 0; }
  .dv-code pre { padding: 18px 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-paquet { animation: none; }
  .dv-copier { transition: none; }
}