/* Adaptation UI/UX 2026 — lisibilité, bento, micro-animations et accessibilité */
:root {
    /* Aliases fournis par assets/ui-tokens.css */
    --ux-bg-deep: var(--ui-bg);
    --ux-bg: #0f172a;
    --ux-surface: var(--ui-surface);
    --ux-surface-strong: var(--ui-surface-strong);
    --ux-border: rgba(226,232,240,.16);
    --ux-border-strong: rgba(125,211,252,.42);
    --ux-text: var(--ui-text);
    --ux-muted: var(--ui-soft);
    --ux-blue: var(--ui-blue);
    --ux-indigo: var(--ui-indigo);
    --ux-purple: var(--ui-purple);
    --ux-pink: var(--ui-pink);
    --ux-green: var(--ui-green);
    --ux-amber: var(--ui-warning);
    --ux-radius-xl: var(--ui-radius-xl);
    --ux-radius-2xl: var(--ui-radius-2xl);
    --ux-shadow-soft: var(--ui-shadow-soft);
    --ux-shadow-pop: var(--ui-shadow-pop);
    --ux-ease: var(--ui-ease);
}
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(56,189,248,.68) !important;
    outline-offset: 3px !important;
}
.ux-shell-bg {
    background:
        radial-gradient(circle at 10% 0%, rgba(56,189,248,.14), transparent 28rem),
        radial-gradient(circle at 95% 12%, rgba(167,139,250,.13), transparent 30rem),
        linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
}
.ux-bento {
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-2xl);
    box-shadow: var(--ux-shadow-soft);
    backdrop-filter: blur(14px);
}
.ux-card-lift { transition: transform .22s var(--ux-ease), box-shadow .22s var(--ux-ease), border-color .22s var(--ux-ease), background .22s var(--ux-ease); }
.ux-card-lift:hover { transform: translateY(-4px); box-shadow: var(--ux-shadow-pop); border-color: var(--ux-border-strong); }
.ux-human-line { position: relative; }
.ux-human-line:after {
    content: "";
    display: block;
    width: min(150px, 48%);
    height: 5px;
    margin-top: .55rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ux-blue), var(--ux-purple), var(--ux-pink));
    transform: rotate(-.6deg);
    opacity: .92;
}
.ux-kicker {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,.25);
    background: rgba(56,189,248,.11);
    color: #bae6fd;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ux-illustration { width: 96px; height: 72px; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(2,6,23,.25)); }
.ux-illustration-sm { width: 58px; height: 44px; object-fit: contain; }
.ux-soft-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 36px 36px;
}
.ux-fade-in { animation: uxFadeUp .46s var(--ux-ease) both; }
.ux-delay-1 { animation-delay: .06s; } .ux-delay-2 { animation-delay: .12s; } .ux-delay-3 { animation-delay: .18s; }
@keyframes uxFadeUp { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes uxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Portail élève */
.glass-section { border-radius: var(--ux-radius-2xl) !important; }
.portal-tool-button {
    min-height: 178px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important;
    border-color: rgba(226,232,240,.14) !important;
    box-shadow: 0 18px 50px rgba(2,6,23,.22);
}
.portal-tool-button::before {
    content: ""; position: absolute; inset: -1px;
    background: radial-gradient(circle at 82% 12%, rgba(56,189,248,.16), transparent 9rem);
    opacity: 0; transition: opacity .25s ease;
}
.portal-tool-button:hover::before { opacity: 1; }
.portal-tool-visual { margin-left: auto; opacity: .95; transform: rotate(1deg); animation: uxFloat 5.5s ease-in-out infinite; }
.portal-hero-panel {
    margin-top: -1rem;
    margin-bottom: 2rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(125,211,252,.16);
    background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(167,139,250,.07));
    color: #cbd5e1;
}
.portal-hero-panel strong { color: #f8fafc; }
.portal-count-badge { border: 1px solid rgba(255,255,255,.12); }
/* Admin portail */
.admin-stat-card, .admin-nav-item { position: relative; overflow: hidden; }
.admin-stat-card::after, .admin-nav-item::after {
    content: ""; position: absolute; width: 110px; height: 110px; border-radius: 999px;
    background: rgba(255,255,255,.055); right: -46px; top: -52px; pointer-events: none;
}
/* Communication parent */
.comm-visual-card { display: flex; gap: 1rem; align-items: flex-start; }
.comm-visual-card img { flex: 0 0 auto; }