/* ============================================================ Wari Media — feuille de style du thème (design validé 2026-06-19) Police : Inter (UI/titres) + Roboto Mono (chiffres marché) ============================================================ */ :root{ --green:#4FB029;--green-d:#3E8C1C;--green-soft:#EAF7E4; --black:#141414;--text:#3a3f47;--muted:#8b9099;--line:#E8EAED;--bg:#fff; --pos:#1A9E4B;--neg:#E03131;--gold:#C9A227;--panel:#F7F8FA;--navy:#122941 } *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--black);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} .mono{font-family:'Roboto Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .up{color:var(--pos)}.dn{color:var(--neg)} .skip{position:absolute;left:-9999px} /* ---- En-tête ---- */ .site-head{background:#fff;position:sticky;top:0;z-index:30;border-top:4px solid var(--green);border-bottom:1px solid var(--line)} .top{display:flex;align-items:center;justify-content:space-between;height:74px} .logo img{height:58px} .tools{display:flex;align-items:center;gap:16px} .iconbtn{background:none;border:0;cursor:pointer;font-size:18px;color:var(--black);display:flex;align-items:center;text-decoration:none} .sub{background:var(--green);color:#fff;border:0;padding:11px 22px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;display:inline-block} .sub:hover{background:var(--green-d)} /* ---- Navigation ---- */ .nav{border-bottom:1px solid var(--line);background:#fff} .nav .in{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;height:50px;align-items:center} .nav .in::-webkit-scrollbar{display:none} .nav a{font-size:15px;font-weight:600;color:#4a4f57;white-space:nowrap;height:50px;display:flex;align-items:center;border-bottom:3px solid transparent} .nav a:hover{color:var(--black)} .nav a.active{color:var(--black);border-bottom-color:var(--green)} /* ---- Bandeau indices ---- */ .market{background:var(--panel);border-bottom:1px solid var(--line)} .market .idx{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;padding:11px 0;font-size:13px} .market .idx::-webkit-scrollbar{display:none} .market .idx .it{white-space:nowrap} .market .idx .k{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.03em} .market .idx .v{font-weight:600;color:var(--black);margin-left:6px} .submarket{border-bottom:1px solid var(--line);background:#fff} .submarket .row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:12px 0} .submarket .col{font-size:13px} .submarket .h{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:7px;text-transform:uppercase} .submarket .li{display:flex;justify-content:space-between;padding:2px 0} .submarket .li .t{font-weight:600;color:var(--black)} .market .datel{text-align:right;color:var(--muted);font-size:11px;font-weight:500;padding:6px 0} /* Page Bourse : on masque le bandeau indices + hausses/baisses (redondant avec le graphe). Ghost ajoute la classe « tag-bourse » au sur /tag/bourse/ — sélecteur fiable, sans dépendre de :has(). On garde :has() en filet pour tout autre contexte « .bourse ». */ body.tag-bourse .market,body.tag-bourse .submarket, body:has(.bourse) .market,body:has(.bourse) .submarket{display:none} /* ---- Zone vedette (accueil) ---- */ .zone{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;margin:24px 0 10px} .feature .media{position:relative;border-radius:14px;overflow:hidden;height:360px;background:#eef0f3 center/cover no-repeat;display:block} .feature .media.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.45))} .live{position:absolute;top:14px;left:14px;z-index:2;background:#E0162B;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;padding:5px 11px;border-radius:999px;display:flex;align-items:center;gap:6px} .live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} .feature .pill{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px;margin:16px 0 0} .feature .ago{color:var(--muted);font-size:13px;font-weight:600;margin-left:8px} .feature h2{font-size:30px;font-weight:800;line-height:1.18;letter-spacing:-.01em;margin-top:10px} .feature p{color:var(--text);font-size:16px;margin-top:8px;max-width:92%} .rail{display:flex;flex-direction:column} .rail .it{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)} .rail .it:first-child{border-top:0;padding-top:0} .rail .thumb{flex:0 0 92px;height:68px;border-radius:8px;background:#eef0f3 center/cover no-repeat} .rail .kick{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--green);text-transform:uppercase} .rail h3{font-size:16px;font-weight:700;line-height:1.28;margin-top:4px} /* ---- Sections & cartes ---- */ .sec{margin:38px 0} .sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;border-bottom:2px solid var(--black);padding-bottom:8px} .sec-h h2{font-size:20px;font-weight:800;letter-spacing:-.01em} .sec-h a{font-size:13px;color:var(--green-d);font-weight:700} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card .ph{height:170px;border-radius:12px;background:#eef0f3 center/cover no-repeat;margin-bottom:12px;display:block} .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:5px;margin-bottom:8px} .tag.a{background:var(--black)}.tag.d{background:var(--green)}.tag.t{background:var(--gold);color:var(--black)} .card h3{font-size:18px;font-weight:700;line-height:1.28;margin-bottom:5px} .card p{font-size:14px;color:var(--text)} .card .meta{color:var(--muted);font-size:12px;font-weight:600;margin-top:9px} /* ---- Page Article ---- */ .post{max-width:760px;margin:36px auto} .post .ptag{margin-bottom:14px} .post h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-.01em} .post .pmeta{color:var(--muted);font-size:14px;font-weight:600;margin:14px 0 18px;display:flex;align-items:center;gap:10px} .post .pmeta img{width:34px;height:34px;border-radius:50%} /* Signature Wari Media (auto sur chaque article) — point vert clignotant */ .signature{margin-left:auto;font-weight:800;letter-spacing:-.01em;color:var(--navy);font-size:15px;display:inline-flex;align-items:center} .signature .dot{color:var(--green);margin:0 1px;display:inline-block;animation:sigblink 1.3s ease-in-out infinite} @keyframes sigblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.82)}} @media(prefers-reduced-motion:reduce){.signature .dot{animation:none}} .post .feat{border-radius:14px;margin:18px 0;width:100%} .post-content{font-size:18px;line-height:1.75;color:#23262b} .post-content p{margin:0 0 1.1em} .post-content h2{font-size:26px;font-weight:800;margin:1.6em 0 .5em} .post-content h3{font-size:21px;font-weight:700;margin:1.4em 0 .4em} .post-content a{color:var(--green-d);text-decoration:underline} .post-content img{border-radius:10px;margin:1.2em 0} .post-content blockquote{border-left:4px solid var(--green);padding:4px 0 4px 18px;margin:1.2em 0;color:#444;font-style:italic} .post-content ul,.post-content ol{margin:0 0 1.1em 1.3em} .share{display:flex;gap:10px;margin:26px 0} .share a{font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--black)} .share a.wa{background:#25D366;color:#fff;border-color:#25D366} /* ---- Archives (rubrique / auteur) ---- */ .archive-head{padding:30px 0 6px;border-bottom:1px solid var(--line);margin-bottom:8px} .archive-head h1{font-size:30px;font-weight:800} .archive-head .sub{background:none;color:var(--text);padding:0;font-weight:400;font-size:16px;margin-top:6px} .author-head{display:flex;gap:18px;align-items:center} .author-head img{width:74px;height:74px;border-radius:50%} /* ---- Newsletter ---- */ .nl{background:var(--green-soft);border:1px solid #d6ecd0;border-radius:16px;padding:34px;text-align:center;margin:44px 0} .nl h2{font-size:24px;font-weight:800;margin-bottom:6px} .nl p{color:var(--text);margin-bottom:18px} .nl form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center} .nl input{flex:1;min-width:210px;padding:13px 16px;border:1px solid #cfe0c8;border-radius:999px;font-family:inherit;font-size:15px} .btn{background:var(--green);color:#fff;border:0;padding:13px 24px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px} .btn:hover{background:var(--green-d)} /* ---- Pagination ---- */ .pagination{display:flex;justify-content:center;gap:14px;margin:34px 0;font-weight:700} .pagination a{padding:10px 18px;border:1px solid var(--line);border-radius:999px} .pagination a:hover{border-color:var(--green);color:var(--green-d)} /* ---- Pied de page ---- */ .site-foot{background:#0a0a0c;color:#9aa3af;padding:40px 0;font-size:14px;margin-top:20px} .site-foot .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px} .site-foot .flogo{font-weight:800;font-size:22px;color:#fff} .site-foot .flogo .dot{color:var(--green)} .site-foot a{color:#9aa3af;display:block;padding:3px 0} .site-foot a:hover{color:#fff} .site-foot .fh{color:#fff;font-weight:700;font-size:13px;margin-bottom:8px;letter-spacing:.03em} /* ---- Responsive ---- */ /* ---- Cartes Koenig (éditeur Ghost) ---- */ .kg-card{margin:1.5em 0} .post-content .kg-width-wide{width:min(1080px,92vw);margin-left:50%;transform:translateX(-50%)} .post-content .kg-width-full{width:100vw;margin-left:50%;transform:translateX(-50%);border-radius:0} .post-content .kg-width-full img{border-radius:0} /* ---- Page Bourse (graphe TOP/FLOP) ---- */ .bourse{padding:14px 22px 10px} /* Titre « Bourse » masqué visuellement (redondant avec la nav) mais conservé pour le SEO/lecteurs d'écran */ .bourse-head h1{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .bourse-head .lead{color:var(--text);font-size:16px;margin-top:0} .bourse-card{border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;margin:22px 0 30px;box-shadow:0 1px 2px rgba(20,20,20,.04)} /* Téléscripteur boursier (bandeau défilant des valeurs) */ .ticker{overflow:hidden;white-space:nowrap;border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:14px} .ticker-track{display:inline-flex;align-items:stretch;animation:tkscroll 160s linear infinite;will-change:transform} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-right:1px solid var(--line);font-family:'Roboto Mono',monospace;font-size:13px;color:var(--text);flex:0 0 auto} .tk:hover{background:#fff} .tk b{font-weight:800;color:var(--navy)} .tk-p{color:var(--black);font-weight:600} .tk-c{font-weight:700;font-size:12px} .tk-v{color:var(--muted);font-size:11px} .tk-load{padding:10px 16px;color:var(--muted);font-size:13px} /* Bandeau scindé : hausses (gauche) / baisses (droite) sur la même ligne. */ .ticker-split{display:flex} .ticker-split .ticker-half{flex:1 1 50%;min-width:0;overflow:hidden} .ticker-split .ticker-half+.ticker-half{border-left:1px solid var(--line)} .ticker-track.is-rtl{animation-direction:reverse} /* défile vers la droite */ .ticker-mid{flex:0 0 auto;display:flex;align-items:center;gap:1px;padding:0 7px;background:var(--panel);border-left:1px solid var(--line);border-right:1px solid var(--line)} .ticker-mid .tk-ar{font-size:11px;line-height:1} .ticker-mid .tk-ar.l{color:var(--neg)} /* baisses -> gauche */ .ticker-mid .tk-ar.r{color:var(--pos)} /* hausses -> droite */ @media(prefers-reduced-motion:reduce){.ticker{overflow-x:auto}.ticker-split .ticker-half{overflow-x:auto}.ticker-track,.sig-track{animation:none}} /* Indicateurs du jour : signaux (RSI + momentum) et heatmap des secteurs. */ /* grid-template-columns:minmax(0,1fr) : la colonne remplit la largeur disponible ET autorise les blocs enfants à rétrécir (min 0). Sans ça, un bloc se dimensionne sur son contenu (max-content) et déborde à droite sur petit écran (cas des longs noms de secteurs). */ .indics{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:10px auto 30px} .indic-h{font-size:18px;font-weight:800;color:var(--black);margin:0 0 13px;display:flex;align-items:center;gap:8px} .indic-spark{color:var(--green)} .indic-when{font-weight:600;font-size:13px;color:var(--muted)} /* « — séance du 24 juin 2026 » à côté du titre */ .indic-foot{font-size:11.5px;color:var(--muted);margin:10px 0 0} .signaux{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .signaux .sig-track{display:contents} /* desktop : les cartes remplissent la grille ; mobile : piste défilante */ .sig-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;transition:box-shadow .15s,border-color .15s} .sig-card:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(0,0,0,.06)} .sig-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin-bottom:9px} .sig-badge.strong{background:var(--green-soft);color:var(--green-d)} .sig-badge.rebond{background:#FFF4E6;color:#B25D00} .sig-top{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;min-width:0} .sig-sym{font-weight:800;font-size:15px;color:var(--navy)} .sig-name{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sig-why{font-size:12.5px;color:var(--text);line-height:1.5} .sig-why .up,.sig-why .dn{font-weight:700} /* Secteurs = « carte des marchés » en barres divergentes + accordéon. Une LIGNE par secteur : nom | barre (droite=hausse vert, gauche=baisse rouge) | variation | ▾. Clic = déplie la liste des valeurs du secteur (chacune cliquable vers son analyse). Grille en minmax(0,…) → la ligne rétrécit toujours sous la largeur de l'écran, donc AUCUN débordement possible (desktop ou mobile). */ .secteurs{display:flex;flex-direction:column;gap:2px} /* val + caret en `auto` (largeur du contenu) → la variation ne s'écrase JAMAIS ; c'est le nom (minmax(0,…) + ellipsis) qui se tronque sous la pression de l'espace. */ .sec-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(56px,2fr) auto auto;align-items:center;gap:10px;padding:4px 6px;border-radius:8px;cursor:pointer} .sec-row:hover{background:var(--panel)} .sec-name{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .sec-track{position:relative;height:14px;min-width:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#d7dde3 calc(50% - .5px),#d7dde3 calc(50% + .5px),transparent calc(50% + .5px))} .sec-bar{position:absolute;top:2px;height:10px;border-radius:3px} .sec-bar.pos{background:var(--pos)} .sec-bar.neg{background:var(--neg)} .sec-val{font-size:12.5px;font-weight:800;text-align:right;white-space:nowrap} .sec-val.pos{color:var(--pos)} .sec-val.neg{color:var(--neg)} .sec-val.flat{color:var(--muted)} .sec-caret{color:var(--muted);font-size:13px;justify-self:end;transition:transform .18s,color .18s} .sec-row.open .sec-caret{transform:rotate(180deg);color:var(--green-d)} .sec-panel{display:none;padding:2px 6px 10px} .sec-row.open + .sec-panel{display:block} .sec-stock{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:7px;text-decoration:none;color:var(--text)} .sec-stock:hover{background:var(--panel)} .sec-stk-sym{font-weight:800;font-size:12px;color:var(--navy);flex:0 0 auto} .sec-stk-nm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto} .sec-stk-chg{font-size:12px;font-weight:800;flex:0 0 auto} .sec-stk-chg.pos{color:var(--pos)} .sec-stk-chg.neg{color:var(--neg)} .sec-stk-chg.flat{color:var(--muted)} /* Indice « glissez » : attire l'œil sur les zones à défilement horizontal (mobile). */ @media(max-width:720px){ /* MOBILE — bandeau + signaux : AUCUNE animation. L'animation `transform` du marquee crée une couche composite qui, sur mobile, échappe au clip et ÉLARGIT le document ~1 s après le chargement (« premier affichage bon, puis ça saute et déborde à droite »). On supprime donc l'animation (animation:none!important bat le style inline posé par le JS) et on passe en DÉFILEMENT NATIF au doigt. Sans couche composite, le débordement est IMPOSSIBLE. html,body overflow-x:clip = filet. */ html,body{overflow-x:clip;max-width:100%} /* Bandeau + signaux : défilement AUTO (marquee) à la MÊME vitesse (le JS pose une durée calculée depuis un px/s commun). Confinement anti-débordement : overflow:hidden + contain:paint empêchent la couche composite animée d'élargir le document (+ html,body overflow-x:clip en filet). */ .ticker,.signaux{max-width:100%;overflow:hidden;contain:paint} .ticker-track,.signaux .sig-track{display:inline-flex;width:max-content;will-change:transform} .ticker{height:auto} /* En-tête compact : logo, icônes et bouton « S'abonner » réduits pour ne plus saturer la barre. */ .top{height:56px} .logo img{height:39px} .tools{gap:9px} .iconbtn{font-size:17px} .sub{padding:6px 12px;font-size:11.5px;font-weight:700} .indics{gap:16px} /* Signaux : cartes de largeur fixe, défilement NATIF au doigt (plus d'animation). */ .signaux{display:block;height:auto} .signaux .sig-track{gap:10px} .sig-card{flex:0 0 250px;max-width:84vw;padding:11px 13px} /* Secteurs (mobile) : mêmes barres divergentes, légèrement compactées. La grille minmax(0,…) garantit déjà l'absence de débordement ; on resserre juste colonnes et police. */ .sec-row{grid-template-columns:minmax(0,1fr) minmax(40px,1.4fr) auto auto;gap:8px;padding:4px 4px} .sec-name{font-size:12px} .sec-val{font-size:12px} } .bourse-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px} .seg-b{border:0;background:none;cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--muted);padding:7px 18px;border-radius:999px} .seg-b.is-on{background:var(--green);color:#fff} .periods{display:flex;gap:4px;flex-wrap:wrap} .per-b{border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-weight:700;font-size:12px;font-family:'Roboto Mono',monospace;padding:7px 11px;border-radius:8px;min-width:38px} .per-b:hover{border-color:var(--green)} .per-b.is-on{background:var(--navy);color:#fff;border-color:var(--navy)} /* 2e barre d'outils : secteur, TOP/FLOP x, afficher/masquer */ .bourse-ctrls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)} .ctl{display:flex;align-items:center;gap:8px} .ctl-l{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase} .ctl-sel{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer} .ctl-sel:hover{border-color:var(--green)} .ctl-right{margin-left:auto} .ctl[hidden]{display:none} .count-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px} .cnt-b{border:0;background:none;cursor:pointer;font-weight:700;font-size:12px;font-family:'Roboto Mono',monospace;color:var(--muted);padding:6px 13px;border-radius:999px} .cnt-b.is-on{background:var(--navy);color:#fff} .lnk-b{border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-weight:700;font-size:12px;padding:7px 12px;border-radius:8px} .lnk-b:hover{border-color:var(--green);color:var(--black)} /* Légende : bouton loupe « analyser » + valeur isolée */ .legend .lz{border:0;background:none;cursor:pointer;color:var(--muted);padding:0 2px;display:inline-flex;align-items:center;line-height:0} .legend .lz:hover{color:var(--green)} .legend li.is-solo .ls{color:var(--green)} .legend li.is-solo{font-weight:800} /* Encadré d'analyse d'une valeur isolée */ .solo-panel{border:1px solid var(--line);border-left:3px solid var(--green);border-radius:12px;background:var(--panel);padding:14px 16px;margin:16px 2px 4px} .solo-panel[hidden]{display:none} .solo-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .solo-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .solo-dot{width:13px;height:13px;border-radius:4px;flex:0 0 auto} .solo-sym{font-weight:800;color:var(--black);font-size:16px} .solo-name{color:var(--text);font-size:14px} .solo-sector{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px} .solo-back{border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-weight:700;font-size:12px;padding:7px 12px;border-radius:8px} .solo-back:hover{border-color:var(--green);color:var(--black)} .solo-figs{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:12px} .solo-figs .fig{display:flex;flex-direction:column;gap:2px} .solo-figs .fig-l{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase} .solo-figs .fig-v{font-weight:700;color:var(--black);font-size:15px} .solo-figs .fig-v.up{color:var(--pos)}.solo-figs .fig-v.dn{color:var(--neg)} .senti-positive{color:var(--pos)}.senti-negative{color:var(--neg)}.senti-neutral{color:var(--gold)} .solo-article{display:inline-block;margin-top:12px;color:var(--green-d);font-weight:700;font-size:13px;text-decoration:none} .solo-article[hidden]{display:none} .solo-article:hover{text-decoration:underline} .bourse-meta{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 4px} .bourse-meta .b-title{font-weight:800;font-size:15px;color:var(--black)} .bourse-meta .b-range{color:var(--muted);font-size:12px} .chart-wrap{position:relative;height:360px;margin-top:6px} .chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px} .chart-empty[hidden]{display:none} .legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 2px 4px;padding:0} .legend.many{max-height:152px;overflow:auto;gap:5px 18px;padding:10px 2px;border:1px solid var(--line);border-radius:10px;background:var(--panel)} .legend.many li{font-size:12px} .legend li{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;user-select:none} .legend li.off{opacity:.4} .legend li.off .lp{text-decoration:line-through} .legend .dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .legend .ls{font-weight:800;color:var(--black)} .legend .ln{color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .legend .lp{font-weight:700} .bourse-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px} .bourse-prose{margin:10px auto 40px} /* ---- Page Analyse experte (valeur) ---- */ .analyse{padding:8px 22px 28px} .ana-back{display:inline-block;color:var(--green-d);font-weight:700;font-size:12px;margin-bottom:1px} .ana-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--black);padding-bottom:4px} .ana-id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .ana-id h1{font-size:18px;letter-spacing:-.01em;line-height:1.05} .ana-sub{display:flex;gap:10px;align-items:center;margin-top:0} .ana-sym{font-weight:800;color:var(--navy);background:var(--panel);border:1px solid var(--line);padding:2px 9px;border-radius:6px;font-size:13px} .ana-sector{color:var(--muted);font-size:13px;font-weight:600} .ana-price{display:flex;align-items:baseline;gap:8px} .ana-cours{font-size:19px;font-weight:800;color:var(--black);display:block} .ana-chg{font-size:13px;font-weight:700} /* Stats compactes : 8 tuiles denses sur une grille serrée (gain de hauteur). */ .ana-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:4px 0} .ana-stat{border:1px solid var(--line);border-radius:7px;padding:3px 9px;background:var(--panel);display:flex;flex-direction:column} .ana-stat .k{font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ana-stat .v{font-size:13px;font-weight:800;margin-top:0;color:var(--black)} .ana-card{border:1px solid var(--line);border-radius:16px;padding:10px 12px 8px;margin-bottom:14px} .ana-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px} .ana-ind{display:flex;gap:6px;flex-wrap:wrap} .ind-b{border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-weight:700;font-size:12px;padding:7px 11px;border-radius:8px} .ind-b:hover{border-color:var(--green)} .ind-b.is-on{background:var(--green);color:#fff;border-color:var(--green)} .ana-chart{width:100%} #anaPrice{height:380px} .ana-sub{height:150px;margin-top:6px;border-top:1px solid var(--line)} .ana-pane-label{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin:10px 0 2px} .ana-msg{background:#FFF4E6;border:1px solid #F0D0A0;color:#8a5300;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:600;margin:10px 0} /* Curseur de la dernière séance : ouverture & veille aux extrémités, clôture en curseur */ .ana-range{margin:14px 0 8px;padding:36px 4px 2px} .rg-row{display:flex;align-items:center;gap:16px} .rg-end{flex:0 0 auto;text-align:center;display:flex;flex-direction:column;line-height:1.25} .rg-end-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .rg-end-val{font-size:15px;font-weight:700;color:var(--black)} .rg-bar{position:relative;flex:1;height:10px;border-radius:999px;background:var(--line)} .rg-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:var(--green)} .rg-marker{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3);transform:translate(-50%,-50%);z-index:2} .ana-range.dn .rg-fill,.ana-range.dn .rg-marker,.ana-range.dn .rg-badge{background:var(--neg)} .ana-range.dn .rg-badge::after{border-top-color:var(--neg)} .rg-badge{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:3px 11px;border-radius:7px;white-space:nowrap;text-align:center;line-height:1.15} .rg-badge::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--green)} .rg-badge i{display:block;font-size:9px;font-weight:700;text-transform:uppercase;font-style:normal;opacity:.9} .rg-badge b{display:block;font-size:13px;font-weight:700;font-family:'Roboto Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} .rg-cap{text-align:center;font-size:12px;color:var(--muted);margin-top:10px} .ana-expert{border:1px solid #cbe8bd;background:var(--green-soft);border-radius:16px;padding:20px 22px;margin:12px 0 16px} .ana-expert-h{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:10px} .ana-expert-h .sig-badge{font-weight:800;color:var(--navy)} .ana-expert-h .sig-badge .dot{color:var(--green);animation:sigblink 1.3s ease-in-out infinite} .ana-expert-body{font-size:15.5px;line-height:1.7;color:#23262b} .ana-expert-body p{margin:0 0 .8em} .ana-expert-foot{font-size:12px;color:var(--muted);margin-top:10px} /* Lecture des signaux : checklist déterministe (tendance / momentum / oscillateurs / volume) */ .ana-signals{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 18px} .ana-signals-h{font-weight:800;font-size:16px;margin-bottom:13px} .ana-signals-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px} .sgroup-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:7px} .sline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text);padding:3px 0;line-height:1.45} .sline .sdot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 auto;background:#b9bec6} .sline.up .sdot{background:var(--pos)} .sline.dn .sdot{background:var(--neg)} .sline.warn .sdot{background:var(--gold)} .ana-signals-foot{font-size:11.5px;color:var(--muted);margin:14px 0 0} @media(max-width:680px){.ana-signals-grid{grid-template-columns:1fr}} .ana-related{margin-bottom:30px} /* Barre d'outils du terminal graphique */ .ana-toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px;margin-bottom:10px} .tb-grp{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .tb-b{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 7px;border:1px solid var(--line);background:#fff;color:#5a616b;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700} .tb-grp .tb-b{border:0;border-right:1px solid var(--line);border-radius:0} .tb-grp .tb-b:last-child{border-right:0} .tb-b svg{width:16px;height:16px;display:block} .tb-b:hover{border-color:var(--green);color:var(--green-d)} .tb-b.is-on{background:var(--green);border-color:var(--green);color:#fff} .tb-wide{padding:0 11px} .tb-sep{width:1px;height:22px;background:var(--line);margin:0 3px} .tb-sel{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:12px;font-weight:600;color:var(--text);background:#fff;max-width:230px} .ana-toolbar [data-help]{margin-left:auto;border-radius:50%;width:32px;font-size:14px} /* Menus déroulants de la barre d'outils (type de graphe, tracé) */ .tb-dd{position:relative} .tb-caret{width:9px!important;height:6px!important;opacity:.7;margin-left:1px} .tb-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(20,20,20,.12);padding:5px;min-width:210px} .tb-menu[hidden]{display:none} .tb-mi{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;text-align:left;font-size:13px;font-weight:600;color:var(--text);padding:8px 9px;border-radius:7px} .tb-mi svg{width:16px;height:16px;color:#5a616b;flex:0 0 auto} .tb-mi:hover{background:var(--panel);color:var(--black)} .tb-mi.is-on{background:var(--green-soft);color:var(--green-d)} .tb-mi.is-on svg{color:var(--green-d)} .ana-ohlc{font-size:12px;color:var(--text);margin:2px 2px 8px;min-height:18px} .ana-ohlc .oh-t{font-weight:800;color:var(--navy);margin-right:8px} .ana-ohlc b{color:var(--black)} .ana-pop{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;box-shadow:0 6px 20px rgba(20,20,20,.08);display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px} .ana-pop[hidden]{display:none} .ana-pop label{display:flex;gap:6px;align-items:center;font-weight:600} .ana-pop input[type=date]{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit} .ana-pop .sw{cursor:pointer} .btn-mini{background:var(--green);color:#fff;border:0;border-radius:8px;padding:7px 14px;font-weight:700;font-size:12px;cursor:pointer} .ana-help{display:block;line-height:1.55} .ana-help ul{margin:8px 0 8px 18px}.ana-help li{margin:3px 0} .ana-help em{color:var(--muted);font-size:12px} .ana-card:fullscreen{background:#fff;padding:16px;overflow:auto} .ana-card:fullscreen #anaPrice{height:calc(100vh - 230px)} @media(max-width:880px){ .ana-stats{grid-template-columns:repeat(2,1fr)} .zone{grid-template-columns:1fr} .feature .media{height:240px} .feature h2{font-size:24px} .grid{grid-template-columns:1fr} .post h1{font-size:28px} .submarket .col:last-child{display:none} .post-content .kg-width-wide{width:100%;margin-left:0;transform:none} .bourse-bar{flex-direction:column;align-items:stretch} .bourse-ctrls{gap:12px} .ctl-right{margin-left:0;width:100%} .legend .ln{display:none} .chart-wrap{height:300px} }