/* Structure de page de l'identité 2026.
   Les sections sont pleine largeur et portent la gouttière ; leur contenu est borné à
   --content-max et centré, plutôt que de s'étirer indéfiniment.

   Le kit était dessiné dans un cadre de 1280 px avec 44 px de gouttière, soit 1192 px
   utiles. Sur un écran réel cela laissait trop de vide : la gouttière est ramenée à 32 px
   et la largeur utile portée à 1280 px. */

:root {
  --content-max: 1280px;
}

/* --- Sections ---------------------------------------------------------------- */

.pi-section {
  padding: var(--section-y) var(--gutter-desktop);
}

.pi-section--tight {
  padding: var(--section-y-tight) var(--gutter-desktop);
}

/* Bandeau en aplat : chiffres-clés, CISCO, appel à l'action. */
.pi-section--band {
  padding: var(--band-y) var(--gutter-desktop);
}

.pi-section--page {
  background: var(--surface-page);
}

.pi-section--light {
  background: var(--surface-section);
}

.pi-section--card {
  background: var(--surface-card);
}

.pi-section--accent {
  background: var(--surface-accent);
}

.pi-section--inverse {
  background: var(--surface-inverse);
}

.pi-section--inverse-deep {
  background: var(--surface-inverse-deep);
}

.pi-section--secondary {
  background: var(--surface-secondary);
}

.pi-section--ruled {
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

/* Contenu borné. Toute section qui n'est pas un aplat décoratif en porte un. */
.pi-shell {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Section sans gouttière propre : l'enfant direct gère son fond de bord à bord. */
.pi-bleed {
  padding-inline: 0;
}

/* --- Grilles ----------------------------------------------------------------- */

.pi-grid {
  display: grid;
  gap: var(--card-gap);
}

.pi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Grille de colonnes jointives, séparées par un filet : offre de formation, chiffres. */
.pi-grid--flush {
  gap: 0;
}

@media (max-width: 1279.98px) {
  .pi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sous 1280, les colonnes jointives redeviennent des cartes espacées. */
  .pi-grid--flush { gap: var(--card-gap); }
  /* Les chiffres-clés gardent leurs quatre colonnes en tablette. */
  .pi-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 767.98px) {
  .pi-grid--4,
  .pi-grid--3,
  .pi-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .pi-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

/* --- En-tête de section avec action à droite -------------------------------- */

.pi-section-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.pi-section-bar--baseline {
  align-items: baseline;
}

@media (max-width: 1279.98px) {
  .pi-section-bar { gap: 20px; }
}

/* Filet de séparation sous l'en-tête d'une section. */
.pi-section-rule {
  height: 1px;
  background: var(--border-rule);
  margin-top: 34px;
}

/* --- Colonne principale + colonne latérale collante ------------------------- */

.pi-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.pi-two-col__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: var(--sticky-top);
}

/* Variante à latérale plus large : listes d'actualités. */
.pi-two-col--wide-aside {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 1279.98px) {
  .pi-two-col,
  .pi-two-col--wide-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .pi-two-col__aside {
    position: static;
    top: auto;
  }
}

/* --- Bandeau d'appel à l'action --------------------------------------------- */

.pi-cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.pi-cta-band__title {
  font: var(--weight-semibold) var(--title-2) / 1.2 var(--font-display);
  color: var(--blanc);
  margin: 0;
}

.pi-cta-band__meta {
  font: var(--weight-regular) var(--ui-2xs) / 1.5 var(--font-meta);
  color: var(--creme-200);
  margin: 8px 0 0;
}

.pi-cta-band > .pi-btn {
  flex: none;
  min-height: var(--tap-min);
}

@media (max-width: 767.98px) {
  .pi-cta-band {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}

/* --- Colonnes de prose ------------------------------------------------------ */

.pi-prose {
  max-width: var(--measure-prose);
}

.pi-prose p {
  font: var(--weight-regular) var(--body-md) / var(--body-md-lh) var(--font-body);
  color: var(--text-body);
  margin: 0 0 var(--space-7);
}

.pi-prose p:last-child {
  margin-bottom: 0;
}

.pi-prose > h2,
.pi-prose > h3,
.pi-prose > h4 {
  margin: var(--space-14) 0 var(--space-7);
}

.pi-prose > :first-child {
  margin-top: 0;
}

.pi-prose ul,
.pi-prose ol {
  margin: 0 0 var(--space-7);
  padding-left: var(--space-9);
}

.pi-prose li {
  font: var(--weight-regular) var(--body-md) / var(--body-md-lh) var(--font-body);
  color: var(--text-body);
  margin-bottom: var(--space-2);
}

.pi-prose a {
  border-bottom: var(--stroke-hairline) solid var(--rouge-600);
}

.pi-prose img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Paragraphe d'ouverture en sérif. */
.pi-lead {
  font: var(--weight-regular) var(--lead) / var(--lead-lh) var(--font-display);
  color: var(--text-body);
  margin: 0;
}

/* --- Pile verticale d'un rythme donné -------------------------------------- */

.pi-stack > * + * {
  margin-top: var(--space-9);
}

.pi-stack--tight > * + * {
  margin-top: var(--space-5);
}

.pi-stack--loose > * + * {
  margin-top: var(--space-16);
}

/* --- Rangée d'éléments en ligne -------------------------------------------- */

.pi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pi-row--tight {
  gap: 8px;
}