/* ================================================================ SportSpeak — socle de thème « DefieMoi » Charte reprise de TinPadel (static/css/style.css, commit 03c32e5). Bleu nuit (structure) + jaune fluo (action UNIQUEMENT). RÈGLES DU FICHIER 1. Purement ADDITIF : hors du bloc `:root` et du bloc menu `.ssm-*`, rien ne s'applique sans ``. Une page non migrée n'est donc pas affectée. 2. AUCUNE valeur en dur dans les templates : toute couleur, tout rayon, toute ombre passe par un token `--dm-*` / `--ss-*` défini ici. 3. Les couleurs de SCORE (`--ss-nous`, `--ss-eux`, `--ss-srv-live`) sont GELÉES pour les pages SPECTATEUR (live_score, live_recap) : elles sont alignées avec les apps montre (Garmin / Apple Watch). Le SCOREUR (arbitre.html), lui, est passé en charte le 14/08 (version E) : il ne contient plus ni vert ni rose, voir les tokens `--ss-band-*`. ================================================================ */ :root { /* ── Fond ────────────────────────────────────────────────── */ --dm-bg-top: #1a266d; --dm-bg-bottom: #1a1d35; /* ── Accent : ACTION uniquement (CTA, sélection, statut actif) ── */ --dm-primary: #effd53; --dm-primary-dark: #d4e045; --dm-primary-light: #f5ff8a; --dm-on-primary: #111111; /* texte posé SUR le jaune */ /* ── Texte ───────────────────────────────────────────────── */ --dm-text: #ffffff; --dm-text-secondary: rgba(255,255,255,0.70); --dm-text-muted: rgba(255,255,255,0.50); /* ── Surfaces ────────────────────────────────────────────── */ --dm-card: #2c3e80; --dm-card-hover: #31438a; --dm-surface-soft: rgba(255,255,255,0.08); --dm-surface-strong: rgba(255,255,255,0.16); --dm-field: rgba(0,0,0,0.20); --dm-border: rgba(255,255,255,0.10); --dm-border-soft: rgba(255,255,255,0.08); --dm-scrim: rgba(0,0,0,0.60); /* ── Sémantique ──────────────────────────────────────────── */ --dm-success: #effd53; --dm-warning: #E6A316; --dm-error: #ff6b6b; /* ── Formes ──────────────────────────────────────────────── */ --dm-radius: 8px; --dm-radius-lg: 12px; --dm-radius-pill: 999px; --dm-shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --dm-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.30); --dm-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.40); /* ── Typo ────────────────────────────────────────────────── */ --dm-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --dm-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* ── Rythme ──────────────────────────────────────────────── */ --dm-tap: 44px; /* cible tactile minimale */ --dm-gap: 12px; --dm-transition: .2s ease; /* ── Repères de SCORE — GELÉS (alignés apps montre) ───────── */ --ss-nous: #EB29C7; --ss-eux: #1D9E75; --ss-srv-live: #FFD700; /* live_score.html, live_recap.html */ /* --- Scoreur live (arbitre.html) -- version E, arbitrage Antoine 14/08 --- Le scoreur passe entierement a la charte : navy + blanc + jaune, plus aucun vert ni rose. Qui est qui se lit a la POSITION et au LIBELLE ; le jaune ne dit qu'une seule chose -- qui sert. Seul le camp au service s'eclaircit, pour rester lisible a trois metres, telephone pose au bord du terrain. Les pages spectateur (live_score, live_recap) et les apps montre gardent --ss-nous / --ss-eux : elles ne sont pas concernees. */ --ss-band-idle: #1a1d35; --ss-center-bg: #14172c; /* barre centrale : un cran sous la bande au repos, sinon les deux fusionnent quand c'est le camp du bas qui sert */ --ss-band-serving: #2c3e80; --ss-ball: var(--dm-primary); --ss-ball-seam: var(--dm-on-primary); --ss-ball-glow: 0 0 10px rgba(239,253,83,0.55); /* ── Score en LISTE (historique, récap) — HORS scoreur live ────────────── Lecture facon tableau d'affichage : la couleur dit QUI A GAGNE le set, pas qui est qui (arbitrage Antoine du 14/08). Ces pages ne sont jamais regardees en meme temps que la montre ; le scoreur et les pages spectateur, eux, gardent --ss-nous / --ss-eux. */ --dm-score-win: var(--dm-primary); --dm-score-lose: var(--dm-text); --dm-score-lose-opacity: 0.45; } /* ================================================================ Thème de page — activé par ================================================================ */ body.dm-theme { background: linear-gradient(180deg, var(--dm-bg-top) 0%, var(--dm-bg-bottom) 100%); background-attachment: fixed; color: var(--dm-text); font-family: var(--dm-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Indique au navigateur que l'UI native (scrollbars, contrôles de formulaire, sélecteur de date) doit se rendre en sombre. */ body.dm-theme, html:has(body.dm-theme) { color-scheme: dark; } /* Le dégradé du body est en `background-attachment: fixed` : il ne couvre que la hauteur du viewport. Sur une page longue, ou pendant le rebond de scroll (rubber-band iOS), c'est le fond du qui apparaît — sans cette règle, une bande sombre hors charte. On le cale sur le bas du dégradé. */ html:has(body.dm-theme) { background-color: var(--dm-bg-bottom); } body.dm-theme { min-height: 100vh; } /* ── Typo ──────────────────────────────────────────────────── */ .dm-h1 { font-size: 26px; font-weight: 800; color: var(--dm-text); margin: 0 0 4px; } .dm-h2 { font-size: 20px; font-weight: 700; color: var(--dm-text); margin: 0 0 4px; } .dm-h3 { font-size: 17px; font-weight: 600; color: var(--dm-text); margin: 0 0 4px; } .dm-sub { font-size: 14px; color: var(--dm-text-secondary); line-height: 1.5; } .dm-meta{ font-size: 12.5px; color: var(--dm-text-muted); } @media (min-width: 768px) { .dm-h1 { font-size: 30px; } .dm-h2 { font-size: 24px; } } /* ── Marque ────────────────────────────────────────────────── */ .dm-wordmark { font-weight: 800; letter-spacing: -0.5px; color: var(--dm-text); } .dm-wordmark .dm-accent { color: var(--dm-primary); } /* ── Icônes (Phosphor, conservées : viewBox 256, fill) ─────── */ .dm-ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; } .dm-ico-active { color: var(--dm-primary); } /* ── Cartes ────────────────────────────────────────────────── */ .dm-card { background: var(--dm-card); border-radius: var(--dm-radius); box-shadow: var(--dm-shadow-md); padding: 16px; transition: background var(--dm-transition); } @media (min-width: 768px) { .dm-card { padding: 20px 24px; } } .dm-card:hover { background: var(--dm-card-hover); } /* ── Boutons ───────────────────────────────────────────────── */ .dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--dm-font); font-size: 14px; font-weight: 700; border-radius: var(--dm-radius); border: none; cursor: pointer; padding: 11px 20px; min-height: var(--dm-tap); white-space: nowrap; text-decoration: none; transition: background var(--dm-transition); } .dm-btn-primary { background: var(--dm-primary); color: var(--dm-on-primary); } .dm-btn-primary:hover { background: var(--dm-primary-dark); color: var(--dm-on-primary); } .dm-btn-secondary { background: var(--dm-text); color: var(--dm-on-primary); } .dm-btn-secondary:hover { background: var(--dm-text-secondary); } .dm-btn-ghost { background: transparent; color: var(--dm-text); border: 1px solid var(--dm-border); } .dm-btn-ghost:hover { background: var(--dm-surface-soft); } .dm-btn-destructive { background: var(--dm-error); color: var(--dm-text); } .dm-btn-lg { font-size: 16px; padding: 14px 26px; } .dm-btn-sm { font-size: 12.5px; padding: 8px 14px; min-height: 36px; } .dm-btn-block { width: 100%; } .dm-icon-btn { width: 38px; height: 38px; border-radius: var(--dm-radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--dm-surface-soft); color: var(--dm-text); border: none; cursor: pointer; flex: none; transition: background var(--dm-transition); } .dm-icon-btn:hover { background: var(--dm-surface-strong); } /* ── Liens de navigation ───────────────────────────────────── */ .dm-navlink { display: inline-flex; align-items: center; gap: 6px; color: var(--dm-text); text-decoration: none; font-weight: 700; font-size: 14px; transition: color var(--dm-transition); } .dm-navlink:hover, .dm-navlink.active { color: var(--dm-primary); } /* ── Chips / badges ────────────────────────────────────────── */ .dm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--dm-radius-pill); background: var(--dm-surface-soft); color: var(--dm-text-secondary); } .dm-chip-yellow { background: var(--dm-primary); color: var(--dm-on-primary); } .dm-chip-outline { background: transparent; border: 1px solid var(--dm-border); } /* ── Séparateur ────────────────────────────────────────────── */ .dm-sep { border: none; border-top: 1px solid var(--dm-border-soft); margin: 20px 0; } /* ================================================================ Champs de formulaire — angles morts relevés à l'audit : placeholder, chrome natif iOS/Android, icône du sélecteur de date. Scopé au thème : aucune page non migrée n'est touchée. ================================================================ */ body.dm-theme input[type="text"], body.dm-theme input[type="email"], body.dm-theme input[type="tel"], body.dm-theme input[type="number"], body.dm-theme input[type="password"], body.dm-theme input[type="date"], body.dm-theme input[type="search"], body.dm-theme select, body.dm-theme textarea, body.dm-theme .dm-input { width: 100%; background: var(--dm-field); border: 1px solid var(--dm-border); border-radius: var(--dm-radius); color: var(--dm-text); font-family: var(--dm-font); font-size: 16px; /* < 16px = zoom automatique sur iOS */ padding: 0 14px; min-height: var(--dm-tap); outline: none; -webkit-appearance: none; appearance: none; } body.dm-theme textarea { padding: 10px 14px; min-height: 84px; resize: vertical; } body.dm-theme input::placeholder, body.dm-theme textarea::placeholder { color: var(--dm-text-muted); opacity: 1; } body.dm-theme input:focus, body.dm-theme select:focus, body.dm-theme textarea:focus, body.dm-theme .dm-input:focus { border-color: var(--dm-primary); } /* Chevron dessiné (le natif disparaît avec appearance:none). */ body.dm-theme select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } /* Icône calendrier native : noire sur fond sombre sans ce filtre. */ body.dm-theme input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; } body.dm-theme input[type="checkbox"], body.dm-theme input[type="radio"] { accent-color: var(--dm-primary); } /* ================================================================ MENU (partial _menu.html) — préfixe .ssm- Volontairement HORS de `body.dm-theme` : la navigation doit être cohérente sur tout le site dès maintenant, y compris sur les pages pas encore migrées (c'est la priorité « menus / navigation »). ================================================================ */ .ssm-btn { position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: max(12px, env(safe-area-inset-right)); z-index: 2147483000; width: var(--dm-tap); height: var(--dm-tap); border: none; border-radius: var(--dm-radius-lg); cursor: pointer; background: var(--dm-card); color: var(--dm-text); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--dm-shadow-md); -webkit-tap-highlight-color: transparent; } .ssm-btn svg { width: 22px; height: 22px; fill: currentColor; } .ssm-overlay { position: fixed; inset: 0; z-index: 2147483001; background: var(--dm-scrim); opacity: 0; visibility: hidden; transition: opacity var(--dm-transition); } .ssm-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483002; width: min(80vw, 300px); background: linear-gradient(180deg, var(--dm-bg-top) 0%, var(--dm-bg-bottom) 100%); border-left: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-lg); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 18px) 0 calc(env(safe-area-inset-bottom) + 16px); overflow-y: auto; font-family: var(--dm-font); } html.ssm-open .ssm-overlay { opacity: 1; visibility: visible; } html.ssm-open .ssm-panel { transform: translateX(0); } html.ssm-open { overflow: hidden; } .ssm-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--dm-border); } .ssm-logo { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; color: var(--dm-text); } .ssm-logo .b { color: var(--dm-primary); } .ssm-close { background: none; border: none; color: var(--dm-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; } .ssm-close svg { width: 20px; height: 20px; fill: currentColor; } .ssm-link { display: flex; align-items: center; gap: var(--dm-gap); padding: 13px 20px; min-height: var(--dm-tap); color: var(--dm-text); text-decoration: none; font-size: 1rem; font-weight: 600; transition: background var(--dm-transition), color var(--dm-transition); } .ssm-link:hover, .ssm-link:focus { background: var(--dm-surface-soft); } .ssm-link.is-active { color: var(--dm-primary); } .ssm-link .ic { width: 24px; text-align: center; font-size: 1.1rem; color: var(--dm-text-secondary); } .ssm-link .ic svg { width: 22px; height: 22px; fill: currentColor; vertical-align: middle; } .ssm-link:hover .ic, .ssm-link.is-active .ic { color: var(--dm-primary); } .ssm-tag-pro { font-size: .6rem; font-weight: 800; vertical-align: super; color: var(--dm-primary); } .ssm-sep { height: 1px; background: var(--dm-border); margin: 10px 20px; } .ssm-foot { margin-top: auto; padding: 14px 20px 0; display: flex; flex-wrap: wrap; gap: 14px; } .ssm-foot a { color: var(--dm-text-muted); text-decoration: none; font-size: 0.82rem; } .ssm-foot a:hover { color: var(--dm-text-secondary); } /* ================================================================ Feuille de partage (static/js/share_sheet.js) Repli quand le partage natif du telephone est indisponible (origine HTTP) : que des liens reels, aucune pop-up. ================================================================ */ .ss-share { position: fixed; inset: 0; z-index: 9999; background: var(--dm-scrim); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); font-family: var(--dm-font); } @media (min-width: 640px) { .ss-share { align-items: center; } } .ss-share-card { width: 100%; max-width: 420px; background: var(--dm-card); color: var(--dm-text); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); box-shadow: var(--dm-shadow-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 88vh; overflow-y: auto; } .ss-share-title { font-size: 17px; font-weight: 800; } .ss-share-preview { width: 100%; border-radius: var(--dm-radius); border: 1px solid var(--dm-border); display: block; } .ss-share-links { display: flex; flex-direction: column; gap: 8px; } .ss-share-btn { display: flex; align-items: center; justify-content: center; min-height: var(--dm-tap); padding: 11px 16px; border-radius: var(--dm-radius); border: 1px solid var(--dm-border); background: var(--dm-surface-soft); color: var(--dm-text); font-family: var(--dm-font); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; width: 100%; transition: background var(--dm-transition); } .ss-share-btn:hover { background: var(--dm-surface-strong); } .ss-share-copy { background: var(--dm-primary); color: var(--dm-on-primary); border-color: transparent; } .ss-share-copy:hover { background: var(--dm-primary-dark); } .ss-share-close { background: none; border: none; color: var(--dm-text-secondary); font-family: var(--dm-font); font-size: 14px; font-weight: 700; min-height: var(--dm-tap); cursor: pointer; }