/******************************************************************************
 *
 * ATS-DISN-2026-001
 *
 * Digital Identity & Service Notice
 *
 * Responsive Edition
 *
 * Version : 1.2
 * Author  : SARL Aim Tech
 *
 ******************************************************************************/

/******************************************************************************
 * SECTION 01
 *
 * RESET
 * ROOT
 * BODY
 *
 *****************************************************************************/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:#111;

    color:#222;

    overflow-x:hidden;

}

/******************************************************************************
 * SECTION 02
 *
 * BACKGROUND
 * OVERLAY
 * GLASS CARD
 *
 *****************************************************************************/

/******************************************************************************
 * Background
 *****************************************************************************/

.page{

    width:100%;

}

.background{

    display:block;

    width:100%;

    height:auto;

    user-select:none;

    pointer-events:none;

}

/******************************************************************************
 * Overlay
 *****************************************************************************/

.overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:32px;

    overflow-y:auto;

    background:

        rgba(0,0,0,.14);

    animation:

        fadeIn .35s ease;

}

/******************************************************************************
 * Glass Card
 *****************************************************************************/

.card{

    width:640px;

    max-width:100%;

    margin:auto;

    padding:34px;

    border-radius:24px;

    background:

        rgba(255,255,255,.18);

    backdrop-filter:

        blur(22px)
        saturate(150%)
        brightness(118%);

    -webkit-backdrop-filter:

        blur(22px)
        saturate(150%)
        brightness(118%);

    border:

        1px solid rgba(255,255,255,.35);

    box-shadow:

        0 30px 80px rgba(0,0,0,.35);

    animation:

        popup .35s ease;

}

/******************************************************************************
 * Generic Links
 *****************************************************************************/

a{

    color:#173d87;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    text-decoration:underline;

}

/******************************************************************************
 * SECTION 03
 *
 * TOOLBAR
 * TYPOGRAPHY
 * FOOTER
 *
 *****************************************************************************/

/******************************************************************************
 * Toolbar
 *****************************************************************************/

.toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.brand{

    font-size:11px;

    font-weight:700;

    letter-spacing:5px;

    color:#173d87;

    text-transform:uppercase;

    user-select:none;

}

.lang{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#666;

}

.lang a{

    color:#666;

    text-decoration:none;

}

.lang a:hover{

    color:#173d87;

}

.lang a.active{

    color:#173d87;

    font-weight:700;

}

/******************************************************************************
 * Titles
 *****************************************************************************/

h1{

    font-size:38px;

    font-weight:700;

    line-height:1.10;

    color:#111;

    margin-bottom:10px;

}

.reference{

    margin-bottom:18px;

    font-size:11px;

    letter-spacing:2px;

    color:#666;

    text-transform:uppercase;

}

h2{

    font-size:20px;

    font-weight:600;

    color:#173d87;

    margin-bottom:22px;

}

/******************************************************************************
 * Body
 *****************************************************************************/

p{

    margin-top:16px;

    font-size:15px;

    line-height:1.68;

    color:#222;

}

strong{

    font-weight:700;

    color:#111;

}

/******************************************************************************
 * Footer
 *****************************************************************************/

.footer{

    margin-top:34px;

    padding-top:24px;

    border-top:

        1px solid rgba(255,255,255,.35);

}

.footer-block{

    margin-bottom:16px;

    font-size:13px;

    line-height:1.6;

}

.footer-block span{

    display:block;

    color:#666;

    margin-bottom:3px;

}

.footer-block strong{

    color:#111;

}

.footer a{

    color:#173d87;

    font-weight:600;

}

.footer a:hover{

    text-decoration:underline;

}

/******************************************************************************
 * Signature
 *****************************************************************************/

.maintained{

    margin-top:22px;

    padding-top:14px;

    border-top:

        1px solid rgba(255,255,255,.15);

    text-align:center;

    font-size:11px;

    color:#777;

    letter-spacing:.6px;

}

/******************************************************************************
 * SECTION 04
 *
 * REDIRECT
 * PROGRESS BAR
 * ANIMATIONS
 *
 *****************************************************************************/

/******************************************************************************
 * Redirect
 *****************************************************************************/

.redirect{

    margin-top:28px;

}

#redirectText{

    display:block;

    margin-bottom:12px;

    font-size:13px;

    color:#666;

}

/******************************************************************************
 * Progress
 *****************************************************************************/

.progress{

    position:relative;

    width:100%;

    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:

        rgba(255,255,255,.20);

}

/******************************************************************************
 * Progress Value
 *****************************************************************************/

#progressBar{

    position:relative;

    width:100%;

    height:100%;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            #2d5eff,
            #59b8ff
        );

    overflow:hidden;

}

/******************************************************************************
 * Light Effect
 *****************************************************************************/

#progressBar::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            110deg,

            transparent 0%,

            rgba(255,255,255,.65) 45%,

            transparent 100%

        );

    animation:

        progressLight 1.8s linear infinite;

}

/******************************************************************************
 * Fade Animations
 *****************************************************************************/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes popup{

    from{

        opacity:0;

        transform:

            translateY(26px)
            scale(.97);

        filter:blur(5px);

    }

    to{

        opacity:1;

        transform:

            translateY(0)
            scale(1);

        filter:none;

    }

}

/******************************************************************************
 * Progress Highlight
 *****************************************************************************/

@keyframes progressLight{

    from{

        transform:

            translateX(-120%);

    }

    to{

        transform:

            translateX(140%);

    }

}

/******************************************************************************
 * Redirect Link
 *****************************************************************************/

.redirect-now{

    margin-top:16px;

    text-align:right;

}

.redirect-now a{

    font-size:13px;

    color:#173d87;

    text-decoration:none;

    font-weight:600;

    opacity:.85;

    transition:.25s;

}

.redirect-now a:hover{

    opacity:1;

    text-decoration:underline;

}

/******************************************************************************
 * SECTION 05
 *
 * RESPONSIVE
 *
 *****************************************************************************/

/******************************************************************************
 * Desktop XL
 *
 * >= 1600px
 *
 *****************************************************************************/

@media (min-width:1600px){

    .card{

        width:700px;

        padding:40px;

    }

}

/******************************************************************************
 * Laptop
 *
 * <= 1200px
 *
 *****************************************************************************/

@media (max-width:1200px){

    .card{

        width:620px;

        padding:32px;

    }

}

/******************************************************************************
 * Tablet
 *
 * <= 992px
 *
 *****************************************************************************/

@media (max-width:992px){

    .overlay{

        padding:24px;

    }

    .card{

        width:92%;

        max-width:620px;

        padding:30px;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:19px;

    }

}

/******************************************************************************
 * Smartphone
 *
 * <= 768px
 *
 *****************************************************************************/

@media (max-width:768px){

    body{

        overflow:hidden;

    }

    .overlay{

        align-items:flex-end;

        justify-content:center;

        padding:0;

        overflow:hidden;

        background:

            linear-gradient(

                rgba(0,0,0,.05),

                rgba(0,0,0,.25)

            );

    }

    .card{

        width:100%;

        max-width:none;

        margin:0;

        padding:26px;

        border-radius:

            26px 26px 0 0;

        background:

            rgba(255,255,255,.22);

        backdrop-filter:

            blur(24px)
            saturate(170%);

        -webkit-backdrop-filter:

            blur(24px)
            saturate(170%);

        max-height:78dvh;

        overflow-y:auto;

        box-shadow:

            0 -10px 40px rgba(0,0,0,.30);

    }

    .toolbar{

        margin-bottom:18px;

    }

    .brand{

        font-size:10px;

        letter-spacing:3px;

    }

    .lang{

        font-size:13px;

    }

    h1{

        font-size:27px;

    }

    h2{

        font-size:17px;

    }

    p{

        font-size:14px;

        line-height:1.60;

    }

    .footer{

        margin-top:24px;

        padding-top:18px;

        font-size:12px;

    }

    .footer-block{

        margin-bottom:12px;

    }

    .maintained{

        margin-top:16px;

        font-size:10px;

    }

    .redirect{

        margin-top:20px;

    }

}

/******************************************************************************
 * Small Smartphone
 *
 * <= 480px
 *
 *****************************************************************************/

@media (max-width:480px){

    .card{

        padding:20px;

        border-radius:

            22px 22px 0 0;

        max-height:82dvh;

    }

    h1{

        font-size:23px;

    }

    h2{

        font-size:15px;

    }

    p{

        font-size:13px;

    }

    .reference{

        font-size:10px;

    }

    .footer{

        font-size:11px;

    }

}

/******************************************************************************
 * Landscape Phone
 *
 *****************************************************************************/

@media (max-height:600px){

    .card{

        max-height:90dvh;

    }

}