/* Encoche de la barre de statut. Formule reprise telle quelle de la supervision (son index.lp) : c'est la condition pour que le menu tombe au même endroit des deux côtés. Capacitor pose --safe-area-inset-* sur (0px quand il a déjà décalé le WebView lui-même) ; env() prend le relais en PWA et dans Safari iOS, et vaut 0px partout ailleurs, navigateur de bureau compris. Sans ce repli, le portail ignorait l'encoche là où la supervision la respectait. */ :root { --fcs-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); } /* Surlignage de toucher d'Android. Par défaut le WebView peint un aplat bleu sur la BOÎTE de l'élément touché, angles droits compris et border-radius ignoré : sur le bouton du menu, rond de 40px, un carré apparaissait donc autour de l'icône au moindre appui. Mesuré sur appareil le 2026-08-27, ce carré faisait 120px physiques, soit exactement les 40px CSS du bouton. Retiré globalement et pas seulement sur ce bouton : le même aplat sortait sur « Se connecter », « Créer un compte » et sur tous les liens. Les boutons gardent leur propre retour au toucher, le :active qui les rétrécit de 2 %. */ :root { -webkit-tap-highlight-color: transparent; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: #000; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-y: auto; } .container { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 360px; margin: auto; padding: 32px 24px; animation: fadeUp 0.5s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .logo img { max-width: 140px; height: auto; display: block; } /* ── Écran d'accueil calé sur le splash natif ───────────────────────────── Objectif : que le logo ne bouge pas d'un pixel au moment où le splash se retire, au premier lancement. Le splash est peint sur la fenêtre entière, son logo est donc centré sur l'écran physique. La page, elle, vit dans un WebView décalé sous la barre de statut : un centrage à 50 % du viewport tombe une demi-barre trop bas. D'où --fcs-status-bar, publié par FcsWindowInsets.java. Les deux décalages fins sont mesurés sur le rendu natif, pas estimés : le sigle est 3,03 px à gauche du centre de son propre cadre, et son cercle de cadrage le place à 4,48 px à droite et 1,86 px au-dessus du centre écran. Somme : 7,5 px à droite et 1,9 px en haut. Pas d'animation ici, volontairement. Une entrée en fondu ou en glissement trahirait la bascule que l'on cherche justement à rendre invisible. POUR REVENIR EN ARRIÈRE : retirer « home-aligned » de la classe dans templates/app/security/home.html.twig. Rien d'autre, ce bloc redevient sans effet. */ .container.home-aligned { position: fixed; left: 50%; top: calc(50% - var(--fcs-status-bar, 0px) / 2 - 1.9px); margin: 0; padding-top: 0; transform: translateX(-50%); animation: none; } .container.home-aligned .logo { margin-top: -69px; transform: translateX(7.5px); } .container.home-aligned .logo img { width: 138px; max-width: none; } /* ── Apparition des actions de l'accueil (2026-08-25) ───────────────────── Le logo, lui, ne doit JAMAIS être animé : il prolonge celui du splash natif au pixel près, le moindre mouvement casserait le raccord construit dans l'app. Les boutons n'existent pas sur le splash : les faire arriver en fondu adoucit le seul changement encore visible au lancement. La courbe est un ease-out prononcé : l'essentiel du trajet se joue au début, la fin est imperceptible. Le léger délai laisse la page se poser avant que quoi que ce soit ne bouge. */ .container.home-aligned .home-actions { opacity: 0; transform: translateY(10px); animation: fcs-actions-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards; } @keyframes fcs-actions-in { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .container.home-aligned .home-actions { animation-duration: 0.01s; animation-delay: 0s; } } /* ── Formulaire login ── */ .login-form { width: 100%; display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } label { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #555; } input[type="text"], input[type="email"], input[type="password"] { /* Aucun habillage natif : sur iOS le champ recoit sinon une ombre interne et ses propres coins arrondis, imposes par le systeme. */ -webkit-appearance: none; appearance: none; width: 100%; background: #111; border: 1px solid #222; border-radius: 6px; padding: 12px 14px; color: #e8e8e8; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: #444; box-shadow: 0 0 0 3px rgba(255,255,255,0.04); } /* ── Remplissage automatique : reprendre la main sur le navigateur ───────── Chrome, Safari et Edge repeignent un champ rempli automatiquement en bleu tres clair et forcent la couleur du texte, par des declarations internes qu'aucune regle ordinaire ne surcharge. Deux leviers passent quand meme : une ombre interne assez large pour recouvrir tout le fond, et -webkit-text-fill-color, qui l'emporte sur color. La transition de 9999s repousse indefiniment la couleur de fond animee que le navigateur repose apres coup. Les selecteurs sont volontairement separes en plusieurs regles : un navigateur qui ne connait pas :autofill jetterait TOUTE une liste ou il apparait, y compris la partie -webkit- qu'il comprend. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active { -webkit-text-fill-color: #e8e8e8; caret-color: #e8e8e8; -webkit-box-shadow: 0 0 0 1000px #111 inset; box-shadow: 0 0 0 1000px #111 inset; border-color: #222; transition: background-color 9999s ease-in-out 0s; } /* Le focus garde son liseré : l'ombre de recouvrement passe en premier, celle du focus par-dessus. */ input:-webkit-autofill:focus { -webkit-text-fill-color: #e8e8e8; caret-color: #e8e8e8; -webkit-box-shadow: 0 0 0 1000px #111 inset, 0 0 0 3px rgba(255,255,255,0.04); box-shadow: 0 0 0 1000px #111 inset, 0 0 0 3px rgba(255,255,255,0.04); border-color: #444; transition: background-color 9999s ease-in-out 0s; } /* Forme standard, et Firefox, qui pose en plus un filtre colore sur le champ. */ input:autofill { filter: none; -webkit-text-fill-color: #e8e8e8; caret-color: #e8e8e8; box-shadow: 0 0 0 1000px #111 inset; border-color: #222; transition: background-color 9999s ease-in-out 0s; } input:autofill:focus { box-shadow: 0 0 0 1000px #111 inset, 0 0 0 3px rgba(255,255,255,0.04); border-color: #444; } input::placeholder { color: #333; } button[type="submit"] { margin-top: 6px; width: 100%; padding: 13px; background: #fff; color: #000; border: none; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s, transform 0.1s; } button[type="submit"]:hover { background: #e8e8e8; } button[type="submit"]:active { transform: scale(0.98); } /* ── Messages d'erreur Symfony ── */ .alert-error { width: 100%; background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.3); border-radius: 6px; padding: 16px 18px; color: #f87171; font-size: 13px; line-height: 1.5; text-align: center; white-space: pre-line; } /* ── Sélection controller ── */ .select-header { display: flex; flex-direction: column; align-items: center; gap: 16px; } .select-label { color: #555; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .controller-list { width: 100%; display: flex; flex-direction: column; gap: 10px; } .controller-item { display: flex; align-items: center; justify-content: space-between; background: #111; border: 1px solid #222; border-radius: 6px; padding: 16px 18px; color: #e8e8e8; text-decoration: none; font-size: 14px; transition: border-color 0.2s, background 0.2s; } .controller-item:hover { background: #181818; border-color: #444; } .controller-arrow { color: #444; font-size: 16px; } .controller-item.is-busy { opacity: 0.55; pointer-events: none; } .controller-item.is-busy .controller-arrow { animation: controller-arrow-pulse 0.9s ease-in-out infinite; } @keyframes controller-arrow-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* Ouverture directe d'un projet : la liste de sélection n'est qu'un repli, pour le cas où JS est absent ou l'auto-login échoue. La classe est posée par un script en tête de page, avant le rendu, sinon la liste clignoterait. */ .fcs-auto-opening .select-header, .fcs-auto-opening .account-links, .fcs-auto-opening .account-menu, .fcs-auto-opening .controller-list { display: none; } .select-loading { display: none; color: #555; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .fcs-auto-opening .select-loading { display: block; } /* ── Page d'accueil : logo, se connecter, créer un compte ── */ .home-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; } .btn-primary, .btn-secondary { display: block; width: 100%; padding: 13px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.1s; } /* Qualifiées par balise (a./button.) pour egaler la specificite de button[type="submit"] et gagner par l'ordre de declaration : sans ça, un