/* ============================================================ PBSCo Hub — Page d'accueil & pages de compte Fond animé, cartes en verre, formulaires de connexion ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --purple: #8400d0; --blue: #0c71c3; --glass-bg: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.18); } /* overflow-x sur et non sur : sinon devient lui-même une zone de défilement de hauteur fixe et la page ne défile plus dès que le contenu dépasse un écran. porte aussi une couleur de fond de secours : le dégradé du body est propagé au canvas et serait sinon répété — d'où la cassure visible en bas de page dès que le contenu dépasse un écran. */ html { min-height: 100%; width: 100%; overflow-x: hidden; background-color: #0a0040; } body { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; width: 100%; min-height: 100%; background-color: #0a0040; background-image: linear-gradient(135deg, #0a0040 0%, #17009e 30%, #4a0080 60%, #0c71c3 100%); background-repeat: no-repeat; background-attachment: fixed; /* dégradé calé sur la fenêtre : jamais répété */ background-size: cover; display: flex; flex-direction: column; align-items: center; position: relative; color: #fff; } /* ── FOND ANIMÉ ─────────────────────────────────────────── */ .bg-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: drift linear infinite; } .orb-1 { width: 520px; height: 520px; background: radial-gradient(circle, #8400d0 0%, transparent 70%); top: -180px; left: -140px; animation-duration: 18s; } .orb-2 { width: 420px; height: 420px; background: radial-gradient(circle, #0c71c3 0%, transparent 70%); bottom: -100px; right: -100px; animation-duration: 22s; animation-delay: -6s; } .orb-3 { width: 320px; height: 320px; background: radial-gradient(circle, #6d28d9 0%, transparent 70%); top: 40%; left: 50%; animation-duration: 26s; animation-delay: -12s; } .orb-4 { width: 260px; height: 260px; background: radial-gradient(circle, #0ea5e9 0%, transparent 70%); top: 10%; right: 15%; animation-duration: 20s; animation-delay: -4s; } .orb-5 { width: 200px; height: 200px; background: radial-gradient(circle, #a855f7 0%, transparent 70%); bottom: 15%; left: 10%; animation-duration: 24s; animation-delay: -8s; } @keyframes drift { 0% { transform: translateY(0) translateX(0) scale(1); } 25% { transform: translateY(-30px) translateX(20px) scale(1.04); } 50% { transform: translateY(-15px) translateX(-25px) scale(.97); } 75% { transform: translateY(25px) translateX(15px) scale(1.02); } 100% { transform: translateY(0) translateX(0) scale(1); } } .geo { position: absolute; opacity: .08; border: 1.5px solid rgba(255,255,255,.6); animation: spin linear infinite; } .geo-1 { width: 120px; height: 120px; border-radius: 18px; top: 8%; left: 6%; animation-duration: 28s; } .geo-2 { width: 80px; height: 80px; border-radius: 50%; top: 15%; right: 8%; animation-duration: 20s; animation-direction: reverse; } .geo-3 { width: 60px; height: 60px; border-radius: 8px; bottom: 18%; right: 12%; animation-duration: 32s; } .geo-4 { width: 100px; height: 100px; border-radius: 50%; bottom: 10%; left: 7%; animation-duration: 24s; animation-direction: reverse; } .geo-5 { width: 50px; height: 50px; border-radius: 6px; top: 45%; right: 4%; animation-duration: 18s; } .geo-6 { width: 140px; height: 140px; border-radius: 24px; top: 55%; left: 3%; animation-duration: 36s; animation-direction: reverse; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .particles { position: absolute; inset: 0; } .particle { position: absolute; width: 3px; height: 3px; background: rgba(255,255,255,.5); border-radius: 50%; animation: float-up linear infinite; } @keyframes float-up { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .6; } 100% { transform: translateY(-10vh) scale(1.5); opacity: 0; } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 60px 60px; } @media (prefers-reduced-motion: reduce) { .orb, .geo, .particle { animation: none !important; } } /* ── PAGE ───────────────────────────────────────────────── */ .page { position: relative; z-index: 1; width: 100%; max-width: 1180px; padding: 40px 24px 56px; display: flex; flex-direction: column; align-items: center; flex: 1; } .page.center { justify-content: center; min-height: 100vh; } /* ── BARRE DE COMPTE ────────────────────────────────────── */ /* Identité du compte à gauche, actions à droite */ .hub-topbar { width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 0; position: relative; z-index: 2; flex-wrap: wrap; } .hub-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } .hub-user { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; backdrop-filter: blur(10px); } .hub-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.94); color: #17009e; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; flex-shrink: 0; } .hub-user-meta { display: flex; flex-direction: column; line-height: 1.25; } .hub-user-meta strong { font-size: 13px; color: #fff; font-weight: 700; } .hub-user-meta small { font-size: 11px; color: rgba(255,255,255,.6); } .hub-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; backdrop-filter: blur(10px); font-family: inherit; } .hub-btn:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.45); } .hub-btn.admin { border-color: rgba(251,191,36,.55); color: #fde68a; } .hub-btn.admin:hover { background: rgba(251,191,36,.16); } /* ── EN-TÊTE ────────────────────────────────────────────── */ header.hub-header { text-align: center; margin-bottom: 46px; animation: fadeDown .7s ease both; } .logo-wrap { display: inline-block; margin-bottom: 26px; background: #ffffff; padding: 18px 30px; border-radius: 22px; box-shadow: 0 18px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.12); } .logo-wrap img { height: 90px; width: auto; display: block; margin: 0 auto; } h1.hub-title { font-size: clamp(28px, 4vw, 46px); font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1.1; margin-bottom: 14px; text-shadow: 0 2px 20px rgba(0,0,0,.3); } h1.hub-title span { background: linear-gradient(90deg, #c4b5fd, #93c5fd, #c4b5fd); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s ease infinite; } @keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .header-sub { font-size: 15.5px; color: rgba(255,255,255,.55); font-weight: 400; } /* ── GRILLE DE CARTES ───────────────────────────────────── */ .cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; max-width: 940px; animation: fadeUp .8s ease .12s both; } .section-label { width: 100%; max-width: 940px; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 40px 0 16px; display: flex; align-items: center; gap: 14px; animation: fadeUp .8s ease .1s both; } .section-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14); } .section-label:first-of-type { margin-top: 0; } @media (max-width: 720px) { .cards-grid { grid-template-columns: 1fr; max-width: 460px; } .section-label { max-width: 460px; } } /* ── CARTE ──────────────────────────────────────────────── */ .card { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; padding: 32px 30px; cursor: pointer; text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s ease, background .3s ease; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-grad); opacity: .9; } .card::after { content: ''; position: absolute; inset: 0; border-radius: 22px; background: var(--card-glow); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .card:hover::after { opacity: 1; } .card:hover { transform: translateY(-8px) scale(1.012); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.11); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12), var(--card-shadow); } .card:active { transform: translateY(-4px) scale(1.006); } .card-icon { width: 58px; height: 58px; border-radius: 17px; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.22,1,.36,1); } .card:hover .card-icon { transform: scale(1.1) rotate(-4deg); } .card-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--tag-color); margin-bottom: 9px; opacity: .92; } .card-title { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.4px; margin-bottom: 9px; line-height: 1.22; } .card-desc { font-size: 13.5px; color: rgba(255,255,255,.52); font-weight: 400; line-height: 1.62; margin-bottom: 24px; font-family: 'Inter', sans-serif; } .card-spacer { flex: 1; } .card-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.75); transition: gap .25s ease, color .25s ease; } .card:hover .card-cta { gap: 14px; color: #fff; } .card-cta-arrow { width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background .25s ease, transform .25s ease; } .card:hover .card-cta-arrow { background: rgba(255,255,255,.22); transform: translateX(4px); } .card-deco, .card-deco-2 { position: absolute; border: 2px solid rgba(255,255,255,.07); transition: transform .5s ease; } .card-deco { bottom: -20px; right: -20px; width: 100px; height: 100px; border-radius: 24px; transform: rotate(20deg); } .card-deco-2 { bottom: -40px; right: -40px; width: 130px; height: 130px; border-radius: 28px; border-color: rgba(255,255,255,.04); transform: rotate(10deg); } .card:hover .card-deco { transform: rotate(35deg) scale(1.1); } .card:hover .card-deco-2 { transform: rotate(20deg) scale(1.08); } .card-badge { position: absolute; top: 18px; right: 18px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.18); } /* Thèmes de carte */ .card-arrive { --card-grad: linear-gradient(90deg,#4ade80,#22d3ee); --card-glow: radial-gradient(ellipse at top left, rgba(74,222,128,.08), transparent 60%); --card-shadow: 0 0 40px rgba(74,222,128,.15); --icon-bg: linear-gradient(135deg,#166534,#0e7490); --tag-color: #4ade80; } .card-depart { --card-grad: linear-gradient(90deg,#f87171,#fb923c); --card-glow: radial-gradient(ellipse at top left, rgba(248,113,113,.08), transparent 60%); --card-shadow: 0 0 40px rgba(248,113,113,.15); --icon-bg: linear-gradient(135deg,#7f1d1d,#9a3412); --tag-color: #f87171; } .card-incident{ --card-grad: linear-gradient(90deg,#f43f5e,#fb7185); --card-glow: radial-gradient(ellipse at top left, rgba(244,63,94,.10), transparent 60%); --card-shadow: 0 0 40px rgba(244,63,94,.18); --icon-bg: linear-gradient(135deg,#9f1239,#be123c); --tag-color: #fb7185; } .card-change { --card-grad: linear-gradient(90deg,#a78bfa,#818cf8); --card-glow: radial-gradient(ellipse at top left, rgba(167,139,250,.10), transparent 60%); --card-shadow: 0 0 40px rgba(167,139,250,.18); --icon-bg: linear-gradient(135deg,#5b21b6,#4338ca); --tag-color: #a78bfa; } .card-admin { --card-grad: linear-gradient(90deg,#fbbf24,#f59e0b); --card-glow: radial-gradient(ellipse at top left, rgba(251,191,36,.10), transparent 60%); --card-shadow: 0 0 40px rgba(251,191,36,.16); --icon-bg: linear-gradient(135deg,#92400e,#b45309); --tag-color: #fbbf24; } .card-queue { --card-grad: linear-gradient(90deg,#38bdf8,#22d3ee); --card-glow: radial-gradient(ellipse at top left, rgba(56,189,248,.10), transparent 60%); --card-shadow: 0 0 40px rgba(56,189,248,.18); --icon-bg: linear-gradient(135deg,#075985,#0e7490); --tag-color: #38bdf8; } /* ── PIED DE PAGE ───────────────────────────────────────── */ /* Bandeau pleine largeur, hors du conteneur des cartes : il ne peut ainsi jamais se retrouver au contact d'une carte. */ footer.hub-footer { position: relative; z-index: 1; width: 100%; margin-top: auto; padding: 26px 24px 30px; text-align: center; border-top: 1px solid rgba(255,255,255,.10); background: rgba(8,0,45,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .footer-links { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 10px; flex-wrap: wrap; } .footer-links a { font-size: 12px; color: rgba(255,255,255,.5); text-decoration: none; font-weight: 500; transition: color .2s; } .footer-links a:hover { color: #fff; } .footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); } .footer-copy { font-size: 11px; color: rgba(255,255,255,.38); } .footer-copy strong { color: rgba(255,255,255,.55); font-weight: 700; } /* ── PAGES DE COMPTE (connexion, inscription…) ──────────── */ .auth-card { position: relative; z-index: 1; width: 100%; max-width: 470px; background: #fff; color: #1e293b; border-radius: 20px; padding: 40px 40px 32px; box-shadow: 0 32px 80px rgba(0,0,0,.4); animation: fadeUp .45s ease both; } .auth-card.wide { max-width: 620px; } .auth-logo { text-align: center; margin-bottom: 20px; } .auth-logo img { height: 52px; width: auto; display: block; margin: 0 auto; } .auth-divider { width: 46px; height: 3px; background: linear-gradient(90deg,#1a4080,#3b82f6); border-radius: 2px; margin: 0 auto 24px; } .auth-card h1 { font-size: 20px; font-weight: 800; text-align: center; color: #0f2044; margin-bottom: 6px; letter-spacing: -.3px; } .auth-card .sub { font-size: 13px; color: #64748b; text-align: center; margin-bottom: 26px; line-height: 1.55; } .auth-card label { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 7px; } .auth-card .field { margin-bottom: 16px; position: relative; } .auth-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .auth-card .row { grid-template-columns: 1fr; } .auth-card { padding: 30px 22px 26px; } } .auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=tel] { width: 100%; padding: 12px 15px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 14.5px; color: #1e293b; background: #f8fafc; outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s, background .2s; } .auth-card input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.13); background: #fff; } .auth-card .hint { font-size: 11.5px; color: #64748b; margin-top: 6px; line-height: 1.5; } .auth-card .eye { position: absolute; right: 12px; top: 34px; background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 17px; } .auth-btn { width: 100%; padding: 14px; background: linear-gradient(135deg,#1a4080,#2563eb); color: #fff; border: none; border-radius: 11px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; margin-top: 6px; transition: opacity .2s, transform .1s, box-shadow .2s; box-shadow: 0 6px 18px rgba(26,64,128,.3); } .auth-btn:hover { opacity: .95; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(26,64,128,.36); } .auth-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } .auth-links { text-align: center; margin-top: 20px; font-size: 12.5px; color: #64748b; line-height: 1.9; } .auth-links a { color: #2563eb; font-weight: 700; text-decoration: none; } .auth-links a:hover { text-decoration: underline; } .auth-msg { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 18px; border: 1px solid transparent; line-height: 1.55; } .auth-msg strong { font-weight: 800; } .auth-msg.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } .auth-msg.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .auth-msg.info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } .auth-msg.warn { background: #fffbeb; border-color: #fde68a; color: #b45309; } .auth-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e8f0; font-size: 11.5px; color: #94a3b8; text-align: center; line-height: 1.6; } .big-icon { font-size: 52px; text-align: center; margin-bottom: 14px; } /* ── ANIMATIONS ─────────────────────────────────────────── */ @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }