/* ============================================ article-page.css CSS NON-CRITIQUE des pages d'article (contenu sous la ligne de flottaison : corps de l'article, encadrés, cartes liées). Chargé en asynchrone (preload+onload). Le CSS critique (header/hero/breadcrumb) est inliné dans , voir critical-article.css. Eléonore Peigné | rdv-osteopathe-nantes.fr ============================================ */ /* ===== Corps de l'article ===== */ .article-container { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; } .article-content .article-intro { margin: 0 0 2.5rem 0; } .article-content .article-intro p { font-size: 1.15rem; color: #555; line-height: 1.7; margin-bottom: 1rem; } .article-content .article-intro p:last-child { margin-bottom: 0; } .article-content .article-intro p:first-of-type::first-letter { font-size: 3.4rem; font-weight: 700; color: #2c5aa0; float: left; line-height: 0.78; padding-right: 0.5rem; margin-top: 0.15rem; } .article-content { font-size: 1.1rem; line-height: 1.8; } .article-content h2 { color: #2c5aa0; font-size: 1.8rem; margin: 2.5rem 0 1.5rem 0; padding-left: 1rem; border-left: 4px solid #28a745; } .article-content h3 { color: #2c5aa0; font-size: 1.4rem; margin: 2rem 0 1rem 0; } .article-content p { margin-bottom: 1.5rem; } .article-content ul, .article-content ol { margin: 1.5rem 0; padding-left: 2rem; } .article-content li { margin-bottom: 0.5rem; } .article-content a.inline-link { color: #2c5aa0; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #28a745; text-underline-offset: 3px; font-weight: 600; } .article-content a.inline-link:hover { color: #1a4480; text-decoration-style: solid; } /* Image à la une */ .article-featured-image { width: 100%; margin: 0 0 2rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); line-height: 0; } .article-featured-image img { display: block; width: 100%; height: auto; max-height: 450px; object-fit: cover; } .highlight-box { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-left: 5px solid #28a745; padding: 1.5rem 1.75rem; margin: 2rem 0; border-radius: 0 10px 10px 0; } .highlight-box h3 { color: #2c5aa0; margin-bottom: 1rem; } .warning-box { background: #fff3cd; border: 1px solid #ffeaa7; border-left: 5px solid #fdcb6e; padding: 1.5rem; margin: 2rem 0; border-radius: 5px; } .warning-box .icon { font-size: 1.5rem; margin-right: 0.5rem; } /* Correctif accessibilité : symptom-card utilise un

(hiérarchie de titres cohérente), cible aussi symptoms.css */ .symptom-card h3 { color: #2c5aa0; font-size: 1.05rem; font-weight: 600; margin: 0.5rem 0 0.5rem 0; } /* ===== "Pour aller plus loin" ===== */ .related-content { margin: 3rem 0 1rem 0; padding-top: 2.5rem; border-top: 3px solid #f0f4f8; } .related-content > h2 { color: #2c5aa0; font-size: 1.8rem; margin: 0 0 0.5rem 0; padding-left: 1rem; border-left: 4px solid #28a745; } .related-content > p.related-intro { color: #666; margin: 0 0 2rem 1rem; font-size: 1rem; } .related-group { margin-bottom: 2.5rem; } .related-group h3 { color: #333; font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; } .related-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.25rem; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(44, 90, 160, 0.12); } .related-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .related-card-icon { font-size: 1.6rem; line-height: 1; } .related-card-tag { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 20px; color: #fff; white-space: nowrap; } .related-card-tag.tag-motif { background: #1e7e34; } .related-card-tag.tag-article { background: #a35200; } .related-card h4 { color: #2c5aa0; font-size: 1.05rem; margin-bottom: 0.5rem; line-height: 1.3; } .related-card p { font-size: 0.9rem; color: #666; margin-bottom: 0; flex-grow: 1; } .related-card-link { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; color: #2c5aa0; } .related-card:hover .related-card-link { color: #1a4480; text-decoration: underline; } /* ===== Responsive (contenu de l'article uniquement) ===== */ @media (max-width: 1045px) { .article-container { padding: 2rem 1.25rem; } .article-content .article-intro p:first-of-type::first-letter { font-size: 2.6rem; } .article-content h2 { font-size: 1.5rem; } } @media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }