/* Catalogue agents — scoped under .pgm-cat */
/* ═══════════════════════════════════════════════════════════════
   PG MANAGEMENT — Catalogue d'agents par métier
   Tokens relevés sur les styles calculés de pgmanagement.ch.
   Tout est scopé sous .pgm-cat : aucun conflit avec le thème.
   ═══════════════════════════════════════════════════════════════ */
.pgm-cat{
  /* Couleurs — palette monochrome du site, aucun accent */
  --c-primary:#1C2539;
  --c-primary-hover:#2D3953;
  --c-btn:#20282D;
  --c-sub:#5D666F;
  --c-tint:#E0E7F0;
  --c-bg:#FFFFFF;
  --c-border:rgba(93,102,111,.2);
  --c-border-dark:rgba(255,255,255,.09);
  --c-sub-bg:rgba(28,37,57,.05);

  /* Typo — Poppins titres / Inter texte */
  --f-head:"Poppins",sans-serif;
  --f-body:"Inter",sans-serif;
  --h1:clamp(2rem,4.6vw,3.375rem);
  --h2:clamp(1.75rem,3.6vw,2.75rem);
  --h3:clamp(1.35rem,2.2vw,2rem);
  --h4:1.375rem;
  --h5:1.125rem;

  /* Formes */
  --r-card:28px;
  --r-icon:18px;
  --r-pill:40px;
  --r-micro:6px;
  --shadow:0 24px 60px rgba(15,23,42,.14);
  --shadow-sm:0 10px 30px rgba(15,23,42,.08);

  /* Grille */
  --maxw:1680px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --sect:clamp(3.5rem,8vw,6rem);

  font-family:var(--f-body);
  font-size:.9375rem;
  line-height:1.62;
  color:var(--c-primary);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
.pgm-cat *,.pgm-cat *::before,.pgm-cat *::after{box-sizing:border-box}
.pgm-cat h1,.pgm-cat h2,.pgm-cat h3,.pgm-cat h4,.pgm-cat p,.pgm-cat ul,.pgm-cat li,
.pgm-cat dl,.pgm-cat dd,.pgm-cat dt{margin:0;padding:0}
.pgm-cat ul{list-style:none}
.pgm-cat a{color:inherit;text-decoration:none}
.pgm-cat :focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:var(--r-micro)}
.pgm-cat__in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.pgm-cat h1,.pgm-cat h2,.pgm-cat h3,.pgm-cat h4{
  font-family:var(--f-head);font-weight:600;color:var(--c-primary);
}
.pgm-cat__sect{padding-block:var(--sect)}
.pgm-cat__sect--tint{background:var(--c-tint)}
.pgm-cat__sect--dark{background:var(--c-primary);color:#fff}
.pgm-cat__sect--dark h2,.pgm-cat__sect--dark h3{color:#fff}

/* Sur-titre : pastille teintée, comme les subheadings du thème */
.pgm-cat__over{
  display:inline-block;font-family:var(--f-head);font-weight:600;
  font-size:.8125rem;letter-spacing:.02em;
  color:var(--c-primary);background:var(--c-sub-bg);
  border:1px solid rgba(28,37,57,.1);
  border-radius:var(--r-pill);padding:.45rem 1.05rem;
}
.pgm-cat__sect--dark .pgm-cat__over,.pgm-cat__hero .pgm-cat__over{
  color:#fff;background:rgba(255,255,255,.07);border-color:var(--c-border-dark);
}
p.pgm-cat__over{padding:.55rem 1.25rem}
.pgm-cat__sect--dark .pgm-cat__over,.pgm-cat__hero .pgm-cat__over{
  color:#fff;background:rgba(255,255,255,.07);border-color:var(--c-border-dark);
}
.pgm-cat__h2{font-size:var(--h2);line-height:1.13;letter-spacing:-.03em;margin-top:1.25rem;max-width:22ch}
.pgm-cat__lede{max-width:64ch;color:var(--c-sub);font-size:var(--h5);line-height:1.62}
/* Le reset « .pgm-cat p{margin:0} » est plus spécifique qu'une classe seule :
   sans le sélecteur de type, ces paragraphes se collent à ce qui précède. */
p.pgm-cat__lede{margin-top:1.15rem}
.pgm-cat__sect--dark .pgm-cat__lede{color:rgba(255,255,255,.72)}

/* En-tête de section : titre à gauche, chapô à droite. Empilés, les deux
   n'occupaient qu'un tiers du rail et le titre se brisait en deux lignes
   inutiles ; la moitié droite du bandeau restait vide. */
.pgm-cat__hd .pgm-cat__over{justify-self:start}
@media (min-width:1100px){
  .pgm-cat__hd{
    display:grid;align-items:end;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(3rem,5vw,6rem);
  }
  .pgm-cat__hd .pgm-cat__over,
  .pgm-cat__hd .pgm-cat__h2{grid-column:1}
  .pgm-cat__hd .pgm-cat__h2{max-width:none}
  .pgm-cat__hd .pgm-cat__lede{grid-column:2;grid-row:2;margin-top:0;padding-bottom:.35rem}
}

/* ── Boutons : pilule, inversion au survol comme sur le site ── */
.pgm-cat__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;
  min-height:56px;padding:0 2rem;border-radius:var(--r-pill);
  background:var(--c-btn);color:#fff;border:1px solid var(--c-btn);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.pgm-cat__btn:hover{background:#fff;color:var(--c-btn);transform:translateY(-2px)}
.pgm-cat__btn--ghost{background:transparent;color:#fff;border-color:var(--c-border-dark)}
.pgm-cat__btn--ghost:hover{background:#fff;color:var(--c-btn);border-color:#fff}
.pgm-cat__btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
@media(max-width:600px){.pgm-cat__btn{min-height:48px;width:100%}}

/* ── Hero ─────────────────────────────────────────────────── */
.pgm-cat__hero{background:var(--c-primary);color:#fff;padding-block:clamp(3.5rem,8vw,6.5rem)}
.pgm-cat__hero h1{
  font-size:var(--h1);font-weight:700;line-height:1.06;letter-spacing:-.035em;
  color:#fff;margin-top:1.5rem;max-width:20ch;
}
.pgm-cat__hero>.pgm-cat__in>p:not(.pgm-cat__over){
  margin-top:1.5rem;max-width:56ch;font-size:1.0625rem;color:rgba(255,255,255,.74);
}
.pgm-cat__stats{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2.25rem}
.pgm-cat__stat{
  border:1px solid var(--c-border-dark);border-radius:var(--r-pill);
  padding:.6rem 1.15rem;font-size:.875rem;color:rgba(255,255,255,.7);
}
.pgm-cat__stat b{font-family:var(--f-head);font-weight:600;color:#fff}

/* ── Cartes packs ─────────────────────────────────────────── */
.pgm-cat__grid{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
}
.pgm-cat__pack{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:2rem 1.85rem 1.75rem;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:1rem;
  transition:box-shadow .25s ease,transform .25s ease;
}
.pgm-cat__pack:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.pgm-cat__pack-hd{display:flex;align-items:flex-start;gap:.85rem;justify-content:space-between}
.pgm-cat__pack h3{font-size:var(--h4);line-height:1.24;letter-spacing:-.02em}
.pgm-cat__badge{
  flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:.6875rem;
  letter-spacing:.03em;padding:.35rem .8rem;border-radius:var(--r-pill);white-space:nowrap;
}
.pgm-cat__badge--live{background:var(--c-primary);color:#fff}
.pgm-cat__badge--quote{background:transparent;color:var(--c-sub);border:1px solid var(--c-border)}
.pgm-cat__pack-job{color:var(--c-sub);font-size:.9375rem}
.pgm-cat__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pgm-cat__chip{
  font-size:.8125rem;padding:.34rem .8rem;border-radius:var(--r-pill);
  border:1px solid var(--c-border);color:var(--c-sub);
}
.pgm-cat__chip--core{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:500}
.pgm-cat__pack-ft{
  margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--c-border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
.pgm-cat__amount{font-family:var(--f-head);font-weight:600;font-size:1.125rem;letter-spacing:-.02em}
.pgm-cat__amount span{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.8125rem;
  color:var(--c-sub);letter-spacing:0;
}
.pgm-cat__link{
  font-family:var(--f-head);font-weight:600;font-size:.875rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
.pgm-cat__link:hover{color:var(--c-primary-hover)}

/* ── Matrice de composition (élément signature) ───────────── */
.pgm-cat__panel{
  margin-top:3rem;background:rgba(255,255,255,.04);
  border:1px solid var(--c-border-dark);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.5vw,2.25rem);box-shadow:var(--shadow);
}
.pgm-cat__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-icon)}
.pgm-cat__mx{border-collapse:collapse;width:100%;min-width:820px;font-size:.875rem}
.pgm-cat__mx th,.pgm-cat__mx td{padding:.8rem .6rem;text-align:center;border-bottom:1px solid var(--c-border-dark)}
.pgm-cat__mx thead th{
  font-family:var(--f-head);font-weight:600;font-size:.75rem;
  color:rgba(255,255,255,.62);vertical-align:bottom;line-height:1.3;
}
.pgm-cat__mx th[scope=row]{
  text-align:left;white-space:nowrap;font-weight:400;color:#fff;
  position:sticky;left:0;background:var(--c-primary);padding-right:1.25rem;
}
.pgm-cat__mx tbody tr:last-child th,.pgm-cat__mx tbody tr:last-child td{border-bottom:0}
.pgm-cat__mx tbody tr:hover td{background:rgba(255,255,255,.05)}
.pgm-cat__mk{display:inline-block;width:11px;height:11px;border-radius:50%;background:#fff}
.pgm-cat__mk--opt{background:transparent;border:1.5px solid rgba(255,255,255,.42)}
.pgm-cat__key{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;font-size:.875rem;color:rgba(255,255,255,.7)}
.pgm-cat__key span{display:inline-flex;align-items:center;gap:.55rem}
.pgm-cat__fine{margin-top:1.75rem;font-size:.875rem;color:rgba(255,255,255,.55);max-width:76ch}

/* ── Tarifs ───────────────────────────────────────────────── */
.pgm-cat__tiles{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.pgm-cat__tile{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:1.85rem;box-shadow:var(--shadow-sm);
}
.pgm-cat__tile dt{
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--c-sub);letter-spacing:.02em;
}
.pgm-cat__tile dd{
  font-family:var(--f-head);font-weight:600;font-size:var(--h3);
  letter-spacing:-.03em;margin-top:.6rem;line-height:1.1;
}
.pgm-cat__tile p{margin-top:.85rem;color:var(--c-sub);font-size:.875rem}

/* ── Méthode ──────────────────────────────────────────────── */
.pgm-cat__steps{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.pgm-cat__step{
  border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:1.85rem;background:var(--c-bg);box-shadow:var(--shadow-sm);
}
.pgm-cat__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-icon);
  background:var(--c-primary);color:#fff;
  font-family:var(--f-head);font-weight:600;font-size:1rem;margin-bottom:1.15rem;
}
.pgm-cat__step h3{font-size:var(--h4);letter-spacing:-.02em}
.pgm-cat__when{
  display:block;font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--c-sub);margin:.45rem 0 .85rem;
}
.pgm-cat__step p{color:var(--c-sub);font-size:.9375rem}

/* ── FAQ ──────────────────────────────────────────────────── */
.pgm-cat__faq{margin-top:3rem;display:grid;gap:1rem}
.pgm-cat__faq details{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-icon);box-shadow:var(--shadow-sm);
}
.pgm-cat__faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.35rem 3.5rem 1.35rem 1.65rem;
  font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:-.01em;
}
.pgm-cat__faq summary::-webkit-details-marker{display:none}
.pgm-cat__faq summary::after{
  content:"";position:absolute;right:1.6rem;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--c-primary);border-bottom:2px solid var(--c-primary);
  transform:rotate(45deg);transition:transform .22s ease;
}
.pgm-cat__faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.pgm-cat__faq div{padding:0 1.65rem 1.5rem;color:var(--c-sub);font-size:.9375rem;max-width:78ch}

/* ── Liens internes ───────────────────────────────────────── */
.pgm-cat__more{
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:2.75rem;
  padding-top:1.75rem;border-top:1px solid var(--c-border);font-size:.9375rem;
}
.pgm-cat__more a{
  color:var(--c-sub);text-decoration:underline;
  text-decoration-color:var(--c-border);text-underline-offset:4px;
}
.pgm-cat__more a:hover{color:var(--c-primary);text-decoration-color:var(--c-primary)}
.pgm-cat__note{margin-top:1.75rem;font-size:.875rem;color:var(--c-sub)}
.pgm-cat__sect--dark .pgm-cat__note{color:rgba(255,255,255,.6)}

@media (prefers-reduced-motion:reduce){
  .pgm-cat *{transition:none!important;animation:none!important}
  .pgm-cat__pack:hover,.pgm-cat__btn:hover{transform:none}
}

/* En-tête de section : titre à gauche, chapô à droite. Empilés, les deux
   n'occupaient qu'un tiers du rail et le titre se brisait en deux lignes
   inutiles ; la moitié droite du bandeau restait vide. */
.pgm-cat__hd .pgm-cat__over{justify-self:start}
@media (min-width:1100px){
  .pgm-cat__hd{
    display:grid;align-items:end;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(3rem,5vw,6rem);
  }
  .pgm-cat__hd .pgm-cat__over,
  .pgm-cat__hd .pgm-cat__h2{grid-column:1}
  .pgm-cat__hd .pgm-cat__h2{max-width:none}
  .pgm-cat__hd .pgm-cat__lede{grid-column:2;grid-row:2;margin-top:0;padding-bottom:.35rem}
}

/* ── Boutons : pilule, inversion au survol comme sur le site ── */
.pgm-cat__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;
  min-height:56px;padding:0 2rem;border-radius:var(--r-pill);
  background:var(--c-btn);color:#fff;border:1px solid var(--c-btn);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.pgm-cat__btn:hover{background:#fff;color:var(--c-btn);transform:translateY(-2px)}
.pgm-cat__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.pgm-cat__btn--ghost:hover{background:#fff;color:var(--c-btn);border-color:#fff}
/* Sur fond sombre, le CTA principal s'inverse : pastille blanche, texte marine. */
.pgm-cat__hero .pgm-cat__btn:not(.pgm-cat__btn--ghost),
.pgm-cat__sect--dark .pgm-cat__btn:not(.pgm-cat__btn--ghost){
  background:#fff;color:var(--c-primary);border-color:#fff;
}
.pgm-cat__hero .pgm-cat__btn:not(.pgm-cat__btn--ghost):hover,
.pgm-cat__sect--dark .pgm-cat__btn:not(.pgm-cat__btn--ghost):hover{
  background:transparent;color:#fff;
}
.pgm-cat__btns{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
@media(max-width:600px){.pgm-cat__btn{min-height:48px;width:100%}}

/* ── Hero ─────────────────────────────────────────────────── */
/* Sous 992px, le thème pousse <main> sous le header fixe via un padding-top.
   Ici le hero marine assure déjà ce dégagement : ce padding ne faisait
   qu'insérer une bande blanche entre le menu et le hero. */
@media (max-width:991px){
  body main.pgm-cat{padding-top:0}
}
/* Le header du site est fixe (130px) : le hero doit s'en dégager. */
.pgm-cat__hero{
  background:var(--c-primary);color:#fff;
  padding-top:clamp(7.5rem,4vw + 6rem,9.5rem);
  padding-bottom:clamp(3.5rem,8vw,6.5rem);
}
.pgm-cat__hero h1{
  font-size:var(--h1);font-weight:700;line-height:1.06;letter-spacing:-.035em;
  color:#fff;margin-top:1.5rem;max-width:20ch;
}
.pgm-cat__hero>.pgm-cat__in>p:not(.pgm-cat__over){
  margin-top:1.5rem;max-width:56ch;font-size:1.0625rem;color:rgba(255,255,255,.74);
}
.pgm-cat__stats{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2.25rem}
.pgm-cat__stat{
  border:1px solid var(--c-border-dark);border-radius:var(--r-pill);
  padding:.6rem 1.15rem;font-size:.875rem;color:rgba(255,255,255,.7);
}
.pgm-cat__stat b{font-family:var(--f-head);font-weight:600;color:#fff}

/* Au-delà de 1100px, le texte du hero laissait la moitié droite du bandeau
   marine vide. Les trois preuves y passent en colonne : elles cessent d'être
   des pastilles secondaires sous les boutons et ancrent le côté droit. */
@media (min-width:1100px){
  .pgm-cat__hero>.pgm-cat__in{
    display:grid;align-items:start;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(3rem,6vw,7rem);
  }
  .pgm-cat__hero>.pgm-cat__in>.pgm-cat__over{grid-column:1;justify-self:start}
  .pgm-cat__hero>.pgm-cat__in>h1,
  .pgm-cat__hero>.pgm-cat__in>p:not(.pgm-cat__over),
  .pgm-cat__hero>.pgm-cat__in>.pgm-cat__btns{grid-column:1}
  .pgm-cat__hero>.pgm-cat__in>h1{max-width:none}
  .pgm-cat__hero>.pgm-cat__in>.pgm-cat__stats{
    grid-column:2;grid-row:1/span 5;align-self:center;
    flex-direction:column;flex-wrap:nowrap;gap:1rem;margin-top:0;
  }
  .pgm-cat__hero .pgm-cat__stat{
    border-radius:var(--r-icon);padding:1.15rem 1.4rem;font-size:.9375rem;
    background:rgba(255,255,255,.04);
  }
  .pgm-cat__hero .pgm-cat__stat b{
    display:block;font-size:1.375rem;letter-spacing:-.02em;margin-bottom:.2rem;
  }
}

/* ── Cartes packs ─────────────────────────────────────────── */
.pgm-cat__grid{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
}
.pgm-cat__pack{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:2rem 1.85rem 1.75rem;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:1rem;
  transition:box-shadow .25s ease,transform .25s ease;
}
.pgm-cat__pack:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
/* column-reverse : le badge est second dans le DOM (bon ordre de lecture) mais
   passe au-dessus du titre. Côte à côte, il rognait la largeur du h3 et forçait
   tous les intitulés à se casser en deux lignes. */
.pgm-cat__pack-hd{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:.85rem}
.pgm-cat__pack h3{font-size:var(--h4);line-height:1.24;letter-spacing:-.02em}
.pgm-cat__badge{
  flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:.6875rem;
  letter-spacing:.03em;padding:.35rem .8rem;border-radius:var(--r-pill);white-space:nowrap;
}
.pgm-cat__badge--live{background:var(--c-primary);color:#fff}
.pgm-cat__badge--quote{background:transparent;color:var(--c-sub);border:1px solid var(--c-border)}
.pgm-cat__pack-job{color:var(--c-sub);font-size:.9375rem}
.pgm-cat__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pgm-cat__chip{
  font-size:.8125rem;padding:.34rem .8rem;border-radius:var(--r-pill);
  border:1px solid var(--c-border);color:var(--c-sub);
}
.pgm-cat__chip--core{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:500}
.pgm-cat__pack-ft{
  margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--c-border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
.pgm-cat__amount{font-family:var(--f-head);font-weight:600;font-size:1.125rem;letter-spacing:-.02em}
.pgm-cat__amount span{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.8125rem;
  color:var(--c-sub);letter-spacing:0;
}
.pgm-cat__link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-head);font-weight:600;font-size:.875rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
/* Flèche : en bas de carte, « Référence » et « Cadrer » passaient pour du texte. */
.pgm-cat__link::after{
  content:"";width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.pgm-cat__link:hover{color:var(--c-primary-hover)}
.pgm-cat__link:hover::after{transform:rotate(45deg) translate(2px,-2px)}

/* ── Répertoire par métier (hub Solutions) ────────────────── */
/* Cinquante et une entrées : une carte par famille, les cartes gardent leur
   hauteur naturelle (align-items:start) plutôt que de s'étirer sur la plus
   longue, ce qui creusait des blancs de 200px sous les familles courtes. */
.pgm-cat__dir{
  display:grid;gap:1.5rem;margin-top:3rem;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
}
.pgm-cat__dircard{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:2rem 1.85rem 1.25rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease;
}
.pgm-cat__dircard:hover{box-shadow:var(--shadow)}
.pgm-cat__dir-hd{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--c-border);
}
/* min-width:0 : sans ça, un intitulé de famille long empêche le titre de se
   comprimer face au compteur et la ligne déborde de la carte. */
.pgm-cat__dircard h3{font-size:var(--h4);line-height:1.24;letter-spacing:-.02em;min-width:0;overflow-wrap:break-word}
.pgm-cat__dircount{
  flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:.75rem;
  color:var(--c-sub);white-space:nowrap;
}
.pgm-cat__dirlist>li+li{border-top:1px solid var(--c-border)}
.pgm-cat__dirlink{
  display:block;position:relative;padding:.95rem 2.25rem .95rem 0;
  transition:padding-left .2s ease;
}
.pgm-cat__dirlink:hover{padding-left:.5rem}
.pgm-cat__dirname{
  display:block;font-family:var(--f-head);font-weight:600;
  font-size:1rem;letter-spacing:-.01em;
}
/* Les résumés sectoriels vont de six mots à trois lignes : on plafonne à deux
   pour que les entrées restent scannables en liste. */
.pgm-cat__dirdesc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:.2rem;color:var(--c-sub);font-size:.875rem;line-height:1.5;
}
.pgm-cat__dirlink::after{
  content:"";position:absolute;right:.35rem;top:1.45rem;width:7px;height:7px;
  border-top:1.5px solid var(--c-sub);border-right:1.5px solid var(--c-sub);
  transform:rotate(45deg);opacity:.55;
  transition:transform .2s ease,opacity .2s ease,border-color .2s ease;
}
.pgm-cat__dirlink:hover::after{
  opacity:1;border-color:var(--c-primary);transform:rotate(45deg) translate(2px,-2px);
}

/* ── Matrice de composition (élément signature) ───────────── */
.pgm-cat__panel{
  margin-top:3rem;background:rgba(255,255,255,.04);
  border:1px solid var(--c-border-dark);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.5vw,2.25rem);box-shadow:var(--shadow);
}
.pgm-cat__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-icon)}
.pgm-cat__mx{border-collapse:collapse;width:100%;min-width:820px;font-size:.875rem}
.pgm-cat__mx th,.pgm-cat__mx td{padding:.8rem .6rem;text-align:center;border-bottom:1px solid var(--c-border-dark)}
.pgm-cat__mx thead th{
  font-family:var(--f-head);font-weight:600;font-size:.75rem;
  color:rgba(255,255,255,.62);vertical-align:bottom;line-height:1.3;
}
.pgm-cat__mx th[scope=row]{
  text-align:left;white-space:nowrap;font-weight:400;color:#fff;
  position:sticky;left:0;background:var(--c-primary);padding-right:1.25rem;
}
.pgm-cat__mx tbody tr:last-child th,.pgm-cat__mx tbody tr:last-child td{border-bottom:0}
.pgm-cat__mx tbody tr:hover td{background:rgba(255,255,255,.05)}
.pgm-cat__mk{display:inline-block;width:11px;height:11px;border-radius:50%;background:#fff}
.pgm-cat__mk--opt{background:transparent;border:1.5px solid rgba(255,255,255,.42)}
.pgm-cat__key{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;font-size:.875rem;color:rgba(255,255,255,.7)}
.pgm-cat__key span{display:inline-flex;align-items:center;gap:.55rem}
/* Sous 768px, la matrice ne tient pas : la colonne des noms, collante et sans
   césure, mangeait 268px des 308px visibles et il ne restait qu'un liseré de
   pastilles derrière un défilement que rien n'annonçait. Chaque agent devient
   une carte, et chaque case cochée une puce portant le nom du pack (repris de
   l'en-tête de colonne via data-pack). Les cases vides disparaissent. */
@media (max-width:767px){
  .pgm-cat__scroll{overflow-x:visible}
  .pgm-cat__mx{display:block;min-width:0;font-size:.9375rem}
  .pgm-cat__mx thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pgm-cat__mx tbody,.pgm-cat__mx tr{display:block}
  .pgm-cat__mx tr+tr{margin-top:.85rem}
  .pgm-cat__mx tr{
    background:rgba(255,255,255,.04);border:1px solid var(--c-border-dark);
    border-radius:var(--r-icon);padding:1rem 1.1rem 1.1rem;
  }
  .pgm-cat__mx tbody tr:hover td{background:none}
  .pgm-cat__mx th[scope=row]{
    display:block;position:static;background:none;padding:0 0 .8rem;
    white-space:normal;font-family:var(--f-head);font-weight:600;
    font-size:1rem;line-height:1.3;border-bottom:0;
  }
  .pgm-cat__mx td:empty{display:none}
  .pgm-cat__mx td{
    display:inline-flex;align-items:center;gap:.45rem;
    margin:0 .4rem .4rem 0;padding:.34rem .7rem;border-bottom:0;
    border:1px solid var(--c-border-dark);border-radius:var(--r-pill);
    font-size:.8125rem;color:rgba(255,255,255,.75);text-align:left;
  }
  .pgm-cat__mx td::after{content:attr(data-pack)}
  .pgm-cat__mk{width:9px;height:9px;flex:0 0 auto}
}
.pgm-cat__fine{font-size:.875rem;color:rgba(255,255,255,.55);max-width:76ch}
p.pgm-cat__fine{margin-top:2.25rem}

/* ── Tarifs ───────────────────────────────────────────────── */
/* dl.pgm-cat__tiles : le reset « .pgm-cat dl{margin:0} » est plus spécifique
   qu'une simple classe et annulait le margin-top, collant les tuiles de prix
   sous le titre de section. */
dl.pgm-cat__tiles{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.pgm-cat__tile{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:1.85rem;box-shadow:var(--shadow-sm);
}
.pgm-cat__tile dt{
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--c-sub);letter-spacing:.02em;
}
.pgm-cat__tile dd{
  font-family:var(--f-head);font-weight:600;font-size:var(--h3);
  letter-spacing:-.03em;margin-top:.6rem;line-height:1.1;
}
.pgm-cat__tile p{margin-top:.85rem;color:var(--c-sub);font-size:.875rem}

/* ── Méthode ──────────────────────────────────────────────── */
.pgm-cat__steps{
  display:grid;gap:1.5rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
}
.pgm-cat__step{
  border:1px solid var(--c-border);border-radius:var(--r-card);
  padding:1.85rem;background:var(--c-bg);box-shadow:var(--shadow-sm);
}
.pgm-cat__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-icon);
  background:var(--c-primary);color:#fff;
  font-family:var(--f-head);font-weight:600;font-size:1rem;margin-bottom:1.15rem;
}
.pgm-cat__step h3{font-size:var(--h4);letter-spacing:-.02em}
.pgm-cat__when{
  display:block;font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--c-sub);margin:.45rem 0 .85rem;
}
.pgm-cat__step p{color:var(--c-sub);font-size:.9375rem}

/* ── FAQ ──────────────────────────────────────────────────── */
.pgm-cat__faq{margin-top:3rem;display:grid;gap:1rem}
.pgm-cat__faq details{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-icon);box-shadow:var(--shadow-sm);
}
.pgm-cat__faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.35rem 3.5rem 1.35rem 1.65rem;
  font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:-.01em;
}
.pgm-cat__faq summary::-webkit-details-marker{display:none}
.pgm-cat__faq summary h3{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.pgm-cat__faq summary::after{
  content:"";position:absolute;right:1.6rem;top:50%;
  width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--c-primary);border-bottom:2px solid var(--c-primary);
  transform:rotate(45deg);transition:transform .22s ease;
}
.pgm-cat__faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.pgm-cat__faq div{padding:0 1.65rem 1.5rem;color:var(--c-sub);font-size:.9375rem;max-width:78ch}

/* ── Liens internes ───────────────────────────────────────── */
.pgm-cat__more{
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:2.75rem;
  padding-top:1.75rem;border-top:1px solid var(--c-border);font-size:.9375rem;
}
.pgm-cat__more a{
  color:var(--c-sub);text-decoration:underline;
  text-decoration-color:var(--c-border);text-underline-offset:4px;
}
.pgm-cat__more a:hover{color:var(--c-primary);text-decoration-color:var(--c-primary)}
.pgm-cat__note{font-size:.875rem;color:var(--c-sub)}
p.pgm-cat__note{margin-top:2.5rem}
.pgm-cat__sect--dark .pgm-cat__note{color:rgba(255,255,255,.6)}

/* Prose longue (pages Services) : paragraphes sous le bandeau deux colonnes. */
.pgm-cat__prose{margin-top:2.5rem;max-width:76ch;display:grid;gap:1.15rem}
.pgm-cat__prose p{color:var(--c-sub);font-size:1.0625rem;line-height:1.65}
.pgm-cat__sect--dark .pgm-cat__prose p{color:rgba(255,255,255,.72)}

/* Récit en deux colonnes (À propos) : le chapô ne flotte plus à droite du titre
   pendant que la prose s'empile à gauche — les deux colonnes portent du contenu. */
.pgm-cat__split{display:grid;gap:2rem}
.pgm-cat__split .pgm-cat__over{justify-self:start}
.pgm-cat__split .pgm-cat__h2{margin-top:1.25rem;max-width:22ch}
.pgm-cat__split .pgm-cat__lede{margin-top:1.35rem}
.pgm-cat__split .pgm-cat__prose{margin-top:0;max-width:none}
@media (min-width:1100px){
  .pgm-cat__split{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    column-gap:clamp(2.5rem,5vw,5.5rem);
    align-items:start;
  }
  .pgm-cat__split .pgm-cat__h2{max-width:16ch;font-size:clamp(1.85rem,2.4vw,2.35rem)}
}
/* Liens en ligne dans la prose (sans classe). Le filet de sécurité du thème,
   « body.pgm-inner main a[href] », leur impose #24324a et un filet sombre :
   invisible sur le marine du hero et des sections sombres. On le neutralise
   avec assez de spécificité, sans toucher aux boutons ni aux liens de carte,
   qui portent une classe. */
body.pgm-inner main.pgm-cat .pgm-cat__hero a[href]:not([class]),
body.pgm-inner main.pgm-cat .pgm-cat__sect--dark a[href]:not([class]){
  color:#fff;border-bottom:0;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);
  text-decoration-thickness:1px;text-underline-offset:4px;
}
body.pgm-inner main.pgm-cat .pgm-cat__hero a[href]:not([class]):hover,
body.pgm-inner main.pgm-cat .pgm-cat__sect--dark a[href]:not([class]):hover{
  text-decoration-color:#fff;
}
body.pgm-inner main.pgm-cat .pgm-cat__sect:not(.pgm-cat__sect--dark) a[href]:not([class]){
  color:var(--c-primary);border-bottom:0;
  text-decoration:underline;text-decoration-color:var(--c-border);
  text-decoration-thickness:1px;text-underline-offset:4px;
}
body.pgm-inner main.pgm-cat .pgm-cat__sect:not(.pgm-cat__sect--dark) a[href]:not([class]):hover{
  text-decoration-color:var(--c-primary);
}
/* Les boutons ne se soulignent jamais. */
body.pgm-inner main.pgm-cat a.pgm-cat__btn{text-decoration:none;border-bottom:0}
.pgm-cat__sect--dark .pgm-cat__more a{
  color:rgba(255,255,255,.7);text-decoration-color:rgba(255,255,255,.28);
}
.pgm-cat__sect--dark .pgm-cat__more a:hover{
  color:#fff;text-decoration-color:#fff;
}

/* ── Contact : colonne de coordonnées + carte formulaire ──── */
/* minmax(0,1fr) et non 1fr : le widget Turnstile mesure 300px en dur et son
   min-content aurait élargi la colonne au-delà de l'écran. */
.pgm-cat__contact{display:grid;gap:1.75rem;margin-top:3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
  .pgm-cat__contact{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    column-gap:clamp(2rem,4vw,4rem);align-items:start;
  }
}
.pgm-cat__channels{display:grid;gap:1rem}
.pgm-cat__channel{
  display:block;background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-icon);padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm);
}
a.pgm-cat__channel{transition:box-shadow .25s ease,transform .25s ease}
a.pgm-cat__channel:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pgm-cat__channel-label{
  display:block;font-family:var(--f-head);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-sub);
}
.pgm-cat__channel-value{
  display:block;margin-top:.45rem;font-family:var(--f-head);font-weight:600;
  font-size:1.0625rem;letter-spacing:-.01em;line-height:1.45;
}

.pgm-cat__formcard{
  background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow);
}
.pgm-cat__formcard h3{font-size:var(--h4);letter-spacing:-.02em}
.pgm-cat__formcard>p{margin-top:.7rem;color:var(--c-sub);font-size:.9375rem;max-width:56ch}
/* Retours de send-contact.php : le thème n'habille pas .alert dans ce scope. */
.pgm-cat__alert{
  margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r-icon);font-size:.9375rem;
}
.pgm-cat__alert--ok{background:var(--c-sub-bg);border:1px solid var(--c-border);color:var(--c-primary)}
.pgm-cat__alert--ko{background:rgba(176,42,42,.06);border:1px solid rgba(176,42,42,.28);color:#8C1F1F}

.pgm-cat__form{display:grid;gap:1.15rem;margin-top:2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.pgm-cat__field{display:grid;gap:.45rem}
.pgm-cat__field--full{grid-column:1/-1}
@media (max-width:600px){.pgm-cat__form{grid-template-columns:minmax(0,1fr)}.pgm-cat__field{grid-column:1/-1}}
/* Turnstile s'affiche dans un iframe de 300×65px non redimensionnable : sous
   480px il ne rentre plus dans la carte. On resserre la carte et on réduit le
   widget d'un cran plutôt que de le laisser pousser la page. */
@media (max-width:479px){
  .pgm-cat__formcard{padding:1.35rem 1.25rem}
  .pgm-cat__form .cf-turnstile{transform:scale(.9);transform-origin:left top;height:59px}
}
@media (max-width:349px){
  .pgm-cat__form .cf-turnstile{transform:scale(.78);height:51px}
}
.pgm-cat__label{font-family:var(--f-head);font-weight:600;font-size:.8125rem;color:var(--c-sub)}
.pgm-cat__input{
  width:100%;font-family:var(--f-body);font-size:.9375rem;line-height:1.6;
  color:var(--c-primary);background:#fff;
  border:1px solid var(--c-border);border-radius:var(--r-icon);padding:.85rem 1.1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
textarea.pgm-cat__input{min-height:150px;resize:vertical}
/* Le chevron natif des <select> ignore la palette : on le redessine. */
select.pgm-cat__input{
  appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-primary) 50%),
                   linear-gradient(135deg,var(--c-primary) 50%,transparent 50%);
  background-position:calc(100% - 1.35rem) calc(50% + 2px),calc(100% - 1.05rem) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.pgm-cat__input::placeholder{color:rgba(93,102,111,.6)}
.pgm-cat__input:focus{
  outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(28,37,57,.1);
}
/* Intertitre de groupe dans les formulaires longs (questionnaire d'audit).
   En gris clair sur filet clair, la coupure passait inaperçue au milieu de
   quinze champs : intitulé marine, filet appuyé et repère plein à gauche. */
.pgm-cat__legend{
  grid-column:1/-1;display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary);
  margin-top:2.75rem;padding-top:1.75rem;
  border-top:1px solid rgba(28,37,57,.28);
}
.pgm-cat__legend::before{
  content:"";flex:0 0 auto;width:22px;height:3px;
  border-radius:2px;background:var(--c-primary);
}
/* Le piège à robots occupe la première position : cibler le premier <p>. */
.pgm-cat__form>.pgm-cat__legend:first-of-type{margin-top:0;padding-top:0;border-top:0}
/* Le piège à robots doit rester dans le flux du DOM sans jamais s'afficher. */
.pgm-cat__honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pgm-cat__form .pgm-cat__btn{justify-self:start}
@media (max-width:600px){.pgm-cat__form .pgm-cat__btn{justify-self:stretch}}

/* Quatre étapes : sur grand écran, une rangée complète plutôt que 3+1. */
@media (min-width:1100px){
  .pgm-cat__steps:has(> :nth-child(4):last-child){
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  /* Six offres (Services) : 3×2 plutôt que 4+2. */
  .pgm-cat__grid:has(> :nth-child(6):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  /* Quatre missions (Réalisations) : 2×2 plutôt que 4 en ligne. */
  .pgm-cat__grid:has(> :nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* Trois références : une rangée. */
  .pgm-cat__grid:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  .pgm-cat *{transition:none!important;animation:none!important}
  .pgm-cat__pack:hover,.pgm-cat__btn:hover{transform:none}
}

/* Index métiers (solutions-metiers) */
/* Ajout minimal : listes de l'index. Utilise les tokens existants. */
.pgm-cat__idx{margin-top:1rem;display:grid;gap:.1rem}
.pgm-cat__idx a{
  display:block;padding:.42rem 0;font-size:.9375rem;color:var(--c-sub);
  border-bottom:1px solid var(--c-border);
}
.pgm-cat__idx a:last-child{border-bottom:0}
.pgm-cat__idx a:hover{color:var(--c-primary)}
.pgm-cat__packlink{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.15rem;
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  padding:.3rem .75rem;border-radius:var(--r-pill);
  background:var(--c-primary);color:#fff;
}
.pgm-cat__packlink:hover{background:var(--c-primary-hover);color:#fff}
.pgm-cat__count{
  font-family:var(--f-body);font-weight:400;font-size:.8125rem;color:var(--c-sub);
}

/* Lien pack sous l'en-tête de famille (index solutions) */
.pgm-cat__dirpack{
  display:inline-flex;align-items:center;gap:.35rem;
  margin:.95rem 0 .15rem;
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--c-primary);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(28,37,57,.28);
}
.pgm-cat__dirpack:hover{text-decoration-color:var(--c-primary)}
.pgm-cat__dirpack::after{
  content:"";width:6px;height:6px;margin-left:.1rem;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
/* Entrées sans résumé : padding plus compact */
.pgm-cat__dirlink:not(:has(.pgm-cat__dirdesc)){padding:.72rem 2.25rem .72rem 0}
.pgm-cat__dirlink:not(:has(.pgm-cat__dirdesc))::after{top:1.15rem}