/* Mon tennis — feuille de style unique. Deux partis pris commandent le reste. D'abord le pouce : tout se conçoit pour un téléphone tenu d'une main, parce que c'est là que ce carnet sert vraiment — après un cours, ou au changement de côté. Les cibles font 44 px au minimum, la navigation est en bas, et rien d'important ne se cache en haut de l'écran. Ensuite le plein soleil : sur un court, un texte gris clair sur fond blanc devient invisible. Les contrastes sont donc plus francs qu'à l'ordinaire, et le mode court pousse encore les tailles. Toute la couleur passe par les variables de :root. Changer de thème ne demande alors qu'un attribut sur , sans rien redessiner. */ /* =================================================================== Palette =================================================================== */ :root { --fond: #f4f6f4; --carte: #ffffff; --carte-2: #eef2ee; --texte: #16201a; --muet: #5d6b61; --bord: #dde3dd; --accent: #3f7233; --accent-doux: #e6f0e2; --accent-txt: #ffffff; --victoire: #2f7d32; --defaite: #b4402f; --alerte: #a8590d; --or: #d19a1d; --ombre: 0 1px 2px rgba(16, 32, 20, .06), 0 4px 14px rgba(16, 32, 20, .05); --rayon: 14px; } :root[data-theme="dark"], :root:not([data-theme="light"]) { /* Rien ici : la règle sombre vit dans le media query ci-dessous, et la surcharge explicite juste après. Ce bloc ne sert qu'à rappeler que l'ordre compte. */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond: #0f1411; --carte: #18201b; --carte-2: #212b24; --texte: #e8efe9; --muet: #94a698; --bord: #2a352d; --accent: #7ab469; --accent-doux: #22301f; --accent-txt: #0f1411; --victoire: #6dbf72; --defaite: #e07a63; --alerte: #e0a75a; --or: #e8c260; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3); } } :root[data-theme="dark"] { --fond: #0f1411; --carte: #18201b; --carte-2: #212b24; --texte: #e8efe9; --muet: #94a698; --bord: #2a352d; --accent: #7ab469; --accent-doux: #22301f; --accent-txt: #0f1411; --victoire: #6dbf72; --defaite: #e07a63; --alerte: #e0a75a; --or: #e8c260; --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3); } /* =================================================================== Base =================================================================== */ * { box-sizing: border-box; } /* Sans cette règle, un `display:flex` posé plus bas l'emporte sur l'attribut `hidden` et l'écran de chargement ne disparaît jamais. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--fond); color: var(--texte); } body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; overflow-wrap: anywhere; } body.modal-ouvert { overflow: hidden; } h1, h2, h3 { margin: 0; line-height: 1.25; } h3 { font-size: 1.02rem; } p { margin: 0 0 10px; } a { color: var(--accent); } .muted { color: var(--muet); } .tiny { font-size: .8rem; line-height: 1.45; } .alerte { color: var(--alerte); font-weight: 600; } .etiquette { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muet); margin: 12px 0 6px; font-weight: 600; } .titre-section { margin: 18px 4px 8px; font-size: 1rem; } /* =================================================================== Démarrage =================================================================== */ .boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; } .boot-logo { font-size: 48px; } .boot-text { color: var(--muet); } .boot-diag { max-width: 460px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; font-size: .88rem; } .boot-diag pre { white-space: pre-wrap; font-size: .74rem; color: var(--muet); background: var(--carte-2); padding: 8px; border-radius: 8px; } /* =================================================================== Ossature =================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--fond); border-bottom: 1px solid var(--bord); padding-top: env(safe-area-inset-top); } .topbar-inner { display: flex; align-items: center; gap: 6px; padding: 10px 14px; max-width: 780px; margin: 0 auto; } .topbar h1 { flex: 1; font-size: 1.16rem; } .icon-btn { min-width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: inherit; font-size: 19px; cursor: pointer; line-height: 1; } .icon-btn:hover { background: var(--carte-2); } a.icon-btn { display: grid; place-items: center; text-decoration: none; } .icon-btn.active { background: var(--accent-doux); } /* Une pastille discrète sur l'icône de sauvegarde : verte quand le carnet est relié à un compte, orange pendant l'envoi. Discrète parce qu'elle n'appelle aucune action — elle rassure, elle ne réclame pas. */ .icon-btn[data-sync] { position: relative; } .icon-btn[data-sync]::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--fond); } .icon-btn[data-sync="ok"]::after { background: var(--victoire); } .icon-btn[data-sync="cours"]::after { background: var(--alerte); } .view { max-width: 780px; margin: 0 auto; padding: 12px 14px calc(96px + env(safe-area-inset-bottom)); } /* Barre du bas : la navigation est là où le pouce arrive. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--carte); border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px; font-size: .66rem; text-decoration: none; color: var(--muet); min-height: 52px; } .tabbar a span { font-size: 19px; line-height: 1.1; } .tabbar a.active { color: var(--accent); font-weight: 600; } .fab { position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 31; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-txt); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); } body.mode-court .fab { display: none; } /* Le micro se pose au-dessus du « + » : c'est le geste le plus rapide après un match, il mérite d'être atteignable sans viser. */ .fab-2 { bottom: calc(136px + env(safe-area-inset-bottom)); background: var(--carte); color: var(--texte); border: 1px solid var(--bord); font-size: 22px; } .btn-micro.ecoute { background: var(--defaite); border-color: var(--defaite); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .68; } } @media (prefers-reduced-motion: reduce) { .btn-micro.ecoute { animation: none; } } .propositions { list-style: none; margin: 10px 0 0; padding: 0; } .propositions li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--bord); font-size: .88rem; } .propositions li:first-child { border-top: 0; } .prop-dest { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } .prop-resume { flex: 1; min-width: 0; color: var(--muet); font-size: .82rem; } /* =================================================================== Boutons =================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--bord); border-radius: 11px; background: var(--carte); color: var(--texte); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; } .btn:hover { background: var(--carte-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-txt); font-weight: 600; } .btn-primary:hover { filter: brightness(1.06); } .btn-danger { color: var(--defaite); border-color: var(--defaite); background: transparent; } .btn-ghost { background: transparent; border-color: transparent; color: var(--accent); } .btn-block { width: 100%; } .btn:disabled { opacity: .45; cursor: not-allowed; } .lien { border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; } .rangee-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .pied-liste { margin-top: 16px; display: flex; justify-content: center; } /* =================================================================== Cartes et états vides =================================================================== */ .carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; margin: 12px 0; box-shadow: var(--ombre); } .carte h3 { margin-bottom: 8px; } .carte-verte { border-color: var(--victoire); } .carte-amorce { border-style: dashed; } .carte-avertissement { background: var(--carte-2); } .vide { text-align: center; color: var(--muet); padding: 40px 20px; line-height: 1.6; } .vide .emoji { display: block; font-size: 40px; margin-bottom: 10px; } .avis { background: var(--accent-doux); border: 1px solid var(--accent); border-radius: var(--rayon); padding: 12px 14px; margin: 12px 0; font-size: .9rem; } /* =================================================================== Compteurs =================================================================== */ .chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; } .chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 10px 6px; text-align: center; } .chiffre b { display: block; font-size: 1.24rem; line-height: 1.2; } .chiffre b small { font-size: .82rem; color: var(--muet); font-weight: 600; } .chiffre span { font-size: .66rem; color: var(--muet); line-height: 1.25; display: block; } @media (max-width: 380px) { .chiffres { grid-template-columns: repeat(2, 1fr); } } /* =================================================================== Filtres =================================================================== */ .barre-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; } .recherche { flex: 1 1 180px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 11px; background: var(--carte); color: var(--texte); font: inherit; font-size: .92rem; } .segments { display: inline-flex; border: 1px solid var(--bord); border-radius: 11px; overflow: hidden; background: var(--carte); } .segments button { border: 0; background: transparent; color: var(--muet); font: inherit; font-size: .84rem; padding: 10px 13px; min-height: 44px; cursor: pointer; /* Un libellé coupé en deux lignes (« Chaussur / es ») est illisible : on préfère resserrer la police que casser le mot. */ white-space: nowrap; } @media (max-width: 430px) { .segments button { font-size: .74rem; padding: 10px 7px; } } .segments button + button { border-left: 1px solid var(--bord); } .segments button.actif { background: var(--accent); color: var(--accent-txt); font-weight: 600; } .replis { margin: 8px 0; } .replis summary { cursor: pointer; padding: 10px 2px; color: var(--accent); font-size: .9rem; font-weight: 500; } .groupe-filtres { padding: 4px 2px 10px; } .pastilles { display: flex; flex-wrap: wrap; gap: 7px; } .pastille { border: 1px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 999px; padding: 9px 13px; min-height: 40px; font: inherit; font-size: .84rem; cursor: pointer; } .pastille.actif { background: var(--accent); border-color: var(--accent); color: var(--accent-txt); font-weight: 600; } /* =================================================================== Matchs =================================================================== */ .matchs { list-style: none; margin: 8px 0 0; padding: 0; } .match { display: flex; gap: 11px; align-items: flex-start; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--bord); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; } .match:hover { background: var(--carte-2); } .match.gagne { border-left-color: var(--victoire); } .match.perdu { border-left-color: var(--defaite); } .match-issue { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: var(--accent-txt); background: var(--muet); margin-top: 2px; } .match.gagne .match-issue { background: var(--victoire); } .match.perdu .match-issue { background: var(--defaite); } .match-corps { flex: 1; min-width: 0; } .match-tete { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .match-bas { display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muet); margin-top: 3px; } .match-note { margin: 7px 0 0; font-size: .85rem; color: var(--texte); background: var(--carte-2); padding: 8px 10px; border-radius: 9px; } .match-points { flex: 0 0 auto; font-weight: 700; color: var(--victoire); font-size: .92rem; } .exploit { font-size: .95rem; } .puce { display: inline-block; background: var(--carte-2); border: 1px solid var(--bord); border-radius: 999px; padding: 1px 9px; font-size: .74rem; color: var(--muet); white-space: nowrap; } .puce-fort { border-color: var(--accent); color: var(--accent); font-weight: 600; } .puce-faible { opacity: .8; } .puce-vert { background: var(--accent); border-color: var(--accent); color: var(--accent-txt); font-weight: 600; } .puce-coup { background: var(--accent-doux); border-color: var(--accent); color: var(--accent); font-weight: 600; } .puce-profil { border-color: var(--accent); color: var(--accent); } .puce-moment { font-style: italic; } /* =================================================================== Classement et simulateur =================================================================== */ .carte-classement { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; margin: 12px 0; box-shadow: var(--ombre); } .classement-actuel { flex: 1; } .classement-actuel .etiquette { margin-top: 0; } .echelon { display: block; font-size: 2.1rem; line-height: 1.1; color: var(--accent); } .bilan { font-size: .85rem; color: var(--muet); } .choix-cible { margin: 14px 0; } .carte-objectif { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin: 12px 0; box-shadow: var(--ombre); } .ecart { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .ecart b { font-size: 2.3rem; line-height: 1; color: var(--accent); } .ecart span { font-size: .9rem; color: var(--muet); } .jauge { height: 9px; background: var(--carte-2); border-radius: 999px; overflow: hidden; margin-bottom: 7px; } .jauge-pleine { height: 100%; background: var(--accent); border-radius: 999px; } .scenarios { list-style: none; margin: 0; padding: 0; } .scenario { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; } .scenario.meilleur { border-color: var(--accent); } .scenario-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .scenario-tete strong { font-size: 1rem; } .scenario-bas { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muet); margin-top: 5px; } /* Les victoires qui portent le bilan, nommément : c'est ce qui rend le calcul vérifiable d'un coup d'œil. */ .banque-liste { list-style: none; margin: 10px 0 8px; padding: 0; } .banque-liste li { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--bord); font-size: .86rem; } .banque-liste li:first-child { border-top: 0; } .banque-nom { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; } /* La frise du bilan projeté : douze barres et un trait de seuil. Un graphique minuscule, mais c'est le seul endroit où « quand » se lit d'un coup d'œil. */ .frise { margin: 14px 0 6px; } /* La zone des barres est un bloc à part, sans marge intérieure : c'est ce qui permet au trait de seuil de se poser au bon pourcentage. Mélanger les deux dans un seul conteneur décalait le trait de la hauteur du bandeau des mois. */ .frise-zone { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 104px; } .frise-col { flex: 1; height: 100%; display: flex; align-items: flex-end; } .frise-barre { width: 100%; background: var(--defaite); border-radius: 3px 3px 0 0; opacity: .75; } .frise-col.atteint .frise-barre { background: var(--victoire); opacity: .9; } .frise-seuil { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--accent); pointer-events: none; } .frise-legende { display: flex; gap: 3px; margin-top: 5px; } .frise-mois { flex: 1; text-align: center; font-size: .58rem; color: var(--muet); white-space: nowrap; } /* =================================================================== Graphiques =================================================================== */ /* Les deux teintes de série ont été validées : bleu et orange sont à 24,7 d'écart perceptuel en deutéranopie, là où le vert et le rouge de « victoire / défaite » n'étaient qu'à 2,6 — indistinguables. Les couleurs du reste du site gardent leur vert et leur rouge, où la lettre V ou D porte déjà l'information. */ :root { --serie-1: #2a78d6; --serie-2: #eb6834; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-1: #3987e5; --serie-2: #d95926; } } :root[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; } .g-legende { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; font-size: .8rem; color: var(--muet); } .g-cle { display: inline-flex; align-items: center; gap: 6px; } .g-pastille { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .g-pastille.s1, .g-barre.s1 { background: var(--serie-1); } .g-pastille.s2, .g-barre.s2 { background: var(--serie-2); } .g-barres { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .g-groupe { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; } .g-piles { display: flex; align-items: flex-end; gap: 2px; height: 108px; width: 100%; } .g-pile { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .g-barre { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; } .g-valeur { font-size: .66rem; color: var(--muet); line-height: 1.2; font-variant-numeric: tabular-nums; } .g-label { font-size: .68rem; color: var(--muet); margin-top: 5px; white-space: nowrap; } .g-courbe { width: 100%; height: 120px; display: block; overflow: visible; } .g-trace { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .g-trace-futur { stroke-dasharray: 4 4; opacity: .65; } .g-seuil { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } .g-aujourdhui { stroke: var(--bord); stroke-width: 1; vector-effect: non-scaling-stroke; } .g-point { fill: var(--serie-1); stroke: var(--carte); stroke-width: 1.5; } .g-point.futur { opacity: .5; } .g-axe { display: flex; justify-content: space-between; font-size: .66rem; color: var(--muet); margin-top: 4px; } .g-marque { font-style: italic; } .g-tableau summary { cursor: pointer; color: var(--accent); font-size: .84rem; padding: 8px 0; } .rendement { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 8px; } .rendement th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muet); padding: 4px 6px; font-weight: 600; } .rendement td { padding: 7px 6px; border-top: 1px solid var(--bord); } .rendement td:last-child, .rendement th:last-child { text-align: right; } .rendement tr.nul td { opacity: .55; } .banque { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .jeton { background: var(--accent-doux); border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 3px 9px; font-size: .82rem; font-weight: 600; } .jeton-hors { background: var(--carte-2); border-color: var(--bord); color: var(--muet); font-weight: 400; } /* =================================================================== Conseils =================================================================== */ .conseils { list-style: none; margin: 8px 0 0; padding: 0; } .conseil { display: flex; gap: 8px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 13px; margin-bottom: 8px; } .conseil-corps { flex: 1; min-width: 0; cursor: pointer; } .conseil-tete { display: flex; gap: 8px; align-items: baseline; } .conseil-tete strong { font-size: 1rem; } .cat { font-size: 1rem; } .conseil-texte { margin: 6px 0 0; font-size: .9rem; color: var(--texte); } .conseil-bas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: .76rem; } .etoile { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muet); padding: 0 2px; height: 32px; } .etoile.pleine { color: var(--or); } /* =================================================================== Mode court — gros, contrasté, lisible en plein soleil =================================================================== */ body.mode-court .view { padding-top: 6px; } .court-choix { margin-bottom: 14px; } .pastilles-grosses .pastille { flex: 1 1 calc(50% - 7px); display: flex; align-items: center; gap: 8px; min-height: 52px; font-size: .92rem; text-align: left; } .gros-emoji { font-size: 22px; line-height: 1; } .court-liste { margin-top: 8px; } .court-carte { background: var(--carte); border: 2px solid var(--accent); border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 12px; } .court-carte h2 { font-size: 1.32rem; line-height: 1.3; margin-bottom: 8px; } .court-carte p { font-size: 1.08rem; line-height: 1.55; margin: 0; } .court-bas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: .78rem; } /* =================================================================== Le terrain cliquable =================================================================== */ /* Le tracé prend les couleurs du thème comme le reste : c'est l'avantage d'un dessin sur une photo de court. */ :root { --terrain-sol: #a9c5a2; --terrain-ligne: #ffffff; --terrain-texte: #17251a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --terrain-sol: #2c4430; --terrain-ligne: #cfe3cb; --terrain-texte: #e8efe9; } } :root[data-theme="dark"] { --terrain-sol: #2c4430; --terrain-ligne: #cfe3cb; --terrain-texte: #e8efe9; } /* Un court est deux fois plus long que large : à pleine largeur d'écran il mangerait toute la hauteur et la liste des conseils passerait sous le pli. On le bride donc, quitte à laisser de la marge sur les côtés. */ .terrain { display: block; width: 100%; max-width: 246px; height: auto; margin: 0 auto; touch-action: manipulation; } .t-surface { fill: var(--terrain-sol); } .t-lignes { pointer-events: none; } .t-cadre { fill: none; stroke: var(--terrain-ligne); stroke-width: 2; } .t-ligne { stroke: var(--terrain-ligne); stroke-width: 1.4; } .t-filet { stroke: var(--terrain-ligne); stroke-width: 3.4; stroke-dasharray: 3 2.2; } .t-zone { cursor: pointer; } .t-zone rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 4 3; transition: fill .12s; } .t-zone text { fill: var(--terrain-texte); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; } .t-zone:hover rect { fill: rgba(255, 255, 255, .22); } .t-zone.actif rect { fill: var(--accent); stroke: var(--accent); stroke-dasharray: none; } .t-zone.actif text { fill: var(--accent-txt); } .t-zone:focus-visible rect { outline: 2px solid var(--accent); } /* La flèche porte un double tracé : un large invisible pour attraper le pouce, un fin visible pour l'œil. Viser un trait de deux pixels de large sur un téléphone serait un jeu d'adresse. */ .t-fleche { cursor: pointer; } .t-fleche-cible { fill: none; stroke: transparent; stroke-width: 24; } .t-fleche-trait { fill: none; stroke: var(--terrain-texte); stroke-width: 2; stroke-dasharray: 7 5; opacity: .55; } .t-fleche text { fill: var(--terrain-texte); font-size: 10px; font-weight: 600; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--terrain-sol); stroke-width: 3.5; opacity: .8; } .t-fleche:hover .t-fleche-trait { opacity: .9; } .t-fleche.actif .t-fleche-trait { stroke: var(--accent); stroke-width: 3.4; stroke-dasharray: none; opacity: 1; } .t-fleche.actif text { fill: var(--accent); opacity: 1; } .t-pointe { fill: var(--terrain-texte); } .t-fleche.actif .t-pointe { fill: var(--accent); } .t-compte { fill: var(--accent); } .t-compte-txt { fill: var(--accent-txt); font-size: 10px; font-weight: 700; text-anchor: middle; pointer-events: none; } .t-zone.actif .t-compte { fill: var(--carte); } .t-zone.actif .t-compte-txt { fill: var(--accent); } .terrain-bloc { margin: 10px 0 14px; } .terrain-aide { text-align: center; margin-top: 8px; } /* =================================================================== Clubs =================================================================== */ .clubs { list-style: none; margin: 8px 0 0; padding: 0; } .club-ligne { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; } .club-ligne:hover { background: var(--carte-2); border-color: var(--accent); } .club-corps { flex: 1; min-width: 0; } .club-bas { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: .78rem; color: var(--muet); } .club-score { text-align: right; flex: 0 0 auto; } .club-score b { display: block; font-size: 1.3rem; color: var(--accent); line-height: 1.1; } .fiche-tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .fiche-tete h2 { font-size: 1.2rem; } .fiche-tete > div { flex: 1; } .fiche-infos { list-style: none; margin: 0; padding: 0; } .fiche-infos li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--bord); font-size: .9rem; } .fiche-infos li:first-child { border-top: 0; } .fiche-emoji { flex: 0 0 22px; font-size: 16px; line-height: 1.4; } .orphelines { list-style: none; margin: 10px 0 0; padding: 0; } .orphelines li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--bord); font-size: .82rem; } .orphelines li:first-child { border-top: 0; } .orphelines b { color: var(--muet); flex: 0 0 auto; } /* =================================================================== Adversaires =================================================================== */ .joueurs { list-style: none; margin: 8px 0 0; padding: 0; } .joueur-ligne { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; } .joueur-ligne:hover { background: var(--carte-2); border-color: var(--accent); } .joueur-corps { flex: 1; min-width: 0; } .joueur-bilan { flex: 0 0 auto; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muet); } .joueur-bilan span { font-weight: 400; opacity: .6; margin: 0 1px; } .joueur-bilan.positif { color: var(--victoire); } .joueur-bilan.negatif { color: var(--defaite); } /* Le bilan d'une confrontation : le chiffre qu'on vient chercher, donc le plus gros de l'écran. */ .confrontation { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--carte-2); } .confrontation b { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; } .confrontation span { font-size: 1.4rem; opacity: .5; } .confrontation em { flex: 1 0 100%; font-size: .8rem; color: var(--muet); font-style: normal; } .confrontation.positif b { color: var(--victoire); } .confrontation.negatif b { color: var(--defaite); } .comptes { list-style: none; margin: 6px 0 0; padding: 0; } .comptes li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--bord); padding: 4px 0; } .comptes li:first-child { border-top: 0; } .comptes a { flex: 1; display: flex; align-items: center; gap: 11px; padding: 9px 4px; text-decoration: none; color: var(--texte); min-height: 44px; } .comptes a:hover { color: var(--accent); } .compte-nom { display: flex; flex-direction: column; } .compte-nom small { font-size: .76rem; } /* =================================================================== Le sac : courses, raquettes, cordages, chaussures =================================================================== */ .courses { list-style: none; margin: 8px 0 0; padding: 0; } .course { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--bord); min-height: 46px; } .course:first-child { border-top: 0; } .course.pris { opacity: .5; } .course.pris .course-nom { text-decoration: line-through; } /* Une case dessinée plutôt qu'un emoji : les emoji de case à cocher prennent la couleur de la police système et jurent avec le thème. */ .coche { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 2px solid var(--bord); border-radius: 7px; background: var(--fond); color: transparent; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .coche:hover { border-color: var(--accent); } .course.pris .coche { background: var(--accent); border-color: var(--accent); color: var(--accent-txt); } .course-icone { font-size: 20px; flex: 0 0 24px; text-align: center; } .course-nom { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; font-size: .92rem; } .course-nom small { font-size: .76rem; } /* La palette d'icônes : on choisit plus vite qu'on ne tape. */ .palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 4px 0 12px; } @media (max-width: 420px) { .palette { grid-template-columns: repeat(6, 1fr); } } .icone { aspect-ratio: 1; border: 1px solid var(--bord); border-radius: 9px; background: var(--fond); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .icone:hover { background: var(--carte-2); } .icone.actif { background: var(--accent); border-color: var(--accent); } .carte-retiree { opacity: .62; } .cordages { list-style: none; margin: 8px 0 0; padding: 0; } .cordage { display: flex; gap: 11px; align-items: flex-start; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--bord); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; cursor: pointer; } .cordage:hover { background: var(--carte-2); } .cordage.casse { border-left-color: var(--defaite); } .cordage-date { flex: 0 0 auto; font-size: .78rem; color: var(--muet); font-variant-numeric: tabular-nums; padding-top: 2px; } .cordage-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* =================================================================== Fenêtres =================================================================== */ .modal-fond { position: fixed; inset: 0; z-index: 60; background: rgba(10, 18, 12, .5); display: flex; align-items: flex-end; justify-content: center; padding: 0; } .modal { background: var(--carte); width: 100%; max-width: 560px; max-height: 92dvh; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; } .modal-large { max-width: 760px; } .modal-tete { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--bord); } .modal-tete h2 { flex: 1; font-size: 1.06rem; } .modal-corps { padding: 16px; overflow-y: auto; flex: 1; } .modal-pied { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); } .modal-pied .btn { flex: 1; } @media (min-width: 620px) { .modal-fond { align-items: center; padding: 20px; } .modal { border-radius: 18px; } .modal-pied .btn { flex: 0 0 auto; } } /* =================================================================== Formulaires =================================================================== */ .form label { display: block; margin-bottom: 12px; font-size: .84rem; font-weight: 600; color: var(--muet); } .form input, .form select, .form textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; min-height: 44px; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond); color: var(--texte); font: inherit; font-size: 16px; /* moins de 16 px, et iOS zoome à la mise au point */ font-weight: 400; } .form textarea { resize: vertical; line-height: 1.5; } .form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form fieldset { border: 1px solid var(--bord); border-radius: 12px; padding: 10px 12px 12px; margin: 0 0 14px; } .form legend { font-size: .84rem; font-weight: 600; color: var(--muet); padding: 0 4px; } .form details { margin-bottom: 12px; } .form details summary { cursor: pointer; color: var(--accent); font-size: .88rem; font-weight: 500; padding: 8px 0; } .grille-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } @media (max-width: 420px) { .grille-cases { grid-template-columns: 1fr; } } .case { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; padding: 8px 4px; font-weight: 400 !important; color: var(--texte) !important; font-size: .88rem !important; cursor: pointer; min-height: 40px; } .case input { width: 20px !important; min-height: 20px !important; margin: 0 !important; flex: 0 0 20px; accent-color: var(--accent); } .case-seule { border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; } .ligne-bareme { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px !important; font-weight: 400 !important; color: var(--texte) !important; font-size: .88rem !important; } .ligne-bareme input { width: 90px !important; flex: 0 0 90px; margin-top: 0 !important; } .marche-a-suivre { padding-left: 20px; margin: 0 0 12px; font-size: .9rem; line-height: 1.7; } /* =================================================================== Aperçu d'import =================================================================== */ .resume-import { background: var(--accent-doux); border-radius: 10px; padding: 9px 12px; margin: 12px 0 8px; font-size: .88rem; } .note-vide { color: var(--muet); font-size: .86rem; padding: 14px; text-align: center; border: 1px dashed var(--bord); border-radius: 10px; margin-top: 12px; } .tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tableau-import { border-collapse: collapse; width: 100%; font-size: .82rem; } .tableau-import th { text-align: left; color: var(--muet); font-size: .72rem; padding: 4px 5px; white-space: nowrap; } .tableau-import td { padding: 3px 5px; border-top: 1px solid var(--bord); } .tableau-import input, .tableau-import select { width: 100%; min-width: 88px; padding: 7px 8px; min-height: 38px; border: 1px solid var(--bord); border-radius: 8px; background: var(--fond); color: var(--texte); font: inherit; font-size: .82rem; } .tableau-import tr.douteux td { background: color-mix(in srgb, var(--alerte) 12%, transparent); } /* =================================================================== Ajout rapide =================================================================== */ .grille-rapide { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .bouton-rapide { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 13px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--texte); font: inherit; text-align: left; cursor: pointer; min-height: 88px; } .bouton-rapide:hover { background: var(--carte-2); border-color: var(--accent); } .bouton-rapide .qi { font-size: 22px; line-height: 1.3; } .bouton-rapide b { font-size: .92rem; } /* =================================================================== Messages passagers =================================================================== */ .toast-root { position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; } .toast { background: var(--texte); color: var(--fond); padding: 11px 17px; border-radius: 11px; font-size: .88rem; max-width: 460px; opacity: 0; transform: translateY(10px); transition: opacity .22s, transform .22s; box-shadow: 0 4px 18px rgba(0, 0, 0, .28); } .toast.vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } }