/* ═══════════════════════════════════════════════════════════════════
   ARTICLE · la feuille des pages éditoriales de kelya.ch
   Reprend les jetons de kelya.css. Aucune dépendance à Tailwind :
   les utilitaires du build précompilé ne couvrent pas tous les pas
   d'espacement, et une classe absente ne prévient pas.
   ═══════════════════════════════════════════════════════════════════ */

.art {
  --mesure: 34rem;          /* ~66 caractères, la largeur de lecture */
  --large: 52rem;           /* tableaux et encadrés, plus larges     */
  --t-titre: clamp(2.4rem, 6vw, 3.9rem);
  --t-h2:    clamp(1.7rem, 3.4vw, 2.35rem);
  --t-h3:    1.35rem;
  --t-corps: 1.1875rem;
  --t-petit: .95rem;
  --t-caps:  .7rem;
}

/* ── L'ossature ─────────────────────────────────────────────────── */
.art-entete {
  padding: calc(var(--barre-h, 69px) + 4rem) 1.5rem 0;
  background: var(--color-blanc);
}
.art-corps { padding: 0 1.5rem 5rem; background: var(--color-blanc); }
@media (min-width: 768px) {
  .art-entete { padding-left: 2.5rem; padding-right: 2.5rem; padding-top: calc(var(--barre-h, 69px) + 5.5rem); }
  .art-corps  { padding-left: 2.5rem; padding-right: 2.5rem; padding-bottom: 7rem; }
}
.art-largeur { max-width: var(--large); margin: 0 auto; }
.art-mesure  { max-width: var(--mesure); }

/* ── Le chapeau ─────────────────────────────────────────────────── */
.art-fil {
  margin: 0 0 1.6rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
}
.art-fil a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.art-titre {
  margin: 0 0 1.4rem;
  font-family: var(--font-titre), Georgia, serif;
  font-weight: 300;
  font-size: var(--t-titre);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--color-encre);
  max-width: 20ch;
  text-wrap: balance;
}
.art-chapo {
  margin: 0 0 2.2rem;
  max-width: var(--mesure);
  font-size: 1.28rem;
  line-height: 1.55;
  color: var(--color-ardoise);
}
.art-signe {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--color-bordure);
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ardoise-doux);
}
.art-signe span + span::before { content: "·"; margin-right: 1.1rem; opacity: .6; }

/* ── Le texte ───────────────────────────────────────────────────── */
.art-corps h2 {
  margin: 4rem 0 1.1rem;
  max-width: 24ch;
  font-family: var(--font-titre), Georgia, serif;
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--color-encre);
  text-wrap: balance;
}
.art-corps h2:first-child { margin-top: 2.6rem; }
.art-corps h3 {
  margin: 2.6rem 0 .8rem;
  max-width: 34ch;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--color-encre);
}
/* :where() met cette règle à spécificité nulle. Sans cela, « .art-corps p »
   (une classe + un élément) l'emporte sur chaque composant nommé par une
   seule classe, et toute la hiérarchie typographique s'aplatit à 19 px. */
.art-corps :where(p) {
  margin: 0 0 1.3rem;
  max-width: var(--mesure);
  font-size: var(--t-corps);
  line-height: 1.72;
  color: var(--color-texte);
}
.art-corps :where(p) strong { font-weight: 600; color: var(--color-encre); }
.art-corps a { color: var(--color-or-fonce); text-underline-offset: 2px; }

.art-liste { margin: 0 0 1.5rem; padding: 0; list-style: none; max-width: var(--mesure); }
.art-liste li {
  position: relative;
  margin: 0 0 .85rem;
  padding-left: 1.5rem;
  font-size: var(--t-corps);
  line-height: 1.68;
  color: var(--color-texte);
}
.art-liste li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .55rem; height: 1px; background: var(--color-or);
}
.art-liste li strong { font-weight: 600; color: var(--color-encre); }

/* ── La réponse en tête, l'élément le plus lu de la page ────────── */
.art-reponse { margin: 2.4rem 0 3rem; max-width: var(--large); }
.art-reponse-lbl {
  margin: 0 0 1.1rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
}
.art-reponse-cle {
  margin: 0 0 1rem;
  font-family: var(--font-titre), Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  line-height: 1.22;
  color: var(--color-encre);
  max-width: 26ch;
}
.art-reponse-txt {
  margin: 0;
  max-width: 56ch;
  font-size: var(--t-corps);
  line-height: 1.68;
  color: var(--color-ardoise);
}
.art-reponse-txt strong { font-weight: 600; color: var(--color-encre); }

/* ── Les tableaux de charges ────────────────────────────────────── */
.art-tbl-cadre {
  margin: 0 0 1.6rem;
  max-width: var(--large);
  overflow-x: auto;
  border: 1px solid var(--color-bordure);
  background: var(--color-blanc);
}
.art-tbl { border-collapse: collapse; width: 100%; min-width: 33rem; }
.art-tbl th, .art-tbl td {
  padding: .78rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-bordure);
  font-size: var(--t-petit);
  line-height: 1.5;
}
.art-tbl thead th {
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ardoise-doux);
  background: var(--color-ivoire);
  border-bottom: 1px solid var(--color-bordure-forte);
}
.art-tbl tbody tr:last-child td { border-bottom: 0; }
.art-tbl .t-nom { font-weight: 600; color: var(--color-encre); }
.art-tbl .t-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-encre);
}
.art-tbl tfoot td {
  background: var(--color-ivoire);
  border-top: 1px solid var(--color-bordure-forte);
  font-weight: 600;
  color: var(--color-encre);
}
.art-tbl-note {
  margin: -.6rem 0 2.4rem;
  max-width: var(--large);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--color-ardoise-doux);
}

/* ── Les deux cas mis côte à côte ───────────────────────────────── */
.art-duo {
  display: grid; gap: 1px;
  background: var(--color-bordure);
  border: 1px solid var(--color-bordure);
  margin: 0 0 1.4rem;
  max-width: var(--large);
}
@media (min-width: 700px) { .art-duo { grid-template-columns: 1fr 1fr; } }
.art-cas { background: var(--color-blanc); padding: 1.6rem 1.5rem 1.7rem; }
.art-cas-lbl {
  margin: 0 0 .9rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
}
.art-cas-chiffre {
  margin: 0 0 .2rem;
  font-family: var(--font-titre), Georgia, serif;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-encre);
}
.art-cas-sous { margin: 0 0 1.1rem; font-size: .84rem; color: var(--color-ardoise-doux); }
.art-cas-detail { margin: 0; padding: 0; list-style: none; }
.art-cas-detail li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .42rem 0;
  border-top: 1px solid var(--color-bordure);
  font-size: .85rem;
  color: var(--color-texte);
}
.art-cas-detail li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-encre); }

/* ── L'encadré de mise en garde ─────────────────────────────────── */
.art-garde {
  margin: 2.4rem 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-bordure-forte);
  max-width: var(--mesure);
}
.art-garde-lbl {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 .9rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ardoise-doux);
}
.art-garde-lbl::before {
  content: ""; width: 30px; height: 1px; background: currentColor; opacity: .7; flex: none;
}
.art-garde-txt {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-petit);
  line-height: 1.7;
  color: var(--color-ardoise-doux);
}

/* ── L'appel vers la formation ──────────────────────────────────── */
.art-suite {
  margin: 5rem 0 0;
  padding: 2.6rem 1.8rem 2.8rem;
  background: var(--color-ivoire);
  border-top: 1px solid var(--color-or);
  max-width: var(--large);
}
@media (min-width: 768px) { .art-suite { padding: 3.2rem 3rem 3.4rem; } }
.art-suite-lbl {
  margin: 0 0 1rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
}
.art-suite-titre {
  margin: 0 0 1rem;
  font-family: var(--font-titre), Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.14;
  color: var(--color-encre);
  max-width: 22ch;
}
.art-suite-txt {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-corps);
  line-height: 1.68;
  color: var(--color-texte);
}
.art-suite-lien {
  display: inline-block;
  margin-top: 1rem;
  padding: .95rem 2rem;
  border: 1px solid var(--color-or);
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: var(--t-caps);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
  text-decoration: none;
  transition: background-color .4s ease, color .4s ease;
}
.art-suite-lien:hover { background: var(--color-or); color: var(--color-blanc); }

@media (prefers-reduced-motion: reduce) { .art-suite-lien { transition: none; } }

/* Sur petit écran le tableau défile dans son cadre ; rien ne le dit,
   et la dernière colonne passe inaperçue. */
.art-tbl-glisse {
  display: none;
  margin: -.9rem 0 1.6rem;
  font-family: var(--font-texte), system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-or-fonce);
}
@media (max-width: 699px) { .art-tbl-glisse { display: block; } }

/* La formule du calcul rapide : elle doit se retenir d'un coup d'œil. */
.art-formule {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.4rem 1.3rem;
  max-width: var(--large);
  background: var(--color-ivoire);
  border-left: 2px solid var(--color-or);
  font-family: var(--font-titre), Georgia, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  color: var(--color-encre);
}

/* ═══════════════════════════════════════════════════════════════════
   LE SUIVI DE LECTURE
   Un rail de sections à gauche, comme le sommaire du cours, et une
   ligne de progression en haut. Le rail n'apparaît qu'à partir du
   moment où il y a la place de le poser sans rogner la mesure de
   lecture ; en dessous, la ligne suffit.
   ═══════════════════════════════════════════════════════════════════ */

.art-progres {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.art-progres span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-or);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .art-progres span { transition: none; } }

.art-rail { display: none; }

@media (min-width: 1180px) {
  /* La colonne de texte garde sa mesure ; le rail se pose à côté,
     dans la marge, sans la rétrécir. */
  .art-corps > .art-largeur { margin-left: 0; }
  .art-corps {
    display: grid;
    grid-template-columns: 13rem minmax(0, var(--large));
    column-gap: 3.5rem;
    justify-content: center;
    align-items: start;
  }
  .art-rail {
    display: block;
    position: sticky;
    top: calc(var(--barre-h, 69px) + 2.6rem);
    padding-top: .3rem;
  }
  .art-rail-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: section;
    border-left: 1px solid var(--color-bordure);
  }
  .art-rail-liste li { counter-increment: section; }
  .art-rail-lien {
    display: block;
    position: relative;
    padding: .5rem 0 .5rem 1.1rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-family: var(--font-texte), system-ui, sans-serif;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--color-ardoise-doux);
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
  }
  .art-rail-lien::before {
    content: counter(section, decimal-leading-zero);
    display: block;
    margin-bottom: .15rem;
    font-size: .62rem;
    letter-spacing: .14em;
    color: var(--color-bordure-forte);
    font-variant-numeric: tabular-nums;
  }
  .art-rail-lien:hover { color: var(--color-encre); }
  .art-rail-lien[aria-current="true"] {
    color: var(--color-encre);
    border-left-color: var(--color-or);
  }
  .art-rail-lien[aria-current="true"]::before { color: var(--color-or-fonce); }
  .art-rail-lien:focus-visible { outline: 2px solid var(--color-or); outline-offset: 2px; }

  /* Le titre visé ne doit pas se glisser sous la barre du site. */
  .art-corps h2 { scroll-margin-top: calc(var(--barre-h, 69px) + 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}