/* Section « The endpoints nobody else exposes ».
   Générée par sections/_gen_endpoints.py — ne pas éditer ici,
   modifier sections/_endpoints.tpl.html puis relancer le générateur. */
/* ============================================================
     ENDPOINTS
     Cinq bulles de taille identique, alignées à gauche, et le panneau
     de code à droite, à la même hauteur : la carte cliquée et son code
     sont toujours à l'écran en même temps, rien ne saute.

     Bascule 100 % CSS (radio + :has()) : les cinq requêtes/réponses
     restent dans le HTML source, lisibles par les crawlers AI sans JS.
     Chaque radio est positionné DANS sa carte : au clic, le focus reste
     à hauteur de la carte au lieu de ramener le scroll en haut.

     Fichier généré : éditer _endpoints.tpl.html (mise en page) ou
     _gen_endpoints.py (contenu), puis relancer :
       python3 sections/_gen_endpoints.py
     ============================================================ */
  /* Même fond que le témoignage : blanc cassé, grille de points gris. */
  .api {
    position: relative; isolation: isolate;
  }
  .api > .container { position: relative; z-index: 1; }

  /* ---------- En-tête éditorial, aligné à gauche ---------- */
  .api__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
  .api__head .badge { margin-bottom: var(--space-md); }
  .api__title { max-width: 24ch; margin-inline: auto; }
  .api__accent { position: relative; white-space: nowrap; }
  /* Soulignement violet retiré : le titre reste nu. */
  .api__lead {
    margin: var(--space-lg) auto 0; max-width: 62ch;
    font-size: var(--fs-lead); color: var(--text-muted);
  }
  .api__lead strong { color: var(--k-purple); font-weight: 600; }

  /* ---------- Deux colonnes, même hauteur ---------- */
  .api__layout {
    display: grid; gap: 0.75rem; align-items: stretch;
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
  }
  /* Le panneau prend la place restante, le bandeau garde sa hauteur :
     la colonne fait exactement la hauteur des cinq bulles. */
  .api__right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.75rem; min-height: 0; }

  /* ---------- Les cinq bulles ---------- */
  .ep-list {
    display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0.625rem;
    margin: 0; padding: 0; list-style: none;
  }
  .ep-item { position: relative; display: grid; }
  /* Dans la carte, donc le focus ne déplace pas le scroll. */
  .ep__radio { position: absolute; inset: 50% auto auto 1rem; width: 1px; height: 1px;
               opacity: 0; pointer-events: none; }

  .ep {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 0.75rem; row-gap: 0.3rem;
    padding: 0.85rem 0.95rem; cursor: pointer;
    background: var(--k-white); border: 1px solid var(--hairline);
    border-radius: 14px;
    transition: border-color 0.18s ease, background-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
  }
  /* Pas de translation au survol : la carte se décalait d'1px, le curseur
     sortait de sa zone, le survol s'annulait et l'état clignotait en boucle.
     Le retour visuel passe par la bordure, l'ombre et la flèche. */
  .ep:hover {
    border-color: rgba(124, 58, 237, 0.38);
    box-shadow: 0 2px 4px rgba(10, 4, 6, 0.03), 0 12px 26px rgba(55, 12, 130, 0.09);
  }
  .ep__meta { grid-column: 1; display: flex; align-items: center; gap: 0.45rem; min-width: 0;
              padding-right: 0.25rem; }
  .ep__verb {
    flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.07em;
    color: var(--k-purple); background: var(--k-purple-bg);
    padding: 0.18rem 0.38rem; border-radius: 5px;
  }
  .ep__path {
    min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Le badge doit se voir de loin : violet plein, capitales, poussé à droite
     pour qu'il tombe toujours au même endroit d'une carte à l'autre. */
  .ep__excl {
    flex: none; margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--k-white); background: var(--k-purple);
    padding: 0.26rem 0.55rem; border-radius: var(--radius-pill);
    box-shadow: 0 1px 2px rgba(55, 12, 130, 0.18), 0 6px 14px rgba(124, 58, 237, 0.26);
  }
  .ep__excl-star { font-size: 0.75rem; line-height: 1; }
  /* Endpoint annoncé mais pas encore livré : volontairement neutre,
     il ne doit pas attirer l'œil comme un « Exclusive ». */
  .ep__soon {
    flex: none; margin-left: auto;
    display: inline-flex; align-items: center;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--k-gray-bg);
    border: 1px solid var(--hairline);
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  }
  .ep__radio:checked + .ep .ep__soon { background: var(--k-white); }
  .ep__name {
    grid-column: 1; margin: 0; font-size: 0.9375rem; line-height: 1.3;
    color: var(--text-primary);
  }
  .ep__go {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; flex: none;
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border-radius: var(--radius-pill); font-size: 0.8rem;
    background: var(--k-gray-bg); color: var(--text-muted);
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .ep:hover .ep__go { background: var(--k-purple); color: var(--k-white); }

  /* Carte sélectionnée : c'est son code qui est affiché à droite. */
  .ep__radio:checked + .ep {
    background: var(--k-purple-bg); border-color: rgba(124, 58, 237, 0.5);
    box-shadow: 0 1px 2px rgba(55, 12, 130, 0.05), 0 12px 26px rgba(55, 12, 130, 0.11);
  }
  .ep__radio:checked + .ep .ep__verb { background: var(--k-purple); color: var(--k-white); }
  .ep__radio:checked + .ep .ep__path { color: var(--k-purple); }
  .ep__radio:checked + .ep .ep__name { color: var(--k-purple-deep); }
  .ep__radio:checked + .ep .ep__excl {
    background: var(--k-purple-deep); color: var(--k-white);
    box-shadow: 0 1px 2px rgba(55, 12, 130, 0.22), 0 6px 14px rgba(55, 12, 130, 0.3);
  }
  .ep__radio:checked + .ep .ep__go { background: var(--k-purple); color: var(--k-white); }
  .ep__radio:focus-visible + .ep { outline: 2px solid var(--k-purple); outline-offset: 3px; }

  /* ---------- Panneau de code ---------- */
  .code {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; margin: 0;
    /* Le panneau prend la hauteur de la colonne de gauche, qui est fixe :
       les cinq bulles ne changent pas, donc rien ne bouge au clic. */
    height: 100%; min-height: 24rem;
    background: rgba(255, 255, 255, 0.94); border: 1px solid var(--hairline);
    border-radius: var(--radius-card); backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(22, 17, 28, 0.2), 0 26px 60px rgba(22, 17, 28, 0.26);
  }
  .code::after { opacity: 0.3; }                /* grain de marque, discret */
  .code__panel { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .code__bar {
    position: relative; z-index: 2; flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: 0.75rem 1.05rem; border-bottom: 1px solid var(--hairline);
  }
  .code__id {
    display: flex; align-items: center; gap: 0.55rem; min-width: 0; overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem; color: var(--text-muted);
  }
  .code__id b {
    flex: none; font-weight: 600; letter-spacing: 0.06em; color: var(--k-purple);
    background: rgba(124, 58, 237, 0.28); padding: 0.15rem 0.4rem; border-radius: 5px;
  }
  .code__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .code__docs {
    display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
    font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    color: var(--k-white); background: var(--k-purple);
    padding: 0.3rem 0.36rem 0.3rem 0.68rem; border-radius: var(--radius-pill);
  }
  .code__docs:hover { background: #6D2FD9; }
  .code__docs span {
    display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
    border-radius: var(--radius-pill); background: var(--k-white); color: var(--k-purple);
    font-size: 0.7rem;
  }

  /* Requête et réponse côte à côte. */
  .code__split {
    position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .code__pane { min-width: 0; overflow: hidden; padding: 0.9rem 1.05rem 1rem; }
  .code__pane + .code__pane { border-left: 1px solid var(--hairline); }
  .code__kicker {
    margin: 0 0 0.55rem; display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #B88EFF;
  }
  .code__kicker::after {
    content: ''; flex: 1 1 auto; height: 1px;
    background: linear-gradient(to right, rgba(184, 142, 255, 0.35), transparent);
  }
  .code__pre {
    margin: 0; white-space: pre; overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem; line-height: 1.68; color: #2A2230;
  }
  .code__pre .k { color: var(--k-purple); }   /* clés */
  .code__pre .s { color: #0B7A3B; }   /* chaînes */
  .code__pre .b { color: #B5179E; }   /* nombres, booléens */
  .code__pre .c { color: #8A8391; }   /* flags de shell */

  .code__split::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 48px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFFFFF 90%);
  }

  /* Bascule : la carte cochée décide du panneau affiché. */
  .api__layout:has(#ep-1:checked) .code__panel[data-for="ep-1"],
  .api__layout:has(#ep-2:checked) .code__panel[data-for="ep-2"],
  .api__layout:has(#ep-3:checked) .code__panel[data-for="ep-3"],
  .api__layout:has(#ep-4:checked) .code__panel[data-for="ep-4"],
  .api__layout:has(#ep-5:checked) .code__panel[data-for="ep-5"],
  .api__layout:has(#ep-6:checked) .code__panel[data-for="ep-6"] { display: flex; }

  /* Sans :has() : le premier panneau reste visible. */
  @supports not selector(:has(*)) {
    .code__panel[data-for="ep-1"] { display: flex; }
  }

  /* ---------- Bandeau comparatif ---------- */
  .rail {
    overflow: hidden; padding: 0.85rem 0 0.95rem;
    background: var(--k-white); border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
  }
  .rail__claim {
    margin: 0 0 0.7rem; text-align: center;
    font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem;
    color: var(--k-purple);
  }
  .rail__viewport {
    overflow: hidden;
    /* Les noms s'effacent sur les bords au lieu d'être coupés net. */
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  /* Un seul écart, partout : le gap du track s'ajoutait au padding de la
     rangée, ce qui doublait le trou au raccord de la boucle. */
  .rail { --rail-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .rail__track {
    display: flex; width: max-content; gap: 0;
    animation: rail-scroll 32s linear infinite;
  }
  .rail__row {
    display: flex; align-items: center; gap: var(--rail-gap);
    margin: 0; padding: 0 0 0 var(--rail-gap); list-style: none;
  }
  .rail__logo { display: flex; align-items: center; }
  .rail__logo img {
    /* Même traitement que la grille de logos clients, un cran plus clair :
       ce sont des concurrents, pas des références. */
    height: 24px; width: auto;
    filter: grayscale(1) brightness(0.55); opacity: 0.7;
  }
  /* Hauteurs optiques : un pictogramme rond ou carré pèse plus qu'un mot. */
  .rail__logo--exa img    { height: 21px; }
  .rail__logo--pearch img { height: 20px; }
  .rail__name {
    font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem;
    color: #8A8391; white-space: nowrap;
  }
  @keyframes rail-scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .rail__track { animation: none !important; transform: none !important;
                   width: 100%; flex-wrap: wrap; justify-content: center; }
    .rail__row:last-child { display: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1080px) {
    .api__layout { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
    .code__split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .code__pane + .code__pane { border-left: 0; border-top: 1px solid var(--hairline); }
  }
  @media (max-width: 860px) {
    /* Une colonne : le code passe au-dessus des cartes, jamais tout en bas. */
    .api__layout { grid-template-columns: 1fr; }
    .api__right { order: -1; grid-template-rows: auto auto; }
    .code { height: auto; }
    /* Plus de hauteur contrainte : le fondu n'a plus rien à masquer. */
    .code__split::after { display: none; }
    .ep-list { grid-template-rows: none; grid-auto-rows: 1fr; }
    .ep-item { min-height: 4.5rem; }
    /* Le code garde ses retours à la ligne : il défile, on ne le rogne pas. */
    .code__pre { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.6875rem; }
    .code__host { display: none; }
  }

  /* Panneau d'un endpoint pas encore livré : pas de faux code, un état clair. */
  .code__soon {
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: 0.75rem; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  }
  .code__soon-badge {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted); background: var(--k-gray-bg);
    border: 1px solid var(--hairline); border-radius: var(--radius-pill);
    padding: 0.25rem 0.7rem;
  }
  .code__soon-t {
    margin: 0.25rem 0 0; font-family: var(--font-display); font-weight: 500;
    font-size: 1.375rem; color: var(--text-primary);
  }
  .code__soon-p { margin: 0; max-width: 34ch; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
  .code__soon-cta { margin-top: 0.5rem; }

  /* « Exclusive » : même matière que les kickers de la marque (fond à grain),
     sans étoile ni halo. Il reste identique, que la carte soit active ou non. */
  .ep__excl,
  .ep__radio:checked + .ep .ep__excl {
    background-image: url('../assets/tag-bg.avif');
    background-size: cover; background-position: 0 0;
    background-color: transparent;
    color: var(--text-primary);
    border-radius: 0.25rem;
    box-shadow: none;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0;
    text-transform: none;
    padding: 0.2rem 0.5rem;
  }