/* ============================================================ Paris-Turf — Design System "Édition" Tokens + composants, dérivés de la Charte graphique éditoriale Paris-Turf (V-2021.1.01). Mode clair par défaut ; ajouter data-theme="dark" sur pour le mode sombre. Drop-in pour un globals.css (Next.js / Vite). Couleurs charte : Rouge PTF #FF0D00 · Noir #000 · Bleu PTF #D5E9F2 · Bleu TQQ #296666 · Bleu Foncé #758594 · Bleu Tweet #47B8FF · Vert PTF #629B40. (CMJN = autorité ; HEX = base écran, cf. §9) ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Neutres (froids, ancrés sur le Bleu Foncé PTF #758594) */ --pt-bg: #f3f5f6; --pt-surface: #ffffff; --pt-surface-2: #f6f8f9; /* zebra / panneau discret */ --pt-surface-3: #eceff1; /* en-tête de table / inset */ --pt-line: #e0e4e7; --pt-line-strong: #cbd1d6; --pt-ink: #0e0f10; /* texte principal (Noir charte) */ --pt-ink-2: #3c4248; /* texte secondaire */ --pt-ink-3: #5f6a72; /* muet / labels (≈ Bleu Foncé) */ --pt-ink-4: #8b959c; /* atténué / désactivé */ /* Marque + signaux (charte) */ --pt-rouge: #ff0d00; /* Rouge PTF — signature, logo « TURF » */ --pt-red: #ff0d00; /* action primaire / live / cote favori (alt. écran plus douce : #E2231A, cf. §9) */ --pt-red-ink: #d60a00; /* survol / pressé */ --pt-red-bg: #ffe9e7; /* teinte */ --pt-green: #629b40; /* Vert PTF — gagnant / meilleure cote */ --pt-green-ink: #4d7d31; --pt-green-bg: #eef4e9; --pt-teal: #296666; /* Bleu TQQ — emphase secondaire / quinté */ --pt-teal-bg: #e4eeee; --pt-blue: #47b8ff; /* Bleu Tweet — liens / info / réseaux */ --pt-blue-ink: #1f93e0; --pt-blue-bg: #e9f5ff; --pt-surf-blue: #d5e9f2; /* Bleu PTF — surface claire / surlignage */ --pt-focus: #47b8ff; /* Rayons — éditorial, donc nets */ --pt-r-xs: 2px; --pt-r-sm: 3px; --pt-r-md: 5px; --pt-r-lg: 8px; --pt-r-pill: 999px; /* Élévation */ --pt-shadow-sm: 0 1px 2px rgba(14, 15, 16, 0.06); --pt-shadow-md: 0 4px 14px -6px rgba(14, 15, 16, 0.16); --pt-shadow-lg: 0 18px 40px -20px rgba(14, 15, 16, 0.28); /* Typographie (substituts libres des polices charte sous licence) */ --pt-font-display: "Oswald", system-ui, sans-serif; /* Antique Olive / titres */ --pt-font-ui: "Helvetica Neue", Arial, system-ui, sans-serif; /* HelveticaNeue LT / UI */ --pt-font-cond: "Barlow Condensed", "Oswald", sans-serif; /* DIN-OT / chapeaux */ --pt-font-body: Georgia, "Times New Roman", serif; /* Charter / corps édito */ --pt-font-accent: "Playfair Display", Georgia, serif; /* Abril / accent */ --pt-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; /* extension digitale : chiffres tabulaires + code */ --pt-font-brand: "Oswald", "Arial Narrow", sans-serif; /* logo PARIS-TURF */ } html[data-theme="dark"] { --pt-bg: #121417; --pt-surface: #191c1f; --pt-surface-2: #1f2327; --pt-surface-3: #262b30; --pt-line: #2c3237; --pt-line-strong: #3a4147; --pt-ink: #eef1f3; --pt-ink-2: #c3c9cf; --pt-ink-3: #98a1a8; --pt-ink-4: #6a737a; --pt-rouge: #ff3b30; --pt-red: #ff453a; --pt-red-ink: #ff6b62; --pt-red-bg: #3a1714; --pt-green: #74b558; --pt-green-ink: #8cc873; --pt-green-bg: #19271144; --pt-teal: #4f9c9c; --pt-teal-bg: #15292977; --pt-blue: #5bbcff; --pt-blue-ink: #85ccff; --pt-blue-bg: #10283b; --pt-surf-blue: #1c3a47; --pt-focus: #5bbcff; --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --pt-shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.6); --pt-shadow-lg: 0 20px 44px -22px rgba(0, 0, 0, 0.72); } /* ---------- 2. BASE ---------- */ * { box-sizing: border-box; } .pt-num, .pt-mono { font-family: var(--pt-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- 3. BOUTONS ---------- */ .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--pt-font-ui); font-weight: 600; font-size: 13px; line-height: 1; padding: 9px 15px; border-radius: var(--pt-r-md); border: 1px solid transparent; cursor: pointer; transition: background 0.14s, border-color 0.14s, color 0.14s; white-space: nowrap; } .pt-btn--primary { background: var(--pt-red); color: #fff; box-shadow: var(--pt-shadow-sm); } .pt-btn--primary:hover { background: var(--pt-red-ink); } .pt-btn--secondary { background: var(--pt-surface); color: var(--pt-ink); border-color: var(--pt-line-strong); } .pt-btn--secondary:hover { background: var(--pt-surface-2); } .pt-btn--ghost { background: transparent; color: var(--pt-ink-2); } .pt-btn--ghost:hover { background: var(--pt-surface-3); color: var(--pt-ink); } .pt-btn--dark { background: var(--pt-ink); color: var(--pt-surface); } .pt-btn--dark:hover { filter: brightness(1.15); } .pt-btn--sm { padding: 6px 11px; font-size: 12px; border-radius: var(--pt-r-sm); } .pt-btn--lg { padding: 12px 22px; font-size: 15px; } .pt-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pt-blue-bg), 0 0 0 1px var(--pt-focus); } .pt-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ---------- 4. CHIPS (filtres) ---------- */ .pt-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pt-font-ui); font-weight: 600; font-size: 12px; line-height: 1; padding: 6px 12px; border-radius: var(--pt-r-pill); background: var(--pt-surface); border: 1px solid var(--pt-line-strong); color: var(--pt-ink-2); cursor: pointer; transition: 0.14s; white-space: nowrap; } .pt-chip:hover { border-color: var(--pt-ink-3); color: var(--pt-ink); } .pt-chip[aria-pressed="true"], .pt-chip--active { background: var(--pt-ink); color: var(--pt-surface); border-color: var(--pt-ink); } /* ---------- 5. BADGES ---------- */ .pt-badge { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--pt-font-mono); font-weight: 700; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: var(--pt-r-xs); letter-spacing: 0.02em; white-space: nowrap; } .pt-badge--r { background: var(--pt-red); color: #fff; } .pt-badge--c { background: var(--pt-ink); color: var(--pt-surface); } .pt-badge--quinte { background: var(--pt-teal); color: #fff; font-family: var(--pt-font-ui); font-weight: 800; letter-spacing: 0.05em; padding: 3px 7px; } .pt-badge--win { background: var(--pt-green-bg); color: var(--pt-green-ink); } .pt-badge--ghost { background: transparent; border: 1px solid var(--pt-line-strong); color: var(--pt-ink-3); } .pt-badge--live { background: var(--pt-red-bg); color: var(--pt-red-ink); font-family: var(--pt-font-ui); font-weight: 700; padding: 3px 8px; } .pt-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pt-red); animation: pt-pulse 1.2s ease-in-out infinite; } @keyframes pt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* ---------- 6. ONGLETS ---------- */ .pt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pt-line); } .pt-tab { appearance: none; border: 0; background: transparent; cursor: pointer; position: relative; font-family: var(--pt-font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--pt-ink-3); padding: 11px 15px; transition: color 0.14s; } .pt-tab:hover { color: var(--pt-ink-2); } .pt-tab[aria-selected="true"] { color: var(--pt-ink); } .pt-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -1px; height: 2px; background: var(--pt-red); border-radius: 2px; } /* ---------- 7. CHAMPS ---------- */ .pt-input { font-family: var(--pt-font-ui); font-size: 13px; padding: 9px 12px; width: 100%; border-radius: var(--pt-r-md); border: 1px solid var(--pt-line-strong); background: var(--pt-surface); color: var(--pt-ink); transition: 0.14s; } .pt-input::placeholder { color: var(--pt-ink-4); } .pt-input:focus { outline: none; border-color: var(--pt-focus); box-shadow: 0 0 0 3px var(--pt-blue-bg); } .pt-search { display: flex; align-items: center; gap: 8px; background: var(--pt-surface); border: 1px solid var(--pt-line-strong); border-radius: var(--pt-r-md); padding: 0 12px; } .pt-search input { border: 0; background: transparent; outline: none; padding: 9px 0; font-family: var(--pt-font-ui); font-size: 13px; color: var(--pt-ink); width: 100%; } /* ---------- 8. TABLE (données denses) ---------- */ .pt-table { width: 100%; border-collapse: collapse; font-family: var(--pt-font-ui); font-size: 13px; } .pt-table thead th { font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-ink-3); text-align: left; padding: 9px 10px; white-space: nowrap; background: var(--pt-surface-3); border-bottom: 1px solid var(--pt-line); } .pt-table thead th.r, .pt-table tbody td.r { text-align: right; } .pt-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--pt-line); color: var(--pt-ink-2); vertical-align: middle; } .pt-table tbody tr:last-child td { border-bottom: 0; } .pt-table tbody tr:hover { background: var(--pt-surface-2); } .pt-table--zebra tbody tr:nth-child(even) { background: var(--pt-surface-2); } .pt-table tbody tr.is-fav { background: var(--pt-surf-blue); box-shadow: inset 3px 0 0 var(--pt-red); } html[data-theme="dark"] .pt-table tbody tr.is-fav { background: var(--pt-surf-blue); } .pt-table .rank { font-family: var(--pt-font-mono); font-weight: 700; color: var(--pt-ink); font-variant-numeric: tabular-nums; } .pt-table .num { font-family: var(--pt-font-mono); font-variant-numeric: tabular-nums; color: var(--pt-ink-2); text-align: right; } .pt-table .horse { font-weight: 600; color: var(--pt-ink); } .pt-table .odd { font-family: var(--pt-font-mono); font-weight: 700; color: var(--pt-red); text-align: right; font-variant-numeric: tabular-nums; } .pt-table .muted { color: var(--pt-ink-3); } /* ---------- 9. CARTE ---------- */ .pt-card { background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r-lg); box-shadow: var(--pt-shadow-sm); overflow: hidden; } .pt-card__head { padding: 13px 16px; border-bottom: 1px solid var(--pt-line); display: flex; align-items: center; gap: 10px; } .pt-card__title { font-family: var(--pt-font-display); font-weight: 600; font-size: 15px; color: var(--pt-ink); letter-spacing: 0.01em; text-transform: uppercase; } .pt-card__body { padding: 14px 16px; } /* ---------- 10. RACE CARD (ligne de programme) ---------- */ .pt-racecard { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r-md); transition: 0.14s; } .pt-racecard:hover { border-color: var(--pt-line-strong); box-shadow: var(--pt-shadow-sm); } .pt-racecard__badges { display: flex; flex-direction: column; gap: 3px; } .pt-racecard__main { flex: 1; min-width: 0; } .pt-racecard__title { font-weight: 700; font-size: 14px; color: var(--pt-ink); } .pt-racecard__meta { font-family: var(--pt-font-mono); font-size: 11.5px; color: var(--pt-ink-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; } .pt-racecard__meta b { color: var(--pt-ink-2); font-weight: 600; } .pt-racecard__right { text-align: right; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .pt-pronos { font-family: var(--pt-font-mono); font-weight: 700; font-size: 13px; color: var(--pt-ink); letter-spacing: 0.04em; } .pt-time { font-family: var(--pt-font-mono); font-size: 12px; color: var(--pt-ink-3); } /* ---------- 11. BANDEAU COURSE ---------- */ .pt-banner { background: #16191d; color: #fff; border: 1px solid transparent; border-radius: var(--pt-r-lg); padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } html[data-theme="dark"] .pt-banner { background: #0c0e10; border-color: var(--pt-line); } .pt-banner__rc { display: flex; gap: 5px; } .pt-banner__rc .pt-badge { font-size: 13px; padding: 5px 9px; } .pt-banner h1 { font-family: var(--pt-font-display); font-weight: 600; font-size: 24px; margin: 0; letter-spacing: 0.01em; text-transform: uppercase; } .pt-banner__meta { font-family: var(--pt-font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; } /* ---------- 12. RAPPORTS (comparateur de cotes) ---------- */ .pt-rapports td.is-best { color: var(--pt-green); font-weight: 700; } .pt-best-tag { display: inline-block; font-family: var(--pt-font-ui); font-weight: 700; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-green-ink); background: var(--pt-green-bg); border-radius: var(--pt-r-xs); padding: 2px 5px; margin-left: 6px; } /* ---------- 13. LOGO PARIS-TURF ---------- */ .pt-logo { display: inline-flex; align-items: center; gap: 10px; } .pt-logo__wm { font-family: var(--pt-font-brand); font-weight: 700; font-size: 30px; letter-spacing: 0.01em; color: var(--pt-ink); line-height: 1; text-transform: uppercase; } .pt-logo__wm .b { color: var(--pt-rouge); } /* Révélation « ligne d'arrivée » (extension digitale, non print) */ .pt-splash { position: relative; display: inline-flex; } .pt-splash__inner { display: inline-flex; } .pt-finishline { position: absolute; top: -12px; bottom: -12px; width: 5px; left: -6%; opacity: 0; pointer-events: none; border-radius: 2px; background: repeating-linear-gradient(#fff 0 6px, #0c0c0c 6px 12px); box-shadow: 0 0 16px 3px var(--pt-red); } .pt-splash.is-playing .pt-splash__inner { animation: pt-finish 0.82s cubic-bezier(0.4, 0, 0.1, 1) both; } .pt-splash.is-playing .pt-finishline { animation: pt-sweep 0.82s cubic-bezier(0.4, 0, 0.1, 1) both; } @keyframes pt-finish { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes pt-sweep { 0% { left: -6%; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { left: 103%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pt-splash.is-playing .pt-splash__inner, .pt-splash.is-playing .pt-finishline { animation: none; } .pt-finishline { opacity: 0; } } /* ---------- 14. TOASTS (haut-droite) ---------- */ .pt-toaster { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: 368px; max-width: calc(100vw - 32px); pointer-events: none; } .pt-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r-md); padding: 13px 12px 13px 15px; position: relative; box-shadow: inset 3px 0 0 var(--pt-blue), var(--pt-shadow-lg); animation: pt-toast-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .pt-toast--success { box-shadow: inset 3px 0 0 var(--pt-green), var(--pt-shadow-lg); } .pt-toast--warning { box-shadow: inset 3px 0 0 var(--pt-teal), var(--pt-shadow-lg); } .pt-toast--error { box-shadow: inset 3px 0 0 var(--pt-red), var(--pt-shadow-lg); } .pt-toast.is-leaving { animation: pt-toast-out 0.26s ease forwards; } @keyframes pt-toast-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @keyframes pt-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(26px); } } .pt-toast__icon { flex: none; width: 26px; height: 26px; border-radius: var(--pt-r-sm); display: grid; place-items: center; font-family: var(--pt-font-mono); font-weight: 700; font-size: 14px; line-height: 1; } .pt-toast--info .pt-toast__icon { background: var(--pt-blue-bg); color: var(--pt-blue-ink); } .pt-toast--success .pt-toast__icon { background: var(--pt-green-bg); color: var(--pt-green-ink); } .pt-toast--warning .pt-toast__icon { background: var(--pt-teal-bg); color: var(--pt-teal); } .pt-toast--error .pt-toast__icon { background: var(--pt-red-bg); color: var(--pt-red-ink); } .pt-toast__content { flex: 1; min-width: 0; padding-top: 1px; } .pt-toast__title { font-weight: 700; font-size: 13.5px; color: var(--pt-ink); letter-spacing: -0.005em; } .pt-toast__msg { font-size: 12.5px; color: var(--pt-ink-3); line-height: 1.45; margin-top: 2px; } /* Jauge circulaire = minuteur + bouton pause/fermer */ .pt-toast__gauge { flex: none; width: 30px; height: 30px; position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center; color: var(--pt-ink-3); transition: background 0.14s, color 0.14s; } .pt-toast__gauge:hover { background: var(--pt-surface-3); color: var(--pt-ink); } .pt-toast__gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .pt-toast__gauge .trk { fill: none; stroke: var(--pt-line); stroke-width: 2.5; } .pt-toast__gauge .prg { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 81.68; stroke-dashoffset: 0; animation: pt-deplete var(--dur, 5s) linear forwards; } .pt-toast--info .pt-toast__gauge .prg { stroke: var(--pt-blue); } .pt-toast--success .pt-toast__gauge .prg { stroke: var(--pt-green); } .pt-toast--warning .pt-toast__gauge .prg { stroke: var(--pt-teal); } .pt-toast--error .pt-toast__gauge .prg { stroke: var(--pt-red); } @keyframes pt-deplete { to { stroke-dashoffset: 81.68; } } .pt-toast__pause { display: none; align-items: center; gap: 3px; } .pt-toast__pause i { display: block; width: 3px; height: 10px; background: currentColor; border-radius: 1px; } .pt-toast__close { display: none; font-size: 14px; line-height: 1; } .pt-toast__gauge:hover .prg { animation-play-state: paused; } .pt-toast:not(.is-pinned) .pt-toast__gauge:hover .pt-toast__pause { display: flex; } .pt-toast.is-pinned .pt-toast__gauge svg, .pt-toast.is-pinned .pt-toast__pause { display: none !important; } .pt-toast.is-pinned .pt-toast__close { display: block; } @media (prefers-reduced-motion: reduce) { .pt-toast { animation: pt-toast-fade 0.2s ease both; } .pt-toast.is-leaving { animation: pt-toast-fade-out 0.2s ease forwards; } } @keyframes pt-toast-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pt-toast-fade-out { from { opacity: 1; } to { opacity: 0; } } /* ---------- 15. DIALOGUE (modale) ---------- */ .pt-scrim { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; padding: 24px; background: rgba(12, 15, 18, 0.46); opacity: 0; transition: opacity 0.18s ease; } html[data-theme="dark"] .pt-scrim { background: rgba(0, 0, 0, 0.62); } .pt-scrim.is-open { opacity: 1; } .pt-dialog { width: 460px; max-width: 100%; background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r-lg); box-shadow: var(--pt-shadow-lg); overflow: hidden; transform: translateY(10px) scale(0.985); opacity: 0.5; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; } .pt-scrim.is-open .pt-dialog { transform: none; opacity: 1; } .pt-dialog__head { display: flex; align-items: flex-start; gap: 13px; padding: 19px 20px 0; } .pt-dialog__icon { flex: none; width: 34px; height: 34px; border-radius: var(--pt-r-md); display: grid; place-items: center; font-family: var(--pt-font-mono); font-weight: 700; font-size: 17px; line-height: 1; background: var(--pt-blue-bg); color: var(--pt-blue-ink); } .pt-dialog--warning .pt-dialog__icon { background: var(--pt-teal-bg); color: var(--pt-teal); } .pt-dialog--danger .pt-dialog__icon { background: var(--pt-red-bg); color: var(--pt-red-ink); } .pt-dialog__title { font-family: var(--pt-font-display); font-weight: 600; font-size: 18px; color: var(--pt-ink); letter-spacing: 0.01em; text-transform: uppercase; padding-top: 7px; } .pt-dialog__body { padding: 11px 20px 0 67px; font-size: 13.5px; color: var(--pt-ink-2); line-height: 1.55; } .pt-dialog--plain .pt-dialog__body { padding-left: 20px; } .pt-dialog__foot { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 20px; margin-top: 18px; border-top: 1px solid var(--pt-line); background: var(--pt-surface-2); }