/* Annuaire des intégrations, gabarit « documentation » retenu le 20/09/2026 :
   un rail de gauche (recherche + liste), le contenu déroulé à droite. Remplace
   les 965 fiches, qui n'affichaient ni la phrase de description ni le
   raccordement. Les logos sont servis par propul.group, jamais par un tiers. */

.an {
  --an-marge: clamp(20px, 3.6vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 308px) minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  color: var(--encre);
  background: var(--fond);
  font-family: var(--font-corps);
}

.an *,
.an *::before,
.an *::after { box-sizing: border-box; }

.an h1,
.an h2 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
.an p, .an dl, .an dd, .an ol, .an ul { margin: 0; padding: 0; }
.an li { list-style: none; }
.an a { color: var(--violet); }
.an a:focus-visible,
.an input:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Rail : recherche, liste des outils, sortie vers les 965 */
.an-rail {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  padding: 32px 28px 40px var(--an-marge);
  border-right: 1px solid var(--filet);
}

.an-recherche label { display: block; font-size: .8125rem; color: var(--texte-2); }
.an-recherche input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--encre);
  background: none;
  font: 400 1rem var(--font-corps);
  color: var(--encre);
  padding: 6px 0;
}
.an-recherche input::placeholder { color: #9a94a8; }
.an-compte { margin-top: 8px; font-size: .8125rem; color: var(--texte-2); }

.an-sommaire { margin-top: 18px; }
.an-sommaire a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 0;
  color: var(--encre);
  text-decoration: none;
  font-size: .9375rem;
}
.an-sommaire a:hover { color: var(--violet); }
.an-sommaire a[aria-current] { color: var(--violet); font-weight: 600; }
.an-ailleurs { margin-top: 20px; font-size: .875rem; }
.an-vide { padding: 20px 0; color: var(--texte-2); }

/* Logos hébergés chez nous ; monogramme quand l'éditeur n'en publie pas. */
.an-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.an-mono {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--violet);
  background: var(--violet-fond);
  border-radius: 4px;
}
.an-marque { display: grid; place-items: center; }
.an-sommaire .an-marque { width: 20px; height: 20px; font-size: 11px; }

/* Colonne de lecture */
.an-texte { padding: 56px var(--an-marge) 104px clamp(24px, 3vw, 56px); min-width: 0; }
.an-ariane { display: flex; gap: .6em; font-size: .875rem; color: var(--texte-2); }
.an-ariane a { color: var(--texte-2); text-decoration: none; }
.an h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.07; letter-spacing: -.015em; margin-top: 22px; }
.an-intro { font-size: 1.125rem; line-height: 1.65; color: var(--texte-2); max-width: 66ch; margin-top: 16px; }
.an-savoir { margin-top: 18px; font-size: 1.0625rem; line-height: 1.7; max-width: 66ch; }

/* Ce qu'on sait faire de cette liste : le raccordement, et à qui en parler. */
.an-appel {
  margin-top: 48px;
  padding: 28px clamp(20px, 3vw, 32px);
  background: var(--violet-fond);
  border: 1px solid var(--violet-filet);
  border-radius: var(--r-carte);
  max-width: 72ch;
}
.an-appel h2 { font-size: 1.375rem; margin-bottom: 10px; }
.an-appel p { line-height: 1.7; }
.an-bouton {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: var(--r-bouton);
  background: var(--violet);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.an-bouton:hover { background: color-mix(in srgb, var(--violet) 86%, #000); }

.an-outil {
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--filet);
  max-width: 72ch;
  scroll-margin-top: 104px;
}
.an-titre { display: flex; align-items: center; gap: 14px; }
.an-titre .an-marque { width: 36px; height: 36px; font-size: 17px; }
.an h2 { font-size: 1.5rem; line-height: 1.2; }
.an-phrase { margin: 14px 0; line-height: 1.7; }
.an-branchement { line-height: 1.7; margin-bottom: 14px; }
.an-fiche { border-top: 1px solid var(--grille); }
.an-fiche > div {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--grille);
}
.an-fiche dt { color: var(--texte-2); }
.an-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-weight: 500; font-size: .9375rem; }

.an-note { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--filet); max-width: 72ch; }
.an-note h2 { margin-bottom: 14px; }
.an-note p, .an-note li { line-height: 1.7; }
.an-note ol, .an-note ul { margin-top: 10px; }
.an-note li { padding: 4px 0; }

.an-cats { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--filet); }
.an-cats h2 { font-size: 1.25rem; margin-bottom: 16px; }
.an-cats ul { columns: 3; column-gap: 28px; }
.an-cats li { break-inside: avoid; padding: 5px 0; }
.an-cats a { color: var(--encre); text-decoration: none; font-size: .9375rem; }
.an-cats a:hover { color: var(--violet); }
.an-cats a[aria-current] { font-weight: 600; color: var(--violet); }

@media (max-width: 980px) {
  .an { grid-template-columns: minmax(0, 1fr); }
  .an-rail {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--filet);
    padding: 24px var(--an-marge);
  }
  .an-sommaire { columns: 2; column-gap: 24px; }
  .an-texte { padding-left: var(--an-marge); }
  .an-cats ul { columns: 2; }
  .an-fiche > div { grid-template-columns: minmax(0, 1fr); }
}