/* ============================================================================ OpenLumena — couche de finition des pages applicatives (auth.html · dashboard.html · admin/index.html) Chargee APRES styles.css / auth.css / admin.css. Elle ne redefinit AUCUNE mise en page : elle apporte au portail, a l'espace et a l'admin la meme finition que la page d'accueil refondue. Aucun crochet JS n'est touche — 82 identifiants sont cables sur ces trois pages. ========================================================================= */ :root{ --serif:"Instrument Serif","Times New Roman",Times,serif; --border-amber:rgba(245,159,74,.42); --glow:rgba(245,159,74,.34); --panel-flat:#0c121a; --panel-flat-2:#0e151e; } /* ── Atmosphere : grain + halo, poses sur pour ne rien gener ────── `admin-body` est en overflow:hidden ; un pseudo-element sur reste fixe et hors flux, donc il ne casse aucune de leurs mises en page. */ html::before{ content:"";position:fixed;inset:-120px;z-index:9999;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } html::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(58% 42% at 50% -6%, rgba(245,159,74,.13) 0%, transparent 62%), radial-gradient(46% 38% at 90% 10%, rgba(110,168,255,.06) 0%, transparent 70%); } body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ── Typographie : meme echelle et meme accent serif que l'accueil ────── */ h1,h2,h3{letter-spacing:-.035em;text-wrap:balance} h1{font-weight:500} h2{font-weight:500} h1 em,h2 em,.serif{ font-family:var(--serif);font-style:italic;font-weight:400; font-size:1.06em;letter-spacing:-.03em;color:var(--accent); } /* Le sur-titre reprend le filet ambre de l'accueil. */ .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--accent); } .eyebrow::before{ content:"";width:26px;height:1px;background:var(--border-amber);flex:none; } /* Les puces de preuve n'ont pas besoin du filet. */ .auth-proof .eyebrow::before{display:none} /* La marque : « Open » blanc, « Lumena » ambre — comme sur l'accueil. */ .brand{letter-spacing:-.03em} .brand .suffix{color:var(--accent);font-weight:400} /* ── Accessibilite : un etat de focus visible partout ─────────────────── */ :focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:4px; } /* ── Boutons : l'etat de focus manquait, et le survol ne portait que sur :hover — la navigation au clavier ne montrait rien. ──────────────── */ .btn:focus-visible{ border-color:var(--line-strong); transform:translateY(-1px); } .btn.primary:focus-visible{border-color:transparent} .link-btn{ border-bottom:1px solid transparent; transition:color .26s ease,border-color .26s ease; } .link-btn:hover,.link-btn:focus-visible{color:var(--text);border-color:var(--border-amber)} /* ── Champs de saisie : meme anneau ambre que le formulaire de contact ── */ input[type="text"],input[type="email"],input[type="password"], input[type="search"],input[type="tel"],select,textarea{ transition:border-color .26s ease,box-shadow .26s ease,background .26s ease; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--border-amber); box-shadow:0 0 0 3px rgba(245,159,74,.10); } input::placeholder,textarea::placeholder{color:#5d6b7a} /* ── Onglets (portail et espace) : l'actif prend l'ambre plein ───────── */ .auth-tab,.workspace-tab{ transition:color .2s ease,background .2s ease,border-color .2s ease; } .auth-tab:hover,.workspace-tab:hover{color:var(--text)} .auth-tab.active,.workspace-tab.active{color:var(--accent)} /* ── Panneaux : bord net et survol discret, comme les cartes de l'accueil */ .glass-panel,.user-card,.profile-panel,.stat-card,.auth-card{ transition:border-color .3s ease,background .3s ease; } .glass-panel:hover,.stat-card:hover{border-color:rgba(255,255,255,.16)} /* ── Tables de l'admin : lisibilite et chiffres alignes ──────────────── */ table{border-collapse:collapse;width:100%} th{ font-family:var(--mono);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left; } td{font-size:14px;line-height:1.5} td:has(+ td),td{font-variant-numeric:tabular-nums} tbody tr{transition:background .24s ease} tbody tr:hover{background:rgba(255,255,255,.02)} /* ── Barre laterale de l'admin ───────────────────────────────────────── */ .nav-item{ border-left:2px solid transparent; transition:color .24s ease,background .24s ease,border-color .24s ease; } .nav-item:hover{color:var(--text)} .nav-item.active{border-left-color:var(--accent);color:var(--accent)} /* ── Le contenu passe au-dessus du halo ──────────────────────────────── */ body > *:not(.motion-bg){position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none !important;animation:none !important} } /* Bascule de langue flottante — les pages applicatives n'ont pas d'en-tête commune où l'insérer sans risquer de casser leur mise en page. */ .lang-float{ position:fixed;top:14px;right:14px;z-index:200; min-height:32px;padding:0 11px; border:1px solid var(--line);border-radius:6px; background:rgba(10,15,20,.82);color:var(--muted);cursor:pointer; font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:color .26s ease,border-color .26s ease,background .26s ease; } .lang-float:hover,.lang-float:focus-visible{ color:var(--accent);border-color:var(--border-amber);background:rgba(245,159,74,.10); } @media (max-width:900px){ .lang-float{top:10px;right:10px} }