/* Annuaire des connecteurs (/connecteurs/, /<langue>/connectors/) : page
   autonome au style de l'accueil, jetons de accueil/chrome.css. */
html{background:var(--fond);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--police);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* Remises à spécificité nulle : elles ne passent jamais devant une règle de
   composant (couleur d'un bouton, taille d'un logo…). */
:where(.cx) *{box-sizing:border-box}
:where(.cx) :where(h1,h2,h3,p){margin:0}
:where(.cx,.barre,.pied) :where(a){color:inherit;text-decoration:none}
:where(.cx) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(.cx) :where(img){display:block;max-width:100%;height:auto}
[id]{scroll-margin-top:96px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;padding:10px 14px;background:var(--encre);color:var(--fond);border-radius:8px}

.cx{position:relative;isolation:isolate;padding:clamp(48px,7vw,88px) 0 0}
.cx::before{content:"";position:absolute;z-index:-1;left:50%;top:-140px;width:min(1400px,calc(100vw - 24px));height:620px;transform:translateX(-50%);
  pointer-events:none;background:radial-gradient(closest-side,var(--halo-1),transparent)}
.cx-ariane{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--pale);margin-bottom:28px}
.cx-ariane a:hover{color:var(--encre)}
.cx-ariane span[aria-hidden]{opacity:.6}
.cx-tete{display:flex;flex-direction:column;align-items:center;text-align:center}
.cx-titre{font-size:clamp(36px,5.2vw,64px);line-height:1.12;font-weight:600;letter-spacing:-0.025em;max-width:18ch;
  background:linear-gradient(to right,var(--titre-de),var(--titre-a));-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-chapo{margin-top:18px;max-width:640px;font-size:clamp(16px,1.5vw,20px);line-height:1.5;font-weight:500;color:var(--doux)}
@media (prefers-contrast:more){.cx-titre{background:none;color:var(--encre)}.cx::before{display:none}}

/* Filtres par famille */
.cx-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:36px auto 0;max-width:900px}
.cx-filtres a{padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--doux);background:var(--verre);
  box-shadow:inset 0 0 0 1px var(--liseré-fort);transition:color .15s,background .15s}
.cx-filtres a:hover{color:var(--encre);background:var(--verre-fort)}

/* Familles et cartes */
.cx-famille{margin-top:clamp(56px,7vw,88px)}
.cx-famille h2{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-0.015em}
.cx-famille>p{margin-top:8px;color:var(--doux);max-width:640px}
.cx-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:24px}
.cx-carte{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:14px;background:var(--verre);box-shadow:var(--ombre-xl);
  transition:transform .3s var(--courbe),background .2s}
.cx-carte::before,.cx-bloc::before,.cx-fiche::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--bord-verre);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cx-carte:hover{transform:translateY(-3px);background:var(--verre-fort)}
.cx-carte b{font-size:16px;font-weight:600;color:var(--encre)}
.cx-carte span.cx-accroche{font-size:13.5px;line-height:1.45;color:var(--doux)}
.cx-carte .cx-fleche{margin-top:auto;font-size:13px;font-weight:500;color:var(--encre);opacity:.7;transition:opacity .2s,transform .2s}
.cx-carte:hover .cx-fleche{opacity:1}
.cx-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré)}
.cx-logo img{width:22px;height:22px;object-fit:contain;filter:var(--filtre-logo);opacity:.9}
/* Logos en toutes lettres (Tenable, Rapid7, Greenbone…) : la tuile s'élargit. */
.cx-logo:has(img.mot){width:auto;min-width:44px;padding:0 10px}
.cx-carte .cx-logo{align-self:flex-start}
.cx-logo img.mot{width:auto;height:14px;max-width:96px}
.cx-logo img.dense{height:11px}
/* Monogramme (initiales) : outil sans logo libre ni fichier publié repris. */
.cx-logo .cx-initiale{font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--encre)}

/* Page d'un connecteur */
.cx-heros{display:flex;flex-direction:column;align-items:center;text-align:center}
.cx-heros .cx-logo{width:72px;height:72px;border-radius:18px;margin-bottom:22px}
.cx-heros .cx-logo img{width:36px;height:36px}
.cx-heros .cx-logo:has(img.mot){padding:0 18px}
.cx-heros .cx-logo img.mot{height:30px;max-width:190px}
.cx-heros .cx-logo img.dense{height:22px}
.cx-heros .cx-logo .cx-initiale{font-size:28px}
.cx-badge{margin-bottom:14px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;color:var(--doux);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.cx-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.cx-corps{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:clamp(48px,6vw,72px);align-items:start}
.cx-bloc,.cx-fiche{position:relative;padding:clamp(22px,3vw,32px);border-radius:16px;background:var(--verre);box-shadow:var(--ombre-xl)}
.cx-bloc+.cx-bloc{margin-top:20px}
.cx-bloc h2,.cx-fiche h2{font-size:18px;font-weight:600;margin-bottom:16px}
.cx-bloc p{color:var(--doux);line-height:1.6}
.cx-liste{display:grid;gap:10px}
.cx-liste li{position:relative;padding-left:28px;color:var(--texte-2);line-height:1.5}
.cx-liste li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.3px var(--doux)}
.cx-liste li::after{content:"";position:absolute;left:5px;top:7.5px;width:6px;height:3.5px;border-left:1.4px solid var(--encre);border-bottom:1.4px solid var(--encre);transform:rotate(-45deg)}
.cx-etapes{display:grid;gap:14px;counter-reset:etape}
.cx-etapes li{position:relative;padding-left:40px;color:var(--texte-2);line-height:1.5;min-height:26px;counter-increment:etape}
.cx-etapes li::before{content:counter(etape);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--encre);background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.cx-fiche dl{margin:0}
.cx-fiche dt{font-size:12.5px;color:var(--pale)}
.cx-fiche dd{margin:4px 0 0;font-size:14.5px;color:var(--encre);line-height:1.5}
.cx-fiche dt:not(:first-child){margin-top:16px}
.cx-fiche dd a{text-decoration:underline;text-decoration-color:var(--liseré-fort);text-underline-offset:3px}
.cx-voisins{margin-top:clamp(56px,7vw,80px)}
.cx-voisins h2{font-size:22px;font-weight:600}
@media (max-width:860px){.cx-corps{grid-template-columns:1fr}}

/* Page patch management (build_patch.py) : mêmes briques, plus un flux en
   trois temps, une grille de fonctions et les offres. */
.px-section{margin-top:clamp(56px,7vw,96px)}
.px-section>h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-0.015em;text-align:center;max-width:22ch;margin:0 auto}
.px-flux{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;counter-reset:temps}
.px-flux .cx-bloc{counter-increment:temps}
.px-flux .cx-bloc h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;margin-bottom:8px}
.px-flux .cx-bloc h3::before{content:counter(temps);display:grid;place-items:center;width:28px;height:28px;border-radius:9px;font-size:13px;
  background:var(--bouton-fort);color:var(--bouton-fort-encre)}
.px-flux .cx-bloc+.cx-bloc{margin-top:0}
.px-fonctions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.px-fonctions .cx-bloc{margin-top:0}
.px-fonctions h3{font-size:16px;font-weight:600;margin-bottom:8px}
.px-fonctions p{font-size:14px}
.px-offres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:32px auto 0}
.px-offres .cx-bloc{margin-top:0}
.px-offres b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pale);margin-bottom:8px}
@media (max-width:1000px){.px-fonctions{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.px-flux,.px-offres{grid-template-columns:1fr}}
@media (max-width:520px){.px-fonctions{grid-template-columns:1fr}}