/* ==========================================================================
   article.css — extrait de article.php le 03/08/2026.
   Charge a la place exacte qu'occupait le <style> : ces regles surclassent
   app.css et app-light.css parce qu'elles viennent APRES. Ne pas remonter
   ce <link> plus haut dans le <head>.
   ========================================================================== */
/* Confort de lecture (charte) : texte clair sur fond sombre, 18px mini, aligné à gauche,
   paragraphes courts, contraste élevé, réglage de taille A-/A/A+, lisible sur mobile. */
.blog-body{ background:var(--bz-bg-soft); color:var(--bz-text); font-family:'Inter',system-ui,sans-serif; }
.blog-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; max-width:820px; margin:0 auto; }
.blog-head .logo{ display:inline-flex; align-items:center; gap:8px; color:var(--bz-text); font-family:'Poppins',sans-serif; font-weight:800; text-decoration:none; }
.blog-head .logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--bz-blue-vif); }
.blog-head a.blog-cta{ color:var(--bz-text-2); text-decoration:none; font-size:.95rem; font-weight:600; padding:8px 15px; border:1px solid rgba(var(--bz-ink-rgb),.14); border-radius:20px; }
.art-wrap{ max-width:800px; margin:0 auto; padding:6px 22px 70px; text-align:left; }
.art-crumb{ font-size:.9rem; color:var(--bz-text-3); margin-bottom:12px; }
.art-crumb a{ color:var(--bz-text-2b); text-decoration:none; }
.art-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.art-badge{ font-size:.8rem; font-weight:700; border-radius:20px; padding:4px 13px; }
.art-badge.space{ color:var(--bz-sur-accent); background:var(--bz-blue-vif); }
.art-badge.type{ color:var(--bz-text-2); background:rgba(var(--bz-ink-rgb),.07); border:1px solid rgba(var(--bz-ink-rgb),.16); }
.art-badge.read{ color:var(--bz-text-3); }
.art-h1{ font-family:'Poppins',sans-serif; font-size:2.1rem; line-height:1.2; color:var(--bz-text); margin:6px 0 14px; }
.art-cover{ margin:0 0 20px; border-radius:16px; overflow:hidden; border:1px solid rgba(var(--bz-ink-rgb),.08); line-height:0; }
.art-cover-svg{ width:100%; height:auto; display:block; aspect-ratio:12/3; }
.art-byline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--bz-text-3); font-size:.92rem; margin-bottom:18px; }
.art-byline .sep{ opacity:.5; }
.art-fs{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.art-fs button{ width:30px; height:30px; border-radius:8px; border:1px solid rgba(var(--bz-ink-rgb),.16); background:rgba(var(--bz-ink-rgb),.04); color:var(--bz-text-2); cursor:pointer; font-weight:700; }
.art-fs button.on{ color:var(--bz-sur-accent); background:var(--bz-blue-vif); border-color:var(--bz-blue-vif); }
.art-summary{ font-size:1.15em; line-height:1.7; color:var(--bz-text-1b); background:rgba(var(--bz-blue-vif-rgb),.06); border-left:3px solid var(--bz-blue-vif); padding:16px 18px; border-radius:0 12px 12px 0; margin:0 0 26px; }
.art-body{ font-size:18px; line-height:1.8; color:var(--bz-text-1b); }
.art-body.fs-lg{ font-size:20px; } .art-body.fs-xl{ font-size:22px; }
.art-summary.fs-lg{ font-size:1.25em; } /* suit le zoom */
.art-body h2{ font-family:'Poppins',sans-serif; font-size:1.4rem; color:var(--bz-text); margin:32px 0 12px; }
/* Le CSS global applique p{color:var(--text-dim)} (gris foncé) : on force un texte clair
   et lisible dans le corps de l'article (charte : texte blanc sur fond sombre, contraste). */
.art-body p, .art-body li{ color:var(--bz-text-1b); }
.art-body p{ margin:0 0 16px; max-width:58ch; }   /* 70ch donnaient 87 signes */
/* css/style.css supprime les puces globalement (ul{list-style:none}) :
   on les retablit dans le corps des articles, ou elles portent du sens. */
.art-body ul{ margin:0 0 18px; padding-left:22px; list-style:disc; }
.art-body ol{ margin:0 0 18px; padding-left:24px; list-style:decimal; }
.art-body li{ margin-bottom:8px; }
.art-body strong{ color:var(--bz-text); }
.art-box{ margin:22px 0; padding:16px 18px; border-radius:12px; border:1px solid rgba(var(--bz-ink-rgb),.12); background:var(--bz-bg-soft2); }
.art-box h3{ margin:0 0 10px; font-size:1.05rem; color:var(--bz-text); }
.art-box-fig{ border-color:rgba(143,211,255,.3); } .art-box-fig h3{ color:var(--bz-blue); }
.art-box-watch{ border-color:rgba(232,147,12,.35); } .art-box-watch h3{ color:var(--bz-amber-3); }
.art-box ul{ margin:0; }
/* Encadrés pédagogiques (Baziloo Académie) */
.art-box-learn{ border-color:rgba(var(--bz-blue-vif-rgb),.35); background:rgba(var(--bz-blue-vif-rgb),.05); } .art-box-learn h3{ color:var(--bz-blue-vif); }
.art-box-keep{ border-color:rgba(var(--bz-blue-vif-rgb),.35); background:rgba(var(--bz-blue-vif-rgb),.06); } .art-box-keep h3{ color:var(--bz-blue-vif); }
.art-box-ex{ border-color:rgba(255,209,102,.3); background:rgba(255,209,102,.05); } .art-box-ex h3{ color:var(--bz-amber-3); }
.art-box-ex p{ color:var(--bz-text-1b); }
.art-box-def{ border-color:rgba(143,211,255,.28); } .art-box-def h3{ color:var(--bz-blue); }
.art-box-def dl{ margin:0; } .art-box-def dt{ color:var(--bz-text); font-weight:700; margin-top:10px; }
.art-box-def dd{ margin:2px 0 0; color:var(--bz-text-2); line-height:1.6; }
/* Quiz interactif */
.art-quiz{ margin:28px 0; padding:20px 22px; border:1px solid rgba(var(--bz-blue-vif-rgb),.3); border-radius:16px; background:var(--bz-bg-soft2); }
.art-quiz > h3{ margin:0 0 16px; color:var(--bz-text); font-size:1.2rem; }
.art-quiz-q{ margin-bottom:20px; }
.art-quiz-question{ font-weight:700; color:#fff !important; margin:0 0 10px; }
.art-quiz-opts{ display:flex; flex-direction:column; gap:8px; }
.art-quiz-opt{ text-align:left; font:inherit; font-size:1rem; color:var(--bz-text-1b); background:rgba(var(--bz-ink-rgb),.04); border:1px solid rgba(var(--bz-ink-rgb),.14); border-radius:10px; padding:12px 15px; cursor:pointer; transition:.12s ease; }
.art-quiz-opt:hover:not(.done){ border-color:rgba(var(--bz-blue-vif-rgb),.5); color:var(--bz-text); }
.art-quiz-opt.correct{ background:rgba(var(--bz-green-vif-rgb),.16); border-color:var(--bz-green-vif); color:var(--bz-text); }
.art-quiz-opt.wrong{ background:rgba(var(--bz-red-rgb),.16); border-color:var(--bz-red); color:var(--bz-text); }
.art-quiz-opt.done{ cursor:default; }
.art-quiz-exp{ margin:10px 0 0 !important; padding:11px 13px; border-radius:8px; background:rgba(143,211,255,.08); color:var(--bz-text-2) !important; font-size:.92rem; }
.art-chart{ margin:24px 0; padding:16px; border:1px solid rgba(var(--bz-ink-rgb),.1); border-radius:12px; background:var(--bz-surface); }
.art-chart svg{ width:100%; height:auto; }
.art-chart figcaption{ margin-top:8px; font-size:.85rem; color:var(--bz-text-3); }
.art-chart-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; color:var(--bz-text); font-size:.98rem; }
.art-chart-title{ color:var(--bz-text); } .art-chart-title strong{ color:var(--bz-text); }
.art-chart-chip{ font-weight:700; font-size:.82rem; padding:3px 12px; border-radius:20px; }
/* Appel à l'action : inciter le lecteur à analyser la valeur dans l'application. */
.art-cta{ margin:26px 0; padding:22px; border-radius:16px; background:linear-gradient(135deg,rgba(var(--bz-blue-vif-rgb),.14),rgba(var(--bz-blue-vif-rgb),.03)); border:1px solid rgba(var(--bz-blue-vif-rgb),.4); }
.art-cta h3{ margin:0 0 6px; color:var(--bz-text); font-size:1.2rem; text-transform:none; letter-spacing:0; }
.art-cta p{ margin:0 0 16px; color:var(--bz-text-2); font-size:.98rem; }
.art-cta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.art-cta-primary{ display:inline-flex; align-items:center; gap:8px; background:var(--bz-blue-vif); color:var(--bz-sur-accent); font-weight:800; font-size:1.02rem; padding:14px 24px; border-radius:12px; text-decoration:none; box-shadow:0 10px 26px rgba(var(--bz-blue-vif-rgb),.28); transition:.15s ease; }
.art-cta-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.art-cta-sec{ color:var(--bz-text-2); text-decoration:none; font-weight:600; font-size:.92rem; padding:12px 17px; border:1px solid rgba(var(--bz-ink-rgb),.16); border-radius:12px; }
.art-cta-sec:hover{ border-color:rgba(var(--bz-blue-vif-rgb),.5); color:var(--bz-text); }
.art-security{ margin:26px 0; border:1px solid rgba(var(--bz-blue-vif-rgb),.25); border-radius:14px; overflow:hidden; }
.art-security h3{ margin:0; padding:14px 18px; background:rgba(var(--bz-blue-vif-rgb),.08); color:var(--bz-text); font-size:1.05rem; }
.art-sec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:rgba(var(--bz-ink-rgb),.08); }
.art-sec-cell{ background:var(--bz-bg-soft2); padding:12px 16px; }
.art-sec-cell .k{ display:block; font-size:.76rem; color:var(--bz-text-3); text-transform:uppercase; letter-spacing:.04em; }
.art-sec-cell .v{ color:var(--bz-text); font-weight:600; }
.art-sec-more{ padding:14px 18px; background:var(--bz-bg-soft2); }
.art-sec-more p{ margin:0 0 8px; color:var(--bz-text); } .art-sec-more strong{ color:var(--bz-text); }
.art-block{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(var(--bz-ink-rgb),.1); }
.art-block h3{ font-size:1rem; color:var(--bz-text-2b); margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em; }
.art-sources{ margin:0; padding-left:20px; } .art-sources li{ margin-bottom:7px; }
.art-sources a{ color:var(--bz-blue); } .art-sources .pub{ color:var(--bz-text-3); }
.art-links{ display:flex; flex-wrap:wrap; gap:10px; }
.art-links a{ color:var(--bz-text-2); text-decoration:none; font-weight:600; padding:9px 15px; border:1px solid rgba(var(--bz-ink-rgb),.14); border-radius:20px; }
.art-links a:hover{ border-color:rgba(var(--bz-blue-vif-rgb),.5); color:var(--bz-text); }
.art-related{ display:grid; gap:12px; }
.art-related a{ color:var(--bz-text); text-decoration:none; padding:14px 16px; border:1px solid rgba(var(--bz-ink-rgb),.1); border-radius:12px; background:var(--bz-bg-soft2); font-weight:600; }
.art-author{ display:flex; gap:14px; align-items:flex-start; margin-top:30px; padding:18px; border:1px solid rgba(var(--bz-ink-rgb),.1); border-radius:14px; background:var(--bz-bg-soft2); }
.art-author-av{ flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:800; color:var(--bz-sur-accent); background:var(--bz-blue-vif); }
.art-author strong{ color:var(--bz-text); } .art-author p{ margin:4px 0 0; color:var(--bz-text-2b); font-size:.9rem; line-height:1.6; }
.art-disclaimer{ margin-top:24px; font-size:.9rem; color:var(--bz-text-5); line-height:1.65; background:rgba(var(--bz-ink-rgb),.03); border:1px dashed rgba(var(--bz-ink-rgb),.16); border-radius:12px; padding:14px 16px; }
@media(max-width:560px){ .art-h1{ font-size:1.55rem; } .art-wrap{ padding:6px 16px 60px; } }
