/* SMAASH — design system partagé pour les 3 sites (Éditeur / Président / Joueur). */ :root { --navy: #0b1f3a; --navy-light: #14294d; --ink: #101828; --paper: #f5f7fb; --white: #ffffff; --border: #e2e6ee; --muted: #667085; --lime: #c6ff3d; --lime-dark: #9fd800; --orange: #ff5a36; --red: #e0433a; --green: #1f9d55; --radius: 14px; --shadow: 0 4px 16px rgba(11, 31, 58, 0.08); --accent: var(--lime); --accent-ink: var(--navy); font-size: 16px; } /* Accent par rôle : posé sur */ body[data-role="editeur"] { --accent: #7c5cff; --accent-ink: #ffffff; } body[data-role="president"] { --accent: #17b6a7; --accent-ink: #ffffff; } body[data-role="joueur"] { --accent: var(--orange); --accent-ink: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--paper); color: var(--ink); min-height: 100vh; } a { color: inherit; } h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.25; } p { line-height: 1.55; } button { font-family: inherit; } .app-header { background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } .app-header .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.5px; font-size: 1.1rem; } .app-header .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .brand-logo { height: 30px; width: 30px; border-radius: 8px; object-fit: cover; display: block; flex-shrink: 0; } .app-header .role-badge { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; background: rgba(255,255,255,0.12); padding: 3px 9px; border-radius: 999px; margin-left: 8px; } .app-header nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .app-header nav a, .app-header nav button { color: #cfd8e8; text-decoration: none; font-size: 0.92rem; padding: 8px 12px; border-radius: 8px; border: none; background: transparent; cursor: pointer; } .app-header nav a.active, .app-header nav a:hover, .app-header nav button:hover { background: rgba(255,255,255,0.1); color: #fff; } .app-header .user-chip { font-size: 0.85rem; color: #aeb9cf; margin-left: 10px; } /* Variante 3 zones (logo/catégorie à gauche, identité au centre, action à droite) utilisée par l'espace Joueur. */ .app-header.with-center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .app-header.with-center .brand { justify-self: start; } .app-header.with-center nav { justify-self: end; } .app-header .header-center { justify-self: center; text-align: center; color: #fff; font-weight: 700; font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 8px; } .app-header .brand-category { margin-left: 4px; padding-left: 10px; border-left: 1.5px solid rgba(255,255,255,0.28); opacity: 0.92; } .icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } .icon-btn:hover { background: rgba(255,255,255,0.24); } /* Espace Joueur : header en orange (couleur du logo SMAASH), logo avec une ombre portée marquée. Typographie (SMAASH, nom du joueur) et icônes (silhouette profil, croix déconnexion) en blanc uni, comme sur fond navy des autres espaces — seule la silhouette "Mon profil" est sans cartouche (pas de fond circulaire), cf. .icon-btn-plain ci-dessous. */ body[data-role="joueur"] .app-header { background: var(--orange); } body[data-role="joueur"] .app-header .brand-logo { box-shadow: 0 8px 18px rgba(11, 31, 58, 0.5); } .icon-btn-plain { background: transparent; } .icon-btn-plain:hover { background: rgba(255,255,255,0.18); } .container { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; } .container.narrow { max-width: 480px; } .container.medium { max-width: 720px; } .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; } .card h2 { font-size: 1.15rem; } .card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* Cartouche compacte (ex: synthèse des tournois passés côté joueur) : padding réduit, nom + date sur une seule ligne, pour tenir plus de contenu sans scroller sur mobile. */ .card-compact { padding: 14px 18px; margin-bottom: 12px; } .card-compact .row { font-size: 0.95rem; } .grid { display: grid; gap: 16px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .kpi .value { font-size: 1.9rem; font-weight: 800; color: var(--navy); } .kpi .label { color: var(--muted); font-size: 0.85rem; margin-top: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; padding: 11px 18px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.05s ease, opacity 0.15s ease; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { opacity: 0.92; } .btn-secondary { background: var(--navy); color: #fff; } .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--navy); } .btn-danger { background: #fdeceb; color: var(--red); } .btn-danger:hover { background: #fbd9d6; } /* Vert identique au bouton "+ Nouveau tournoi" côté Président (--accent de ce rôle), utilisé ici pour "Envoyer le score" indépendamment du rôle courant. */ .btn-green { background: #17b6a7; color: #fff; } .btn-green:hover { opacity: 0.92; } .btn-block { width: 100%; } .btn-sm { padding: 7px 12px; font-size: 0.83rem; border-radius: 8px; } .btn-lg { padding: 16px 22px; font-size: 1.05rem; border-radius: 14px; } label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin: 14px 0 6px; } label:first-child { margin-top: 0; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input[type="tel"], select, textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.98rem; background: #fff; color: var(--ink); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } /* Champ signalé manquant/invalide après une validation refusée côté serveur (ex. onboarding club : tous les champs sont requis pour valider la fiche). */ input.input-error, select.input-error, textarea.input-error { border-color: var(--red); background: #fdeceb; } .field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 4px; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 0.88rem; color: var(--ink); } .checkbox-row input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; } tr:last-child td { border-bottom: none; } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; } .badge-green { background: #e6f7ec; color: var(--green); } .badge-orange { background: #fff1e8; color: var(--orange); } .badge-red { background: #fdeceb; color: var(--red); } .badge-gray { background: #eef0f4; color: var(--muted); } .badge-navy { background: #e7ecf7; color: var(--navy); } .empty-state { text-align: center; padding: 48px 20px; color: var(--muted); } .empty-state h3 { color: var(--ink); margin-bottom: 6px; } .toast-stack { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 0.9rem; max-width: 320px; animation: slidein 0.2s ease; } .toast.error { background: var(--red); } .toast.success { background: var(--green); } @keyframes slidein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .spinner { width: 20px; height: 20px; border: 3px solid rgba(0,0,0,0.1); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; } .tabs button { background: none; border: none; padding: 10px 14px; font-size: 0.92rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; position: relative; } .tabs button.active { color: var(--navy); font-weight: 800; border-bottom: 5px solid var(--accent); } /* Pastille "Maintenant" : nombre de matchs prêts à jouer, tous tournois "en_cours" confondus — affichée uniquement quand le joueur suit plusieurs tournois simultanément (sinon l'info est déjà évidente sur l'onglet lui-même). */ .tab-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.64rem; font-weight: 800; display: none; align-items: center; justify-content: center; line-height: 1; } /* Sélecteur de tournoi (joueur actif sur plusieurs tournois "en_cours" en même temps) */ .tournoi-switcher { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .tournoi-switch-btn { background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 0.84rem; font-weight: 700; color: var(--muted); cursor: pointer; } .tournoi-switch-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); padding: 20px; } .login-card { background: #fff; border-radius: 20px; padding: 36px 32px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 1.4rem; color: var(--navy); margin-bottom: 4px; } .login-logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); } .login-logo img { width: 88px; height: auto; display: block; margin: 0 auto; } .login-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 22px; } .login-error { background: #fdeceb; color: var(--red); padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; margin-top: 14px; } .login-demo { margin-top: 18px; padding: 12px 14px; background: var(--paper); border-radius: 10px; font-size: 0.78rem; color: var(--muted); } .login-demo code { background: #fff; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border); } .match-card { text-align: center; padding: 16px 20px; } .match-card .vs { color: var(--muted); font-weight: 700; margin: 6px 0; } .match-card .team { font-size: 1.15rem; font-weight: 700; color: var(--navy); } .court-pill { display: inline-block; background: var(--navy); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-bottom: 14px; } /* Même gabarit que .matches-banner (cartouche pleine largeur), en orange : utilisé pour "Maintenant" et "Enregistrer le score" côté Joueur. Cartouche volontairement compacte (padding réduit, titre plus petit) pour que tout l'onglet "Maintenant" tienne sur un écran de smartphone sans scroller. */ .now-banner { background: var(--orange); color: #fff; border-radius: var(--radius); padding: 10px 18px; margin-bottom: 8px; box-shadow: var(--shadow); } .now-banner h2 { color: #fff; margin: 0; font-size: 1.05rem; } .now-banner p { color: rgba(255,255,255,0.85); margin: 2px 0 0; font-size: 0.8rem; font-variant-numeric: tabular-nums; } .mc-you { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin: 2px 0; } .mc-amp { color: var(--muted); font-weight: 700; font-size: 0.85rem; margin: 0; } .mc-person { margin: 2px 0; } .mc-person .mc-prenom { font-size: 1.05rem; font-weight: 800; color: var(--navy); } .mc-person .mc-surname { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-top: 1px; } .mc-vs-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; } .mc-vs-divider::before, .mc-vs-divider::after { content: ""; flex: 1; height: 2px; background: var(--border); } .mc-vs-divider span { color: var(--muted); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.5px; } .score-input-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0; } .score-input-row input { width: 90px; text-align: center; font-size: 1.6rem; font-weight: 800; padding: 14px 8px; } .score-input-row .dash { font-size: 1.4rem; color: var(--muted); font-weight: 700; } .stepper-controls { display: flex; align-items: center; justify-content: center; gap: 12px; } .stepper-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--border); background: var(--paper); font-size: 1.7rem; font-weight: 800; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; line-height: 1; padding: 0; } .stepper-btn:active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: scale(0.94); } .stepper-value { min-width: 64px; text-align: center; font-size: 2.1rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; } .rules-banner { background: #fff4e5; border: 1px solid #ffd9a0; color: #8a5a00; border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; text-align: center; margin-bottom: 4px; } .rules-plain { color: var(--ink); font-size: 0.74rem; line-height: 1.5; text-align: center; margin: 6px 0 14px; } .rules-plain strong { color: var(--ink); } .matches-banner { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow); } .matches-banner h2 { color: #fff; margin: 0; } .matches-banner p { color: rgba(255,255,255,0.72); margin: 4px 0 0; font-size: 0.85rem; } /* Ligne 1 du cartouche (nom du club) : un cran au-dessus du titre (nom du tournoi), même principe visuel qu'un "kicker" éditorial. */ .matches-banner .club-line { color: rgba(255,255,255,0.78); margin: 0 0 3px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .match-history-item { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; } .match-history-item .mh-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 0.8rem; color: var(--muted); } .match-history-item .mh-teams { font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; } .match-history-item .mh-line { font-size: 0.92rem; margin-bottom: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; } .match-history-item .mh-role { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); min-width: 88px; } .match-history-item .mh-names { font-weight: 700; color: var(--navy); } .match-history-item .mh-score { font-size: 1.3rem; font-weight: 800; color: var(--navy); } .rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .rank-row:last-child { border-bottom: none; } .rank-row .pos { width: 26px; text-align: center; font-weight: 800; color: var(--muted); } .rank-row.me { background: #fff8ec; border-radius: 10px; } .rank-row .name { flex: 1; font-weight: 600; } .rank-row .pts { font-weight: 800; } .rank-row .pts.pos-pts { color: var(--green); } .rank-row .pts.neg-pts { color: var(--red); } .court-card { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; } .court-card .court-title { font-weight: 700; color: var(--navy); font-size: 0.85rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; } .court-card .team-line { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; padding: 3px 0; } .top-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .muted { color: var(--muted); } .text-center { text-align: center; } .stack { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } hr.sep { border: none; border-top: 1px solid var(--border); margin: 18px 0; } .copy-box { display: flex; gap: 8px; } .copy-box input { flex: 1; background: var(--paper); } .progress-bar { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-bar .fill { height: 100%; background: var(--accent); transition: width 0.3s ease; } .timer-ring { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; } .modal-overlay { position: fixed; inset: 0; background: rgba(11, 31, 58, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-card { background: #fff; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 26px 24px; } .modal-params { margin: 16px 0; } .modal-params .row-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .modal-params .row-line:last-child { border-bottom: none; } .modal-params .row-line .label { color: var(--muted); } .modal-params .row-line .value { font-weight: 600; color: var(--navy); text-align: right; } @media (max-width: 640px) { .container { padding: 16px 14px 48px; } .app-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; } .app-header nav { width: 100%; justify-content: flex-start; } .app-header.with-center { flex-wrap: nowrap; } .app-header.with-center nav { width: auto; } .app-header .header-center { font-size: 0.82rem; } .app-header .brand-category { display: none; } .score-input-row input { width: 72px; font-size: 1.3rem; } /* Le pavé de saisie du score (2 steppers +/- côte à côte) est dimensionné pour desktop par défaut (~436px de large) et dépassait la largeur utile d'un écran de smartphone (~300px dans une carte), faisant sortir les boutons +/- de l'écran. On réduit boutons/espacements pour tenir sur les tailles de mobile courantes, avec un repli en 2 lignes (flex-wrap) en filet de sécurité sur les téléphones les plus étroits. */ .score-input-row { gap: 6px; flex-wrap: wrap; row-gap: 14px; } .score-input-row .dash { font-size: 1.1rem; } .stepper-controls { gap: 6px; } .stepper-btn { width: 40px; height: 40px; font-size: 1.3rem; } .stepper-value { min-width: 42px; font-size: 1.5rem; } }