/* ── LAYOUT ─────────────────────────────────────────────── */
.art-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 48px;
}
.art-container--full {
  max-width: none;
  width: 100%;
}
.art-content-narrow {
  margin: 0 auto;
  max-width: 720px;
}
.art-hero--wide {
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
}

/* ── ARTICLE HEADER ──────────────────────────────────────── */
.art-header {
  padding: 128px 0 48px;
  text-align: center;
}
.art-meta {
  font-size: .7rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #888;
  margin-bottom: 20px;
}
.art-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1.05;
  text-transform: uppercase;
}

/* ── HERO IMAGE ─────────────────────────────────────────── */
.art-hero {
  margin-bottom: 56px;
}
.art-hero-img {
  width: 100%; 
  aspect-ratio: 16/9;
  object-fit: cover; 
  
}

/* ── PLACEHOLDER X WIREFRAME ────────────────────────────── */
.img-placeholder {
  background:
    linear-gradient(to bottom right, transparent calc(50% - .7px), #c8c8c8 calc(50% - .7px), #c8c8c8 calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(to bottom left,  transparent calc(50% - .7px), #c8c8c8 calc(50% - .7px), #c8c8c8 calc(50% + .7px), transparent calc(50% + .7px)),
    #f0f0f0;
  border: 1px solid #d0d0d0;
}

/* ── ARTICLE BODY ───────────────────────────────────────── */
.art-body { padding-bottom: 80px; }
.art-body p {
  font-size: .95rem; line-height: 1.75; color: #333;
  margin-bottom: 28px;
}

/* Titres et contenu courant */
.art-body h2,
.art-body h3 {
  border-left: 5px solid var(--black);
  padding-left: 16px;
}
.art-body h2 {
  font-size: 1.5rem; font-weight: 800;
  line-height: 1.25; letter-spacing: -.02em;
  margin: 48px 0 20px;
}
.art-body h3 {
  font-size: 1.15rem; font-weight: 700;
  line-height: 1.35; letter-spacing: -.01em;
  margin: 36px 0 16px;
}
.art-body h4 {
  font-size: 1rem; font-weight: 700;
  line-height: 1.4;
  margin: 28px 0 12px;
}
.art-body ul,
.art-body ol {
  margin: 8px 0 36px;
  padding-left: 24px;
}
.art-body ul { list-style: disc; }
.art-body ol { list-style: decimal; }
.art-body li {
  padding-left: 4px;
  font-size: .95rem; line-height: 1.7; color: #333;
}
.art-body li + li { margin-top: 8px; }
.art-body li::marker { color: var(--black); }
.art-body li ul,
.art-body li ol { margin: 8px 0 0; }
.art-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.art-body strong { font-weight: 700; }
.art-body em { font-style: italic; }

/* Blockquote */
.art-body blockquote {
  color: var(--black);
  font-size: clamp(1.05rem, 1.65vw, 1.45rem);
  font-style: italic;
  font-weight: 500;
  isolation: isolate;
  left: 50%;
  line-height: 1.28;
  position: relative;
  margin: 56px 0 64px;
  padding: 26px 48px 30px;
  text-align: center;
  translate: -50% 0;
  width: min(860px, calc(100vw - 96px));
}
.art-body blockquote::before,
.art-body blockquote::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='72' viewBox='0 0 85 72' fill='none'%3E%3Cpath d='M38.993 0L25.0064 50.8235L20.3442 31.7647C26.4192 31.7647 31.3639 33.5294 35.1785 37.0588C38.993 40.5882 40.9003 45.4588 40.9003 51.6706C40.9003 57.7412 38.9224 62.6824 34.9666 66.4941C31.152 70.1647 26.3485 72 20.5561 72C14.6224 72 9.67761 70.1647 5.7218 66.4941C1.90727 62.6824 0 57.7412 0 51.6706C0 49.8353 0.141279 48.0706 0.423837 46.3765C0.706395 44.5412 1.27151 42.4235 2.11919 40.0235C2.96686 37.6235 4.16773 34.4471 5.7218 30.4941L18.0131 0H38.993ZM83.0927 0L69.1061 50.8235L64.4439 31.7647C70.5189 31.7647 75.4637 33.5294 79.2782 37.0588C83.0927 40.5882 85 45.4588 85 51.6706C85 57.7412 83.0221 62.6824 79.0663 66.4941C75.2517 70.1647 70.4483 72 64.6558 72C58.7221 72 53.7773 70.1647 49.8215 66.4941C46.007 62.6824 44.0997 57.7412 44.0997 51.6706C44.0997 49.8353 44.241 48.0706 44.5236 46.3765C44.8061 44.5412 45.3712 42.4235 46.2189 40.0235C47.0666 37.6235 48.2675 34.4471 49.8215 30.4941L62.1128 0H83.0927Z' fill='%23E5ACFF'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
  height: 72px;
  position: absolute;
  width: 85px;
  z-index: -1;
}
.art-body blockquote::before {
  top: 0; left: 22px;
}
.art-body blockquote::after {
  bottom: -2px; right: 22px;
  transform: rotate(180deg);
}
.art-body blockquote p {
  color: inherit;
  font: inherit;
  margin: 0;
  text-align: inherit;
}

/* ── RELATED ARTICLES ───────────────────────────────────── */
#art-related {
  border-top: 1px solid #e8e8e8;
  padding: 80px 0 100px;
}
.art-related-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 40px;
}
.art-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 40px;
}
.art-card {
  background: var(--white); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  color: inherit; text-decoration: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.art-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.art-card-img-wrap { overflow: hidden; aspect-ratio: 4/3; }
.art-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.art-card:hover .art-card-img { transform: scale(1.05); }
.art-card-body { padding: 16px 20px 24px; }
.art-card-meta {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #888; margin-bottom: 8px;
}
.art-card-title {
  font-size: .9rem; font-weight: 800;
  line-height: 1.4; color: #111; text-transform: uppercase;
}
.art-related-cta { text-align: right; }
.art-related-title--handwrite { font-weight: 400; }
.art-related-title--handwrite .hw-text {
  display: inline-block;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: .9;
  opacity: 1;
}

/* ── FOOTER CTA ─────────────────────────────────────────── */
#art-footer-cta {
  background: var(--yellow); color: var(--black);
  padding: 100px 48px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 20px;
}
#art-footer-cta .footer-cta-title { color: var(--black); }
.art-footer-sub {
  font-size: .9rem; color: rgba(0,0,0,.55);
  margin-top: -4px;
}
#art-footer-cta .btn-outline {
  margin-top: 12px; border-color: var(--black);
}
#art-footer-cta .btn-outline:hover {
  background: var(--black); border-color: var(--black); color: var(--white);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .art-container { padding: 0 24px; }
  .art-header { padding-top: 100px; }
  .art-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .art-quote {
    margin: 48px 0 56px;
    padding: 24px 18px 32px;
    width: calc(100vw - 48px);
  }
  .art-quote::before,
  .art-quote::after {
    height: 48px;
    width: 57px;
  }
  .art-quote p { font-size: 1.15rem; }
  .art-related-grid { grid-template-columns: 1fr; }
}