/* article.css - styles des pages article (extrait de actualite.php pour etre cacheable) */
html, body { overflow-x: clip; scroll-behavior: smooth; }
/* En-tête NON sticky sur les pages article : on laisse l'utilisateur lire sans flottement */
.breadcrumb { max-width: 800px; margin: 25px auto 0; padding: 0 20px; font-size: 12px; color: var(--text-faint); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-main); text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: var(--border-soft); }
.article-container { max-width: 800px; margin: 20px auto 60px; padding: 0 20px; font-family: -apple-system, sans-serif; }
/* Meta du titre : une seule ligne grise, sobre. Pas de pills colorées. */
.article-meta {
font-size: 12px;
color: var(--text-faint);
margin-bottom: 14px;
font-weight: 500;
letter-spacing: 0.2px;
}
.article-meta .sep { margin: 0 8px; color: var(--border-soft); }
.article-meta .sector { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.article-meta .art-author { color: var(--text-main); font-weight: 700; }
.article-meta .art-author a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.article-meta .art-author a:hover { border-bottom-color: var(--text-main); }
.article-title { font-size: 36px; font-weight: 900; color: var(--text-main); line-height: 1.2; margin-bottom: 18px; letter-spacing: -0.5px; }
/* Badge cours sous le titre — style « Yahoo » factorisé dans bourseur.css
(.bdg-yf), identique à l'index. Ici : seulement le positionnement. */
.art-bdg { margin: -2px 0 18px; }
.art-bdg + .art-bdg { margin-left: 7px; } /* espace entre 2 badges (multi-valeurs) */
/* ── BYLINE (E-E-A-T) — placée en fin d'article, minimaliste ───
2 lignes sobres, pas de carte ni d'avatar : ligne édité + sources.
Sépare visuellement le corps du share-bar via une fine ligne. */
.article-byline {
margin: 36px 0 18px; padding: 16px 0 0;
border-top: 1px solid var(--border-soft);
}
.article-byline .byl-line {
font-size: 13px; color: var(--text-muted); line-height: 1.5;
}
.article-byline .byl-line a {
color: var(--text-main); font-weight: 700; text-decoration: none;
border-bottom: 1px solid var(--text-faint);
}
.article-byline .byl-line a:hover { border-bottom-color: var(--text-main); }
.article-byline .byl-sources {
margin-top: 4px;
font-size: 11.5px; color: var(--text-faint); letter-spacing: .15px;
}
.article-byline .byl-source {
color: var(--text-faint); text-decoration: none;
}
.article-byline .byl-source:hover { color: var(--text-main); }
/* ── Temps de lecture (méta) ─────────────────────────────────────── */
.article-meta .read-time { color: var(--text-faint); white-space: nowrap; }
/* ── « L'essentiel » — encadré 3 points en tête d'article ────────── */
.art-essentiel { margin: 0 0 22px; padding: 14px 18px 12px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-left: 3px solid var(--gold, #b78908); border-radius: 0 8px 8px 0; }
.art-essentiel-h { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold, #b78908); margin-bottom: 8px; }
.art-essentiel ul { margin: 0; padding-left: 18px; }
.art-essentiel li { font-size: 14.5px; line-height: 1.55; color: var(--text-main); margin-bottom: 6px; }
.art-essentiel li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.art-essentiel { padding: 12px 14px 10px; }
.art-essentiel li { font-size: 13.5px; }
}
/* ── Sommaire cliquable ──────────────────────────────────────────── */
.art-toc { margin: 0 0 26px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; }
.art-toc-h { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.art-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.art-toc li { font-size: 13.5px; line-height: 1.5; margin-bottom: 5px; break-inside: avoid; }
.art-toc a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border-color); }
.art-toc a:hover { color: var(--blue-link-soft); border-bottom-color: var(--blue-link-soft); }
@media (max-width: 640px) {
.art-toc ol { columns: 1; }
.art-toc li { font-size: 13px; }
}
html { scroll-behavior: smooth; }
/* ── Barre de progression de lecture ─────────────────────────────── */
.art-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; pointer-events: none; }
.art-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-link), var(--blue-link-soft)); transform: scaleX(0); transform-origin: left; will-change: transform; }
/* ── FAQ d'article (longue traîne / PAA) ─────────────────────────── */
.art-faq { max-width: 800px; margin: 38px auto 0; padding: 0 20px; }
.art-faq-h { font-size: 20px; font-weight: 800; color: var(--text-main); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-line); letter-spacing: -0.2px; }
.art-faq-item { border: 1px solid rgba(15,23,42,0.14); border-radius: 8px; margin-bottom: 10px; background: var(--bg-card); overflow: hidden; }
.art-faq-item summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 15px; font-weight: 700; color: var(--text-main); position: relative; padding-right: 40px; }
.art-faq-item summary::-webkit-details-marker { display: none; }
.art-faq-item summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--text-faint); transition: transform .2s; }
.art-faq-item[open] summary::after { content: '−'; }
.art-faq-a { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 540px) {
.art-faq { padding: 0 16px; margin-top: 28px; }
.art-faq-h { font-size: 18px; }
.art-faq-item summary { font-size: 14px; }
.art-faq-a { font-size: 13.5px; }
}
@media (max-width: 540px) {
.article-byline { margin: 28px 0 14px; padding-top: 14px; }
.article-byline .byl-line { font-size: 12.5px; }
.article-byline .byl-sources { font-size: 11px; }
}
.article-main-img { width: 100%; height: auto; max-height: 450px; object-fit: cover; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
/* ── Bloc personnalité (avant le corps article) ──────────────────
Photo Wikipedia + nom + rôle + citation + impact marché.
Look "fiche de presse" sobre, accent bleu institutionnel. */
.art-pers {
display: grid; grid-template-columns: 120px 1fr; gap: 22px;
align-items: start;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1px solid #bae6fd; border-left: 4px solid var(--brand-line);
border-radius: 8px;
padding: 22px 24px; margin: 0 0 32px;
}
.art-pers.no-quote { background: var(--bg-subtle); border-color: var(--border-soft); border-left-color: var(--text-muted); }
.art-pers-photo {
width: 120px; height: 150px; object-fit: cover;
border-radius: 6px; background: #cbd5e1;
box-shadow: 0 2px 6px rgba(15,23,42,0.08);
}
.art-pers-photo-empty {
display: flex; align-items: center; justify-content: center;
font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
font-size: 56px; font-weight: 800; color: var(--text-muted);
background: linear-gradient(135deg, var(--border-soft) 0%, #cbd5e1 100%);
}
.art-pers-body { min-width: 0; }
.art-pers-meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(30,58,138,0.18); }
.art-pers.no-quote .art-pers-meta { border-bottom-color: var(--border-soft); }
.art-pers-name { font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: -0.2px; }
.art-pers-role { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
/* MODE EVENT : « ce qui a fait bouger les marchés ». Date discrète en haut,
paraphrase en texte fort au milieu, réaction marché en bloc accentué,
source en bas-droite en petit caractère gris. */
.art-pers-event { position: relative; padding-bottom: 24px; } /* place pour la source en absolu */
.art-pers-event-lbl,
.art-pers-position-lbl,
.art-pers-impact-lbl {
display: block;
font-size: 10px; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase; color: var(--text-main);
margin-bottom: 5px;
}
.art-pers-event-date {
display: inline-block;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10.5px; font-weight: 600; color: var(--text-faint);
letter-spacing: 0.3px;
margin: 0 0 6px;
padding: 1px 6px;
background: var(--bg-subtle-2);
border-radius: 3px;
}
.art-pers-event-text {
margin: 0 0 10px;
font-size: 15.5px; line-height: 1.5; color: var(--text-main);
font-weight: 600;
}
.art-pers-impact {
margin-top: 10px;
padding: 8px 12px;
background: rgba(30,58,138,0.08);
border-left: 3px solid var(--brand-line);
border-radius: 0 4px 4px 0;
font-size: 13.5px; line-height: 1.45; color: #1e293b;
}
.art-pers-impact-lbl { color: var(--text-main); margin-bottom: 3px; }
.art-pers-source {
position: absolute; right: 0; bottom: 0;
font-size: 10.5px; color: var(--text-faint);
font-style: italic; letter-spacing: 0.2px;
}
/* MODE POSITION : fallback intemporel */
.art-pers-position { font-size: 15px; line-height: 1.55; color: #1e293b; }
/* Legacy : anciens champs hallucinés masqués */
.art-pers-quote, .art-pers-context, .art-pers-no-quote { display: none; }
/* ── SMARTPHONE — layout compact ──
On annule le grid 2-col du PC. Photo flottée à gauche, nom + rôle
wrappent à droite (mini-header). Citation et impact en pleine largeur
en dessous. Compact et lisible sans scroll inutile. */
@media (max-width: 600px) {
.art-pers {
display: block;
padding: 16px;
}
.art-pers-photo {
float: left;
width: 68px; height: 84px;
margin: 0 14px 10px 0;
border-radius: 5px;
}
.art-pers-photo-empty { font-size: 34px; }
.art-pers-body { display: block; min-width: 0; }
.art-pers-meta {
display: block;
min-height: 84px; /* hauteur miroir de la photo */
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.art-pers-name { font-size: 16px; line-height: 1.25; display: block; }
.art-pers-role { font-size: 11px; margin-top: 4px; display: block; line-height: 1.3; }
/* Event / Position : passent en dessous du bloc photo+meta */
.art-pers-event,
.art-pers-position {
clear: both;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(30,58,138,0.18);
}
.art-pers-event { padding-bottom: 20px; }
.art-pers-event-text { font-size: 14.5px; }
.art-pers-event-date { font-size: 10px; padding: 1px 5px; }
.art-pers-impact { font-size: 12.5px; padding: 7px 10px; }
.art-pers-source { font-size: 10px; right: 0; bottom: -2px; }
.art-pers-position { font-size: 14px; }
}
/* Badge FLASH */
.flash-badge {
display: inline-block; background: var(--down); color: #fff;
font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
padding: 3px 9px; border-radius: 3px; text-transform: uppercase;
animation: flashBadgePulse 1.6s ease-in-out infinite;
}
@keyframes flashBadgePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
/* Lien vers le Web Story AMP (articles flash) */
.story-link { color: var(--blue-link); text-decoration: none; font-weight: 700; white-space: nowrap; }
.story-link:hover { text-decoration: underline; }
/* Pastille FLASH sobre (harmonisée avec home.css — l'ancien dégradé animé
« bandeau BFM » a été retiré des deux surfaces). */
.title-flash-badge {
display: inline-block;
font-size: 0.38em; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
margin-right: 10px; vertical-align: middle; transform: translateY(-3px);
padding: 3px 8px; border-radius: 4px;
background: var(--down); color: #ffffff;
}
/* Live feed flash */
.flash-live { border: 1px solid #fecaca; border-left: 4px solid var(--down); border-radius: 6px; background: #fef2f2; padding: 18px 20px; margin-bottom: 30px; }
.flash-live-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--down); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.flash-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); animation: flashBadgePulse 1.2s infinite; }
.flash-live-count { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-faint); letter-spacing: 0.5px; text-transform: none; }
.flash-live-feed { list-style: none; margin: 0; padding: 0; }
.flash-live-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px dashed #fecaca; align-items: baseline; }
.flash-live-item:last-child { border-bottom: none; }
.flash-live-item.is-latest .flash-live-text { font-weight: 700; color: var(--text-main); }
.flash-live-time { flex-shrink: 0; font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; font-weight: 800; color: var(--down); min-width: 46px; }
.flash-live-text { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
/* Sous-titre informatif d'une entrée de direct (contexte de la source) */
.flash-live-desc { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--text-muted); }
.flash-live-item.is-latest .flash-live-desc { color: var(--text-muted); }
/* DARK : le fond rouge CLAIR (#fef2f2) restait clair → le titre de la dernière
entrée (var(--text-main), clair en dark) devenait illisible. On passe le bloc
sur un rouge SOMBRE teinté ; titre et texte clairs deviennent lisibles. */
html[data-theme="dark"] .flash-live { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.32); border-left-color: var(--down); }
html[data-theme="dark"] .flash-live-item { border-bottom-color: rgba(248,113,113,0.22); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .flash-live { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.32); border-left-color: var(--down); }
html[data-theme="auto"] .flash-live-item { border-bottom-color: rgba(248,113,113,0.22); }
}
/* Badge "Live" (alerte encore active) */
.flash-badge.is-live { display: inline-flex; align-items: center; gap: 6px; }
.flash-badge .fb-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bg-card); }
/* Chronologie neutralisée — flash passé : plus de rouge ni de clignotement */
.flash-live.is-past { border-color: var(--border-soft); border-left-color: #cbd5e1; background: var(--bg-subtle); }
.flash-live.is-past .flash-live-head { color: var(--text-muted); }
.flash-live.is-past .flash-live-dot { background: var(--text-faint); animation: none; }
.flash-live.is-past .flash-live-item { border-bottom-color: var(--border-soft); }
.flash-live.is-past .flash-live-time { color: var(--text-muted); }
/* Filet de sécurité ANTI-DÉBORDEMENT MOBILE.
Cause juin 2026 : certains articles contenaient des tables sans classe,
des spans tickers très longs, ou des URLs continues qui poussaient la
largeur de .article-content au-delà du viewport → texte tronqué/coupé
à droite sur smartphone. Les 3 propriétés ci-dessous garantissent que :
· les mots longs se cassent à la ligne plutôt que de déborder
· les liens longs (URLs, ancres) idem
· max-width: 100% pour les médias enfants (img, video, iframe, table) */
.article-content {
font-size: 18px; line-height: 1.8; color: var(--text-muted);
overflow-wrap: break-word; word-wrap: break-word;
max-width: 100%;
}
.article-content img,
.article-content video,
.article-content iframe,
.article-content table,
.article-content pre { max-width: 100%; }
.article-content pre { overflow-x: auto; }
.article-content p { margin-bottom: 22px; text-align: justify; }
.article-content h2 { font-size: 24px; font-weight: 900; color: var(--text-main); margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--brand-line); }
.article-content h3 { font-size: 18px; font-weight: 800; color: var(--text-main); margin: 28px 0 12px; }
.article-content ul { margin: 16px 0 22px 0; padding-left: 28px; }
.article-content li { margin-bottom: 10px; line-height: 1.7; }
.article-content a { color: var(--blue-link-soft); text-decoration: underline; }
/* white-space: nowrap RETIRÉ → si le modèle a (à tort) entouré une phrase
entière au lieu d'une simple valeur, elle se coupe maintenant à la ligne
au lieu de déborder le viewport sur mobile (cause d'illisibilité). Les
valeurs courtes restent généralement sur une ligne ; on autorise juste
la coupure aux espaces si nécessaire. */
/* Noms d'entreprises/cryptos/personnalités : plus d'encadré (fond+bordure) —
simple mise en valeur au bleu des badges (.bdg-yf), comme un ticker. */
.in-text-name { font-weight: 800; color: var(--blue-link-soft); overflow-wrap: break-word; }
/* Lien glossaire (1re occurrence d'un terme majeur) : discret — pointillé
sous le mot, pas de bleu (réservé aux valeurs), loupe au survol. */
.article-content a.gloss-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-faint); cursor: help; }
.article-content a.gloss-link:hover { color: var(--blue-link-soft); border-bottom-color: currentColor; }
/* Chiffres clés : effet DOUX (plus d'encadré/bordure/ombre — l'ancien
« box » rouge faisait trop lourd). Simple pastille teintée à coins arrondis
+ couleur du sens. white-space:nowrap → un chiffre n'est JAMAIS coupé sur
deux lignes (« 383,5 » puis « millions » séparés). Les phrases entières
éventuellement wrappées à tort sont déjà déballées à la génération (seuil
26 car.), donc nowrap ici ne peut plus déborder l'écran. */
.in-text-val { font-family: ui-monospace, monospace; font-weight: 700; padding: 0 3px; border-radius: 3px; font-size: 0.92em; white-space: nowrap; }
.article-content .in-text-val, .article-content .in-text-name { max-width: 100%; }
.in-text-val.up { background: var(--up-bg); color: var(--up); }
.in-text-val.down { background: var(--down-bg); color: var(--down); }
.in-text-val.neutral { background: var(--bg-subtle-2); color: var(--text-muted); }
/* FILET DE SÉCURITÉ : si malgré le un volume ou un
cours était quand même transformé en lien tel: par Safari mobile, on le
neutralise visuellement et fonctionnellement. Plus jamais de "1 234 567
titres" qui ouvre le composeur téléphonique. */
.article-content a[href^="tel:"] {
color: inherit !important;
text-decoration: none !important;
pointer-events: none !important;
cursor: text !important;
}
/* aspect-ratio + object-fit : réserve la place AVANT chargement (zéro CLS)
sans déformer l'image (recadrage 3:2 propre pour une illustration inline). */
.in-text-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; margin: 30px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: block; }
/* ═══════════════════════════════════════════════════════════════════
FORMATS RARES — design distinctif des blocs structurés générés par IA
(timeline, classement, table comparative, FAQ accordion).
Préfixe `.rk-` pour ne pas polluer les anciens .timeline / .ranking.
═══════════════════════════════════════════════════════════════════ */
/* TIMELINE — chronologie d'évènements causaux datés.
Rail vertical à gauche avec puces rondes, date en pill mono. */
.article-content .rk-timeline {
list-style: none;
margin: 24px 0 28px;
padding: 0;
position: relative;
}
.article-content .rk-timeline::before {
content: '';
position: absolute;
left: 11px; top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, #cbd5e1 0%, var(--border-soft) 100%);
}
.article-content .rk-timeline li {
position: relative;
padding: 6px 0 14px 38px;
margin: 0;
line-height: 1.5;
font-size: 15px;
color: var(--text-muted);
list-style: none;
}
.article-content .rk-timeline li::before {
content: '';
position: absolute;
left: 4px; top: 14px;
width: 16px; height: 16px;
background: var(--bg-card);
border: 3px solid var(--brand-line);
border-radius: 50%;
box-shadow: 0 0 0 3px #fff;
z-index: 1;
}
.article-content .rk-timeline li strong:first-child {
display: inline-block;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
font-weight: 700;
color: var(--text-main);
background: rgba(30,58,138,0.08);
padding: 2px 8px;
border-radius: 3px;
margin-right: 10px;
letter-spacing: 0.4px;
vertical-align: middle;
}
/* CLASSEMENT — top sectoriel () */
.article-content .rk-list {
list-style: none;
counter-reset: rk-count;
margin: 22px 0 26px;
padding: 0;
}
.article-content .rk-list li {
counter-increment: rk-count;
position: relative;
padding: 12px 14px 12px 52px;
margin-bottom: 8px;
background: var(--bg-subtle);
border-left: 3px solid var(--brand-line);
border-radius: 0 6px 6px 0;
font-size: 15px;
line-height: 1.5;
}
.article-content .rk-list li::before {
content: counter(rk-count);
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
width: 28px; height: 28px;
background: var(--accent-strong);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: ui-monospace, monospace;
font-size: 13px; font-weight: 800;
}
.article-content .rk-list li strong:first-child { color: var(--text-main); font-weight: 800; }
/* TABLE COMPARATIVE */
/* Wrap container — sur desktop, transparent. Sur smartphone, on bascule
la table en layout EMPILÉ (chaque ligne = bloc de lignes label/valeur).
Pas de scroll horizontal : tout tient dans le viewport, rien n'est
coupé. Voir le bloc @media (max-width: 600px) plus bas. */
.article-content .rk-table-wrap {
margin: 24px 0 28px;
}
.article-content .rk-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 6px;
overflow: hidden;
}
.article-content .rk-table thead { background: var(--bg-subtle); }
.article-content .rk-table th {
text-align: left; padding: 10px 14px;
font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.8px;
color: var(--text-muted);
border-bottom: 1px solid var(--border-soft);
}
.article-content .rk-table td {
padding: 10px 14px;
border-bottom: 1px solid var(--bg-subtle-2);
line-height: 1.45; color: var(--text-muted);
}
.article-content .rk-table td:nth-child(2) {
font-family: ui-monospace, monospace;
font-weight: 700; color: var(--text-main);
}
.article-content .rk-table tr:last-child td { border-bottom: none; }
/* FAQ accordion */
.article-content .rk-faq { margin: 16px 0 28px; }
.article-content .rk-faq details {
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 8px;
background: var(--bg-card);
}
.article-content .rk-faq summary {
font-size: 14.5px; font-weight: 700; color: var(--text-main);
cursor: pointer; list-style: none;
position: relative; padding-right: 22px;
}
.article-content .rk-faq summary::-webkit-details-marker { display: none; }
.article-content .rk-faq summary::after {
content: '+'; position: absolute; right: 0; top: -2px;
font-size: 20px; color: var(--text-faint); transition: transform .2s;
}
.article-content .rk-faq details[open] summary::after { content: '−'; }
.article-content .rk-faq details p {
margin: 10px 0 0; font-size: 14px; color: var(--text-muted); line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════
INTERVIEW IMAGINAIRE — Q/R Bourseur / Analyste
Utilisé par le squelette E (« Interview imaginaire ») du générateur.
Remplace les anciens guillemets « … » bruts par un bloc visuel
cohérent avec le carnet de marché : 2 rangées Question / Réponse,
tag couleur identifiant l'interlocuteur, trait latéral discret.
═══════════════════════════════════════════════════════════════ */
.article-content .bq-qa {
margin: 16px 0 24px;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 8px;
overflow: hidden;
}
.article-content .bq-qa-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 14px;
padding: 14px 18px;
}
.article-content .bq-qa-row + .bq-qa-row { border-top: 1px solid var(--bg-subtle-2); }
.article-content .bq-qa-q { background: var(--bg-subtle); }
.article-content .bq-qa-a { background: var(--bg-card); }
.article-content .bq-qa-tag {
font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 9px; border-radius: 4px;
align-self: flex-start;
white-space: nowrap;
line-height: 1.2;
font-family: inherit;
}
.article-content .bq-qa-tag-q {
background: var(--accent-strong); color: #fff;
}
.article-content .bq-qa-tag-a {
background: var(--bg-card); color: var(--text-main);
border: 1px solid #cbd5e1;
letter-spacing: 0.5px;
}
/* Le paragraphe à l'intérieur reprend la typo de l'article, sans surcharge */
.article-content .bq-qa-row p {
margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-main);
}
.article-content .bq-qa-q p { font-weight: 600; color: var(--text-main); }
.article-content .bq-qa-a p { color: #1f2937; }
@media (max-width: 600px) {
.article-content .rk-timeline li { padding-left: 32px; font-size: 14px; }
.article-content .rk-list li { padding: 10px 12px 10px 46px; font-size: 14px; }
.article-content .rk-list li::before { left: 10px; width: 24px; height: 24px; font-size: 12px; }
/* ─── TABLEAUX → LAYOUT EMPILÉ MOBILE ───────────────────────────────
Sur smartphone, on abandonne la grille colonnes/lignes (qui débordait
à droite) au profit d'un layout 1 colonne où CHAQUE LIGNE devient
une carte indépendante avec ses paires « entête : valeur ».
· thead caché
· tr en bloc avec bord arrondi
· td en bloc avec label (extrait du thead via JS, voir plus bas)
*/
.article-content .rk-table-wrap { margin: 16px 0 24px; }
.article-content .rk-table {
border: none; border-radius: 0;
background: transparent;
font-size: 13px;
}
.article-content .rk-table thead,
.article-content .rk-table .rk-th-row { display: none; }
.article-content .rk-table,
.article-content .rk-table tbody { display: block; width: 100%; }
.article-content .rk-table tr {
display: block; width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-soft); border-radius: 6px;
margin: 0 0 10px;
padding: 8px 10px 6px;
box-sizing: border-box;
}
.article-content .rk-table tr:last-child { margin-bottom: 0; }
.article-content .rk-table td {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--bg-subtle-2);
font-size: 13px; line-height: 1.4;
text-align: right;
color: var(--text-muted);
}
.article-content .rk-table td:last-child { border-bottom: none; }
.article-content .rk-table td:first-child {
display: block;
font-size: 14.5px; font-weight: 800; color: var(--text-main);
padding: 2px 0 8px;
border-bottom: 1px solid var(--bg-subtle-2);
text-align: left;
}
/* Label injecté par JS via data-label="…" (cf. acw-fav script) */
.article-content .rk-table td[data-label]::before {
content: attr(data-label);
font-size: 10.5px; font-weight: 800; color: var(--text-faint);
text-transform: uppercase; letter-spacing: 0.6px;
flex-shrink: 0; padding-right: 6px;
}
/* Q/R : passage en empilé (tag en ligne 1, texte en ligne 2) */
.article-content .bq-qa-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 12px 14px;
}
.article-content .bq-qa-tag { font-size: 10px; padding: 3px 8px; }
.article-content .bq-qa-row p { font-size: 14.5px; }
}
/* Disclaimer AMF en pied d'article — version condensée, garde les keywords
réglementaires essentiels pour le signal YMYL E-E-A-T. */
.art-disclaimer {
margin: 50px 0 0; /* plus d'air en haut : placé après le CTA retour */
padding: 12px 16px;
background: var(--bg-subtle);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--text-faint);
border-radius: 4px;
font-size: 11.5px; line-height: 1.55; color: var(--text-muted);
text-align: left;
}
.art-disclaimer strong { color: var(--text-main); font-weight: 700; }
.art-disclaimer a { color: var(--text-muted); text-decoration: underline; }
.art-disclaimer a:hover { color: var(--text-main); }
.article-chart-wrapper { position: relative; border: 1px solid rgba(15,23,42,0.22); border-top: 4px solid var(--brand-line); border-radius: 6px; background: var(--bg-card); margin: 40px 0; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
/* Pas de sélection de texte ni de menu contextuel au toucher (smartphone) :
on interagit avec la courbe sans surligner le widget. */
-webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }
.native-chart { touch-action: pan-y; } /* le toucher sur la courbe ne bloque pas le scroll vertical de la page */
/* Entête alignée à GAUCHE, étoile ★ à gauche du titre (absolu, en haut à
gauche). padding-left réserve juste la largeur de l'étoile (≈ 32px + marge)
→ le titre démarre proprement après elle et peut passer à la ligne. */
.acw-header { margin-bottom: 15px; text-align: left; border-bottom: 1px solid var(--bg-subtle-2); padding-bottom: 12px; padding-left: 54px; min-height: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.acw-header .acw-name { font-size: 17px; font-weight: 800; color: var(--text-main); letter-spacing: -0.2px; text-transform: none; line-height: 1.2; }
.acw-header .acw-sub { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; }
/* Badge variation période, encadré vert/rouge */
.acw-header .acw-chg {
display: inline-block; margin-top: 2px;
font-size: 12.5px; font-weight: 800; letter-spacing: 0.2px;
padding: 3px 11px; border-radius: 999px; border: 1px solid;
font-variant-numeric: tabular-nums;
}
.acw-header .acw-chg.up { color: var(--up); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.30); }
.acw-header .acw-chg.down { color: var(--down); background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.30); }
/* Tooltip HTML custom de la courbe (clic/survol d'un point) : valeur en
couleur vert/rouge, heure encadrée en pilule neutre, variation colorée. */
.acw-tip {
position: absolute; transform: translate(-50%, -118%);
pointer-events: none; z-index: 5; opacity: 0;
/* Fond quasi opaque (lisibilité maximale) + léger flou. */
background: rgba(255,255,255,0.97);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
border: 1px solid rgba(15,23,42,0.18); border-radius: 8px;
padding: 6px 10px; box-shadow: 0 5px 14px rgba(15,23,42,0.13);
display: flex; flex-direction: column; align-items: center; gap: 3px;
white-space: nowrap; transition: opacity .12s ease;
}
.acw-tip.is-on { opacity: 1; }
.acw-tip-time {
font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .3px;
background: var(--bg-subtle-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 8px;
}
.acw-tip-val { font-size: 14px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acw-tip-chg { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.acw-tip-chg.up { color: var(--up); }
.acw-tip-chg.down { color: var(--down); }
@media (max-width: 600px) {
/* Bloc réduit sur smartphone */
.acw-tip { padding: 5px 8px; gap: 2px; border-radius: 7px; }
.acw-tip-time { font-size: 9px; padding: 1px 7px; }
.acw-tip-val { font-size: 12.5px; }
.acw-tip-chg { font-size: 9.5px; }
}
/* Bouton ★ (étoile seule) discret en haut à GAUCHE des graphiques d'article,
aligné sur la 1re ligne du titre. Injecté côté JS au render des charts
(vaut pour tous les articles existants + futurs). Toggle la watchlist
localStorage 'bourseur_watchlist' — la même que le ★ des fiches /cotation. */
.acw-fav {
position: absolute; top: 14px; left: 14px;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0;
background: var(--bg-subtle);
border: 1px solid var(--border-soft); border-radius: 50%;
color: var(--text-faint); cursor: pointer; font-family: inherit; line-height: 1;
transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.acw-fav:hover { color: #d97706; border-color: #cbd5e1; background: var(--bg-subtle-2); }
.acw-fav:active { transform: scale(0.92); }
.acw-fav.is-fav { color: #f59e0b; border-color: #fcd34d; background: #fef3c7; }
.acw-fav .acw-fav-star { font-size: 16px; line-height: 1; }
@media (max-width: 480px) {
.acw-fav { top: 11px; left: 11px; width: 28px; height: 28px; }
.acw-fav .acw-fav-star { font-size: 14px; }
}
.acw-canvas-container {
position: relative; height: 280px; width: 100%;
}
/* ── MOBILE : courbe intégrée discrètement plutôt qu'en gros bloc ──
Sur ≤ 600px, le graphique perd son cadre/ombre, sa hauteur est
réduite et il s'intègre au flux de lecture sans casser le rythme. */
@media (max-width: 600px) {
.article-chart-wrapper {
border: 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
border-radius: 0; box-shadow: none;
margin: 24px -12px; padding: 12px 4px 8px;
background: transparent;
}
.acw-header { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 0; padding-left: 44px; }
.acw-header .acw-name { font-size: 14.5px; }
.acw-header .acw-sub { font-size: 9.5px; letter-spacing: 0.8px; }
.acw-header .acw-chg { font-size: 11px; padding: 2px 9px; }
.acw-canvas-container { height: 180px; }
.acw-fav { top: 11px; left: 11px; width: 28px; height: 28px; padding: 0; }
.acw-fav .acw-fav-star { font-size: 14px; }
}
/* Skeleton shimmer simple, retiré par JS quand Chart.js fini de render.
Pas de CSS :has() (non supporté sur Safari iOS < 15.4). */
.acw-canvas-container.is-loading {
background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-subtle-2) 50%, var(--bg-subtle) 100%);
background-size: 200% 100%;
animation: acw-skel 1.6s linear infinite;
border-radius: 4px;
}
@keyframes acw-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Sélecteur de plage sous le graphique — palette institutionnelle sobre */
.acw-controls { display: flex; justify-content: center; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bg-subtle-2); flex-wrap: wrap; }
.acw-btn { font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; min-width: 44px; }
.acw-btn:hover:not(.is-active):not(:disabled) { color: var(--text-main); border-color: #cbd5e1; background: var(--bg-subtle-2); }
.acw-btn.is-active { color: #fff; background: var(--accent-strong); border-color: var(--text-main); }
.acw-btn:disabled { opacity: .55; cursor: wait; }
/* ═══════════════════════════════════════════════════════════════
LAYOUTS ARTICLE — 3 variations visuelles (A, B, C)
Bleu de marque #0f172a (accent footer + site-wide)
Appliqué via .art-layout sur le wrapper du contenu généré.
═══════════════════════════════════════════════════════════════ */
.art-layout .in-text-name { color: var(--blue-link-soft); font-weight: 700; }
.art-layout a.in-text-link, .art-layout a.in-text-link:hover { text-decoration: none; }
.art-layout .in-text-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 0.94em; padding: 1px 6px; border-radius: 3px; }
.art-layout .in-text-val.up { color: var(--up); background: var(--up-bg); }
.art-layout .in-text-val.down { color: var(--down); background: var(--down-bg); }
.art-layout .in-text-val.neutral { color: var(--text-main); background: var(--bg-subtle-2); }
/* Pull-quote serif (A, C) avec guillemet géant superposé */
.art-layout .art-pullquote {
font-family: Georgia, "Times New Roman", serif;
font-size: 24px; line-height: 1.45; color: var(--text-main);
text-align: center; margin: 34px 0;
padding: 24px 16px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
font-style: italic; position: relative;
}
.art-layout .art-pullquote::before {
content: '\201C'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
background: var(--bg-page, var(--bg-page)); padding: 0 14px;
font-size: 48px; color: var(--text-main); line-height: 1;
font-family: Georgia, serif; font-style: normal;
}
/* Tableau chiffres clés (A, C) */
.art-layout .art-stat-table {
width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 14px;
background: var(--bg-subtle); border-radius: 6px; overflow: hidden;
}
.art-layout .art-stat-table th {
padding: 9px 12px; text-align: left;
font-size: 10.5px; font-weight: 800; color: var(--text-muted);
letter-spacing: 0.8px; text-transform: uppercase;
border-bottom: 1px solid #cbd5e1; background: var(--bg-subtle-2);
}
.art-layout .art-stat-table td { padding: 9px 12px; border-top: 1px solid #fff; color: var(--text-main); font-size: 14px; }
.art-layout .art-stat-table td:last-child { font-family: ui-monospace, monospace; font-weight: 800; text-align: right; }
/* Bullet list bleus (A, C) */
.art-layout .art-bullet-list { list-style: none; padding: 0; margin: 0 0 12px; }
.art-layout .art-bullet-list li { position: relative; padding: 8px 0 8px 24px; line-height: 1.55; font-size: 14.5px; color: var(--text-muted); }
.art-layout .art-bullet-list li::before {
content: ''; position: absolute; left: 4px; top: 15px;
width: 8px; height: 8px; background: var(--accent-strong); border-radius: 50%;
}
.art-layout .art-bullet-list strong { color: var(--text-main); font-weight: 800; }
/* H2 numérotés 01/02/03 (B, C) */
.art-layout .art-h2-num {
display: flex; align-items: center; gap: 12px;
margin: 32px 0 14px; padding-bottom: 10px;
border-bottom: 2px solid var(--brand-line);
font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: -0.2px;
}
.art-layout .art-h2-num::before {
content: attr(data-num);
background: var(--accent-strong); color: #fff;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; font-family: ui-monospace, monospace;
border-radius: 3px; flex-shrink: 0;
}
/* Brief sobre fond blanc (B) — listing numéroté décimal-leading-zero */
.art-layout .art-brief {
margin: 32px 0 0; padding: 22px 0 0;
border-top: 2px solid var(--brand-line); list-style: none;
counter-reset: brief;
}
.art-layout .art-brief li {
position: relative; padding: 12px 0 12px 42px;
font-size: 14.5px; line-height: 1.55; color: var(--text-main);
border-bottom: 1px solid var(--border-soft); counter-increment: brief;
}
.art-layout .art-brief li:last-child { border-bottom: 0; }
.art-layout .art-brief li::before {
content: counter(brief, decimal-leading-zero);
position: absolute; left: 0; top: 14px;
font-family: ui-monospace, monospace;
font-size: 11px; font-weight: 800; color: var(--text-main); letter-spacing: 0.8px;
}
/* Timeline « Ce qui pourrait suivre » — variante B : axe bleu + points,
texte directement sur le fond du site, aucun encadrement. */
.art-layout .art-tl { position: relative; padding-left: 26px; margin: 10px 0 22px; }
.art-layout .art-tl::before {
content: ''; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 2px;
background: linear-gradient(#0f172a, #cbd5e1);
}
.art-layout .art-tl-node { position: relative; padding: 4px 0 20px; }
.art-layout .art-tl-node:last-child { padding-bottom: 0; }
.art-layout .art-tl-node::before {
content: ''; position: absolute; left: -24px; top: 7px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--accent-strong); box-shadow: 0 0 0 4px var(--bg-page, var(--bg-page));
}
.art-layout .art-tl-term { display: block; font-weight: 800; font-size: 15px; color: var(--text-main); letter-spacing: -0.2px; }
.art-layout .art-tl-when {
display: block; font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-main); margin: 1px 0 6px;
}
.art-layout .art-tl-node p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
/* ─── Bloc Note Bourseur — design V2 (cf. article_design_demo.html) ─── */
.art-note-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 18px;
align-items: center;
background: #fafafa;
border: 1px solid var(--border-soft);
border-radius: 6px;
padding: 16px 20px;
margin: 24px 0;
}
.art-note-gauge {
position: relative;
width: 96px;
flex-shrink: 0;
text-align: center;
}
.art-note-svg { width: 96px; height: 55px; display: block; margin: 0 auto; }
.art-note-num {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 26px;
font-weight: 800;
line-height: 1;
margin-top: -16px;
letter-spacing: -0.5px;
}
.art-note-info { min-width: 0; }
.art-note-label {
font-size: 10px;
font-weight: 800;
color: var(--text-faint);
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 5px;
}
.art-note-verdict {
display: inline-block;
padding: 2px 9px;
border-radius: 3px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.7px;
text-transform: uppercase;
margin-bottom: 7px;
}
.art-note-desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
.art-note-desc strong { color: var(--text-main); font-weight: 800; }
/* Axes chiffrés en méta-ligne discrète SOUS la micro-analyse (les scores
sortent de la prose : « Momentum 46 · Valorisation 58 · … — sur 100 »). */
.art-note-axes-mini {
margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border-soft);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
color: var(--text-faint); font-variant-numeric: tabular-nums;
}
/* ── Smartphone : on stack verticalement, on agrandit la jauge ── */
@media (max-width: 600px) {
.art-note-card {
grid-template-columns: 1fr;
gap: 8px;
padding: 16px 16px 18px;
text-align: center;
}
.art-note-gauge { width: 100%; }
.art-note-svg { width: 130px; height: 72px; }
.art-note-num { font-size: 30px; margin-top: -20px; }
.art-note-info { text-align: center; }
.art-note-label { margin-bottom: 6px; }
.art-note-desc {
font-size: 13px;
text-align: left;
margin-top: 6px;
}
.art-note-axes-mini { font-size: 10px; text-align: left; }
}
/* Compatibilité legacy art-retain-h2 / art-retain-ul */
.art-layout hr.art-sep { border: 0; border-top: 1px solid var(--border-soft); margin: 36px 0 22px; }
.art-layout h2.art-retain-h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--text-main); letter-spacing: 0.3px; text-transform: uppercase; }
.art-layout ul.art-retain-ul { list-style: none; padding: 0; margin: 0 0 12px; }
.art-layout ul.art-retain-ul li { position: relative; padding: 8px 0 8px 24px; line-height: 1.55; font-size: 14.5px; color: var(--text-muted); }
.art-layout ul.art-retain-ul li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; background: var(--accent-strong); border-radius: 50%; }
.art-layout ul.art-retain-ul strong { color: var(--text-main); font-weight: 800; }
.article-tags { margin: 40px 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags .tag { background: var(--bg-subtle-2); color: var(--text-main); padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 700; text-decoration: none; transition: 0.2s; }
.article-tags .tag:hover { background: var(--accent-strong); color: #fff; }
/* Hashtag du NOM LISIBLE (LVMH, Bitcoin…) — accent légèrement plus marqué
car c'est la version "humaine" du ticker, plus parlante pour le lecteur. */
.article-tags .tag.tag-name { background: #e0e7ff; color: var(--text-main); border: 1px solid #c7d2fe; }
.article-tags .tag.tag-name:hover { background: var(--accent-strong); color: #fff; border-color: var(--text-main); }
/* DARK : le fond indigo clair rendait le texte (clair en dark) illisible.
→ fond bleu sombre teinté + bordure bleue, texte clair conservé. */
html[data-theme="dark"] .article-tags .tag.tag-name { background: rgba(122,162,247,0.15); border-color: rgba(122,162,247,0.38); color: var(--text-main); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .article-tags .tag.tag-name { background: rgba(122,162,247,0.15); border-color: rgba(122,162,247,0.38); color: var(--text-main); }
}
/* Encart « Outil Bourseur » (après les hashtags) — sobre, palette institutionnelle */
.art-tool-teaser { margin: 26px 0 4px; padding: 18px 20px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--brand-line); border-radius: 5px; }
.att-eyebrow { font-size: 9px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px; }
.att-titre { font-size: 16px; font-weight: 800; color: var(--text-main); line-height: 1.35; margin-bottom: 5px; }
.att-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.att-cta { display: inline-block; font-size: 11px; font-weight: 800; color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; padding-top: 10px; border-top: 1px solid var(--bg-subtle-2); }
.att-cta:hover { color: var(--blue-link-soft); }
/* Lien contextuel IN-BODY — renvoi sobre vers la fiche du sujet, intégré au flux de lecture */
.art-inline-cta { margin: 6px 0 18px; padding: 10px 14px; background: var(--bg-subtle); border-left: 3px solid var(--brand-line); border-radius: 0 5px 5px 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.art-inline-cta a { color: var(--blue-link); text-decoration: none; }
.art-inline-cta a:hover { text-decoration: underline; }
/* Bloc « POUR ALLER PLUS LOIN » — maillage contextuel intelligent (sous l'article) */
.art-smart { margin: 30px 0 6px; padding: 18px 20px 20px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; }
.art-smart-eyebrow { font-size: 9px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 13px; }
.art-smart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.art-smart-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: 6px; text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
.art-smart-card:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.art-smart-k { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--blue-link); }
.art-smart-t { font-size: 14.5px; font-weight: 800; color: var(--text-main); line-height: 1.3; overflow-wrap: anywhere; }
.art-smart-s { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 560px) { .art-smart-grid { grid-template-columns: 1fr; } }
.share-bar { display: flex; gap: 10px; margin: 30px 0; padding: 20px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); align-items: center; }
.share-bar span { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; margin-right: 10px; }
.share-bar a { padding: 6px 14px; border-radius: 4px; background: var(--bg-subtle-2); color: var(--text-main); text-decoration: none; font-size: 13px; font-weight: 700; transition: 0.2s; }
.share-bar a:hover { background: var(--accent-strong); color: #fff; }
/* ═══════════════════════════════════════════════════════════════
TEASER PORTEFEUILLE VIRTUEL — placement fin d'article (1/5)
Dégradé bleu du footer + mockup carte portefeuille en filigrane.
═══════════════════════════════════════════════════════════════ */
.pftz {
display: block; position: relative; overflow: hidden;
margin: 22px 0 30px; padding: 22px 22px 20px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, var(--text-muted) 100%);
border: 1px solid #1e293b; border-radius: 10px;
text-decoration: none; color: #fff;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
box-shadow: 0 4px 14px rgba(15,23,42,0.14);
}
.pftz:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(15,23,42,0.24);
border-color: var(--text-muted);
}
.pftz::before {
content: ''; position: absolute;
right: -10px; top: 12px; bottom: 12px;
width: 56%; max-width: 380px;
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
opacity: 0.13; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.pftz::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.15) 60%, rgba(15,23,42,0) 100%);
pointer-events: none; z-index: 1;
}
.pftz > * { position: relative; z-index: 2; }
.pftz-badge {
display: inline-block; font-size: 9px; font-weight: 800;
letter-spacing: 1.6px; text-transform: uppercase;
color: #93c5fd; background: rgba(96,165,250,0.12);
border: 1px solid rgba(96,165,250,0.25);
padding: 3px 9px; border-radius: 12px;
margin-bottom: 10px;
}
/* letter-spacing augmenté (0.5px → 1.2px) pour aérer le titre uppercase */
.pftz-title {
font-size: 22px; font-weight: 900; line-height: 1.12;
letter-spacing: 1.2px; color: #fff;
margin: 0 0 6px;
max-width: 65%;
text-transform: uppercase;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.pftz-sub {
font-size: 13.5px; font-weight: 500; color: #cbd5e1;
line-height: 1.45; margin: 0 0 16px;
max-width: 70%;
}
.pftz-cta {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 800;
letter-spacing: 1px; text-transform: uppercase;
color: #fff; padding: 9px 16px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
border-radius: 24px;
transition: background .15s, border-color .15s;
}
.pftz:hover .pftz-cta {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.32);
}
.pftz-cta svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
.pftz { padding: 18px 16px 16px; }
.pftz::before { width: 52%; opacity: 0.11; }
.pftz-title { font-size: 19px; max-width: 70%; letter-spacing: 1px; }
.pftz-sub { font-size: 12.5px; max-width: 75%; }
}
@media (max-width: 420px) {
.pftz::before { width: 48%; opacity: 0.09; }
.pftz-title { font-size: 17px; max-width: 78%; letter-spacing: 0.8px; }
.pftz-sub { font-size: 12px; }
}
/* ── Bloc "À lire aussi" FINAL — renforcé ─────────────────────── */
.related-section { margin-top: 50px; padding-top: 30px; border-top: 2px solid var(--brand-line); }
.related-title {
font-size: 14px; font-weight: 900;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--text-main); margin-bottom: 20px;
display: flex; align-items: center; gap: 10px;
}
.related-title::before {
content: ''; width: 28px; height: 3px;
background: var(--accent-strong); border-radius: 2px;
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.related-card {
background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px;
overflow: hidden; text-decoration: none; color: inherit;
transition: transform .18s, box-shadow .18s, border-color .18s;
display: flex; flex-direction: column;
}
.related-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
border-color: var(--text-main);
}
.related-card img { width: 100%; height: 110px; object-fit: cover; transition: transform .25s; }
.related-card:hover img { transform: scale(1.03); }
.related-card .rc-body { padding: 13px 14px; }
.related-card .rc-eyebrow {
display: inline-block;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px;
text-transform: uppercase; color: var(--text-muted);
margin-bottom: 6px;
}
.related-card .rc-title { font-size: 14px; font-weight: 800; line-height: 1.3; color: var(--text-main); }
.related-card .rc-date { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
@media (max-width: 768px) {
.article-title { font-size: 26px; }
.article-content { font-size: 16px; }
.article-content h2 { font-size: 20px; }
}
/* ── LISIBILITÉ PC (≥ 1024px) — demande user juil. 2026 ─────────────
Sur grand écran, « L'essentiel », le sommaire et les métas étaient
trop petits et trop fins. Bump ciblé de tout ce qui se lit. */
@media (min-width: 1024px) {
.article-meta { font-size: 13.5px; }
.art-essentiel { padding: 18px 22px 16px; }
.art-essentiel-h { font-size: 12.5px; }
.art-essentiel li { font-size: 16.5px; font-weight: 500; line-height: 1.65; margin-bottom: 8px; }
.art-toc { padding: 16px 20px; }
.art-toc-h { font-size: 12px; }
.art-toc li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; }
.art-note-desc { font-size: 15px; line-height: 1.6; }
.art-note-axes-mini { font-size: 11.5px; }
.art-faq-h { font-size: 22px; }
.art-faq-item summary { font-size: 16.5px; }
.art-faq-a { font-size: 15.5px; }
.art-inline-cta { font-size: 15.5px; }
.byl-text { font-size: 13.5px; }
.byl-sources { font-size: 12.5px; }
.related-title { font-size: 22px; }
}