/* Pages d'articles */
.read-progress { position:fixed; left:0; right:0; top:0; z-index:140; height:3px; background:var(--verm); transform-origin:0 50%; transform:scaleX(0); }
@supports (animation-timeline: scroll()) {
  .read-progress { animation:read-progress linear both; animation-timeline:scroll(root); }
}
@keyframes read-progress { to { transform:scaleX(1); } }

.art-hero { position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 48px) var(--g) clamp(48px, 6vw, 80px); overflow:hidden; overflow:clip; isolation:isolate; }
.art-hero-bg { position:absolute; inset:0; z-index:-2; }
.art-hero-bg img { width:100%; height:100%; object-fit:cover; animation:art-zoom 24s ease-in-out infinite alternate; }
@keyframes art-zoom { from { transform:scale(1.03); } to { transform:scale(1.14); } }
.art-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(17,16,22,.7) 0%, rgba(17,16,22,.2) 32%, rgba(17,16,22,.6) 62%, var(--ink) 100%), linear-gradient(90deg, rgba(17,16,22,.7) 0%, rgba(17,16,22,0) 70%); }
.art-hero-in { max-width:1100px; }
.art-back { display:inline-flex; margin-bottom:28px; color:rgba(242,238,230,.75); }
.art-back:hover { color:var(--paper); }
.art-hero h1 { margin:22px 0 0; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(48px, 7.4vw, 128px); line-height:.9; letter-spacing:-.025em; animation:art-in 1.2s cubic-bezier(.16,1,.3,1) .1s both; }
.art-hero h1 em { color:var(--verm); }
.art-dek { margin:28px 0 0; max-width:640px; font-size:clamp(17px, 1.5vw, 20px); line-height:1.6; color:#e0dbd1; animation:art-in 1.2s cubic-bezier(.16,1,.3,1) .3s both; }
.art-meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:32px; color:rgba(242,238,230,.7); animation:art-in 1.2s cubic-bezier(.16,1,.3,1) .45s both; }
.art-meta span + span::before { content:"·"; margin-right:22px; color:var(--verm); }
@keyframes art-in { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }

.art-body { display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 720px); justify-content:center; gap:clamp(40px, 6vw, 96px); padding:clamp(72px, 9vw, 120px) var(--g) clamp(64px, 8vw, 110px); }
.art-aside { position:sticky; top:32px; align-self:start; padding:26px 24px; border:1px solid rgba(216,178,90,.35); border-radius:4px; background:linear-gradient(180deg, rgba(216,178,90,.08), rgba(216,178,90,0)); }
.art-aside h2 { margin:0 0 18px; color:var(--gold); }
.art-aside dl { margin:0; }
.art-aside dt { margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.art-aside dd { margin:4px 0 0; font-size:15px; line-height:1.5; color:var(--paper); font-weight:500; }
.art-aside ul { margin:0; padding-left:18px; font-size:14.5px; line-height:1.6; color:#d7d2c8; }
.art-aside li + li { margin-top:10px; }
.art-aside li::marker { color:var(--verm); }
.art-content { min-width:0; font-size:18px; line-height:1.75; color:#d7d2c8; }
.art-content > p { margin:0 0 26px; }
.art-content .lead { font-size:clamp(20px, 1.8vw, 23px); line-height:1.6; color:var(--paper); }
.art-content .lead::first-letter { float:left; margin:10px 14px 0 0; font-family:"Cinzel",serif; font-weight:700; font-size:5.2em; line-height:.72; background:linear-gradient(180deg, #fbf0c9, var(--gold) 50%, #7d5c22); -webkit-background-clip:text; background-clip:text; color:transparent; }
.art-content h2 { position:relative; margin:72px 0 22px; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(34px, 3.4vw, 50px); line-height:1.02; letter-spacing:-.015em; color:var(--paper); }
.art-content h2 .chap { display:block; margin-bottom:12px; font-family:"Cinzel",serif; font-weight:700; font-size:14px; letter-spacing:.3em; color:var(--gold); }
.art-content strong { color:var(--paper); font-weight:600; }
.art-content a { color:var(--paper); background:linear-gradient(var(--verm), var(--verm)) 0 100% / 100% 1px no-repeat; transition:background-size .3s ease; }
.art-content a:hover { background-size:100% 2px; color:var(--verm); }
.art-quote { position:relative; margin:64px 0; padding:8px 0 0 clamp(28px, 4vw, 56px); border-left:2px solid var(--verm); }
.art-quote::before { content:"“"; position:absolute; left:clamp(14px, 3vw, 40px); top:-60px; font-family:"Instrument Serif",serif; font-size:180px; line-height:1; color:var(--verm); opacity:.35; }
.art-quote p { margin:0; font-family:"Instrument Serif",serif; font-style:italic; font-size:clamp(30px, 3.2vw, 46px); line-height:1.1; color:var(--paper); }
.art-quote cite { display:block; margin-top:18px; font-style:normal; }
.art-figure { margin:56px 0; }
.art-figure.wide { margin-right:calc(-1 * min(8vw, 120px)); }
.art-figure img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 40px 90px rgba(0,0,0,.45); }
.art-figure figcaption { margin-top:14px; color:var(--mute); }
.art-phones { display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px, 3vw, 36px); margin:64px 0; perspective:1400px; }
.art-phone { width:clamp(120px, 17vw, 210px); aspect-ratio:390 / 844; border:7px solid #1b1a20; border-radius:30px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(216,178,90,.35); background:#000; }
.art-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.art-phone:nth-child(1) { transform:rotateY(18deg) translateY(24px); }
.art-phone:nth-child(2) { transform:translateY(-10px) scale(1.06); z-index:1; }
.art-phone:nth-child(3) { transform:rotateY(-18deg) translateY(24px); }
.art-callout { margin:56px 0; padding:32px 34px; border-radius:4px; background:var(--verm); color:var(--ink); }
.art-callout h3 { margin:0 0 10px; font-family:"Instrument Serif",serif; font-weight:400; font-size:clamp(28px, 2.6vw, 38px); line-height:1.05; }
.art-callout p { margin:0; font-size:16.5px; line-height:1.6; }
.art-callout .btn-row { margin-top:22px; }
.art-callout .btn.dark { background:var(--ink); color:var(--paper); }
.art-callout .btn.line { border:1px solid rgba(17,16,22,.5); color:var(--ink); }
.art-sign { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--mute); }
.art-next { padding:clamp(72px, 9vw, 120px) var(--g); border-top:1px solid var(--line); }
.art-next .news-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; min-height:0; }
.art-next .news-card { min-height:clamp(340px, 34vw, 460px); }

@media (max-width:1100px) {
  .art-body { grid-template-columns:minmax(0, 720px); }
  .art-aside { position:static; order:2; }
  .art-figure.wide { margin-left:0; margin-right:0; }
}
@media (max-width:820px) {
  .art-hero { min-height:88svh; padding:calc(var(--nav-h) + 32px) var(--g) 40px; }
  .art-hero::before { background:linear-gradient(180deg, rgba(17,16,22,.72) 0%, rgba(17,16,22,.3) 28%, rgba(17,16,22,.8) 58%, var(--ink) 100%); }
  .art-content { font-size:17px; }
  .art-quote::before { font-size:120px; top:-40px; }
  .art-phone { border-width:4px; border-radius:18px; }
  .art-next .news-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .read-progress { animation:none; }
}
.art-diptych { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:56px 0; }
.art-diptych img { display:block; width:100%; aspect-ratio:2 / 3; object-fit:cover; border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.art-diptych img:last-child { transform:translateY(40px); }