*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --c1:#4DC8A0;
    --c2:#F5A623;
    --c3:#E8367A;
    --c4:#3B4DB8;
    --c5:#F0839A;
}

html,body{
    height:100%;
    font-family:'DM Sans',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
}

/* ══ FOND — barres horizontales animées ══════════════════════ */
.bg{
    position:fixed;inset:0;
    background:#18181C;
    overflow:hidden;
    z-index:0;
}

/* Lueur centrale douce */
.bg::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 60% at 50% 50%,
        rgba(59,77,184,.18) 0%,
        rgba(77,200,160,.08) 45%,
        transparent 70%);
    pointer-events:none;
}

/* Barres horizontales */
.bar{
    position:absolute;
    left:-100%;
    height:1px;
    border-radius:1px;
    animation:slideBar linear infinite;
    opacity:0;
}
@keyframes slideBar{
    0%  {left:-100%; opacity:0}
    5%  {opacity:1}
    90% {opacity:.6}
    100%{left:120%;  opacity:0}
}

/* ══ LAYOUT ═════════════════════════════════════════════════ */
.page{
    position:relative;z-index:1;
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:1.5rem;
}

/* ══ CARTE ══════════════════════════════════════════════════ */
.card{
    width:100%;max-width:420px;
    background:#FFFFFF;
    border-radius:28px;
    border:none;
    box-shadow:0 16px 64px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.25);
    overflow:hidden;
    animation:cardPop .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardPop{
    from{opacity:0;transform:translateY(32px) scale(.95)}
    to  {opacity:1;transform:none}
}

/* Barre multicolore */
.card-bar{
    height:5px;
    background:linear-gradient(90deg,var(--c1) 0%,var(--c2) 25%,var(--c3) 50%,var(--c4) 75%,var(--c5) 100%);
}

/* Corps carte */
.card-body{
    padding:2.5rem 2.25rem 2rem;
    text-align:center;
}

/* Logo */
.logo-ring{
    display:inline-flex;align-items:center;justify-content:center;
    width:180px;height:180px;border-radius:50%;
    padding:5px;
    background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c1));
    margin-bottom:1.25rem;
    animation:ringRotate 8s linear infinite;
    box-shadow:0 8px 32px rgba(0,0,0,.1);
}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.logo-inner{
    width:100%;height:100%;border-radius:50%;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.logo-inner img{
    width:120px;height:auto;
    animation:ringRotate 8s linear infinite reverse;
}

/* Titre */
.card-title{
    font-family:'Playfair Display',serif;
    font-size:1.75rem;font-weight:700;
    color:#111;letter-spacing:-.02em;
    line-height:1.15;margin-bottom:.3rem;
}
.card-title .dot{color:var(--c3)}

.card-sub{
    font-size:.84rem;color:#888;
    margin-bottom:2rem;line-height:1.5;
}

/* ── Bouton déclencheur ── */
#triggerZone{transition:opacity .22s,height .3s}

.btn-enter{
    width:100%;padding:16px 18px;
    background:linear-gradient(135deg,var(--c1) 0%,var(--c4) 50%,var(--c3) 100%);
    border:none;border-radius:16px;
    display:flex;align-items:center;gap:14px;
    cursor:pointer;text-align:left;
    font-family:'DM Sans',sans-serif;
    position:relative;overflow:hidden;
    transition:transform .15s,box-shadow .18s,filter .15s;
    box-shadow:0 4px 24px rgba(77,200,160,.3),0 2px 8px rgba(59,77,184,.2);
}
.btn-enter:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(77,200,160,.4),0 4px 12px rgba(59,77,184,.25);filter:brightness(1.06)}
.btn-enter:active{transform:scale(.99)}

/* shimmer */
.btn-enter::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
    background-size:200% 100%;background-position:200% 0;
    animation:shimmer 3s ease infinite;
}
@keyframes shimmer{0%,100%{background-position:200% 0}50%{background-position:-100% 0}}

.btn-ico{
    width:44px;height:44px;border-radius:12px;flex-shrink:0;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.3);
    display:flex;align-items:center;justify-content:center;
    transition:transform .18s;
}
.btn-enter:hover .btn-ico{transform:rotate(-10deg) scale(1.06)}
.btn-ico svg{width:20px;height:20px;color:#fff}

.btn-body{flex:1}
.btn-lbl{display:block;font-size:.95rem;font-weight:700;color:#fff}
.btn-hint{display:block;font-size:.72rem;color:rgba(255,255,255,.45);margin-top:2px}
.btn-arr{color:rgba(255,255,255,.25)}
.btn-arr svg{width:18px;height:18px}

.enter-sub{
    margin-top:.85rem;font-size:.76rem;color:#aaa;
}

/* ── Formulaire ── */
.form-zone{
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .38s ease;
    text-align:left;
}
.form-zone.open{max-height:520px;opacity:1}

/* Retour */
.back-btn{
    display:none;align-items:center;gap:5px;
    font-size:.76rem;color:#aaa;cursor:pointer;
    margin-bottom:1.1rem;background:none;border:none;
    font-family:'DM Sans',sans-serif;transition:color .15s;padding:0;
}
.back-btn:hover{color:#555}
.back-btn svg{width:13px;height:13px}
.back-btn.visible{display:inline-flex}

/* Alertes */
.alert{
    display:flex;align-items:flex-start;gap:.55rem;
    padding:.72rem .85rem;border-radius:12px;
    font-size:.82rem;line-height:1.5;margin-bottom:.9rem;
    animation:alertIn .28s ease;
}
@keyframes alertIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.alert svg{flex-shrink:0;width:14px;height:14px;margin-top:1px}
.alert-err{background:#FEF1F5;color:#9B1239;border:1px solid rgba(232,54,122,.2)}
.alert-ok {background:#F0FDF8;color:#0D5E41;border:1px solid rgba(77,200,160,.25)}

/* Champs */
.field{margin-bottom:.95rem}
.field-lbl{
    display:block;font-size:.68rem;font-weight:700;
    letter-spacing:.13em;text-transform:uppercase;
    color:#666;margin-bottom:.42rem;
}
.field-wrap{position:relative}
.field-ico{
    position:absolute;left:13px;top:50%;transform:translateY(-50%);
    color:#C8C4BC;pointer-events:none;
}
.field-ico svg{width:15px;height:15px}
.field-input{
    width:100%;padding:13px 13px 13px 40px;
    background:#F9F7F4;border:1.5px solid #EDE9E3;
    border-radius:13px;color:#111;font-size:.9rem;
    font-family:'DM Sans',sans-serif;outline:none;
    transition:border-color .18s,box-shadow .18s,background .15s;
}
.field-input:focus{
    background:#fff;border-color:var(--c1);
    box-shadow:0 0 0 4px rgba(77,200,160,.15);
}
.field-input.pwd:focus{
    border-color:var(--c3);
    box-shadow:0 0 0 4px rgba(232,54,122,.12);
}
.field-input::placeholder{color:#C4C0B8}
.field-eye{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;
    color:#C4C0B8;display:flex;transition:color .15s;padding:0;
}
.field-eye:hover{color:#555}
.field-eye svg{width:15px;height:15px}

/* Bouton submit */
.btn-submit{
    width:100%;padding:14px;border:none;border-radius:13px;
    color:#fff;font-size:.95rem;font-weight:700;
    font-family:'DM Sans',sans-serif;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,var(--c4) 0%,var(--c3) 100%);
    box-shadow:0 4px 18px rgba(59,77,184,.25);
    transition:transform .15s,box-shadow .2s,filter .15s;
    letter-spacing:.02em;margin-top:.1rem;
}
.btn-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(59,77,184,.32);
    filter:brightness(1.06);
}
.btn-submit:active{transform:scale(.99)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn-submit svg{width:15px;height:15px}

.spinner{
    display:none;width:16px;height:16px;
    border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
    border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.form-foot{
    margin-top:.9rem;font-size:.75rem;color:#bbb;text-align:center;
}

@media(max-width:460px){
    .card-body{padding:2rem 1.5rem 1.75rem}
    .card-title{font-size:1.5rem}
    .logo-ring{width:96px;height:96px}
    .logo-inner img{width:64px}
}