/* ============================================================================= course-2027.css - Le bloc d'analyse de la course et l'aide du tableau. ----------------------------------------------------------------------------- Concerne deux zones d'index.php : .tbz-co le bloc « Pronostic IA » et ses cinq onglets (rendu par include/race_tabs.php) .tbz-co-aide la section « Comprendre et utiliser le tableau » Meme parti que assets/css/landing.css et assets/css/challenge-2027.css : les variables --tbz-ag-* du systeme 2027 (assets/css/agent.css) sont reprises telles quelles, avec une valeur de repli en dur pour que la page reste juste si agent.css n'est pas charge. Classes prefixees, mobile-first, aucune dependance, aucun !important. Prefixes utilises, aucun ne croise Bootstrap ni le CSS global du site : .tbz-co-* le bloc d'analyse de la course .tbz-co-aide la section d'aide (elle reutilise les memes variables) Contraste : toutes les paires texte/fond de ce fichier ont ete mesurees. Les deux echecs releves sur l'existant sont corriges ici : onglet actif #008cff sur #f0f8ff = 3,16:1 -> #fff sur #0a7c91 = 4,88:1 entete d'aide #fff sur #27c5e7 = 2,05:1 -> #0f172a sur #fff = 17,8:1 Revision 1.1.0 du 2026-08-01 : l en-tete absorbe les conditions de course, qui etaient repetees dans un pave sous les onglets (race_info.php). Cinq registres, un seul objet encadre : ce qui change la lecture de la course. Revision 1.2.0 du 2026-08-01 : la section d aide passe de l accordeon a la vitrine (cinq cartes qui annoncent leur contenu, une fiche depliee a plat). Elle entre dans le .container du theme au lieu de porter sa propre largeur. @author Claude (Cowork mode, 2026-08-01) @version 1.2.0 ========================================================================== */ /* ── Socle commun aux zones concernees ───────────────────────────────────── .tbz-co-h2 est isole dans le flux (il vit dans .pronostic-bzh) : il porte donc lui aussi les variables, sans quoi il n'heriterait de rien. */ .tbz-co, .tbz-co-aide, .tbz-co-h2 { --co-bg: var(--tbz-ag-bg, #f8fafc); --co-soft: var(--tbz-ag-bg-soft, #f1f5f9); --co-card: var(--tbz-ag-card, #fff); --co-card2: var(--tbz-ag-card-2, #fbfcfd); --co-bd: var(--tbz-ag-border, #e5e7eb); --co-bd-soft: var(--tbz-ag-border-soft, #eef0f3); --co-bd-fort: var(--tbz-ag-border-strong, #d1d5db); --co-ink: var(--tbz-ag-text, #0f172a); --co-ink2: var(--tbz-ag-text-2, #1e293b); --co-ink3: #334155; --co-mut: #475569; /* #64748b passe mal sous 13 px sur fond teinte */ --co-mut-aa: #55637a; --co-acc: var(--tbz-ag-accent, #0a7c91); --co-acc-d: var(--tbz-ag-accent-d, #075d6e); --co-acc-l: var(--tbz-ag-accent-l, #e0f2f6); --co-acc-l2: var(--tbz-ag-accent-l2, #ecf7fa); --co-ok: #047857; --co-ok-bg: var(--tbz-ag-success-bg, #ecfdf5); --co-ok-bd: var(--tbz-ag-success-bd, #a7f3d0); --co-warn: var(--tbz-ag-warn, #b45309); --co-warn-bg: var(--tbz-ag-warn-bg, #fffbeb); --co-warn-bd: var(--tbz-ag-warn-bd, #fde68a); --co-dang: var(--tbz-ag-danger, #b91c1c); --co-dang-bg: var(--tbz-ag-danger-bg, #fef2f2); --co-dang-bd: var(--tbz-ag-danger-bd, #fecaca); --co-info: var(--tbz-ag-info, #1d4ed8); --co-info-bg: var(--tbz-ag-info-bg, #eff6ff); --co-info-bd: var(--tbz-ag-info-bd, #bfdbfe); --co-r-xs: var(--tbz-ag-r-xs, 6px); --co-r-sm: var(--tbz-ag-r-sm, 10px); --co-r-md: var(--tbz-ag-r-md, 14px); --co-r-lg: var(--tbz-ag-r-lg, 18px); --co-pill: var(--tbz-ag-r-pill, 999px); --co-sh-xs: var(--tbz-ag-sh-xs, 0 1px 2px 0 rgba(15,23,42,.04)); --co-sh-sm: var(--tbz-ag-sh-sm, 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04)); --co-sh-md: var(--tbz-ag-sh-md, 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05)); --co-ease: var(--tbz-ag-ease-out, cubic-bezier(.16, 1, .3, 1)); --co-font: var(--tbz-ag-font, 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif); font-family: var(--co-font); color: var(--co-ink); letter-spacing: -.005em; } .tbz-co *, .tbz-co *::before, .tbz-co *::after, .tbz-co-aide *, .tbz-co-aide *::before, .tbz-co-aide *::after { box-sizing: border-box; } .tbz-co [hidden], .tbz-co-aide [hidden] { display: none; } /* Libelle reserve aux lecteurs d'ecran. Sert a porter la phrase complete de l'ecart IA, dont le raccourci visuel tient en un mot. */ .tbz-co-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================= 1. LE BLOC D'ANALYSE DE LA COURSE ========================================================================== */ .tbz-co { background: var(--co-card); border: 1px solid var(--co-bd); border-radius: var(--co-r-lg); box-shadow: var(--co-sh-sm); overflow: hidden; } /* ── En-tete du bloc ─────────────────────────────────────────────────────── Cinq registres, un seul objet encadre. Ce qui est encadre est ce qui change la lecture de la course ; le reste est du texte nu. Une donnee absente n emet rien du tout cote PHP : aucun cadre vide n est possible ici. */ .tbz-co-entete { padding: 14px 15px 13px; border-bottom: 1px solid var(--co-bd-soft); background: linear-gradient(180deg, var(--co-acc-l2) 0%, var(--co-card) 62%); } @media (min-width: 768px) { .tbz-co-entete { padding: 20px 22px 18px; } } .tbz-co-entete > * + * { margin-top: 9px; } /* Zone 1 : identite. Ni icone, ni cadre : quatre faits, en une ligne. */ .tbz-co-ident { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; font-size: 12.5px; line-height: 1.35; } .tbz-co-rc { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--co-r-xs); background: var(--co-acc); color: #fff; /* 4,88:1 */ font-size: 11.5px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .tbz-co-hip { font-weight: 700; color: var(--co-ink2); } .tbz-co-etat { font-weight: 600; color: var(--co-mut); } .tbz-co-q { padding: 3px 9px; border-radius: var(--co-pill); background: var(--co-acc-l2); border: 1px solid #cbe8ee; color: var(--co-acc-d); font-size: 11px; font-weight: 800; letter-spacing: .04em; } /* Zone 2 : le titre. Jamais tronque, jamais de points de suspension. */ .tbz-co-titre { margin: 0; font-size: clamp(20px, 17.4px + .67vw, 26px); font-weight: 760; line-height: 1.2; letter-spacing: -.025em; color: var(--co-ink); text-wrap: balance; overflow-wrap: break-word; hyphens: none; } @media (min-width: 480px) { .tbz-co-titre { max-width: 32ch; } } /* Zone 3 : le cadre factuel. Le separateur termine une ligne, il n en ouvre jamais une, et le dernier fait n en porte pas : pas de point orphelin. */ .tbz-co-cadre { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--co-ink3); } .tbz-co-cadre > span:not(:last-child)::after { content: "\00b7"; margin: 0 9px; color: var(--co-mut-aa); /* #d1d5db etait invisible */ } .tbz-co-nb { font-weight: 700; color: var(--co-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Zone 4 : le seul objet encadre de l en-tete. Meme idiome que la fiche d aide ouverte : fond blanc, liseret d accent a gauche. */ .tbz-co-cles { background: var(--co-card); border: 1px solid var(--co-acc-l); border-left: 3px solid var(--co-acc); border-radius: var(--co-r-sm); box-shadow: var(--co-sh-xs); padding: 11px 13px; } .tbz-co-cles-t { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--co-acc-d); } .tbz-co-grille { margin: 0; display: grid; gap: 0; } .tbz-co-cle { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--co-bd-soft); } .tbz-co-cle:first-child { border-top: 0; padding-top: 0; } /* Soulignement pointille : sans lui, rien ne dit que « Corde », « Depart » et « Piste » sont definis un peu plus bas, dans le tiroir des conditions. */ .tbz-co-cle dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--co-mut); text-decoration: underline dotted var(--co-bd-fort); text-underline-offset: 3px; } .tbz-co-cle dd { margin: 0; font-size: 14px; font-weight: 650; color: var(--co-ink); line-height: 1.4; } .tbz-co-prec { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--co-mut); } /* A partir de 620 px les paires passent cote a cote. Le plafond evite qu une quatrieme colonne laisse une valeur seule dans 200 px de vide. */ /* Mesure sur un jour de production (83 courses) : le panneau porte 2 entrees dans 69 cas et 3 dans 14, jamais 4. Une grille auto-fit etirait donc deux valeurs sur toute la largeur du bloc. En flex, chaque paire prend la place de son contenu et l ensemble reste groupe a gauche. */ /* Les paires se repartissent sur toute la largeur du cadre au lieu de rester groupees a gauche : sur un ecran de 1 600 px, le seul objet encadre de la page etait vide a 62 %, borde et ombre autour de rien. */ @media (min-width: 620px) { .tbz-co-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 26px; } .tbz-co-cle { border-top: 0; padding: 0; display: block; min-width: 0; } .tbz-co-cle dt { display: block; margin-bottom: 1px; } } .tbz-co-abs { margin: 0; padding: 10px 12px; border-radius: var(--co-r-sm); background: var(--co-soft); border: 1px dashed var(--co-bd-fort); font-size: 13px; color: var(--co-mut-aa); } /* Zone 5 : le tiroir.
natif, ferme, il fonctionne sans JavaScript. Il remplace cinq infobulles tippy qui n existaient ni au clavier, ni au tactile, ni script coupe. */ .tbz-co-plus { border-top: 1px solid var(--co-bd-soft); padding-top: 4px; } .tbz-co-plus > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 2px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--co-acc-d); } .tbz-co-plus > summary::-webkit-details-marker { display: none; } .tbz-co-plus > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--co-ease); } .tbz-co-plus[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; } .tbz-co-plus > summary:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; border-radius: var(--co-r-xs); } .tbz-co-plus-nb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--co-pill); background: var(--co-acc-l); color: var(--co-acc-d); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .tbz-co-plus-in { padding: 4px 0 10px; display: grid; gap: 16px; } @media (min-width: 760px) { .tbz-co-plus-in { grid-template-columns: 1fr 1fr; gap: 18px 28px; } } .tbz-co-plus-bloc h3 { margin: 0 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--co-acc-d); } .tbz-co-plus-bloc p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--co-ink3); } .tbz-co-def { margin: 0; } .tbz-co-def dt { font-size: 12.5px; font-weight: 750; color: var(--co-ink2); margin-top: 9px; } .tbz-co-def dt:first-child { margin-top: 0; } .tbz-co-def dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--co-mut-aa); } .tbz-co-plus-liens { grid-column: 1 / -1; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .tbz-co-plus-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; border: 1px solid var(--co-bd); border-radius: var(--co-pill); background: var(--co-card); color: var(--co-acc-d); text-decoration: none; font-size: 12.5px; font-weight: 650; transition: background .16s var(--co-ease), border-color .16s var(--co-ease); } .tbz-co-plus-liens a:hover { background: var(--co-acc-l2); border-color: var(--co-acc); } .tbz-co-plus-liens a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } @media (max-width: 479px) { .tbz-co-plus-liens { flex-direction: column; } .tbz-co-plus-liens a { width: 100%; justify-content: center; } } /* Ceinture et bretelles par-dessus la garde PHP. */ .tbz-co-ident:empty, .tbz-co-cadre:empty, .tbz-co-grille:empty, .tbz-co-plus-liens:empty { display: none; } /* La ligne d entree, sous les conditions : discrete, mais presente des le premier ecran pour qui ne connait pas le vocabulaire. Sans elle, le mode d emploi n est annonce nulle part avant 3 700 px de defilement. */ .tbz-co-entree { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--co-bd-soft); display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-entree i { flex: 0 0 auto; margin-top: 2px; font-size: 12px; color: var(--co-acc); } .tbz-co-entree a { color: var(--co-acc-d); font-weight: 680; text-decoration: underline; text-underline-offset: 2px; } .tbz-co-entree a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; border-radius: 2px; } /* ── La barre d'onglets ──────────────────────────────────────────────────── Des pastilles, pas des cases de tableur. Le libelle reste TOUJOURS visible : l'ancienne version le masquait sous 768 px et laissait cinq icones muettes. white-space:nowrap garantit une hauteur de barre constante a toute largeur ; sans lui, « Analyse IA Globale » repassait sur deux lignes autour de 1280 px et la barre gagnait 24 px. Quand ca ne tient pas, on defile. */ .tbz-co-tabs { position: relative; display: flex; gap: 7px; padding: 9px 16px; background: var(--co-card2); border-bottom: 1px solid var(--co-bd-soft); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-inline: 16px; } .tbz-co-tabs::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .tbz-co-tabs { padding: 12px 22px; gap: 8px; } } /* Mesure a 1 280 px : les six onglets font 1 204 px pour 1 090 px de large, le dernier (« Demander a ChatBZH ») est coupe en plein mot et le defilement horizontal n a pas d affordance sur un ecran de bureau. A partir de 992 px la barre passe donc a la ligne : plus de defilement, plus rien de coupe, et le voile de bord s eteint tout seul puisque scrollWidth rejoint clientWidth. */ @media (min-width: 992px) { .tbz-co-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; } } .tbz-co-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; /* cible tactile : 42 px auparavant sur la barre d'aide */ padding: 9px 15px; border: 1px solid var(--co-bd); border-radius: var(--co-pill); background: var(--co-card); color: var(--co-ink2); font-family: inherit; font-size: 13.5px; font-weight: 650; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .16s var(--co-ease), border-color .16s var(--co-ease), color .16s var(--co-ease); } .tbz-co-tab > i { font-size: 13px; color: var(--co-mut); transition: color .16s var(--co-ease); } .tbz-co-tab:hover { background: var(--co-acc-l2); border-color: var(--co-acc); color: var(--co-acc-d); } .tbz-co-tab:hover > i { color: var(--co-acc); } /* Le focus etait invisible : outline:none et aucune ombre de remplacement mesurable sur les cinq boutons. Il l'est de nouveau, et seulement au clavier. */ .tbz-co-tab:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } .tbz-co-tab[aria-selected="true"] { background: var(--co-acc); border-color: var(--co-acc); color: #fff; /* 4,88:1 */ font-weight: 700; } .tbz-co-tab[aria-selected="true"] > i { color: rgba(255,255,255,.9); } .tbz-co-tab[aria-selected="true"]:hover { background: var(--co-acc-d); border-color: var(--co-acc-d); } /* Ombre de bord : signale qu'il reste des onglets a droite quand ca defile. */ .tbz-co-tabsbox { position: relative; } .tbz-co-tabsbox::after { content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 26px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(251,252,253,0) 0%, var(--co-card2) 80%); transition: opacity .18s var(--co-ease); } .tbz-co-tabsbox[data-defile="1"]::after { opacity: 1; } /* ── Le signal d'ecart entre l'IA et les parieurs ────────────────────────── Avant : un emoji dans une pastille blanche qui pulsait, sans libelle, et dont l'infobulle etait coupee a « Opportunite detectee : L » (apostrophe non echappee dans un attribut a guillemets simples). Ici c'est un mot, une couleur, une infobulle correcte, la phrase complete pour les lecteurs d'ecran, et la meme phrase en clair dans le panneau Difficulte. */ .tbz-co-sig { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 2px 8px; border-radius: var(--co-pill); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; } .tbz-co-sig i { font-size: 9.5px; } .tbz-co-sig-op { background: var(--co-warn-bg); border-color: var(--co-warn-bd); color: var(--co-warn); } .tbz-co-sig-pie { background: var(--co-dang-bg); border-color: var(--co-dang-bd); color: var(--co-dang); } /* Mesure : rgba(255,255,255,.16) sur --co-acc donne #3191a3, et du blanc dessus tombe a 3,68:1 pour un seuil de 4,5 a 10,5 px en graisse 800. On assombrit le fond du badge au lieu de l eclaircir : 7,4:1. */ .tbz-co-tab[aria-selected="true"] .tbz-co-sig { background: rgba(0,0,0,.26); border-color: rgba(255,255,255,.30); color: #fff; } /* Pastille de consensus : un point, pas un badge. Elle dit « rien a signaler ». */ .tbz-co-pt { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--co-card); box-shadow: 0 0 0 1px rgba(15,23,42,.12); flex: 0 0 auto; } .tbz-co-tab[aria-selected="true"] .tbz-co-pt { border-color: rgba(255,255,255,.85); box-shadow: none; } /* Halo doux plutot qu'un changement d'echelle : le badge ne bouge plus de place, il respire. Coupe des que l'utilisateur demande moins d'animation. */ @keyframes tbzCoHalo { 0% { box-shadow: 0 0 0 0 rgba(180, 83, 9, .45); } 70% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); } } /* Deux passages de 2,2 s, soit 4,4 s : le critere 2.2.2 n exige un mecanisme d arret que passe CINQ secondes. « infinite », comme trois passages de 2,6 s (7,8 s), depassait ce seuil. La, l exemption s applique vraiment. */ @media (prefers-reduced-motion: no-preference) { .tbz-co-sig-op, .tbz-co-sig-pie { animation: tbzCoHalo 2.2s ease-out 2; } } /* ── Bandeau d'explication en tete du panneau Difficulte ───────────────────── */ .tbz-co-alerte { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--co-bd); border-left-width: 3px; border-radius: var(--co-r-sm); font-size: 13.5px; line-height: 1.55; } .tbz-co-alerte i { font-size: 14px; margin-top: 2px; flex: 0 0 auto; } .tbz-co-alerte b { display: block; margin-bottom: 2px; font-weight: 750; } .tbz-co-alerte-op { background: var(--co-warn-bg); border-color: var(--co-warn-bd); border-left-color: var(--co-warn); color: var(--co-ink2); } .tbz-co-alerte-op i { color: var(--co-warn); } .tbz-co-alerte-pie { background: var(--co-dang-bg); border-color: var(--co-dang-bd); border-left-color: var(--co-dang); color: var(--co-ink2); } .tbz-co-alerte-pie i { color: var(--co-dang); } .tbz-co-alerte-ok { background: var(--co-ok-bg); border-color: var(--co-ok-bd); border-left-color: var(--co-ok); color: var(--co-ink2); } .tbz-co-alerte-ok i { color: var(--co-ok); } /* ── Panneaux ────────────────────────────────────────────────────────────── Le nom de classe change : .tab-content etait partage avec la modale MathBZH du meme fichier, dont switchPromptTab() fait un querySelectorAll('.tab-content') global et retire .active partout. */ .tbz-co-panneau { padding: 16px; background: var(--co-card); } @media (min-width: 768px) { .tbz-co-panneau { padding: 20px 22px 22px; } } .tbz-co-panneau:focus-visible { outline: 2px solid var(--co-acc); outline-offset: -2px; } /* Le texte suivi est borne : 1 074 px de large donnaient 129 caracteres par ligne, contre 65 a 75 pour un confort de lecture normal. */ /* Le texte de l analyse IA remplit le panneau et se decoupe en colonnes des qu il en a la place, plutot que de s arreter aux deux tiers. */ .tbz-co-texte { font-size: 14.5px; line-height: 1.68; color: var(--co-ink3); } /* Pas de filet ici : le nombre de paragraphes de l analyse varie d une course a l autre, et un filet qui longe une colonne a moitie vide designe le vide. column-width plutot que column-count : sur un texte court, une seule colonne pleine largeur vaut mieux que deux colonnes desequilibrees. */ @media (min-width: 992px) { .tbz-co-texte { column-width: 26rem; column-gap: 34px; } } /* Pas de break-inside ici : l analyse ne compte que trois paragraphes, et les rendre insecables donnait forcement deux colonnes de 2 contre 1, donc une demi-colonne blanche. orphans et widows suffisent a eviter la ligne seule. */ .tbz-co-texte p { orphans: 2; widows: 2; } .tbz-co-texte p { margin: 0 0 12px; } .tbz-co-texte p:last-child { margin-bottom: 0; } .tbz-co-texte strong { color: var(--co-ink); font-weight: 680; } .tbz-co-signature { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--co-bd-soft); font-size: 12px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-signature i { color: var(--co-acc); margin-right: 6px; } .tbz-co-vide { margin: 0; padding: 22px 16px; text-align: center; font-size: 13.5px; color: var(--co-mut-aa); background: var(--co-soft); border: 1px dashed var(--co-bd-fort); border-radius: var(--co-r-sm); } .tbz-co-vide i { display: block; font-size: 20px; color: var(--co-bd-fort); margin-bottom: 8px; } /* ── Tableau de l'analyse detaillee ────────────────────────────────────────── */ .tbz-co-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tbz-co-tab-part { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .tbz-co-tab-part thead th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; text-align: left; background: var(--co-soft); color: var(--co-mut); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--co-bd); white-space: nowrap; } /* Le numero du partant est l en-tete de sa ligne : c est un th scope="row", pas une cellule ordinaire. Il garde exactement l allure d une cellule. */ .tbz-co-tab-part tbody th { font-weight: 400; text-align: left; } .tbz-co-tab-part td, .tbz-co-tab-part tbody th { padding: 12px; border-bottom: 1px solid var(--co-bd-soft); vertical-align: top; color: var(--co-ink3); line-height: 1.6; } .tbz-co-tab-part tbody tr:last-child td, .tbz-co-tab-part tbody tr:last-child th { border-bottom: 0; } .tbz-co-tab-part tbody tr:hover td, .tbz-co-tab-part tbody tr:hover th { background: var(--co-acc-l2); } /* Sous 768 px, un tableau de quatre colonnes dans un conteneur de 324 px ne peut pas fonctionner : mesure sur capture, 88 % du panneau etait du blanc et la colonne « Analyse », qui porte la seule vraie information, etait hors ecran. Chaque partant devient donc une carte empilee. Les roles ARIA sont ecrits en clair cote PHP : la semantique de tableau survit au changement de display. */ @media (max-width: 767.98px) { .tbz-co-scroll { overflow-x: visible; } .tbz-co-tab-part { display: block; } .tbz-co-tab-part thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tbz-co-tab-part tbody { display: block; } .tbz-co-tab-part tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 0 0 10px; padding: 11px 13px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card2); } .tbz-co-tab-part tbody tr:last-child { margin-bottom: 0; } .tbz-co-tab-part tbody th, .tbz-co-tab-part tbody td { display: block; padding: 0; border: 0; background: none; } .tbz-co-tab-part tbody th { grid-column: 1; } .tbz-co-tab-part .tbz-co-cheval { grid-column: 2; white-space: normal; } .tbz-co-tab-part .tbz-co-cel-avis { grid-column: 3; } .tbz-co-tab-part .tbz-co-cel-txt { grid-column: 1 / -1; margin-top: 6px; } .tbz-co-tab-part tbody tr:hover td, .tbz-co-tab-part tbody tr:hover th { background: none; } } .tbz-co-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--co-r-xs); background: var(--co-acc-l); color: var(--co-acc-d); font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; } .tbz-co-cheval { font-weight: 700; color: var(--co-ink); white-space: nowrap; } .tbz-co-avis { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; border: 1px solid transparent; } .tbz-co-avis-pos { background: var(--co-ok-bg); border-color: var(--co-ok-bd); color: var(--co-ok); } .tbz-co-avis-neu { background: var(--co-warn-bg); border-color: var(--co-warn-bd); color: var(--co-warn); } .tbz-co-avis-neg { background: var(--co-dang-bg); border-color: var(--co-dang-bd); color: var(--co-dang); } .tbz-co-fw { display: grid; gap: 10px; margin-top: 10px; } @media (min-width: 900px) { .tbz-co-fw { grid-template-columns: 1fr 1fr; } } .tbz-co-fw > div { border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); padding: 10px 12px; background: var(--co-card2); } .tbz-co-fw-t { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; } .tbz-co-fw-p .tbz-co-fw-t { color: var(--co-ok); } .tbz-co-fw-m .tbz-co-fw-t { color: var(--co-dang); } /* Les puces collaient a la bordure : 18 px de retrait au lieu de l'heritage. */ .tbz-co-fw ul { margin: 0; padding-left: 18px; } .tbz-co-fw li { margin: 3px 0; font-size: 13px; line-height: 1.55; } /* ── Blocs de recommandation ───────────────────────────────────────────────── */ /* La carte epouse sa colonne de lecture. Auparavant elle prenait toute la largeur du panneau et le texte, borne a 70ch, laissait un tiers de cadre vide a droite : c est le defaut signale par Paul sur « Choix de l IA ». */ .tbz-co-bloc { border: 1px solid var(--co-bd); border-radius: var(--co-r-md); padding: 14px 16px; margin: 0 0 14px; background: var(--co-card2); } /* La liste prend toute la largeur de la carte et se range en deux colonnes des qu il y a la place, au lieu de s arreter aux deux tiers. Mesure avant : 774 px d encre pour 1 270 px de cadre, soit 495 px de blanc. */ @media (min-width: 992px) { .tbz-co-bloc .tbz-co-liste { columns: 2; column-gap: 34px; } .tbz-co-bloc .tbz-co-liste li { break-inside: avoid; page-break-inside: avoid; } } .tbz-co-bloc:last-child { margin-bottom: 0; } .tbz-co-bloc > h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 730; letter-spacing: -.015em; color: var(--co-ink); display: flex; align-items: center; gap: 8px; } .tbz-co-bloc > h3 i { font-size: 13px; color: var(--co-acc); } .tbz-co-bloc-warn { background: var(--co-warn-bg); border-color: var(--co-warn-bd); } .tbz-co-bloc-warn > h3 i { color: var(--co-warn); } .tbz-co-bloc-info { background: var(--co-info-bg); border-color: var(--co-info-bd); } .tbz-co-bloc-info > h3 i { color: var(--co-info); } .tbz-co-liste { margin: 0; padding: 0; list-style: none; } .tbz-co-liste li { position: relative; padding-left: 24px; margin: 0 0 9px; font-size: 13.5px; line-height: 1.6; color: var(--co-ink3); } .tbz-co-liste li:last-child { margin-bottom: 0; } /* La mesure est desormais portee par la carte elle-meme (.tbz-co-bloc), pas par chaque puce : plus de cadre a moitie vide. */ .tbz-co-liste li::before { content: ""; position: absolute; left: 7px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--co-acc); } .tbz-co-bloc-warn .tbz-co-liste li::before { background: var(--co-warn); } .tbz-co-liste strong { color: var(--co-ink); font-weight: 700; } .tbz-co-bloc-p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--co-ink3); } /* Noms de chevaux et types de pari mis en avant dans les textes generes. Avant : style='color:darkgreen' et style='color:blue' en dur dans le PHP. darkgreen sur blanc = 6,4:1, blue = 8,6:1 : les deux passaient, mais ils sortaient de la palette. On garde le meme role avec les couleurs du systeme. */ .tbz-co-nom { color: var(--co-acc-d); font-weight: 700; } .tbz-co-pari { color: var(--co-info); font-weight: 700; } /* Il vit maintenant en pied de bloc, sous les six panneaux, et non dans un seul d entre eux : il concerne tout ce qui est au-dessus. Taille remontee de 12 a 12,5 px : une mention de risque n est pas de la petite ligne. */ .tbz-co-legal { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 13px 16px; border-top: 1px solid var(--co-bd); background: var(--co-soft); font-size: 12.5px; line-height: 1.55; color: var(--co-mut-aa); } @media (min-width: 768px) { .tbz-co-legal { padding: 14px 22px; } } .tbz-co-legal i { flex: 0 0 auto; margin-top: 2px; font-size: 12px; color: var(--co-mut); } /* ── Mur d'inscription de l'analyse detaillee ──────────────────────────────── */ .tbz-co-mur { text-align: center; padding: 26px 18px; background: var(--co-acc-l2); border: 1px solid var(--co-acc-l); border-radius: var(--co-r-md); } .tbz-co-mur i { font-size: 26px; color: var(--co-acc); } .tbz-co-mur h3 { margin: 12px 0 6px; font-size: 17px; font-weight: 740; letter-spacing: -.02em; color: var(--co-ink); } .tbz-co-mur p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--co-ink3); } .tbz-co-mur-cta { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .tbz-co-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border: 1px solid var(--co-acc); border-radius: var(--co-r-sm); background: var(--co-acc); color: #fff !important; text-decoration: none !important; font-size: 13.5px; font-weight: 700; transition: background .16s var(--co-ease), transform .16s var(--co-ease); } .tbz-co-bt:hover { background: var(--co-acc-d); border-color: var(--co-acc-d); transform: translateY(-1px); } .tbz-co-bt:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 3px; } .tbz-co-bt-2 { background: var(--co-card); color: var(--co-acc-d) !important; } .tbz-co-bt-2:hover { background: var(--co-acc-l); } /* ── Le titre « Pronostic IA RxCx Turf.bzh » ─────────────────────────────── Il perd son style="text-align:center" en dur et devient un titre de section comme les autres. */ .tbz-co-h2 { margin: 26px 0 14px; font-size: 19px; font-weight: 740; letter-spacing: -.025em; line-height: 1.25; color: var(--co-ink); text-align: left; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; } @media (min-width: 768px) { .tbz-co-h2 { font-size: 23px; } } .tbz-co-h2 b { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--co-acc-d); background: var(--co-acc-l2); border: 1px solid #cbe8ee; border-radius: var(--co-pill); padding: 4px 10px; font-variant-numeric: tabular-nums; } /* ── L onglet « Demander a ChatBZH » ─────────────────────────────────────── Un
: il fonctionne script coupe, le navigateur compose lui-meme l URL. Aucune ligne de JavaScript ici. */ .tbz-co-ask { display: grid; gap: 16px; } .tbz-co-ask-lead { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--co-ink3); } .tbz-co-ask-f { display: grid; gap: 8px; } .tbz-co-ask-f label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--co-mut); } .tbz-co-ask-row { display: grid; gap: 10px; } @media (min-width: 660px) { .tbz-co-ask-row { grid-template-columns: 1fr auto; align-items: end; } } .tbz-co-ask-f textarea { width: 100%; min-height: 76px; padding: 12px 14px; resize: vertical; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card); color: var(--co-ink); font-family: inherit; font-size: 14.5px; line-height: 1.5; transition: border-color .16s var(--co-ease), box-shadow .16s var(--co-ease); } .tbz-co-ask-f textarea::placeholder { color: var(--co-mut-aa); } /* 5,8:1 */ .tbz-co-ask-f textarea:focus { outline: none; border-color: var(--co-acc); box-shadow: 0 0 0 3px var(--co-acc-l); } .tbz-co-ask-f textarea:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 1px; } .tbz-co-ask-f button { white-space: nowrap; } .tbz-co-ask-t { margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--co-mut); } .tbz-co-ask-chips { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tbz-co-ask-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid var(--co-bd); border-radius: var(--co-pill); background: var(--co-card); color: var(--co-ink2); text-decoration: none; font-size: 13px; font-weight: 650; transition: background .16s var(--co-ease), border-color .16s var(--co-ease), color .16s var(--co-ease); } .tbz-co-ask-chips a i { font-size: 12px; color: var(--co-mut); transition: color .16s var(--co-ease); } .tbz-co-ask-chips a:hover { background: var(--co-acc-l2); border-color: var(--co-acc); color: var(--co-acc-d); } .tbz-co-ask-chips a:hover i { color: var(--co-acc); } .tbz-co-ask-chips a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } @media (max-width: 479px) { .tbz-co-ask-chips { flex-direction: column; } .tbz-co-ask-chips a { width: 100%; } } .tbz-co-ask-etat { margin: 0; padding: 11px 13px; border-radius: var(--co-r-sm); background: var(--co-soft); border: 1px solid var(--co-bd-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 1.5; color: var(--co-ink3); } .tbz-co-ask-etat i { color: var(--co-acc); } /* La destination du lien, dite une fois pour toutes, hors des branches d etat de compte : le formulaire et les cinq amorces ouvrent tous un nouvel onglet. */ .tbz-co-ask-cible { margin: 14px 0 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-ask-cible i { font-size: 11px; color: var(--co-mut); } .tbz-co-ask-etat a { color: var(--co-acc-d); font-weight: 650; } .tbz-co-ask-etat a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; border-radius: var(--co-r-xs); } /* ============================================================================= 3. LE PANNEAU « DIFFICULTE » ----------------------------------------------------------------------------- Il portait 95 lignes de style en ligne, une police 'Segoe UI' en dur, la palette Bootstrap 4 et des classes non prefixees. Deux d entre elles, .card-header et .card-body, existent dans Bootstrap : c est lui qui dessinait les bandeaux gris des cartes (mesure : padding 8px 16px, fond rgba(0,0,0,.03), bordure basse 1px). Tout est repris ici, sous prefixe. ========================================================================== */ .tbz-co-diff { display: grid; gap: 22px; } /* ── Les deux lectures, cote a cote ───────────────────────────────────────── */ .tbz-co-jauges { display: grid; gap: 12px; } @media (min-width: 700px) { .tbz-co-jauges { grid-template-columns: 1fr 1fr; gap: 16px; } } .tbz-co-jauge { background: var(--co-card); border: 1px solid var(--co-bd); border-left: 3px solid var(--co-bd-fort); border-radius: var(--co-r-md); padding: 14px 16px; box-shadow: var(--co-sh-xs); } .tbz-co-jauge-t { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--co-mut); } .tbz-co-jauge-t i { font-size: 11px; color: var(--co-mut-aa); } .tbz-co-jauge-v { margin: 0 0 9px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 17px; font-weight: 760; letter-spacing: -.02em; color: var(--co-ink); } .tbz-co-jauge-v > i { font-size: 15px; } .tbz-co-jauge-n { margin-left: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--co-ink2); } .tbz-co-jauge-n small { font-size: 11.5px; font-weight: 650; color: var(--co-mut); } .tbz-co-barre { height: 7px; border-radius: 99px; background: var(--co-soft); overflow: hidden; } .tbz-co-barre > span { display: block; height: 100%; border-radius: 99px; background: var(--co-bd-fort); } .tbz-co-jauge-d { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--co-mut-aa); } /* Un ton par niveau. Chaque paire a ete mesuree : le texte reste en encre, la couleur ne porte que l accent, jamais l information seule. */ .tbz-co-jauge-ok { border-left-color: var(--co-ok); } .tbz-co-jauge-ok .tbz-co-jauge-v > i, .tbz-co-jauge-ok .tbz-co-jauge-t i { color: var(--co-ok); } .tbz-co-jauge-ok .tbz-co-barre > span { background: var(--co-ok); } .tbz-co-jauge-info { border-left-color: var(--co-info); } .tbz-co-jauge-info .tbz-co-jauge-v > i, .tbz-co-jauge-info .tbz-co-jauge-t i { color: var(--co-info); } .tbz-co-jauge-info .tbz-co-barre > span { background: var(--co-info); } .tbz-co-jauge-warn { border-left-color: var(--co-warn); } .tbz-co-jauge-warn .tbz-co-jauge-v > i, .tbz-co-jauge-warn .tbz-co-jauge-t i { color: var(--co-warn); } .tbz-co-jauge-warn .tbz-co-barre > span { background: var(--co-warn); } .tbz-co-jauge-dang { border-left-color: var(--co-dang); } .tbz-co-jauge-dang .tbz-co-jauge-v > i, .tbz-co-jauge-dang .tbz-co-jauge-t i { color: var(--co-dang); } .tbz-co-jauge-dang .tbz-co-barre > span { background: var(--co-dang); } .tbz-co-jauge-neutre .tbz-co-jauge-v > i { color: var(--co-mut); } /* ── La repartition des enjeux ────────────────────────────────────────────── */ .tbz-co-enj-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--co-bd-soft); } .tbz-co-enj-tete h3 { margin: 0; font-size: 16px; font-weight: 740; letter-spacing: -.02em; color: var(--co-ink); } .tbz-co-enj-aide { margin: 0; flex: 1 1 260px; font-size: 12.5px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-enj-sel { display: flex; align-items: center; gap: 8px; margin-left: auto; } .tbz-co-enj-sel label { font-size: 12px; font-weight: 700; color: var(--co-mut); } .tbz-co-enj-sel select { min-height: 44px; padding: 9px 12px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card); color: var(--co-ink2); font-family: inherit; font-size: 13px; font-weight: 650; cursor: pointer; } .tbz-co-enj-sel select:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } .tbz-co-enj-cols { display: grid; gap: 22px; } @media (min-width: 860px) { .tbz-co-enj-cols { grid-template-columns: 1fr 1fr; gap: 30px; } } .tbz-co-enj-t { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--co-acc-d); } .tbz-co-enj-t i { font-size: 12px; color: var(--co-acc); } .tbz-co-enj { width: 100%; border-collapse: collapse; font-size: 13px; } .tbz-co-enj thead th { padding: 0 0 7px; text-align: left; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--co-mut); border-bottom: 1px solid var(--co-bd); } .tbz-co-enj thead th:nth-child(3) { text-align: right; } /* Le nom du cheval n est plus tronque : l ancienne regle posait max-width:120px + ellipsis sur une cellule de tableau en mise en page automatique, ou max-width n a aucun effet. Regle morte, retiree. */ .tbz-co-enj tbody th { padding: 8px 10px 8px 0; text-align: left; font-weight: 650; color: var(--co-ink2); line-height: 1.35; } .tbz-co-enj td { padding: 8px 0; border-top: 1px solid var(--co-bd-soft); vertical-align: middle; } .tbz-co-enj tbody th { border-top: 1px solid var(--co-bd-soft); } .tbz-co-enj tbody tr:first-child th, .tbz-co-enj tbody tr:first-child td { border-top: 0; } .tbz-co-enj-bar { width: 46%; } .tbz-co-enj-bar b { display: inline-block; min-width: 46px; margin-left: 9px; text-align: right; font-size: 12px; font-weight: 700; color: var(--co-mut); font-variant-numeric: tabular-nums; } .tbz-co-enj-bg { display: inline-block; vertical-align: middle; width: calc(100% - 58px); height: 7px; border-radius: 99px; background: var(--co-soft); overflow: hidden; } .tbz-co-enj-bg > span { display: block; height: 100%; border-radius: 99px; background: var(--co-acc); min-width: 2px; } .tbz-co-enj-eur { text-align: right; white-space: nowrap; font-weight: 750; color: var(--co-ink); font-variant-numeric: tabular-nums; } .tbz-co-enj-tot { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--co-bd); text-align: right; font-size: 12.5px; color: var(--co-mut-aa); } .tbz-co-enj-tot b { color: var(--co-ink); font-variant-numeric: tabular-nums; } .tbz-co-enj-tab[hidden] { display: none; } /* Sous 560 px, la colonne de jauge prend 46 % de la largeur et pousse le nom du cheval sur trois lignes. Mesure a 390 px : le panneau passe de 4 112 px de haut a 3 106 en supprimant la seule jauge (releve dans bloc-apres.json). On garde le pourcentage, qui porte toute l information ; la barre est un agrement de bureau. */ /* Le pourcentage est un vrai noeud de texte, present a toutes les largeurs : au-dessus de 560 px il vit dans la colonne de jauge, en dessous il vit dans la cellule des enjeux et c est la jauge qui disparait. Rien n est porte par du contenu genere : un pourcentage pose par ::before disparaitrait avec une feuille de style utilisateur et ne serait pas copiable (echec F87). */ .tbz-co-enj-pc { display: none; } @media (max-width: 559.98px) { .tbz-co-enj thead th:nth-child(2), .tbz-co-enj .tbz-co-enj-bar { display: none; } .tbz-co-enj tbody th { padding-right: 8px; } .tbz-co-enj-eur { white-space: normal; } .tbz-co-enj-pc { display: block; font-size: 12px; font-weight: 700; color: var(--co-mut); } } /* ── Comprendre les deux lectures ─────────────────────────────────────────── */ .tbz-co-diff-faq { padding: 16px 18px; border: 1px solid var(--co-bd-soft); border-radius: var(--co-r-md); background: var(--co-card2); } .tbz-co-diff-faq > h3 { margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--co-acc-d); } .tbz-co-diff-faq-g { display: grid; gap: 16px; } @media (min-width: 760px) { .tbz-co-diff-faq-g { grid-template-columns: 1fr 1fr; gap: 26px; } } .tbz-co-diff-faq-g h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 740; color: var(--co-ink); } /* Le texte etait justifie : sur des colonnes etroites, cela creuse des rivieres blanches et gene la lecture. Fer a gauche. */ .tbz-co-diff-faq-g p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--co-ink3); text-align: left; } .tbz-co-diff-faq-l { margin: 16px 0 0; } .tbz-co-diff-faq-l a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 11px 18px; border: 1px solid var(--co-bd); border-radius: var(--co-pill); background: var(--co-card); color: var(--co-acc-d); text-decoration: none; font-size: 13px; font-weight: 700; transition: background .16s var(--co-ease), border-color .16s var(--co-ease); } .tbz-co-diff-faq-l a:hover { background: var(--co-acc-l2); border-color: var(--co-acc); } .tbz-co-diff-faq-l a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } .tbz-co-diff-faq-l i { font-size: 11px; } /* ============================================================================= 2. LA SECTION « COMPRENDRE ET UTILISER LE TABLEAU » ----------------------------------------------------------------------------- Revision 1.2.0 : l accordeon de cinq bandeaux repliés laisse la place a une vitrine. Les cinq cartes annoncent leur contenu avant qu on les ouvre (titre, resume d une ligne, points cles) ; une seule fiche est depliee a la fois, en pleine largeur, avec sa barre precedente / suivante / fermer. Trois mesures tenues a toutes les largeurs : - la piste de prose ne depasse jamais 78 signes par ligne, 71 des 992 px ; - le surplus de largeur part dans le rail « Pour aller plus loin », jamais dans une marge morte a droite (le defaut signale sur la version 1.1) ; - sous 620 px la fiche se deplie SOUS SA PROPRE CARTE (ordre entrelace), pas 1 000 px plus bas : empilee, la vitrine redevient un accordeon. Placement : la section entre dans le
du bloc de course au lieu de recopier 1 140 px a la main (aucune regle .container n existe dans assets/css : la valeur appartient au theme). Elle n a donc plus de largeur propre. ========================================================================== */ .tbz-co-aide { max-width: none; margin: 34px 0 10px; padding: 0; } /* Mesure au pixel dans le banc : sous 769 px, .race-tabs-container ajoute 0.5rem de retrait de chaque cote (assets/global_index.css l.1024-1045). Sans cette regle, la section d aide serait 16 px plus large que le bloc de course juste au-dessus, et le decalage se verrait. */ @media (max-width: 768px) { .tbz-co-aide { padding: 0 0.5rem; } } /* ── Chapeau ───────────────────────────────────────────────────────────── */ .tbz-co-aide-sur { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--co-acc-d); } .tbz-co-aide-sur i { font-size: 12px; } .tbz-co-aide-tete { margin: 0 0 4px; } .tbz-co-aide-tete h2 { margin: 0 0 8px; font-size: 21px; font-weight: 760; letter-spacing: -.03em; line-height: 1.2; color: var(--co-ink); } @media (min-width: 768px) { .tbz-co-aide-tete h2 { font-size: 26px; } } .tbz-co-aide-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--co-mut); } @media (min-width: 768px) { .tbz-co-aide-lead { font-size: 14.5px; } } /* ── Les liens de prose ──────────────────────────────────────────────────── La section passe de zero lien a une vingtaine : la couleur et le souligne sont declares une fois pour toutes. --co-acc-d (#075d6e) mesure 7,50:1 sur blanc, 6,50:1 sur --co-acc-l et 5,49:1 sur --co-soft : les trois fonds de la section passent le 4,5:1. Le souligne regle le critere 1.4.1 sans avoir a mesurer l ecart de couleur entre le lien et le texte. */ .tbz-co-aide .tbz-co-prose a, .tbz-co-aide .tbz-co-fiche-chapeau a, .tbz-co-aide .tbz-co-note a, .tbz-co-aide .tbz-co-memo a, .tbz-co-aide .tbz-co-aide-pied a { color: var(--co-acc-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .tbz-co-aide .tbz-co-prose a:hover, .tbz-co-aide .tbz-co-fiche-chapeau a:hover, .tbz-co-aide .tbz-co-note a:hover, .tbz-co-aide .tbz-co-memo a:hover, .tbz-co-aide .tbz-co-aide-pied a:hover { text-decoration-thickness: 2px; } .tbz-co-aide a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; border-radius: 2px; } /* ── La vitrine : cinq cartes, une fiche ─────────────────────────────────── Le conteneur s appelle .tbz-co-vitrine et NON .tbz-co-grille : cette derniere est deja prise par le
des cles de l en-tete du bloc de course (race_tabs.php l.62, regles l.170 et l.190). Deux objets, deux noms. Un seul conteneur en grille porte les cinq cartes ET les cinq fiches. Les fiches fermees sont en [hidden], donc absentes de la grille. L ordre fait le reste : entrelace sous 620 px (carte 1, fiche 1, carte 2...), separe au dessus (les cinq cartes, puis la fiche ouverte en pleine largeur). */ .tbz-co-vitrine { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0 0; } /* L ordre du DOM est celui de la lecture sous 620 px : carte 1, fiche 1, carte 2, fiche 2... Aucune regle order n est necessaire a cette largeur, et l ordre de tabulation suit donc exactement l ordre visuel (criteres 1.3.2 et 2.4.3). C est seulement a partir de 620 px, quand les cartes se rangent en vitrine, que order les regroupe et renvoie la fiche ouverte dessous : la, les quatre fiches fermees sont en [hidden], donc absentes de la sequence de focus, et il ne reste qu un seul objet deplace. */ /* Aucune propriete order ici, volontairement. La fiche ouverte est DEPLACEE dans le DOM par course-2027.js, a l endroit exact ou elle doit s afficher : sous sa propre carte en pile, en fin de rangee en vitrine. order aurait deplace l image sans deplacer l ordre de tabulation, et le clavier serait parti de la carte 1 vers une fiche situee 700 px plus bas avant de remonter a la carte 2. Ici, l ordre visuel, l ordre de lecture et l ordre du focus sont le meme. */ @media (min-width: 620px) { .tbz-co-vitrine { grid-template-columns: repeat(6, 1fr); gap: 12px; } .tbz-co-carte { grid-column: span 3; } .tbz-co-carte[data-n="5"] { grid-column: 1 / -1; } } /* 992 px et non 960 : c est la que le conteneur du theme passe de 720 a 960 px. Cale sur 960, la vitrine passait a trois cartes DANS un conteneur encore a 720 px, donc des cartes de 216 px la ou elles en faisaient 330 juste avant : elargir la fenetre retrecissait les cartes. */ @media (min-width: 992px) { .tbz-co-carte { grid-column: span 2; } .tbz-co-carte[data-n="4"], .tbz-co-carte[data-n="5"] { grid-column: span 3; } } .tbz-co-carte { position: relative; display: flex; flex-direction: column; padding: 13px 14px 11px; border: 1px solid var(--co-bd); border-radius: var(--co-r-md); background: var(--co-card); box-shadow: var(--co-sh-xs); transition: background .16s var(--co-ease), border-color .16s var(--co-ease), box-shadow .16s var(--co-ease); } @media (min-width: 620px) { .tbz-co-carte { padding: 15px 16px 13px; } } /* Le focus rendu a une carte apres Fermer la fait defiler : sans ce decalage elle se retrouverait sous l en-tete collant du site. */ .tbz-co-carte { scroll-margin-top: calc(var(--tbz-hd-collant, 58px) + 14px); } .tbz-co-carte:hover { border-color: var(--co-bd-fort); box-shadow: var(--co-sh-sm); } .tbz-co-carte[data-ouvert="1"] { background: var(--co-acc-l); border-color: var(--co-acc); box-shadow: var(--co-sh-sm); } .tbz-co-carte-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--co-r-xs); background: var(--co-acc-l); color: var(--co-acc-d); font-size: 13px; } @media (min-width: 620px) { .tbz-co-carte-ico { width: 32px; height: 32px; font-size: 14px; } } .tbz-co-carte[data-ouvert="1"] .tbz-co-carte-ico { background: var(--co-acc); color: #fff; } .tbz-co-carte-t { margin: 9px 0 0; font-size: 15.5px; font-weight: 750; line-height: 1.28; letter-spacing: -.015em; } @media (min-width: 620px) { .tbz-co-carte-t { font-size: 16px; } } .tbz-co-carte-lien { color: var(--co-ink); text-decoration: none; } /* La carte entiere est cliquable, mais le nom accessible du lien reste le seul titre : envelopper la carte dans un ferait lire le resume et les quatre pastilles dans le nom du lien. */ .tbz-co-carte-lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .tbz-co-carte:hover .tbz-co-carte-lien { color: var(--co-acc-d); } .tbz-co-carte-lien:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 3px; border-radius: var(--co-r-xs); } @supports selector(:has(*)) { .tbz-co-carte-lien:focus-visible { outline: 0; } .tbz-co-carte:has(.tbz-co-carte-lien:focus-visible) { outline: 2px solid var(--co-acc); outline-offset: 2px; } } .tbz-co-carte-r { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-carte-pts { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; } .tbz-co-carte-pts li { margin: 0; padding: 2px 8px; border-radius: var(--co-pill); background: var(--co-soft); border: 1px solid var(--co-bd); font-size: 12px; font-weight: 650; line-height: 1.55; color: var(--co-mut); } .tbz-co-carte[data-ouvert="1"] .tbz-co-carte-pts li { background: var(--co-card); border-color: #b9dee6; } .tbz-co-carte-cta { margin: 11px 0 0; padding-top: 9px; margin-top: auto; border-top: 1px solid var(--co-bd-soft); display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 720; color: var(--co-acc-d); } .tbz-co-carte[data-ouvert="1"] .tbz-co-carte-cta { border-top-color: #b9dee6; } .tbz-co-carte-cta i { font-size: 11px; } .tbz-co-cta-a { display: inline-flex; align-items: center; gap: 7px; } .tbz-co-cta-b { display: none; } .tbz-co-carte[data-ouvert="1"] .tbz-co-cta-a { display: none; } .tbz-co-carte[data-ouvert="1"] .tbz-co-cta-b { display: inline-flex; align-items: center; gap: 7px; } /* ── L etabli : la fiche ouverte ─────────────────────────────────────────── */ .tbz-co-fiche { grid-column: 1 / -1; margin: 2px 0 0; border: 1px solid var(--co-bd); border-top: 3px solid var(--co-acc); border-radius: var(--co-r-sm); background: var(--co-card); box-shadow: var(--co-sh-sm); padding: 16px 13px 18px; scroll-margin-top: calc(var(--tbz-hd-collant, 58px) + 14px); } @media (min-width: 620px) { .tbz-co-fiche { border-radius: var(--co-r-md); padding: 22px 20px 24px; } } @media (min-width: 768px) { .tbz-co-fiche { padding: 26px 28px 28px; } } .tbz-co-fiche:focus { outline: none; } .tbz-co-fiche:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } .tbz-co-fiche-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 18px; margin: 0 0 15px; padding-bottom: 13px; border-bottom: 1px solid var(--co-bd-soft); } .tbz-co-fiche-id { flex: 1 1 20rem; min-width: 0; } .tbz-co-fiche-rang { margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--co-acc-d); } .tbz-co-fiche h4 { margin: 0; font-size: 17.5px; font-weight: 780; line-height: 1.25; letter-spacing: -.022em; color: var(--co-ink); } @media (min-width: 768px) { .tbz-co-fiche h4 { font-size: 21px; } } .tbz-co-fiche-chapeau { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--co-mut-aa); } /* Sur telephone, la fiche ouverte fait jusqu a 3 000 px : les commandes ne peuvent pas vivre uniquement en tete, sinon il faut remonter toute la fiche pour passer a la suivante. Elles sont reprises a l identique en pied. */ .tbz-co-fiche-pied { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--co-bd); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; } .tbz-co-fiche-pied-t { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--co-mut); } .tbz-co-fiche-pied .tbz-co-fiche-outils { flex: 1 1 auto; justify-content: flex-end; } @media (max-width: 767.98px) { .tbz-co-fiche-pied .tbz-co-fiche-outils { flex: 1 1 100%; } } .tbz-co-fiche-outils { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 768px) { .tbz-co-fiche-outils { flex: 0 0 auto; } } .tbz-co-out { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card); color: var(--co-ink2); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background .16s var(--co-ease), border-color .16s var(--co-ease), color .16s var(--co-ease); } @media (min-width: 768px) { .tbz-co-out { flex: 0 0 auto; } } .tbz-co-out i { font-size: 11px; color: var(--co-mut); } .tbz-co-out:hover { background: var(--co-acc-l2); border-color: var(--co-acc); color: var(--co-acc-d); } .tbz-co-out:hover i { color: var(--co-acc); } .tbz-co-out:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } /* LA REGLE DE LARGEUR DE TOUT CE FICHIER, posee ici une fois pour toutes. Un bloc de texte ne porte JAMAIS de largeur maximale a l interieur d un cadre : il prend la largeur qu on lui donne. Quand cette largeur depasse la mesure de lecture confortable, on ne laisse pas de vide a droite, on decoupe l espace en colonnes. C est ce que fait la prose des fiches a partir de 992 px : deux colonnes equilibrees, donc la meme mesure de ligne qu avant, la largeur remplie, et une fiche deux fois moins haute a derouler. Mesures a 1 280 px, fiche 1 : une seule piste bornee donnait 570 px de texte pour 1 030 px de cadre, 460 px de vide a droite et 1 640 px de hauteur. Deux colonnes donnent 497 px chacune, 0 px de vide, 900 px de hauteur. */ .tbz-co-fiche-corps { display: grid; gap: 20px; } .tbz-co-prose { font-size: 15.5px; line-height: 1.7; color: var(--co-ink3); } @media (min-width: 768px) { .tbz-co-prose { font-size: 16px; } } @media (min-width: 992px) { /* column-width et non column-count : a 200 % de zoom texte seul, ou avec une police doublee, le navigateur redescend tout seul a une colonne au lieu de garder deux colonnes de trente signes. */ .tbz-co-prose { column-width: 24rem; column-gap: 40px; } /* On laisse un bloc long se poursuivre dans la colonne suivante, sinon les deux colonnes se desequilibrent et la premiere s arrete a mi-hauteur : le vide en bas a gauche remplacerait le vide a droite. Ce qui est interdit, c est qu un titre reste seul en bas d une colonne, ou qu une ligne de liste soit coupee en deux. */ /* Ou la coupure a le droit de tomber. Mesure sur les cinq fiches, a trois largeurs : blocs atomiques, le desequilibre entre les deux colonnes va de 160 a 450 px et la fiche est 15 % plus haute ; blocs secables, il tombe entre 0 et 49 px. On coupe donc, mais seulement aux endroits ou cela ne gene pas la lecture : jamais dans une puce, jamais dans un encadre, jamais entre un titre et ce qu il annonce, jamais entre un paragraphe et la liste qui le prolonge. Il ne reste que l inter-paragraphe. */ /* OU LA COUPURE A LE DROIT DE TOMBER. Trois etats mesures sur les cinq fiches, a 992, 1 280 et 1 440 px : blocs entiers insecables : aucune coupure, mais 160 a 450 px d ecart entre les deux colonnes, et la fiche 15 % plus haute ; coupure libre : 0 a 49 px d ecart, mais une phrase coupee en plein milieu et une liste de quatre paliers coupee apres le premier ; ci-dessous : la coupure ne peut tomber qu ENTRE deux enfants d un bloc. Aucune phrase, aucune liste, aucun encadre n est jamais coupe, et la granularite reste celle du paragraphe, donc l equilibrage tient. */ .tbz-co-bl h5 { break-after: avoid; page-break-after: avoid; } .tbz-co-bl p, .tbz-co-bl ul, .tbz-co-bl ol, .tbz-co-bl dl, .tbz-co-callout, .tbz-co-note, .tbz-co-leg, .tbz-co-lex-e { break-inside: avoid; page-break-inside: avoid; } } @media (min-width: 1400px) { .tbz-co-prose { column-gap: 44px; } } .tbz-co-prose > :first-child { margin-top: 0; } .tbz-co-prose > :last-child { margin-bottom: 0; } .tbz-co-bl { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--co-bd-soft); } .tbz-co-prose > .tbz-co-bl:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* 13,5 px et non 12,5 : la charpente qui sert a se reperer ne peut pas etre plus petite que le texte qu elle annonce (16 px). Pour un lecteur presbyte, c est elle qui devient illisible en premier. */ .tbz-co-bl h5 { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--co-acc-d); } .tbz-co-bl p { margin: 0 0 11px; } .tbz-co-bl > :last-child { margin-bottom: 0; } .tbz-co-bl strong { color: var(--co-ink); font-weight: 680; } .tbz-co-bl ul { margin: 9px 0 12px; padding-left: 20px; } .tbz-co-bl li { margin: 6px 0; } .tbz-co-bl li > ul { margin: 6px 0 8px; } /* Le rail est une bande de pied, pleine largeur : en colonne laterale il finissait toujours plus court que la prose et laissait un grand vide sous lui. En bande, ses liens pavent la largeur et rien ne reste creux. */ .tbz-co-rail { border-top: 1px solid var(--co-bd); padding-top: 15px; } .tbz-co-rail-t { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--co-mut); } .tbz-co-rail-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 8px; } .tbz-co-rail-l li { margin: 0; } .tbz-co-rail-l a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card2); color: var(--co-ink2); font-size: 13.5px; font-weight: 620; line-height: 1.35; text-decoration: none; transition: background .16s var(--co-ease), border-color .16s var(--co-ease), color .16s var(--co-ease); } .tbz-co-rail-l a i { flex: 0 0 auto; width: 18px; text-align: center; color: var(--co-acc); font-size: 13px; } .tbz-co-rail-l a:hover { background: var(--co-acc-l2); border-color: var(--co-acc); color: var(--co-acc-d); } .tbz-co-rail-l a:hover i { color: var(--co-acc-d); } .tbz-co-rail-l a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; } .tbz-co-memo { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-soft); } @media (min-width: 768px) { .tbz-co-memo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; } .tbz-co-memo ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 4px 22px; } } .tbz-co-memo-t { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 780; color: var(--co-ink); } .tbz-co-memo-t i { font-size: 12px; color: var(--co-acc); } .tbz-co-memo ul { list-style: none; margin: 0; padding: 0; } .tbz-co-memo li { position: relative; margin: 0 0 7px; padding-left: 15px; font-size: 13px; line-height: 1.5; color: var(--co-mut-aa); } .tbz-co-memo li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--co-acc); } .tbz-co-memo li:last-child { margin-bottom: 0; } /* Fiche 4 : un lexique et rien d autre. Une seule piste, le lexique pave tout seul, le rail devient un pied de fiche. Les paragraphes gardent leur mesure : pleine largeur, ils feraient 140 signes. */ .tbz-co-fiche-lex .tbz-co-fiche-corps { grid-template-columns: 1fr; gap: 20px; } .tbz-co-fiche-lex .tbz-co-prose { column-count: 1; } .tbz-co-fiche-lex .tbz-co-bl > p { max-width: none; } .tbz-co-fiche-lex .tbz-co-rail { border-left: 0; border-top: 1px solid var(--co-bd); padding: 15px 0 0; } .tbz-co-lex { margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 10px; align-items: start; } .tbz-co-lex-e { padding: 10px 12px; border: 1px solid var(--co-bd); border-radius: var(--co-r-sm); background: var(--co-card2); } .tbz-co-lex dt { margin: 0 0 4px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--co-ink); } .tbz-co-lex dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--co-ink3); } .tbz-co-sym { font-size: 15px; line-height: 1; } /* ── Pied de section ──────────────────────────────────────────────────────── */ .tbz-co-aide-pied { margin: 14px 0 0; padding: 12px 14px; border: 1px dashed var(--co-bd-fort); border-radius: var(--co-r-sm); background: var(--co-card2); font-size: 13.5px; line-height: 1.6; color: var(--co-ink3); } .tbz-co-aide-pied i { color: var(--co-acc); margin-right: 7px; } /* Encadres */ .tbz-co-callout { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--co-bd); border-left: 3px solid var(--co-bd-fort); border-radius: var(--co-r-sm); background: var(--co-card2); } .tbz-co-callout > :last-child { margin-bottom: 0; } .tbz-co-callout-t { margin: 0 0 8px; font-size: 13px; font-weight: 780; color: var(--co-ink); display: flex; align-items: center; gap: 8px; } .tbz-co-callout-t i { font-size: 12px; } .tbz-co-callout-info { background: var(--co-info-bg); border-color: var(--co-info-bd); border-left-color: var(--co-info); } .tbz-co-callout-info .tbz-co-callout-t i { color: var(--co-info); } .tbz-co-callout-warn { background: var(--co-warn-bg); border-color: var(--co-warn-bd); border-left-color: var(--co-warn); } .tbz-co-callout-warn .tbz-co-callout-t i { color: var(--co-warn); } /* Pastilles et etiquettes du lexique */ .tbz-co-chip { display: inline-block; padding: 2px 9px; border-radius: var(--co-pill); font-weight: 750; font-size: 12.5px; border: 1px solid transparent; } .tbz-co-chip-red { background: var(--co-dang-bg); border-color: var(--co-dang-bd); color: var(--co-dang); } .tbz-co-chip-green { background: var(--co-ok-bg); border-color: var(--co-ok-bd); color: var(--co-ok); } .tbz-co-chip-amber { background: var(--co-warn-bg); border-color: var(--co-warn-bd); color: var(--co-warn); } .tbz-co-chip-gray { background: var(--co-soft); border-color: var(--co-bd); color: var(--co-mut); } .tbz-co-badge { display: inline-block; padding: 1px 8px; border-radius: var(--co-r-xs); background: var(--co-soft); border: 1px solid var(--co-bd); color: var(--co-mut); font-weight: 750; font-size: 12.5px; } .tbz-co-badge-green { background: var(--co-ok-bg); border-color: var(--co-ok-bd); color: var(--co-ok); } .tbz-co-badge-blue { background: var(--co-info-bg); border-color: var(--co-info-bd); color: var(--co-info); } .tbz-co-leg { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tbz-co-leg li { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border: 1px solid var(--co-bd); border-radius: var(--co-pill); background: var(--co-card); font-size: 12.5px; } .tbz-co-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: var(--co-r-xs); border: 1px solid rgba(15,23,42,.18); font-weight: 800; font-size: 11.5px; color: #0f172a; } .tbz-co-tag-gold { background: #ffd700; } .tbz-co-tag-cream { background: #fff5c2; } .tbz-co-tag-gray { background: #f1f5f9; } .tbz-co-tag-pink { background: #f7dee8; } .tbz-co-note { margin: 10px 0 0; padding: 11px 13px; border-radius: var(--co-r-sm); background: var(--co-soft); font-size: 13px; line-height: 1.6; color: var(--co-mut-aa); } .tbz-co-note i { color: var(--co-acc); margin-right: 6px; } .tbz-co-note-haut { margin: 0 0 16px; font-size: 13px; } /* Le fond de la note est teinte : --co-acc (#0a7c91) n y mesure que 4,11:1. --co-acc-d (#075d6e) y mesure 5,49:1. Regle posee hors de .tbz-co-aide parce que la note sert aussi dans les panneaux du bloc de course. */ .tbz-co-note a, .tbz-co-texte a { color: var(--co-acc-d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .tbz-co-note a:hover, .tbz-co-texte a:hover { text-decoration-thickness: 2px; } .tbz-co-note a:focus-visible, .tbz-co-texte a:focus-visible { outline: 2px solid var(--co-acc); outline-offset: 2px; border-radius: 2px; } /* ============================================================================= 4. LE PANNEAU « LE RENIFLEUR » ----------------------------------------------------------------------------- Ce panneau portait 200 lignes de