/* ── Extrait du <style> inline de article.php (audit CSS 06/2026) ── */
/* ── Article detail ── */
.article-hero {
position: relative;
min-height: 340px;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
color: #fff;
padding: 120px 0 60px;
margin-bottom: 0;
}
.article-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%);
}
.article-hero > .container { position: relative; z-index: 1; }
.article-hero .article-meta {
font-size: 1.25rem;
opacity: .9;
margin-bottom: 10px;
letter-spacing: .02em;
}
.article-hero .article-meta .article-cat {
display: inline-block;
background: rgba(255,255,255,.18);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,.25);
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.article-hero h1 {
font-size: 3.2rem;
font-weight: 700;
line-height: 1.15;
margin: 0 0 16px;
color: #fff;
}
.article-hero .article-extrait {
font-size: 1.6rem;
line-height: 1.5;
opacity: .92;
max-width: 800px;
}

.article-body {
background: #fff;
padding: 50px 0 70px;
}
.article-content {
font-size: 1.55rem;
line-height: 1.75;
color: #333;
}
.article-content p { margin: 0 0 18px; }
.article-content h2 {
font-size: 2.2rem;
font-weight: 700;
color: #222;
margin: 36px 0 14px;
}
.article-content h3 {
font-size: 1.9rem;
font-weight: 700;
color: #c40018;
margin: 30px 0 10px;
}
.article-content strong { color: #1a6fa8; }
.article-content ul, .article-content ol {
padding-left: 24px;
margin: 0 0 18px;
}
.article-content img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
}

.article-back {
display: inline-block;
margin-top: 30px;
padding: 10px 20px;
background: #f5f5f5;
border: 1.5px solid #e0e0e0;
border-radius: 8px;
color: #555;
text-decoration: none;
font-size: 1.35rem;
transition: all .2s;
}
.article-back:hover {
background: #c40018;
border-color: #c40018;
color: #fff;
text-decoration: none;
}

/* Image secondaire flottante à droite du texte */
.article-side-image {
float: right;
max-width: 40%;
margin: 6px 0 18px 28px;
border-radius: 10px;
border: 1px solid #e8e8e8;
box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.article-side-image img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}

@media (max-width: 767px) {
.article-hero { padding: 90px 0 40px; min-height: 260px; }
.article-hero h1 { font-size: 2.3rem; }
.article-hero .article-extrait { font-size: 1.35rem; }
.article-content { font-size: 1.4rem; }
.article-content h2 { font-size: 1.9rem; }
.article-content h3 { font-size: 1.65rem; }
.article-side-image { float: none; max-width: 100%; margin: 0 0 20px; }
}

/* Cartes articles cliquables (2e bloc inline historique) */
.about-card-link { display: block; text-decoration: none; color: inherit; }
.about-card-link:hover { text-decoration: none; color: inherit; }
.about-card-link:focus { outline: none; }
.about-card-link .about-card { cursor: pointer; }
.about-card-link:hover .about-card-title { color: #c40018; }