/* ========================================================================== GestionVision — gabarit d'authentification (sélecteur de département + authentification). Charte "cinématique / été" : ciel dégradé chaud, silhouette de skyline, panneaux vitrés (glass). ========================================================================== */ :root { --gv-navy-950: #0b0a1f; --gv-navy-900: #140f2e; --gv-purple-800: #2c1b4d; --gv-coral-500: #ff7a59; --gv-coral-600: #ff5f3d; --gv-orange-400: #ffb26b; --gv-pink-500: #ff5f96; --gv-teal-400: #3fd8c7; --gv-gold-300: #ffd97a; --gv-text-primary: #fff8f2; --gv-text-secondary: rgba(255, 248, 242, 0.72); --gv-text-muted: rgba(255, 248, 242, 0.5); --gv-glass-bg: rgba(255, 255, 255, 0.07); --gv-glass-bg-strong: rgba(255, 255, 255, 0.12); --gv-glass-border: rgba(255, 255, 255, 0.16); --gv-glass-border-strong: rgba(255, 255, 255, 0.3); --gv-shadow-lift: 0 24px 70px -24px rgba(6, 4, 20, 0.65); --gv-shadow-soft: 0 12px 32px -16px rgba(6, 4, 20, 0.55); --gv-radius-lg: 28px; --gv-radius-md: 18px; --gv-radius-sm: 12px; --gv-radius-pill: 999px; --gv-discord: #5865f2; --gv-discord-hover: #6a75f5; --gv-font-sans: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* Charte "bleu nuit" — appliquée uniquement à l'espace département de Vision Légal (classe posée sur par partials/department-head.php). Les variables de couleur d'accent sont redéfinies ici ; comme le reste des feuilles de style les consomme via var(--gv-...), tout le dégradé/les boutons/badges/icônes suivent automatiquement sans dupliquer de règles. --gv-teal-400 est inclus (badges "en poste"/actifs) : sans lui ils resteraient teal/vert au lieu de suivre la charte bleu nuit. */ .theme-navy { --gv-navy-950: #050b1a; --gv-navy-900: #0b1c3d; --gv-coral-500: #3b82f6; --gv-coral-600: #1d4ed8; --gv-orange-400: #7cb2ff; --gv-pink-500: #14224a; --gv-teal-400: #38bdf8; } *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; font-family: var(--gv-font-sans); color: var(--gv-text-primary); background: var(--gv-navy-950); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---------------------------------------------------------------------- * * Fond cinématique — fixe, commun aux deux écrans, non scrollable * ---------------------------------------------------------------------- */ .auth-cinematic { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .cinematic-sky { position: absolute; inset: 0; background: linear-gradient( 180deg, #2a2f6b 0%, #6a3f8f 22%, #c1497a 42%, var(--gv-coral-500) 58%, var(--gv-orange-400) 70%, var(--gv-navy-900) 92%, var(--gv-navy-950) 100% ); } .cinematic-glow { position: absolute; top: -10%; left: 50%; width: 140%; height: 70%; transform: translateX(-50%); background: radial-gradient( ellipse at center, rgba(255, 217, 122, 0.55) 0%, rgba(255, 122, 89, 0.32) 30%, rgba(255, 95, 150, 0.16) 52%, rgba(255, 95, 150, 0) 72% ); filter: blur(6px); mix-blend-mode: screen; } .cinematic-logo-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(78vw, 860px); opacity: 0.1; filter: brightness(0) invert(1); } .cinematic-fade { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(11, 10, 31, 0) 45%, rgba(11, 10, 31, 0.55) 75%, rgba(11, 10, 31, 0.92) 100% ); } /* ---------------------------------------------------------------------- * * Structure commune * ---------------------------------------------------------------------- */ .auth-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; } .auth-shell-footer { margin-top: 40px; text-align: center; } .auth-discreet-link { font-size: 13px; color: var(--gv-text-muted); border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .auth-discreet-link:hover { color: var(--gv-text-secondary); border-color: var(--gv-glass-border); } /* ---------------------------------------------------------------------- * * Écran 1 — sélecteur de département * ---------------------------------------------------------------------- */ .org-select-header { max-width: 640px; text-align: center; margin-bottom: 52px; } .org-select-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gv-orange-400); margin-bottom: 16px; } .org-select-header h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; margin: 0 0 14px; letter-spacing: -0.02em; background: linear-gradient(135deg, #fff8f2, #ffd9c2); -webkit-background-clip: text; background-clip: text; color: transparent; } .org-select-header p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gv-text-secondary); } .org-select-grid { width: 100%; max-width: 1140px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: 20px; } .org-select-card { position: relative; display: flex; flex-direction: column; border-radius: var(--gv-radius-lg); background: var(--gv-glass-bg); border: 1px solid var(--gv-glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--gv-shadow-soft); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } a.org-select-card:hover, a.org-select-card:focus-visible { transform: translateY(-6px); border-color: var(--gv-glass-border-strong); background: var(--gv-glass-bg-strong); box-shadow: var(--gv-shadow-lift); } .org-select-card.is-disabled { opacity: 0.55; filter: grayscale(0.4); cursor: not-allowed; } .org-select-photo { position: relative; height: 108px; flex-shrink: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.03); background-image: linear-gradient( 135deg, rgba(255, 122, 89, 0.28), rgba(255, 95, 150, 0.14) 55%, rgba(63, 216, 199, 0.1) ); border-bottom: 1px solid var(--gv-glass-border); } .org-select-logo { position: absolute; top: 80px; left: 18px; width: 52px; height: 52px; border-radius: 14px; background: var(--gv-navy-900); border: 2px solid var(--gv-navy-950); box-shadow: var(--gv-shadow-soft), 0 0 0 1px var(--gv-glass-border-strong); display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 2; } .org-select-logo img { width: 100%; height: 100%; object-fit: cover; } .org-select-logo-emoji { font-size: 26px; line-height: 1; color: var(--gv-orange-400); } .org-select-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 32px 18px 18px; } .org-select-name { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: var(--gv-text-primary); } .org-select-description { font-size: 12.5px; line-height: 1.5; color: var(--gv-text-secondary); margin: 0; } .org-select-cta { margin-top: auto; padding-top: 16px; } .org-select-cta .btn { width: 100%; padding: 11px 16px; font-size: 13px; } /* ---------------------------------------------------------------------- * * Boutons * ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--gv-radius-sm); padding: 13px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease; } .btn-primary { background: linear-gradient(135deg, var(--gv-coral-500), var(--gv-pink-500)); color: #1a0e10; } .btn-primary:hover { filter: brightness(1.08); } .btn-disabled { background: rgba(255, 255, 255, 0.08); color: var(--gv-text-muted); cursor: not-allowed; } .btn-secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--gv-glass-border); color: var(--gv-text-secondary); } .btn-secondary:hover { background: var(--gv-glass-bg-strong); border-color: var(--gv-glass-border-strong); color: var(--gv-text-primary); } /* Boutons "vitrés" pour la charte bleu nuit (Vision Légal). Les arrêts du dégradé dérivent de --gv-coral-500/--gv-pink-500 via color-mix() plutôt que d'une rgba() figée : si la palette bouge un jour, ce bouton suit sans qu'on ait à revenir la modifier ici. */ .theme-navy .btn-primary { color: #f5f8ff; background: linear-gradient( 135deg, color-mix(in srgb, var(--gv-coral-500) 78%, transparent), color-mix(in srgb, var(--gv-pink-500) 78%, transparent) ); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); } .theme-navy .btn-secondary, .theme-navy .btn-danger, .theme-navy .reorg-edit-btn { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .btn-discord { background: var(--gv-discord); color: #fff; width: 100%; padding: 15px 22px; font-size: 15px; } .btn-discord:hover { background: var(--gv-discord-hover); } .btn-discord svg { width: 20px; height: 20px; flex-shrink: 0; } /* ---------------------------------------------------------------------- * * Écran 2 — authentification * ---------------------------------------------------------------------- */ .auth-panel-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 24px; } .auth-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gv-orange-400); margin-bottom: 14px; } .auth-panel-wrap h1 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; } .auth-panel-wrap > p.auth-subtitle { margin: 0 0 32px; font-size: 15px; line-height: 1.55; color: var(--gv-text-secondary); max-width: 360px; } .auth-status-panel { width: 100%; border-radius: var(--gv-radius-md); background: var(--gv-glass-bg); border: 1px solid var(--gv-glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--gv-shadow-lift); padding: 28px; } .auth-status-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: var(--gv-text-secondary); } .auth-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gv-teal-400); box-shadow: 0 0 0 4px rgba(63, 216, 199, 0.18); flex-shrink: 0; } .auth-secondary-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; font-size: 13.5px; color: var(--gv-text-muted); } .auth-secondary-links a { color: var(--gv-text-secondary); border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .auth-secondary-links a:hover { color: var(--gv-text-primary); border-color: var(--gv-glass-border); } .auth-secondary-links .divider { color: var(--gv-glass-border-strong); } /* ---------------------------------------------------------------------- * * Écrans secondaires (login par ID / staff) — même charte, panneau simple * ---------------------------------------------------------------------- */ .simple-form { width: 100%; display: flex; flex-direction: column; gap: 16px; text-align: left; } .simple-form label { font-size: 13px; font-weight: 600; color: var(--gv-text-secondary); margin-bottom: 6px; display: block; } .simple-form input { width: 100%; padding: 12px 14px; border-radius: var(--gv-radius-sm); border: 1px solid var(--gv-glass-border); background: rgba(255, 255, 255, 0.05); color: var(--gv-text-primary); font-size: 14.5px; } .simple-form input:focus { outline: none; border-color: var(--gv-glass-border-strong); background: rgba(255, 255, 255, 0.08); } .simple-form input::placeholder { color: var(--gv-text-muted); } .form-notice { font-size: 13px; line-height: 1.5; color: var(--gv-text-secondary); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--gv-glass-border); border-radius: var(--gv-radius-sm); padding: 12px 14px; margin-bottom: 20px; } /* ---------------------------------------------------------------------- * * Panel admin * ---------------------------------------------------------------------- */ .admin-panel-wrap { max-width: 660px; } .admin-table-panel { text-align: left; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gv-glass-border); } .admin-table th { color: var(--gv-text-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-logo-cell { display: flex; align-items: center; gap: 10px; } .admin-logo-preview { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: var(--gv-navy-900); border: 1px solid var(--gv-glass-border); flex-shrink: 0; } .admin-logo-preview-empty { display: flex; align-items: center; justify-content: center; font-size: 16px; } .admin-logo-form { display: flex; align-items: center; gap: 6px; } .admin-logo-form input[type="file"] { max-width: 110px; font-size: 11px; color: var(--gv-text-muted); } .admin-logo-submit { padding: 6px 10px; font-size: 12px; white-space: nowrap; } /* ---------------------------------------------------------------------- * * Responsive * ---------------------------------------------------------------------- */ @media (max-width: 560px) { .auth-shell { padding: 40px 18px 32px; } .org-select-grid { grid-template-columns: 1fr; } }