/* ===================================================================
   article.css — styles partagés des articles du journal.
   Chargé uniquement sur les pages qui déclarent `articletag`.
   Les règles spécifiques à un article restent dans le <style> de la page.
   =================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb);font-size:var(--fs-base);line-height:1.75;color:var(--n);background:var(--cl);-webkit-font-smoothing:antialiased}
em{font-style:italic}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* En-tête de l'article */
.art-head{max-width:860px;margin:0 auto;padding:8rem 2rem 4rem;text-align:center}
.crumb{font-family:var(--fd);font-style:italic;font-size:var(--fs-sm);color:var(--bl);margin-bottom:2.5rem}
.crumb a{text-decoration:none;border-bottom:1px solid var(--bp)}
.crumb a:hover{border-bottom-color:var(--n)}
.meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.4rem;margin-bottom:2rem}
.tag{font-family:var(--fd);font-size:var(--fs-2xs);letter-spacing:.24em;text-transform:uppercase;color:var(--b);border:1px solid var(--bp);padding:.4rem 1rem;text-decoration:none;transition:background .3s ease,color .3s ease}
.tag:hover{background:var(--n);color:var(--c)}
.date{font-family:var(--fd);font-style:italic;font-size:var(--fs-sm);color:var(--bl)}
.art-h1{font-family:var(--fd);font-weight:300;font-size:var(--fs-2xl);line-height:1.06;letter-spacing:-.02em;margin-bottom:1.8rem}
.art-h1 em{color:var(--b)}
.art-lead{font-family:var(--fd);font-style:italic;font-weight:300;font-size:var(--fs-lg);line-height:1.5;color:var(--b);max-width:50ch;margin:0 auto}
.art-credit{font-family:var(--fd);font-style:italic;font-size:var(--fs-sm);color:var(--bl);margin-top:1.8rem}
.art-credit a{text-decoration:none;border-bottom:1px solid var(--bp)}
.art-credit a:hover{border-bottom-color:var(--n)}

/* Image principale */
.art-cover{max-width:1200px;margin:0 auto 5rem;padding:0 2rem}
.art-cover img{width:100%}

/* Corps */
.art-body{max-width:680px;margin:0 auto;padding:0 2rem;font-size:var(--fs-base);line-height:1.9;color:var(--b)}
.art-body p+p{margin-top:1.5rem}
.art-body h2{font-family:var(--fd);font-weight:300;font-size:var(--fs-xl);line-height:1.15;letter-spacing:-.01em;color:var(--n);margin:4rem 0 1.5rem}
.art-body a{color:var(--n);text-decoration:underline;text-decoration-color:var(--bp);text-underline-offset:.25em}
.art-body a:hover{text-decoration-color:var(--n)}
.art-body blockquote{font-family:var(--fd);font-style:italic;font-weight:300;font-size:var(--fs-lg);line-height:1.45;color:var(--n);text-align:center;margin:3rem 0;padding:0 1rem}

/* Images dans le texte */
.fig{margin:4rem auto;max-width:1100px;padding:0 2rem}
.fig img{width:100%}
.fig figcaption{font-family:var(--fd);font-style:italic;font-size:var(--fs-sm);color:var(--bl);margin-top:.9rem;text-align:center}
.fig--duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fig--duo figcaption{grid-column:1/-1;margin-top:0}

/* Pied d'article */
.art-foot{max-width:680px;margin:6rem auto 0;padding:3rem 2rem 8rem;border-top:1px solid var(--cdd);text-align:center}
.art-foot p{font-family:var(--fd);font-style:italic;font-size:var(--fs-md);color:var(--b);margin-bottom:2rem}
.btn{margin:.4rem}
.btn:focus-visible,.tag:focus-visible,.crumb a:focus-visible{outline:2px solid var(--b);outline-offset:4px}

@media (max-width:960px){
.art-head{padding:5rem 1.5rem 3rem}
.art-cover{padding:0;margin-bottom:3.5rem}
}
@media (max-width:540px){
.fig--duo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}