/* Guides des ressources : ce qu’editorial.css ne porte pas déjà. Signature, repères de section,
   mesure de lecture (environ 68 signes), formules, tableaux chiffrés, encadrés de fin, sources. */

/* Signature : le nom à l’encre ; la date et la durée ensemble sur la seconde ligne. */
.guide-byline-meta {
  white-space: nowrap;
}
.guide-byline a {
  color: var(--color-graphite);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--motion-hover)
    var(--motion-ease-transition);
}
.guide-byline a:hover {
  text-decoration-color: currentColor;
}
.guide-byline-dot {
  padding-inline: 3px;
  color: var(--color-accent);
}
.guide-byline-download {
  margin-top: 12px;
}
.guide-byline-download .text-link {
  font-size: 14px;
}

/* Sections : un repère « 04 » au-dessus de chaque titre, une mesure de lecture pour la prose. */
.guide-section + .guide-section {
  margin-top: clamp(64px, 7vw, 96px);
}
.guide-section-head .section-index {
  margin-bottom: 18px;
  gap: 14px;
  font-size: var(--text-micro);
  color: var(--color-muted);
}
.guide-section-head .section-index > span {
  width: 24px;
}
.guide-prose > p {
  max-width: 34em;
}
.guide-prose > .guide-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
}

/* Formules : le terme défini, le signe en rouge, la définition. */
.guide-formula {
  display: grid;
  gap: 10px;
}
.guide-formula > span {
  margin-bottom: 2px;
}
.guide-formula-term {
  font-weight: 600;
}
.guide-formula-sign {
  padding-inline: 3px;
  color: var(--color-accent);
}
.guide-formula-definition {
  color: #3d3d3d;
  font-weight: 450;
}

/* Tableaux : les colonnes de chiffres s’alignent à droite, en chiffres tabulaires. */
.guide-table .editorial-table th,
.guide-table .editorial-table td {
  padding: 15px 18px;
  vertical-align: bottom;
}
.guide-table .is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fin du guide : exemple chiffré, « Dans Enskel », sources. */
.guide-end {
  display: grid;
  gap: 24px;
  max-width: 680px;
  margin-top: clamp(72px, 8vw, 110px);
}
.guide-example {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.guide-panel-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--color-muted);
  font: 400 var(--text-micro)/1.5 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.guide-panel-label::before {
  content: '';
  flex: 0 0 22px;
  height: 1px;
  background: var(--color-accent);
}
.guide-example-text {
  color: var(--color-graphite);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.guide-example-download {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.guide-example-download .text-link {
  font-size: 15px;
}
.guide-enskel {
  padding: clamp(26px, 3.4vw, 40px);
}
.guide-enskel-text {
  color: #f4f4f4;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.guide-enskel .rich-link {
  color: #fff;
}
.guide-enskel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 28px;
}
.guide-enskel .text-link {
  gap: 14px;
  color: #fff;
  font-size: 15px;
}
.guide-enskel .link-arrow {
  color: var(--color-accent);
}
@media (hover: hover) {
  .guide-enskel .text-link:hover {
    color: #fff;
  }
}
.guide-sources li {
  display: grid;
  gap: 2px;
}
.guide-source-host {
  color: var(--color-muted);
  font: 400 var(--text-micro)/1.6 var(--font-mono);
  letter-spacing: 0.08em;
}

@media (width < 640px) {
  .guide-example-text {
    font-size: 17px;
  }
  .guide-enskel-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .guide-table .editorial-table th,
  .guide-table .editorial-table td {
    padding: 13px 14px;
  }
}

/* Sommaire, dès 1 200 px : il passe dans la colonne de droite, à l’aplomb de la signature (mêmes
   colonnes qu’.editorial-hero-bottom), et reste collant pendant la lecture (editorial.css). Un
   rail fin porte la section en cours, marquée d’un trait rouge (aria-current, ReadingContents).
   L’ordre du document ne change pas : le sommaire précède le texte au clavier, à toute largeur.
   Plus étroit, il garde la colonne de gauche, puis la liste au-dessus du texte. */
@media (width >= 1200px) {
  .guide .editorial-reading-layout {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.44fr);
    gap: clamp(36px, 7vw, 120px);
  }
  .guide .editorial-toc {
    grid-area: 1 / 2;
  }
  .guide .editorial-reading-body {
    grid-area: 1 / 1;
  }
  .guide .editorial-toc ol {
    gap: 0;
    margin-top: 20px;
    border-inline-start: 1px solid var(--color-line);
  }
  .guide .editorial-toc li a {
    position: relative;
    padding-block: 9px;
    padding-inline-start: 20px;
  }
  /* Le trait se déploie depuis son centre ; en mouvement réduit, il apparaît (global.css). */
  .guide .editorial-toc li a::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -1px;
    width: 2px;
    background: var(--color-accent);
    transform: scaleY(0);
    transition: transform var(--motion-hover) var(--motion-ease-out);
  }
  .guide .editorial-toc li a[aria-current='true']::before {
    transform: scaleY(1);
  }
  .guide .editorial-toc .text-link {
    margin-top: 18px;
  }
}