/* 
 * Overlay de maintenance - Inkwell 
 */

.overlay-maintenance {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100vh;
    height:100dvh;
    z-index:999;
    background-color:var(--couleur-beige);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow-y:auto;
}

.overlay-maintenance--visible {
    display:flex;
}

.overlay-maintenance__carte {
    max-width:480px;
    width:100%;
    background-color:#FFFFFF;
    border-radius:var(--rayon-carte);
    box-shadow:0 24px 64px rgba(38, 53, 60, 0.18);
    padding:40px 32px;
    text-align:center;
}

.overlay-maintenance__icone {
    width:72px;
    height:72px;
    margin:0 auto 24px;
    border-radius:50%;
    background-color:var(--couleur-corail);
    color:#FFFFFF;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    animation:overlay-maintenance-apparition 3s linear infinite;
}

@keyframes overlay-maintenance-apparition {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.overlay-maintenance__titre {
    font-size:1.5rem;
    margin-bottom:12px;
}

.overlay-maintenance__message {
    color:rgba(38, 53, 60, 0.7);
    line-height:1.6;
    margin-bottom:8px;
}

.overlay-maintenance__date-fin {
    font-size:0.85rem;
    color:var(--couleur-corail);
    font-weight:600;
    margin-bottom:28px;
}

.overlay-maintenance__separateur {
    border:none;
    border-top:1px solid rgba(38, 53, 60, 0.1);
    margin-bottom:28px;
}

.overlay-maintenance__label-code {
    font-size:0.82rem;
    font-weight:600;
    color:rgba(38, 53, 60, 0.6);
    margin-bottom:14px;
}

.code-otp {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:20px;
}

.code-otp input {
    width:44px;
    height:52px;
    text-align:center;
    font-size:1.3rem;
    font-weight:700;
    font-family:var(--police-titres);
    color:var(--couleur-anthracite);
    border:2px solid rgba(38, 53, 60, 0.15);
    border-radius:10px;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.code-otp input:focus {
    outline:none;
    border-color:var(--couleur-corail);
    box-shadow:0 0 0 3px rgba(255, 103, 106, 0.15);
}

.code-otp input.code-otp .case--erreur {
    border-color:var(--couleur-rouge-vif);
    animation:code-otp-secousse 0.3s ease;
}

@keyframes code-otp-secousse {
    0%, 100% {
        transform:translateX(0);
    }
    25% {
        transform:translateX(-4px);
    }
    75% {
        transform:translateX(4px);
    }
}

.overlay-maintenance__bouton {
    width:100%;
}

@media (max-width:480px) {
    .overlay-maintenance__carte {
        padding:32px 20px;
    }
    .code-otp {
        gap:6px;
    }
    .code-otp input {
        width:38px;
        height:46px;
        font-size:1.15rem;
    }
}