/* ============================================================================ Thème « picot.eu » pour le portail Authelia — v2 (30/09/2026) Injecté par NPMplus (sub_filter) sur l'hôte auth.picot.eu — aucun fichier d'Authelia n'est touché. Palette reprise de la landing page : #0a0e12 fond · #0f151a panneau · #4ff0c1 mint · #9ff5dd mint clair #e8eef2 encre · #1e2c33 bordures Le portail est du Tailwind v4 piloté par variables CSS : redéfinir les jetons restyle tout (boutons, champs, libellés, séparateurs, focus). v2 : carte élargie + wordmark pleine largeur (il était bridé à 220 px), et ordre d'empilement aligné sur la landing — le décor de fond vit sous un canvas de particules servi à part (/picot-fx.js), pas seulement sous des pseudo-éléments CSS. v2.1 : titre d'étape « Se connecter » masqué (redondant avec le logo et avec le bouton) et fondu des traînées raccourci côté /picot-fx.js. v2.5 : fond animé RETIRÉ sur demande de Guips (« retire les éléments qui bougent en fond, c'est trop compliqué ») — plus de canvas de particules (donc plus de /picot-fx.js à injecter), plus de dérive des halos ni de grille qui défile. Décor strictement statique. ========================================================================== */ /* 1. Jetons de thème -------------------------------------------------------- */ /* body[data-theme] : spécificité supérieure à [data-theme=dark], donc gagnant quel que soit l'ordre des feuilles (l'appli peut réinjecter des styles). */ body[data-theme], body[data-theme=dark], body[data-theme=oled], body[data-theme=grey] { --background: #0a0e12; --foreground: #e8eef2; --card: #0f151a; --card-foreground: #e8eef2; --popover: #0f151a; --popover-foreground: #e8eef2; --primary: #4ff0c1; --primary-foreground: #06120d; --secondary: #9ff5dd; --secondary-foreground: #06120d; --muted: #131b21; --muted-foreground: #9db3ba; --accent: #16232a; --accent-foreground: #e8eef2; --border: #1e2c33; --input: #1e2c33; --ring: #4ff0c1; --divider: rgba(232, 238, 242, .2); --custom-loading-bar: #4ff0c1; --radius: .75rem; color-scheme: dark; /* même pile de polices que la landing (aucune police externe : CSP-safe) */ --default-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: var(--default-font-family); /* le halo mint vient des halos animés de la landing (section 10) */ background-color: var(--background); } /* 2. La carte : Authelia pose `mx-auto w-full px-8 max-w-[444px]` ; on l'élargit pour que le wordmark respire (classe doublée d'un sélecteur d'élément : spécificité (0,1,1), devant la feuille de l'appli). ----------- */ div.max-w-\[444px\] { max-width: 560px; } /* 3. Logo ------------------------------------------------------------------ */ /* Authelia le bride à 64 px de large (classe w-16) : on lui rend sa place — pleine largeur de la carte, comme le wordmark de la landing (`width:min(78vw,640px)`), avec le même halo pulsé de 9 s. */ img.w-16 { width: 100%; height: auto; animation: picot-halo 9s ease-in-out infinite; } @keyframes picot-halo { 0%, 100% { filter: drop-shadow(0 0 16px rgba(79, 240, 193, .10)); } 50% { filter: drop-shadow(0 0 30px rgba(79, 240, 193, .26)); } } /* 4. Titre d'étape : redondant avec le logo, et « Se connecter » juste au-dessus d'un bouton « Se connecter ». Masqué sur le premier facteur seulement — sur les étapes suivantes (code à usage unique, consentement) le titre est la seule consigne affichée. */ #first-factor-stage h5 { display: none; } /* 5. Chrome du portail retiré ---------------------------------------------- */ /* Deux éléments d'habillage, sans valeur pour l'utilisateur : · « Propulsé par Authelia » — le lien de courtoisie vers authelia.com en pied de page (Apache-2.0 n'impose aucune mention dans l'interface ; c'est un remerciement, pas une obligation légale). Ciblé par son href : c'est le seul lien du portail qui pointe là, et ça ne dépend pas d'une classe. · le sélecteur de langue — un portail francophone mono-langue n'a rien à choisir ; masqué sur le bouton ET son libellé (le voisin), jamais sur le conteneur, qui peut resservir à une autre étape du portail. */ a[href^="https://www.authelia.com"] { display: none; } #language-button, #language-button ~ span { display: none; } /* 6. Le formulaire devient un vrai panneau --------------------------------- */ #form-login { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px 22px; box-shadow: 0 32px 70px -42px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(232, 238, 242, .045); } /* 7. Champs ---------------------------------------------------------------- */ input[data-slot="floating-input"] { background-color: #0c1217; border-radius: 10px; } input[data-slot="floating-input"]:focus { box-shadow: 0 0 0 3px rgba(79, 240, 193, .18); } /* 8. Boutons principaux ---------------------------------------------------- */ button[class*="bg-primary"] { letter-spacing: .045em; } button[class*="bg-primary"]:not(:disabled) { box-shadow: 0 12px 34px -16px rgba(79, 240, 193, .65); } button[class*="bg-primary"]:hover:not(:disabled) { filter: brightness(1.07); } /* 9. Détails de contraste (relevés sur la capture : séparateur et case à cocher trop sombres) ---------------------------------------------------------- */ input[type="checkbox"] { border-color: #3d525b; } input[type="checkbox"]:checked { background-color: var(--primary); border-color: var(--primary); } /* 10. Décor de fond repris de la landing ----------------------------------- L'appli ne fournit aucun conteneur pour ça : tout passe par des calques fixes, avec le MÊME ordre d'empilement que la landing — 1 html::before / ::after halos mint fixes 2 body::before grille fixe 3 body::after vignette 4 #root le contenu, remonté au-dessus Tous en pointer-events:none. Sans la remontée de #root à z-index 4, un calque fixe au-dessus avale les clics du formulaire ; et une vignette posée dans #root (::before) passerait par-dessus la carte, pas seulement autour. **Aucun élément en mouvement** (v2.5) : les halos ne dérivent plus, la grille ne défile plus, et le champ de particules en canvas a été retiré (il demandait un