.art-page { padding-top: clamp(72px, 9vw, 120px); }
  .art-page .page-hero { padding-top: 0; }
  .art-crumbs {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--stone-500); text-transform: uppercase;
    margin: 0 0 24px;
  }
  .art-crumbs a { color: var(--stone-500); }
  .art-crumbs a:hover { color: var(--ink-900); }
  .art-crumbs .sep { margin: 0 8px; opacity: 0.5; }

  .art-cover {
    margin: 56px 0 56px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--linen-200);
  }
  .art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .art-body {
    max-width: 720px;
    font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-700);
  }
  .art-lead {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(22px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -0.005em;
    color: var(--ink-900);
    margin: 0 0 48px;
    padding-bottom: 36px; border-bottom: var(--hairline);
    max-width: 36ch;
  }
  .art-body h2 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -0.01em;
    color: var(--ink-900);
    margin: 56px 0 16px;
  }
  .art-body p { margin: 0 0 20px; }
  .art-body strong { color: var(--ink-900); font-weight: 600; }
  .art-body em { font-style: italic; color: var(--sage-700); }
  .art-body a { color: var(--sage-700); text-decoration: underline; text-underline-offset: 3px; }
  .art-body a:hover { color: var(--olive-900); }
  .art-body ul { margin: 0 0 24px; padding-left: 22px; }
  .art-body li { margin: 0 0 10px; }
  .art-body figure { margin: 36px 0; }
  .art-body figure img { width: 100%; height: auto; display: block; }
  .art-body figcaption {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
    color: var(--stone-500); text-transform: uppercase;
    margin-top: 10px;
  }
  .art-body blockquote {
    margin: 36px 0;
    padding: 28px 32px;
    background: color-mix(in oklab, var(--sage-200) 45%, var(--linen-50));
    border-left: 3px solid var(--sage-700);
    font-family: var(--font-sans); font-style: normal; font-weight: inherit; font-size: 15.5px; line-height: 1.6; letter-spacing: 0; color: var(--ink-900);
    text-wrap: balance;
  }
  /* Encart « Dormir à … » en bas de chaque fiche (relecture SEO F12.4, 2026-10-09) */
  .art-stay { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 72ch; padding: 20px 0 0; border-top: var(--hairline-strong); font-family: var(--font-display); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.3; color: var(--ink-900); }
  .art-stay a { color: var(--sage-700); text-decoration: underline; text-underline-offset: 4px; }
  .art-stay a:hover { color: var(--olive-900); }


  .art-back {
    margin-top: 96px; padding-top: 36px; border-top: var(--hairline);
    max-width: 720px;
  }
  .art-back a {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0.02em;
    color: var(--olive-900);
    padding-bottom: 3px; border-bottom: 1px solid var(--olive-900);
    transition: gap .2s, color .2s, border-color .2s;
  }
  .art-back a:hover { gap: 14px; color: var(--sage-700); border-color: var(--sage-700); }
  .art-back svg { transform: scaleX(-1); }