:root { /* Palette Marine (par défaut) : bleu marine profond en dominante (fonds, en-tête), argenté/ blanc pour les surfaces et le texte, vert et jaune gardés en touches ponctuelles seulement (jamais en grande surface) — pensée pour parler à n'importe quel club en démo, pas à un club fictif précis. Remplace l'ancienne palette "Jura" (vert forêt + argent + lion doré). Deux autres palettes sélectionnables depuis l'appli (menu avatar) : voir les blocs [data-theme="mono"] et [data-theme="red"] plus bas — même structure de jetons, tout le reste du fichier ne référence QUE ces variables (plus aucune couleur écrite en dur), donc changer data-theme sur change instantanément toute l'appli. Les jetons "-rgb" (triplet r,g,b sans parenthèses) existent pour permettre rgba(var(--x-rgb), alpha) dans les endroits qui ont besoin de transparence — CSS ne permet pas d'extraire r/g/b d'une couleur hexadécimale directement. */ --accent: #4a6f94; --accent-rgb: 74,111,148; --accent2: #9db4c7; --accent2-rgb: 157,180,199; --gold: #d3bd6e; --gold-rgb: 211,189,110; --sage: #8fab8a; --sage-rgb: 143,171,138; --silver: #e7ecf1; --navy: #0e2038; --navy-rgb: 14,32,56; --red-accent: #b6303a; --grad: linear-gradient(135deg, var(--navy) 0%, var(--accent) 55%, var(--silver) 100%); --glow: radial-gradient(circle, rgba(var(--accent2-rgb),0.3), transparent 70%); --font-disp: 'DM Sans', sans-serif; /* Couleur du logo (voir renderClubLogoMark dans render.js) : bleu en Marine, rouge en Rouge mat (les deux suivent simplement --accent de la palette active), blanc forcé en Noir & blanc (voir l'override ci-dessous) — demande explicite, pas le gris de --accent. */ --logo-color: var(--accent); --logo-color-rgb: var(--accent-rgb); } :root[data-theme="mono"] { /* Noir & blanc : gris neutres du noir au blanc, aucune teinte dominante — la palette la plus sobre des trois, pensée pour un rendu "épuré" en démo. */ --accent: #71717a; --accent-rgb: 113,113,122; --accent2: #d4d4d8; --accent2-rgb: 212,212,216; --gold: #a1a1aa; --gold-rgb: 161,161,170; --sage: #9a9aa2; --sage-rgb: 154,154,162; --silver: #f4f4f5; --navy: #09090b; --navy-rgb: 9,9,11; --grad: linear-gradient(135deg, var(--navy) 0%, var(--accent) 55%, var(--silver) 100%); --glow: radial-gradient(circle, rgba(var(--accent2-rgb),0.3), transparent 70%); --logo-color: #ffffff; --logo-color-rgb: 255,255,255; } :root[data-theme="red"] { /* Rouge mat : rouge brique désaturé (pas un rouge d'alerte vif), avec les mêmes rôles de jetons que les deux autres palettes. --red-accent (erreurs/alertes) reste indépendant. */ --accent: #8c3338; --accent-rgb: 140,51,56; --accent2: #c48a8d; --accent2-rgb: 196,138,141; --gold: #c9a154; --gold-rgb: 201,161,84; --sage: #8a9a7a; --sage-rgb: 138,154,122; --silver: #f2e9e8; --navy: #1a0d0e; --navy-rgb: 26,13,14; --grad: linear-gradient(135deg, var(--navy) 0%, var(--accent) 55%, var(--silver) 100%); --glow: radial-gradient(circle, rgba(var(--accent2-rgb),0.3), transparent 70%); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } @keyframes cardCascadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes navIconBounce { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } html, body { margin: 0; padding: 0; background: #07080d; overflow-x: hidden; } body { position: relative; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: #e8e8ee; padding-bottom: calc(92px + env(safe-area-inset-bottom)); min-height: 100vh; } /* Fond nuancé selon la palette active (Marine/Noir & blanc/Rouge mat) : un dégradé + quelques halos lumineux radiaux, jamais une image — s'étire proprement quelle que soit la longueur de la page (une image tuilée aurait un raccord visible sur une page longue). position:relative + z-index:1 sur #app : fait passer tout son contenu au-dessus du wordmark en filigrane (#bg-wordmark, voir plus bas), sans avoir à positionner chaque carte une par une. */ /* Le fond vit dans une couche FIXÉE À L'ÉCRAN, pas sur #app. Deux raisons, toutes deux constatées à l'usage : - sur une page courte, un fond porté par #app s'arrêtait à la hauteur du contenu et laissait du noir en dessous ; - sur une page longue (200+ événements), les traits diagonaux s'étiraient sur toute la hauteur du document et devenaient invisibles. Fixé au viewport, le fond couvre toujours exactement l'écran de l'appareil, quelle que soit la longueur de la page. */ #fond { position: fixed; inset: 0; /* z-index 0 et non -1 : un z-index négatif ferait passer cette couche DERRIÈRE le fond du body, qui la masquerait entièrement. #app est en z-index 1, donc il reste au-dessus. */ z-index: 0; pointer-events: none; background-color: var(--navy); background-image: var(--fond, var(--fond-clubord)); background-size: var(--fond-taille, auto); background-position: top center; background-repeat: var(--fond-repetition, no-repeat); } #app { position: relative; z-index: 1; max-width: 100%; padding: 12px; /* Le cadre descend toujours jusqu'au menu, même quand la page est vide : sinon il "remonte" au milieu de l'écran et se détache visuellement du menu resté en bas. dvh (et non vh) suit la barre d'adresse mobile. */ box-sizing: border-box; min-height: calc(100vh - 104px - env(safe-area-inset-bottom)); min-height: calc(100dvh - 104px - env(safe-area-inset-bottom)); } :root { --fond-clubord: radial-gradient(480px 340px at 18% 6%, rgba(var(--accent-rgb),0.5), transparent 60%), radial-gradient(420px 320px at 88% 30%, rgba(var(--accent2-rgb),0.35), transparent 62%), radial-gradient(360px 300px at 30% 78%, rgba(var(--gold-rgb),0.22), transparent 65%), linear-gradient(180deg, rgba(var(--accent-rgb),0.16) 0%, transparent 45%, rgba(var(--accent-rgb),0.16) 100%); } /* Wordmark "Clubord" en filigrane néon : fixe au centre exact de l'écran (pas du document), reste immobile pendant que le contenu défile par-dessus (voir #app plus haut pour l'empilement). Sibling direct de #app dans index.html — jamais touché par les reconstructions de render(). */ #bg-wordmark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); width: 130vw; text-align: center; pointer-events: none; z-index: 0; font-size: clamp(48px, 18vw, 110px); font-weight: 800; letter-spacing: 1px; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; /* à ajuster avec la designeuse */ background: linear-gradient(135deg, #fff 10%, rgba(var(--accent2-rgb),1) 60%, rgba(var(--accent-rgb),1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(var(--accent2-rgb),0.5)) drop-shadow(0 0 54px rgba(var(--accent-rgb),0.38)); } .header { display: flex; align-items: center; gap: 16px; margin: -12px -12px 18px; padding: calc(env(safe-area-inset-top) + 34px) 20px 48px; background: linear-gradient(180deg, var(--navy) 0%, var(--navy) 32%, rgba(var(--navy-rgb),0) 100%); position: relative; } .header::before { content: ""; position: absolute; top: -30px; right: -40px; width: 220px; height: 220px; background: var(--glow); z-index: 1; pointer-events: none; } /* Logo Clubord en SVG inline (voir renderClubLogoMark, js/core/render.js) : le tracé n'a pas de couleur propre, tout passe par --logo-color/--logo-color-rgb pour suivre la palette active (bleu/rouge/blanc) — voir les jetons dans :root plus haut. Halo (drop-shadow) pour se détacher du fond, demandé explicitement. */ .club-logo-img { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; position: relative; z-index: 2; flex-shrink: 0; background: rgba(255,255,255,0.06); padding: 3px; } .club-logo-mark { position: relative; z-index: 2; flex-shrink: 0; overflow: visible; filter: drop-shadow(0 0 3px rgba(255,255,255,0.5)) drop-shadow(0 0 10px rgba(var(--logo-color-rgb),0.65)); } .club-logo-mark path { stroke: var(--logo-color); } .club-logo-mark circle { fill: var(--logo-color); } .header .club-logo-mark { height: 70px; width: 70px; } .hdr-textwrap { min-width: 0; overflow: hidden; } .header .title { font-family: var(--font-disp); font-size: 30px; font-weight: 700; color: #fff; letter-spacing: 0.2px; line-height: 1; position: relative; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .subtitle { font-size: 12px; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; margin-top: 6px; position: relative; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header.home-header .club-logo-mark { height: 78px; width: 78px; } .header.home-header .title { font-size: 34px; } .header.home-header .subtitle { font-size: 12.5px; } .header .spacer { flex: 1; } .logout-link { font-size: 11px; color: #e4e8f2; text-decoration: underline; cursor: pointer; } .badge { font-size: 9px; padding: 2px 8px; border-radius: 8px; background: #1a1f30; color: var(--accent); border: 1px solid #243049; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .sport-toggle-wrap { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 8px; } .sport-toggle-item { position: relative; } .sport-toggle-btn { padding: 7px 12px; border-radius: 20px; border: 1px solid rgba(var(--accent2-rgb),0.35); background: rgba(255,255,255,0.08); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: 'DM Sans', sans-serif; } .sport-toggle-btn:active { transform: scale(0.96); } .sport-toggle-menu { top: 40px; right: 0; min-width: 190px; } .avatar-wrap { position: relative; z-index: 2; } .avatar-btn { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; font-family: var(--font-disp); cursor: pointer; transition: transform 0.12s; flex-shrink: 0; position: relative; z-index: 2; box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.4), inset 0 1px 0 rgba(255,255,255,0.18); text-shadow: 0 0 14px rgba(255,255,255,0.55); } .avatar-btn:active, .avatar-btn.tap-active { transform: scale(0.92); } .avatar-menu { position: absolute; top: 60px; right: 0; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 10px; min-width: 200px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .avatar-menu-name { font-size: 15px; font-weight: 800; color: #fff; padding: 4px 6px 2px; } .avatar-menu-role { margin: 0 6px 8px; } .avatar-menu-item { padding: 13px 8px; font-size: 15px; font-weight: 700; color: #e4e8f2; cursor: pointer; border-top: 1px solid #1a2030; transition: background 0.12s; border-radius: 8px; } .avatar-menu-item:hover, .avatar-menu-item.tap-active { background: #1a1f30; } .avatar-menu-item.disabled { color: #e4e8f2; cursor: default; } .avatar-menu-item.disabled:hover, .avatar-menu-item.disabled.tap-active { background: transparent; } .avatar-menu-item.danger { color: #ff5a5a; } /* transform/backface : force le menu sur sa propre couche GPU. Sans ça, iOS Safari "décroche" un position:fixed pendant le défilement par inertie et les changements de page — le menu apparaît alors en plein milieu de l'écran avant de revenir en bas (constaté sur iPhone). Aucun descendant du menu n'est en position:fixed, donc créer ce nouveau bloc conteneur n'a aucun effet de bord (.nav-pill et .bn-extra-menu sont en position:absolute). */ .bottom-nav { position: fixed; bottom: 10px; left: 10px; right: 10px; background: #11141f; border: 1px solid #1c2333; border-radius: 22px; display: flex; padding: 10px 6px; z-index: 50; box-shadow: 0 8px 30px rgba(0,0,0,0.45); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .nav-pill { position: absolute; top: 8px; bottom: 8px; left: 0; width: 0; background: rgba(var(--accent-rgb),0.16); border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 16px; pointer-events: none; } .bottom-nav button, .bottom-nav .bn-select-wrap { flex: 1; min-width: 0; position: relative; z-index: 1; } .bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: #e4e8f2; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 2px; cursor: pointer; transition: transform 0.12s, color 0.15s; } .bottom-nav button:active, .bottom-nav button.tap-active { transform: scale(0.9); } .bottom-nav button.active { color: var(--accent); } .bottom-nav button.active svg { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.6)); } .bottom-nav svg { width: 24px; height: 24px; } .bn-select-wrap { position: relative; display: flex; flex-direction: column; align-items: center; } .bn-select-wrap svg { width: 24px; height: 24px; color: #e4e8f2; margin-bottom: 4px; pointer-events: none; } .bn-select-wrap.active svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.6)); } .bn-select-trigger { display: flex; flex-direction: column; align-items: center; background: none; border: none; padding: 0; cursor: pointer; font-family: 'DM Sans', sans-serif; width: 100%; } .bn-select-label { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #e4e8f2; pointer-events: none; } .bn-select-wrap.active .bn-select-label { color: var(--accent); } .bn-extra-menu { position: absolute; bottom: 100%; right: -8px; margin-bottom: 12px; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 10px; min-width: 170px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .avatar-menu-item.active { color: var(--accent2); } select, input, textarea { font-size: 15px; padding: 10px; border-radius: 10px; border: 1px solid #1c2333; background: #11141f; color: #e8e8ee; width: 100%; font-family: 'DM Sans', sans-serif; color-scheme: dark; } textarea { resize: vertical; } select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } input[type="date"], input[type="time"] { padding: 9px 10px; height: 44px; } table { border-collapse: collapse; width: 100%; font-size: 11px; } th, td { border: 1px solid #1c2333; padding: 5px 4px; text-align: center; white-space: nowrap; color: #e4e8f2; } th { background: #151827; color: #fff; position: sticky; top: 0; z-index: 5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; } td.action-name, th.action-name { text-align: left; min-width: 150px; font-weight: 600; background: #11141f; color: #e8e8ee; } tr.total-row td { font-weight: 800; background: #1a1710; color: #ffd23f; } .cell-euro { font-size: 9px; color: #ff7849; margin-top: 1px; font-weight: 600; } .table-wrap { overflow-x: auto; max-height: 70vh; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),0.28); } .card { background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 16px; padding: 16px; margin-bottom: 12px; position: relative; overflow: hidden; } .big-number { font-size: 32px; font-weight: 700; font-family: var(--font-disp); color: var(--accent); letter-spacing: 0; } .big-number.green { color: #33d17a; } .big-number.red { color: #ff5a5a; } .muted { color: #e4e8f2; font-size: 12px; font-weight: 500; } .row-flex { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .pill { display: inline-block; padding: 6px 12px; border-radius: 20px; background: #1a1f30; color: #ff8a5c; font-size: 11px; margin: 3px; border: 1px solid #2a2340; font-weight: 600; } .btn { padding: 12px 14px; border-radius: 12px; border: none; background: var(--grad); color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; width: 100%; font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.3px; transition: transform 0.12s, filter 0.15s; } .btn:active, .btn.tap-active { transform: scale(0.96); filter: brightness(0.92); } .btn.secondary { background: #1a1f30; color: #e4e8f2; border: 1px solid #243049; } .status-bar { font-size: 10px; padding: 8px 10px; border-radius: 10px; margin-bottom: 10px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .status-online { background: rgba(51,209,122,0.1); color: #33d17a; border: 1px solid rgba(51,209,122,0.25); } .status-offline { background: rgba(255,90,90,0.1); color: #ff5a5a; border: 1px solid rgba(255,90,90,0.25); } .entry-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #1a2030; } .entry-row:last-child { border-bottom: none; } .entry-name { flex: 1; font-size: 13px; color: #e8e8ee; font-weight: 600; } .entry-value { font-size: 11px; color: #e4e8f2; margin-top: 2px; } .entry-select { width: 76px; flex-shrink: 0; } .cn-hero { text-align: center; background: linear-gradient(160deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent2-rgb),0.06)); border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 20px; padding: 22px 16px; margin-bottom: 14px; box-shadow: 0 0 30px rgba(var(--accent-rgb),0.12), inset 0 0 24px rgba(var(--accent2-rgb),0.05); } .cn-hero-label { font-size: 12px; color: #e4e8f2; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px; } .cn-hero-value { font-size: 44px; font-weight: 700; font-family: var(--font-disp); color: #fff; letter-spacing: 0; text-shadow: 0 0 24px rgba(var(--accent2-rgb),0.45); } .cn-hero-sub { font-size: 10.5px; color: #e4e8f2; font-weight: 700; margin-top: 4px; } .cn-add-btn { margin-bottom: 14px; } .cn-card { padding: 15px 16px; } .cn-row { display: flex; align-items: flex-start; gap: 12px; } .cn-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; margin-top: 1px; } .cn-info { flex: 1; min-width: 0; } .cn-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cn-name { font-size: 14px; font-weight: 700; color: #fff; } .cn-amount { font-size: 15px; font-weight: 700; font-family: var(--font-disp); color: #ff7849; flex-shrink: 0; } .cn-actions { font-size: 11px; color: #e4e8f2; margin-top: 3px; font-weight: 600; line-height: 1.6; } .cn-actions.muted { color: #4a5670; font-style: italic; } .cn-bubbles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .cn-bubble { display: inline-flex; align-items: center; gap: 5px; background: #1a1f30; border: 1px solid #243049; color: #e4e8f2; font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 20px; white-space: nowrap; } .cn-bubble-val { color: #ff8a5c; font-weight: 800; } .cn-bubble-more { color: var(--accent2); border-color: rgba(var(--accent2-rgb),0.35); background: rgba(var(--accent2-rgb),0.08); cursor: pointer; } .cn-toggle-detail { text-align: center; font-size: 11px; color: var(--accent2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 12px 0 4px; cursor: pointer; text-decoration: underline; } .add-btn-primary { margin-bottom: 14px; } .qty-stepper { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 0 2px; } .qty-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #1c2333; background: #11141f; color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform 0.12s, background 0.15s; flex-shrink: 0; } .qty-btn:active, .qty-btn.tap-active { transform: scale(0.92); background: var(--grad); } .qty-value { min-width: 48px; text-align: center; font-size: 24px; font-weight: 900; color: #fff; } .presence-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #1a2030; } .presence-row:last-child { border-bottom: none; } .toggle-btn { padding: 9px 15px; border-radius: 10px; border: 1px solid #1c2333; background: #11141f; color: #e4e8f2; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform 0.12s, background 0.15s; } .toggle-btn:active, .toggle-btn.tap-active { transform: scale(0.94); } .toggle-btn.present { background: #1a7a3f; color: #fff; border-color: #1a7a3f; } /* Bascule Présent/Absent — pilule segmentée unique (un seul conteneur, deux moitiés), pas deux boutons colorés vert/rouge indépendants : fond légèrement encaissé par rapport à la carte (#0c0f18 sur fond de carte #11141f/pres-card #0d1018), le côté actif rempli d'un dégradé aux couleurs du club (--navy -> --accent) en texte blanc, l'autre juste en texte gris atténué (#8a92a8, la même teinte que team-switch-btn/mode-tab-btn inactifs) — se lit comme un interrupteur à deux états, pas comme deux actions distinctes. Voir agenda.js (renderNextEventCard/renderEventCard/renderEventDetailSheet) et presence.js (renderPresenceRosterSheet). */ .pres-toggle { display: flex; gap: 2px; background: #0c0f18; border: 1px solid #1c2333; border-radius: 12px; padding: 3px; } .pres-toggle-option { flex: 1; text-align: center; padding: 8px 10px; border: none; border-radius: 9px; background: transparent; color: #8a92a8; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform 0.12s, background 0.2s, color 0.2s; } .pres-toggle-option:active, .pres-toggle-option.tap-active { transform: scale(0.96); } .pres-toggle-option.active { background: linear-gradient(135deg, var(--navy), var(--accent)); color: #fff; } .nc-actions .pres-toggle { flex: 1; } /* Badge Sélectionné/Non sélectionné — remplace le toggle Présent/Absent sur la carte d'un match une fois la Sélection publiée (voir selectionStatusFor, presence.js + agenda.js). */ .selection-status-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; } .selection-status-badge.selected { background: rgba(var(--accent-rgb),0.18); border: 1px solid rgba(var(--accent-rgb),0.5); color: var(--accent2); } .selection-status-badge.not-selected { background: #1a1f30; border: 1px solid #2a3350; color: #8a8f9e; } .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 85vh; padding: 16px; } .login-card-outer { border-radius: 26px; padding: 2px; background: var(--grad); width: 100%; } @media (min-width: 700px) { .login-card-outer { max-width: 360px; } } .login-card { background: #11141fee; backdrop-filter: blur(6px); border: 1px solid rgba(var(--accent2-rgb),0.22); border-radius: 24px; padding: 36px 26px; text-align: center; position: relative; overflow: hidden; } .login-suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #181d2e; border: 1px solid rgba(var(--gold-rgb),0.35); border-radius: 12px; max-height: 220px; overflow-y: auto; z-index: 50; text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .login-suggestion-item { padding: 11px 14px; font-size: 13px; font-weight: 600; color: #e8e8ee; border-bottom: 1px solid rgba(255,255,255,0.06); } .login-suggestion-item:last-child { border-bottom: none; } .ptr-indicator { position: fixed; top: 6px; left: 50%; transform: translateX(-50%) translateY(0px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.15s linear; } .ptr-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(var(--accent2-rgb),0.25); border-top-color: var(--accent2); background: rgba(17,20,31,0.85); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .ptr-indicator.ptr-spinning .ptr-spinner { animation: ptrspin 0.7s linear infinite; } @keyframes ptrspin { to { transform: rotate(360deg); } } .login-suggestion-item:active { background: rgba(var(--gold-rgb),0.18); } .login-card .login-glow { position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: var(--glow); } .login-card .club-logo-mark { height: 130px; width: 130px; margin-bottom: 16px; } .login-card .login-title { font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -0.6px; margin-bottom: 6px; position: relative; } .login-card .login-subtitle { font-size: 13px; color: #e4e8f2; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 10px; position: relative; } .login-error { color: var(--red-accent); font-size: 13px; margin-top: 10px; font-weight: 600; } .login-spinner { width: 38px; height: 38px; margin: 6px auto 18px; border-radius: 50%; border: 3px solid rgba(var(--accent2-rgb),0.25); border-top-color: var(--accent2); animation: ptrspin 0.7s linear infinite; position: relative; } .login-busy-message { font-size: 13px; color: #e4e8f2; font-weight: 600; position: relative; } .login-card .field-label { font-size: 13px; } .login-card select, .login-card input { font-size: 17px; padding: 13px; } .field-label { display: block; text-align: left; margin: 12px 0 5px; font-size: 11px; color: #e4e8f2; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } .paiement-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #1a2030; font-size: 12px; color: #e4e8f2; } .paypal-pay-btn { background: #ffc439; color: #003087; font-weight: 900; font-size: 10px; padding: 6px 11px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px; } .paypal-pay-btn:active { opacity: 0.8; } .section-h { font-size: 12px; font-weight: 700; font-family: var(--font-disp); color: #fff; margin: 6px 2px 10px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } .section-h::before { content: ""; width: 15px; height: 8px; border-bottom: 2px solid var(--gold); border-radius: 0 0 60% 60%; flex-shrink: 0; } #app { border: 1px solid rgba(var(--accent2-rgb),0.28); border-radius: 20px; animation: appShimmer 3.2s ease-in-out infinite; } body.login-mode { padding-bottom: 0; } body.login-mode #app { min-height: 100vh; display: flex; flex-direction: column; } body.login-mode .login-wrap { flex: 1; min-height: 0; } @keyframes appShimmer { 0%, 100% { border-color: rgba(var(--accent2-rgb),0.16); box-shadow: 0 0 14px rgba(var(--accent2-rgb),0.08); } 50% { border-color: rgba(var(--accent2-rgb),0.42); box-shadow: 0 0 22px rgba(var(--accent2-rgb),0.2); } } @media (min-width: 700px) { body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } #app { max-width: 820px; margin: 24px auto 0; padding: 26px; border-radius: 26px; animation: none; border: 1px solid rgba(var(--accent2-rgb),0.35); box-shadow: 0 0 50px rgba(var(--accent-rgb),0.14), inset 0 0 30px rgba(var(--accent2-rgb),0.04); } .bottom-nav { left: 0; right: 0; margin: 0 auto; width: min(820px, calc(100% - 24px)); } .card, .add-form { padding: 20px; } .header { margin: -26px -26px 20px; border-radius: 26px 26px 22px 22px; } .header .club-logo-mark { height: 78px; width: 78px; } .header .title { font-size: 34px; } .header .subtitle { font-size: 13px; } .big-number { font-size: 36px; } .nc-title { font-size: 21px; } .nc-meta { font-size: 12px; } .ev-card { padding: 16px; } .ev-day { font-size: 25px; } .ev-month { font-size: 11px; } .ev-title { font-size: 14px; } .ev-title-big { font-size: 17px; font-weight: 800; } .ev-type-big { font-size: 12.5px; padding: 9px 18px; border-radius: 14px; } .ev-date-full { font-size: 13px; } .ev-meta { font-size: 12px; } .entry-name { font-size: 14px; } .bottom-nav button { font-size: 11.5px; } .bottom-nav svg, .bn-select-wrap svg { width: 26px; height: 26px; } } .ev-card { display: flex; gap: 12px; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 13px; margin-bottom: 9px; align-items: center; position: relative; overflow: hidden; } .ev-card.ev-outcome-win { background: linear-gradient(160deg, rgba(51,209,122,0.20), rgba(17,20,31,0.4)); border-color: rgba(51,209,122,0.45); animation: victoryGlow 2.4s ease-in-out infinite; } .ev-card.ev-outcome-loss { background: linear-gradient(160deg, rgba(255,107,107,0.16), rgba(17,20,31,0.4)); border-color: rgba(255,107,107,0.4); } .news-card { background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 14px; margin-bottom: 10px; } .news-title { font-size: 14px; font-weight: 700; color: #fff; margin: 8px 0 4px; } .news-body { font-size: 12px; color: #b9c4dd; line-height: 1.5; white-space: pre-wrap; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #e4e8f2; font-weight: 700; margin-bottom: 14px; flex-wrap: wrap; } .breadcrumb .crumb { cursor: pointer; } .breadcrumb .crumb.active { color: var(--accent2); cursor: default; } .breadcrumb .sep { color: #3a4666; } .folder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; } .folder-card { background: #11141fee; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; position: relative; } .folder-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb),0.18); display: flex; align-items: center; justify-content: center; } .folder-icon svg { width: 19px; height: 19px; color: var(--accent2); } .folder-name { font-size: 12px; font-weight: 700; color: #fff; word-break: break-word; } .folder-del { position: absolute; top: 8px; right: 8px; } .file-row { display: flex; align-items: center; gap: 11px; background: #11141fee; border: 1px solid rgba(var(--accent-rgb),0.22); border-radius: 13px; padding: 11px; margin-bottom: 8px; } .file-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .file-icon svg { width: 18px; height: 18px; } .file-icon.video { background: rgba(255,90,90,0.18); color: #ff6b6b; } .file-icon.image { background: rgba(var(--accent2-rgb),0.18); color: var(--accent2); } .file-icon.docx { background: rgba(var(--accent-rgb),0.18); color: var(--accent2); } .file-icon.pptx { background: rgba(255,140,60,0.18); color: #ff8c3c; } .file-icon.xlsx { background: rgba(51,209,122,0.18); color: #33d17a; } .file-icon.pdf { background: rgba(255,90,90,0.18); color: #ff6161; } .file-icon.file { background: rgba(154,166,196,0.18); color: #a8a08c; } .file-icon.link { background: rgba(154,166,196,0.18); color: #a8a08c; } .file-info { flex: 1; min-width: 0; cursor: pointer; } .file-title { font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-meta { font-size: 9.5px; color: #e4e8f2; font-weight: 600; } .file-badge { font-size: 8.5px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: #1a1f30; color: #e4e8f2; flex-shrink: 0; } .file-badge.inline { background: rgba(51,209,122,0.15); color: #33d17a; } .salaries-type-row { display: flex; gap: 6px; margin-bottom: 12px; } .salaries-type-btn { flex: 1; text-align: center; padding: 9px 6px; border-radius: 10px; border: 1px solid #232a3f; background: #11141f; color: #e4e8f2; font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: pointer; font-family: inherit; } .salaries-type-btn.active { background: var(--grad); color: #fff; border-color: transparent; } .modal-overlay { position: fixed; inset: 0; background: #05060af5; display: flex; flex-direction: column; padding: 16px; z-index: 90; } .modal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .modal-close { width: 32px; height: 32px; border-radius: 9px; background: #1a1f30; display: flex; align-items: center; justify-content: center; color: #e4e8f2; font-size: 16px; flex-shrink: 0; cursor: pointer; } .modal-title { font-size: 14px; font-weight: 800; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-preview { flex: 1; background: #000; border-radius: 14px; overflow: hidden; } .modal-preview iframe { width: 100%; height: 100%; border: none; } .foodtruck-menu-thumb { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex-shrink: 0; margin-right: 10px; cursor: pointer; border: 1px solid #232a3f; } .menu-image-picker-preview img { max-width: 140px; max-height: 140px; border-radius: 10px; display: block; object-fit: cover; border: 1px solid #232a3f; } .menu-image-overlay { position: fixed; inset: 0; background: #05060af5; display: flex; align-items: center; justify-content: center; z-index: 97; padding: 24px; } .menu-image-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; background: #1a1f30; display: flex; align-items: center; justify-content: center; color: #e4e8f2; font-size: 17px; cursor: pointer; z-index: 1; } .menu-image-scroll { max-width: 100%; max-height: 100%; overflow: auto; border-radius: 14px; background: #11141f; display: flex; align-items: flex-start; justify-content: center; -webkit-overflow-scrolling: touch; } .menu-image-scroll img { max-width: 100%; max-height: 82vh; height: auto; display: block; cursor: zoom-in; } .menu-image-scroll.zoomed { display: block; align-items: initial; justify-content: initial; } .menu-image-scroll.zoomed img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; } .app-toast { position: fixed; left: 50%; bottom: 88px; transform: translate(-50%, 20px) scale(0.92); background: #1a1f30; border: 1px solid #2a3350; color: #fff; padding: 12px 22px; border-radius: 12px; font-size: 12.5px; font-weight: 800; text-align: center; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out, transform 0.2s ease-out; box-shadow: 0 8px 24px rgba(0,0,0,0.4); max-width: 90vw; } .app-toast.visible { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.35s cubic-bezier(.34,1.56,.64,1); } .app-toast.success { border-color: rgba(51,209,122,0.5); background: rgba(21,97,51,0.97); } .app-toast.error { border-color: rgba(255,90,90,0.5); background: rgba(140,40,40,0.97); } .presence-row[data-open-presence-detail] { cursor: pointer; } /* ===================== FICHE (bottom sheet) réutilisable ===================== Une carte "s'ouvre" en fiche détaillée : glissement depuis le bas, fond flouté, plutôt qu'un pop-up qui apparaît sec. Voir renderEventDetailSheet (agenda.js) pour le premier usage (Agenda + Accueil) — pensé pour être réutilisé sur d'autres pages à cartes (Présence, Caisse noire, Gestion des matchs...). */ /* Fiches : même carte centrée que les cartes événement. Tout ce qui s'ouvre dans l'app s'ouvre désormais de la même façon — la fiche montait du bas, la modale apparaissait au centre, et deux gestes différents pour une même intention, ça s'apprend deux fois. Les noms de classes restent : seul l'habillage change, les neuf écrans concernés n'ont pas bougé d'une ligne. */ .sheet-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; box-sizing: border-box; } .sheet-scrim { position: absolute; inset: 0; background: rgba(4,6,12,0.74); backdrop-filter: blur(4px); animation: modaleFond 0.22s ease-out; } .sheet { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent2-rgb),0.06); animation: modaleEntree 0.26s cubic-bezier(.22,.9,.24,1); } .sheet-grab { display: none; } /* isolation: le dégradé est un ::before en z-index négatif ; sans contexte d'empilement propre il passerait DERRIÈRE la carte et disparaîtrait purement et simplement. */ .sheet-hero { position: relative; padding: 20px 20px 16px; overflow: hidden; border-radius: 22px 22px 0 0; isolation: isolate; } .sheet-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px 110px at 100% 0%, rgba(var(--gold-rgb),0.28), transparent 70%), var(--grad); opacity: 0.5; z-index: -1; } .sheet-hero-eyebrow { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.75); margin-bottom: 4px; } .sheet-hero h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #fff; line-height: 1.2; } .sheet-hero p { margin: 5px 0 0; font-size: 12px; color: rgba(255,255,255,0.82); font-weight: 600; } .sheet-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; color: #fff; font-size: 13px; } /* Pas de défilement ici : c'est .sheet qui défile. Deux conteneurs de défilement imbriqués et le geste part dans le mauvais, ce qui donne une page qui refuse de descendre — le bug qui a coûté deux jours sur LustuZone. Un seul conteneur, toujours. */ .sheet-body { padding: 6px 20px 20px; } .sheet-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(var(--accent-rgb),0.14); font-size: 12.5px; } .sheet-row:last-of-type { border-bottom: none; } .sheet-row .ic { width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--accent-rgb),0.14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sheet-row .ic svg { width: 16px; height: 16px; stroke: var(--accent2); } .sheet-row b { font-weight: 700; color: #e8e8ee; display: block; } .sheet-row span { color: #8b96b4; font-size: 10.5px; display: block; margin-top: 2px; } .sheet-cta { display: block; width: 100%; text-align: center; padding: 13px; border-radius: 14px; background: var(--grad); font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em; margin-top: 10px; color: #fff; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; } .sheet-cta.secondary { background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent2); } .sheet-open-zone { cursor: pointer; } .btn.danger { background: rgba(255,107,107,0.12); color: #ff6b6b; border-color: rgba(255,107,107,0.4); } .composition-card-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 7px 12px; border-radius: 9px; background: #1a1f30; border: 1px solid #2a3350; color: #e4e8f2; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; } .composition-card-btn.view { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.4); color: var(--accent2); } .composition-not-selected-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 11px; border-radius: 20px; background: #1a1f30; border: 1px solid #2a3350; color: #8a8f9e; font-size: 11px; font-weight: 700; } .composition-overlay { z-index: 96; } @media (min-width: 700px) { .composition-overlay { left: 50%; right: auto; width: 820px; max-width: calc(100vw - 32px); transform: translateX(-50%); border-radius: 20px; } } .composition-overlay .modal-header { flex-wrap: wrap; row-gap: 6px; } .composition-cap { font-size: 10.5px; color: #8a8f9e; font-weight: 700; flex-shrink: 0; } .composition-body { flex: 1; display: flex; gap: 10px; overflow: hidden; min-height: 0; } .composition-col-label { font-size: 9px; color: #8a8f9e; text-transform: uppercase; font-weight: 800; letter-spacing: 0.3px; margin-bottom: 6px; } .composition-col-label.muted-label { margin-top: 10px; color: #5f6473; } .composition-court-col { flex: 1.4; display: flex; flex-direction: column; overflow-y: auto; min-width: 0; } .composition-bench-row { margin-top: 10px; flex-shrink: 0; } .composition-bench-row-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .composition-bench-slot { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; touch-action: none; } .composition-bench-slot.empty { border: 2px dashed #2a3350; } .composition-bench-slot.filled { background: #181d2e; cursor: grab; } .composition-court-wrap { width: 100%; position: relative; aspect-ratio: 2 / 3; background: #fff; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .composition-court-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .composition-slot { position: absolute; transform: translate(-50%, -50%); width: 15%; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; touch-action: none; } .composition-slot.empty { border: 2px dashed #b4b2a9; background: rgba(12,14,22,0.03); } .composition-slot.filled { background: #fff; box-shadow: 0 0 0 2px var(--accent); cursor: grab; } .composition-slot-label { font-size: 9px; font-weight: 800; color: #888780; } .composition-free-zone { position: absolute; left: 5%; top: 46%; width: 90%; height: 50.7%; border: 2px dashed var(--accent2); border-radius: 8px; touch-action: none; } .composition-free-token { position: absolute; transform: translate(-50%, -50%); touch-action: none; cursor: grab; } .composition-roster-col { flex: 1; display: flex; flex-direction: column; overflow-y: auto; gap: 5px; min-width: 0; } .composition-roster-item { display: flex; align-items: center; gap: 7px; background: #181d2e; border-radius: 9px; padding: 6px 8px; cursor: grab; touch-action: none; flex-shrink: 0; } .composition-roster-item.greyed { opacity: 0.4; } .composition-roster-name { font-size: 11px; font-weight: 700; color: #e4e8f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composition-empty-note { font-size: 10.5px; } .composition-avatar-sm { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .composition-avatar-md { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .composition-initials { display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 10px; } .composition-footer { display: flex; gap: 8px; margin-top: 10px; flex-shrink: 0; } .composition-footer .btn { margin: 0; flex: 1; } .composition-ghost { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%) scale(1.1); z-index: 999; pointer-events: none; opacity: 0.92; } .composition-drop-hover { box-shadow: 0 0 0 3px #33d17a !important; } /* ===== Cartes d'événement (repas/apéro, voir cartes.js) — accent gold pour "repas", accent bleu pour "apero", pour que la carte ressorte nettement du reste de l'événement plutôt que de se fondre dedans (fond teinté + liseré de couleur + icône en pastille). */ .carte-box { margin-top: 10px; background: linear-gradient(135deg, rgba(var(--gold-rgb),0.14), rgba(var(--gold-rgb),0.03)); border-radius: 12px; padding: 12px; border: 1px solid rgba(var(--gold-rgb),0.4); border-left: 3px solid var(--gold); } .carte-box.carte-apero { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.03)); border-color: rgba(var(--accent-rgb),0.4); border-left-color: var(--accent2); } .carte-box.carte-collapsed { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; } .carte-collapsed-text { flex: 1; min-width: 0; } .carte-collapsed-text .carte-title { margin-bottom: 2px; } .carte-summary { font-size: 11px; color: #a8adba; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carte-chevron { font-size: 10px; color: #8a92a8; flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid #232a3f; border-radius: 8px; } .carte-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; cursor: pointer; } .carte-icon { font-size: 16px; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(var(--gold-rgb),0.22); } .carte-box.carte-apero .carte-icon { background: rgba(var(--accent-rgb),0.22); } .carte-title { flex: 1; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: 0.2px; } .carte-del { color: #ff6b6b; font-size: 12px; cursor: pointer; padding: 2px 5px; flex-shrink: 0; } .carte-edit { font-size: 12px; cursor: pointer; padding: 2px 5px; flex-shrink: 0; } .carte-sub-h { font-size: 10px; font-weight: 800; color: #e4e8f2; text-transform: uppercase; letter-spacing: 0.3px; margin: 7px 0 5px; } .carte-propose { display: flex; gap: 6px; margin-top: 2px; } .carte-propose input { flex: 1; } .carte-split-line { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; background: #0d1018; border-radius: 9px; padding: 8px 10px; margin: 8px 0; font-size: 12px; color: #e8e8ee; } .carte-split-line .lbl { font-size: 9.5px; color: #8a8f9e; text-transform: uppercase; font-weight: 800; } .carte-split-line .num { font-weight: 900; color: #fff; } .carte-split-line .num.accent { color: var(--accent2); font-size: 14px; } .carte-identity { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); } .carte-toggle { text-align: center; font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 0; cursor: pointer; } .ev-date { text-align: center; flex-shrink: 0; width: 46px; } .ev-day { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; } .ev-month { font-size: 10px; color: var(--accent); text-transform: uppercase; font-weight: 700; margin-top: 3px; } .ev-divider { width: 1px; align-self: stretch; background: #1c2333; } .ev-info { flex: 1; min-width: 0; } .ev-type { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 12px; display: inline-block; margin-bottom: 5px; } .ev-type.match { background: rgba(var(--accent-rgb),0.15); color: var(--accent); } .ev-type.entrainement { background: rgba(120,200,80,0.15); color: #78c850; } .ev-type.repas { background: rgba(255,180,60,0.15); color: #ffb43c; } .ev-type.soiree { background: rgba(186,120,255,0.15); color: #c084fc; } .ev-type.benevole { background: rgba(255,120,73,0.15); color: #ff7849; } .ev-type.autre { background: rgba(154,166,196,0.15); color: #a8a08c; } .ev-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; } .ev-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .ev-title-big { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.1px; flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; } .ev-type-big { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 9px; border-radius: 12px; flex-shrink: 0; white-space: nowrap; } .ev-type-big.match { background: rgba(var(--accent-rgb),0.18); color: var(--accent); } .ev-type-big.entrainement { background: rgba(120,200,80,0.18); color: #78c850; } .ev-type-big.repas { background: rgba(255,180,60,0.18); color: #ffb43c; } .ev-type-big.soiree { background: rgba(186,120,255,0.18); color: #c084fc; } .ev-type-big.benevole { background: rgba(255,120,73,0.18); color: #ff7849; } .ev-type-big.autre { background: rgba(154,166,196,0.18); color: #a8a08c; } .ev-date-full { font-size: 12px; color: #d7dcec; font-weight: 700; margin-bottom: 3px; text-transform: capitalize; } .ev-meta { font-size: 11px; color: #e4e8f2; } .justif-wrap { margin-top: 2px; } .justif-input { font-size: 13px; padding: 9px 10px; border-color: rgba(255,90,90,0.35); background: #150e10; margin-bottom: 8px; } .justif-input:focus { outline-color: #ff5a5a; } .justif-validate-btn { font-size: 11px; padding: 9px; } .justif-saved { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.25); border-radius: 10px; padding: 9px 10px; } .justif-saved span { font-size: 12px; color: #ff9c8a; font-weight: 600; flex: 1; min-width: 0; } .justif-edit-btn { flex-shrink: 0; background: #1a1f30; border: 1px solid #2a2340; color: #e4e8f2; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .cn-modifier-btn { display: inline-block; margin-top: 9px; } .cn-edit-picker { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #232a3f; } .cn-edit-pick-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; margin-bottom: 6px; background: #0d1018; border: 1px solid #232a3f; border-radius: 9px; font-size: 11.5px; color: #e8e8ee; font-weight: 600; cursor: pointer; } .cn-edit-cancel { text-align: center; font-size: 10.5px; color: #e4e8f2; font-weight: 700; text-transform: uppercase; padding: 6px 0 2px; cursor: pointer; } .justif-note { margin-top: 6px; font-size: 11px; color: #ff9c8a; background: rgba(255,90,90,0.08); border: 1px solid rgba(255,90,90,0.25); border-radius: 9px; padding: 7px 10px; } .justif-note b { color: #ff5a5a; font-weight: 800; } .ev-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; } .ev-edit, .ev-del { cursor: pointer; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #1a1f30; transition: transform 0.12s, background 0.15s; } .ev-edit:active, .ev-del:active, .ev-edit.tap-active, .ev-del.tap-active { transform: scale(0.9); } .ev-edit svg { width: 15px; height: 15px; color: #e4e8f2; } .ev-del svg { width: 15px; height: 15px; color: #ff5a5a; } .ev-del:hover, .ev-del:active { background: rgba(255,90,90,0.15); } .ev-has-kebab { padding-right: 34px; } .ev-kebab-wrap { position: absolute; top: 10px; right: 10px; z-index: 2; } .ev-kebab { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: #8a8f9e; font-size: 16px; font-weight: 900; cursor: pointer; line-height: 1; } .ev-kebab:active, .ev-kebab.tap-active { background: #1a1f30; transform: scale(0.92); } .ev-menu.avatar-menu { top: 30px; right: 0; min-width: 150px; padding: 6px; } .ev-menu .avatar-menu-item { padding: 9px 10px; font-size: 12px; } .ev-edit:hover, .ev-edit:active { background: rgba(var(--accent-rgb),0.15); } .next-card { border-radius: 18px; padding: 2px; background: var(--grad); margin-bottom: 14px; } .nc-inner { background: #11141f; border-radius: 16px; padding: 16px; position: relative; overflow: hidden; } .nc-glow { position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; background: var(--glow); } .nc-countdown { display: inline-block; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; text-transform: uppercase; } .nc-title { font-size: 19px; font-weight: 700; font-family: var(--font-disp); color: #fff; margin-bottom: 4px; letter-spacing: 0; } .nc-meta { font-size: 11px; color: #e4e8f2; margin-bottom: 14px; font-weight: 500; } .nc-actions { display: flex; gap: 8px; position: relative; } .nc-actions .btn { flex: 1; } .add-form { background: #0d1018; border: 1px dashed #243049; border-radius: 14px; padding: 12px; margin-bottom: 12px; animation: qaFadeIn 0.18s ease-out; } .scorenco-widget-todo { border: 1px dashed #3a4666; background: #0d1018ee; } .scorenco-widget-todo code { background: #1a1f30; padding: 1px 5px; border-radius: 5px; font-size: 10px; } .ldsdr { display: inline-block; width: 60px; height: 60px; } .ldsdr:after { content: " "; display: block; width: 48px; height: 48px; margin: 6px; border-radius: 50%; border: 5px solid #1E457B; border-color: #1E457B transparent; animation: ldsdr 1.2s linear infinite; } @keyframes ldsdr { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .matchcard-wrap { position: relative; overflow: hidden; margin-bottom: 14px; } .matchcard-carousel-wrap { position: relative; margin: 0 -2px; } .osteo-carousel { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; } .osteo-carousel::-webkit-scrollbar { display: none; } .osteo-slot-card { flex: 0 0 160px; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 12px; } .osteo-tag { font-size: 8.5px; font-weight: 800; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(var(--accent2-rgb),0.15); color: var(--accent2); display: inline-block; margin-bottom: 8px; } .osteo-tag.taken { background: rgba(255,107,107,0.15); color: #ff6b6b; } .osteo-tag.done { background: rgba(154,166,196,0.15); color: #a8a08c; } .osteo-slot-date2 { font-size: 12.5px; font-weight: 800; color: #fff; margin-bottom: 3px; } .osteo-slot-meta2 { font-size: 9.5px; color: #e4e8f2; font-weight: 700; margin-bottom: 8px; line-height: 1.4; } .osteo-mini-btn { display: block; width: 100%; text-align: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 10px; text-transform: uppercase; border-radius: 8px; padding: 8px; cursor: pointer; } .osteo-mini-btn.cancel { background: rgba(255,107,107,0.15); color: #ff6b6b; } .osteo-card { background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 13px; margin-bottom: 10px; } .osteo-carousel .osteo-card-wide { flex: 0 0 240px; margin-bottom: 0; } .osteo-manage-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1a2030; font-size: 12px; } .osteo-manage-btn { display: block; width: 100%; text-align: center; padding: 9px; border-radius: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; background: #1a1f30; border: 1px solid #2a3350; color: #e4e8f2; } .osteo-manage-btn.priority { background: rgba(255,180,60,0.12); border-color: rgba(255,180,60,0.4); color: #ffb43c; } .osteo-manage-btn.danger { background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.35); color: #ff6b6b; } .osteo-manage-btn:active { opacity: 0.75; } .osteo-manage-row:last-child { border-bottom: none; } .matchcard-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 26px 4px; scrollbar-width: none; } .matchcard-carousel::-webkit-scrollbar { display: none; } .matchcard-carousel .matchcard { flex: 0 0 62%; scroll-snap-align: start; margin-bottom: 0; min-height: 200px; padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between; } .mc2-card { flex: 0 0 62%; scroll-snap-align: start; background: #11141f; border: 1px solid #1c2130; border-radius: 14px; overflow: hidden; position: relative; color: #e8e8ee; padding-bottom: 2px; cursor: pointer; } .mc2-card.win { border-color: rgba(51,209,122,0.5); } .mc2-card.loss { border-color: rgba(255,107,107,0.4); } .mc2-datebar { background: #171b25; color: #e4e8f2; text-align: center; font-size: 10px; font-weight: 800; padding: 7px; text-transform: uppercase; letter-spacing: 0.6px; } .mc2-datebar.win { color: #33d17a; } .mc2-datebar.loss { color: #ff6b6b; } .mc2-datebar.draw { color: #e4e8f2; } .mc2-datebar.upcoming { color: var(--accent2); } .mc2-teams { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 8px; } .mc2-badge { width: 38px; height: 38px; border-radius: 10px; background: #1a1f30; border: 1.5px solid #2a3350; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #e4e8f2; flex-shrink: 0; } .mc2-badge.us { background: var(--grad); border-color: transparent; color: #fff; } .mc2-vs { font-size: 12px; font-weight: 800; color: #e4e8f2; } .mc2-card.win .mc2-datebar, .mc2-card.win .mc2-score { text-shadow: 0 0 16px rgba(51,209,122,0.4); } .mc2-score { font-size: 18px; font-weight: 700; font-family: var(--font-disp); color: #fff; letter-spacing: 0; white-space: nowrap; } .mc2-score.win { color: #33d17a; } .mc2-dash { color: #e4e8f2; margin: 0 2px; } .mc2-time { text-align: center; font-size: 10.5px; font-weight: 800; color: #e4e8f2; padding-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .mc2-photo-btn { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 7px; background: rgba(11,13,20,0.85); border: 1px solid #2a3350; font-size: 11px; display: flex; align-items: center; justify-content: center; } .carousel-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; } .carousel-dot { width: 5px; height: 5px; border-radius: 50%; background: #2a3040; } .carousel-dot.active { background: var(--blue); width: 14px; border-radius: 3px; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(17,20,31,0.92); border: 1px solid rgba(var(--accent2-rgb),0.4); color: var(--accent2); font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,0.4); line-height: 1; padding-bottom: 2px; } .carousel-arrow.left { left: -2px; } .carousel-arrow.right { right: -2px; } .carousel-arrow:active { background: rgba(var(--accent2-rgb),0.2); } .matchcard { border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,0.08); background: #11141f; position: relative; overflow: hidden; } .matchcard:last-child { margin-bottom: 0; } .matchcard.result.win { background: linear-gradient(160deg, rgba(51,209,122,0.20), rgba(17,20,31,0.4)); border-color: rgba(51,209,122,0.45); animation: victoryGlow 2.4s ease-in-out infinite; } .matchcard.result.loss { background: linear-gradient(160deg, rgba(255,107,107,0.16), rgba(17,20,31,0.4)); border-color: rgba(255,107,107,0.4); } .matchcard.result.draw { background: linear-gradient(160deg, rgba(154,166,196,0.14), rgba(17,20,31,0.4)); border-color: rgba(154,166,196,0.3); } .matchcard.upcoming { background: linear-gradient(160deg, rgba(var(--accent-rgb),0.20), rgba(17,20,31,0.4)); border-color: rgba(var(--accent2-rgb),0.45); } @keyframes victoryGlow { 0%, 100% { box-shadow: 0 0 0px rgba(51,209,122,0); } 50% { box-shadow: 0 0 16px rgba(51,209,122,0.35); } } .matchcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .matchcard-date { font-size: 9.5px; font-weight: 800; color: #e4e8f2; text-transform: uppercase; letter-spacing: 0.5px; } .matchcard-venue { font-size: 9px; color: #e4e8f2; font-weight: 700; text-align: right; } .matchcard-scoreboard { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .matchcard-side { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; } .matchcard-avatar { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 900; color: #a8a08c; background: #1a1f30; border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; } .matchcard-avatar.us { color: #fff; background: var(--grad); border-color: transparent; } .matchcard-name { font-size: 12px; font-weight: 700; color: #a8a08c; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .matchcard-name.us { color: #fff; font-weight: 900; } .matchcard-center { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 56px; } .matchcard-bigscore { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -1px; white-space: nowrap; } .matchcard-bigscore.win { color: #33d17a; } .matchcard-bigscore.loss { color: #ff6b6b; } .matchcard-dash { color: rgba(255,255,255,0.35); margin: 0 2px; font-weight: 700; } .matchcard-vsbadge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 900; color: #e4e8f2; background: #1a1f30; border: 1px solid rgba(255,255,255,0.1); } .matchcard-vsbadge.upcoming { color: var(--accent2); background: rgba(var(--accent2-rgb),0.12); border-color: rgba(var(--accent2-rgb),0.4); } .matchcard-badge { margin-top: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; padding: 6px; border-radius: 8px; } .matchcard-badge.win { background: rgba(51,209,122,0.18); color: #33d17a; } .matchcard-badge.loss { background: rgba(255,107,107,0.15); color: #ff6b6b; } .matchcard-badge.pending { background: rgba(154,166,196,0.12); color: #a8a08c; } .matchcard-badge.upcoming { background: rgba(var(--accent2-rgb),0.15); color: var(--accent2); } .matchcard-photo-btn { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); font-size: 13px; display: flex; align-items: center; justify-content: center; } .back-link { background: none; border: none; color: var(--gold); font-size: 11.5px; font-weight: 700; padding: 0; margin-bottom: 10px; display: inline-block; } .gallery-match-row { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px; } .gallery-match-row:active { background: rgba(255,255,255,0.06); } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .photo-grid-item { aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: block; background: #11141f; } .photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .cp-match-card { background: #11141f; border: 1px solid #1c2130; border-radius: 14px; padding: 14px; margin-bottom: 10px; } .cp-match-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 8px; } .cp-match-title { font-size: 15px; font-weight: 700; font-family: var(--font-disp); color: #fff; } .cp-match-sub { font-size: 11px; color: #e4e8f2; font-weight: 700; text-transform: uppercase; } .cp-summary-badge { flex-shrink: 0; text-align: center; background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 10px; padding: 6px 10px; } .cp-summary-badge .num { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.1; } .cp-summary-badge .lbl { font-size: 8px; font-weight: 800; text-transform: uppercase; color: #e4e8f2; letter-spacing: 0.3px; } .cp-cols { display: flex; gap: 8px; } .cp-col { flex: 1; background: #0d1018; border-radius: 10px; padding: 9px; min-width: 0; } .cp-col-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 7px; } .cp-col-h.driver { color: #33d17a; } .cp-col-h.need { color: #ffb43c; } .cp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: #e8e8ee; padding: 4px 0; } .cp-row .places { color: #e4e8f2; font-size: 10.5px; font-weight: 700; flex-shrink: 0; margin-left: 4px; } .cp-empty { font-size: 11px; color: #e4e8f2; font-style: italic; } .cp-edit-box { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.08); } .cp-edit-label { font-size: 11px; color: #e4e8f2; font-weight: 700; text-transform: uppercase; margin-bottom: 7px; } .cp-toggle-row { display: flex; gap: 8px; margin-bottom: 9px; } .cp-toggle-btn { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-size: 12px; font-weight: 800; background: #1a1f30; color: #e4e8f2; } .cp-toggle-btn.active-yes { background: rgba(51,209,122,0.2); color: #33d17a; } .cp-toggle-btn.active-need { background: rgba(255,180,60,0.2); color: #ffb43c; } .cp-for-child { font-size: 10px; background: rgba(var(--accent-rgb),0.18); color: var(--gold); padding: 3px 9px; border-radius: 6px; font-weight: 800; text-transform: uppercase; margin-left: 6px; } @keyframes qaFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .add-form input, .add-form select { margin-bottom: 6px; } .add-form .field-label { margin: 8px 0 4px; } .add-form-row { display: flex; gap: 8px; flex-wrap: wrap; } .add-form-row > div { flex: 1 1 100%; min-width: 0; } @media (min-width: 420px) { .add-form-row > div { flex: 1 1 0; } } .date-select-row { display: flex; gap: 6px; margin-bottom: 8px; } .date-select-row select { flex: 1; min-width: 0; padding: 9px 2px; text-align: center; font-size: 13px; } .expand-toggle { text-align: center; padding: 8px; font-size: 11px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; } .page-title { font-family: var(--font-disp); font-size: 27px; font-weight: 700; color: #fff; letter-spacing: 0.1px; margin-bottom: 4px; text-transform: uppercase; } .page-sub { font-size: 13px; color: #e4e8f2; margin-bottom: 16px; font-weight: 600; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; } .stat { background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 13px; position: relative; overflow: hidden; } .stat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .stat.alt .stat-bar { background: #ff7849; } .stat-label { font-size: 9px; color: #e4e8f2; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; } .stat-value { font-size: 23px; font-weight: 700; font-family: var(--font-disp); color: #fff; letter-spacing: 0; } .stat-value.warn { color: #ff7849; } .stat-sub { font-size: 9px; color: #e4e8f2; margin-top: 2px; } .stat-bar-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; background: #0d1018; border: 1px solid #1c2333; border-radius: 12px; padding: 12px 14px; font-size: 12px; margin-bottom: 4px; } .pay-summary { background: var(--grad); border-radius: 16px; padding: 18px; margin-bottom: 14px; color: #fff; } .pay-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.9; font-weight: 800; } .pay-summary-val { font-size: 32px; font-weight: 700; font-family: var(--font-disp); letter-spacing: 0; margin-top: 4px; } .pay-summary-sub { font-size: 12px; opacity: 0.9; margin-top: 4px; font-weight: 600; } .pointer-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1a2030; } .pointer-row:last-child { border-bottom: none; } .pres-card { background: #0d1018; border: 1px solid #1c2333; border-radius: 13px; padding: 10px 12px; margin-bottom: 8px; } .pres-card:last-child { margin-bottom: 0; } .pres-card-row { display: flex; align-items: center; gap: 10px; } .pres-avatar { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; } .pres-card-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #e8e8ee; } .team-switch-row { display: flex; gap: 2px; margin-bottom: 12px; flex-wrap: wrap; background: #11141f; border: 1px solid #232a3f; border-radius: 13px; padding: 4px; } .team-switch-btn { flex: 1; min-width: 64px; padding: 9px 6px; border-radius: 10px; border: none; background: transparent; color: #8a92a8; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .team-switch-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 3px 10px rgba(var(--accent-rgb),0.4); } .mode-tabs { display: flex; flex-wrap: wrap; row-gap: 10px; gap: 22px; border-bottom: 1px solid #232a3f; margin-bottom: 16px; padding: 0 2px; } .mode-tab-btn { border: none; background: transparent; color: #8a92a8; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; padding: 0 0 10px; font-family: 'DM Sans', sans-serif; cursor: pointer; position: relative; white-space: nowrap; flex-shrink: 0; } .mode-tab-btn.active { color: #fff; } .mode-tab-btn.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); border-radius: 2px; } .mode-tab-btn.actu-filter-btn { white-space: normal; line-height: 1.3; font-size: 11px; text-align: left; min-width: 56px; } .gm-section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; } .gm-section-chip { background: #11141f; border: 1px solid #232a3f; border-radius: 10px; padding: 8px 4px; color: #8a92a8; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.25; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: border-color 0.15s, background 0.15s, color 0.15s; } .gm-section-chip.active { background: linear-gradient(160deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.06)); border-color: var(--accent2); color: #fff; } .profil-photo-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 4px; } .profil-photo-frame { width: 92px; height: 92px; border-radius: 22px; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 30px; overflow: hidden; border: 1px solid rgba(var(--accent2-rgb),0.35); } .profil-photo-frame img { width: 100%; height: 100%; object-fit: cover; } .profil-photo-note { font-size: 10.5px; color: #e4e8f2; font-style: italic; text-align: center; } .ptype-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .ptype-label { width: 92px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #e4e8f2; } .ptype-track { flex: 1; height: 9px; border-radius: 6px; background: #1a1f30; overflow: hidden; } .ptype-fill { height: 100%; background: var(--grad); border-radius: 6px; transition: width 0.8s ease-out; } .ptype-pct { width: 62px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 800; color: #fff; } .ptype-sub { width: 68px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 700; color: #e4e8f2; } .poste-select { font-weight: 700; } .poste-locked-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .poste-locked-row .poste-select { flex: 1; } .poste-badge { font-size: 12px; padding: 6px 12px; } .poste-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; } .poste-icon-btn { width: 26px; height: 26px; border-radius: 8px; background: #1a1f30; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .poste-icon-btn:active { background: #232a40; } .poste-inline-btn { flex-shrink: 0; width: auto; padding: 9px 14px; } .mesjoueurs-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #1a2030; } .mesjoueurs-row:last-child { border-bottom: none; } .mesjoueurs-name { flex: 1; font-size: 12.5px; font-weight: 700; color: #e8e8ee; } /* Vrai bouton plein : l'ancien style (bordure en pointillés, fond transparent) se lisait comme une zone de saisie/dépôt plutôt que comme un bouton cliquable. Fond teinté + bordure pleine + retour au toucher, pour qu'on comprenne immédiatement que ça s'appuie. */ .add-toggle { width: 100%; padding: 13px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.16); color: var(--accent2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform 0.12s, filter 0.15s; } .add-toggle:active, .add-toggle.tap-active { transform: scale(0.97); filter: brightness(1.25); } /* Variante compacte pour les boutons placés dans une carte étroite (ex: carte Poste, affichée sur une demi-largeur) — sans ça le libellé passe sur deux lignes et le bouton paraît lourd. */ .add-toggle.compact { padding: 9px 8px; font-size: 10.5px; letter-spacing: 0.2px; margin-bottom: 0; } /* Bouton d'accès à une autre page (ex: "Gestion des comptes" depuis Profil) — dégradé plein comme .btn pour être repérable en haut de page, mais en disposition icône + libellé + chevron pour se lire comme une NAVIGATION et non comme une validation de formulaire. */ .page-action-btn { width: 100%; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 14px; border: none; background: var(--grad); color: #fff; cursor: pointer; font-family: 'DM Sans', sans-serif; text-align: left; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform 0.12s, filter 0.15s; } .page-action-btn:active, .page-action-btn.tap-active { transform: scale(0.97); filter: brightness(0.92); } .page-action-btn .pab-icon { font-size: 17px; flex-shrink: 0; } .page-action-btn .pab-text { flex: 1; min-width: 0; } /* display:block indispensable : ce sont des (donc inline par défaut), sans quoi le sous-titre se colle à la suite du titre sur la même ligne au lieu de passer dessous. */ .page-action-btn .pab-title { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2; } .page-action-btn .pab-sub { display: block; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.82); margin-top: 3px; line-height: 1.3; } .page-action-btn .pab-chevron { font-size: 17px; opacity: 0.75; flex-shrink: 0; } .compte-person-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .compte-person-card { background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 14px; padding: 10px 12px; width: 100px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; } .compte-person-card:active { background: #171c2c; } .compte-person-name { font-size: 11px; font-weight: 700; color: #e8e8ee; line-height: 1.25; overflow-wrap: break-word; } /* ===================== MODALE CENTRÉE ===================== Utilisée pour ouvrir un événement depuis l'Agenda. Contrairement aux fiches coulissantes (.sheet-*) qui montent du bas et collent aux bords, celle-ci flotte au centre avec la MÊME marge des quatre côtés — le padding de l'overlay fait la marge, le contenu se centre dedans. dvh (et non vh) pour suivre la barre d'adresse mobile. */ .modale-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; box-sizing: border-box; } .modale-scrim { position: absolute; inset: 0; background: rgba(4,6,12,0.74); backdrop-filter: blur(4px); animation: modaleFond 0.22s ease-out; } .modale { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent2-rgb),0.06); animation: modaleEntree 0.26s cubic-bezier(.22,.9,.24,1); } @keyframes modaleFond { from { opacity: 0; } to { opacity: 1; } } @keyframes modaleEntree { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modale, .modale-scrim, .sheet, .sheet-scrim { animation: none; } } .modale-hero { padding: 20px 20px 16px; border-radius: 22px 22px 0 0; background: linear-gradient(160deg, rgba(var(--accent-rgb),0.34), rgba(var(--accent-rgb),0.06) 70%, transparent); position: relative; } .modale-hero h2 { margin: 8px 0 0; font-family: var(--font-disp); font-size: 21px; color: #fff; line-height: 1.15; } .modale-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; z-index: 2; } .modale-close:active { background: rgba(255,255,255,0.2); } .modale-corps { padding: 4px 20px 20px; } .modale-ligne { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(var(--accent-rgb),0.14); font-size: 12.5px; color: #e8e8ee; } .modale-ligne:last-child { border-bottom: none; } .modale-ligne .ml-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(var(--accent-rgb),0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .modale-ligne .ml-lib { color: #8a92a8; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } /* ===================== TERRAIN (composition) ===================== Disposition classique d'un schéma de handball : la cage en haut avec le gardien dedans, les ailiers aux angles de la zone, le pivot sur les 6 m, les arrières et le demi-centre en retrait. Les deux arcs sont des demi-ellipses : un élément deux fois plus haut que nécessaire, remonté de la moitié, dont seule la partie basse apparaît. Les postes sont placés en pourcentages, donc justes quelle que soit la largeur de l'écran. */ .terrain { position: relative; width: 100%; aspect-ratio: 4 / 3.2; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb),0.35); background: radial-gradient(110% 60% at 50% 0%, rgba(var(--accent-rgb),0.18), transparent 72%), linear-gradient(180deg, rgba(var(--navy-rgb),0.42), rgba(0,0,0,0.32)); overflow: hidden; } .terrain-but { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 6%; border: 2px solid rgba(var(--accent2-rgb),0.85); border-top: none; border-radius: 0 0 3px 3px; } .terrain-6m { position: absolute; top: -53%; left: 8%; right: 8%; height: 106%; border: 2px solid rgba(var(--accent2-rgb),0.55); border-radius: 50%; pointer-events: none; } .terrain-9m { position: absolute; top: -69%; left: -1%; right: -1%; height: 138%; border: 2px dashed rgba(var(--accent2-rgb),0.30); border-radius: 50%; pointer-events: none; } .poste { position: absolute; transform: translate(-50%, -50%); /* Assez large pour "Maximil. M." sans troncature : en dessous, les noms se réduisaient à des points de suspension et ne servaient plus à rien. */ width: 80px; text-align: center; cursor: pointer; z-index: 2; } .poste-rond { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; letter-spacing: 0.3px; color: #e4e8f2; background: rgba(var(--navy-rgb),0.75); border: 1px dashed rgba(var(--accent2-rgb),0.45); transition: transform 0.12s, background 0.15s, border-color 0.15s; } /* Poste pourvu : le rond devient plein, et le nom s'affiche dessous. */ .poste.occupe .poste-rond { background: var(--grad); color: #fff; border: 2px solid rgba(255,255,255,0.5); } .poste:active .poste-rond { transform: scale(0.92); } /* Poste pourvu : une petite carte remplace le rond. Le code du poste devient une étiquette discrète, les joueurs prennent la place — ce sont eux l'information une fois la composition faite. Le titulaire est en clair, ses remplaçants en dessous et en retrait (ils remplacent le banc). */ .poste-carte { background: rgba(var(--navy-rgb),0.88); border: 1px solid rgba(var(--accent2-rgb),0.45); border-radius: 10px; padding: 5px 7px 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); transition: transform 0.12s; } .poste:active .poste-carte { transform: scale(0.94); } .poste-etiquette { font-size: 8px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; } .poste-liste { margin-top: 4px; display: flex; flex-direction: column; gap: 1px; } .poste-joueur { font-size: 9.5px; font-weight: 600; color: #8a92a8; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .poste-joueur.titulaire { font-size: 9.5px; font-weight: 800; color: #fff; } .poste-carte .poste-joueur { line-height: 1.3; } /* Défilement bloqué derrière une fiche ou une modale : sans ça, faire glisser la page continue de défiler le contenu du dessous, ce qui donne l'impression que l'ouverture "ne tient pas". */ html.fige, html.fige body { overflow: hidden; touch-action: none; } /* ===================== ÉVALUATION JOUEUR ===================== Curseurs de notation 1-5. Le curseur natif est stylé plutôt que remplacé par un composant maison : il garde le comportement tactile du système (glissement, accessibilité), ce qu'un faux curseur perd. */ .eval-critere { padding: 9px 0; border-bottom: 1px solid rgba(var(--accent-rgb),0.12); } .eval-critere:last-child { border-bottom: none; } .eval-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .eval-nom { flex: 1; font-size: 12px; font-weight: 700; color: #e8e8ee; } .eval-note { font-size: 11px; font-weight: 800; letter-spacing: 0.2px; } /* Cinq boutons plutôt qu'un curseur : sur téléphone, viser une valeur précise avec le pouce est pénible, alors qu'une cible à toucher ne se rate pas. La couleur du bouton actif dit la note, pas seulement le chiffre. */ .eval-choix { flex: 1; min-width: 0; height: 34px; background: #0d1018; border: 1px solid #232b3d; border-radius: 9px; color: #8a92a8; font-family: var(--font-disp); font-size: 14px; font-weight: 700; cursor: pointer; transition: transform 0.1s, background 0.12s, color 0.12s; } .eval-choix:active { transform: scale(0.92); } .eval-choix.actif { box-shadow: 0 2px 10px rgba(0,0,0,0.4); } /* Bandeau de synthèse : les moyennes par catégorie, d'un coup d'œil */ .eval-synthese { display: flex; gap: 8px; margin-bottom: 12px; } .eval-bloc { flex: 1; text-align: center; padding: 10px 6px; background: #1a1f30; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb),0.28); } .eval-bloc-valeur { font-family: var(--font-disp); font-size: 21px; font-weight: 700; line-height: 1; } .eval-bloc-nom { font-size: 8.5px; color: #8a92a8; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; font-weight: 700; } /* Barres d'évolution entre périodes */ .eval-evolution { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: 8px; } .eval-barre { flex: 1; border-radius: 4px 4px 0 0; background: var(--grad); min-height: 3px; position: relative; } .eval-barre.vide { background: rgba(var(--accent-rgb),0.18); } .eval-periode { font-size: 8px; color: #8a92a8; text-align: center; margin-top: 3px; text-transform: uppercase; } /* ===================== MENU ☰ ET RÉGLAGES ===================== La barre du bas garde quatre onglets ; le reste vit ici. Le menu monte du bas plutôt que de s'afficher au centre : c'est le geste attendu pour une barre de navigation, et le pouce reste sur place. */ /* Le menu s'ouvre comme tout le reste : une carte centrée. */ .menu-feuille { position: relative; width: 100%; max-width: 460px; background: #11141f; border: 1px solid rgba(var(--accent-rgb),0.4); border-radius: 22px; padding: 16px 14px 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent2-rgb),0.06); animation: modaleEntree 0.26s cubic-bezier(.22,.9,.24,1); max-height: calc(100dvh - 44px); overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { .menu-feuille { animation: none; } } .menu-poignee { display: none; } .menu-identite { display: flex; align-items: center; gap: 12px; padding: 0 4px 14px; border-bottom: 1px solid #1b2233; } .menu-nom { font-family: var(--font-disp); font-size: 17px; font-weight: 700; color: #fff; } .menu-role { font-size: 10.5px; color: #8a92a8; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; margin-top: 3px; } .menu-groupe { padding: 8px 0; border-bottom: 1px solid #1b2233; } .menu-item { display: flex; align-items: center; gap: 13px; width: 100%; background: none; border: none; padding: 12px 4px; cursor: pointer; font-family: 'DM Sans', sans-serif; text-align: left; transition: transform 0.1s; } .menu-item:active { transform: scale(0.98); } .menu-ic { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-rgb),0.16); color: var(--accent2); } .menu-ic svg { width: 18px; height: 18px; } .menu-lib { flex: 1; font-size: 14px; font-weight: 700; color: #e8e8ee; } .menu-fleche { color: #4d5870; font-size: 19px; font-weight: 700; } .menu-item.deconnexion { margin-top: 6px; } .menu-item.deconnexion .menu-ic { background: rgba(255,90,90,0.14); color: #ff5a5a; } .menu-item.deconnexion .menu-lib { color: #ff8f8f; } /* ---- Écran Réglages ---- */ .rg-ligne { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #1a2030; } .rg-ligne:last-child { border-bottom: none; } .rg-txt { flex: 1; min-width: 0; } .rg-nom { font-size: 12.5px; font-weight: 700; color: #e8e8ee; } .rg-sub { font-size: 10.5px; color: #8a92a8; margin-top: 2px; line-height: 1.35; } /* Segments Direct / Résumé / Rien : trois cibles à toucher plutôt qu'un menu déroulant, on voit le réglage sans avoir à l'ouvrir. */ .rg-seg { display: flex; gap: 3px; background: #0d1018; border: 1px solid #1e2637; border-radius: 9px; padding: 2px; flex-shrink: 0; } .rg-seg button { border: none; background: none; color: #8a92a8; font-size: 10px; font-weight: 800; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.3px; } .rg-seg button.on { background: var(--accent); color: #fff; } .rg-seg button[disabled] { opacity: 0.75; cursor: default; } .rg-bascule { width: 46px; height: 27px; border-radius: 15px; flex-shrink: 0; cursor: pointer; background: #161b28; border: 1px solid #2a3348; padding: 2px; transition: background 0.16s, border-color 0.16s; } .rg-bascule span { display: block; width: 21px; height: 21px; border-radius: 50%; background: #5b6780; transition: transform 0.16s, background 0.16s; } .rg-bascule.on { background: rgba(var(--accent-rgb),0.42); border-color: var(--accent); } .rg-bascule.on span { transform: translateX(19px); background: #fff; } .rg-avis { font-size: 11.5px; color: var(--gold); background: rgba(var(--gold-rgb),0.1); border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; font-weight: 600; } /* État des notifications sur CET appareil. Bloc à part et non une ligne de plus : tant qu'il n'est pas au vert, tous les réglages en dessous sont sans effet — autant que ça se voie. */ .rg-appareil { border-radius: 13px; padding: 13px; margin-bottom: 6px; border: 1px solid; } .rg-appareil.ok { background: rgba(51,209,122,0.09); border-color: rgba(51,209,122,0.35); } .rg-appareil.off { background: #0d1018; border-color: #243049; } .rg-appareil.ko { background: rgba(255,120,73,0.09); border-color: rgba(255,120,73,0.38); } .rg-app-titre { font-size: 13px; font-weight: 800; color: #fff; } .rg-app-sub { font-size: 11px; color: #a8b2c4; margin-top: 4px; line-height: 1.45; } .rg-appareil .btn { width: 100%; } /* ===================== CENTRE D'ALERTES ===================== Trois niveaux de visibilité : l'alerte épinglée (on ne peut pas la rater), la cloche (on la voit sans la subir), le centre (on y va quand on veut). */ .cloche { position: relative; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; flex-shrink: 0; transition: transform 0.12s; box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.4), inset 0 1px 0 rgba(255,255,255,0.18); } .cloche:active { transform: scale(0.92); } .cloche svg { width: 27px; height: 27px; color: #fff; } /* La pastille compte ce qui ATTEND UNE ACTION, pas les messages reçus : sinon elle ne redescendrait jamais et on cesserait de la regarder. */ .cloche-pastille { position: absolute; top: -5px; right: -5px; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 12px; background: #ff5a5a; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #0c0e16; font-family: var(--font-disp); } /* Alerte épinglée : une carte pleine largeur, pas un bandeau flottant. Elle reste tant qu'on n'a pas agi, et porte le bouton qui règle le problème. Une seule à la fois — deux et plus personne ne les lit. */ .alerte-une { position: relative; border-radius: 18px; padding: 15px 16px 14px 19px; margin-bottom: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(255,90,90,.16), rgba(255,90,90,.05) 60%, transparent); border: 1px solid rgba(255,90,90,.42); } .alerte-une::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ff5a5a; } .alerte-chapeau { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .alerte-pictos { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(255,90,90,.2); flex-shrink: 0; } .alerte-pictos svg { width: 13px; height: 13px; color: #ff5a5a; } .alerte-type { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #ff5a5a; } .alerte-quand { margin-left: auto; font-size: 9.5px; color: #8a92a8; font-weight: 700; } .alerte-titre { font-family: var(--font-disp); font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 5px; } .alerte-corps { font-size: 12.5px; color: #c9d1e0; line-height: 1.45; } .alerte-actions { display: flex; gap: 8px; margin-top: 12px; } .alerte-actions .btn { width: auto; flex: 1; padding: 10px 12px; font-size: 11.5px; } /* Le centre : l'historique, groupé par jour. */ .al-jour { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: #8a92a8; margin: 16px 2px 8px; } .al-ligne { display: flex; gap: 11px; padding: 12px 13px; border-radius: 14px; background: #0d1018; border: 1px solid #1b2233; margin-bottom: 8px; position: relative; cursor: pointer; } .al-ligne:active { transform: scale(0.99); } .al-ligne.neuf { border-color: rgba(var(--accent-rgb),.5); background: #111726; } .al-ligne.neuf::after { content: ""; position: absolute; top: 13px; right: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px rgba(var(--accent2-rgb),.9); } .al-ic { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .al-ic svg { width: 17px; height: 17px; } .al-ic.urgent { background: rgba(255,90,90,.16); } .al-ic.urgent svg { color: #ff5a5a; } .al-ic.presence { background: rgba(51,209,122,.14); } .al-ic.presence svg { color: #33d17a; } .al-ic.agenda { background: rgba(var(--accent2-rgb),.16); } .al-ic.agenda svg { color: var(--accent2); } .al-ic.actu { background: rgba(var(--gold-rgb),.16); } .al-ic.actu svg { color: var(--gold); } .al-txt { flex: 1; min-width: 0; } .al-titre { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 3px; padding-right: 14px; } .al-corps { font-size: 11.5px; color: #a8b2c4; line-height: 1.4; } .al-quand { font-size: 9.5px; color: #6f7a90; font-weight: 700; margin-top: 5px; text-transform: uppercase; letter-spacing: .4px; } @media (max-width: 380px) { .cloche { width: 54px; height: 54px; border-radius: 15px; } .cloche svg { width: 23px; height: 23px; } } /* ===================== CONNEXION : SUGGESTION DE NOMS ===================== On ne demande plus le club : un nom appartient déjà à un club, le faire choisir revenait à saisir deux fois la même information. */ .sugg-wrap { position: relative; } .sugg { background: #0d1018; border: 1px solid #243049; border-radius: 12px; margin-top: 6px; overflow: hidden; } .sugg-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; border-bottom: 1px solid #171d2b; } .sugg-item:last-child { border-bottom: none; } .sugg-item:active { background: rgba(var(--accent-rgb),.16); } .sugg-nom { flex: 1; font-size: 13.5px; font-weight: 700; color: #fff; text-align: left; } /* La partie tapée est mise en évidence : on repère son nom sans relire chaque ligne. */ .sugg-nom em { font-style: normal; color: var(--accent2); } .sugg-club { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #8a92a8; background: #151b28; border: 1px solid #243049; padding: 3px 8px; border-radius: 7px; flex-shrink: 0; } .sugg-choisi { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 11px; background: rgba(var(--accent-rgb),.14); border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 11px; font-size: 13px; font-weight: 700; color: #fff; } .sugg-choisi > span:first-child { flex: 1; text-align: left; } .sugg-x { cursor: pointer; color: #8a92a8; font-size: 13px; padding: 0 2px; } .cr { display: flex; align-items: stretch; margin-bottom: 6px; border-radius: 13px; overflow: hidden; background: #0d1018; border: 1px solid #1b2233; } .cr-bande { width: 4px; flex-shrink: 0; background: #2f3a52; } .cr.club .cr-bande { background: var(--accent2); } .cr.equipe .cr-bande { background: var(--gold); } .cr.public .cr-bande { background: #33d17a; } .cr.prive .cr-bande { background: #4d5870; } .cr-h { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; border-right: 1px solid #171d2b; } .cr-h b { font-family: var(--font-disp); font-size: 15px; color: #fff; font-weight: 700; line-height: 1; } .cr-h span { font-size: 8.5px; color: #6f7a90; margin-top: 3px; font-weight: 700; } .cr-c { flex: 1; min-width: 0; padding: 10px 12px; display: flex; align-items: center; gap: 8px; } .cr-txt { flex: 1; min-width: 0; } .cr-nom { font-size: 13px; font-weight: 800; color: #fff; } .cr-nom.libre { color: #6f7a90; font-weight: 700; } .cr-sub { font-size: 10.5px; color: #8a92a8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-tag { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; } .cr.club .cr-tag { color: var(--accent2); background: rgba(var(--accent2-rgb),.14); } .cr.equipe .cr-tag { color: var(--gold); background: rgba(var(--gold-rgb),.14); } .cr.public .cr-tag { color: #33d17a; background: rgba(51,209,122,.14); } .cr.prive .cr-tag { color: #8a92a8; background: #151b28; } .cr.vide { background: #0a0d14; border-style: dashed; } .ag-trou { text-align: center; font-size: 9.5px; color: #4d5870; padding: 5px 0 8px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; } /* ===================== CALENDRIER ===================== Un seul balisage, deux densités. Sur téléphone sept colonnes font 53 px : le nom du patient n'y tient pas, seuls la pastille et l'heure restent. Au-dessus de 900 px on retrouve la ligne complète, comme sur un ordinateur. Écrire deux calendriers aurait fait deux fois plus de code à maintenir, et deux fois plus d'occasions de diverger. */ .cal-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .cal-auj { background: #131826; border: 1px solid #243049; color: #e4e8f2; font-size: 10px; font-weight: 800; padding: 6px 10px; border-radius: 20px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .cal-fleche { width: 28px; height: 28px; border-radius: 8px; background: transparent; border: 1px solid #243049; color: #c9d1e0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; font-family: 'DM Sans', sans-serif; } .cal-titre { font-family: var(--font-disp); font-size: 16px; font-weight: 700; color: #fff; text-transform: capitalize; flex: 1; min-width: 90px; } .cal-vues { display: flex; gap: 2px; background: #0d1018; border: 1px solid #1e2637; border-radius: 9px; padding: 2px; } .cal-vues button { border: none; background: none; color: #8a92a8; font-size: 10px; font-weight: 800; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .4px; } .cal-vues button.on { background: var(--accent); color: #fff; } .cal-vue-long { display: none; } /* ---- Mois ---- */ .cal-sem { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-sem div { text-align: center; font-size: 9px; font-weight: 800; color: #6f7a90; text-transform: uppercase; letter-spacing: .6px; padding-bottom: 5px; } .cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #1b2233; border-radius: 12px; overflow: hidden; } .cal-case { min-height: 62px; border-right: 1px solid #161c29; border-bottom: 1px solid #161c29; padding: 3px 2px; background: #0c0f18; cursor: pointer; overflow: hidden; } .cal-case:nth-child(7n) { border-right: none; } .cal-case.hors { background: #090b12; } .cal-case.hors .cal-num { color: #3c4559; } .cal-num { font-family: var(--font-disp); font-size: 11px; font-weight: 700; color: #c9d1e0; text-align: center; margin-bottom: 3px; } .cal-case.auj .cal-num { background: var(--accent); color: #fff; border-radius: 50%; width: 19px; height: 19px; line-height: 19px; margin: 0 auto 3px; } .ev { display: flex; align-items: center; gap: 2px; padding: 1px 2px; border-radius: 3px; margin-bottom: 1.5px; font-size: 8px; white-space: nowrap; overflow: hidden; } .ev i { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; } .ev b { font-weight: 800; color: #e8e8ee; } .ev span { color: #a8b2c4; overflow: hidden; text-overflow: ellipsis; display: none; } .ev.libre b { color: #7a869e; } .ev.mien { background: rgba(51,209,122,.16); } .ev.mien b { color: #33d17a; } .cal-plus { font-size: 7.5px; color: #6f7a90; font-weight: 800; padding: 0 2px; } /* Pastilles et blocs : la couleur dit la provenance du patient. */ .p-club { background: var(--accent2); } .p-equipe { background: var(--gold); } .p-public { background: #33d17a; } .p-prive { background: #4d5870; } .p-mien { background: #33d17a; } .p-libre { background: transparent; border: 1.5px dashed #3f4b68; } .cal-leg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 0 2px; } .cal-leg span { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #8a92a8; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .cal-leg i { width: 9px; height: 9px; border-radius: 3px; display: block; } .c-club { background: var(--accent2); } .c-equipe { background: var(--gold); } .c-public { background: #33d17a; } .c-prive { background: #4d5870; } .c-mien { background: rgba(51,209,122,.5); border: 1px solid #33d17a; } .c-libre { background: transparent; border: 1.5px dashed #3f4b68; } /* ---- Semaine ---- */ .cal-semaine { display: flex; border: 1px solid #171d2b; border-radius: 12px; overflow: hidden; background: #0d1018; } .cal-heures { flex: 0 0 32px; border-right: 1px solid #171d2b; } .cal-heures div { height: 34px; font-size: 8px; color: #6f7a90; font-weight: 700; text-align: right; padding: 1px 4px 0 0; } .cal-heures-tete { height: 30px !important; border-bottom: 1px solid #1b2233; } .cal-cols { flex: 1; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cal-col { flex: 0 0 56px; border-right: 1px solid #171d2b; } .cal-col:last-child { border-right: none; } .cal-col-tete { height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #1b2233; background: #0f131e; cursor: pointer; } .cal-col-tete b { font-family: var(--font-disp); font-size: 12px; color: #e8e8ee; line-height: 1; } .cal-col-tete span { font-size: 7px; color: #6f7a90; font-weight: 800; text-transform: uppercase; } .cal-col.auj .cal-col-tete { background: rgba(var(--accent-rgb),.18); } .cal-col.auj .cal-col-tete b { color: #fff; } .cal-piste { position: relative; } .cal-piste .ligne, .cal-jour-piste .ligne { position: absolute; left: 0; right: 0; height: 1px; background: #12172344; } .cal-bloc { position: absolute; left: 2px; right: 2px; border-radius: 5px; padding: 1px 3px; font-size: 8px; font-weight: 800; color: #0c0e16; overflow: hidden; cursor: pointer; } .cal-bloc.club { background: var(--accent2); } .cal-bloc.equipe { background: var(--gold); } .cal-bloc.public { background: #33d17a; } .cal-bloc.prive { background: #4d5870; color: #c9d1e0; } .cal-bloc.mien { background: #33d17a; } .cal-bloc.libre { background: transparent; border: 1.5px dashed #3f4b68; color: #7a869e; } /* ---- Jour ---- */ .cal-jour { border: 1px solid #171d2b; border-radius: 12px; background: #0d1018; overflow: hidden; display: flex; } .cal-jour .cal-heures { flex: 0 0 40px; } .cal-jour .cal-heures div { font-size: 9.5px; } .cal-jour-piste { flex: 1; position: relative; } .cal-jour-bloc { position: absolute; left: 4px; right: 6px; border-radius: 8px; padding: 4px 8px; color: #0c0e16; cursor: pointer; overflow: hidden; } .cal-jour-bloc b { display: block; font-size: 11px; font-weight: 800; } .cal-jour-bloc span { display: block; font-size: 9px; opacity: .8; font-weight: 700; } .cal-jour-bloc.club { background: var(--accent2); } .cal-jour-bloc.equipe { background: var(--gold); } .cal-jour-bloc.public { background: #33d17a; } .cal-jour-bloc.mien { background: #33d17a; } .cal-jour-bloc.prive { background: #4d5870; color: #e8e8ee; } .cal-jour-bloc.libre { background: transparent; border: 1.5px dashed #3f4b68; color: #8a92a8; } /* ---- Année ---- */ .cal-annee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cal-mois { background: #0d1018; border: 1px solid #171d2b; border-radius: 10px; padding: 6px 5px; cursor: pointer; } .cal-mois-nom { font-size: 8.5px; font-weight: 800; color: #c9d1e0; text-transform: uppercase; letter-spacing: .5px; text-align: center; margin-bottom: 4px; } .cal-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5px; } .cal-mini i { aspect-ratio: 1; border-radius: 1.5px; background: #161c2a; display: block; } .cal-mini i.vide { background: transparent; } .cal-mini i.d1 { background: rgba(var(--accent2-rgb),.35); } .cal-mini i.d2 { background: rgba(var(--accent2-rgb),.65); } .cal-mini i.d3 { background: var(--accent2); } /* ---- Densité ordinateur ---- */ @media (min-width: 900px) { .cal-vue-long { display: inline; } .cal-vue-court { display: none; } .cal-titre { font-size: 20px; } .cal-vues button { padding: 6px 12px; font-size: 10.5px; } .cal-case { min-height: 104px; padding: 5px 4px; } .cal-num { font-size: 12.5px; } .cal-case.auj .cal-num { width: 22px; height: 22px; line-height: 22px; } .ev { font-size: 10.5px; gap: 4px; padding: 1.5px 4px; border-radius: 4px; } .ev i { width: 6px; height: 6px; } .ev span { display: inline; } .cal-plus { font-size: 9.5px; } .cal-col { flex: 1 1 0; min-width: 0; } .cal-annee { grid-template-columns: repeat(4, 1fr); gap: 12px; } } /* Une fiche ouverte DEPUIS une autre doit passer devant elle. Toutes les surcouches partageaient le meme z-index : a egalite, c est l ordre du document qui tranche — invisible en lisant le code, et casse des qu on deplace une ligne. La reservation s ouvrait ainsi DERRIERE la journee, et le bouton paraissait mort alors qu il fonctionnait. */ .sheet-overlay.dessus, .modale-overlay.dessus { z-index: 260; } /* ===================== MENU « ⋮ » ===================== Le même geste partout : trois points sur ce qui s'ouvre, puis Modifier ou Supprimer. La v1 l'avait, la v2 l'avait perdu — on pouvait créer un événement sans jamais pouvoir le corriger. */ .points-wrap { position: absolute; top: 12px; right: 50px; z-index: 3; } .points-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; } .points-btn:active, .points-btn.on { background: rgba(255,255,255,0.22); } .points-menu { position: absolute; top: 36px; right: 0; min-width: 158px; background: #151b28; border: 1px solid #2a3348; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.55); } .points-item { display: block; width: 100%; text-align: left; padding: 11px 14px; background: none; border: none; border-bottom: 1px solid #1e2637; color: #e8e8ee; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; } .points-item:last-child { border-bottom: none; } .points-item:active { background: #1c2334; } .points-item.danger { color: #ff8f8f; } /* Le placement ci-dessus vise un en-tête de fiche, où les trois points se posent dans le coin. Dans une ligne de liste (écran Comptes) il doit au contraire suivre le flux, sinon il se superpose au nom du voisin. */ .mesjoueurs-row .points-wrap { position: relative; top: auto; right: auto; flex: 0 0 auto; } /* Et la carte doit laisser dépasser le menu : avec l'overflow masqué par défaut, celui des dernières lignes était coupé net, donc inutilisable. */ .card.deborde { overflow: visible; } /* Conditions du mot de passe, cochées pendant la frappe. Les afficher après validation ferait recommencer ; les montrer pendant évite l'aller-retour. */ .in-regles { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; } .in-regles span { font-size: 10.5px; color: #6f7a90; font-weight: 700; } .in-regles span.ok { color: #33d17a; }