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

:root {
    --ink: #07152d;
    --muted: #657994;
    --line: #cfdaea;
    --paper: #edf3f9;
    --blue: #0868bd;
    --navy: #0b3d6d;
    --mint: #178466;
    --red: #e92f42;
    --shadow: 0 24px 65px rgba(22, 51, 84, .15);
}

html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; font-family: 'Source Sans 3', sans-serif; }
img, svg { max-width: 100%; }
h1, h2, h3, .brand strong, .button, button { font-family: 'Montserrat', sans-serif; }

/* Écran de connexion inspiré du thème institutionnel fourni. */
body.login-page {
    min-height: 100vh;
    padding: 26px;
    background:
        radial-gradient(circle at 9% 15%, rgba(151, 181, 214, .2), transparent 30%),
        radial-gradient(circle at 92% 82%, rgba(232, 47, 66, .04), transparent 25%),
        #f1f5fa;
    display: grid;
    place-items: center;
}

.login-page .login-card {
    width: min(1660px, calc(100vw - 52px));
    min-height: min(930px, calc(100vh - 52px));
    display: grid;
    grid-template-columns: 57% 43%;
    overflow: hidden;
    background: #fff;
    border-radius: 34px;
    box-shadow: 0 28px 76px rgba(31, 66, 103, .17);
}

.login-page .login-intro {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 40px 52px 52px;
    color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(145deg, #0d4c82 0%, #0b3c6c 52%, #082f58 100%);
    background-size: 90px 90px, 90px 90px, auto;
}

.login-page .login-intro::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 480px;
    height: 480px;
    right: -240px;
    bottom: -300px;
    border: 1px solid rgba(106, 166, 218, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(60, 129, 188, .055), 0 0 0 110px rgba(60, 129, 188, .04);
}

.login-page .login-intro::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 590px;
    height: 170px;
    right: -110px;
    bottom: -108px;
    border: 1px solid rgba(106, 166, 218, .11);
    border-radius: 50% 50% 0 0;
}

.institution-logo {
    width: 100%;
    min-height: 224px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 76px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(4, 29, 55, .08);
}

.institution-logo img { display: block; width: min(100%, 650px); height: auto; }
.login-presentation { margin-top: 45px; }
.login-kicker, .form-kicker {
    margin: 0;
    color: #d7e8f9;
    font: 700 16px 'Montserrat', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.login-kicker { display: flex; align-items: center; gap: 17px; }
.login-kicker span { width: 34px; height: 3px; background: var(--red); border-radius: 5px; }
.login-page .login-intro h1 {
    margin: 31px 0 20px;
    color: #fff;
    font: 800 clamp(48px, 4vw, 70px)/1.08 'Montserrat', sans-serif;
    letter-spacing: -.045em;
}
.login-lead {
    max-width: 790px;
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 1.45vw, 25px);
    line-height: 1.65;
}

.feature-card {
    min-height: 116px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    color: #fff;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(190, 218, 242, .23);
    border-radius: 22px;
    backdrop-filter: blur(3px);
}
.feature-wide { margin-top: 39px; }
.feature-row { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-icon {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(210, 231, 249, .2);
    border-radius: 18px;
    background: rgba(255,255,255,.09);
}
.feature-icon svg { width: 31px; fill: none; stroke: #e5f2fd; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-card > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.feature-card strong { font-family: 'Montserrat', sans-serif; font-size: 17px; }
.feature-card small { margin-top: 7px; color: #d5e5f6; font-size: 14px; line-height: 1.4; }
.decor-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; }
.dot-one { right: 114px; top: 555px; background: var(--red); }
.dot-two { right: 68px; top: 518px; width: 10px; height: 10px; background: #15578e; }

.login-page .login-form {
    padding: 62px clamp(48px, 5vw, 80px) 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.login-form-inner { width: 100%; max-width: 535px; }
.login-page .form-kicker { color: #0762b5; font-size: 14px; }
.login-page .login-form h2 {
    margin: 23px 0 7px;
    color: #06142a;
    font: 800 clamp(28px, 2.1vw, 37px)/1.12 'Montserrat', sans-serif;
    letter-spacing: -.035em;
}
.login-page .login-form header > p:last-child { margin: 0 0 42px; color: #61738e; font-size: 16px; }
.login-page .login-form form { display: flex; flex-direction: column; gap: 27px; }
.login-page .login-form form > label { color: #07162b; font: 700 15px 'Source Sans 3', sans-serif; }
.input-wrap { position: relative; display: block; margin-top: 11px; }
.input-wrap > svg {
    position: absolute;
    z-index: 1;
    left: 20px;
    top: 50%;
    width: 22px;
    transform: translateY(-50%);
    fill: none;
    stroke: #8ba1ba;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.login-page .login-form input:not([type='checkbox']) {
    width: 100%;
    height: 67px;
    margin: 0;
    padding: 0 54px 0 61px;
    color: #11233d;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid #c7d5e7;
    border-radius: 15px;
    background: #fbfcfe;
    outline: 0;
    transition: .2s ease;
}
.login-page .login-form input:not([type='checkbox'])::placeholder { color: #9bacc3; }
.login-page .login-form input:not([type='checkbox']):focus { border-color: #2278c8; box-shadow: 0 0 0 4px rgba(24, 108, 187, .1); background: #fff; }
.login-page .login-form label > small { display: block; margin-top: 7px; color: #7589a4; font-size: 12px; font-weight: 400; }
.password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 17px;
    width: 36px;
    height: 36px;
    padding: 7px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
}
.password-toggle svg { width: 22px; fill: none; stroke: #8198b2; stroke-width: 1.7; }
.login-options { display: flex; align-items: center; justify-content: space-between; margin-top: -3px; font-size: 13px; }
.login-options a { font-weight: 700; color: #075eaf; }
.login-page .remember { display: flex; align-items: center; gap: 10px; color: #435b78; font-weight: 500; cursor: pointer; }
.login-page .remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.login-submit {
    width: 100%;
    height: 68px;
    padding: 0 26px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(100deg, #0962b4, #0874ca);
    box-shadow: 0 15px 28px rgba(8, 104, 189, .23);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.login-submit span { font-size: 25px; font-family: 'Source Sans 3', sans-serif; font-weight: 300; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(8, 104, 189, .3); }
.institutional-login-submit { grid-template-columns: 40px 1fr 24px; gap: 12px; padding-inline: 18px; background: linear-gradient(100deg, #1767dc, #2879ef); }
.institutional-login-submit strong { font: 700 13px 'Montserrat', sans-serif; text-align: center; }
.google-login-panel { margin-top: 34px; display: grid; gap: 14px; }
.institutional-notice { margin: 0; padding: 14px 16px; border: 1px solid #d7e4f2; border-radius: 12px; color: #47627f; background: #f7faff; font-size: 13px; line-height: 1.55; }
.institutional-notice strong { color: #0567bb; }
.google-login-panel .login-submit { text-decoration: none; }
.oauth-note { color: #74879d; text-align: center; font-size: 12px; }
.institutional-g { width: 34px; height: 34px; display: grid; place-items: center; color: #1e6fe5; background: #fff; border-radius: 8px; font: 800 15px 'Montserrat', sans-serif !important; }
.admin-login-page { background: radial-gradient(circle at 20% 10%, rgba(46, 119, 184, .16), transparent 34%), #edf3f9; }
.login-page .admin-login-card { width: min(570px, calc(100vw - 40px)); min-height: 0; grid-template-columns: 1fr; border-radius: 26px; }
.admin-login-card .login-form { padding: 48px 58px; }
.admin-logo { width: 100%; height: 105px; margin-bottom: 34px; padding: 13px 30px; display: grid; place-items: center; border: 1px solid #d5dfeb; border-radius: 16px; background: #f8fafc; }
.admin-logo img { max-width: 330px; max-height: 78px; }
.first-login { margin: 35px 0 30px; display: flex; align-items: center; gap: 16px; color: #8393a8; font-size: 12px; white-space: nowrap; }
.first-login::before, .first-login::after { content: ''; height: 1px; flex: 1; background: #d2dce9; }
.help-card {
    min-height: 83px;
    padding: 13px 20px;
    display: grid;
    grid-template-columns: 51px 1fr auto;
    align-items: center;
    gap: 16px;
    color: #0b1c34;
    border: 1px solid #c8d6e7;
    border-radius: 14px;
    background: #fbfcfe;
}
.help-card:hover { border-color: #7eadda; background: #f6faff; }
.help-icon { width: 51px; height: 51px; display: grid; place-items: center; border-radius: 12px; background: #e8f3ff; color: #0871cb; font: 700 20px 'Montserrat', sans-serif; }
.help-card > span:nth-child(2) { display: flex; flex-direction: column; }
.help-card strong { font: 700 13px 'Montserrat', sans-serif; }
.help-card small { margin-top: 6px; color: #72869f; }
.help-card b { color: #8298b0; font-size: 22px; }
.support-link { margin: 28px 0 0; text-align: center; color: #8392a7; font-size: 12px; }

/* Extension du thème aux pages métier. */
.shell { grid-template-columns: 284px 1fr; }
.sidebar {
    isolation: isolate;
    width: auto;
    padding: 27px 22px;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(160deg, #0c477b, #082f59);
    background-size: 70px 70px, 70px 70px, auto;
}
.sidebar::after { content: ''; position: absolute; z-index: -1; width: 280px; height: 280px; left: -155px; bottom: -145px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.02); }
.brand { gap: 12px; padding: 0 8px 35px; }
.brand-emblem { width: 76px; height: 49px; padding: 5px; display: grid; place-items: center; border-radius: 9px; background: #fff; overflow: hidden; }
.brand-emblem img { display: block; width: 100%; height: auto; }
.brand strong { font-size: 18px; }
.brand small { color: #b8d3eb; }
.sidebar nav a { position: relative; min-height: 48px; color: #c1d5e7; border-radius: 11px; }
.sidebar nav a:hover, .sidebar nav a.active { background: rgba(255,255,255,.1); }
.sidebar nav a.active { box-shadow: none; }
.sidebar nav a.active::before { content: ''; position: absolute; left: -22px; width: 4px; height: 25px; border-radius: 0 5px 5px 0; background: var(--red); }
.sidebar-user { border-color: rgba(255,255,255,.13); }
.sidebar-user small { color: #b1c9df; }
.topbar { height: 112px; padding-inline: 4.2vw; border-color: #dce4ee; }
.topbar h1 { color: #08162b; font-size: 25px; }
.topbar .eyebrow { color: #0870c9; }
.content { padding-top: 32px; }
.button { min-height: 43px; border-radius: 11px; }
.button.primary { background: linear-gradient(100deg, #0861b2, #0873ca); box-shadow: 0 9px 20px rgba(8, 104, 189, .2); }
.panel, .filters { border-color: #d5dfeb; border-radius: 17px; }
.panel-heading h2, .section-title h2 { color: #07162d; }
.hero, .detail-hero {
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(125deg, #0d4b80, #0a3561);
    background-size: 75px 75px, 75px 75px, auto;
}
.hero { min-height: 225px; }
.hero .eyebrow { color: #c5ddf1; }
.hero::before { content: ''; position: absolute; left: 0; top: 36px; width: 4px; height: 56px; background: var(--red); border-radius: 0 5px 5px 0; }
.hero h2 { font-family: 'Montserrat', sans-serif; }
.section-number { background: #e7f2fd; color: #0968bc; }
.file-mark, .resource-grid span { background: #e8f3ff; color: #0870c9; }
.document-dots span.ready { background: #e5f6ef; color: #14775b; }
.document-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.document-actions a { font-weight: 600; }
.document-actions .preview { padding: 7px 10px; color: #075fae; border: 1px solid #bfd5ea; border-radius: 8px; background: #f5faff; }
.document-actions .preview:hover { border-color: #5f9bd0; background: #eaf5ff; }
.settings-panel { max-width: 900px; margin-inline: auto; }
.settings-badge { padding: 7px 11px; color: #0864b5; border-radius: 999px; background: #e8f3ff; font-size: 11px; font-weight: 700; }
.settings-form { padding: 6px 26px 26px; }
.setting-row { position: relative; min-height: 105px; display: grid; grid-template-columns: 1fr 54px; align-items: center; gap: 24px; border-bottom: 1px solid #dfe6ef; cursor: pointer; }
.setting-copy { display: flex; flex-direction: column; }
.setting-copy strong { color: #07162d; font: 700 16px 'Montserrat', sans-serif; }
.setting-copy small { margin-top: 7px; color: #6d819a; font-size: 13px; }
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 54px; height: 30px; border-radius: 999px; background: #c7d3e0; transition: .2s ease; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(13, 44, 77, .22); transition: .2s ease; }
.switch-input:checked + .switch { background: #0870c9; }
.switch-input:checked + .switch::after { transform: translateX(24px); }
.switch-input:focus-visible + .switch { outline: 3px solid rgba(8, 112, 201, .2); outline-offset: 3px; }
.settings-note { margin: 22px 0; padding: 14px 16px; color: #536b86; border-radius: 10px; background: #f2f7fc; font-size: 13px; }
.preview-settings-panel { margin-top: 22px; }
.preview-settings-content { padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.preview-settings-content strong { color: #07162d; font: 700 16px 'Montserrat', sans-serif; }
.preview-settings-content p { max-width: 560px; margin: 7px 0 0; color: #687d96; line-height: 1.5; }
.preview-settings-content form { flex: 0 0 auto; }
.preview-mode-alert { margin-bottom: 22px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #0b4f83; border: 1px solid #a8cce9; border-radius: 12px; background: #eaf6ff; }
.preview-mode-alert > span { display: flex; flex-direction: column; }
.preview-mode-alert small { margin-top: 3px; color: #547793; }
.shell > main, .content, .panel, .table-wrap { min-width: 0; }
.hero h2, .detail-hero h2, .panel-heading h2, td strong { overflow-wrap: anywhere; }
.panel-heading, .topbar { min-width: 0; }

@media (max-width: 1180px) {
    .login-page .login-card { grid-template-columns: 52% 48%; }
    .login-page .login-intro { padding: 42px 38px; }
    .institution-logo { min-height: 150px; padding: 18px 40px; }
    .login-presentation { margin-top: 38px; }
    .login-page .login-intro h1 { font-size: 43px; }
    .login-lead { font-size: 17px; }
    .feature-card { padding: 14px; }
    .feature-card strong { font-size: 14px; }
    .feature-card small { font-size: 12px; }
    .feature-icon { flex-basis: 50px; width: 50px; height: 50px; border-radius: 12px; }
    .feature-row { gap: 16px; margin-top: 16px; }
    .login-page .login-form { padding-inline: 45px; }
    .shell { grid-template-columns: 78px 1fr; }
    .sidebar { width: 78px; padding: 25px 12px; }
    .brand span:last-child, .sidebar nav span, .sidebar-user > span:nth-child(2), .sidebar-user form { display: none; }
    .brand { padding-left: 7px; }
    .sidebar nav a { justify-content: center; font-size: 19px; }
    .sidebar nav a.active::before { left: -12px; }
    .sidebar-user { display: flex; justify-content: center; padding-inline: 0; }
    .brand-emblem { width: 50px; height: 38px; }
}

@media (max-width: 860px) {
    body.login-page { padding: 0; background: #fff; }
    .login-page .login-card { width: 100%; min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
    .login-page .login-intro { display: none; }
    .login-page .login-form { position: relative; padding: 125px 28px 45px; }
    .login-page .login-form::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 50%;
        width: min(330px, calc(100% - 56px));
        height: 72px;
        transform: translateX(-50%);
        background: url('/identite/logo') center / contain no-repeat;
    }
    .login-page .login-form header > p:last-child { margin-bottom: 30px; }
}

@media (max-width: 700px) {
    .login-page .login-form { display: block; }
    .login-page .login-form h2 { font-size: 27px; }
    .login-page .login-form form { gap: 21px; }
    .login-page .login-form input:not([type='checkbox']), .login-submit { height: 61px; }
    .help-card { grid-template-columns: 45px 1fr auto; }
    .help-icon { width: 45px; height: 45px; }
    .institutional-login-submit strong { font-size: 11px; }
    .admin-login-card .login-form { padding: 32px 25px; }
    .document-row { grid-template-columns: 42px 1fr; }
    .document-actions { grid-column: 2; flex-wrap: wrap; }
    .preview-settings-content, .preview-mode-alert { align-items: stretch; flex-direction: column; }
    .preview-settings-content form .button, .preview-mode-alert form .button { width: 100%; }
    .sidebar { width: 100%; height: 65px; padding: 8px 10px; overflow: hidden; }
    .sidebar .brand, .sidebar-user { display: none; }
    .sidebar nav { gap: 2px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .sidebar nav::-webkit-scrollbar { display: none; }
    .sidebar nav a { min-width: 56px; flex: 1 0 56px; padding-inline: 8px; }
    .sidebar nav a.active::before { display: none; }
    .topbar { flex-wrap: wrap; gap: 12px; }
    .topbar > div:first-child { min-width: 0; }
    .topbar h1 { font-size: clamp(20px, 6vw, 25px); overflow-wrap: anywhere; }
    .topbar > div + div { margin-left: auto; }
    .topbar .button[data-mobile-icon] { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 0; }
    .topbar .button[data-mobile-icon]::before { content: attr(data-mobile-icon); font-size: 20px; line-height: 1; }
    .content { width: 100%; }
    .panel-heading { padding: 18px; flex-wrap: wrap; gap: 12px; }
    .hero { min-height: 0; padding: 26px 22px; }
    .hero h2 { font-size: 22px; }
    .hero p { line-height: 1.5; }
    .detail-hero { padding: 23px 20px; }
    .detail-hero h2 { font-size: 21px; }
    .detail-hero p { line-height: 1.5; }
    .external-links { flex-wrap: wrap; }
    .pagination { align-items: stretch; flex-direction: column; gap: 12px; }
    .pagination > div { display: flex; gap: 8px; }
    .pagination .button { flex: 1; }
    .setting-row { min-height: 118px; gap: 15px; }
    .settings-form { padding-inline: 18px; }
    .form-actions { flex-wrap: wrap; }
}

@media (max-width: 860px) {
    .table-panel .table-wrap { padding: 12px; overflow: visible; }
    .table-panel table, .table-panel tbody { display: block; }
    .table-panel thead { display: none; }
    .table-panel tr { display: block; margin-bottom: 12px; padding: 11px 14px; border: 1px solid #dce5ef; border-radius: 13px; background: #fff; }
    .table-panel tr:last-child { margin-bottom: 0; }
    .table-panel td { width: 100%; padding: 9px 0; display: grid; grid-template-columns: minmax(78px, 28%) minmax(0, 1fr); gap: 12px; border: 0; border-bottom: 1px solid #edf1f5; }
    .table-panel td:last-child { border-bottom: 0; }
    .table-panel td::before { content: attr(data-label); color: #74879e; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .table-panel td[colspan] { display: block; }
    .table-panel td[colspan]::before { display: none; }
    .table-panel .row-link { justify-self: start; }
}

@media (max-width: 430px) {
    .login-page .login-form { padding-inline: 20px; }
    .login-page .login-form::before { width: calc(100% - 40px); }
    .login-page .login-form h2 { font-size: 25px; }
    .institutional-notice { padding: 12px; }
    .institutional-login-submit { grid-template-columns: 34px 1fr 16px; gap: 8px; padding-inline: 12px; }
    .institutional-login-submit strong { font-size: 10px; }
    .help-card { padding-inline: 12px; grid-template-columns: 42px 1fr; }
    .help-card b { display: none; }
    .support-link { line-height: 1.7; }
    .stats { grid-template-columns: 1fr; }
    .stats article { min-height: 74px; }
    .list-cards > a { padding-inline: 14px; }
    .form-actions .button { width: 100%; }
    .document-actions { gap: 8px; }
    .document-actions a { font-size: 12px; }
    .setting-copy strong { font-size: 14px; }
}

@media (max-height: 1000px) and (min-width: 861px) {
    body.login-page { padding: 18px; }
    .login-page .login-card { width: min(1660px, calc(100vw - 36px)); min-height: calc(100vh - 36px); }
    .login-page .login-intro { padding: 28px 42px 30px; }
    .institution-logo { min-height: 175px; padding: 18px 58px; border-radius: 24px; }
    .institution-logo img { width: min(100%, 590px); max-height: 205px; object-fit: contain; }
    .login-presentation { margin-top: 28px; }
    .login-kicker { font-size: 14px; }
    .login-page .login-intro h1 { margin: 20px 0 12px; font-size: clamp(40px, 3.4vw, 58px); }
    .login-lead { font-size: 18px; line-height: 1.5; }
    .feature-wide { margin-top: 22px; }
    .feature-row { margin-top: 16px; gap: 16px; }
    .feature-card { min-height: 92px; padding: 14px 19px; gap: 16px; border-radius: 17px; }
    .feature-icon { flex-basis: 52px; width: 52px; height: 52px; border-radius: 13px; }
    .feature-icon svg { width: 25px; }
    .feature-card strong { font-size: 14px; }
    .feature-card small { font-size: 12px; }
    .login-page .login-form { padding-block: 26px; }
    .login-page .login-form header > p:last-child { margin-bottom: 25px; }
    .google-login-panel { margin-top: 22px; }
    .first-login { margin-block: 24px 20px; }
    .support-link { margin-top: 20px; }
}

@media (max-height: 790px) and (min-width: 861px) {
    .login-page .login-card { min-height: calc(100vh - 30px); }
    .login-page .login-intro { padding-block: 32px; }
    .institution-logo { min-height: 130px; }
    .login-presentation { margin-top: 28px; }
    .login-page .login-intro h1 { margin-block: 18px 8px; font-size: 42px; }
    .feature-wide { margin-top: 18px; }
    .feature-card { min-height: 82px; }
    .login-page .login-form { padding-block: 30px; }
    .login-page .login-form header > p:last-child { margin-bottom: 25px; }
    .login-page .login-form form { gap: 20px; }
    .login-page .login-form input:not([type='checkbox']), .login-submit { height: 59px; }
    .first-login { margin-block: 24px 20px; }
}