/* ============================================================
   ERP+ : Coquille doc-shell et documentation API (V1.3)

   Feuille de coquille de la documentation API (/api-docs ; migration
   #392, refs #364). Porte PAR-DESSUS le trio canonique erp-tokens.css /
   erp-typography.css / erp-components.css :
     1. la coquille .doc-shell 3 rails [sidenav marine socle | centre |
        rail droit d'ancres], kit system.css section 9 ;
     2. le bloc code pre.code-block et ses tokens de coloration .tok-* ;
     3. les badges de verbe HTTP .http-method et .endpoint-path ;
     4. le selecteur de langage .code-group (fiche catalogue "Selecteur
        de langage du bloc code V1.3", composant #392) ;
     5. le rythme de prose du rail central (.doc-prose).

   Doctrine (SKILL) : aucune couleur en dur, toute couleur passe par
   var(--erp-*), tout espacement par var(--sp-*), toute police par
   var(--erp-font-*). Zero creation de token. La nav marine (.sidenav),
   le controle mobile (.app-nav-toggle) et le hamburger (.app-hamburger)
   sont fournis par le socle erp-components.css (DA13), non redeclares.
   ============================================================ */

/* ------------------------------------------------------------
   1. Coquille 3 colonnes [rail gauche | centre | rail droit]
   (rail droit optionnel via le modificateur --no-right)
   Full-bleed comme la base du kit (system.css, body { margin: 0 }) :
   le socle DA16 ne reset que box-sizing, chaque feuille de coquille
   porte son reset de marge body (sinon la sidenav flotte dans la
   marge UA 8px au lieu d'affleurer le bord du viewport).
   ------------------------------------------------------------ */
body { margin: 0; }
.doc-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; align-items: start; min-height: 100vh; }
.doc-shell--no-right { grid-template-columns: 240px minmax(0, 1fr); }
.doc-shell__rail-right {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  padding: var(--sp-7) var(--sp-5); border-left: 1px solid var(--erp-rule);
  background: var(--erp-cream-soft);
}
.doc-shell__center { min-width: 0; }
.doc-shell__inner { max-width: 760px; margin: 0 auto; padding: var(--sp-8) var(--sp-7) var(--sp-9); }
@media (max-width: 1180px) {
  .doc-shell, .doc-shell--no-right { grid-template-columns: 240px minmax(0, 1fr); }
  .doc-shell__rail-right { display: none; }
}
@media (max-width: 900px) {
  .doc-shell, .doc-shell--no-right { grid-template-columns: 1fr; }
  .doc-shell__inner { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  .doc-hamburger { margin-bottom: var(--sp-5); }
}

/* ------------------------------------------------------------
   2. Rail droit "Sur cette page" : ancres de section. Les ids
   ancrables vivent sur les titres de section du rail central,
   jamais dans un .code-group (regle b de la fiche selecteur).
   ------------------------------------------------------------ */
.rail-meta__label {
  font-family: var(--erp-font-sans); font-weight: 600; font-size: 11px; letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase; color: var(--erp-terracotta-text); margin: 0 0 var(--sp-3);
}
.rail-meta__link { display: block; padding: 6px 0; font-family: var(--erp-font-sans); font-size: 13px; color: var(--erp-fg-3); text-decoration: none; }
.rail-meta__link:hover { color: var(--erp-terracotta-dk); }

/* ------------------------------------------------------------
   3. Bloc code (marine-deep) et tokens de coloration
   ------------------------------------------------------------ */
.code-block {
  background: var(--erp-marine-deep); color: var(--erp-fg-on-marine);
  border-radius: var(--radius-1); padding: var(--sp-5); overflow-x: auto;
  font-family: var(--erp-font-mono); font-size: 13px; line-height: 1.6;
  margin: 0;
}
.code-block .tok-key { color: var(--erp-terracotta-lt); }
.code-block .tok-str { color: var(--erp-cream); }
.code-block .tok-dim { color: var(--erp-fg-on-marine); opacity: 0.55; }

/* ------------------------------------------------------------
   4. Badges de verbe HTTP et chemin d'endpoint
   ------------------------------------------------------------ */
.http-method {
  font-family: var(--erp-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: var(--radius-1); color: var(--erp-white);
}
.http-method--post { background: var(--erp-terracotta); }
.http-method--get { background: var(--erp-marine-soft); }
.http-method--put { background: var(--erp-cream-deep); color: var(--erp-fg-1); }
.http-method--del { background: var(--erp-marine-deep); border-left: 3px solid var(--erp-terracotta); }
.endpoint-path { font-family: var(--erp-font-mono); font-size: 15px; color: var(--erp-fg-1); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* Ligne d'endpoint du sommaire de reference : badge + chemin + description. */
.doc-endpoint {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--erp-rule);
}
.doc-endpoint__desc { font-family: var(--erp-font-sans); font-size: 13px; color: var(--erp-fg-3); margin-left: auto; }
@media (max-width: 600px) { .doc-endpoint__desc { margin-left: 0; flex-basis: 100%; } }

/* ------------------------------------------------------------
   5. Selecteur de langage du bloc code (.code-group, fiche
   catalogue V1.3, composant #392). Barre d'onglets SOLIDAIRE du
   bloc : marine cousu au marine-deep par une couture marine-line,
   rayon commun porte par le groupe. Etat actif : encre pleine +
   filet bas terracotta 2px, graisse constante 600 (jamais de
   reflow). Repos : fg-on-marine a 0.62. Focus clavier : outline
   identique .sidenav__item. En debord, la barre defile
   horizontalement (ascenseur masque), cible tactile 44px tenue.
   ------------------------------------------------------------ */
.code-group { border-radius: var(--radius-1); overflow: hidden; }
.code-group__bar {
  display: flex; align-items: stretch; gap: var(--sp-2);
  background: var(--erp-marine);
  border-bottom: 1px solid var(--erp-marine-line);
  padding: 0 var(--sp-3);
  overflow-x: auto; scrollbar-width: none;
}
.code-group__bar::-webkit-scrollbar { display: none; }
.code-group__tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 var(--sp-3); flex: none;
  font-family: var(--erp-font-sans); font-size: 13px; font-weight: 600;
  color: var(--erp-fg-on-marine); opacity: 0.62;
  border-top: 2px solid transparent;          /* equilibre optique du filet bas */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: opacity 120ms ease;
}
.code-group__tab:hover { opacity: 1; }
.code-group__tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--erp-terracotta); }
.code-group__tab:focus-visible { outline: 2px solid var(--erp-focus-ring); outline-offset: -2px; }
.code-group > .code-block { margin: 0; border-radius: 0; }

/* ------------------------------------------------------------
   6. Rythme de prose du rail central (.doc-prose)
   ------------------------------------------------------------ */
.doc-prose h3 { margin-top: var(--sp-7); }
.doc-prose h4 {
  font-family: var(--erp-font-sans); font-weight: 600; font-size: var(--t-body);
  color: var(--erp-fg-1); margin: var(--sp-6) 0 0;
}
.doc-prose p {
  font-family: var(--erp-font-sans); font-size: var(--t-small); line-height: 1.65;
  color: var(--erp-fg-2); margin: var(--sp-3) 0 0;
}
.doc-prose ul {
  font-family: var(--erp-font-sans); font-size: var(--t-small); line-height: 1.65;
  color: var(--erp-fg-2); margin: var(--sp-3) 0 0; padding-left: var(--sp-5);
}
.doc-prose li { margin-top: var(--sp-1); }
.doc-prose a { color: var(--erp-terracotta-text); text-decoration: underline; text-underline-offset: 2px; }
.doc-prose a:hover { color: var(--erp-terracotta-dk); }
.doc-prose code { font-family: var(--erp-font-mono); font-size: 0.92em; color: var(--erp-terracotta-text); }
.doc-prose .code-block code, .doc-prose .endpoint-path code { color: inherit; }
.doc-prose strong { color: var(--erp-fg-1); }
.doc-prose .erp-table { margin-top: var(--sp-4); }