/* ============================================================================ BLOG — NOUVELLE DA BLEUE (fichiers index2.html du blog uniquement) ---------------------------------------------------------------------------- Chargé APRÈS blog.css. On NE réécrit PAS blog.css : le blog et les articles utilisent partout les tokens de thème (--accent, --text, --bg, --font-*), il suffit donc de REMAPPER ces tokens vers la DA bleue pour tout basculer : · plus de NOIR → fonds clairs (crème/blanc) bord à bord · plus de JAUNE → accent lime #c2f24e / vert #3d6610 remplacé par le bleu · plus d'ANCIENNE POLICE → Cormorant/Space Grotesk/Manrope/JetBrains → Plus Jakarta Scopé body.tvl-da2 : n'affecte que les pages blog2. Utilise les tokens --da2-* définis par hero2.css. ============================================================================ */ /* 1. REMAP DES TOKENS DE THÈME --------------------------------------------- On vise à la fois le niveau racine (utilisé par les zones sombres de l'article) ET .section--light (utilisé par les zones claires + le blog), pour que TOUT le blog rende avec la même DA claire. */ body.tvl-da2, body.tvl-da2 .section--light { --bg: #f9f8f3; --bg-2: #ffffff; --bg-3: #f0efe9; --text: #1e2330; --text-2: #4a5160; --text-muted: #7c8598; --text-muted-2: #9aa1b0; --accent: #274b8f; /* bleu de marque, remplace le lime/vert */ --line: rgba(30, 35, 48, .10); --line-2: rgba(30, 35, 48, .16); --font-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } /* Fond de page clair (le body du site est noir par défaut). */ body.tvl-da2[data-page="blog"], body.tvl-da2[data-page="blog-article"] { background: var(--da2-card); color: var(--text); } /* 2. ZONES D'ARTICLE — plus de noir : fonds clairs alternés, bord à bord ---- Les 2 zones « sombres » (corps, clôture) n'avaient pas .section--light et prenaient le fond noir du body. On leur donne un fond clair explicite. */ body.tvl-da2 .article__zone { background: transparent; } body.tvl-da2 .article__zone--hero { background: var(--da2-card); } /* crème */ body.tvl-da2 .article__zone--body { background: #ffffff; } /* blanc */ body.tvl-da2 .article__zone--faq { background: var(--da2-card); } /* crème */ body.tvl-da2 .article__zone--closing { background: var(--da2-field-bg); } /* gris clair */ /* 3. POLICES / TITRES — casse & tracking DA (plus de mono en capitales) ----- */ body.tvl-da2 .blog-crumb, body.tvl-da2 .article__meta, body.tvl-da2 .blog-post__tag, body.tvl-da2 .blog-post__go, body.tvl-da2 .blog-post__meta, body.tvl-da2 .blog-cat__go, body.tvl-da2 .blog-cat__tag, body.tvl-da2 .blog-cat__num, body.tvl-da2 .blog-related > h2, body.tvl-da2 .article__author-box .rr, body.tvl-da2 .article__tip::before, body.tvl-da2 .article__faq .faq-q .num, body.tvl-da2 .section__num { letter-spacing: .02em; } body.tvl-da2 .blog-title, body.tvl-da2 .blog-cat-hero h1, body.tvl-da2 .article__title, body.tvl-da2 .blog-cat__title, body.tvl-da2 .blog-post__title { letter-spacing: -.02em; } /* Le chiffre romain « — » des eyebrows reste discret (pas d'accent criard). */ body.tvl-da2 .section__num .roman { color: var(--da2-blue); } /* Mot accentué des grands titres en bleu (comme « Valentin » sur a-propos2). */ body.tvl-da2 .blog-title em, body.tvl-da2 .blog-cat-hero h1 em, body.tvl-da2 .article__title em { color: var(--da2-blue); font-style: normal; } /* 4. LEAD d'article : sur fond blanc, garde une encre franche. */ body.tvl-da2 .article__lead { color: var(--text); font-weight: 500; } /* 5. BLOCKQUOTE : la police serif italique est partie (Jakarta) → on enlève l'italique et on renforce le poids pour garder l'emphase. */ body.tvl-da2 .article__body blockquote { font-style: normal; font-weight: 600; color: var(--text); } /* 6. BOUTON CTA — bleu plein (PAS de jaune), texte blanc. Le .btn du site est en lime/mono capitales ; on le repeint DA, scopé aux CTA du blog. */ body.tvl-da2 .article__cta .btn--primary, body.tvl-da2 .blog-empty .btn--primary { background: var(--da2-blue); border-color: var(--da2-blue); color: #fff; font-family: var(--da2-font); font-weight: 700; letter-spacing: .3px; text-transform: none; border-radius: 100px; } body.tvl-da2 .article__cta .btn--primary:hover, body.tvl-da2 .blog-empty .btn--primary:hover { background: var(--da2-blue-dark); border-color: var(--da2-blue-dark); } body.tvl-da2 .article__cta .btn--primary .btn__txt, body.tvl-da2 .article__cta .btn--primary .arrow, body.tvl-da2 .blog-empty .btn--primary .btn__txt, body.tvl-da2 .blog-empty .btn--primary .arrow { color: #fff; } /* Badge « articles à venir » : lisible sur bleu. */ body.tvl-da2 .blog-empty__badge { color: #fff; background: var(--da2-blue); } /* 7. Encart astuce / auteur / crosslink : bord d'accent bleu (via --accent), rien à faire de plus (les tokens font le travail). On soigne juste la couverture d'article : ombre douce DA plutôt que bord sec. */ body.tvl-da2 .article__cover img { box-shadow: 0 24px 60px -34px rgba(30, 35, 48, .35); } /* 8. Focus visible cohérent DA */ body.tvl-da2 .blog a:focus-visible, body.tvl-da2 .article a:focus-visible, body.tvl-da2 .article button:focus-visible { outline: 2px solid var(--da2-blue); outline-offset: 3px; border-radius: 6px; } /* ============================================================================ BARRE CTA MOBILE FIXE + correctif bannière cookies (repris d'index2/a-propos2) Ici (et non en