/* Anti-flash : fondu fluide entre navigations/rechargements (filtres de liste, planning, etc.) là où le navigateur le supporte (Chromium ; ailleurs = comportement actuel). Pur CSS, sans JS. Cf. CLAUDE.md. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; } /* Garde-fou normalisation : l'attribut HTML `[hidden]` (UA stylesheet `[hidden]{display:none}`, spécificité 0,1,0) est SILENCIEUSEMENT écrasé par toute règle auteur de même spécificité posant `display:` sur la même cible — typiquement `.abs-row{display:grid}`. Les filtres d'onglets de liste anti-flash (CLAUDE.md §18) masquent les lignes via `hidden` (server-side ET app.js) → sans ce `!important`, le filtrage paraît inopérant alors que l'attribut est bien posé (bug recette v0.20.0 : /absences/, /presences/, /lots/). Règle canonique (cf. normalize.css). */ [hidden] { display: none !important; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg-app); color: var(--text-primary); margin: 0; min-height: 100vh; } /* Layout shell — keyé par classe sur (ex-conditionnel auth, CSP-clean). */ body.public-shell { display: grid; place-items: center; } /* login, reset */ body.app-shell { display: block; } /* pages app */ body.app-shell > main.card { margin: 1.5rem auto; } .card { background: var(--surface-card); padding: 2rem 2.5rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; max-width: 26rem; } h1 { margin: 0 0 1.5rem; font-size: 1.4rem; color: var(--text-heading); } label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--text-label); } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-input); border-radius: var(--radius-md); font-size: 0.95rem; outline: none; transition: border-color 0.15s; } input:focus { border-color: var(--brand-indigo-ring); box-shadow: 0 0 0 3px var(--accent-ring); } .field { margin-bottom: 1rem; } .field.has-error input { border-color: var(--danger-text-strong); } .field.has-error input:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); } .pwd-wrap { position: relative; } .pwd-wrap input { padding-right: 2.75rem; } .pwd-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; } .pwd-toggle:hover { color: var(--text-label); } .pwd-rules { background: var(--surface-inset); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 0.6rem 0.85rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--text-secondary); } .pwd-rules ul { margin: 0.25rem 0 0; padding-left: 1.1rem; } .pwd-strength { margin-top: 0.4rem; } .pwd-strength-bar { height: 4px; background: var(--border-default); border-radius: 2px; overflow: hidden; } .pwd-strength-bar > span { display: block; height: 100%; width: 0; transition: width 0.2s, background 0.2s; } .pwd-strength-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } .btn { width: 100%; padding: 0.6rem 1rem; background: var(--accent); color: white; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 500; cursor: pointer; margin-top: 0.5rem; } .btn:hover { background: var(--accent-hover); } .error-box { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; } .success-box { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; } .help-text { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } .link-row { margin-top: 1rem; text-align: center; font-size: 0.875rem; } .link-row a { color: var(--text-link); text-decoration: none; } .link-row a:hover { text-decoration: underline; } .field-errors { color: var(--danger-text-strong); font-size: 0.85rem; margin-top: 0.25rem; } /* Préco UX #20 : fil d'Ariane sur les pages internes. Affiché juste sous la topbar, au-dessus de la carte principale. Chaque page fournit ses crumbs via le block `breadcrumb`. */ .breadcrumb { max-width: 70rem; margin: 1rem auto 0; padding: 0 1.5rem; font-size: 0.82rem; color: var(--text-muted); } .breadcrumb a { color: var(--text-link); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb .bc-sep { margin: 0 0.4rem; color: var(--border-input); } .breadcrumb .bc-current { color: var(--text-primary); font-weight: 500; } /* Footer applicatif — préco gouvernance versionnement (24/05/2026). Version + mention légale, visible en bas de chaque page auth. */ .app-footer { /* Marge basse élargie : dégage la dernière ligne (dont le relevé perf en mode debug) du FAB « Signaler » fixé en bas à droite (QA v1.9.0). */ max-width: 70rem; margin: 2rem auto 4.5rem; padding: 0.75rem 1.5rem; text-align: center; font-size: 0.75rem; color: var(--text-faint); border-top: 1px solid var(--border-default); } .app-footer .build { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--text-secondary); font-family: monospace; }