/* Pages d'article. S'appuie sur style.css, motion.css et rubriques.css (fil d'Ariane, vignettes, pager). */

.page-article {
  --measure: 33em;
  --col-gap: clamp(16px, 2vw, 32px);
  --read: clamp(17px, 0.46vw + 12.4px, 27px);
  --side: clamp(15px, 0.36vw + 10.9px, 22px);
}

/* En-tête */
.rub-head.art-head { padding-top: calc(var(--header) + clamp(8px, 1vw, 16px)); }
.rub-head.art-head h1 { padding-top: 0.24em; margin-top: -0.06em; text-wrap: balance; hyphens: manual; }
.art-t-s h1 { font-size: clamp(56px, 8.4vw, 196px); }
.art-t-m h1 { font-size: clamp(44px, 6.4vw, 150px); }
.art-t-l h1 { font-size: clamp(36px, 4.6vw, 108px); line-height: 1; }
.art-t-xl h1 { font-size: clamp(30px, 3.5vw, 84px); line-height: 1.02; }

.art-sub {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 32px;
  padding-block: clamp(4px, 0.6vw, 12px) clamp(12px, 1.2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.art-by { font: 400 clamp(22px, 2vw, 46px)/1.15 var(--serif); letter-spacing: -0.008em; }
.art-meta { font-size: 14px; color: var(--ink-soft); }

/* Grille */
.art-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-top: clamp(20px, 2.2vw, 40px);
  padding-bottom: clamp(32px, 3.6vw, 64px);
}
.art-body { grid-column: 1 / span 7; grid-row: 1; min-width: 0; }
.art-aside { grid-column: 8 / -1; grid-row: 1 / span 2; padding-left: clamp(16px, 3vw, 72px); }
.art-pager { grid-column: 1 / span 7; grid-row: 2; }

/* Colonne de lecture */
.art-body { font-size: var(--read); line-height: 1.62; }
.art-body > p, .art-body > h2, .art-body > h3, .art-body > h4, .art-body > ul, .art-body > ol, .art-body > blockquote, .art-body > hr { max-width: var(--measure); }
.art-body > * + * { margin-top: 1em; }
.art-body > :first-child { margin-top: 0; }
.art-body h2, .art-body h3, .art-body h4 { margin-top: 1.5em; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; }
.art-body h2 { font-size: 1.75em; }
.art-body h3, .art-body h4 { font-size: 1.4em; }
.art-body strong { font-weight: 600; }
.art-body em { font-style: italic; }
.art-body ul, .art-body ol { padding-left: 1.2em; list-style: revert; }
.art-body li + li { margin-top: 0.35em; }
.art-body blockquote { margin: 1em 0 0; padding-left: 1em; border-left: 1px solid var(--ink); }
.art-body hr { width: 100%; height: 1px; margin-block: 1.6em 0; background: var(--line); border: 0; margin-inline: 0; }
.art-body sup { line-height: 0; font-size: 0.72em; }
.art-body code { font-size: 0.92em; }

.art-body a:not(.art-zoom):not(.link) {
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.4s var(--ease);
}
.art-body a:not(.art-zoom):not(.link):hover { text-decoration-color: currentColor; }
.art-note { font-size: 0.82em; line-height: 1.5; color: var(--ink-soft); }
.art-body > .art-note + .art-note { margin-top: 0.5em; }

.art-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9em; }
.art-body td, .art-body th { padding: 6px 16px 6px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.art-body td p + p { margin-top: 0.5em; }

/* Médias */
.art-body figure { margin-inline: 0; margin-bottom: 0; max-width: 100%; }
.art-body > figure + p, .art-body > p + figure, .art-body > figure + figure { margin-top: 1.3em; }
.art-fig img { max-width: 100%; height: auto; }
.art-zoom { display: inline-block; max-width: 100%; vertical-align: top; }
.art-body figcaption { padding-top: 8px; font-size: 0.82em; line-height: 1.4; color: var(--ink-soft); }
.art-dead { display: none; }

.art-embed iframe { display: block; width: 100%; border: 0; background: var(--night); }
.art-embed-video iframe { aspect-ratio: 16 / 9; }
.art-embed-audio iframe { height: min(var(--embed-h, 166px), 400px); background: none; }
.art-embed-doc iframe { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--header) - 40px); background: var(--sand); }
.art-pdf-link { margin-top: 2px; font-size: 0.86em; }
.art-embed-file video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--night); }
.art-embed-file audio { display: block; width: 100%; }

/* Colonne de droite */
.art-aside {
  position: sticky; top: calc(var(--header) + 20px); align-self: start;
  max-height: calc(100svh - var(--header) - 28px);
  overflow-y: auto; scrollbar-width: none;
  font-size: var(--side); line-height: 1.4;
}
.art-aside::-webkit-scrollbar { display: none; }

.art-panel { padding-block: 10px clamp(14px, 1.3vw, 24px); border-top: 1px solid var(--line); }
.art-panel:first-child { border-top: 1px solid var(--ink); }
.art-panel h2 { margin-bottom: 6px; font: 500 1em/1.4 var(--sans); letter-spacing: 0; color: var(--ink-soft); }

.art-rubs { display: flex; flex-wrap: wrap; font: 400 1.55em/1.22 var(--serif); letter-spacing: -0.006em; }
.art-rubs li:not(:last-child)::after { content: ",\00a0"; }
.art-rubs a, .art-tags a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.7s var(--slow);
}
.art-rubs a:hover, .art-rubs a:focus-visible, .art-tags a:hover, .art-tags a:focus-visible { background-size: 100% 1px; }

.art-book-link { display: grid; grid-template-columns: clamp(52px, 4vw, 92px) minmax(0, 1fr); column-gap: 14px; align-items: center; }
.art-book-link img { width: 100%; height: auto; box-shadow: 0 10px 18px -10px rgba(40, 28, 22, 0.55); transition: translate 0.6s var(--slow); }
.art-book-link:hover img { translate: 0 -4px; }
.art-book-title { display: inline; font: 400 1.55em/1.1 var(--serif); letter-spacing: -0.006em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.9s var(--slow); }
.art-book-link:hover .art-book-title { background-size: 100% 1px; }
.art-book-title::after { content: " →"; font: 400 0.7em/1 var(--sans); }
.art-book-sub { display: block; margin-top: 2px; font-size: 0.92em; color: var(--ink-soft); }

.art-related ul { display: grid; row-gap: clamp(8px, 0.7vw, 14px); }
.art-rel-item > a { display: grid; grid-template-columns: clamp(76px, 7vw, 168px) minmax(0, 1fr); column-gap: 14px; align-items: center; }
.art-rel-item .plate { padding: 3px; }
.art-rel-item .plate img { filter: grayscale(1); transition: filter 0.9s var(--slow); }
.art-rel-item > a:hover .plate img, .art-rel-item > a:focus-visible .plate img { filter: grayscale(0); }
.plate-empty img { opacity: 0.4; }
.art-rel-title { display: block; font: 400 1.32em/1.12 var(--serif); letter-spacing: -0.006em; }
.art-rel-title span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 1.1s var(--slow); }
.art-rel-item > a:hover .art-rel-title span, .art-rel-item > a:focus-visible .art-rel-title span { background-size: 100% 1px; }
.art-rel-by { display: block; margin-top: 2px; font-size: 0.86em; line-height: 1.3; color: var(--ink-soft); }

.art-tags ul { display: flex; flex-wrap: wrap; gap: 0 1.1em; }
.art-tags li { padding-block: 2px; }

/* Article précédent et suivant */
.art-pager { padding-block: clamp(20px, 2vw, 36px) 0; align-items: start; }
.art-pager .pager-name { font-size: clamp(22px, 1.7vw, 40px); line-height: 1.14; min-height: 0; margin-top: 2px; }
.art-pager .pager-link { min-width: 0; max-width: 100%; }
.art-pager .pager-dir { font-size: var(--side); }

/* Animations liées au scroll : variable --m posée par motion.js. Le texte est lisible dès son entrée à l'écran. */
.art-sub.m { opacity: calc(0.1 + var(--m) * 0.9); }
.art-body > p.m, .art-body > h2.m, .art-body > h3.m, .art-body > h4.m, .art-body > ul.m, .art-body > ol.m, .art-body > blockquote.m, .art-body > table.m {
  translate: 0 calc((1 - min(1, var(--m) * 2.4)) * 22px);
  opacity: min(1, calc(0.08 + var(--m) * 2.6));
}
.art-body > figure.m { clip-path: inset(calc((1 - min(1, var(--m) * 1.7)) * 100%) 0 0 0); }

/* Colonne fixe : ouverture au chargement, car ses éléments ne défilent pas */
@media (min-width: 960px) {
  .js .art-panel { animation: art-in 1.2s var(--slow) both; }
  .js .art-panel:nth-child(2) { animation-delay: 0.08s; }
  .js .art-panel:nth-child(3) { animation-delay: 0.16s; }
  .js .art-panel:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes art-in { from { opacity: 0; translate: 0 14px; } }

/* Colonne après le texte : même révélation au scroll que le reste */
@media (max-width: 959px) {
  .art-panel.m { opacity: min(1, calc(0.08 + var(--m) * 2.6)); }
  .art-rel-item.m { translate: calc((1 - min(1, var(--m) * 2)) * 18px) 0; opacity: min(1, calc(0.08 + var(--m) * 2.6)); }
  .art-rel-item.m .plate { clip-path: inset(calc((1 - min(1, var(--m) * 2)) * 100%) 0 0 0); }
}

/* Tablette : la colonne latérale passe après le texte */
@media (max-width: 959px) {
  .art-grid { display: block; }
  .art-aside { position: static; max-height: none; overflow: visible; padding-left: 0; margin-top: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); --side: 16px; }
  .art-panel:first-child { border-top-color: var(--line); }
  .art-fiche, .art-book { grid-row: 1; }
  .art-related, .art-tags { grid-column: 1 / -1; }
  .art-fiche:last-of-type { grid-column: 1 / -1; }
  .art-related ul { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
  .art-rel-item > a { grid-template-columns: 88px minmax(0, 1fr); }
  .art-book-link { grid-template-columns: 64px minmax(0, 1fr); }
  .art-body > p, .art-body > h2, .art-body > h3, .art-body > h4, .art-body > ul, .art-body > ol, .art-body > blockquote, .art-body > hr { max-width: 36em; }
  .art-pager { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
}

@media (min-width: 960px) and (max-width: 1180px) {
  .art-aside { grid-column: 8 / -1; }
  .art-rubs { font-size: 1.4em; }
}

@media (max-width: 640px) {
  .art-t-s h1 { font-size: 15vw; }
  .art-t-m h1 { font-size: 12.4vw; }
  .art-t-l h1 { font-size: clamp(32px, 9.4vw, 40px); }
  .art-t-xl h1 { font-size: clamp(28px, 7.8vw, 34px); }
  .art-sub { display: block; }
  .art-meta { margin-top: 2px; font-size: 13px; }
  .art-aside { display: block; }
  .art-related ul { grid-template-columns: minmax(0, 1fr); }
  .art-rel-item > a { grid-template-columns: 76px minmax(0, 1fr); }
  .art-embed-doc iframe { aspect-ratio: 5 / 7; }
}

@media (min-width: 1800px) {
  .art-meta { font-size: 16px; }
}

@media (min-width: 2400px) {
  .art-meta { font-size: 18px; }
}

.art-tags-all { display: inline-flex; margin-top: 12px; }