/* Pages éditoriales (charte « Seuil ») : en-tête de page, pastilles, colonne de lecture et sommaire, texte long
   (.prose, rendu de src/lib/markdown.js : encadrés md-box, tableaux md-table), cartes produit insérées, partage,
   étapes numérotées, cartes d'article. Chargée par les conseils, les articles et les pages de service.
   Espaces : jetons seulement, posés par les parents ; seul le texte long espace ses paragraphes entre eux. */

/* ---------- En-tête de page ---------- */
.section.page-tete {
  padding-top: var(--e-5);
}
.page-tete__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.page-tete__titre {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.page-tete__titre h1 {
  max-width: 20ch;
}
.page-tete__surtitre {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.page-tete__surtitre a {
  color: inherit;
}
.page-tete__chapo {
  max-width: 52ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.page-tete .pastilles {
  padding-top: var(--e-2);
}
@media (min-width: 64rem) {
  .section.page-tete {
    padding-top: var(--e-7);
  }
}

/* ---------- Colonne de lecture : marge (sommaire) et texte, alignés au bureau ---------- */
.lecture {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.lecture__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
  min-width: 0;
}
/* En mobile et tablette, le sommaire replié s'arrête à la même mesure que le texte qu'il précède */
.lecture__marge {
  max-width: var(--mesure);
}
@media (min-width: 64rem) {
  .lecture {
    grid-template-columns: minmax(0, 15rem) minmax(0, 43rem);
    justify-content: center;
    align-items: start;
    column-gap: var(--e-9);
  }
  .lecture__texte {
    grid-column: 2;
  }
  .lecture__marge {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
    max-height: calc(100vh - var(--hauteur-entete) - var(--e-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ---------- Sommaire : panneau repliable en mobile, liste collante au bureau ---------- */
.sommaire__repli {
  border-radius: var(--r-champ);
  background: var(--surface);
}
.sommaire__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--hauteur-champ);
  padding: var(--e-3) var(--e-5);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.sommaire__titre::-webkit-details-marker {
  display: none;
}
.sommaire__signe {
  position: relative;
  flex: none;
  width: var(--e-4);
  height: var(--e-4);
}
.sommaire__signe::before,
.sommaire__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duree-etat) var(--courbe);
}
.sommaire__signe::after {
  transform: rotate(90deg);
}
.sommaire__repli[open] .sommaire__signe::after {
  transform: rotate(0deg);
}
.sommaire__liste {
  display: flex;
  flex-direction: column;
  padding: 0 var(--e-5) var(--e-4);
  counter-reset: sommaire;
}
.sommaire__lien {
  display: block;
  padding-block: var(--e-2);
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
  text-decoration: none;
}
.sommaire__lien:hover {
  color: var(--texte);
  text-decoration: underline;
}
.sommaire__lien[aria-current] {
  color: var(--texte);
  font-weight: 600;
}
@media (min-width: 64rem) {
  .sommaire__repli {
    border-radius: 0;
    background: transparent;
  }
  /* Ouvert même sans script (toc.js pose aussi l'attribut open) */
  .sommaire__repli::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .sommaire__titre {
    min-height: 0;
    padding: 0 0 var(--e-3);
    font-size: var(--fs-petit);
    cursor: default;
  }
  .sommaire__signe {
    display: none;
  }
  .sommaire__liste {
    padding: 0;
    border-left: 1px solid var(--trait);
  }
  .sommaire__lien {
    padding: var(--e-2) 0 var(--e-2) var(--e-4);
  }
  .sommaire__lien[aria-current] {
    box-shadow: inset 2px 0 0 var(--texte);
  }
}

/* ---------- En-tête d'article (aligné sur la colonne de lecture) ---------- */
.section.article-tete {
  padding-top: var(--e-5);
}
.article-tete__in {
  gap: var(--e-5);
}
.article-tete__titre {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.article-tete__surtitre {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.article-tete__surtitre a {
  color: inherit;
}
.article-tete__chapo {
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.article-tete__infos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.article-tete__infos a {
  color: var(--texte);
}
@media (min-width: 64rem) {
  .section.article-tete {
    padding-top: var(--e-7);
  }
}

/* Couverture : largeur du conteneur, 3:2 en mobile, 21:9 au bureau, angles nets */
.article-couverture img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--lin);
}
@media (min-width: 64rem) {
  .article-couverture img {
    aspect-ratio: 21 / 9;
  }
}

/* ---------- Texte long ---------- */
.prose {
  max-width: var(--mesure);
  line-height: 1.7;
}
.prose > * + * {
  margin-top: var(--e-5);
}
.prose > h2 {
  margin-top: var(--e-8);
  font-size: calc(var(--fs-h2) * 0.84);
  line-height: 1.15;
}
.prose > h3 {
  margin-top: var(--e-7);
  font-size: var(--fs-h3);
}
.prose > h4 {
  margin-top: var(--e-6);
}
.prose > :is(h2, h3, h4) + * {
  margin-top: var(--e-4);
}
.prose > :first-child {
  margin-top: 0;
}
.prose > :is(p, ul, ol, blockquote) a,
.md-box a,
.md-table a {
  color: var(--lien);
}
.prose strong {
  color: var(--texte);
}
.prose > :is(ul, ol):not([class]),
.md-box > :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-left: var(--e-5);
}
.prose > ul:not([class]),
.md-box > ul {
  list-style: square;
}
.prose > ul:not([class]) > li::marker,
.md-box > ul > li::marker {
  color: var(--chene);
}
.prose > ol:not([class]) > li::marker {
  color: var(--texte-2);
  font-family: var(--police-titre);
  font-weight: 500;
}
.prose > :is(ul, ol):not([class]) > li,
.md-box > :is(ul, ol) > li {
  padding-left: var(--e-1);
}
.md-box > :is(ul, ol) {
  gap: var(--e-2);
}
.prose > hr {
  margin-block: var(--e-7);
}
.prose code {
  padding: 0 var(--e-1);
  border-radius: var(--e-1);
  background: var(--lin);
  font-size: 0.92em;
}
.prose > blockquote {
  padding-left: var(--e-5);
  border-left: 2px solid var(--chene);
  font-family: var(--police-titre);
  font-size: var(--fs-chapo);
  line-height: 1.5;
}

/* Encadrés « L’essentiel », « Conseil », « Attention » : des panneaux, jamais de texte au bord */
.md-box {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--surface);
  line-height: 1.6;
}
.prose > .md-box {
  margin-block: var(--e-7);
}
.prose > .md-box:first-child {
  margin-top: 0;
}
.md-box--essentiel {
  background: var(--lin);
}
.md-box--attention {
  background: transparent;
  border: 1px solid var(--texte-2);
}
.md-box__title {
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.md-box > :is(h3, h4) {
  font-family: var(--police-texte);
  font-size: var(--fs-texte);
  font-weight: 600;
}

/* Tableaux : filets fins, chiffres tabulaires ; en mobile, défilement horizontal avec la première colonne fixe */
.md-table {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.prose > .md-table {
  margin-block: var(--e-7);
}
.md-table figcaption {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.5;
}
.md-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to left, var(--fond), var(--fond)) right center / var(--e-6) 100% no-repeat local,
    linear-gradient(to left, rgb(29 36 33 / 0.1), transparent) right center / var(--e-4) 100% no-repeat scroll;
}
.md-table table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-petit);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.md-table :is(th, td) {
  min-width: 7.5rem;
  padding: var(--e-3) var(--e-4) var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.md-table thead th {
  border-bottom-color: var(--texte);
  font-weight: 600;
  vertical-align: bottom;
}
.md-table tbody th {
  font-weight: 600;
}
.md-table :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 6.5rem;
  background: var(--fond);
}
.md-table :is(th, td):last-child {
  padding-right: 0;
}
@media (min-width: 48rem) {
  .md-table :is(th, td) {
    min-width: 0;
  }
  .md-table :is(th, td):first-child {
    position: static;
    min-width: 0;
  }
}
/* Petit mobile : quand les cellules portent leur intitulé de colonne (data-label, posé par la vue), chaque ligne
   devient une fiche empilée (première cellule en titre, puis « intitulé : valeur ») : rien ne défile ni ne se coupe. */
@media (max-width: 29.99rem) {
  .md-table:has(td[data-label]) .md-table__scroll {
    overflow: visible;
    background: none;
  }
  .md-table:has(td[data-label]) :is(table, tbody, tr, th, td) {
    display: block;
  }
  .md-table:has(td[data-label]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .md-table:has(td[data-label]) table {
    border-top: 1px solid var(--texte);
  }
  .md-table:has(td[data-label]) tr {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    padding-block: var(--e-4);
    border-bottom: 1px solid var(--trait);
  }
  .md-table:has(td[data-label]) :is(th, td),
  .md-table:has(td[data-label]) :is(th, td):first-child {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .md-table:has(td[data-label]) :is(th, td):first-child {
    color: var(--texte);
    font-weight: 600;
  }
  .md-table:has(td[data-label]) td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--texte-2);
    font-size: var(--fs-mini);
    line-height: 1.4;
  }
  /* Titre de ligne qui a besoin de son intitulé (« Poids jusqu’à 30 kg ») : sur la même ligne */
  .md-table:has(td[data-label]) th[data-label]::before {
    content: attr(data-label) " ";
    font-weight: 400;
  }
}

/* Cartes produit insérées dans le texte (composant partagé .carte-produit) : une colonne en petit mobile (une
   carte de 130 px ne se lit pas), deux ensuite, trois quand elles se remplissent (3, 5 ou 6 cartes), sans orpheline */
.article-produits__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--e-4);
}
.prose > .article-produits {
  margin-block: var(--e-7);
}
@media (min-width: 30rem) {
  .article-produits__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .article-produits__grille:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(5))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .article-produits__grille {
    column-gap: var(--e-5);
  }
}

/* Encart échantillons inséré dans le texte : panneau lin */
.encart-echantillons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
  padding: var(--pad-panneau);
  border-radius: var(--r-champ);
  background: var(--lin);
}
.prose > .encart-echantillons {
  margin-block: var(--e-7);
}
.encart-echantillons__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.encart-echantillons__titre {
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

/* ---------- Partage ---------- */
.partage {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: var(--mesure);
  padding-top: var(--e-6);
  border-top: 1px solid var(--trait);
}
.partage__titre {
  font-weight: 600;
}
.partage__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---------- Étapes numérotées (vraie suite : guide de pose, livraison) ---------- */
.etapes {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.prose > .etapes {
  margin-block: var(--e-6) var(--e-7);
}
/* Un bloc (tableau, étapes, encadré, cartes) placé juste sous un intertitre lui reste attaché : même écart
   qu'entre un intertitre et son paragraphe, pas l'écart d'un bloc détaché du texte */
.prose > :is(h2, h3, h4) + :is(.md-table, .etapes, .md-box, .article-produits, .encart-echantillons) {
  margin-top: var(--e-4);
}
.etape {
  display: grid;
  grid-template-columns: var(--e-7) minmax(0, 1fr);
  gap: var(--e-4);
  padding-block: var(--e-5);
  border-bottom: 1px solid var(--trait);
}
.etape__numero {
  color: var(--chene);
  font-family: var(--police-titre);
  font-size: var(--fs-h2);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.etape__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}
.etape__cote {
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pilule);
  background: var(--lin);
  font-size: var(--fs-petit);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.etape__titre {
  font-size: var(--fs-h3);
  line-height: 1.25;
}
@media (min-width: 48rem) {
  .etape {
    grid-template-columns: var(--e-9) minmax(0, 1fr);
    padding-block: var(--e-6);
  }
}

/* ---------- Actions de fin de page ---------- */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}
.prose > .page-actions {
  margin-top: var(--e-7);
}
@media (max-width: 29.99rem) {
  /* Pleine largeur même dans une colonne alignée à gauche (align-items: flex-start du parent) */
  .page-actions {
    align-self: stretch;
  }
  .page-actions .bouton {
    width: 100%;
  }
}