/* ============================================================
   SPI L.A. Préventif - styles des articles de blog.
   Cette feuille est PARTAGÉE par tous les articles : un nouvel
   article n'a jamais besoin de son propre fichier CSS, il lui
   suffit de déclarer $css_page = 'article';
   Le commun (en-tête, pied de page, boutons) est dans base.css
   ============================================================ */

/* La section qui suit le bandeau de titre est blanche : la vague
   doit l'être aussi pour que la jonction reste invisible. */
.hero-wave path { fill: var(--white); }

/* --- BANDEAU DE TITRE DE L'ARTICLE ---
   Même bandeau que les autres pages, avec la catégorie et les
   informations de publication en plus. */
.article-hero h1 { font-size: 2.35rem; max-width: 950px; margin-left: auto; margin-right: auto; }
.article-cat { display: inline-block; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); color: var(--white); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 6px 15px; border-radius: 50px; margin-bottom: 18px; }
.article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; font-size: 0.85rem; color: rgba(255,255,255,0.75); font-family: 'Montserrat', sans-serif; }
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-meta i { color: var(--secondary); }

/* --- COLONNE DE LECTURE ---
   Une largeur de ligne confortable : au-delà, l'œil se perd. */
.article-page { padding: 70px 0 80px; }
.article-page .container { max-width: 880px; }

/* --- IMAGE DE UNE --- */
.article-image { margin-bottom: 45px; }
/* Le format 16/9 est imposé ici : quelle que soit la photo choisie,
   toutes les unes du blog ont la même silhouette. */
.article-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); }
.article-image figcaption { margin-top: 12px; font-size: 0.85rem; color: #8a949c; text-align: center; font-style: italic; }

/* --- SOMMAIRE --- */
.article-sommaire { background: var(--bg-light); border-left: 4px solid var(--secondary); border-radius: 0 12px 12px 0; padding: 26px 30px; margin-bottom: 45px; }
.article-sommaire h2 { font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin: 0 0 14px !important; padding: 0 !important; }
.article-sommaire h2::after { display: none; }
.article-sommaire ol { margin: 0; padding-left: 20px; }
.article-sommaire li { margin-bottom: 8px; font-size: 0.95rem; }
.article-sommaire li:last-child { margin-bottom: 0; }
.article-sommaire a { color: var(--text); border-bottom: 1px solid transparent; }
.article-sommaire a:hover { color: var(--primary); border-bottom-color: var(--secondary); }

/* --- CORPS DE L'ARTICLE --- */
.article-body { font-size: 1.06rem; line-height: 1.8; }
.article-body h2 { font-size: 1.8rem; font-weight: 800; margin: 55px 0 20px; padding-bottom: 14px; position: relative; scroll-margin-top: calc(var(--total-header-height) + 20px); }
.article-body h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: var(--secondary); }
.article-body h3 { font-size: 1.25rem; margin: 38px 0 14px; color: var(--primary); }
.article-body p { margin-bottom: 20px; }
.article-body strong { color: var(--dark); }
.article-body a:not(.btn) { color: var(--secondary); font-weight: 600; border-bottom: 1px solid rgba(1,146,239,0.35); }
.article-body a:not(.btn):hover { color: var(--primary); border-bottom-color: var(--primary); }

/* Listes à puces de l'article */
.article-liste { margin: 0 0 26px; }
.article-liste li { position: relative; padding-left: 34px; margin-bottom: 14px; }
.article-liste li::before { content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--secondary); }

/* --- ENCADRÉ « BON À SAVOIR » --- */
.article-encadre { background: rgba(1,146,239,0.07); border: 1px solid rgba(1,146,239,0.22); border-radius: 14px; padding: 26px 30px; margin: 36px 0; }
.article-encadre h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 1.1rem; }
.article-encadre h3 i { color: var(--secondary); }
.article-encadre p:last-child { margin-bottom: 0; }

/* --- CITATION --- */
.article-citation { margin: 40px 0; padding: 28px 34px; background: var(--bg-light); border-radius: 14px; border-left: 4px solid var(--primary); }
.article-citation p { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--primary); line-height: 1.5; margin-bottom: 12px; }
.article-citation cite { font-style: normal; font-size: 0.88rem; color: #8a949c; }

/* --- TABLEAU ---
   Le conteneur permet le défilement horizontal sur mobile plutôt
   que de faire déborder toute la page. */
.article-tableau { overflow-x: auto; margin: 32px 0; border-radius: 12px; border: 1px solid #e6ebef; }
.article-tableau table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.article-tableau caption { text-align: left; padding: 14px 18px; font-size: 0.82rem; color: #8a949c; text-transform: uppercase; letter-spacing: 0.6px; font-family: 'Montserrat', sans-serif; }
.article-tableau th { background: var(--primary); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 14px 18px; }
.article-tableau td { padding: 14px 18px; border-top: 1px solid #eef1f4; }
.article-tableau tbody tr:nth-child(even) { background: var(--bg-light); }

/* --- APPEL AU DEVIS AU MILIEU DE L'ARTICLE --- */
.article-cta { background: linear-gradient(135deg, var(--primary), #012f6b); color: var(--white); border-radius: 18px; padding: 34px 38px; margin: 45px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.article-cta h3 { color: var(--white); margin: 0 0 8px; font-size: 1.35rem; }
.article-cta p { color: rgba(255,255,255,0.9); font-size: 0.98rem; margin: 0; }
.article-cta .btn { flex-shrink: 0; }

/* --- PARTAGE --- */
.article-partage { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 55px; padding-top: 28px; border-top: 1px solid #eef1f4; }
.article-partage span { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary); margin-right: 4px; }
.article-partage a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-light); color: var(--primary); font-size: 1rem; }
.article-partage a:hover { background: var(--secondary); color: var(--white); transform: translateY(-3px); }

/* --- SIGNATURE --- */
.article-auteur { display: flex; align-items: flex-start; gap: 20px; background: var(--bg-light); border-radius: 16px; padding: 28px 30px; margin-top: 32px; }
.article-auteur .author-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.95rem; flex-shrink: 0; }
.article-auteur h2 { font-size: 1.1rem; margin-bottom: 6px; }
.article-auteur p { font-size: 0.94rem; margin: 0; }

.article-retour { margin-top: 34px; }
.article-retour a { display: inline-flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--secondary); }
.article-retour a:hover { gap: 16px; color: var(--primary); }

/* --- À LIRE AUSSI --- */
.article-similaires { background: var(--bg-light); }
.article-similaires .section-title { margin-bottom: 45px; }
.similaires-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.similaire-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid #eaeaea; border-radius: 16px; padding: 30px 28px; transition: var(--transition); }
.similaire-card:hover { box-shadow: var(--shadow); border-color: var(--secondary); transform: translateY(-6px); }
.similaire-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.similaire-card p { font-size: 0.94rem; margin-bottom: 20px; flex-grow: 1; }

/* Repris de la page Blog : la pastille de catégorie et le lien « Lire ». */
.post-cat { display: inline-block; background: rgba(1,146,239,0.1); color: var(--primary); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; margin-bottom: 16px; align-self: flex-start; }
.read-more { display: inline-flex; align-items: center; gap: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--secondary); align-self: flex-start; transition: var(--transition); }
.similaire-card:hover .read-more { gap: 15px; color: var(--primary); }

/* --- CTA DE BAS DE PAGE --- */
.cta-banner { background-color: var(--primary); padding: 70px 0; text-align: center; color: var(--white); }
.cta-banner h2 { color: var(--white); margin-bottom: 22px; font-size: 2.3rem; }
.cta-banner p { font-size: 1.1rem; margin-bottom: 35px; max-width: 780px; margin-left: auto; margin-right: auto; }
.cta-buttons { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
    .article-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .article-hero h1 { font-size: 1.75rem; }
    .article-meta { gap: 8px 18px; font-size: 0.8rem; }
    .article-page { padding: 45px 0 55px; }
    .article-body { font-size: 1rem; }
    .article-body h2 { font-size: 1.45rem; margin-top: 42px; }
    .article-sommaire, .article-encadre, .article-citation { padding: 22px 20px; }
    .article-cta { padding: 26px 22px; }
    .article-auteur { flex-direction: column; gap: 14px; padding: 24px 20px; }
    .cta-banner h2 { font-size: 1.8rem; }
}