/* ============================================
   IAF Listing — titre de section (col 1-2) + 3 items fixes (col 3-6)
   Grille 6 colonnes du briefing §8. Séparateurs verticaux 1px Léman 150 : ligne
   avant chaque item (y compris le 1er), bord gauche de la cellule.
   Mobile layout : mobile-responsive.css (≤1023) + tokens --iaf-layout-padding-*.
   ============================================ */

:root {
  --iaf-listing-max-width: 1440px;
  --iaf-listing-padding-inline: 64px;
  --iaf-listing-padding-block: 120px;

  --iaf-listing-grid-gap: 32px;              /* gap entre les 6 colonnes */
  --iaf-listing-items-gap: 48px;             /* gap entre colonnes du sous-grid */
  --iaf-listing-separator-pad: 24px;         /* marge texte à droite de la ligne verticale */
  --iaf-listing-item-gap-min: 100px;         /* espace minimum entre titre d’item et corps */
  --iaf-listing-section-text-max-width: 340px;
}

.iaf-listing {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: var(--iaf-listing-padding-block);
  padding-inline: var(--iaf-listing-padding-inline);
  background-color: transparent;
  display: flex;
  justify-content: center;
}

/* Sans filet : padding haut standard. Avec filet (haut ou Intro Text bas) : gap wrapper seul (60px). */
.iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > .iaf-listing {
  padding-top: var(--iaf-listing-padding-block);
}

.iaf-ext-spacing--has-top-divider > .iaf-listing,
.iaf-ext-spacing--has-bottom-divider + .iaf-ext-spacing > .iaf-listing {
  padding-top: 0;
}

.iaf-listing__inner {
  width: 100%;
  max-width: calc(var(--iaf-listing-max-width) - (var(--iaf-listing-padding-inline) * 2));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--iaf-listing-grid-gap);
  align-items: start;
}

/* -------- Colonne gauche : titre de section (col 1-2) -------- */

.iaf-listing__title-wrap {
  grid-column: 1 / span 2;
}

.iaf-listing__title {
  margin: 0;
  color: var(--iaf-canvas-heading);
  text-wrap: balance;
}

.iaf-listing__section-text {
  margin-top: 20px;
  max-width: var(--iaf-listing-section-text-max-width);
  color: var(--iaf-canvas-text);
}

.iaf-listing__section-text p {
  margin: 0;
}

.iaf-listing__section-text p + p {
  margin-top: 16px;
}

/* -------- Listing (col 3-6) -------- */

.iaf-listing__items {
  grid-column: 3 / span 4;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--iaf-listing-items-gap);
  align-items: stretch;
}

/* 2 items : deux colonnes de même largeur qui occupent l'espace total
   (évite de laisser un "trou" visuel à droite). */
.iaf-listing__items[data-iaf-listing-count],
.iaf-listing[data-iaf-listing-count="2"] .iaf-listing__items {
  /* no-op de clarté : le cas 3 items utilise la règle de base. */
}

.iaf-listing[data-iaf-listing-count="2"] .iaf-listing__items {
  grid-template-columns: repeat(2, 1fr);
}

/* Full-width si pas de titre de section : le listing prend toute la ligne. */
.iaf-listing[data-iaf-listing-notitle] .iaf-listing__items {
  grid-column: 1 / -1;
}

/* -------- Items -------- */

.iaf-listing__item {
  display: flex;
  flex-direction: column;
  /* Ligne verticale *avant* chaque item (1er, 2e, 3e) + décalage du texte. */
  border-left: 1px solid var(--iaf-canvas-border-strong);
  padding-left: var(--iaf-listing-separator-pad);
  box-sizing: border-box;
}

/* -------- Typographie items -------- */

.iaf-listing__item-title {
  margin: 0 0 var(--iaf-listing-item-gap-min);
  color: var(--iaf-canvas-accent);
}

.iaf-listing__item-text {
  margin-top: auto;
  color: var(--iaf-canvas-text);
}

.iaf-listing__item-text p {
  margin: 0;
}

.iaf-listing__item-text p + p {
  margin-top: 16px;
}

.iaf-listing__item-text em {
  font-style: italic;
}

/* Surface charte #EEEEEE : filets verticaux noirs (le titre suit --iaf-canvas-heading). */
.iaf-listing--white-surface .iaf-listing__item {
  border-left-color: #1e1e1e;
}

.iaf-listing--white-surface .iaf-listing__item-title {
  color: #2398ff;
}

.iaf-listing--white-surface .iaf-listing__item-text {
  color: #1e1e1e;
}

@media (max-width: 1023px) {
  .iaf-listing {
    padding-inline: var(--iaf-layout-padding-inline-tablet, 24px);
    padding-bottom: clamp(152px, 28vh, 208px);
  }

  /* Sans filet au-dessus : espace depuis l’extension précédente. Avec filet : 16px via --iaf-ext-divider-gap. */
  .iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > .iaf-listing {
    padding-top: clamp(80px, 14vh, 104px);
  }

  .iaf-listing__inner {
    grid-template-columns: 1fr;
  }

  .iaf-listing__title-wrap {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-bottom: clamp(52px, 11vh, 80px);
  }

  .iaf-listing__title {
    max-width: none;
    width: 100%;
  }

  .iaf-listing__section-text {
    max-width: none;
  }

  .iaf-listing__items,
  .iaf-listing[data-iaf-listing-count='2'] .iaf-listing__items,
  .iaf-listing[data-iaf-listing-count='3'] .iaf-listing__items {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Filet interne : 32px avant la ligne, 16px ligne → titre d’item (comme landing). */
  .iaf-listing__item {
    border-left: none;
    padding-left: 0;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
  }

  .iaf-listing__item + .iaf-listing__item {
    margin-top: var(--iaf-ext-divider-gap-before, 32px);
    padding-top: var(--iaf-ext-item-divider-gap, 16px);
    border-top: 1px solid var(--iaf-canvas-border-strong);
  }

  .iaf-listing__item-title {
    margin-bottom: 20px;
  }

  .iaf-listing__item-text {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .iaf-listing {
    padding-inline: var(--iaf-layout-padding-inline-phone, 20px);
    padding-bottom: clamp(144px, 26vh, 192px);
  }

  .iaf-ext-spacing:not(.iaf-ext-spacing--has-top-divider) > .iaf-listing {
    padding-top: clamp(72px, 13vh, 96px);
  }
}