/* =====================================================================
 * Destination : /assets/css/pages/artikel.css
 * Rôle        : Styles PROPRES À L'ARTICLE DU BLOG (/artikel.php)
 *               Chargé automatiquement après /assets/css/main.css
 * Version     : 2.0 – Corporate / Trust & Security
 *
 * Sommaire : 01 Barre de lecture · 02 En-tête · 03 Image · 04 Outils
 *            05 Texte · 06 Avertissement & pager · 07 Colonne latérale
 *            08 Articles liés · 09 Responsive · 10 Impression
 * ===================================================================== */

/* 01. BARRE DE LECTURE ============================================== */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1100; height: 4px; pointer-events: none; }
.read-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 0 4px 4px 0; transition: width .1s linear; }

/* 02. EN-TÊTE ======================================================== */
.article-hero { padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + 6rem); }
.article-head { max-width: 860px; }
.article-cat { display: inline-block; margin-bottom: 1rem; padding: .3rem .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: #6EE7B7; border-radius: 100px; }
.article-cat:hover { color: var(--navy); background: var(--white); }
.article-head h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: #CBD5E1; }
.article-meta i { margin-right: .35rem; color: #6EE7B7; }

/* 03. IMAGE ========================================================== */
.article-section { padding-top: 0; }
.article-cover { position: relative; z-index: 5; margin: -6rem 0 2.5rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.article-cover img, .article-cover .img-ph { display: block; width: 100%; aspect-ratio: 21 / 9; min-height: 0; object-fit: cover; border-radius: 0; }

/* 04. OUTILS ========================================================= */
.article-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.font-tools { display: inline-flex; padding: 3px; background: var(--bg); border-radius: var(--radius-sm); }
.font-tools button { padding: .35rem .7rem; font-family: var(--font-display); font-weight: 800; color: var(--text-2); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.font-tools button:hover { color: var(--white); background: var(--navy); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.share > span { margin-right: .2rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.share a, .share button { display: grid; place-items: center; width: 38px; height: 38px; color: var(--navy); background: var(--bg); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: all var(--speed) var(--ease); }
.share a:hover, .share button:hover { color: var(--white); background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }

/* 05. TEXTE ========================================================== */
.article-content { --fs: 1.06rem; font-size: var(--fs); line-height: 1.8; color: var(--text); overflow-wrap: break-word; }
.article-content > *:first-child { margin-top: 0; }
.article-content p { margin-bottom: 1.25rem; color: var(--text-2); }
.article-content h2 { margin: 2.6rem 0 1rem; font-size: 1.6em; line-height: 1.25; scroll-margin-top: calc(var(--header-h, 76px) + 24px); }
.article-content h3 { margin: 2rem 0 .75rem; font-size: 1.2em; }
.article-content a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-content strong { color: var(--navy); }
.article-content ul, .article-content ol { margin-bottom: 1.4rem; padding-left: 1.4rem; }
.article-content li { margin-bottom: .5rem; color: var(--text-2); }
.article-content ul li::marker { color: var(--green); }
.article-content ol li::marker { font-weight: 800; color: var(--blue); }
.article-content blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; font-family: var(--font-display); font-size: 1.12em; font-weight: 600; color: var(--navy); background: var(--blue-soft); border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
.article-content blockquote p { margin: 0; color: inherit; }
.article-content img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: var(--radius-lg); }
.article-content .tip, .article-content .hinweis { margin: 1.75rem 0; padding: 1.1rem 1.3rem; background: var(--green-soft-2); border: 1px solid #A7F3D0; border-radius: var(--radius); }
.article-content .tip strong, .article-content .hinweis strong { color: var(--green-dark); }
.article-content .tip p:last-child, .article-content .hinweis p:last-child { margin-bottom: 0; }
.article-table { margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.article-content table { width: 100%; min-width: 480px; font-size: .92em; border-collapse: collapse; }
.article-content th { padding: .7rem .9rem; font-family: var(--font-display); text-align: left; color: var(--white); background: var(--navy); }
.article-content td { padding: .65rem .9rem; color: var(--text-2); border-top: 1px solid var(--border); }
.article-content tr:nth-child(even) td { background: var(--bg); }

/* 06. AVERTISSEMENT & PAGER ========================================== */
.article-disclaimer { display: flex; gap: .85rem; margin-top: 2.5rem; padding: 1rem 1.2rem; font-size: .86rem; color: var(--text-2); background: var(--bg); border-radius: var(--radius); }
.article-disclaimer i { margin-top: .2rem; color: var(--blue); }
.article-disclaimer p { margin: 0; }
.article-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.article-pager a { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .3s, box-shadow .3s; }
.article-pager a:hover { border-color: var(--blue-soft-2); box-shadow: var(--shadow); }
.article-pager span { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.article-pager strong { font-family: var(--font-display); line-height: 1.35; color: var(--navy); }
.pager-next { grid-column: 2; text-align: right; }

/* 07. COLONNE LATÉRALE =============================================== */
.article-aside { position: sticky; top: calc(var(--header-h, 76px) + 1.25rem); display: grid; gap: 1.25rem; }
.article-toc { padding: 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.article-toc > strong { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-family: var(--font-display); color: var(--navy); }
.article-toc > strong i { color: var(--blue); }
.article-toc ol { max-height: 50vh; margin: 0; padding: 0; list-style: none; overflow-y: auto; counter-reset: atoc; }
.article-toc li a { display: flex; gap: .55rem; padding: .45rem .5rem; font-size: .88rem; line-height: 1.35; color: var(--text-2); border-radius: var(--radius-sm); counter-increment: atoc; }
.article-toc li a::before { content: counter(atoc); flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; font-size: .72rem; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 50%; }
.article-toc li a:hover { color: var(--blue); background: var(--bg); }
.article-toc li a.is-active { font-weight: 700; color: var(--blue); background: var(--blue-soft); }
.article-toc li a.is-active::before { color: var(--white); background: var(--blue); }
.article-cta { padding: 1.5rem; color: var(--white); background: var(--grad-navy); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.article-cta .ac-icon { margin-bottom: .9rem; }
.article-cta strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.article-cta p { margin: .35rem 0 1rem; font-size: .9rem; color: #CBD5E1; }
.article-cta-link { display: block; margin-top: .75rem; text-align: center; font-size: .9rem; font-weight: 700; color: #6EE7B7; }
.article-cta-link:hover { color: var(--white); }

/* 08. ARTICLES LIÉS ================================================== */
.rel-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.rel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rel-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.rel-media img, .rel-media .img-ph { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 0; }
.rel-body { padding: 1.2rem 1.3rem 1.3rem; }
.rel-cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--blue); }
.rel-body h3 { margin: .35rem 0 .5rem; font-size: 1.08rem; line-height: 1.35; }
.rel-body h3 a { color: var(--navy); }
.rel-body h3 a:hover { color: var(--blue); }
.rel-meta { font-size: .8rem; color: var(--muted); }

/* 09. RESPONSIVE ===================================================== */
@media (max-width: 991.98px) {
    .article-aside { position: static; }
    .article-toc { display: none; }
}
@media (max-width: 575.98px) {
    .article-hero { padding-bottom: calc(clamp(3rem, 6vw, 4.5rem) + 3rem); }
    .article-cover { margin-top: -3rem; }
    .article-cover img, .article-cover .img-ph { aspect-ratio: 16 / 10; }
    .article-content { --fs: 1rem; }
    .article-pager { grid-template-columns: 1fr; }
    .pager-next { grid-column: auto; }
}

/* 10. IMPRESSION ===================================================== */
@media print {
    .read-progress, .article-tools, .article-aside, .article-pager, .ac-breadcrumb { display: none !important; }
    .article-hero { padding: 0 0 1rem; color: #000; background: none !important; }
    .article-hero h1, .article-hero .lead, .article-meta { color: #000 !important; }
    .article-cover { margin-top: 0; box-shadow: none; }
    .col-lg-8 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}