/* =========================================================
CLIVYO — Page accès réservé client final
Fichier : /assets/css/client-blocked.css
========================================================= */

.client-blocked-page {
width: min(100%, 920px);
margin: clamp(28px, 5vw, 70px) auto;
display: grid;
place-items: center;
}

.client-blocked-card {
width: 100%;
padding: clamp(26px, 5vw, 56px);
border-radius: 38px;
background:
radial-gradient(circle at 100% 0%, rgba(3, 179, 195, .16), transparent 34%),
linear-gradient(135deg, #F6FBFF 0%, #FFFFFF 62%);
box-shadow:
0 24px 70px rgba(2, 49, 142, .10),
inset 0 0 0 1px rgba(2, 49, 142, .08);
text-align: center;
}

.client-blocked-icon {
width: 68px;
height: 68px;
margin: 0 auto 18px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--primary-soft);
color: var(--clivyo-blue);
font-size: 2rem;
font-weight: 500;
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.client-blocked-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 auto 14px;
padding: 7px 12px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--clivyo-blue);
font-size: 13px;
font-weight: 500;
}

.client-blocked-card h1 {
max-width: 760px;
margin: 0 auto 16px;
color: var(--clivyo-blue);
font-size: clamp(2rem, 5vw, 4rem);
line-height: .96;
letter-spacing: -0.075em;
}

.client-blocked-lead {
max-width: 680px;
margin: 0 auto 26px;
color: var(--muted);
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.55;
}

.client-blocked-box {
max-width: 720px;
margin: 0 auto 24px;
padding: 18px 20px;
border-radius: 24px;
background: #FFFFFF;
text-align: left;
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .08);
}

.client-blocked-box strong {
display: block;
margin-bottom: 6px;
color: var(--clivyo-blue);
}

.client-blocked-box p {
margin: 0;
color: var(--muted);
}

.client-blocked-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 0 auto 26px;
}

.client-blocked-steps div {
padding: 18px;
border-radius: 24px;
background: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(2, 49, 142, .07);
text-align: left;
}

.client-blocked-steps span {
width: 30px;
height: 30px;
margin-bottom: 12px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--clivyo-blue);
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
}

.client-blocked-steps p {
margin: 0;
color: var(--clivyo-dark);
font-weight: 500;
}

.client-blocked-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}

.client-blocked-note {
margin: 18px 0 0;
color: var(--muted);
font-size: 13px;
}

@media (max-width: 720px) {
.client-blocked-card {
border-radius: 28px;
padding: 26px 20px;
}


.client-blocked-steps {
    grid-template-columns: 1fr;
}

.client-blocked-actions {
    display: grid;
    grid-template-columns: 1fr;
}

.client-blocked-actions .btn {
    width: 100%;
}


}