@layer reset, tokens, base, layout, components, utilities; /* ============ RESET ============ */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100dvh; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } ::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); } } /* ============ DESIGN TOKENS ============ */ @layer tokens { :root { color-scheme: light dark; --bg: light-dark(oklch(98.5% 0.004 260), oklch(13% 0.008 260)); --surface: light-dark(oklch(100% 0 0), oklch(17% 0.01 260)); --surface-2: light-dark(oklch(96.5% 0.005 260), oklch(20% 0.012 260)); --surface-3: light-dark(oklch(94% 0.006 260), oklch(24% 0.013 260)); --border: light-dark(oklch(91% 0.008 260), oklch(28% 0.015 260)); --border-strong: light-dark(oklch(85% 0.01 260), oklch(35% 0.018 260)); --text: light-dark(oklch(18% 0.02 260), oklch(96% 0.004 260)); --text-2: light-dark(oklch(42% 0.018 260), oklch(72% 0.008 260)); --text-3: light-dark(oklch(58% 0.014 260), oklch(64% 0.008 260)); --accent: oklch(58% 0.19 252); --accent-hover: oklch(52% 0.20 252); --accent-soft: light-dark(oklch(96% 0.04 252), oklch(28% 0.10 252)); --accent-text: light-dark(oklch(40% 0.18 252), oklch(82% 0.13 252)); --success: oklch(60% 0.15 155); --success-soft: light-dark(oklch(95% 0.05 155), oklch(28% 0.08 155)); --warning: oklch(72% 0.16 75); --warning-soft: light-dark(oklch(96% 0.06 85), oklch(28% 0.08 75)); --danger: oklch(58% 0.21 25); --danger-soft: light-dark(oklch(96% 0.04 25), oklch(28% 0.10 25)); /* Court tints */ --court-1: light-dark(oklch(94% 0.03 25), oklch(25% 0.04 25)); --court-2: light-dark(oklch(94% 0.03 25), oklch(25% 0.04 25)); --court-3: light-dark(oklch(94% 0.035 145), oklch(25% 0.05 145)); --court-4: light-dark(oklch(94% 0.03 25), oklch(25% 0.04 25)); --court-5: light-dark(oklch(94% 0.035 240), oklch(25% 0.05 240)); --court-6: light-dark(oklch(95% 0.04 85), oklch(25% 0.05 85)); --court-7: light-dark(oklch(94% 0.035 145), oklch(25% 0.05 145)); --court-8: light-dark(oklch(94% 0.04 295), oklch(25% 0.06 295)); --radius-sm: 0.5rem; --radius: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --shadow-xs: 0 1px 2px oklch(20% 0.02 260 / .04); --shadow-sm: 0 1px 3px oklch(20% 0.02 260 / .04), 0 1px 2px oklch(20% 0.02 260 / .03); --shadow: 0 4px 12px oklch(20% 0.02 260 / .06), 0 2px 4px oklch(20% 0.02 260 / .04); --shadow-md: 0 8px 24px oklch(20% 0.02 260 / .08), 0 4px 8px oklch(20% 0.02 260 / .04); --shadow-lg: 0 20px 48px oklch(20% 0.02 260 / .12), 0 8px 16px oklch(20% 0.02 260 / .06); /* ── Système de modale/overlay unifié (style « feuille » verre dépoli, identique au sous-menu .sheet). Consommé par TOUTES les modales V2 (recharge, messages, dialogues de réservation, paiement, leaderboard…) pour un rendu cohérent. Voir .v2-glass-* plus bas. ── */ --v2-glass-bg: light-dark( color-mix(in oklch, oklch(100% 0 0) 88%, transparent), color-mix(in oklch, oklch(22% 0.01 260) 90%, transparent) ); --v2-glass-blur: blur(28px) saturate(180%); --v2-glass-radius: 24px; --v2-glass-border: 1px solid color-mix(in oklch, white 25%, transparent); --v2-glass-shadow: 0 12px 40px oklch(0% 0 0 / 0.22), 0 4px 12px oklch(0% 0 0 / 0.12), 0 0 0 0.5px color-mix(in oklch, white 30%, transparent) inset, 0 1px 0 0 color-mix(in oklch, white 55%, transparent) inset; --v2-modal-backdrop: oklch(15% 0.02 260 / 0.34); --v2-modal-backdrop-blur: blur(5px); --topbar-h: 64px; --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --row-h: 56px; /* Hauteur MINIMUM d'une ligne de planning. Passée de 26px à 34px (+30%) : à 26px les cases de 30 min étaient trop basses pour lire l'heure + le nom, et la cible tactile était trop petite. La grille reste en `minmax(--row-h-compact, auto)` : un créneau plus riche continue de grandir tout seul. */ --row-h-compact: 34px; --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } } /* ============ BASE ============ */ @layer base { body { font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; accent-color: var(--accent); overflow-x: hidden; } html { scroll-padding-top: calc(var(--topbar-h) + 90px); } h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.015em; font-family: var(--font-display); } p { margin: 0; text-wrap: pretty; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } } /* ============ LAYOUT ============ */ @layer layout { .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns 0.25s var(--ease-out); } body:has(#sideToggle:checked) .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); } /* Club inconnu → le partial _sidebar ne rend pas de .side : une seule colonne. */ .app:not(:has(> .side)) { grid-template-columns: minmax(0, 1fr); } .side { background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; z-index: 40; overflow: visible; } main { display: flex; flex-direction: column; min-width: 0; } .top { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--border); padding-inline: 1rem; display: flex; align-items: center; gap: 0.625rem; overflow: visible; } .content { padding: 1.25rem 1.5rem 4rem; container-type: inline-size; container-name: content; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } /* ============ COMPONENTS ============ */ @layer components { /* ---- Sidebar ---- */ .club { padding: 0.875rem 0.75rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.625rem; position: relative; transition: background 0.15s var(--ease-out); width: 100%; } .club:hover { background: var(--surface-2); } .club-logo { inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 0.625rem; background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow-xs); } .club-logo img { inline-size: 100%; block-size: 100%; object-fit: cover; } .club-meta { min-width: 0; flex: 1; text-align: start; } .club-meta .name { font-weight: 700; font-size: 0.8125rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; color: var(--text); } .club-meta .sport-line { font-size: 0.6875rem; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .club-multi-badge { inline-size: auto; min-inline-size: 18px; padding: 1px 5px; flex: none; background: var(--accent); color: white; font-size: 0.625rem; font-weight: 800; border-radius: 999px; line-height: 1.4; text-align: center; box-shadow: 0 1px 3px color-mix(in oklch, var(--accent) 30%, transparent); } body:has(#sideToggle:checked) .club-multi-badge { display: none !important; } .club-chev { color: var(--text-3); flex: none; transition: color 0.15s; } .club:hover .club-chev { color: var(--text-2); } .club-popover { position: absolute; inset-inline: 0.5rem; inset-block-start: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.375rem; margin: 0; overflow: hidden; } .club-popover[popover] { width: auto; } #clubMenu[popover]:popover-open { position: fixed; inset-block-start: calc(var(--topbar-h) + 8px); inset-inline-start: calc(var(--sidebar-w) + 1rem); inset-inline-end: auto; min-inline-size: min(280px, calc(100vw - var(--sidebar-w) - 1.5rem)); max-inline-size: min(380px, calc(100vw - var(--sidebar-w) - 1.5rem)); inline-size: auto; margin: 0; } body:has(#sideToggle:checked) #clubMenu[popover]:popover-open { inset-inline-start: calc(var(--sidebar-w-collapsed) + 1rem); min-inline-size: min(280px, calc(100vw - var(--sidebar-w-collapsed) - 1.5rem)); max-inline-size: min(380px, calc(100vw - var(--sidebar-w-collapsed) - 1.5rem)); } .club-popover .item { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; width: 100%; text-align: start; } .club-popover .item:hover { background: var(--surface-2); } .club-popover .item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); } .club-popover .item .club-active-check { flex: none; } .club-popover .item .lg { inline-size: 4.2rem; block-size: 2.9rem; flex: none; border-radius: 0.5rem; display: grid; place-items: center; color: white; font-weight: 800; font-size: 0.6875rem; overflow: hidden; background: white; border: 1px solid var(--border); } .club-popover .item .lg .logo-fallback { inline-size: 100%; block-size: 100%; display: grid; place-items: center; color: var(--text-2); font-weight: 800; font-size: 0.6875rem; background: var(--surface-2); } .club-popover .item .lg img { inline-size: 100%; block-size: 100%; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 3px; } .club-popover .item .meta { min-width: 0; flex: 1; } .club-popover .item .nm { font-weight: 600; font-size: 0.8125rem; } .club-popover .item .ctc { font-size: 0.6875rem; color: var(--text-3); } .club-popover hr { margin: 0.375rem 0.25rem; border: 0; border-top: 1px solid var(--border); } .club-popover .add { color: var(--accent); font-weight: 600; font-size: 0.8125rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; cursor: pointer; } .club-popover .add:hover { background: var(--accent-soft); } /* Nav */ .nav-wrap { padding: 0.75rem 0.625rem; flex: 1; overflow: auto; scrollbar-gutter: stable; padding-bottom: 2rem; } .nav-title { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 0.75rem 0.75rem 0.375rem; font-weight: 700; } .nav a { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; color: var(--text-2); font-weight: 500; font-size: 0.8125rem; margin-block-end: 1px; width: 100%; transition: background 0.12s, color 0.12s; position: relative; overflow: visible; } .nav a > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .nav a:hover { background: var(--surface-2); color: var(--text); } .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0.5rem; inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .nav .ico { inline-size: 1.125rem; block-size: 1.125rem; flex: none; opacity: 0.85; } /* Icônes colorées pour les rubriques mises en avant */ .nav .ico.ic-defi { color: oklch(68% 0.20 65); opacity: 1; } .nav .ico.ic-whatsapp { color: oklch(58% 0.16 145); opacity: 1; } .nav .ico.ic-tournoi { color: oklch(68% 0.20 65); opacity: 1; } .nav .ico.ic-resto { color: oklch(62% 0.18 30); opacity: 1; } .nav .ico.ic-partner { color: oklch(60% 0.15 220); opacity: 1; } .nav .badge { margin-inline-start: auto; min-width: 1.25rem; height: 1.125rem; padding: 0 0.375rem; background: var(--danger); color: white; font-size: 0.6875rem; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .nav .badge.muted { background: var(--surface-3); color: var(--text-3); } /* User block */ .me { border-top: 1px solid var(--border); padding: 0.75rem; display: flex; align-items: center; gap: 0.625rem; margin-top: auto; position: sticky; bottom: 0; z-index: 50; background: var(--surface); } .me .avatar { inline-size: 2.125rem; block-size: 2.125rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, oklch(78% 0.10 280), oklch(70% 0.14 240)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; } .me .info { flex: 1; min-width: 0; } .me .info .nm { font-weight: 600; font-size: 0.8125rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me .info .role { font-size: 0.6875rem; color: var(--text-3); } .me-actions { display: flex; gap: 2px; } /* Bloc utilisateur = bouton qui ouvre le menu « Mon compte » (#accountMenu). */ .me:has(.me-trigger) { padding: 0.5rem; } .me-trigger { display: flex; align-items: center; gap: 0.625rem; inline-size: 100%; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.625rem; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background 0.12s; } .me-trigger:hover, .me-trigger[aria-expanded="true"] { background: var(--surface-2); } .me-trigger.is-active { background: var(--accent-soft); } .me-trigger .avatar { position: relative; } .me-trigger .info { display: flex; flex-direction: column; } .me-chev { flex: none; color: var(--text-3); } .me-dot { position: absolute; inset-block-start: -1px; inset-inline-end: -1px; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); } .account-menu { margin: 0; padding: 0.375rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } /* En-tête nom/rôle : redondant avec le bloc juste dessous en sidebar déployée, utile en sidebar repliée (le rail n'affiche que l'avatar). */ .account-menu__head { display: none; } body:has(#sideToggle:checked) .account-menu__head { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 0.625rem; margin-block-end: 0.25rem; border-block-end: 1px solid var(--border); } .account-menu__head .avatar { inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, oklch(78% 0.10 280), oklch(70% 0.14 240)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; } .account-menu__head .info { display: flex; flex-direction: column; min-width: 0; } .account-menu__head .nm { font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu__head .role { font-size: 0.6875rem; color: var(--text-3); } .account-menu a { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; color: var(--text-2); font-weight: 500; font-size: 0.8125rem; text-decoration: none; } .account-menu a > span:not(.badge) { flex: 1; min-width: 0; } .account-menu a:hover { background: var(--surface-2); color: var(--text); } .account-menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } .account-menu a.danger:hover { color: var(--danger); } .account-menu .ico { inline-size: 1.125rem; block-size: 1.125rem; flex: none; opacity: 0.85; } .account-menu .ico.ic-resto { color: oklch(62% 0.18 30); opacity: 1; } .account-menu .badge { min-width: 1.25rem; height: 1.125rem; padding: 0 0.375rem; background: var(--danger); color: white; font-size: 0.6875rem; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .account-menu hr { margin: 0.25rem; border: 0; border-top: 1px solid var(--border); } .me--guest { justify-content: center; } .me-login-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.625rem; background: var(--accent); color: white; font-weight: 600; font-size: 0.8125rem; transition: background 0.12s, transform 0.12s, box-shadow 0.18s; width: 100%; justify-content: center; border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 2px 6px color-mix(in oklch, var(--accent) 25%, transparent); } .me-login-btn svg { color: #fff; } .me-login-btn:hover { background: var(--accent-hover, oklch(55% 0.18 240)); transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); } .me-login-btn:active { transform: translateY(0); } /* Variante `--page` : version plus grande pour la page loginV2 (le menu gauche est étroit, donc le bouton de base est compact ; sur la page login on a beaucoup d'espace donc on agrandit le padding et la typo). */ .me-login-btn.me-login-btn--page { padding: 0.875rem 1rem; border-radius: 0.75rem; font-size: 0.9375rem; font-weight: 700; box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); } .me-login-btn.me-login-btn--page:hover { box-shadow: 0 8px 22px color-mix(in oklch, var(--accent) 38%, transparent); } /* État aria-busy (spinner pendant le submit) — copié de .auth-submit pour ne pas dépendre de cette classe. */ .me-login-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; transform: none; } .me-login-btn[aria-busy="true"] .auth-submit__label { opacity: 0.7; } .icon-btn { inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; display: grid; place-items: center; color: var(--text-3); transition: background 0.12s, color 0.12s; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn.danger:hover { color: var(--danger); } /* Collapse btn (label for hidden checkbox) */ .collapse-btn { position: absolute; inset-inline-end: -10px; inset-block-start: 1.25rem; z-index: 12; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--text-3); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .collapse-btn:hover { color: var(--accent); border-color: var(--accent); } .collapse-btn svg { transition: transform 0.25s var(--ease-out); } body:has(#sideToggle:checked) .collapse-btn svg { transform: rotate(180deg); } /* Lien "Revenir à l'ancienne version" (bas du sidebar, période de test V2). Même apparence que les items de nav : pas de cadre, mêmes paddings/couleurs. */ .side-legacy { display: flex; align-items: center; gap: 0.625rem; margin: 0.25rem 0.625rem 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.625rem; position: relative; color: var(--text-2); font-weight: 500; font-size: 0.8125rem; text-decoration: none; transition: background 0.12s, color 0.12s; } .side-legacy:hover { color: var(--text); background: var(--surface-2); } .side-legacy svg { width: 1.125rem; height: 1.125rem; flex: none; opacity: 0.85; } .side-legacy__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* Collapsed sidebar state */ body:has(#sideToggle:checked) .club-meta, body:has(#sideToggle:checked) .club-chev, body:has(#sideToggle:checked) .nav-title, body:has(#sideToggle:checked) .nav .badge, body:has(#sideToggle:checked) .me .info, body:has(#sideToggle:checked) .side .me-login-btn__label, body:has(#sideToggle:checked) .side-legacy__label { display: none !important; } /* Replié : le lien "Revenir à l'ancienne version" se réduit à l'icône centrée. */ body:has(#sideToggle:checked) .side-legacy { justify-content: center; padding-inline: 0; margin-inline: 0; } /* Replié : le bouton "Se connecter" se réduit à une pastille carrée (icône seule). Scopé à `.side` : sinon la règle fuit vers le bouton login du sidebar de réservation (même classe `.me-login-btn`), qui se retrouve écrasé en carré 40px avec le libellé « Se connecter » qui déborde. */ body:has(#sideToggle:checked) .side .me-login-btn { inline-size: 40px; min-inline-size: 0; padding: 0; gap: 0; aspect-ratio: 1; justify-content: center; } /* Replié : empile avatar + actions verticalement et garde la DÉCONNEXION accessible (icône seule). L'engrenage "paramètres" est masqué car l'avatar mène déjà au profil → on évite le doublon dans un espace réduit. */ body:has(#sideToggle:checked) .me { flex-direction: column; gap: 0.4rem; padding-inline: 0; } body:has(#sideToggle:checked) .me-trigger { justify-content: center; inline-size: auto; padding: 0.25rem; } body:has(#sideToggle:checked) .me-chev { display: none; } body:has(#sideToggle:checked) .me-actions .icon-btn:not(.danger) { display: none !important; } body:has(#sideToggle:checked) .nav a { justify-content: center; padding-inline: 0; } /* Replié : le rail ne doit plus clipper horizontalement, sinon le tooltip (span label positionné à droite du lien) est coupé par le scroll de .nav-wrap. */ body:has(#sideToggle:checked) .nav-wrap { overflow: visible; } body:has(#sideToggle:checked) .club { justify-content: center; padding-inline: 0; } body:has(#sideToggle:checked) .me { justify-content: center; } body:has(#sideToggle:checked) .nav a > span:not(.badge) { position: absolute; inset-inline-start: calc(100% + 0.625rem); inset-block-start: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 80; padding: 0.45rem 0.625rem; border-radius: 0.625rem; background: color-mix(in oklch, var(--surface) 94%, white 6%); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--text); flex: none; min-width: max-content; max-width: 18rem; overflow: visible; text-overflow: clip; transition: opacity 0.12s ease, transform 0.12s ease; } body:has(#sideToggle:checked) .nav a:hover > span:not(.badge), body:has(#sideToggle:checked) .nav a:focus-visible > span:not(.badge) { opacity: 1; transform: translateY(-50%) translateX(0); } /* Replié : tooltips au survol pour les contrôles du bas (déconnexion, connexion, retour à l'ancienne version), à parité avec les items de nav. Le libellé est repris de l'attribut aria-label via ::after — aucun span requis. */ body:has(#sideToggle:checked) .side .me-actions .icon-btn, body:has(#sideToggle:checked) .side .me-login-btn, body:has(#sideToggle:checked) .side-legacy { position: relative; } body:has(#sideToggle:checked) .side .me-actions .icon-btn::after, body:has(#sideToggle:checked) .side .me-login-btn::after, body:has(#sideToggle:checked) .side-legacy::after { content: attr(aria-label); position: absolute; inset-inline-start: calc(100% + 0.625rem); inset-block-start: 50%; transform: translateY(-50%) translateX(-6px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 80; padding: 0.45rem 0.625rem; border-radius: 0.625rem; background: color-mix(in oklch, var(--surface) 94%, white 6%); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--text); font-size: 0.8125rem; font-weight: 500; min-width: max-content; transition: opacity 0.12s ease, transform 0.12s ease; } body:has(#sideToggle:checked) .side .me-actions .icon-btn:hover::after, body:has(#sideToggle:checked) .side .me-actions .icon-btn:focus-visible::after, body:has(#sideToggle:checked) .side .me-login-btn:hover::after, body:has(#sideToggle:checked) .side .me-login-btn:focus-visible::after, body:has(#sideToggle:checked) .side-legacy:hover::after, body:has(#sideToggle:checked) .side-legacy:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* ---- Réservation en cours (cartes : sport · méta · code portier) ---- */ .cur-res { margin: 0.25rem 0 0.5rem; } .cur-res > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.625rem 0.45rem; cursor: pointer; color: var(--text-3); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; outline: none; border-radius: 0.5rem; } .cur-res > summary::-webkit-details-marker { display: none; } /* Anneau de focus accessible (clavier) sans le rectangle bleu intrusif par défaut. */ .cur-res > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cur-res > summary:hover { color: var(--text-2); background: var(--surface-2); } .cur-res > summary:active { background: color-mix(in oklch, var(--surface-2) 65%, var(--accent-soft)); } .cur-res-ico { inline-size: 0.95rem; block-size: 0.95rem; flex: none; opacity: 0.7; } .cur-res-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cur-res-count { background: var(--accent-soft); color: var(--accent-text); font-size: 0.625rem; font-weight: 800; padding: 0.05rem 0.4rem; border-radius: 999px; min-inline-size: 1.1rem; text-align: center; text-transform: none; letter-spacing: 0; } .cur-res-chev { inline-size: 0.85rem; block-size: 0.85rem; flex: none; color: var(--text-3); transition: transform 0.2s var(--ease-out); } .cur-res[open] > summary .cur-res-chev { transform: rotate(180deg); } .cur-res-items { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 0.625rem 0.25rem; } .cur-res-item { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; box-shadow: var(--shadow-xs); } /* Carte cliquable → renvoie vers le planning à la date de la réservation (parité legacy : dashboard/changeSport). Reset des styles `a` par défaut. */ a.cur-res-item--link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), transform 0.15s var(--ease-out); } a.cur-res-item--link:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm); } a.cur-res-item--link:active { transform: translateY(1px); } a.cur-res-item--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .cur-res-item__sport { font-size: 0.8125rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } .cur-res-item__meta { font-size: 0.6875rem; color: var(--text-3); display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .cur-res-item__sep { opacity: 0.55; } .cur-res-item__code { margin-top: 0.25rem; padding: 0.45rem 0.625rem 0.5rem; border-radius: 0.625rem; background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 14%, transparent), color-mix(in oklch, var(--accent) 5%, transparent)); border: 1px dashed color-mix(in oklch, var(--accent) 35%, transparent); display: flex; flex-direction: column; align-items: center; gap: 0.05rem; } .cur-res-item__code-value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.14em; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .cur-res-item__code-label { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } /* Sidebar replié : le widget cartes n'a pas de sens sur l'icône rail → on cache. */ body:has(#sideToggle:checked) .cur-res { display: none; } /* Variante sheet mobile :
collapsible (fermé par défaut), cartes sur fond translucide pour bon contraste sur la sheet. */ .sheet-cur-res { padding: 0 0.35rem 0.5rem; } .sheet-cur-res > summary.sheet-cur-res-title { list-style: none; cursor: pointer; outline: none; display: flex; align-items: center; gap: 0.5rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in oklch, var(--text) 55%, transparent); padding: 0.5rem 0.15rem 0.4rem; border-radius: 0.5rem; } .sheet-cur-res > summary::-webkit-details-marker { display: none; } .sheet-cur-res > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sheet-cur-res > summary:hover { background: color-mix(in oklch, var(--text) 8%, transparent); } .sheet-cur-res > summary:active { background: color-mix(in oklch, var(--text) 14%, transparent); } .sheet-cur-res > summary .cur-res-chev { margin-inline-start: auto; } .sheet-cur-res[open] > summary .cur-res-chev { transform: rotate(180deg); } .sheet .cur-res-items { padding: 0.25rem 0 0; } .sheet .cur-res-item { background: color-mix(in oklch, var(--surface) 65%, transparent); border-color: color-mix(in oklch, var(--border) 55%, transparent); } /* ---- Topbar ---- */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border); padding: 0.32rem 0.65rem; border-radius: 0.625rem; font-weight: 600; font-size: 0.8125rem; color: var(--text); transition: border-color 0.12s, background 0.12s; } .pill:hover { border-color: var(--border-strong); background: var(--surface-2); } .pill .pill-ic { inline-size: 1.5rem; block-size: 1.5rem; border-radius: 0.375rem; display: grid; place-items: center; color: white; background: linear-gradient(135deg, oklch(80% 0.13 75), oklch(65% 0.18 50)); } .pill .pill-sub { color: var(--text-3); font-weight: 500; font-size: 0.75rem; } .pill .chev { color: var(--text-3); } /* Date stepper — anchor positioning for popover */ .date-stepper { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 0.625rem; position: relative; anchor-name: --date-anchor; } .date-stepper > a, .date-stepper > button { min-inline-size: 2.5rem; min-block-size: 2.4rem; padding: 0.32rem 0.75rem; display: grid; place-items: center; color: var(--text-3); transition: color 0.12s, background 0.12s; } .date-stepper > a:hover, .date-stepper > button:hover { color: var(--accent); } /* Flèche désactivée en bout de plage (aujourd'hui = pas de passé ; borne max = pas de futur). Même gabarit que les flèches actives mais grisée et inerte. */ .date-stepper > .step-off { min-inline-size: 2.5rem; min-block-size: 2.4rem; padding: 0.32rem 0.75rem; display: grid; place-items: center; color: var(--text-3); opacity: 0.28; cursor: default; user-select: none; } .date-stepper .date-main { padding: 0.34rem 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.015em; border-inline: 1px solid var(--border); display: inline-flex; gap: 0.45rem; align-items: center; color: var(--text); white-space: nowrap; } .date-stepper .date-main .d-rest, .date-stepper .date-main .d-year { white-space: nowrap; } .date-stepper .date-main:hover { background: var(--accent-soft); color: var(--accent-text); } .date-stepper .date-main .dow { color: var(--accent); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; } .date-stepper .date-main svg { color: var(--text-3); opacity: 0.7; } /* Today button — accent */ .today-btn { background: var(--accent); color: white; padding: 0.32rem 0.65rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.75rem; box-shadow: var(--shadow-sm); transition: background 0.12s; } .today-btn:hover { background: var(--accent-hover); } .live-clock { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; } .live-clock .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 25%, transparent); animation: pulse 2s var(--ease-in-out) infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 25%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--success) 12%, transparent); } } .top-spacer { flex: 1; } .top-actions { display: flex; align-items: center; gap: 0.4rem; } .text-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); text-decoration: none; /* Aide/Feedback sont désormais des */ transition: background 0.12s, color 0.12s; } .text-btn:hover { background: var(--surface-2); color: var(--text); } .lang-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.55rem; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.75rem; color: var(--text-2); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .lang-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .lang-btn svg { color: var(--text-3); flex: none; } /* Popover langue custom */ #langMenu[popover]:popover-open { position: fixed; inset-block-start: calc(var(--topbar-h) + 8px); inset-inline-end: 1rem; inset-inline-start: auto; inline-size: 13rem; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.375rem; } .lang-popover .item { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.55rem; font-size: 0.8125rem; font-weight: 500; border-radius: 0.5rem; width: 100%; text-align: start; cursor: pointer; transition: background 0.1s; text-decoration: none; color: var(--text); } .lang-popover .item:hover { background: var(--surface-2); } .lang-popover .item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } /* ── Sélecteur de langue unifié : bouton globe + menu avec drapeaux ── */ .lang-btn .lang-globe, .lang-btn .lang-chev { color: var(--text-3); flex: none; } .lang-btn .lang-code { font-weight: 600; letter-spacing: 0.02em; } .lang-popover .item .lang-flag { inline-size: 22px; block-size: 16px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10); background: var(--surface-2); } .lang-popover .item .lang-name { flex: 1 1 auto; min-inline-size: 0; } .lang-popover .item .lang-tag { flex: none; font-size: 0.6875rem; font-weight: 700; color: var(--text-3); letter-spacing: 0.03em; } .lang-popover .item[aria-current="true"] .lang-tag { color: var(--accent-text); } .lang-popover .item .lang-check { flex: none; color: var(--accent); margin-inline-start: 0.125rem; } .top-avatar { inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; background: linear-gradient(135deg, oklch(78% 0.10 280), oklch(70% 0.14 240)); color: white; font-weight: 700; font-size: 0.8125rem; place-items: center; justify-content: center; } .top-user { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.625rem 0.25rem 0.25rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--text); transition: background 0.12s; } .top-user:hover { background: var(--surface-2); } .top-user-avatar { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, oklch(78% 0.10 280), oklch(70% 0.14 240)); color: white; font-weight: 700; font-size: 0.75rem; display: grid; place-items: center; } .logout-btn { inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; display: grid; place-items: center; color: var(--text-3); } .logout-btn:hover { background: var(--surface-2); color: var(--danger); } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; background: var(--surface-2); padding: 2px; border-radius: 0.5rem; border: 1px solid var(--border); } .theme-toggle button { inline-size: 1.75rem; block-size: 1.5rem; border-radius: 0.375rem; color: var(--text-3); display: grid; place-items: center; } .theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); } /* ---- Top zone : Wallet/Quotas + Pubs ---- */ .top-zone { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.875rem; margin-block-end: 0.875rem; } .top-zone--tri { grid-template-columns: 1fr 1fr; } .top-zone--solo { grid-template-columns: 1fr; } @container content (max-width: 560px) { .top-zone { grid-template-columns: 1fr; } } @media (min-width: 901px) { .top-zone { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .top-zone--solo { grid-template-columns: minmax(0, 1fr); } .top-zone--tri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .top-zone > details, .top-zone > .collapsible-mobile, .info-card, .info-section, .rules-list, .quota-list { min-width: 0; } .info-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Quotas card */ .info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; } .info-card--balanced { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .info-card--rules-only { grid-template-columns: 1fr; } @container content (max-width: 720px) { .info-card { grid-template-columns: 1fr; } } .info-section { padding: 1rem 1.125rem; } .info-section + .info-section { border-inline-start: 1px solid var(--border); } @container content (max-width: 720px) { .info-section + .info-section { border-inline-start: 0; border-block-start: 1px solid var(--border); } } .info-section h4 { margin: 0 0 0.75rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 700; display: flex; align-items: center; gap: 0.4rem; } .quota-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; } /* Item pleine-largeur avec barre de progression — label en 1fr, valeur à droite. */ .quota-item--full { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-content: stretch; } /* Default — items simples (n-heure, invités gratuits/payants) : label et chiffre adjacents pour que l'association soit claire. */ .quota-item { display: grid; grid-template-columns: auto auto; gap: 0.25rem 0.4rem; align-items: center; justify-content: start; } .quota-item .q-label { font-size: 0.8125rem; color: var(--text-2); font-weight: 500; } .quota-item .q-value { font-size: 0.8125rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .quota-item .q-value .max { color: var(--text-3); font-weight: 500; } .quota-item .q-bar { grid-column: 1 / -1; height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .quota-item .q-fill { height: 100%; border-radius: 999px; transition: width 0.6s var(--ease-out); } .quota-item .q-fill.ok { background: linear-gradient(90deg, var(--success), oklch(72% 0.16 155)); } .quota-item .q-fill.warn { background: linear-gradient(90deg, var(--warning), oklch(80% 0.14 75)); } .quota-item .q-fill.full { background: linear-gradient(90deg, var(--danger), oklch(65% 0.18 25)); } .quota-item .q-sub { grid-column: 1 / -1; font-size: 0.6875rem; color: var(--text-3); font-weight: 500; } /* Item texte restriction (sans barre de progression) */ .quota-item.restriction-msg { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 0.4rem; align-items: flex-start; background: var(--surface-2); border-radius: 0.5rem; padding: 0.5rem 0.625rem; } .quota-item.restriction-msg .q-ic { flex: none; color: var(--warning); margin-top: 0.05rem; } .quota-item.restriction-msg .q-label--msg { font-size: 0.775rem; color: var(--text-2); font-weight: 500; white-space: normal; } /* Item bouton action (rel="m/p/n") */ .quota-item.quota-action { grid-column: 1 / -1; grid-template-columns: 1fr; justify-items: start; } .quota-item.wallet { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; background: linear-gradient(135deg, var(--accent-soft), color-mix(in oklch, var(--accent-soft) 60%, var(--surface))); border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent); } .quota-item.wallet .q-ic { inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; background: var(--accent); color: white; display: grid; place-items: center; flex: none; } .quota-item.wallet .q-label { color: var(--accent-text); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } .quota-item.wallet .q-value { font-size: 1.0625rem; color: var(--accent-text); font-family: var(--font-display); } .quota-item.wallet .actions { grid-column: 1 / -1; display: flex; gap: 0.4rem; margin-block-start: 0.25rem; } /* Bouton mini — utilisé dans wallet (stretch) et quota-action (compact) */ .btn-mini { padding: 0.35rem 0.75rem; font-size: 0.75rem; font-weight: 600; border-radius: 0.5rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .btn-mini:hover { background: var(--surface-3); color: var(--text); } .btn-mini.primary { background: var(--accent); color: white; border-color: var(--accent); } .btn-mini.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Wallet : étirer les boutons sur toute la largeur */ .quota-item.wallet .btn-mini { flex: 1; justify-content: center; } .quota-item.wallet .btn-mini { color: var(--accent-text); border-color: color-mix(in oklch, var(--accent) 30%, transparent); background: var(--surface); } .quota-item.wallet .btn-mini:hover { background: var(--accent); color: white; border-color: var(--accent); } .rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; } .rules-list--single { grid-template-columns: 1fr; } .rules-list--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rules-list--quad .rule--max-time { grid-column: span 2; } .rule--full { grid-column: 1 / -1; } .rule--full .rule-val { white-space: normal; line-height: 1.8; } @container content (max-width: 980px) { .rules-list--quad { grid-template-columns: 1fr 1fr; } } @container content (max-width: 560px) { .rules-list--quad { grid-template-columns: 1fr; } } .rules-empty { font-size: 0.8rem; color: var(--text-3); font-style: italic; margin: 0; } .rules-empty ~ .me-login-btn { width: auto; margin-block-start: 0.5rem; } .rule { display: flex; align-items: center; gap: 0.5rem; background: var(--surface-2); border-radius: 0.5rem; padding: 0.4rem 0.5rem; } .rule .rule-ic { flex: none; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 0.375rem; background: var(--surface-3); color: var(--text-3); display: grid; place-items: center; } .rule .rule-ic svg { inline-size: 0.8rem; block-size: 0.8rem; stroke-width: 1.75; } .rule .rule-label { flex: 1; font-size: 0.775rem; color: var(--text-2); line-height: 1.3; min-width: 0; } .rule .rule-val { flex: none; font-size: 0.7rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.1rem 0.45rem; white-space: normal; line-height: 1.6; } .rule .rule-val--ok { color: light-dark(var(--success), oklch(80% 0.14 155)); background: var(--success-soft); border-color: color-mix(in oklch, var(--success) 30%, transparent); } /* Right column: carousel promo */ .promo-reel { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } .promo-track { display: flex; transition: transform 0.5s ease; will-change: transform; } .promo-slide { flex: 0 0 100%; min-width: 0; display: block; } .promo-slide:hover { opacity: 0.9; } .promo-banner { width: 100%; height: 90px; display: block; object-fit: contain; background: var(--surface-2); } /* Bannières Tennis Warehouse : format IAB « leaderboard » 728×90 (les quatre fichiers de public/pub/ font exactement cette taille). Avec `object-fit: cover` dans une boîte de 90px de haut, l'image était affichée à l'échelle 1 et rognée à droite dès que la colonne mesurait moins de 728px — le logo « TENNIS WAREHOUSE » disparaissait. On rend donc la hauteur proportionnelle à la largeur disponible, sans jamais recadrer ni agrandir au-delà de la taille native (au-delà, la colonne ne dépasse 728px que sur de très grands écrans : la bannière se centre). */ .promo-slide--tw { display: flex; align-items: center; justify-content: center; } .promo-slide--tw .promo-banner { inline-size: 100%; max-inline-size: 728px; block-size: auto; aspect-ratio: 728 / 90; object-fit: contain; background: none; } .ad-offer { margin-block-start: 0.5rem; padding: 0.5rem 0.75rem; /* Le crème d'origine restait allumé en thème sombre : c'était le plus gros aplat clair de la page, éblouissant à côté d'une grille noire. Version sombre = même teinte ambrée, mais posée en surface sombre. */ background: light-dark(oklch(95% 0.06 85), oklch(24% 0.05 80)); border: 1px solid light-dark(oklch(85% 0.1 80), oklch(38% 0.07 80)); border-radius: var(--radius); text-align: center; display: flex; flex-direction: column; gap: 0.25rem; } .ad-offer strong { font-size: 0.8125rem; color: light-dark(oklch(45% 0.12 75), oklch(88% 0.11 80)); } .ad-offer small { font-size: 0.7rem; color: light-dark(oklch(40% 0.08 75), oklch(78% 0.06 80)); } /* ---- Club message (preserved style: red border-left + red title) ---- */ .club-msg { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--danger); border-radius: var(--radius); padding: 0.875rem 1.125rem; margin-block-end: 0.875rem; box-shadow: var(--shadow-xs); } .club-msg .msg-head { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 700; margin-block-end: 0.4rem; display: flex; align-items: center; gap: 0.4rem; } .club-msg .msg-head::before { content: ""; inline-size: 6px; block-size: 6px; background: var(--danger); border-radius: 50%; } .club-msg-body { font-size: 0.875rem; color: var(--text); line-height: 1.55; } .club-msg-body h2 { margin: 0 0 0.25rem; font-size: 1rem; color: oklch(48% 0.20 25); font-weight: 800; } .club-msg-body p { margin: 0 0 0.4rem; } .club-msg-body a { color: var(--accent); font-weight: 700; border-block-end: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); } .club-msg-body strong { color: var(--text); } .msg-read-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; } .msg-read-modal[hidden] { display: none; } .msg-read-modal__backdrop { position: absolute; inset: 0; background: var(--v2-modal-backdrop); -webkit-backdrop-filter: var(--v2-modal-backdrop-blur); backdrop-filter: var(--v2-modal-backdrop-blur); animation: v2-modal-fade 0.18s var(--ease-out); } .msg-read-modal__dialog { position: relative; inline-size: min(760px, 100%); max-block-size: min(86dvh, 860px); display: grid; grid-template-rows: auto 1fr auto; background: var(--v2-glass-bg); -webkit-backdrop-filter: var(--v2-glass-blur); backdrop-filter: var(--v2-glass-blur); border: var(--v2-glass-border); border-radius: var(--v2-glass-radius); box-shadow: var(--v2-glass-shadow); overflow: hidden; animation: v2-modal-pop 0.24s var(--ease-out); } .msg-read-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1rem; border-block-end: 1px solid var(--border); } .msg-read-modal__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .msg-read-modal__close { border: 0; background: transparent; color: var(--text-3); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0; } .msg-read-modal__body { overflow: auto; padding: 1rem; display: grid; gap: 0.75rem; } .msg-read-modal__message { background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.9rem 1rem; } .msg-read-modal__foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.9rem 1rem; border-block-start: 1px solid var(--border); background: var(--surface); } .msg-read-modal__foot .btn-later, .msg-read-modal__foot .btn-read { border-radius: 0.6rem; font-weight: 700; font-size: 0.86rem; padding: 0.58rem 0.9rem; cursor: pointer; border: 1px solid var(--border); } .msg-read-modal__foot .btn-later { background: var(--surface-2); color: var(--text-2); } .msg-read-modal__foot .btn-read { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---- Wallet modal (recharge / crédits invités / heures à la carte) ---- */ .wallet-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1rem; } .wallet-modal[hidden] { display: none; } .wallet-modal__backdrop { position: absolute; inset: 0; background: var(--v2-modal-backdrop); -webkit-backdrop-filter: var(--v2-modal-backdrop-blur); backdrop-filter: var(--v2-modal-backdrop-blur); animation: v2-modal-fade 0.18s var(--ease-out); } .wallet-modal__dialog { position: relative; inline-size: min(460px, 100%); max-block-size: min(86dvh, 720px); background: var(--v2-glass-bg); -webkit-backdrop-filter: var(--v2-glass-blur); backdrop-filter: var(--v2-glass-blur); border: var(--v2-glass-border); border-radius: var(--v2-glass-radius); box-shadow: var(--v2-glass-shadow); overflow: hidden; animation: v2-modal-pop 0.24s var(--ease-out); } /* Variante large pour l'iframe Saferpay (besoin de ~900px de hauteur). */ .wallet-modal__dialog--lg { inline-size: min(720px, 100%); max-block-size: min(94dvh, 980px); display: flex; flex-direction: column; } .wallet-modal__iframe-wrap { flex: 1 1 auto; overflow: auto; background: var(--surface-2); } .wallet-modal__iframe-wrap iframe { display: block; inline-size: 100%; min-block-size: 600px; border: 0; } .wallet-modal__form { display: grid; grid-template-rows: auto 1fr auto; block-size: 100%; } .wallet-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1rem; border-block-end: 1px solid var(--border); } .wallet-modal__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } .wallet-modal__close { border: 0; background: transparent; color: var(--text-3); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0; } .wallet-modal__close:hover { color: var(--text); } .wallet-modal__body { padding: 1rem; display: grid; gap: 0.75rem; } .wallet-modal__field { display: grid; gap: 0.4rem; } .wallet-modal__field label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); } .wallet-modal__select { inline-size: 100%; padding: 0.55rem 0.7rem; font-size: 0.92rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.55rem; } .wallet-modal__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .wallet-modal__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.9rem 1rem; border-block-start: 1px solid var(--border); background: var(--surface); } .wallet-modal__pay-btn { flex: 1; min-inline-size: 140px; border-radius: 0.6rem; font-weight: 700; font-size: 0.92rem; padding: 0.7rem 1rem; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); transition: background 0.12s, color 0.12s, border-color 0.12s; } .wallet-modal__pay-btn:hover { background: var(--surface-3); color: var(--text); } .wallet-modal__pay-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .wallet-modal__pay-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* Bouton dev — visible uniquement en ENVIRONMENT=development */ .wallet-modal__pay-btn--dev { flex: 1 0 100%; margin-block-start: 0.25rem; background: oklch(94% 0.12 90); color: oklch(35% 0.12 70); border: 1px dashed oklch(70% 0.15 80); font-size: 0.82rem; } .wallet-modal__pay-btn--dev:hover { background: oklch(90% 0.14 88); color: oklch(30% 0.14 70); border-style: solid; } /* ---- Banner warn (subscription) ---- */ .banner-warn { background: var(--warning-soft); border: 1px solid color-mix(in oklch, var(--warning) 40%, transparent); border-radius: var(--radius); padding: 0.75rem 1rem; display: flex; gap: 0.75rem; align-items: center; margin-block-end: 0.875rem; box-shadow: var(--shadow-xs); } .banner-warn .ico-wrap { inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; background: color-mix(in oklch, var(--warning) 25%, transparent); color: oklch(45% 0.13 75); display: grid; place-items: center; flex: none; } .banner-warn .body { flex: 1; min-width: 0; } .banner-warn h3 { margin: 0 0 1px; font-size: 0.8125rem; } .banner-warn p { margin: 0; color: var(--text-2); font-size: 0.75rem; } .banner-warn a { color: oklch(45% 0.13 75); font-weight: 700; white-space: nowrap; } /* Bannière sticky (ex. abonnement bloqué) : reste visible malgré l'auto-scroll de la grille */ .banner-warn--sticky { position: sticky; top: var(--topbar-h, 56px); z-index: 25; border-color: color-mix(in oklch, var(--warning) 60%, transparent); box-shadow: var(--shadow-sm); } /* ---- Schedule ---- */ .schedule-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-block-end: 0.875rem; box-shadow: var(--shadow-sm); /* overflow: clip (≠ hidden) clippe sans créer de scroll container, ce qui préserve le position:sticky du .sched-headers. */ overflow: clip; } .sched-headers { position: sticky; top: var(--topbar-h); z-index: 20; background: var(--surface); border-block-end: 2px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .sched-headers-inner { display: grid; grid-template-columns: var(--time-col, 48px) repeat(var(--n-courts, 8), minmax(var(--col-min, 50px), 1fr)); grid-auto-rows: 64px; will-change: transform; width: 100%; min-width: max-content; } .hdr-cell { background: var(--ct, light-dark(oklch(95.5% 0.018 240), oklch(30% 0.028 240))); padding-inline: 0.625rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 0.8125rem; color: var(--text); text-align: center; } .hdr-cell.corner { border-inline-start: 0; border-inline-end: 0; background: var(--bg); align-items: center; justify-content: center; padding-inline: 0.25rem; color: var(--text-3); font-size: 0.625rem; font-weight: 700; position: sticky; inset-inline-start: 0; z-index: 2; min-width: 0; overflow: hidden; } .hdr-cell .court-name { font-weight: 700; font-size: 0.8125rem; line-height: 1.1; } .hdr-cell .court-img { inline-size: auto; block-size: 32px; border-radius: 5px; object-fit: cover; display: block; box-shadow: none; } .hdr-cell--image-only { padding: 5px 2px; gap: 0; } .hdr-cell--image-only .court-img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 5px; } .sched-body { overflow-x: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Espace sous la dernière ligne : évite que l'arrondi de .schedule-wrap (overflow: clip) ne coupe les cellules du bas. Le dégradé prolonge le fond var(--bg) de la colonne des heures (sticky à gauche) dans cette bande. */ padding-block-end: 0.75rem; background: linear-gradient(to right, var(--bg) var(--time-col, 48px), transparent var(--time-col, 48px)); /* Masque la scrollbar horizontale */ scrollbar-width: none; } .sched-body::-webkit-scrollbar { height: 0; width: 0; display: none; } .sched-grid { display: grid; grid-template-columns: var(--time-col, 48px) repeat(var(--n-courts, 8), minmax(var(--col-min, 50px), 1fr)); grid-template-rows: repeat(var(--n-rows, 15), minmax(var(--row-h-compact), auto)); position: relative; width: 100%; min-width: calc(var(--time-col, 48px) + var(--n-courts, 8) * var(--col-min, 50px)); } /* Desktop : tous les terrains à l'écran TANT QUE les colonnes restent lisibles. Avant, `minmax(0, 1fr)` écrasait la grille sans plancher — un club à 18 terrains tombait à ~48 px par colonne et les noms des joueurs débordaient sur la colonne voisine. On garde donc le plancher `--col-min-lg` (posé par la vue, 0px si ≤ 4 terrains) et on laisse défiler horizontalement quand ça ne rentre plus ; `1fr` fait toujours remplir la largeur dès que la place est suffisante. */ @media (min-width: 901px) { .sched-body { overflow-x: auto; /* Scrollbar VISIBLE ici (contrairement au mobile où l'on balaye au doigt) : sans elle, rien n'indique qu'il reste des terrains à droite. */ scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sched-body::-webkit-scrollbar { display: block; height: 8px; width: 0; } .sched-body::-webkit-scrollbar-track { background: transparent; } .sched-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } .sched-headers-inner, .sched-grid { min-width: calc(var(--time-col, 48px) + var(--n-courts, 8) * var(--col-min-lg, 0px)); width: 100%; /* La marge droite du dernier `.slot` (3px) déborde de la boîte de la grille : sans cette réserve, un club qui tient à l'écran gardait 3px de défilement — donc une scrollbar horizontale permanente sur les OS à scrollbars fixes (Windows/Linux). */ padding-inline-end: 3px; grid-template-columns: var(--time-col, 48px) repeat(var(--n-courts, 8), minmax(var(--col-min-lg, 0px), 1fr)); } } .time-cell { grid-column: 1; position: sticky; left: 0; inset-inline-start: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding-inline: 0.25rem; font-size: 0.6875rem; color: var(--text-2); font-weight: 700; background-color: var(--bg); border-block-start: 0; border-inline-end: 0; font-variant-numeric: tabular-nums; white-space: nowrap; isolation: isolate; } .time-cell:first-child { border-block-start: 0; } /* Passage à l'heure pile : label gras + bordure bien marquée */ .time-cell.hour-mark { font-size: 0.75rem; font-weight: 900; color: var(--text-1); border-block-start: 0; } /* Espace concret entre deux heures fixes (ancien concept espaceHeure) */ .hour-space, .espaceHeure { display: block; grid-column: 1; align-self: stretch; justify-self: stretch; position: sticky; left: 0; inset-inline-start: 0; height: auto; background: var(--bg); pointer-events: none; z-index: 9; } .court-tint { grid-row: 1 / -1; background: var(--ct, transparent); z-index: 0; } .slot { border-radius: 0.5rem; padding: 0.4rem 0.625rem; margin: 3px; display: flex; flex-direction: column; justify-content: center; border: 1px solid transparent; min-width: 0; position: relative; z-index: 1; transition: transform 0.08s var(--ease-out), box-shadow 0.12s, border-color 0.12s; } /* Hover générique : effet visuel léger + élévation. Le `cursor: pointer` n'est PAS ici — il est posé spécifiquement sur les slots cliquables (`.slot.free`, `.slot.mine` non-bloquée) plus bas. Les autres slots (.book, .restricted, .locked, .past, …) gardent le curseur par défaut ou `not-allowed` selon leur état. */ .slot:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); z-index: 1; } /* Curseur pointer UNIQUEMENT sur les slots qu'on peut ouvrir : - `.slot.free` : nouvelle réservation - `.slot.mine` : édition de ma réservation `.locked` / `.restricted` / `.tight` / `.past` sont exclus via :not(). */ .slot.free:not(.restricted):not(.tight):not(.past):not(.locked):hover, .slot.mine:not(.locked):not(.restricted):hover { cursor: pointer; } .slot[data-tip]:hover { z-index: 5; } .slot .who { font-weight: 600; font-size: 0.75rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; } /* Icône de validation RFID par personne (mode borne/kiosk) — ✓ validé / ✗ trop tard. Affichée dans la case (who--full) ET dans le tooltip (tip-person). */ .who-valid { font-weight: 800; padding-inline-start: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.55); } .who-valid--ok { color: #22c55e; } .who-valid--late { color: #ef4444; } .slot .label { font-size: 0.6875rem; opacity: 0.85; line-height: 1.15; margin-block-start: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot .slot-time { display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; /* `--slot-veil` est posé en style inline par la vue, en même temps que la couleur de texte du slot : voile clair quand le texte est noir, voile sombre quand il est blanc. Sans lui, la pastille prenait `--surface` (sombre en thème sombre) sous un texte lui aussi sombre → illisible. */ background: var(--slot-veil, color-mix(in oklch, var(--surface) 70%, transparent)); margin-block-end: 0.2rem; width: fit-content; } .slot .who.who--full, .slot .label.label--full { white-space: normal; overflow: visible; text-overflow: clip; } .slot .open-share { position: absolute; inset-inline-end: 0.35rem; inset-block-start: 0.35rem; inline-size: 1rem; block-size: 1rem; color: oklch(58% 0.16 145); opacity: 0.95; pointer-events: none; } .slot .open-share svg { inline-size: 100%; block-size: 100%; } .slot .pill-tag { display: inline-block; font-size: 0.625rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--slot-veil, color-mix(in oklch, white 60%, transparent)); margin-block-start: 3px; width: fit-content; } /* ---- Slot LIBRE ---- */ .slot.free { background: light-dark(oklch(96.5% 0.018 242), oklch(25% 0.03 242)); border: 1.5px dashed light-dark(oklch(86% 0.02 242), oklch(44% 0.028 242)); color: light-dark(oklch(45% 0.05 242), oklch(78% 0.025 242)); display: grid; place-items: center; font-weight: 600; padding: 2px 6px; margin: 2px; min-height: 0; } .slot.free::after { content: ""; inline-size: 16px; block-size: 16px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.15s var(--ease-out); } .slot.free:hover { background: var(--accent-soft); border-style: solid; border-color: var(--accent); color: var(--accent-text); } .slot.free:hover::after { content: "+"; inline-size: auto; block-size: auto; background: none; background-image: none; font-size: 0.6875rem; font-weight: 700; color: var(--accent-text); line-height: 1; } /* ── Match ouvert (réservation ouverte) ──────────────────────────────── Un créneau « match ouvert » a encore des places libres : on le signale par un liseré pointillé + un badge en bas avec le nombre de places. Les matchs ouverts des AUTRES (data-open) sont cliquables → curseur main. */ .slot.open-match { outline: 2px dashed color-mix(in oklch, var(--accent) 50%, transparent); outline-offset: -3px; } .slot.open-match[data-open] { cursor: pointer; } .slot.open-match[data-open]:hover { outline-color: var(--accent); outline-style: solid; } .slot .slot-open-badge { position: absolute; inset-block-end: 3px; inset-inline-end: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 800; line-height: 1.35; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); z-index: 3; pointer-events: none; } .slot .slot-open-badge svg { inline-size: 11px; block-size: 11px; } .slot .slot-open-badge b { font-weight: 800; } /* Slots courts (vue compacte / none) : on garde le badge mais un peu plus petit. */ .slot.compact .slot-open-badge, .slot.tight .slot-open-badge { font-size: 0.5625rem; padding: 0 4px 0 3px; } /* Mode "récurrence-only" : date hors fenêtre d'abonnement, autorisée uniquement pour créer une récurrence. Les slots libres deviennent visuellement non-cliquables (curseur not-allowed, opacity, hover neutre) mais restent visibles pour permettre le drag-rectangle de récurrence. */ .schedule-wrap.recurrence-only-mode .slot.free { cursor: not-allowed; opacity: 0.55; } .schedule-wrap.recurrence-only-mode .slot.free:hover { background: light-dark(oklch(96.5% 0.018 242), oklch(25% 0.03 242)); border-color: light-dark(oklch(86% 0.02 242), oklch(44% 0.028 242)); color: light-dark(oklch(45% 0.05 242), oklch(78% 0.025 242)); } .schedule-wrap.recurrence-only-mode .slot.free:hover::after { content: ""; inline-size: 16px; block-size: 16px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; background-position: center; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Other slot variants */ .slot.book { background: light-dark(oklch(90% 0.06 25), oklch(33% 0.06 25)); color: light-dark(oklch(35% 0.13 25), oklch(85% 0.08 25)); border-color: light-dark(oklch(82% 0.08 25), oklch(40% 0.08 25)); } .slot.school { background: light-dark(oklch(92% 0.08 75), oklch(33% 0.06 75)); color: light-dark(oklch(35% 0.14 75), oklch(85% 0.10 75)); border-color: light-dark(oklch(82% 0.10 75), oklch(40% 0.08 75)); } .slot.special{ background: light-dark(oklch(92% 0.06 330), oklch(33% 0.07 330)); color: light-dark(oklch(35% 0.16 330),oklch(85% 0.10 330)); border-color: light-dark(oklch(82% 0.10 330), oklch(40% 0.08 330)); } .slot.restricted { background: repeating-linear-gradient(45deg, light-dark(oklch(90% 0.05 18), oklch(30% 0.04 18)), light-dark(oklch(90% 0.05 18), oklch(30% 0.04 18)) 7px, light-dark(oklch(86% 0.06 18), oklch(34% 0.045 18)) 7px, light-dark(oklch(86% 0.06 18), oklch(34% 0.045 18)) 14px); border-color: light-dark(oklch(72% 0.12 18), oklch(48% 0.10 18)); color: light-dark(oklch(42% 0.12 18), oklch(82% 0.07 18)); cursor: not-allowed; } .slot.restricted:hover { transform: none; box-shadow: var(--shadow-sm); cursor: not-allowed; } .slot.tight { background: repeating-linear-gradient(45deg, light-dark(oklch(95% 0.01 255), oklch(26% 0.015 255)), light-dark(oklch(95% 0.01 255), oklch(26% 0.015 255)) 6px, light-dark(oklch(90% 0.012 255), oklch(30% 0.018 255)) 6px, light-dark(oklch(90% 0.012 255), oklch(30% 0.018 255)) 12px); border-color: light-dark(oklch(78% 0.015 255), oklch(42% 0.02 255)); color: light-dark(oklch(46% 0.03 255), oklch(80% 0.02 255)); cursor: not-allowed; } .slot.tight:hover { transform: none; box-shadow: var(--shadow-sm); cursor: not-allowed; } .slot.maint { background: light-dark(oklch(20% 0.01 260), oklch(15% 0.01 260)); color: oklch(85% 0.005 260); border-color: light-dark(oklch(15% 0.01 260), oklch(25% 0.01 260)); } /* « Ma réservation » — on conserve la couleur de base de la réservation (background custom appliqué via inline style) et on ajoute un INDICATEUR VISUEL qui doit rester visible PEU IMPORTE la couleur de fond (sport, club…). Stratégie : DOUBLE anneau EXTERNE (blanc + accent) = sandwich qui se détache de tout fond, clair ou foncé, et qui matche la couleur de fond même si elle est proche de l'accent. */ .slot.mine { background: light-dark(oklch(90% 0.06 25), oklch(33% 0.06 25)); color: light-dark(oklch(35% 0.13 25), oklch(85% 0.08 25)); /* Marqueur « c'est à moi » : un simple liseré accent INSET de 2px en haut du fond — pas d'anneau extérieur, pas de sandwich. Combiné au badge étoile en notification (overhang), l'identification est immédiate sans polluer la couleur de la réservation. */ box-shadow: inset 0 0 0 2px var(--accent), 0 2px 6px color-mix(in oklch, var(--accent) 18%, transparent); border-color: transparent; /* z-index élevé pour que le badge overhang passe AU-DESSUS des slots voisins sans être coupé par le grid voisin. */ isolation: isolate; z-index: 2; } /* Badge étoile en NOTIFICATION (overhang) : sort à moitié du slot en haut- droit, comme une pastille de notification. Halo blanc pour le séparer visuellement du fond du slot. */ .slot.mine::after { content: '★'; position: absolute; /* Overhang UNIQUEMENT vertical (top: -8px) — sinon le badge est clippé par `.sched-body { overflow-x: hidden }` sur les slots de la dernière colonne. Horizontalement, on reste INSIDE le slot avec un petit retrait de 6px depuis le bord droit. */ top: -8px; inset-inline-end: 6px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--accent); color: white; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; /* Anneau blanc (surface) qui sépare la pastille du fond du slot, puis ombre douce pour le détacher subtilement. */ box-shadow: 0 0 0 2px var(--surface), 0 2px 5px rgba(0,0,0,0.22); z-index: 4; pointer-events: none; } /* Survol : on renforce le liseré accent + une ombre plus marquée pour signaler clairement la cliquabilité. On ANNULE le `translateY(-1px)` du hover générique (`.slot:hover`) : sur nos propres réservations la case ne doit pas se décaler vers le haut, seul le feedback d'ombre change. */ .slot.mine:not(.locked):hover { transform: none; box-shadow: inset 0 0 0 2.5px var(--accent), 0 6px 14px color-mix(in oklch, var(--accent) 30%, transparent); } /* Bloc fusionné (span > 1 ligne) */ .slot.span { justify-content: flex-start; padding-block-start: 0.55rem; } .slot.past { background: repeating-linear-gradient(45deg, light-dark(oklch(96.8% 0.016 242), oklch(24% 0.028 242)), light-dark(oklch(96.8% 0.016 242), oklch(24% 0.028 242)) 6px, light-dark(oklch(90% 0.018 242), oklch(31% 0.022 242)) 6px, light-dark(oklch(90% 0.018 242), oklch(31% 0.022 242)) 12px); color: light-dark(oklch(45% 0.05 242), oklch(78% 0.025 242)); border-color: light-dark(oklch(86% 0.02 242), oklch(44% 0.028 242)); pointer-events: none; cursor: default; } .slot.silent .who, .slot.silent .label, .slot.silent .pill-tag { display: none; } /* Réservation dont l'heure de début est passée → non annulable, non cliquable */ /* pointer-events conservé pour que le tooltip au survol fonctionne ; les clics sont bloqués par JS */ .slot.locked { cursor: default; } .slot.locked:hover { transform: none; box-shadow: none; } /* ─── Verrou temps réel ───────────────────────────────────────── Un autre utilisateur est en train de réserver cette case. Émis via socket.io `addServer`→`add` (cf. dashboard.js SocketLock). Design moderne aligné sur le langage oklch du V2 : • fond neutre indigo très clair (light) / sombre légèrement teinté (dark) • pattern hachuré subtil = signal "temporaire/processing" • micro-glow accent + pulsation très discrète (1s, 0.85↔1) • mini icône cadenas en overlay coin sup. droit • curseur "not-allowed" + click bloqué par JS (cf. guard click) Le tooltip data-tip-html injecté par JS affiche "X est en train de réserver…" via le système Rich Tooltip existant (header de dashboard.js). */ .slot.live-locked { background: repeating-linear-gradient( 135deg, light-dark(oklch(94% 0.01 260 / 0.65), oklch(28% 0.012 260 / 0.55)) 0 6px, light-dark(oklch(88% 0.012 260 / 0.55), oklch(22% 0.014 260 / 0.55)) 6px 12px ), light-dark(oklch(96% 0.008 260), oklch(20% 0.012 260)) !important; color: light-dark(oklch(45% 0.04 260), oklch(78% 0.02 260)) !important; border-color: light-dark(oklch(85% 0.015 260), oklch(36% 0.018 260)) !important; cursor: not-allowed; pointer-events: auto; position: relative; overflow: hidden; animation: live-lock-pulse 1.6s ease-in-out infinite; box-shadow: inset 0 0 0 1px light-dark(oklch(80% 0.04 260 / 0.4), oklch(50% 0.05 260 / 0.5)), 0 0 0 0 light-dark(oklch(65% 0.18 260 / 0.35), oklch(60% 0.18 260 / 0.5)); } .slot.live-locked:hover { transform: none; /* Léger glow accent au hover pour signaler que c'est interactif (tooltip) */ box-shadow: inset 0 0 0 1px light-dark(oklch(70% 0.08 260 / 0.5), oklch(55% 0.09 260 / 0.6)), 0 0 12px 2px light-dark(oklch(65% 0.18 260 / 0.18), oklch(60% 0.18 260 / 0.25)); } /* Icône cadenas mini en coin sup. droit — minimaliste, en SVG inline */ .slot.live-locked::after { content: ""; position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; opacity: 0.55; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; color: light-dark(oklch(40% 0.08 260), oklch(70% 0.05 260)); /* fallback color pour le stroke `currentColor` du SVG inline */ filter: drop-shadow(0 1px 0 light-dark(oklch(100% 0 0 / 0.4), oklch(0% 0 0 / 0.5))); } .slot.live-locked .slot-time, .slot.live-locked .who, .slot.live-locked .label, .slot.live-locked .pill-tag { color: light-dark(oklch(50% 0.025 260), oklch(72% 0.02 260)) !important; opacity: 0.85; } @keyframes live-lock-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px light-dark(oklch(80% 0.04 260 / 0.4), oklch(50% 0.05 260 / 0.5)), 0 0 0 0 light-dark(oklch(65% 0.18 260 / 0.0), oklch(60% 0.18 260 / 0.0)); } 50% { box-shadow: inset 0 0 0 1px light-dark(oklch(75% 0.07 260 / 0.6), oklch(55% 0.09 260 / 0.7)), 0 0 14px 1px light-dark(oklch(65% 0.18 260 / 0.20), oklch(60% 0.18 260 / 0.32)); } } /* Préférence accessibilité : pas d'animation pour ceux qui le demandent */ @media (prefers-reduced-motion: reduce) { .slot.live-locked { animation: none; } } /* Slots de réservations d'AUTRES utilisateurs (.book) ou de cours/event/maintenance : pas cliquables → curseur par défaut (flèche), pas d'élévation au hover. */ .slot.book, .slot.school, .slot.multi, .slot.maint { cursor: default; } .slot.book:hover, .slot.school:hover, .slot.multi:hover, .slot.maint:hover { transform: none; box-shadow: none; } .slot.multi { background: linear-gradient(135deg, oklch(78% 0.13 75), oklch(70% 0.16 65)); color: oklch(28% 0.08 75); border-color: oklch(60% 0.18 65); } .slot.multi.event { background: linear-gradient(135deg, oklch(62% 0.20 330), oklch(55% 0.22 320)); color: white; border-color: oklch(48% 0.22 320); } .slot.multi .who { font-size: 0.8125rem; } /* Now line */ .now-line { grid-column: 2 / -1; align-self: start; height: 0; border-top: 2px solid var(--accent); pointer-events: none; position: relative; z-index: 3; } .now-line::before { content: "Maintenant · " attr(data-time); position: absolute; inset-inline-start: 0.5rem; inset-block-start: -0.625rem; background: var(--accent); color: white; font-size: 0.625rem; font-weight: 700; padding: 1px 0.5rem; border-radius: 999px; box-shadow: 0 2px 6px color-mix(in oklch, var(--accent) 35%, transparent); letter-spacing: 0.02em; } .now-line::after { content: ""; position: absolute; inset-inline-end: -3px; inset-block-start: -3px; inline-size: 7px; block-size: 7px; background: var(--accent); border-radius: 50%; animation: now-pulse 2s var(--ease-in-out) infinite; } @keyframes now-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 0%, transparent); } } /* Tooltip */ .slot[data-tip]:not([data-tip-html]):hover::before { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%); background: light-dark(oklch(20% 0.02 260), oklch(96% 0.005 260)); color: light-dark(oklch(96% 0.004 260), oklch(18% 0.02 260)); padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; white-space: pre-wrap; max-width: 280px; min-width: 180px; text-align: start; box-shadow: var(--shadow-md); z-index: 200; pointer-events: none; line-height: 1.45; } /* Tooltip HTML enrichi — PINNED to top of viewport regardless of JS position. The !important on top forces it ABOVE any header even if dashboard.js is cached. */ .slot-rich-tip { position: fixed !important; top: 8px !important; z-index: 99999 !important; max-width: 320px; min-width: 190px; background: light-dark(oklch(20% 0.02 260), oklch(96% 0.005 260)); color: light-dark(oklch(96% 0.004 260), oklch(18% 0.02 260)); border-radius: 0.5rem; padding: 0.5rem 0.625rem; box-shadow: var(--shadow-lg); line-height: 1.4; font-size: 0.75rem; pointer-events: none; white-space: normal; } .slot-rich-tip .tip-head { font-weight: 700; margin-block-end: 0.3rem; } .slot-rich-tip .tip-people { display: grid; gap: 0.25rem; margin-block-end: 0.3rem; } .slot-rich-tip .tip-person { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem; align-items: center; } .slot-rich-tip .tip-person img { inline-size: 120px; block-size: 120px; border-radius: 50%; object-fit: cover; } .slot-rich-tip .tip-note { opacity: 0.95; margin-block-end: 0.25rem; } .slot-rich-tip .tip-open { color: oklch(78% 0.12 145); font-weight: 600; } /* ---- Bottom feature cards ---- */ .below { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-block-end: 0.875rem; } @container content (max-width: 800px) { .below { grid-template-columns: 1fr; } } /* Une seule carte (ex. user déjà inscrit au Défi-Plugin) → pleine largeur. */ .below--single { grid-template-columns: 1fr; } .partner-card { background: radial-gradient(circle at 100% 0%, oklch(80% 0.14 145 / 0.35), transparent 55%), linear-gradient(160deg, light-dark(oklch(96% 0.05 150), oklch(25% 0.06 150)), var(--surface)); border: 1px solid color-mix(in oklch, oklch(60% 0.16 145) 30%, var(--border)); border-radius: var(--radius-lg); padding: 1.125rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; position: relative; overflow: hidden; } .partner-card .ic { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.875rem; background: linear-gradient(135deg, oklch(72% 0.16 145), oklch(58% 0.18 155)); color: white; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px color-mix(in oklch, oklch(60% 0.16 145) 40%, transparent); } .partner-card h4 { font-size: 1rem; margin: 0 0 0.25rem; color: light-dark(oklch(28% 0.10 150), oklch(90% 0.05 150)); } .partner-card p { font-size: 0.8125rem; color: var(--text-2); } .partner-card .cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.75rem; padding: 0.5rem 0.875rem; background: oklch(45% 0.16 150); color: white; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 700; box-shadow: var(--shadow-sm); transition: background 0.12s, transform 0.06s; } .partner-card .cta:hover { background: oklch(40% 0.16 150); } .partner-card .cta:active { transform: translateY(1px); } .defi-card { background: radial-gradient(circle at 100% 0%, oklch(82% 0.16 75 / 0.45), transparent 55%), linear-gradient(160deg, light-dark(oklch(97% 0.07 80), oklch(28% 0.07 75)), var(--surface)); border: 1px solid color-mix(in oklch, oklch(70% 0.18 70) 35%, var(--border)); border-radius: var(--radius-lg); padding: 1.125rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; position: relative; overflow: hidden; } .defi-card .ic { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.875rem; background: linear-gradient(135deg, oklch(82% 0.16 80), oklch(68% 0.20 50)); color: white; display: grid; place-items: center; flex: none; box-shadow: 0 4px 12px color-mix(in oklch, oklch(70% 0.18 70) 50%, transparent); } .defi-card .badge-pro { display: inline-block; font-size: 0.625rem; font-weight: 800; color: oklch(45% 0.16 60); letter-spacing: 0.1em; text-transform: uppercase; } .defi-card h4 { font-size: 1rem; margin: 0.125rem 0 0.25rem; color: light-dark(oklch(30% 0.10 60), oklch(92% 0.06 80)); } .defi-card p { font-size: 0.8125rem; color: var(--text-2); } .defi-card .cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.75rem; padding: 0.5rem 0.875rem; background: linear-gradient(90deg, oklch(75% 0.17 75), oklch(65% 0.20 50)); color: white; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 2px 8px color-mix(in oklch, oklch(70% 0.18 70) 40%, transparent); transition: transform 0.06s, box-shadow 0.12s; } .defi-card .cta:hover { box-shadow: 0 4px 14px color-mix(in oklch, oklch(70% 0.18 70) 50%, transparent); } .defi-card .cta:active { transform: translateY(1px); } /* ---- Date picker popover (anchored to date stepper) ---- */ [popover] { margin: 0; padding: 0; border: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } [popover]:popover-open { animation: pop-in 0.15s var(--ease-out); } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .date-picker { position: fixed; /* Anchor positioning (CSS Anchor Positioning, modern) */ position-anchor: --date-anchor; inset-block-start: anchor(bottom); inset-inline-start: anchor(center); translate: -50% 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 0.875rem; box-shadow: var(--shadow-lg); width: 320px; font-size: 0.8125rem; } .dp-head { display: flex; align-items: center; justify-content: space-between; padding-block-end: 0.625rem; } .dp-head .nav-arrow { inline-size: 2.35rem; block-size: 2.1rem; border-radius: 0.625rem; color: var(--text-3); display: grid; place-items: center; font-size: 1rem; } .dp-head .nav-arrow:hover { background: var(--surface-2); color: var(--text); } .dp-head .nav-arrow.is-disabled { opacity: 0.32; pointer-events: none; } .dp-head .label { font-weight: 700; font-size: 0.875rem; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-block-start: 1px solid var(--border); padding-block-start: 0.625rem; } .dp-dow { text-align: center; font-size: 0.6875rem; font-weight: 700; color: var(--text-3); padding: 0.375rem 0; text-transform: uppercase; } .dp-day { aspect-ratio: 1; border-radius: 0.5rem; display: grid; place-items: center; font-weight: 600; font-size: 0.8125rem; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.1s; } .dp-day:hover { background: var(--surface-2); } .dp-day.disabled { color: var(--text-3); opacity: 0.4; cursor: not-allowed; } .dp-day.disabled:hover { background: transparent; } .dp-day.empty { cursor: default; } .dp-day.today { color: var(--accent); } .dp-day.selected { background: var(--accent); color: white; box-shadow: var(--shadow-sm); } /* Jour cliquable uniquement pour créer une récurrence (au-delà de la fenêtre d'abonnement). On garde la couleur normale + petit dot accent en bas de la cellule pour signaler discrètement le mode spécial. */ .dp-day.recurrence-only { position: relative; } .dp-day.recurrence-only::after { content: ''; position: absolute; inset-inline-start: 50%; inset-block-end: 0.18rem; transform: translateX(-50%); inline-size: 0.28rem; block-size: 0.28rem; border-radius: 50%; background: var(--accent); } .dp-day.recurrence-only.selected::after { background: white; } .dp-foot { margin-block-start: 0.625rem; padding-block-start: 0.625rem; border-block-start: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; color: var(--text-3); } /* ---- Club switcher mobile (visible uniquement sur mobile) ---- */ .club-mobile { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0.55rem 0.28rem 0.28rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; flex: none; position: relative; -webkit-tap-highlight-color: transparent; max-width: 260px; min-width: 0; } .club-mobile:hover { border-color: var(--border-strong); } .club-mobile:active { transform: scale(0.98); } .club-mobile-logo { inline-size: 1.75rem; block-size: 1.75rem; flex: none; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; color: var(--text-2); box-shadow: var(--shadow-xs); } .club-mobile-logo .logo-fallback { inline-size: 100%; block-size: 100%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: var(--text-2); background: var(--surface); } .club-mobile-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 2px; } /* Sans image, on rabat le nom du club (jusqu'à 40 car.) : il doit rester CONTENU dans la pastille. On borne, on réduit la police et on coupe sur 2 lignes max avec ellipse — sinon le nom déborde hors du bouton. */ .club-mobile .logo-fallback { text-align: center; line-height: 1.08; padding: 0.1rem 0.25rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; /* centrage vertical (axe principal = vertical) */ -webkit-line-clamp: 2; word-break: break-word; hyphens: auto; } .club-mobile--switcher { overflow: hidden; } .club-mobile--switcher > img, .club-mobile--switcher > .logo-fallback { inline-size: 100%; block-size: 100%; border-radius: 0.45rem; } .club-mobile--switcher > img { object-fit: contain; object-position: center; padding: 0; } .club-mobile--switcher > .logo-fallback { inline-size: 7rem; max-inline-size: 7rem; font-size: 0.6rem; font-weight: 800; background: var(--surface-2); color: var(--text-2); } .club-mobile-name { display: block; font-weight: 700; font-size: 0.78125rem; color: var(--text); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .club-mobile-badge { flex: none; min-inline-size: 18px; padding: 1px 5px; background: var(--accent); color: white; font-size: 0.625rem; font-weight: 800; border-radius: 999px; line-height: 1.4; text-align: center; box-shadow: 0 1px 3px color-mix(in oklch, var(--accent) 30%, transparent); } .club-mobile-chev { color: var(--text-3); flex: none; } /* Logo club sur desktop : grand et bien visible */ @media (min-width: 901px) { /* Aucun effet visuel sur desktop — ni transform ni changement de bordure/bg */ .club-mobile:not(.club-mobile--single):hover, .club-mobile:not(.club-mobile--single):active, .club-mobile:not(.club-mobile--single):focus { transform: none !important; border-color: var(--border) !important; background: var(--surface) !important; } .club-mobile.club-mobile--single, .club-mobile.club-mobile--single:hover, .club-mobile.club-mobile--single:active, .club-mobile.club-mobile--single:focus { background: transparent !important; border-color: transparent !important; transform: none !important; box-shadow: none !important; cursor: default; } .pill.pill--single, .pill.pill--single:hover, .pill.pill--single:active, .pill.pill--single:focus { background: transparent !important; border-color: transparent !important; transform: none !important; box-shadow: none !important; cursor: default; } .club-mobile .club-mobile-name, .club-mobile .club-mobile-chev { display: none !important; } /* Padding vertical calculé pour que le logo prenne toute la hauteur dispo */ .club-mobile { padding: 0.5rem; gap: 0; } .club-mobile--switcher { inline-size: 9rem; block-size: calc(var(--topbar-h) - 1rem); padding: 0.3rem 1.15rem 0.3rem 0.3rem; background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none; cursor: pointer; } .club-mobile--switcher:hover { border-color: var(--border-strong) !important; background: var(--surface-2) !important; } .club-mobile--switcher .club-switch-chev { position: absolute; inset-inline-end: 0.42rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .club-mobile--switcher:hover .club-switch-chev { color: var(--text); } .club-mobile-logo { /* Hauteur = topbar - marges (0.5rem * 2 = 1rem = 16px) */ inline-size: 9rem; block-size: calc(var(--topbar-h) - 1rem); border-radius: 0.5rem; background: white; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .club-mobile--single .club-mobile-logo { background: transparent !important; border-color: transparent !important; } .club-mobile-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 0 10px; } .club-mobile--switcher > img, .club-mobile--switcher > .logo-fallback { inline-size: 100%; block-size: 100%; } .club-mobile--switcher > img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 0; } .club-mobile .club-mobile-name { display: none !important; } .club-mobile:not(.club-mobile--single) .club-mobile-chev { display: none !important; } /* Popover club en mode logos uniquement */ #clubMenu[popover]:popover-open { min-inline-size: min(260px, calc(100vw - var(--sidebar-w) - 1.5rem)); max-inline-size: min(320px, calc(100vw - var(--sidebar-w) - 1.5rem)); } body:has(#sideToggle:checked) #clubMenu[popover]:popover-open { min-inline-size: min(260px, calc(100vw - var(--sidebar-w-collapsed) - 1.5rem)); max-inline-size: min(320px, calc(100vw - var(--sidebar-w-collapsed) - 1.5rem)); } #clubMenu .item { position: relative; justify-content: center; padding: 0.2rem; background: transparent; min-block-size: 4.9rem; } #clubMenu .item .lg { inline-size: 100%; width: 100%; max-inline-size: none; block-size: 4.5rem; height: 4.5rem; border-radius: 0.7rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } #clubMenu .item .lg img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; padding: 0; } #clubMenu .item .club-active-check { margin-inline-start: 0 !important; position: absolute; inset-inline-end: 0.55rem; inset-block-start: 0.55rem; } #clubMenu .item[aria-current="true"] .lg { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 25%, transparent); } #clubMenu .item .meta, #clubMenu hr, #clubMenu .add { display: none !important; } } /* ---- Scrim (mobile drawer overlay) ---- */ .scrim { display: none; position: fixed; inset: 0; z-index: 25; background: color-mix(in oklch, oklch(15% 0.01 260) 40%, transparent); backdrop-filter: blur(4px) saturate(140%); -webkit-backdrop-filter: blur(4px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease-out); cursor: pointer; } /* ---- Mobile tabbar — iOS Liquid Glass ---- */ .mobile-tabbar { display: none; } /* ---- Sous-nav mobile (pilules) + coachmark : mobile uniquement ---- */ .mobile-subnav, .tabbar-hint { display: none; } /* ---- Sheets : seulement utilisées sur mobile ---- */ @media (min-width: 901px) { .sheet[popover] { display: none !important; } } /* ---- Sur desktop : details collapsible-mobile = section normale ---- */ @media (min-width: 901px) { .collapsible-mobile > summary { display: none; } .collapsible-mobile > .collapsible-body { display: block; } } /* Indicateur "nouveau" sur le message du club */ .msg-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 25%, transparent); margin-inline-start: 0.4rem; } .v2-sidebar-overlay { position: fixed; inset: 0; background: color-mix(in oklch, var(--text) 22%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 69; } /* Top loading bar — visible while the sidebar HTML is being fetched */ body.v2-sidebar-loading::before { content: ''; position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%); background-size: 50% 100%; animation: v2-sidebar-loadbar 1.1s ease-in-out infinite; z-index: 9999; pointer-events: none; } @keyframes v2-sidebar-loadbar { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } } /* Big centered spinner — impossible to miss while loading */ body.v2-sidebar-loading::after { content: ''; position: fixed; top: 50%; left: 50%; inline-size: 72px; block-size: 72px; margin: -36px 0 0 -36px; border: 5px solid color-mix(in oklch, var(--accent) 20%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: v2-sidebar-spin 0.75s linear infinite; z-index: 9999; pointer-events: none; box-shadow: 0 0 0 6px color-mix(in oklch, var(--bg) 80%, transparent), 0 12px 40px rgba(15, 23, 42, 0.18); background: var(--surface); background-clip: padding-box; } .v2-sidebar-mount { position: fixed; inset: 0 0 0 auto; z-index: 70; pointer-events: none; } .v2-sidebar-mount > * { pointer-events: auto; } .v2-sidebar-shell { inline-size: min(92vw, 540px); block-size: 100dvh; margin-inline-start: auto; background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; place-items: center; } .v2-sidebar-shell.is-loading { background: radial-gradient(circle at top right, color-mix(in oklch, var(--accent) 14%, transparent), transparent 34%), linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); } .v2-sidebar-spinner { inline-size: 44px; block-size: 44px; border-radius: 999px; border: 3px solid color-mix(in oklch, var(--accent) 18%, transparent); border-top-color: var(--accent); animation: v2-sidebar-spin 0.7s linear infinite; } .v2-sidebar-error { padding: 1.25rem; color: var(--text); font-weight: 700; } #mySidebar .reserve-sidebar { inline-size: min(92vw, 540px); block-size: 100dvh; margin-inline-start: auto; overflow-y: auto; transform: translateX(100%); transition: transform 0.22s var(--ease-out); } #mySidebar #reserve_sidebar.open { transform: translateX(0); } @keyframes v2-sidebar-spin { to { transform: rotate(360deg); } } /* ============ MOBILE BREAKPOINT ============ */ @media (max-width: 900px) { /* Layout : sidebar entièrement masquée sur mobile */ .app { grid-template-columns: 1fr; } .side, .scrim, .menu-toggle { display: none !important; } body:has(#sideToggle:checked) .app { grid-template-columns: 1fr; } /* Club switcher mobile dans le topbar */ .club-mobile { display: inline-flex; } /* Adapter le popover club pour mobile */ .club-popover[popover]:popover-open { position: fixed; inset-block-start: calc(var(--topbar-h) + 6px); inset-inline-start: 0.625rem; inset-inline-end: 0.625rem; max-inline-size: 380px; margin-inline: auto; inline-size: auto; } /* #clubMenu a une règle de base en spécificité ID (calée sur la largeur de la sidebar) qui l'emporterait sur la règle .club-popover ci-dessus. Sur mobile la sidebar est masquée → on ré-affirme la pleine largeur en ID. */ #clubMenu[popover]:popover-open { position: fixed; inset-block-start: calc(var(--topbar-h) + 6px); inset-inline-start: 0.625rem; inset-inline-end: 0.625rem; min-inline-size: 0; max-inline-size: none; inline-size: auto; margin: 0; } /* Calendrier (date-picker) : en desktop il est centré sous le bouton date via anchor(center). Sur mobile ce bouton est en haut à droite → la popup de 320px débordait à droite et coupait la colonne dimanche. On la ré-ancre dans le viewport (marges des deux côtés, centrée, largeur plafonnée). */ .date-picker { inset-inline-start: 0.625rem; inset-inline-end: 0.625rem; translate: 0 8px; inline-size: auto; width: auto; max-inline-size: 360px; margin-inline: auto; } /* Overlay (::backdrop) derrière les popovers en mobile : assombrit la page et capte les clics « à côté » → on ferme le menu au lieu de déclencher par erreur un élément situé dessous. Le ::backdrop du popover fait partie du top-layer, donc tout clic hors du menu atterrit dessus (light-dismiss). */ .club-popover:popover-open::backdrop, .date-picker:popover-open::backdrop { background: color-mix(in oklch, oklch(15% 0.01 260) 40%, transparent); backdrop-filter: blur(4px) saturate(140%); -webkit-backdrop-filter: blur(4px) saturate(140%); } /* Liste de choix du club (popover) : logos en grand, pleine largeur, comme sur desktop — les items étaient trop petits sur mobile. */ #clubMenu .item { position: relative; justify-content: center; padding: 0.2rem; background: transparent; min-block-size: 4.9rem; } #clubMenu .item .lg { inline-size: 100%; width: 100%; max-inline-size: none; block-size: 4.5rem; height: 4.5rem; border-radius: 0.7rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } #clubMenu .item .lg img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; padding: 0; } #clubMenu .item .club-active-check { margin-inline-start: 0 !important; position: absolute; inset-inline-end: 0.55rem; inset-block-start: 0.55rem; } #clubMenu .item[aria-current="true"] .lg { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 25%, transparent); } #clubMenu .item .meta, #clubMenu hr, #clubMenu .add { display: none !important; } /* Topbar mobile : grid 2x2 */ .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "club club" "pill date"; gap: 0.4rem 0.5rem; padding: 0.5rem 0.625rem; align-items: center; height: auto; overflow: visible; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .top .club-mobile { grid-area: club; flex: none; max-width: none; } .top .club-mobile-name { display: inline; } /* ── Pages internes (titre + langue) ── Logo club agrandi à gauche, langue en haut à droite sur la même ligne, titre de page en dessous. Couvre AUSSI diary / community : la variante avec sélecteur sport (.pill) ajoute simplement une 3e rangée plus bas. */ .top:has(.top-lang) { grid-template-columns: auto 1fr auto; grid-template-areas: "club . lang" "head head head"; gap: 0.5rem 0.5rem; align-items: center; } .top:has(.top-lang) .club-mobile { grid-area: club; justify-self: start; max-width: none; padding: 0.3rem 0.45rem; } .top:has(.top-lang) .page-head { grid-area: head; } .top:has(.top-lang) .top-lang { grid-area: lang; justify-self: end; align-self: center; } .top:has(.top-lang) .page-head-spacer { display: none; } /* ── Pages internes AVEC sélecteur sport/date (diary, community…) ── Même entête que ci-dessus, SANS rangée en plus : le sélecteur sport (et le date-stepper du semainier) partagent la ligne du titre, alignés à droite. Avant cette règle, ces pages ne matchaient AUCUNE variante → topbar flex cassée (logo géant, langue orpheline centrée). */ .top:has(.top-lang):has(.pill) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "club club lang" "head pill pill"; } /* Avec date-stepper (semainier) : titre + sport + date ne tiennent pas sur une seule ligne de 375px (le titre se faisait rogner). On masque le titre — redondant : la pilule active de la sous-nav l'affiche juste dessous — et on reprend la disposition du dashboard : sport à gauche, date à droite. */ .top:has(.top-lang):has(.pill):has(.date-stepper) { grid-template-areas: "club club lang" "pill date date"; } /* !important requis : pages.css (NON-layered) pose `.page-head{display:flex}` qui bat toute règle layered ; l'importance inverse l'ordre des couches. */ .top:has(.top-lang):has(.pill):has(.date-stepper) .page-head { display: none !important; } .top:has(.top-lang):has(.pill):has(.date-stepper) .pill { justify-self: start; } .top:has(.top-lang):has(.pill) .page-head { align-self: center; min-width: 0; } .top:has(.top-lang):has(.pill) .pill { justify-self: end; } /* Saison masquée sur la ligne partagée : laisse la place au titre (sinon « Communauté What's app » passait sur 2 lignes). */ .top:has(.top-lang):has(.pill) .pill .pill-sub { display: none; } /* ── Dashboard V2 (sélecteur sport + date, langue dans .top-actions) ── Même entête : logo agrandi à gauche, langue en haut à droite, sélecteur sport + date en dessous. Cible le dashboard uniquement (.pill SANS .top-lang) → exclut diary / community. */ .top:has(.pill):not(:has(.top-lang)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "club lang" "pill date"; gap: 0.4rem 0.5rem; align-items: center; } .top:has(.pill):not(:has(.top-lang)) .club-mobile { grid-area: club; justify-self: start; } .top:has(.pill):not(:has(.top-lang)) .top-spacer { display: none; } .top:has(.pill):not(:has(.top-lang)) .top-actions { grid-area: lang; justify-self: end; display: flex; align-items: center; } /* Réafficher uniquement le sélecteur de langue (thème / aide / feedback restent masqués) */ .top:has(.pill):not(:has(.top-lang)) .top-actions .lang-btn { display: inline-flex; } /* ── Logo nettement plus grand (paysage autorisé), partagé entre pages internes simples et dashboard. Pas de bordure/fond sur le logo interne : seule la pastille extérieure (.club-mobile) dessine le cadre → évite la double bordure. */ .top:has(.top-lang) .club-mobile-logo, .top:has(.pill):not(:has(.top-lang)) .club-mobile-logo { inline-size: auto; min-inline-size: 3.5rem; block-size: 3.5rem; border: 0; background: transparent; box-shadow: none; border-radius: 0.5rem; padding-inline: 0.3rem; } .top:has(.top-lang) .club-mobile-logo img, .top:has(.pill):not(:has(.top-lang)) .club-mobile-logo img { inline-size: auto; max-inline-size: 10rem; block-size: 100%; object-fit: contain; padding: 0; } .top:has(.top-lang) .club-mobile--switcher, .top:has(.pill):not(:has(.top-lang)) .club-mobile--switcher { inline-size: auto; block-size: 3.5rem; padding: 0.3rem 0.5rem; gap: 0.3rem; } .top:has(.top-lang) .club-mobile--switcher > img, .top:has(.top-lang) .club-mobile--switcher > .logo-fallback, .top:has(.pill):not(:has(.top-lang)) .club-mobile--switcher > img, .top:has(.pill):not(:has(.top-lang)) .club-mobile--switcher > .logo-fallback { inline-size: auto; max-inline-size: 10rem; block-size: 100%; object-fit: contain; } /* Hide secondary topbar items */ .top .live-clock, .top .theme-toggle, .top .text-btn, .top .lang-btn, .top .today-btn { display: none; } /* … sauf l'Aide, qui reste à la même place (en haut à droite), en icône seule. */ .top .top-help { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; padding: 0; border: 1px solid var(--border); background: var(--surface); } .top .top-help__label { display: none; } /* Sport pill mobile */ .top .pill { grid-area: pill; flex: none; min-width: 0; max-inline-size: 100%; padding: 0.4rem 0.625rem; font-size: 0.75rem; gap: 0.35rem; justify-self: start; } .top .pill .pill-ic { inline-size: 1.25rem; block-size: 1.25rem; flex: none; } .top .pill .pill-sub { display: inline; color: var(--text-3); font-weight: 600; } /* Chevron visible quand plusieurs sports → indique que la pastille est cliquable. (Le markup n'inclut le chevron que si count(sports) > 1.) */ .top .pill .chev { display: inline-block; flex: none; color: var(--text-3); } .top .pill .pill-sport, .top .pill .pill-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Date stepper */ .date-stepper { grid-area: date; flex: none; margin: 0; justify-self: end; } .date-stepper .date-main { padding: 0.4rem 0.625rem; font-size: 0.875rem; gap: 0.4rem; } .date-stepper .date-main .dow { font-size: 0.75rem; } .date-stepper .date-main svg { display: none; } /* Mobile : l'année est masquée (place limitée) → « VEN 31 juil. ». Elle reste visible dans le calendrier ouvert et sur desktop. */ .date-stepper .date-main .d-year { display: none; } /* Content */ .content { padding: 0.875rem; padding-block-end: calc(5.5rem + env(safe-area-inset-bottom)); } /* Le footer est rendu HORS .content/.app (après le shell) → le padding du contenu ne le décale pas et la tabbar fixe (liquid glass) le recouvrait, rendant ses liens (conditions, contact, app stores) inaccessibles. On réserve la hauteur de la tabbar sous le footer pour qu'il scrolle au-dessus. */ .v2-footer { padding-block-end: calc(5.5rem + env(safe-area-inset-bottom)); } .top-zone { grid-template-columns: 1fr; } .below { grid-template-columns: 1fr; } /* Schedule body scroll */ .sched-body { -webkit-overflow-scrolling: touch; } /* Sections collapsibles sur mobile */ .collapsible-mobile > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem; font-weight: 700; font-size: 0.875rem; color: var(--text); cursor: pointer; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: background 0.15s; } .collapsible-mobile > summary::-webkit-details-marker { display: none; } .collapsible-mobile > summary::after { content: ""; margin-inline-start: auto; inline-size: 14px; block-size: 14px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; transition: transform 0.2s var(--ease-out); } .collapsible-mobile[open] > summary::after { transform: rotate(180deg); } .collapsible-mobile[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-block-end: 0; } .collapsible-mobile { margin-block-end: 0.625rem; } .collapsible-mobile[open] > .collapsible-body { border: 1px solid var(--border); border-block-start: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--surface); padding: 0; animation: slide-down 0.2s var(--ease-out); } .collapsible-mobile .info-card, .collapsible-mobile .club-msg { border-radius: 0; border: 0; box-shadow: none; margin-block-end: 0; } @keyframes slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ============ TABBAR — iOS LIQUID GLASS ============ */ .mobile-tabbar { display: grid; /* Colonnes auto : le nombre d'onglets varie (ex. Communauté absent quand la section est vide) — la pill s'adapte au lieu de garder un trou. */ grid-auto-flow: column; grid-auto-columns: 5rem; position: fixed; inset-inline: auto; left: 50%; transform: translateX(-50%); inset-block-end: max(0.625rem, env(safe-area-inset-bottom)); z-index: 40; padding: 0.375rem; inline-size: max-content; max-inline-size: calc(100% - 1.25rem); background: light-dark( color-mix(in oklch, oklch(100% 0 0) 62%, transparent), color-mix(in oklch, oklch(22% 0.01 260) 65%, transparent) ); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-radius: 28px; border: 1px solid color-mix(in oklch, white 25%, transparent); box-shadow: 0 14px 40px oklch(0% 0 0 / 0.18), 0 4px 12px oklch(0% 0 0 / 0.08), 0 0 0 0.5px color-mix(in oklch, white 35%, transparent) inset, 0 1px 0 0 color-mix(in oklch, white 60%, transparent) inset; } .mobile-tabbar .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.5rem 0.375rem; min-block-size: 56px; min-inline-size: 0; color: var(--text-3); font-size: 0.625rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 18px; transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.15s var(--ease-out); -webkit-tap-highlight-color: transparent; position: relative; } .mobile-tabbar .tab:active { transform: scale(0.92); } .mobile-tabbar .tab.active { color: light-dark(var(--accent), var(--accent-text)); background: color-mix(in oklch, var(--accent) 14%, transparent); } .mobile-tabbar .tab.active::before { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 18px; block-size: 18px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 30%, transparent) 0%, transparent 70%); filter: blur(6px); pointer-events: none; z-index: -1; } .mobile-tabbar .tab.active::after { content: ""; position: absolute; inset-block-end: 4px; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--accent); opacity: 0.55; transition: opacity 0.15s var(--ease-out), inline-size 0.2s var(--ease-out); } .mobile-tabbar .tab.active:active::after { opacity: 1; inline-size: 12px; border-radius: 4px; } .mobile-tabbar .tab .ico { inline-size: 22px; block-size: 22px; flex: none; transition: transform 0.25s var(--ease-out); } .mobile-tabbar .tab.active .ico { transform: scale(1.08); } .mobile-tabbar .tab .tab-label { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; } .mobile-tabbar .tab .ico.ic-defi { color: oklch(68% 0.20 65); } .mobile-tabbar .tab .ico.ic-partner { color: oklch(60% 0.15 220); } .mobile-tabbar .tab .ico.ic-whatsapp { color: oklch(58% 0.16 145); } .mobile-tabbar .tab .ico.ic-tournoi { color: oklch(68% 0.20 65); } .mobile-tabbar .tab .ico.ic-resto { color: oklch(62% 0.18 30); } /* ============ MENU CONTEXTUEL (popover ancré à l'onglet, style iOS) ============ Le menu jaillit JUSTE AU-DESSUS de l'onglet tapé (position horizontale calculée en JS via --tab-cx → la propriété `left` est posée inline). Largeur de menu (pas pleine largeur) + animation scale depuis le bas = on comprend que le menu "appartient" au bouton, comme un UIContextMenu iPhone. */ .sheet[popover] { position: fixed; inset: auto; inset-block-end: calc(4.75rem + env(safe-area-inset-bottom)); left: 50%; /* défaut ; surchargé en JS pour ancrer à l'onglet */ margin: 0; inline-size: min(82vw, 300px); transform-origin: bottom center; background: light-dark( color-mix(in oklch, oklch(100% 0 0) 86%, transparent), color-mix(in oklch, oklch(22% 0.01 260) 90%, transparent) ); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-radius: 20px; padding: 0.4rem 0.35rem 0.5rem; border: 1px solid color-mix(in oklch, white 25%, transparent); box-shadow: 0 14px 44px oklch(0% 0 0 / 0.24), 0 4px 12px oklch(0% 0 0 / 0.12), 0 0 0 0.5px color-mix(in oklch, white 30%, transparent) inset, 0 1px 0 0 color-mix(in oklch, white 55%, transparent) inset; color: var(--text); max-block-size: min(70vh, 30rem); overflow-y: auto; } .sheet[popover]:popover-open { animation: sheet-pop 0.22s var(--ease-out); } .sheet[popover]::backdrop { background: oklch(0% 0 0 / 0.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Scale-in depuis le bas : le menu "sort" de l'onglet. */ @keyframes sheet-pop { from { transform: scale(0.86) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .sheet-grabber { inline-size: 36px; block-size: 4px; background: var(--text-3); border-radius: 999px; margin: 2px auto 0.5rem; opacity: 0.35; } .sheet-head { padding: 0.125rem 0.875rem 0.4rem; } .sheet-head h3 { font-size: 0.875rem; font-weight: 700; margin: 0; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; } .sheet-head-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem 0.625rem; } .sheet-avatar { inline-size: 2.75rem; block-size: 2.75rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, oklch(78% 0.10 280), oklch(70% 0.14 240)); color: white; display: grid; place-items: center; font-weight: 700; font-size: 1.125rem; box-shadow: 0 2px 8px color-mix(in oklch, oklch(70% 0.14 240) 30%, transparent); } .sheet-user { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .sheet-user-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-user-role { font-size: 0.75rem; color: var(--text-3); font-weight: 500; } .sheet-divider { border: 0; border-block-start: 1px solid var(--border); margin: 0.25rem 0.625rem 0.5rem; opacity: 0.6; } /* ---- Sélecteur de thème dans la sheet "Plus" ---- Seul point d'entrée clair/sombre sur mobile (la segmentée de la topbar est masquée par `.top .theme-toggle { display: none }` plus bas). */ .sheet-theme { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.875rem 0.75rem; } .sheet-theme-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); flex: none; } .sheet-theme .theme-toggle { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; } .sheet-theme .theme-toggle button { inline-size: auto; block-size: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0.25rem; border-radius: 9px; font-size: 0.75rem; font-weight: 600; min-block-size: 2.25rem; /* cible tactile confortable */ -webkit-tap-highlight-color: transparent; } .sheet-theme .theme-toggle button svg { flex: none; } .sheet-list { list-style: none; padding: 0; margin: 0; } .sheet-list li { margin: 0; } .sheet-list a { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0.875rem; border-radius: 14px; color: var(--text); font-size: 0.9375rem; font-weight: 500; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; } .sheet-list a:active { background: var(--accent-soft); transform: scale(0.98); } .sheet-list a .ico { inline-size: 22px; block-size: 22px; flex: none; opacity: 0.85; } .sheet-list a .badge { margin-inline-start: auto; min-width: 1.25rem; height: 1.125rem; padding: 0 0.375rem; background: var(--danger); color: white; font-size: 0.6875rem; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .sheet-list a .badge.muted { background: var(--surface-3); color: var(--text-3); } .sheet-list a.danger { color: var(--danger); } .sheet-list a.danger .ico { color: var(--danger); } /* ============ AFFORDANCE MENU — chevron d'onglet ============ Micro-chevron ^ affiché UNIQUEMENT là où un tap ouvre un menu : l'onglet ACTIF (re-tap = hub de section) et l'onglet "Plus" (pas de page principale). Les onglets inactifs naviguent → pas de chevron. */ .mobile-tabbar .tab .tab-chev { display: none; position: absolute; inset-block-start: 3px; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 12px; block-size: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; pointer-events: none; } .mobile-tabbar .tab.active .tab-chev, .mobile-tabbar .tab[data-cat="club"] .tab-chev { display: block; } /* ============ SOUS-NAVIGATION MOBILE (pilules) ============ Rangée scrollable sous la topbar : les pages de la section active en 1 tap. Rendue dans _sidebar.php, déplacée avant `.content` par le JS. */ .mobile-subnav { display: flex; gap: 0.5rem; padding: 0.625rem 0.875rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mobile-subnav::-webkit-scrollbar { display: none; } .mobile-subnav[hidden] { display: none; } .mobile-subnav .subnav-pill { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.875rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; } .mobile-subnav .subnav-pill:active { transform: scale(0.96); } .mobile-subnav .subnav-pill.active { background: color-mix(in oklch, var(--accent) 14%, transparent); border-color: color-mix(in oklch, var(--accent) 35%, transparent); color: light-dark(var(--accent), var(--accent-text)); } .mobile-subnav .subnav-pill .badge { min-width: 1.125rem; height: 1rem; padding: 0 0.3rem; background: var(--danger); color: white; font-size: 0.625rem; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* ============ COACHMARK TABBAR (une seule fois) ============ */ .tabbar-hint { display: block; position: fixed; left: 50%; transform: translateX(-50%); inset-block-end: calc(5.75rem + env(safe-area-inset-bottom)); z-index: 41; max-inline-size: min(86vw, 340px); padding: 0.625rem 0.875rem; border-radius: 14px; background: light-dark(oklch(25% 0.02 260 / 0.94), oklch(92% 0.01 260 / 0.96)); color: light-dark(#fff, oklch(20% 0.02 260)); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; text-align: center; box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25); animation: hint-in 0.3s var(--ease-out); } .tabbar-hint[hidden] { display: none; } @keyframes hint-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } } @media (max-width: 480px) { .date-stepper .date-main { font-size: 0.875rem; } .mobile-tabbar { grid-auto-columns: minmax(64px, 4.5rem); } .mobile-tabbar .tab { font-size: 0.5625rem; min-block-size: 50px; } .mobile-tabbar .tab .ico { inline-size: 20px; block-size: 20px; } .club-mobile-name { display: none; } .club-mobile { padding: 0.4rem; } } } /* ============ UTILITIES ============ */ @layer utilities { .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ============ RESERVE SIDEBAR V2 ============ */ /* Layout */ #mySidebar .reserve-sidebar { position: fixed; top: 0; right: -100%; width: min(94vw, 760px); max-width: 760px; height: 100dvh; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 1100; transition: right .28s var(--ease-out); overflow: hidden; font-family: var(--font-sans); } #mySidebar .reserve-sidebar.open { right: 0; } #mySidebar .reserve-sidebar > .content { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 16px 20px 20px; color: var(--text); font-size: 14px; line-height: 1.4; } #mySidebar .reserve-sidebar > .content::-webkit-scrollbar { width: 4px; } #mySidebar .reserve-sidebar > .content::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; } #mySidebar .reserve-sidebar > .content .wrap-content { width: 100%; } /* Header */ #mySidebar .reserve-sidebar > .content h3 { margin: 0 0 14px; padding: 0 36px 10px 0; border-bottom: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 42px); font-weight: 700; line-height: 1.05; text-transform: none; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; position: relative; } #mySidebar .reserve-sidebar > .content h3 a.removeClass { position: absolute; top: -6px; right: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-2); transition: background .15s ease; } #mySidebar .reserve-sidebar > .content h3 a.removeClass:hover { background: var(--surface-3); } #mySidebar .reserve-sidebar > .content h3 a.removeClass svg { width: 18px; height: 18px; } /* Date / slot */ #mySidebar .reserve-sidebar > .content .slot-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px; } #mySidebar .reserve-sidebar > .content .slot-detail h4 { margin: 0; float: none; font-size: 16px; font-weight: 700; color: var(--text); } #mySidebar .reserve-sidebar > .content .slot-detail span { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 700; line-height: 1; color: var(--accent-text); background: var(--accent-soft); white-space: nowrap; } /* Court card */ #mySidebar .reserve-sidebar > .content .court-detail { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; } #mySidebar .reserve-sidebar > .content .court-detail .image-wrap { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } #mySidebar .reserve-sidebar > .content .court-detail .image-wrap img { width: 48px !important; height: 48px !important; max-width: 48px !important; object-fit: cover; display: block; margin: 0 !important; } #mySidebar .reserve-sidebar > .content .court-detail .content { min-width: 0; flex: 1; border-left: 2px solid var(--border); padding-left: 12px; } #mySidebar .reserve-sidebar > .content .court-detail .content:before { display: none; } #mySidebar .reserve-sidebar > .content .court-detail .content h4, #mySidebar .reserve-sidebar > .content .court-detail .content .set-ground { margin: 0; font-size: clamp(22px, 3.1vw, 34px); font-weight: 700; color: var(--text); line-height: 1.2; } #mySidebar .reserve-sidebar > .content .court-detail .content span { color: var(--text-3); font-size: 12px; } /* Alerts */ #mySidebar .reserve-sidebar > .content .alert { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 13px; } #mySidebar .reserve-sidebar > .content .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 20%, transparent); } #mySidebar .reserve-sidebar > .content .alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in oklch, var(--success) 20%, transparent); } #mySidebar .reserve-sidebar > .content .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in oklch, var(--warning) 20%, transparent); } /* Sections */ #mySidebar .reserve-sidebar > .content .options { margin: 0; padding: 9px 0 10px; border-bottom: 1px solid var(--border); } #mySidebar .reserve-sidebar > .content .options > h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } #mySidebar .reserve-sidebar > .content .options > span.people-section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 13px; font-weight: 600; } /* Radios (closer to old design) */ #mySidebar .reserve-sidebar > .content form .form-check { margin: 0; padding: 0; } #mySidebar .reserve-sidebar > .content form .form-check.inline { display: inline-flex; align-items: center; margin: 0 12px 0 0; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); cursor: pointer; position: relative; margin: 0 7px 0 0; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked { border-color: color-mix(in oklch, var(--accent) 65%, #000 12%); } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 65%, #000 12%); } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] + label { padding: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--text-2); cursor: pointer; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked + label { color: var(--text); } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] + label:before, #mySidebar .reserve-sidebar > .content form .form-check [type=radio] + label:after { display: none !important; } /* Checkboxes */ #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox]:not(:checked), #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox]:checked { position: absolute; left: -9999px; } #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox] + label { position: relative; padding-left: 26px; margin: 0 10px 0 0; line-height: 20px; font-size: 13px; cursor: pointer; } #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox] + label:before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-strong); background: var(--surface); } #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox]:checked + label:before { border-color: var(--accent); background: var(--accent); } #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox] + label:after { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 4px; background: url(../images/checkmark-icon.png) no-repeat center/13px 11px var(--accent); opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; } #mySidebar .reserve-sidebar > .content form .form-check [type=checkbox]:checked + label:after { opacity: 1; transform: scale(1); } /* Partner favorites tags */ #mySidebar .reserve-sidebar > .content .options > span.people-section #addInvite, #mySidebar .reserve-sidebar > .content .options > span.people-section #addLeagueGame { margin-left: 4px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklch, var(--text) 84%, transparent); color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.1; } /* DataTables */ #mySidebar .reserve-sidebar > .content .options .dataTables_wrapper { margin: 0; padding: 0; box-shadow: none; border-radius: 0; } #mySidebar .reserve-sidebar > .content .options .dataTables_wrapper .dataTable { width: 100% !important; margin: 0; } #mySidebar .reserve-sidebar > .content .options .dataTables_wrapper .dataTable thead td { padding: 6px 4px; border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } #mySidebar .reserve-sidebar > .content .options .dataTables_wrapper .dataTable tbody tr td { padding: 5px 4px; vertical-align: top; position: relative; } #mySidebar .reserve-sidebar > .content .options .form-control, #mySidebar .reserve-sidebar > .content .options input[type=text], #mySidebar .reserve-sidebar > .content .options input[type=search] { width: 100%; height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; font-family: var(--font-sans); box-shadow: none; outline: none; } #mySidebar .reserve-sidebar > .content .options .form-control:focus, #mySidebar .reserve-sidebar > .content .options input[type=text]:focus, #mySidebar .reserve-sidebar > .content .options input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } /* Hide DataTables chrome */ #mySidebar .dataTables_filter, #mySidebar .dataTables_info, #mySidebar .dataTables_paginate, #mySidebar .dataTables_length { display: none !important; } /* jsonSuggest dropdown cleanup */ #mySidebar .reserve-sidebar .jsonSuggest, #mySidebar .reserve-sidebar ul.jsonSuggest { margin: 4px 0 0 !important; padding: 6px 0 !important; list-style: none !important; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); max-height: 180px; overflow-y: auto; z-index: 20; } #mySidebar .reserve-sidebar .jsonSuggest li, #mySidebar .reserve-sidebar ul.jsonSuggest li, #mySidebar .reserve-sidebar .autocomplete-json li { list-style: none !important; margin: 0 !important; padding: 8px 12px !important; border-bottom: 1px dotted color-mix(in oklch, var(--text) 26%, transparent); color: var(--text); font-size: 13px !important; line-height: 1.25; cursor: pointer; } #mySidebar .reserve-sidebar .jsonSuggest li:last-child, #mySidebar .reserve-sidebar ul.jsonSuggest li:last-child, #mySidebar .reserve-sidebar .autocomplete-json li:last-child { border-bottom: 0; } #mySidebar .reserve-sidebar .jsonSuggest li:hover, #mySidebar .reserve-sidebar ul.jsonSuggest li:hover, #mySidebar .reserve-sidebar .autocomplete-json li:hover { background: var(--accent-soft); } /* Buttons */ #mySidebar .reserve-sidebar > .content .btn, #mySidebar .reserve-sidebar > .content input.btn { display: block; width: 100%; margin: 8px 0 0; padding: 11px 14px; border-radius: 8px; border: 2px solid transparent; font-family: var(--font-sans); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-align: center; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } #mySidebar .reserve-sidebar > .content .btn-outline-success, #mySidebar .reserve-sidebar > .content .btn-success, #mySidebar .reserve-sidebar > .content input.btn-outline-success, #mySidebar .reserve-sidebar > .content input.btn-success { background: var(--success); border-color: var(--success); color: #fff; box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--success) 72%, #000 20%); } #mySidebar .reserve-sidebar > .content .btn-outline-success:hover, #mySidebar .reserve-sidebar > .content .btn-success:hover, #mySidebar .reserve-sidebar > .content input.btn-outline-success:hover, #mySidebar .reserve-sidebar > .content input.btn-success:hover { filter: brightness(.92); } #mySidebar .reserve-sidebar > .content .btn-outline-danger, #mySidebar .reserve-sidebar > .content input.btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); } #mySidebar .reserve-sidebar > .content .btn-outline-danger:hover, #mySidebar .reserve-sidebar > .content input.btn-outline-danger:hover { background: var(--danger); color: #fff; } #mySidebar .reserve-sidebar > .content .btn-outline-warning, #mySidebar .reserve-sidebar > .content a.btn-outline-warning { background: transparent; color: var(--warning); border-color: var(--warning); } #mySidebar .reserve-sidebar > .content .btn-outline-warning:hover, #mySidebar .reserve-sidebar > .content a.btn-outline-warning:hover { background: var(--warning); color: #fff; } #mySidebar .reserve-sidebar > .content .btn-primary, #mySidebar .reserve-sidebar > .content .btn-outline-primary, #mySidebar .reserve-sidebar > .content input.btn-primary, #mySidebar .reserve-sidebar > .content input.btn-outline-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: inset 0 -2px 0 color-mix(in oklch, var(--accent) 72%, #000 20%); } #mySidebar .reserve-sidebar > .content .btn[disabled], #mySidebar .reserve-sidebar > .content input.btn[disabled], #mySidebar .reserve-sidebar > .content .ui-state-disabled { opacity: .45; cursor: not-allowed; } #mySidebar .reserve-sidebar > .content .row { display: flex; gap: 8px; margin: 0 !important; } #mySidebar .reserve-sidebar > .content .row .col, #mySidebar .reserve-sidebar > .content .row [class^="col-"] { flex: 1; min-width: 0; padding: 0 !important; } #mySidebar .reserve-sidebar > .content p.textipsum { margin: 8px 0 0; color: var(--text-3); font-size: 12px; } #mySidebar .reserve-sidebar .custom-link-validate a { color: var(--accent-text); text-decoration: underline; font-size: 14px; } #mySidebar .reserve-sidebar .delete-res { border: none !important; } #mySidebar .reserve-sidebar .delete-res > .content { padding: 0 !important; } #mySidebar .reserve-sidebar .delete-res-btn input { width: 100%; margin-top: 8px !important; padding: 11px 14px; border-radius: 8px; border: 2px solid var(--danger); background: transparent; color: var(--danger); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: background .18s, color .18s; } #mySidebar .reserve-sidebar .delete-res-btn input:hover { background: var(--danger); color: #fff; } @media (max-width: 900px) { #mySidebar .reserve-sidebar { width: 100vw; max-width: 100vw; } #mySidebar .reserve-sidebar > .content { padding: 12px 14px 18px; } #mySidebar .reserve-sidebar > .content h3 { font-size: 28px; padding-right: 40px; margin-bottom: 12px; } #mySidebar .reserve-sidebar > .content .slot-detail h4 { font-size: 15px; } #mySidebar .reserve-sidebar > .content .slot-detail span { font-size: 14px; } } /* ============ RESERVE SIDEBAR V2 — REBOOT (ALT THEME) ============ */ #mySidebar .reserve-sidebar { background: linear-gradient(180deg, var(--rsb-grad-1) 0%, var(--rsb-grad-2) 100%) !important; border-left: 1px solid var(--rsb-line) !important; box-shadow: 0 18px 48px light-dark(rgba(18, 28, 45, 0.18), rgba(0, 0, 0, 0.6)) !important; } #mySidebar .reserve-sidebar > .content { padding: 18px !important; color: var(--rsb-text-2) !important; } #mySidebar .reserve-sidebar > .content .wrap-content { border: 1px solid var(--rsb-line); border-radius: 14px; background: var(--rsb-field); padding: 14px 14px 16px; } #mySidebar .reserve-sidebar > .content h3 { margin: -14px -14px 14px !important; padding: 14px 52px 14px 14px !important; border: 0 !important; border-radius: 14px 14px 0 0; background: linear-gradient(135deg, #0b6fcc 0%, #2392e2 100%) !important; color: #fff !important; font-family: "Avenir Next", "Segoe UI", sans-serif; font-size: 30px !important; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; text-decoration: none !important; } #mySidebar .reserve-sidebar > .content h3 a.removeClass { top: 10px !important; right: 10px !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(2px); } #mySidebar .reserve-sidebar > .content h3 a.removeClass:hover { background: rgba(255, 255, 255, 0.3) !important; } #mySidebar .reserve-sidebar > .content h3 a.removeClass svg { color: #fff !important; } #mySidebar .reserve-sidebar > .content .slot-detail { margin: 0 0 10px !important; border: 1px solid var(--rsb-line) !important; border-radius: 12px !important; background: var(--rsb-card) !important; padding: 10px 12px !important; gap: 8px 10px !important; } #mySidebar .reserve-sidebar > .content .slot-detail h4 { font-size: 18px !important; font-weight: 800 !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .slot-detail span { border-radius: 999px !important; padding: 4px 10px !important; font-size: 13px !important; font-weight: 700 !important; background: var(--rsb-soft-bg) !important; color: var(--rsb-soft-fg) !important; } #mySidebar .reserve-sidebar > .content .court-detail { margin: 0 0 12px !important; border: 1px solid var(--rsb-line) !important; border-radius: 12px !important; background: var(--rsb-field) !important; padding: 10px 12px !important; box-shadow: 0 3px 10px light-dark(rgba(18, 28, 45, 0.05), rgba(0, 0, 0, 0.45)); } #mySidebar .reserve-sidebar > .content .court-detail .image-wrap { width: 44px !important; height: 44px !important; border-radius: 10px !important; } #mySidebar .reserve-sidebar > .content .court-detail .image-wrap img { width: 44px !important; height: 44px !important; max-width: 44px !important; } #mySidebar .reserve-sidebar > .content .court-detail .content { border-left: 2px solid var(--rsb-line) !important; padding-left: 10px !important; } #mySidebar .reserve-sidebar > .content .court-detail .content h4, #mySidebar .reserve-sidebar > .content .court-detail .content .set-ground { font-size: 15px !important; font-weight: 800 !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .options { padding: 9px 0 11px !important; border-bottom: 1px solid var(--rsb-line) !important; } #mySidebar .reserve-sidebar > .content .options > h4 { margin: 0 0 7px !important; font-size: 11px !important; letter-spacing: 0.08em !important; color: var(--rsb-muted) !important; } #mySidebar .reserve-sidebar > .content .options > span.people-section { font-size: 13px !important; color: var(--rsb-text-2) !important; } #mySidebar .reserve-sidebar > .content form .form-check.inline { margin-right: 10px !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] { width: 20px !important; height: 20px !important; border: 1.6px solid var(--rsb-line-field) !important; margin-right: 6px !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked { border-color: var(--rsb-accent) !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked::after { inset: 3px !important; background: var(--rsb-accent) !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] + label { font-size: 14px !important; font-weight: 700 !important; } #mySidebar .reserve-sidebar > .content .options > span.people-section #addInvite, #mySidebar .reserve-sidebar > .content .options > span.people-section #addLeagueGame { background: var(--rsb-chip-bg) !important; color: #fff !important; font-size: 13px !important; border-radius: 999px !important; } #mySidebar .reserve-sidebar > .content .options .form-control, #mySidebar .reserve-sidebar > .content .options input[type=text], #mySidebar .reserve-sidebar > .content .options input[type=search] { height: 42px !important; border-radius: 10px !important; border: 1px solid var(--rsb-line-field) !important; background: var(--rsb-field) !important; font-size: 14px !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .options .form-control:focus, #mySidebar .reserve-sidebar > .content .options input[type=text]:focus, #mySidebar .reserve-sidebar > .content .options input[type=search]:focus { border-color: var(--rsb-accent) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--rsb-accent) 24%, transparent) !important; } #mySidebar .reserve-sidebar .jsonSuggest, #mySidebar .reserve-sidebar ul.jsonSuggest { margin-top: 4px !important; padding: 6px 0 !important; border: 1px solid var(--rsb-line) !important; border-radius: 10px !important; background: var(--rsb-field) !important; box-shadow: 0 10px 24px light-dark(rgba(17, 24, 39, 0.12), rgba(0, 0, 0, 0.6)) !important; max-height: 190px !important; list-style: none !important; } #mySidebar .reserve-sidebar .jsonSuggest li, #mySidebar .reserve-sidebar ul.jsonSuggest li, #mySidebar .reserve-sidebar .autocomplete-json li { list-style: none !important; padding: 8px 12px !important; margin: 0 !important; border-bottom: 1px dotted var(--rsb-line) !important; font-size: 13px !important; color: var(--rsb-text-2) !important; } #mySidebar .reserve-sidebar .jsonSuggest li:hover, #mySidebar .reserve-sidebar ul.jsonSuggest li:hover, #mySidebar .reserve-sidebar .autocomplete-json li:hover { background: var(--rsb-hover) !important; } #mySidebar .reserve-sidebar > .content .btn, #mySidebar .reserve-sidebar > .content input.btn { border-radius: 10px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.05em !important; padding: 11px 14px !important; } #mySidebar .reserve-sidebar > .content .btn-outline-success, #mySidebar .reserve-sidebar > .content .btn-success, #mySidebar .reserve-sidebar > .content input.btn-outline-success, #mySidebar .reserve-sidebar > .content input.btn-success { background: linear-gradient(180deg, #26b96c 0%, #1ca059 100%) !important; border-color: #1d9d59 !important; color: #fff !important; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); } #mySidebar .reserve-sidebar > .content .btn-outline-danger, #mySidebar .reserve-sidebar > .content input.btn-outline-danger { border-color: var(--rsb-danger) !important; color: var(--rsb-danger) !important; background: transparent !important; } #mySidebar .reserve-sidebar > .content .btn-outline-danger:hover, #mySidebar .reserve-sidebar > .content input.btn-outline-danger:hover { background: var(--rsb-danger) !important; color: #fff !important; } #mySidebar .reserve-sidebar > .content .btn-outline-warning, #mySidebar .reserve-sidebar > .content a.btn-outline-warning { border-color: var(--rsb-warning) !important; color: var(--rsb-warning) !important; } #mySidebar .reserve-sidebar > .content .btn-outline-warning:hover, #mySidebar .reserve-sidebar > .content a.btn-outline-warning:hover { background: var(--rsb-warning) !important; color: #fff !important; } #mySidebar .reserve-sidebar > .content p.textipsum { color: var(--rsb-muted) !important; } @media (max-width: 900px) { #mySidebar .reserve-sidebar > .content { padding: 12px !important; } #mySidebar .reserve-sidebar > .content .wrap-content { border-radius: 12px; padding: 12px; } #mySidebar .reserve-sidebar > .content h3 { margin: -12px -12px 12px !important; border-radius: 12px 12px 0 0; font-size: 22px !important; padding: 12px 44px 12px 12px !important; } #mySidebar .reserve-sidebar > .content .slot-detail h4 { font-size: 17px !important; } } /* ============ RESERVE SIDEBAR V2 — V5 (SOBRE + CLAIR) ============ */ /* Palette locale : les valeurs CLAIRES sont celles d'origine (aucun changement en mode clair) ; les valeurs SOMBRES sont alignées sur les tokens de la section TOKENS plus haut. Sans elles, ce bloc — qui gagne par `!important` sur `#reserve_sidebar.v2-rv { background: var(--surface) }` — repeignait tout le panneau de réservation en clair même en thème sombre. */ #mySidebar .reserve-sidebar { --rsb-bg: light-dark(#f3f4f6, oklch(13% 0.008 260)); --rsb-card: light-dark(#f8fafc, oklch(20% 0.012 260)); --rsb-field: light-dark(#ffffff, oklch(22% 0.012 260)); --rsb-hover: light-dark(#eef2f7, oklch(26% 0.014 260)); --rsb-line: light-dark(#d6dbe2, oklch(28% 0.015 260)); --rsb-line-field: light-dark(#cbd5e1, oklch(35% 0.018 260)); --rsb-text: light-dark(#111827, oklch(96% 0.004 260)); --rsb-text-2: light-dark(#1f2937, oklch(88% 0.006 260)); --rsb-text-3: light-dark(#374151, oklch(76% 0.008 260)); --rsb-muted: light-dark(#9aa3af, oklch(60% 0.010 260)); --rsb-chip-bg: light-dark(#1f2937, oklch(32% 0.020 260)); --rsb-chip-fg: light-dark(#ffffff, oklch(97% 0.004 260)); --rsb-focus: light-dark(#2563eb, oklch(65% 0.17 252)); --rsb-accent: light-dark(#0b6fcc, oklch(66% 0.16 252)); --rsb-soft-bg: light-dark(#e5f2ff, oklch(28% 0.09 252)); --rsb-soft-fg: light-dark(#0f5ea8, oklch(86% 0.11 252)); --rsb-danger: light-dark(#dc4343, oklch(68% 0.19 25)); --rsb-warning: light-dark(#d68d1a, oklch(78% 0.15 75)); --rsb-grad-1: light-dark(#fafbfc, oklch(15% 0.008 260)); --rsb-grad-2: light-dark(#f3f5f7, oklch(12% 0.008 260)); background: var(--rsb-bg) !important; border-left: 1px solid var(--rsb-line) !important; } #mySidebar .reserve-sidebar > .content { color: var(--rsb-text-2) !important; font-size: 14px !important; line-height: 1.35 !important; padding: 14px 14px 18px !important; } #mySidebar .reserve-sidebar > .content .wrap-content { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; } /* Titre : simple, noir, souligné (style référence) */ #mySidebar .reserve-sidebar > .content h3 { margin: 0 0 12px !important; padding: 0 40px 0 0 !important; background: transparent !important; border: 0 !important; color: var(--rsb-text) !important; font-family: "Avenir Next", "Segoe UI", sans-serif !important; font-size: 24px !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; line-height: 1.15 !important; } #mySidebar .reserve-sidebar > .content h3 a.removeClass { top: -3px !important; right: 0 !important; width: 34px !important; height: 34px !important; border-radius: 8px !important; background: transparent !important; } #mySidebar .reserve-sidebar > .content h3 a.removeClass svg { color: var(--rsb-muted) !important; } /* Date + heure : ligne compacte */ #mySidebar .reserve-sidebar > .content .slot-detail { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; gap: 8px 10px !important; } #mySidebar .reserve-sidebar > .content .slot-detail h4 { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .slot-detail span { margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--rsb-text) !important; font-size: 22px !important; font-weight: 500 !important; border-radius: 0 !important; } /* Carte terrain : sobre */ #mySidebar .reserve-sidebar > .content .court-detail { margin: 0 0 12px !important; padding: 10px 12px !important; border: 1px solid var(--rsb-line) !important; border-radius: 10px !important; background: var(--rsb-card) !important; box-shadow: none !important; } #mySidebar .reserve-sidebar > .content .court-detail .content h4, #mySidebar .reserve-sidebar > .content .court-detail .content .set-ground { font-size: 20px !important; font-weight: 600 !important; color: var(--rsb-text) !important; } /* Nettoyage des séparateurs de sections */ #mySidebar .reserve-sidebar > .content .options { margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--rsb-line) !important; } /* Person-section : libellé plus compréhensible */ #mySidebar .reserve-sidebar > .content .options.person-section > h4 { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 8px !important; font-size: 14px !important; color: var(--rsb-text) !important; letter-spacing: 0 !important; text-transform: none !important; } #mySidebar .reserve-sidebar > .content .options.person-section > h4 i, #mySidebar .reserve-sidebar > .content .options.person-section > h4 svg { width: 20px !important; height: 20px !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .options > span.people-section { font-size: 13px !important; color: var(--rsb-text) !important; } /* Radios discrets (petits et sobres) */ #mySidebar .reserve-sidebar > .content form .form-check.inline { margin-right: 10px !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] { width: 16px !important; height: 16px !important; border-width: 1.4px !important; margin-right: 6px !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio]:checked::after { inset: 2px !important; } #mySidebar .reserve-sidebar > .content form .form-check [type=radio] + label { font-size: 13px !important; font-weight: 600 !important; color: var(--rsb-text-3) !important; } /* Badge partenaires favoris */ #mySidebar .reserve-sidebar > .content .people-section .people { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } #mySidebar .reserve-sidebar > .content .people-section .people a, #mySidebar .reserve-sidebar > .content .people-section .people button, #mySidebar .reserve-sidebar > .content .people-section .people .btn, #mySidebar .reserve-sidebar > .content .people-section #addInvite, #mySidebar .reserve-sidebar > .content .people-section #addLeagueGame { background: var(--rsb-chip-bg) !important; color: var(--rsb-chip-fg) !important; border: 0 !important; border-radius: 999px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; line-height: 1.15 !important; box-shadow: none !important; } /* Champs personnes + montants : lisibles */ #mySidebar .reserve-sidebar > .content .options .form-control, #mySidebar .reserve-sidebar > .content .options input[type=text], #mySidebar .reserve-sidebar > .content .options input[type=search] { height: 40px !important; border: 1px solid var(--rsb-line-field) !important; border-radius: 10px !important; background: var(--rsb-field) !important; color: var(--rsb-text) !important; font-size: 13px !important; padding: 8px 11px !important; } #mySidebar .reserve-sidebar > .content .options .form-control:focus, #mySidebar .reserve-sidebar > .content .options input[type=text]:focus, #mySidebar .reserve-sidebar > .content .options input[type=search]:focus { border-color: var(--rsb-focus) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--rsb-focus) 22%, transparent) !important; } /* Suggestions noms : propres et petites */ #mySidebar .reserve-sidebar .jsonSuggest, #mySidebar .reserve-sidebar ul.jsonSuggest { margin-top: 4px !important; border: 1px solid var(--rsb-line) !important; border-radius: 8px !important; background: var(--rsb-field) !important; box-shadow: 0 8px 18px light-dark(rgba(17, 24, 39, 0.08), rgba(0, 0, 0, 0.55)) !important; max-height: 180px !important; overflow-y: auto !important; list-style: none !important; } #mySidebar .reserve-sidebar .jsonSuggest li, #mySidebar .reserve-sidebar ul.jsonSuggest li, #mySidebar .reserve-sidebar .autocomplete-json li { list-style: none !important; margin: 0 !important; padding: 8px 10px !important; border-bottom: 1px dotted var(--rsb-line) !important; font-size: 13px !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar .jsonSuggest li:hover, #mySidebar .reserve-sidebar ul.jsonSuggest li:hover, #mySidebar .reserve-sidebar .autocomplete-json li:hover { background: var(--rsb-hover) !important; } /* Lignes noms/prix plus compréhensibles */ #mySidebar .reserve-sidebar > .content .paymentChoose, #mySidebar .reserve-sidebar > .content .totalPaye, #mySidebar .reserve-sidebar > .content .totalPaye > .row { font-size: 13px !important; color: var(--rsb-text) !important; } #mySidebar .reserve-sidebar > .content .paymentChoose .col, #mySidebar .reserve-sidebar > .content .totalPaye .col { padding: 6px 0 !important; } /* Aide visuelle : masquer doublons bruyants */ #mySidebar .reserve-sidebar > .content .help-icon.ml-auto { display: none !important; } /* Mobile : encore plus compact */ @media (max-width: 900px) { #mySidebar .reserve-sidebar > .content { padding: 12px !important; } #mySidebar .reserve-sidebar > .content h3 { font-size: 20px !important; margin-bottom: 10px !important; } #mySidebar .reserve-sidebar > .content .slot-detail h4, #mySidebar .reserve-sidebar > .content .slot-detail span { font-size: 18px !important; } #mySidebar .reserve-sidebar > .content .court-detail .content h4, #mySidebar .reserve-sidebar > .content .court-detail .content .set-ground { font-size: 16px !important; } } /* ===================================================================== * Tooltip — OUTSIDE LAYERS so we win against any layered !important. * The slot's :hover transform creates a containing block that traps any * position:fixed descendant pseudo-element. So we disable the CSS pseudo * tooltip entirely and route everything to the JS-driven .slot-rich-tip, * which lives in (outside the slot's containing block). * JS computes the position dynamically (above the hovered slot). * ===================================================================== */ /* Disable CSS pseudo-tooltip for slots with `data-tip` only — JS handles them now */ html body .slot[data-tip]:not([data-tip-html]):hover::before, html body .slot[data-tip]:not([data-tip-html])::before { content: none !important; display: none !important; } /* JS-driven tooltip — JS sets top/left dynamically with !important */ html body div.slot-rich-tip, .slot-rich-tip { position: fixed !important; z-index: 999999 !important; } /* ============================================================ * Slot de récurrence MODIFIABLE — l'utilisateur a les droits de * modifier cette récurrence (croisement IDTypereservation côté * PHP). Clic = ouvre `getSidebar4` (updateSpecialReservation). * * Signaux visuels (PERSISTANTS, pas seulement au hover) pour que * l'utilisateur comprenne immédiatement qu'il peut interagir : * 1. Liseré dashed violet INSET (= « cette case est modifiable ») * 2. Badge crayon en notification overhang top-right * 3. Cursor pointer * 4. Hover : liseré plein, élévation, badge agrandi * ============================================================ */ .sched-grid .slot.rec-edit { cursor: pointer; /* Liseré pointillé violet INSET — visible en permanence. Couleur adaptée aux deux thèmes. */ box-shadow: inset 0 0 0 2px light-dark(oklch(55% 0.18 285), oklch(72% 0.16 285)), 0 2px 6px color-mix(in oklch, oklch(55% 0.18 285) 18%, transparent); position: relative; isolation: isolate; z-index: 2; transition: transform 0.08s var(--ease-out), box-shadow 0.12s; } /* Badge crayon en NOTIFICATION (overhang top-right) — identique au pattern utilisé pour `.slot.mine ::after` (★), mais violet avec emoji crayon pour signifier « modifiable ». */ .sched-grid .slot.rec-edit::after { content: '✎'; position: absolute; top: -8px; inset-inline-end: 6px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: light-dark(oklch(55% 0.18 285), oklch(65% 0.18 285)); color: white; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--surface), 0 2px 5px rgba(0, 0, 0, 0.25); z-index: 4; pointer-events: none; transition: transform 0.12s var(--ease-out), box-shadow 0.12s; } .sched-grid .slot.rec-edit:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2.5px light-dark(oklch(50% 0.20 285), oklch(75% 0.18 285)), 0 6px 14px color-mix(in oklch, oklch(55% 0.18 285) 35%, transparent); } .sched-grid .slot.rec-edit:hover::after { transform: scale(1.15); box-shadow: 0 0 0 2px var(--surface), 0 4px 10px rgba(0, 0, 0, 0.30); } /* ============================================================ * Drag-to-select sur la grille planning (touch + mouse). * Les slots survolés pendant un drag reçoivent : * .drag-select → slot LIBRE (sélectionnable, fond violet/bleu) * .drag-select-invalid → slot DÉJÀ OCCUPÉ (= bloque la récurrence, * fond rouge pour avertissement immédiat) * .drag-select-shake → animation de shake quand l'user lâche * le drag sur un rectangle contenant des * cellules invalides → indique l'abort. * ============================================================ */ .sched-grid .slot.drag-select { background: light-dark(oklch(85% 0.12 252), oklch(40% 0.16 252)) !important; color: white !important; box-shadow: inset 0 0 0 2px var(--accent, oklch(55% 0.18 252)), 0 3px 10px color-mix(in oklch, var(--accent, oklch(55% 0.18 252)) 30%, transparent) !important; z-index: 3 !important; transition: background 0.05s, box-shadow 0.05s; } .sched-grid .slot.drag-select-invalid { /* Liseré rouge inset SANS écraser le fond — l'user voit toujours qu'il y a une résa derrière. Le rouge signale clairement que ce slot bloque la sélection (= le drag de récurrence ne peut pas être validé). */ outline: 2px solid light-dark(oklch(58% 0.22 25), oklch(72% 0.22 25)) !important; outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in oklch, oklch(58% 0.22 25) 35%, transparent), inset 0 0 0 0.5px color-mix(in oklch, oklch(58% 0.22 25) 50%, transparent) !important; z-index: 3 !important; } .sched-grid .slot.drag-select-shake { animation: v2DashShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes v2DashShake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-3px, 0, 0); } 40%, 60% { transform: translate3d(3px, 0, 0); } } /* Désactive la sélection texte natuive pendant le drag pour éviter le * texte sélectionné en bleu du navigateur sur les slots survolés. */ .sched-grid { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* `manipulation` = pan-x + pan-y + pinch-zoom, sans double-tap-zoom. * Le doigt posé sur une case scrolle donc la page (vertical) et la grille * (horizontal) normalement — c'est le comportement attendu sur mobile, où * les cases couvrent presque tout l'écran. * Le drag-rectangle de récurrence reste accessible au tactile : il s'arme * par APPUI LONG (cf. dashboard.js), qui suspend alors le scroll natif via * un `touchmove` non passif. `touch-action` ne concerne QUE le tactile/stylet, * donc le drag à la souris n'est pas affecté et démarre toujours dès 8px. */ .sched-grid .slot { touch-action: manipulation; } /* ============================================================ * Boutons de récurrence (« Ajouter une récurrence » + « Grouper ») * — affichés au-dessus de la grille planning quand l'utilisateur * a les droits de récurrence. Parité legacy L1292-1293. * ============================================================ */ .recurrence-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-block: 0.875rem 0.5rem; padding-inline: 0.5rem; } .recurrence-actions .rec-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border: 1px solid transparent; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background 0.12s, transform 0.06s, box-shadow 0.12s; user-select: none; } .recurrence-actions .rec-btn svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; } .recurrence-actions .rec-btn--primary { background: light-dark(oklch(55% 0.18 252), oklch(60% 0.18 252)); color: white; box-shadow: 0 2px 6px color-mix(in oklch, oklch(55% 0.18 252) 25%, transparent); } .recurrence-actions .rec-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in oklch, oklch(55% 0.18 252) 35%, transparent); background: light-dark(oklch(52% 0.19 252), oklch(63% 0.19 252)); } .recurrence-actions .rec-btn--secondary { background: light-dark(oklch(96% 0.012 250), oklch(28% 0.025 250)); color: light-dark(oklch(35% 0.05 250), oklch(82% 0.04 250)); border-color: light-dark(oklch(88% 0.018 250), oklch(36% 0.03 250)); } .recurrence-actions .rec-btn--secondary:hover { transform: translateY(-1px); background: light-dark(oklch(93% 0.018 250), oklch(34% 0.03 250)); } .recurrence-actions .rec-btn-pill { margin-inline-start: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: light-dark(oklch(85% 0.10 145), oklch(40% 0.10 145)); color: light-dark(oklch(35% 0.16 145), oklch(85% 0.12 145)); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; } @media (max-width: 560px) { .recurrence-actions .rec-btn { flex: 1 1 auto; justify-content: center; } } /* ═══════════════════════ FOOTER INFO (parité legacy) ═══════════════════════ */ .v2-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.75rem; } .v2-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; max-width: 1200px; margin: 0 auto; padding: 0.875rem 1.5rem; } .v2-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .v2-footer a { color: var(--text-2); text-decoration: none; transition: color 0.15s var(--ease-out); } .v2-footer a:hover { color: var(--accent-text); } .v2-footer__sep { color: var(--text-3); opacity: 0.6; } .v2-footer__admin { font-weight: 600; color: var(--accent-text) !important; } .v2-footer__stores { display: flex; align-items: center; gap: 0.5rem; } .v2-footer__store img { height: 24px; width: auto; display: block; } .v2-footer__social img { display: block; } @media (max-width: 640px) { .v2-footer__inner { justify-content: center; text-align: center; } .v2-footer__links { justify-content: center; } } /* ════════════════════════════════════════════════════════════════ * Garde anti-fuite Bootstrap — liens du SHELL V2 * ──────────────────────────────────────────────────────────────── * Certaines pages V2 embarquent une vue legacy et chargent Bootstrap * CSS via (leaderboardV2, player/profile, reservation/open…). * Bootstrap est NON-LAYERED, alors que tout dashboard.css est rangé * dans des @layer → le CSS non-layered de Bootstrap l'emporte sur * N'IMPORTE quel layer, quelle que soit la spécificité. Résultat : ses * styles `a` (couleur bleue + soulignement) fuyaient sur les liens du * menu de gauche et de la topbar. * * Ces règles sont volontairement HORS @layer (non-layered elles aussi) : * à égalité de couche, elles battent le `a` nu de Bootstrap par * spécificité (sélecteurs de classe > `a`). On ne ré-affirme QUE le * shell ; le contenu legacy garde Bootstrap intact. * ════════════════════════════════════════════════════════════════ */ .side a, .top a, .club-popover .item, .me a, .me-login-btn { text-decoration: none; } .nav a { color: var(--text-2); text-decoration: none; } .nav a:hover { color: var(--text); } .nav a[aria-current="page"] { color: var(--accent-text); } /* La règle `a { color: var(--bs-link-color) }` de Bootstrap (non-layered) colore en BLEU tous les liens du bas du menu — l'encadré « moi » : avatar, engrenage Paramètres, déconnexion, « Revenir à l'ancienne version », et le bouton de connexion invité. On ré-affirme leurs couleurs V2 hors @layer ; à égalité de couche (aucune), les sélecteurs de classe (0,1,0)/(0,2,0) battent le `a` nu (0,0,1) de Bootstrap quel que soit l'ordre de chargement. */ .icon-btn { color: var(--text-3); } .icon-btn:hover { color: var(--text); } .icon-btn.danger:hover { color: var(--danger); } .me .avatar { color: #fff; } .side-legacy { color: var(--text-2); } .side-legacy:hover { color: var(--text); } .me-login-btn { color: #fff; } /* Popovers de la topbar (sélecteur de club + de langue) : liens . La règle aria-current (2e ligne, plus spécifique) doit rester APRÈS la base pour conserver l'accent sur l'élément courant face à la re-déclaration hors @layer. */ .club-popover .item { color: var(--text); } .club-popover .item[aria-current="true"] { color: var(--accent-text); } /* Bootstrap (non-layered) réimpose trois règles du SHELL sur les pages qui le chargent (leaderboardV2…) : • body { background-color:#fff } → le fond du shell repasse en clair (blanc/bleuté) au lieu du --bg sombre ; • body { font-family:system-ui,… } → tout le shell (menu de gauche, topbar) perd Inter au profit de la police système → « pas le même menu » ; • .nav { display:flex; flex-wrap:wrap } → le menu de gauche se met en grille au lieu d'empiler ses items. À égalité de couche (les deux hors @layer) c'est l'ORDRE SOURCE qui tranche, et Bootstrap est chargé APRÈS dashboard.css → il gagnerait. On passe donc par une spécificité SUPÉRIEURE à la sienne, qui prime quel que soit l'ordre : html body (0,0,2) > body (0,0,1) · .side .nav (0,2,0) > .nav (0,1,0). */ html body { background: var(--bg); color: var(--text); font-family: var(--font-sans); } .side .nav { display: block; } /* Sheets mobiles : sur les pages qui chargent Bootstrap (leaderboardV2 etc.), le `a { color:var(--bs-link-color); text-decoration:underline }` de Bootstrap (non-layered) écrase les liens de la sheet (qui sont layered). On ré-affirme ici, hors @layer, les couleurs/soulignement du shell mobile. */ .sheet a, .sheet-list a { color: var(--text); text-decoration: none; } .sheet-list a.danger { color: var(--danger); } /* Cartes "Réservation en cours" cliquables : héritent du parent ; leurs enfants gardent leurs couleurs (.cur-res-item__sport/__meta/__code-value sont des classes plus spécifiques que `a`, donc layered tient face à Bootstrap). */ a.cur-res-item--link { color: inherit; text-decoration: none; } /* Bouton de repli (chevron) : sa géométrie est définie dans @layer components, donc Bootstrap (non-layered) peut l'écraser sur les pages qui le chargent (leaderboardV2…) → le bouton devient décentré/déformé. On ré-affirme ici, hors @layer, la pastille ronde centrée. */ .collapse-btn { position: absolute; inset-inline-end: -10px; inset-block-start: 1.25rem; inline-size: 22px; block-size: 22px; box-sizing: border-box; padding: 0; border-radius: 50%; display: grid; place-items: center; line-height: 0; } .collapse-btn svg { inline-size: 11px; block-size: 11px; vertical-align: middle; overflow: visible; margin: 0; } /* Badges du shell (menu gauche, sheets, pilules) : Bootstrap a sa PROPRE classe `.badge` (non-layered, padding/radius/display différents) qui bat nos règles layered malgré leur spécificité supérieure. On ré-affirme la pastille V2. */ .nav .badge, .sheet-list a .badge, .mobile-subnav .subnav-pill .badge { margin-inline-start: auto; min-width: 1.25rem; height: 1.125rem; padding: 0 0.375rem; background: var(--danger); color: white; font-size: 0.6875rem; font-weight: 700; line-height: 1; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .nav .badge.muted, .sheet-list a .badge.muted { background: var(--surface-3); color: var(--text-3); } .mobile-subnav .subnav-pill .badge { margin-inline-start: 0; min-width: 1.125rem; height: 1rem; padding: 0 0.3rem; font-size: 0.625rem; } /* Tabbar + sous-nav mobiles : le reboot Bootstrap (non-layered) écrase les boutons (`button { border-radius: 0; font-size: inherit }` → onglets rectangulaires, labels à 16px tronqués) et les liens (`a` bleu souligné → pilules façon lien brut). Ré-affirmation hors @layer, mêmes media queries (les @media n'influent pas sur les couches). */ @media (max-width: 900px) { .mobile-tabbar .tab { font-size: 0.625rem; line-height: 1.2; border: 0; border-radius: 18px; text-transform: none; } .mobile-subnav .subnav-pill { color: var(--text-2); text-decoration: none; } .mobile-subnav .subnav-pill.active { color: light-dark(var(--accent), var(--accent-text)); } } @media (max-width: 480px) { .mobile-tabbar .tab { font-size: 0.5625rem; } } /* ════════════════════════════════════════════════════════════════ * Animations partagées des modales/overlays V2 (style « feuille »). * Définies hors @layer pour être disponibles globalement (pages.css, * reserve-sidebar.css…). Toutes les modales V2 pointent ici. * ════════════════════════════════════════════════════════════════ */ @keyframes v2-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes v2-modal-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════════ * V2 Dialog — remplaçant SweetAlert2 (API Swal.fire compatible) * Utilisé par toutes les pages V2 via dashboard.js (window.Swal). * Volontairement HORS @layer pour bénéficier de la priorité maximale * (les pages V2 chargent parfois du CSS legacy/Bootstrap qui pourrait * fuiter sur les .btn). À égalité non-layered, .v2-dlg .btn gagne. * ════════════════════════════════════════════════════════════════ */ .v2-dlg-overlay { position: fixed; inset: 0; z-index: 10000; background: var(--v2-modal-backdrop); -webkit-backdrop-filter: var(--v2-modal-backdrop-blur); backdrop-filter: var(--v2-modal-backdrop-blur); display: grid; place-items: center; padding: 1rem; animation: v2-modal-fade 0.18s var(--ease-out); } .v2-dlg-overlay--closing { animation: v2dlgfadeout 0.12s var(--ease-out) forwards; } @keyframes v2dlgfadeout { to { opacity: 0; } } .v2-dlg { background: var(--v2-glass-bg); -webkit-backdrop-filter: var(--v2-glass-blur); backdrop-filter: var(--v2-glass-blur); border-radius: var(--v2-glass-radius); width: min(440px, 96vw); max-height: 90vh; overflow: auto; box-shadow: var(--v2-glass-shadow); border: var(--v2-glass-border); padding: 1.75rem 1.5rem 1.25rem; text-align: center; animation: v2-modal-pop 0.2s var(--ease-out); } .v2-dlg__icon { width: 56px; height: 56px; margin: 0 auto 0.875rem; border-radius: 999px; display: grid; place-items: center; } .v2-dlg__icon svg { width: 30px; height: 30px; } .v2-dlg__icon--success { background: var(--success-soft); color: var(--success); } .v2-dlg__icon--danger, .v2-dlg__icon--error { background: var(--danger-soft); color: var(--danger); } .v2-dlg__icon--warning { background: var(--warning-soft); color: var(--warning); } .v2-dlg__icon--info, .v2-dlg__icon--question { background: var(--accent-soft); color: var(--accent-text); } .v2-dlg__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); margin: 0 0 0.5rem; } .v2-dlg__body { font-size: 0.875rem; color: var(--text-2); line-height: 1.5; margin-bottom: 1.25rem; } .v2-dlg__body p { margin: 0 0 0.5rem; } .v2-dlg__body p:last-child { margin-bottom: 0; } .v2-dlg__body strong { color: var(--text); } .v2-dlg__body a { color: var(--accent-text); font-weight: 600; } .v2-dlg__actions { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap-reverse; } .v2-dlg__actions .btn { min-width: 110px; } /* ════════════════════════════════════════════════════════════════ * V2 — Tour guidé "Comment ça fonctionne ?" — refonte UX moderne * ──────────────────────────────────────────────────────────────── * Flow : Welcome → 4 étapes (avec highlight + carte) → Wrap-up. * Hors @layer pour rester immunisé aux fuites Bootstrap des pages * embarquant du legacy. Highlight et carte positionnés par JS. * ════════════════════════════════════════════════════════════════ */ .v2-guide { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .v2-guide[hidden] { display: none !important; } /* Voile : utilisé UNIQUEMENT pour les cartes welcome/done (sans cible). Quand une highlight est visible, sa box-shadow géante crée déjà l'effet projecteur et noircit le reste de l'écran → on cache ce backdrop pour éviter le double assombrissement. */ .v2-guide__backdrop { position: fixed; inset: 0; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(2px) saturate(120%); -webkit-backdrop-filter: blur(2px) saturate(120%); pointer-events: auto; /* catch les clics pour empêcher d'atteindre la page sous-jacente */ animation: v2GuideFade 0.3s ease-out; } /* Quand la highlight est visible, sa box-shadow 100vmax crée déjà l'assombrissement. On rend le backdrop TRANSPARENT (au lieu de display:none) pour qu'il continue d'exister et de catcher les clics dans la zone sombre — sinon les taps dans le "voile" passaient au travers et atteignaient la page sous-jacente. */ .v2-guide:has(.v2-guide__highlight:not([data-empty="1"])) .v2-guide__backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Highlight = "trou" lumineux dans le voile. La box-shadow géante crée l'assombrissement TOUT AUTOUR (effet projecteur) et laisse visible la cible à l'intérieur du rectangle. L'élément lui-même est cliquable (cursor:pointer + pointer-events:auto) pour avancer au tap. */ .v2-guide__highlight { position: fixed; pointer-events: auto; cursor: pointer; inline-size: 0; block-size: 0; border-radius: 16px; background: transparent; box-shadow: 0 0 0 100vmax rgba(8, 12, 24, 0.55), /* le "voile" géant créé PAR le highlight */ inset 0 0 0 2px rgba(255,255,255,0.90), /* liseré blanc intérieur */ 0 0 0 4px rgba(255,255,255,0.18), /* halo blanc fin */ 0 0 30px rgba(99, 179, 237, 0.45); /* glow accent */ transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; animation: v2GuidePulse 2s ease-in-out infinite; opacity: 1; } .v2-guide__highlight[data-empty="1"] { display: none; } /* ═══ Cartes ═══ */ .v2-guide__card { position: fixed; inline-size: min(380px, calc(100vw - 1.5rem)); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.18); padding: 1rem 1.1rem 0.95rem; pointer-events: auto; z-index: 1; overflow: hidden; animation: v2GuideCardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); font-family: inherit; } .v2-guide__card[hidden] { display: none !important; } /* Welcome / Done : centrées, légèrement plus larges, avec un fond accentué. */ .v2-guide__card--welcome, .v2-guide__card--done { inline-size: min(420px, calc(100vw - 1.5rem)); text-align: center; padding: 1.5rem 1.4rem 1.25rem; } .v2-guide__card--welcome::before, .v2-guide__card--done::before { content: ""; position: absolute; inset: 0 0 auto 0; block-size: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 50%, oklch(70% 0.20 260))); } .v2-guide__card--welcome .v2-guide__head, .v2-guide__card--done .v2-guide__head { flex-direction: column; align-items: center; text-align: center; } .v2-guide__card--welcome .v2-guide__head-text, .v2-guide__card--done .v2-guide__head-text { align-items: center; } /* Progress bar haute (étapes uniquement, masquée pour welcome). */ .v2-guide__progress-bar { position: absolute; inset: 0 0 auto 0; block-size: 4px; background: color-mix(in oklch, var(--text) 8%, transparent); overflow: hidden; } .v2-guide__card--welcome .v2-guide__progress-bar { display: none; } .v2-guide__progress-fill { display: block; block-size: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 60%, oklch(72% 0.18 280))); transition: inline-size 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* En-tête : icône colorée + eyebrow + titre */ .v2-guide__head { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0.4rem 0 0.65rem; } .v2-guide__icon { inline-size: 44px; block-size: 44px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent); } .v2-guide__icon svg { inline-size: 22px; block-size: 22px; } .v2-guide__card[data-tint="sky"] .v2-guide__icon { background: color-mix(in oklch, oklch(65% 0.18 235) 18%, transparent); color: oklch(45% 0.18 235); box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(65% 0.18 235) 35%, transparent); } .v2-guide__card[data-tint="violet"] .v2-guide__icon { background: color-mix(in oklch, oklch(60% 0.20 290) 18%, transparent); color: oklch(45% 0.20 290); box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(60% 0.20 290) 35%, transparent); } .v2-guide__card[data-tint="teal"] .v2-guide__icon { background: color-mix(in oklch, oklch(65% 0.15 175) 18%, transparent); color: oklch(45% 0.15 175); box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(65% 0.15 175) 35%, transparent); } .v2-guide__card[data-tint="amber"] .v2-guide__icon { background: color-mix(in oklch, oklch(72% 0.16 65) 18%, transparent); color: oklch(50% 0.16 65); box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(72% 0.16 65) 35%, transparent); } .v2-guide__head-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .v2-guide__eyebrow { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } .v2-guide__title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; color: var(--text); letter-spacing: -0.01em; } .v2-guide__text { margin: 0 0 0.95rem; font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); } .v2-guide__text b { color: var(--accent-text); font-weight: 700; } /* Indication "tap target" — petite chip en bas de carte (étapes seules) */ .v2-guide__hint { margin-top: 0.6rem; padding: 0.45rem 0.65rem; display: flex; align-items: center; gap: 0.45rem; background: color-mix(in oklch, var(--accent) 8%, transparent); border: 1px dashed color-mix(in oklch, var(--accent) 35%, transparent); border-radius: 10px; font-size: 0.75rem; color: var(--text-3); } .v2-guide__hint-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); animation: v2GuideHintPulse 1.4s ease-in-out infinite; flex: none; } /* Actions */ .v2-guide__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; } .v2-guide__card--welcome .v2-guide__actions, .v2-guide__card--done .v2-guide__actions { justify-content: center; flex-wrap: wrap; } .v2-guide__actions-right { display: flex; gap: 0.5rem; } .v2-guide__btn { appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s; font-family: inherit; white-space: nowrap; } .v2-guide__btn:active { transform: translateY(1px) scale(0.98); } .v2-guide__btn--wide { padding-inline: 1.5rem; min-inline-size: 220px; } .v2-guide__btn--ghost { background: transparent; color: var(--text-3); } .v2-guide__btn--ghost:hover { color: var(--text-2); } .v2-guide__btn--secondary { background: color-mix(in oklch, var(--text) 7%, transparent); color: var(--text); } .v2-guide__btn--secondary:hover { background: color-mix(in oklch, var(--text) 13%, transparent); } .v2-guide__btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 35%, transparent); } .v2-guide__btn--primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 45%, transparent); } /* ═══ Animations ═══ */ @keyframes v2GuideFade { from { opacity: 0; } to { opacity: 1; } } /* IMPORTANT : la box-shadow `0 0 0 100vmax …` doit rester dans CHAQUE keyframe, sinon le projecteur disparaît pendant l'animation et le voile se "vide". */ @keyframes v2GuidePulse { 0%, 100% { box-shadow: 0 0 0 100vmax rgba(8, 12, 24, 0.55), inset 0 0 0 2px rgba(255,255,255,0.90), 0 0 0 4px rgba(255,255,255,0.18), 0 0 30px rgba(99, 179, 237, 0.40); } 50% { box-shadow: 0 0 0 100vmax rgba(8, 12, 24, 0.55), inset 0 0 0 3px rgba(255,255,255,0.98), 0 0 0 6px rgba(255,255,255,0.30), 0 0 50px rgba(99, 179, 237, 0.60); } } @keyframes v2GuideCardIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes v2GuideHintPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .v2-guide__highlight, .v2-guide__card, .v2-guide__backdrop, .v2-guide__hint-dot, .v2-guide__progress-fill { animation: none; transition: none; } } /* ══ État « aucune date ouverte à la réservation » ═══════════════════════════ Affiché à la place de la grille quand aucune date n'est à la fois dans la fenêtre de visibilité et couverte par une saison (cf. BookingWindow). Objectif : annoncer une date d'ouverture et proposer une sortie, plutôt que de laisser l'utilisateur devant un planning vide sans explication. */ .sched-closed { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: clamp(2rem, 6vw, 3.5rem) 1.25rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, var(--bg)); } .sched-closed__icon { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); } .sched-closed__title { margin: 0; font-family: var(--font-display, var(--font-sans)); font-size: 1.0625rem; font-weight: 650; color: var(--text, inherit); } .sched-closed__text { margin: 0; max-inline-size: 46ch; line-height: 1.55; color: var(--text-muted, inherit); } .sched-closed__hint { font-size: 0.875rem; color: var(--text-muted, inherit); opacity: 0.85; } .sched-closed__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; } .sched-closed__chip { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.875rem; font-weight: 550; text-decoration: none; color: var(--text, inherit); background: var(--bg); transition: background 0.15s var(--ease-out, ease), border-color 0.15s var(--ease-out, ease); } .sched-closed__chip:hover, .sched-closed__chip:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text, var(--accent)); } @media (prefers-reduced-motion: reduce) { .sched-closed__chip { transition: none; } } /* ══ Invitations du tableau de bord (appli mobile / fusion de comptes) ═══════ Reprend les règles métier du legacy avec l'habillage V2. Aucune classe Bootstrap : la V2 ne charge pas Bootstrap CSS. */ .v2-prompt { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.125rem; margin-block-end: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface, var(--bg)); } .v2-prompt__icon { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); } .v2-prompt__body { flex: 1 1 auto; min-inline-size: 0; } .v2-prompt__title { margin: 0 0 0.2rem; font-weight: 650; font-size: 0.9375rem; color: var(--text, inherit); } .v2-prompt__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted, inherit); } .v2-prompt__hint { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--text-muted, inherit); opacity: 0.8; } .v2-prompt__cta { flex: none; align-self: center; padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; /* Texte blanc explicite : --accent-text est une couleur d'accent sur fond clair dans ce thème, illisible posée sur --accent. */ color: #fff; background: var(--accent); white-space: nowrap; } .v2-prompt__cta:hover, .v2-prompt__cta:focus-visible { background: var(--accent-hover, var(--accent)); } @media (max-width: 640px) { .v2-prompt { flex-wrap: wrap; } .v2-prompt__cta { inline-size: 100%; text-align: center; } } /* ── Fusion de comptes : boîte de dialogue ─────────────────────────────────── */ .v2-merge-overlay { position: fixed; inset: 0; z-index: 99995; display: grid; place-items: center; padding: 1rem; background: rgb(15 23 42 / 0.55); overflow-y: auto; } .v2-merge { inline-size: min(560px, 100%); max-block-size: min(88vh, 760px); overflow-y: auto; border-radius: 18px; background: var(--bg); box-shadow: 0 24px 60px rgb(15 23 42 / 0.28); } .v2-merge__head { padding: 1.5rem 1.5rem 1.125rem; color: #fff; background: linear-gradient(135deg, #169b62 0%, #1fb987 100%); } .v2-merge__badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 650; background: rgb(255 255 255 / 0.22); } .v2-merge__title { margin: 0.55rem 0 0; font-family: var(--font-display, var(--font-sans)); font-size: 1.25rem; font-weight: 700; line-height: 1.3; } .v2-merge__body { padding: 1.25rem 1.5rem 0.5rem; } .v2-merge__found { padding: 0.875rem 1rem; margin-block-end: 1.125rem; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); } .v2-merge__found-badge { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } .v2-merge__found-name { margin: 0.3rem 0 0; font-weight: 650; color: var(--text, inherit); } .v2-merge__found-club { margin: 0.1rem 0 0; font-size: 0.875rem; color: var(--text-muted, inherit); } .v2-merge__block { margin-block-end: 1.125rem; } .v2-merge__block h3 { margin: 0 0 0.3rem; font-size: 0.9375rem; font-weight: 650; color: var(--text, inherit); } .v2-merge__block p { margin: 0 0 0.35rem; font-size: 0.875rem; line-height: 1.55; color: var(--text-muted, inherit); } .v2-merge__block--warn { padding: 0.75rem 0.9rem; border-inline-start: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); } .v2-merge__merge-text { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text, inherit); } .v2-merge__error { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: 0.875rem; color: var(--danger); background: var(--danger-soft); } .v2-merge__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem 1.5rem; } .v2-merge__btn { padding: 0.6rem 1.15rem; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; } .v2-merge__btn--ghost { border-color: var(--border); color: var(--text-muted, inherit); background: transparent; } .v2-merge__btn--ghost:hover { background: var(--accent-soft); } .v2-merge__btn--primary { color: #fff; background: var(--accent); } .v2-merge__btn--primary:hover { background: var(--accent-hover, var(--accent)); } .v2-merge__btn:disabled { opacity: 0.65; cursor: default; } @media (max-width: 480px) { .v2-merge__actions { flex-direction: column-reverse; } .v2-merge__btn { inline-size: 100%; } } /* Fermeture de la promo application — le legacy n'offrait aucun moyen de la masquer, la carte revenait a chaque chargement de page. */ .v2-prompt { position: relative; } .v2-prompt__close { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; display: grid; place-items: center; inline-size: 30px; block-size: 30px; padding: 0; border: none; border-radius: 50%; color: var(--text-muted, inherit); background: transparent; cursor: pointer; opacity: 0.6; } .v2-prompt__close:hover, .v2-prompt__close:focus-visible { opacity: 1; background: var(--accent-soft); } /* Laisse la place au bouton de fermeture. */ .v2-prompt__body { padding-inline-end: 1.75rem; }