/*
 * Pages d'erreur personnalisées - Inkwell
 */

.page-erreur {
    min-height:calc(100vh - 200px);
    min-height:calc(100dvh - 200px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:64px 24px;
}

.page-erreur__conteneur {
    max-width:560px;
    text-align:center;
}

.page-erreur__code {
    font-family:var(--police-titres);
    font-weight:800;
    font-size:7rem;
    line-height:1;
    color:var(--couleur-corail);
    margin-bottom:8px;
    letter-spacing:-0.02rem;
}

.page-erreur__icone {
    width:88px;
    height:88px;
    margin:0 auto 28px;
    border-radius:50%;
    background-color:rgba(255, 103, 106, 0.1);
    color:var(--couleur-corail);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.2rem;
}

.page-erreur__titre {
    font-size:1.6rem;
    margin-bottom:14px;
}

.page-erreur__texte {
    color:rgba(38, 53, 60, 0.7);
    line-height:1.65;
    margin-bottom:36px;
    font-size:1rem;
}

.page-erreur__actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:40px;
}

.page-erreur__recherche {
    display:flex;
    align-items:center;
    gap:10px;
    background-color:#FFFFFF;
    border:1px solid rgba(255, 103, 106, 0.15);
    border-radius:999px;
    padding:12px 20px;
    max-width:360px;
    margin:0 auto;
    color:rgba(38, 53, 60, 0.1);
}

.page-erreur__recherche input {
    border:none;
    outline:none;
    background:transparent;
    width:100%;
    color:var(--couleur-anthracite);
    font-family:var(--police-corps);
}

.page-erreur__liens-utiles {
    margin-top:40px;
    padding-top:28px;
    border-top:1px solid rgba(38, 53, 60, 0.1);
}

.page-erreur__liens-utiles p {
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:rgba(38, 53, 60, 0.45);
}

.page-erreur__liens-utiles nav {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 24px;
}

.page-erreur__liens-utiles a {
    font-size:0.88rem;
    font-weight:600;
    color:rgba(38, 53, 60, 0.5);
    transition:color 0.15s ease;
}

.page-erreur__liens-utiles a:hover {
    color:var(--couleur-corail);
}

/* Animation "recherche de connexion" */
.page-erreur__icone--recherche {
    position:relative;
}

.page-erreur__icone--recherche i {
    animation:hors-ligne-pulse 1.8s ease-in-out infinite;
}

@keyframes hors-ligne-pulse {
    0%, 100% {
        opacity:0.35;
        transform:scale(0.92);
    }
    50% {
        opacity:1;
        transform:scale(1.05);
    }
}

.page-erreur__icone--recherche::after {
    content:'';
    position:absolute;
    inset:-8px;
    border:2px solid var(--couleur-corail);
    border-radius:50%;
    opacity:0;
    animation:hors-ligne-onde 1.8s ease-out infinite;
}

@keyframes hors-ligne-onde {
    0% {
        transform:scale(0.8);
        opacity:0.6;
    }
    100% {
        transform:scale(1.6);
        opacity:0;
    }
}

.page-erreur__statut-connexion {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:20px;
    padding:8px 16px;
    background-color:rgba(255, 103, 106, 0.08);
    border-radius:999px;
    font-size:0.82rem;
    font-weight:600;
    color:var(--couleur-rouge-vif);
}

.page-erreur__statut-connexion--retablie {
    background-color:rgba(1, 144, 124, 0.1);
    color:var(--couleur-vert-emeraude);
}

.page-erreur__point-statut {
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:currentColor;
    animation:hors-ligne-point 1s ease-in-out infinite;
}

@keyframes hors-ligne-point {
    0%, 100% {
        opacity:0.4;
    }
    50% {
        opacity:1;
    }
}

@media (max-width:576px) {
    .page-erreur__code {
        font-size:5rem;
    }
    .page-erreur__icone {
        width:72px;
        height:72px;
        font-size:1.8rem;
    }
    .page-erreur__titre {
        font-size:1.35rem;
    }
    .page-erreur__actions {
        flex-direction:column;
        width:100%;
    }
    .page-erreur__actions .bouton {
        width:100%;
    }
}