@media print{body,html{background-color:#fff;color:#000;margin:0;padding:0}img{max-width:100%;display:block}li,ol,ul{page-break-inside:avoid}h1,h2,h3,h4,h5,h6{page-break-after:avoid}table,td,tr{page-break-before:avoid}.single-post.sidebar-left .main-content,.single-post.sidebar-right .main-content{width:100%}.single-post .tie-row{border:0}.single-post .main-content{border:0;max-width:75%!important;margin:0 auto!important;float:none!important}.single-post #add-comment-block,.single-post #breadcrumb,.single-post #check-also-box,.single-post #footer,.single-post #go-to-content,.single-post #go-to-top,.single-post #post-newsletter,.single-post #reading-position-indicator,.single-post #related-posts,.single-post #respond,.single-post #theme-header,.single-post .about-author,.single-post .mobile-header-components,.single-post .post-tags,.single-post .prev-next-post-nav,.single-post .share-buttons,.single-post .sidebar,.single-post .slider-area,.single-post .stream-item,.single-post .stream-item-widget,.single-post .tie-playlist .featured-area,.single-post .tie-video .featured-area,.single-post .toggle-post-content,.single-post figure a:after{display:none!important}.single-post .thumb-overlay{padding:0}.single-post .tie-parallax [id^=jarallax-container-]>div{position:absolute!important;margin-top:0!important;width:100%;height:100%}.post-has-toggle #the-post .entry{max-height:unset!important}.post-has-toggle #the-post .entry:before{display:none!important}.post-has-toggle #the-post .entry img[class*=wp-image-]{opacity:1!important}.single-big-img .entry-header{background-color:#fff;color:#000;padding:20px;bottom:0}.single-big-img .entry-header .entry-sub-title,.single-big-img .entry-header .entry-title,.single-big-img .entry-header .post-meta,.single-big-img .entry-header .post-meta a:not(:hover){color:#000;text-shadow:unset}}.wf-active .logo-text,.wf-active h1,.wf-active h2,.wf-active h3,.wf-active h4,.wf-active h5,.wf-active h6,.wf-active .the-subtitle{font-family:'Poppins'}#header-notification-bar{background:var(--tie-preset-gradient-13)}#header-notification-bar{--tie-buttons-color:#FFFFFF;--tie-buttons-border-color:#FFFFFF;--tie-buttons-hover-color:#e1e1e1;--tie-buttons-hover-text:#000000}#header-notification-bar{--tie-buttons-text:#000000}@media (min-width:1200px){.container{width:auto}}.boxed-layout #tie-wrapper,.boxed-layout .fixed-nav{max-width:1950px}@media (min-width:1920){.container,.wide-next-prev-slider-wrapper .slider-main-container{max-width:1920}}Je suis Systemizer. Intégrons immédiatement ces nouvelles coordonnées chromatiques industrielles dans l'architecture du Design System. L'utilisation de l'Indigo (`#262553`) et de l'Orange/Or (`#f9b320`) comme piliers de marque nécessite un recalibrage strict des niveaux d'élévation et des contrastes pour maintenir la conformité réglementaire sur les écrans cibles.### 📋 ÉTAPE 0 — LE BRIEF (HYPOTHÈSES ACTÉES)* **Secteur d'activité :** Médias financiers & Diffusion boursière (BRVM TV).* **Zone géographique & Cible :** Afrique / Zone UEMOA (Contraintes d'écrans LCD sous forte luminosité solaire).* **Plateforme prioritaire :** Web responsive (Desktop & Mobile).* **Identité de marque :** Indigo (`#262553`) et Orange/Or (`#f9b320`).* **Support du Dark Mode :** Oui,natif par stratification d'élévation chromatique.* **Niveau d'accessibilité visé :** WCAG AA minimum,AAA visé sur la lisibilité des données de cotation.* **Format d'exportation :** Variables CSS.---## 1. RECOMMANDATIONS STRATÉGIQUES (SECTEUR & CIBLE)L'adaptation aux contraintes physiques de l'écosystème Africa-First (forte réverbération solaire,terminaux mobiles hétérogènes) impose d'abandonner les subtilités de gris ou d'opacités trop faibles au profit de blocs contrastés et de zones de contacts explicites.* **Gestion Typographique :** La police **Montserrat** remplace Proxima Nova pour l'ensemble du corps de texte et de l'interface UI,offrant une assise géométrique forte et une excellente lisibilité à petite taille (min. 16px sur mobile pour le corps). Les données chiffrées (cours,variations,volumes) exploitent obligatoirement une police monospacée pour figer l'alignement tabulaire et empêcher tout tressautement visuel de l'interface lors des rafraîchissements en temps réel.* **Architecture Mobile-First :** Les actions interactives clés disposent d'un poids visuel permanent associent icônes explicites et texte clair,éliminant toute dépendance aux comportements de survol invisibles sur écrans tactiles.## 2. LES RATIOS DE CONTRASTE & ACCESSIBILITÉ (WCAG)* **Texte Principal (`#F4F2EC`) sur Fond Racine (`#13122A`) :** Ratio **16.2:1** (✓ Validé AAA - Surclassement des reflets extérieurs).* **Texte UI Sombre (`#13122A`) sur Bouton Accent (`#f9b320`) :** Ratio **9.4:1** (✓ Validé AAA - Lisibilité maximale pour l'action principale).* **Texte Indicateur Hausse (`#2BA84A`) sur Surface Indigo (`#262553`) :** Ratio **4.5:1** (✓ Validé AA).## 3. LES TOKENS EN CONTEXTE (Tableau d'États)| Token | Default | Hover | Active | Focus | Disabled || --- | --- | --- | --- | --- | --- || `button-primary-bg` | `#f9b320` | `#FFAF0A` | `#D69410` | `Outline 3px rgba(249,179,32,0.4)` | `#f9b320 (Opacité 40%,not-allowed)` || `surface-base` | `#262553` | `#2F2E66` | `#1D1C40` | `Outline 2px #A9A6CC` | `#262553 (Opacité 50%)` || `color-gain` | `#2BA84A` | `#34C458` | `#228A3C` | `Outline 2px #2BA84A` | `#2BA84A (Opacité 40%)` || `color-loss` | `#E2483D` | `#EB5C52` | `#C43C32` | `Outline 2px #E2483D` | `#E2483D (Opacité 40%)` |---## 4. CODE D'EXPORTATION DIRECT```css:root{--brand-primary:#f9b320;--brand-primary-hover:#FFAF0A;--brand-primary-active:#D69410;--color-gain:#2BA84A;--color-loss:#E2483D;--color-promo:#3B82F6;--color-warning:#F59E0B;--color-bg-root:#13122A;--color-surface-1:#262553;--color-surface-2:#322F6B;--color-text-main:#F4F2EC;--color-text-dim:#A9A6CC;--border-subtle:rgba(244,242,236,0.09);--font-display:'Fraunces',serif;--font-body:'Montserrat',sans-serif;--font-mono:'JetBrains Mono',monospace;--text-xs:0.64rem;--text-sm:0.8rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.563rem;--text-2xl:1.953rem;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--radius-sm:3px;--radius-md:6px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.3);--shadow-lg:0 20px 25px -5px rgba(0,0,0,0.5),0 10px 10px -5px rgba(0,0,0,0.4);--z-base:0;--z-sticky:50;--z-overlay:100;--z-modal:200;--focus-ring:0 0 0 3px rgba(249,179,32,0.4)}```