@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --ui-font: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-bg: #f8f9fc;
    --ui-surface: rgba(255, 255, 255, .94);
    --ui-surface-solid: #ffffff;
    --ui-surface-soft: rgba(250, 251, 254, .94);
    --ui-text: #171b3f;
    --ui-muted: #69708a;
    --ui-border: rgba(99, 102, 241, .15);
    --ui-primary: #6d5dfc;
    --ui-primary-dark: #4338ca;
    --ui-primary-soft: #efefff;
    --ui-secondary: #06b6d4;
    --ui-secondary-soft: #e9fbff;
    --ui-accent: #ec4899;
    --ui-blue: #4f46e5;
    --ui-blue-soft: #eef2ff;
    --ui-success: #0ea875;
    --ui-warning: #d97706;
    --ui-danger: #dc3545;
    --ui-glass: rgba(255, 255, 255, .9);
    --ui-glass-strong: rgba(255, 255, 255, .97);
    --ui-glass-border: rgba(255, 255, 255, .96);
    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 24px;
    --ui-shadow-sm: 0 8px 26px rgba(49, 46, 129, .075), inset 0 1px 0 rgba(255, 255, 255, .82);
    --ui-shadow: 0 18px 48px rgba(49, 46, 129, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
    --ui-shadow-lg: 0 30px 90px rgba(30, 27, 75, .22), inset 0 1px 0 rgba(255, 255, 255, .82);
}

*, *::before, *::after { box-sizing: border-box; }
.min-w-0 { min-width: 0 !important; }

html {
    color-scheme: light;
    scroll-behavior: smooth;
    background: var(--ui-bg);
}

body {
    font-family: var(--ui-font) !important;
    color: var(--ui-text);
    background:
        radial-gradient(circle at 4% -8%, rgba(109, 93, 252, .065), transparent 31rem),
        radial-gradient(circle at 98% 4%, rgba(6, 182, 212, .055), transparent 32rem),
        linear-gradient(145deg, #ffffff 0%, #f8f9fc 54%, #f7fafc 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { color: #fff; background: var(--ui-primary); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ui-text);
    font-weight: 750;
    letter-spacing: -.025em;
}

p, li { line-height: 1.65; }
a { text-underline-offset: 3px; }
a:not(.btn):not(.nav-link):not(.bottom-nav-item) { transition: color .18s ease, opacity .18s ease; }

:focus-visible {
    outline: 3px solid rgba(109, 93, 252, .3);
    outline-offset: 2px;
}

/* Surfaces et cartes */
.card,
.glass-card,
.manual-section,
.video-card,
.marketeur-card,
.guillain-card,
.seth-card,
.stat-box,
.metric {
    border: 1px solid var(--ui-glass-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(255, 255, 255, .91)) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.card {
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: rgba(109, 93, 252, .28) !important; box-shadow: var(--ui-shadow) !important; transform: translateY(-2px); }
.card-header {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--ui-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,247,255,.58)) !important;
    color: var(--ui-text) !important;
    font-weight: 750;
}
.card-header i { color: var(--ui-primary); }
.card-body { padding: 1.15rem; }

/* Boutons cohérents et tactiles */
.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .58rem .95rem;
    border-radius: 12px !important;
    font-family: var(--ui-font);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: none;
    transition: transform .17s ease, box-shadow .17s ease, background-color .17s ease, border-color .17s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-sm { min-height: 34px; padding: .38rem .68rem; border-radius: 10px !important; font-size: .78rem; }
.btn-lg { min-height: 50px; padding: .75rem 1.15rem; border-radius: 14px !important; }
.btn-primary,
.btn-seth {
    border-color: var(--ui-primary) !important;
    background: linear-gradient(135deg, #4338ca 0%, #6d5dfc 55%, #8b5cf6 100%) !important;
    color: #fff !important;
    box-shadow: 0 9px 24px rgba(79, 70, 229, .28), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:hover,
.btn-seth:hover { border-color: #4338ca !important; box-shadow: 0 13px 30px rgba(79, 70, 229, .34) !important; }
.btn-success {
    border-color: var(--ui-success) !important;
    color: #fff !important;
    background: linear-gradient(135deg, #07845d, #10b981) !important;
    box-shadow: 0 9px 22px rgba(14, 168, 117, .24) !important;
}
.btn-success:hover { border-color: #07845d !important; box-shadow: 0 12px 28px rgba(14, 168, 117, .3) !important; }
.btn-outline-primary { color: var(--ui-primary-dark) !important; border-color: rgba(109, 93, 252, .4) !important; background: rgba(255,255,255,.5); }
.btn-outline-primary:hover { color: #fff !important; background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
.btn-outline-secondary { color: #515a75; border-color: rgba(105,112,138,.3); background: rgba(255,255,255,.58); }

/* Formulaires */
.form-label {
    margin-bottom: .42rem;
    color: #344054;
    font-size: .78rem;
    font-weight: 700 !important;
    letter-spacing: .005em;
}
.form-control,
.form-select,
.input-group-text {
    min-height: 46px;
    border: 1px solid rgba(99, 102, 241, .18) !important;
    border-radius: 12px !important;
    color: var(--ui-text);
    background-color: rgba(255, 255, 255, .8) !important;
    font-family: var(--ui-font);
    font-size: .9rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 3px 10px rgba(49,46,129,.035) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control::placeholder { color: #98a2b3; }
.form-control:hover,
.form-select:hover { border-color: rgba(109, 93, 252, .42) !important; }
.form-control:focus,
.form-select:focus {
    border-color: var(--ui-primary) !important;
    background-color: rgba(255,255,255,.94) !important;
    box-shadow: 0 0 0 4px rgba(109, 93, 252, .13), 0 8px 20px rgba(79,70,229,.08) !important;
}
textarea.form-control { min-height: 110px; resize: vertical; }
.form-check-input { width: 1.12rem; height: 1.12rem; border-color: #aebdca; }
.form-check-input:checked { border-color: var(--ui-primary); background-color: var(--ui-primary); }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-radius: 12px 0 0 12px !important; }
.input-group > .btn:last-child { border-radius: 0 12px 12px 0 !important; }
.input-icon i { color: var(--ui-primary) !important; }

/* Messages */
.alert {
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius) !important;
    padding: .86rem 1rem;
    font-size: .88rem;
    box-shadow: none;
}
.alert-success { color: #087553; border-color: rgba(14,168,117,.24) !important; background: rgba(236,253,245,.82) !important; }
.alert-info { color: #3730a3; border-color: rgba(109,93,252,.2) !important; background: rgba(238,242,255,.82) !important; }
.alert-warning { color: #83550a; border-color: #f5ddb0 !important; background: #fff9ec !important; }
.alert-danger { color: #9f2d3a; border-color: #f2c7cd !important; background: #fff3f5 !important; }
.badge { border-radius: 999px !important; padding: .38em .68em; font-weight: 700; letter-spacing: .005em; }

/* Navigation secondaire */
.nav-tabs,
.nav-pills {
    gap: .25rem;
    padding: .3rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: 15px !important;
    background: rgba(232, 233, 255, .64) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link,
.nav-pills .nav-link {
    min-height: 40px;
    border: 0 !important;
    border-radius: 11px !important;
    color: var(--ui-muted) !important;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--ui-primary-dark) !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 5px 14px rgba(79,70,229,.12) !important;
}

/* Tableaux */
.table-responsive {
    border-radius: var(--ui-radius);
    scrollbar-width: thin;
    scrollbar-color: #c7d2df transparent;
}
.table { margin-bottom: 0; color: var(--ui-text); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .78rem .85rem; border-bottom-color: #edf0f4; }
.table thead th {
    color: #526071;
    background: rgba(239, 240, 255, .72) !important;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table tbody tr { transition: background-color .16s ease; }
.table-hover tbody tr:hover > * { background: rgba(238, 242, 255, .78) !important; }

/* Modales */
.modal-backdrop.show { opacity: .46; background: #171b3f; backdrop-filter: blur(5px); }
.modal-content {
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,246,255,.86));
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    backdrop-filter: blur(28px) saturate(145%);
}
.modal-header {
    min-height: 64px;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.modal-title { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.modal-body { padding: 1.15rem; }
.modal-footer { padding: .75rem 1rem; border-top: 1px solid var(--ui-border) !important; background: rgba(245,246,255,.7) !important; }

/* En-têtes des espaces connectés */
.app-header,
.app-page-header,
.caisse-header,
.liste-eleves-header,
.presence-header,
.profil-header,
.parent-header,
.seth-header,
.gestion-classe-header-whatsapp {
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid rgba(79, 70, 229, .1) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08), inset 0 -1px 0 rgba(255,255,255,.9) !important;
}
.app-header,
.profil-header,
.parent-header,
.seth-header { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }
.app-header h1, .app-header h2,
.app-page-header h1, .app-page-header h2,
.caisse-header h1, .liste-eleves-header h1,
.presence-header h1, .profil-header h1,
.parent-header h1, .gestion-classe-header-whatsapp h1 { color: var(--ui-text) !important; }
.app-header .brand-text,
.parent-header .navbar-brand,
.seth-header .navbar-brand { color: var(--ui-text) !important; }
.app-header .school-logo-wrap .logo-placeholder,
.app-header .back-btn-wrap i,
.profil-header .header-back-btn i,
.parent-school-logo .logo-placeholder { color: var(--ui-primary-dark) !important; }

.app-header,
.app-page-header,
.caisse-header,
.liste-eleves-header,
.presence-header,
.profil-header,
.parent-header,
.seth-header,
.gestion-classe-header-whatsapp {
    padding-top: max(.56rem, env(safe-area-inset-top)) !important;
    padding-bottom: .56rem !important;
}
.app-header .school-logo-wrap,
.app-header .back-btn-wrap,
.profil-header .header-back-btn,
.parent-school-logo,
.header-back,
.back-btn {
    border: 1px solid rgba(109,93,252,.14) !important;
    color: var(--ui-primary-dark) !important;
    background: #f5f4ff !important;
    box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(79,70,229,.08) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.app-header .header-badge,
.app-header .year-btn,
.parent-header .badge {
    border: 1px solid rgba(109,93,252,.14) !important;
    color: var(--ui-primary-dark) !important;
    background: #f7f7ff !important;
    box-shadow: inset 0 1px 0 #fff !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Menu inférieur façon application */
.bottom-nav {
    background: rgba(255, 255, 255, .76) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(49, 46, 129, .14), inset 0 1px 0 rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
}
.bottom-nav-inner { max-width: 560px !important; }
.bottom-nav-item { min-height: 46px !important; border-radius: 13px !important; }
.bottom-nav-item i { font-size: 1.18rem !important; }
.bottom-nav-item span { font-size: .6rem !important; font-weight: 700 !important; }
.bottom-nav-item.active { box-shadow: none !important; }

/* Pieds de page */
footer { color: var(--ui-muted); }
.app-footer {
    margin-top: 2.25rem !important;
    padding: 1.45rem !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(239,240,255,.55)) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}
.footer-logo { color: var(--ui-text) !important; }
.footer-year { color: var(--ui-muted) !important; }
.footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .72rem;
    border: 1px solid rgba(109,93,252,.13);
    border-radius: 12px;
    color: var(--ui-primary-dark) !important;
    background: rgba(255,255,255,.58);
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.footer-link:hover { transform: translateY(-1px); background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(79,70,229,.1); }

/* Page publique de connexion */
#background-video,
#particles-js { display: none !important; }
body:has(.main-container) {
    padding: clamp(.7rem, 2vw, 1.5rem) !important;
    background:
        radial-gradient(circle at 10% 6%, rgba(109, 93, 252, .1), transparent 30rem),
        radial-gradient(circle at 92% 88%, rgba(6, 182, 212, .08), transparent 30rem),
        linear-gradient(145deg, #ffffff, #f5f7fb) !important;
}
body:has(.main-container)::before { display: none !important; }
.main-container {
    min-height: min(760px, calc(100vh - 3rem));
    max-width: 1180px !important;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 34px 100px rgba(49, 46, 129, .24), inset 0 1px 0 rgba(255,255,255,.9) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
}
.image-panel { flex-basis: 43% !important; margin: .7rem; border-radius: 23px; }
.image-panel .carousel,
.image-panel .carousel-inner,
.image-panel .carousel-item { height: 100% !important; }
.image-panel .carousel-item img { width: 100%; height: 100% !important; min-height: 100% !important; object-fit: cover; }
.image-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(67,56,202,.03) 25%, rgba(23, 27, 63, .66));
}
.carousel-caption { z-index: 2; border: 1px solid rgba(255,255,255,.24); border-radius: 17px !important; background: rgba(23, 27, 63, .52) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption h4,
.carousel-caption h5,
.carousel-caption h6 { color: #fff !important; }
.pwa-install-prompt {
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(67,56,202,.94), rgba(109,93,252,.92), rgba(6,182,212,.88)) !important;
    box-shadow: 0 16px 42px rgba(49,46,129,.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}
.form-panel { flex-basis: 57% !important; padding: clamp(1.35rem, 3.3vw, 3.25rem) !important; }
.brand { padding-bottom: 1.15rem; border-bottom: 1px solid var(--ui-border); }
.brand-logo { border-radius: 18px !important; box-shadow: 0 10px 28px rgba(109, 93, 252, .28) !important; }
.brand h1 { color: var(--ui-text) !important; font-size: clamp(1.35rem, 2.4vw, 1.8rem) !important; font-weight: 800 !important; }

/* Manuel et pages d'accès ciblées */
.manual-container { max-width: 1020px !important; }
.manual-header { border-bottom: 1px solid var(--ui-border); }
.manual-section,
.video-card,
.marketeur-card { padding: clamp(1.1rem, 2.5vw, 1.55rem) !important; }
.manual-section h2,
.video-card h2,
.marketeur-card h3 { color: var(--ui-primary-dark) !important; }
.manual-header .back-link { color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; }
.video-wrapper { border-radius: 18px !important; box-shadow: var(--ui-shadow); }
.guillain-wrapper { background: transparent !important; }
.guillain-card { width: min(100%, 480px); box-shadow: var(--ui-shadow-lg) !important; }
.metric { height: 100%; padding: 1rem !important; text-align: center; }
.rank { color: var(--ui-primary) !important; letter-spacing: -.055em; }

/* Signature premium : verre, profondeur et accents lumineux */
.form-panel { background: rgba(255, 255, 255, .9) !important; }
.manual-header,
.agent-form-section,
.compte-section,
.stat-item,
.quick-actions-dock {
    border-color: rgba(15, 23, 42, .075) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(255,255,255,.93)) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
}
.stat-item:hover { box-shadow: var(--ui-shadow) !important; }
.quick-actions-dock {
    box-shadow: 0 18px 48px rgba(49,46,129,.17), inset 0 1px 0 rgba(255,255,255,.92) !important;
}
.quick-actions-heading { color: #39345f !important; border-color: rgba(109,93,252,.14) !important; }
.quick-actions-heading i { color: var(--ui-accent) !important; }
.quick-action-btn { --quick-accent: #6d5dfc !important; --quick-soft: #efefff !important; }
.quick-action-btn:nth-child(3n + 2) { --quick-accent: #0891b2 !important; --quick-soft: #e9fbff !important; }
.quick-action-btn:nth-child(3n) { --quick-accent: #db2777 !important; --quick-soft: #fdf2f8 !important; }
.quick-form-modal .modal-header,
.guillain-card .card-header {
    color: #fff !important;
    background: linear-gradient(120deg, #25205c 0%, #5547df 52%, #8b5cf6 100%) !important;
}
.quick-form-modal .modal-body { background: linear-gradient(160deg, rgba(248,247,255,.94), rgba(238,249,255,.88)) !important; }
.bottom-nav-item.nav-home { color: #6d5dfc !important; }
.bottom-nav-item.nav-home:hover,
.bottom-nav-item.nav-home.active { color: #4338ca !important; }
.bottom-nav-item.nav-home.active { background: rgba(109,93,252,.13) !important; }
.bottom-nav-item.nav-gestion { color: #0891b2 !important; }
.bottom-nav-item.nav-gestion:hover,
.bottom-nav-item.nav-gestion.active { color: #0e7490 !important; }
.bottom-nav-item.nav-gestion.active { background: rgba(6,182,212,.13) !important; }
.bottom-nav-item.nav-config { color: #db2777 !important; }
.bottom-nav-item.nav-config:hover,
.bottom-nav-item.nav-config.active { color: #be185d !important; }
.bottom-nav-item.nav-config.active { background: rgba(236,72,153,.12) !important; }
.bottom-nav-item.nav-profil.active { background: rgba(245,158,11,.12) !important; }
.pagination .page-link,
.dropdown-menu,
.list-group-item,
.accordion-item {
    background-color: rgba(255,255,255,.76);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Détails d'ergonomie */
.dropdown-menu { padding: .45rem; border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow); }
.dropdown-item { border-radius: 9px; padding: .55rem .7rem; font-size: .86rem; }
.list-group-item { padding: .8rem .9rem; border-color: var(--ui-border); }
.accordion-item { border-color: var(--ui-border); overflow: hidden; }
.accordion-button { font-weight: 700; }
.pagination .page-link { color: var(--ui-primary); border-color: var(--ui-border); }
.pagination .active > .page-link { border-color: var(--ui-primary); background: var(--ui-primary); }
hr { border-color: var(--ui-border); opacity: 1; }

@media (max-width: 991.98px) {
    body:has(.main-container) { align-items: flex-start !important; }
    .main-container { min-height: auto; max-width: 720px !important; display: block !important; border-radius: 24px !important; }
    .form-panel { width: 100% !important; min-width: 0 !important; max-height: none !important; flex: 1 1 100% !important; }
}

@media (max-width: 767.98px) {
    body { font-size: .94rem; }
    .container, .container-fluid { --bs-gutter-x: 1.15rem; }
    .card, .glass-card, .manual-section, .video-card, .marketeur-card { border-radius: 18px !important; }
    .card-body { padding: 1rem; }
    .modal-dialog { margin: .55rem; }
    .modal-content { border-radius: 20px !important; }
    .table > :not(caption) > * > * { padding: .68rem .7rem; }
    .manual-header { align-items: flex-start !important; gap: 1rem; }
    .app-header,
    .app-page-header,
    .caisse-header,
    .liste-eleves-header,
    .presence-header,
    .profil-header,
    .parent-header,
    .seth-header,
    .gestion-classe-header-whatsapp {
        min-height: 62px;
        padding: max(.5rem, env(safe-area-inset-top)) .7rem .5rem !important;
        border-radius: 0 !important;
    }
    .app-header h1, .app-header h2, .app-header .brand-text,
    .app-page-header h1, .app-page-header h2,
    .caisse-header h1, .liste-eleves-header h1,
    .presence-header h1, .profil-header h1,
    .parent-header .navbar-brand,
    .gestion-classe-header-whatsapp h1 {
        min-width: 0;
        max-width: min(58vw, 18rem);
        overflow: hidden;
        font-size: .98rem !important;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .app-header .school-logo-wrap,
    .app-header .back-btn-wrap,
    .profil-header .header-back-btn,
    .parent-school-logo {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px;
        border-radius: 13px !important;
    }
    .app-header .header-badge,
    .app-header .year-btn,
    .parent-header .badge { min-height: 38px; padding: .38rem .52rem !important; font-size: .72rem !important; }
    .app-footer { margin-inline: .25rem !important; padding: 1rem !important; border-radius: 20px !important; }
    .footer-content { flex-direction: column !important; gap: .75rem !important; text-align: center; }
    .footer-brand { justify-content: center; flex-wrap: wrap; gap: .4rem !important; }
    .footer-links { width: 100%; justify-content: center; gap: .5rem !important; }
    .footer-link { flex: 1 1 8rem; justify-content: center; }
}

@media (max-width: 575.98px) {
    body:has(.main-container) {
        padding: .45rem !important;
        background:
            radial-gradient(circle at 5% 0%, rgba(109,93,252,.08), transparent 18rem),
            radial-gradient(circle at 100% 85%, rgba(6,182,212,.06), transparent 20rem),
            linear-gradient(155deg, #ffffff, #f6f8fb) !important;
    }
    .main-container {
        min-height: calc(100dvh - .9rem);
        border: 1px solid rgba(255,255,255,.8) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 50px rgba(49,46,129,.16) !important;
    }
    .form-panel { padding: 1.1rem !important; }
    .brand { align-items: flex-start !important; margin-bottom: 1.15rem !important; }
    .brand-logo { width: 52px !important; height: 52px !important; }
    .nav-tabs .nav-link, .nav-pills .nav-link { padding: .55rem .62rem; font-size: .74rem; }
    .btn { min-height: 43px; }
    .modal-header { min-height: 58px; }
    .input-group > .btn { width: auto !important; margin-bottom: 0 !important; }
    .bottom-nav { width: 100vw !important; max-width: 100vw !important; overflow: hidden; }
    .bottom-nav-inner { width: 100% !important; max-width: 100% !important; }
    .bottom-nav-item { flex: 1 1 20% !important; min-width: 0 !important; padding-inline: .15rem !important; }
    .bottom-nav { padding: .28rem .35rem max(.28rem, env(safe-area-inset-bottom)) !important; border-radius: 18px 18px 0 0 !important; }
    .bottom-nav-item { min-height: 44px !important; border-radius: 12px !important; }
    .bottom-nav-item i { margin-bottom: .08rem !important; font-size: 1.08rem !important; }
    .bottom-nav-item span { max-width: 100%; overflow: hidden; font-size: .56rem !important; text-overflow: ellipsis; white-space: nowrap; }
    .app-header .brand-text { font-size: .96rem !important; }
    .app-header .school-logo-wrap { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
    .app-header .year-btn { padding: .42rem .55rem !important; }
    body.agent-with-bottom-nav:has(.quick-actions-dock) .modal.show .modal-dialog {
        margin: .45rem .45rem 7.35rem !important;
    }
    body.agent-with-bottom-nav:has(.quick-actions-dock) .modal.show .modal-content {
        max-height: calc(100vh - 8.25rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}