/* Contenus de catalogue (charte « Seuil ») : tableaux à filets (empilés en mobile), texte éditorial en markdown
   (.contenu-seo), sommaire des guides et bloc FAQ. Partagée par les pages catalogue et la fiche produit, qui ne
   charge ainsi pas toute la feuille catalogue. Espaces : jetons seulement. */

/* ---------- Tableaux : lignes à filet, chiffres alignés ; empilés en liste de définitions sous 48 rem ---------- */
.tableau,
.contenu-seo table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-petit);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.tableau th,
.tableau td,
.contenu-seo th,
.contenu-seo td {
  padding: var(--e-3) var(--e-4) var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.tableau thead th,
.contenu-seo thead th {
  color: var(--texte-2);
  font-weight: 500;
  border-bottom-color: var(--texte);
}
.tableau tbody th {
  font-weight: 600;
}
.tableau a {
  color: inherit;
}
.tableau__nombre {
  text-align: right;
  white-space: nowrap;
}
.tableau th.tableau__nombre,
.tableau td.tableau__nombre,
.tableau :is(th, td):last-child {
  padding-right: 0;
}
.tableau .tableau__nombre {
  padding-left: var(--e-4);
  text-align: right;
}
/* Un tableau markdown de deux colonnes (intitulé, valeur) reste un tableau : l'empiler répéterait l'en-tête « Valeur »
   devant chaque donnée. Seuls les tableaux de trois colonnes et plus s'empilent. */
@media (max-width: 47.99rem) {
  .tableau thead,
  .contenu-seo table:has(:is(th, td):nth-child(3)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tableau,
  .tableau tbody,
  .contenu-seo table:has(:is(th, td):nth-child(3)),
  .contenu-seo table:has(:is(th, td):nth-child(3)) tbody {
    display: block;
  }
  .tableau tr,
  .contenu-seo table:has(:is(th, td):nth-child(3)) tr {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding-block: var(--e-4);
    border-bottom: 1px solid var(--trait);
  }
  .tableau tbody tr:first-child,
  .contenu-seo table:has(:is(th, td):nth-child(3)) tbody tr:first-child {
    border-top: 1px solid var(--texte);
  }
  .tableau th,
  .tableau td,
  .contenu-seo table:has(:is(th, td):nth-child(3)) th,
  .contenu-seo table:has(:is(th, td):nth-child(3)) td {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--e-3);
    padding: 0;
    border: 0;
  }
  .tableau tbody th,
  .contenu-seo table:has(:is(th, td):nth-child(3)) tbody td:first-child {
    display: block;
    font-size: var(--fs-texte);
    font-weight: 600;
  }
  .tableau .tableau__nombre {
    padding-left: 0;
    text-align: left;
  }
  .tableau td[data-label]::before,
  .contenu-seo table:has(:is(th, td):nth-child(3)) td[data-label]::before {
    content: attr(data-label);
    color: var(--texte-2);
  }
  .contenu-seo table:has(:is(th, td):nth-child(3)) td[data-label]:first-child::before {
    content: none;
  }
  /* Comparatif à phrases longues : l'intitulé passe au-dessus de la valeur */
  .tableau--comparatif td {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-1);
  }
}
@media (min-width: 48rem) {
  .tableau--comparatif {
    table-layout: fixed;
  }
  .tableau--comparatif th:first-child {
    width: 22%;
  }
}

/* Références côte à côte (collection) */
.comparatif__table {
  max-width: 100%;
}

/* ---------- Contenu éditorial (markdown) et sommaire ---------- */
.editorial__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.editorial__aside {
  display: none;
}
@media (min-width: 64rem) {
  .editorial__grille {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--e-9);
  }
  .editorial__aside {
    display: block;
  }
  .guide-aside {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
  }
}
.contenu-seo {
  max-width: var(--mesure);
}
/* Texte long : seule exception à la règle des piles, comme .texte (base.css) */
.contenu-seo > * + * {
  margin-top: var(--e-4);
}
.contenu-seo > h2 {
  margin-top: var(--e-8);
  font-size: var(--fs-h2);
}
.contenu-seo > h3 {
  margin-top: var(--e-6);
}
.contenu-seo > h4 {
  margin-top: var(--e-5);
}
.contenu-seo > :first-child {
  margin-top: 0;
}
.contenu-seo > :is(h2, h3, h4) + * {
  margin-top: var(--e-3);
}
.contenu-seo ul,
.contenu-seo ol {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-left: var(--e-5);
}
.contenu-seo li::marker {
  color: var(--texte-2);
}
.contenu-seo a {
  color: var(--lien);
}
.contenu-seo blockquote {
  padding-left: var(--e-5);
  border-left: 2px solid var(--trait);
  font-family: var(--police-titre);
  font-size: var(--fs-chapo);
}
.contenu-seo .md-box {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--surface);
}
.contenu-seo .md-box > * + * {
  margin-top: 0;
}
.md-box__title {
  font-weight: 600;
}
.contenu-seo > .md-table {
  margin-block: var(--e-6);
}
.md-table {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.md-table figcaption {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.catalogue-produits__intro.contenu-seo {
  font-size: var(--fs-texte);
}
.sommaire-guide {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.sommaire-guide__titre {
  font-weight: 600;
}
.sommaire-guide__liste {
  display: flex;
  flex-direction: column;
}
.sommaire-guide__lien {
  display: block;
  padding: var(--e-2) 0 var(--e-2) var(--e-4);
  border-left: 1px solid var(--trait);
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.4;
  text-decoration: none;
}
.sommaire-guide__lien:hover {
  color: var(--texte);
}
.sommaire-guide__lien[aria-current] {
  border-left-color: var(--texte);
  box-shadow: inset 1px 0 0 var(--texte);
  color: var(--texte);
  font-weight: 500;
}
.guide-aside__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
}
/* Colonne 4fr étroite entre 64 et 80 rem : padding de panneau mobile, pour que « Voir les références » tienne sur une ligne */
@media (max-width: 79.99rem) {
  .guide-aside__action {
    padding: var(--e-5);
  }
}
.guide-aside__accroche {
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

/* ---------- FAQ : titre à gauche, questions à droite au bureau ---------- */
.bloc-faq__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.bloc-faq__tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
.bloc-faq__tete h2 {
  max-width: 18ch;
}
@media (min-width: 64rem) {
  .bloc-faq__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--e-8);
  }
}