@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');
:root {
    --bleu-marine: #1E3A5F;
    --bleu-fonce: #152C4A;
    --bleu-clair: #2A4F7A;
    --rouge: #0665FE;
    --rouge-hover: #C8001A;
    --surface-bg: #FFFFFF;
    --gris-moyen: #E5E7EB;
    --gris-texte: #6B7280;
    --main-padding: 2.4rem;
    --portal-gap: 1.85rem;
    --widget-gap: 1.85rem;
    --card-padding: 1.8rem;
    --section-padding: 2.25rem;
    --control-y: 0.75rem;
    --control-x: 0.95rem;
    --header-height: 72px;
    --hero-title-size: 2.4rem;
    --hero-text-size: 1.08rem;
    --welcome-title-size: 1.95rem;
    --welcome-text-size: 1.05rem;
    --card-title-size: 1.12rem;
    --card-text-size: 0.9rem;
    --clock-scale-base: 1.08;
    --main-max-width: 1440px;
    --button-radius: 10px;
    --widget-gap: 24px;
    --portal-gap: 24px;
    --card-min-width: 320px;
    --surface-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --surface-shadow-hover: 0 18px 35px rgba(15, 23, 42, 0.12);
    --surface-hover-bg: #FFFFFF;
    --surface-border-hover: rgba(30, 58, 95, 0.22);
}
.header { background: #75B1FF; }
.header { background: rgba(117, 177, 255, 0.88); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10); border-bottom: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(16px) saturate(140%); }
body { background: #F5F5F5; }
.app-card:hover { box-shadow: 0 0 20px #1E3A5F40, 0 0 20px #0665FE40, 0 0 10px #1E3A5F60, 0 0 30px #1E3A5F30, 0 12px 35px rgba(0,0,0,0.15); border-color: #1E3A5F80; border-color: #1E3A5F; transform: translateY(-6px); }
@keyframes loginGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.login-visual { background: linear-gradient(-45deg, #1E3A5F, #0665FE, #1E3A5F, var(--bleu-clair)); background-size: 400% 400%; animation: loginGradient 8s ease infinite; }