/* ============================================
   AUTH-DEV.CSS - Mextyl Developer Portal
   Aligné sur auth.css (landing-institutional / Light Design System)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --lp-bg-dark:      #ffffff;
    --lp-bg-dark-2:    #FAFAFC;
    --lp-ink:          #0a0a0a;
    --lp-ink-soft:     #4a4a52;
    --lp-text-muted:   #6d6d76;
    --lp-text-faint:   #8a8a92;
    --lp-border:       #E4E4EC;
    --lp-border-soft:  rgba(10,10,10,.08);
    --lp-radius-sm:    8px;
    --lp-radius:       14px;
    --lp-radius-lg:    20px;
    --lp-transition:   .2s cubic-bezier(.4,0,.2,1);

    --lp-glass-bg:            #F5F5F8;
    --lp-glass-bg-hover:      #EDEDF2;
    --lp-glass-border:        #E4E4EC;
    --lp-glass-border-hv:     #c7c7d4;
    --lp-glass-shadow:        0 6px 16px rgba(10,10,10,.07), 0 1px 3px rgba(10,10,10,.05);

    /* Palette Mextyl (orange remplace l'indigo/violet AlphaVault) */
    --auth-primary:    #f2703e;
    --auth-accent:     #f6935f;
    --auth-accent-grad: linear-gradient(135deg, #f2703e 0%, #f6935f 100%);
    --auth-success:    #059669;
    --auth-error:      #dc2626;
    --auth-warning:    #d97706;

    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-y:auto !important; height:auto !important; }

body{
    font-family: var(--font-sans);
    background: var(--lp-bg-dark);
    color: var(--lp-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100vh !important;
    position:relative;
    letter-spacing:-0.005em;
}

body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(circle at 12% 8%,  rgba(242,112,62,.06), transparent 45%),
        radial-gradient(circle at 88% 18%, rgba(246,147,95,.05), transparent 42%),
        radial-gradient(circle at 20% 85%, rgba(242,112,62,.04), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(246,147,95,.05), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #FAFAFC 50%, #ffffff 100%);
}

body i.fas, body i.far, body i.fab{ color: var(--lp-ink) !important; }

/* ============================================
   BACK TO HOME
   ============================================ */

.back-to-home {
    position: fixed; top: 2rem; left: 2rem; z-index: 1000;
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 1.1rem 0.65rem 0.65rem;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 0.85rem; font-weight: 600;
    transition: var(--lp-transition);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.back-to-home-icon{
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition: var(--lp-transition);
}
.back-to-home-icon i{ font-size:.75rem; color:#fff !important; transition: transform .3s ease; }
.back-to-home:hover{
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
    color:#fff; transform: translateX(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.32);
}
.back-to-home:hover .back-to-home-icon{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.back-to-home:hover .back-to-home-icon i{ transform: translateX(-2px); }

/* ============================================
   AUTH WRAPPER
   ============================================ */

.auth-wrapper{
    display:grid; grid-template-columns:1fr 1fr;
    height:100vh; overflow:hidden; position:relative; z-index:1;
}

/* ============================================
   LEFT SIDE — BRANDING
   ============================================ */

.auth-branding{
    position:relative; overflow-y:auto; overflow-x:hidden;
    padding: 3rem 2.25rem 2.5rem;
    display:flex; align-items:center;
    border-right: 1px solid var(--lp-border-soft);
    background:
        radial-gradient(circle at 15% 20%, rgba(242,112,62,.20) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(246,147,95,.16) 0%, transparent 50%),
        radial-gradient(circle at 25% 85%, rgba(242,112,62,.14) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(246,147,95,.14) 0%, transparent 50%),
        linear-gradient(160deg, #0a0a0a 0%, #14151a 60%, #0a0a0a 100%);
}
.auth-branding::before{
    content:''; position:absolute; inset:0; z-index:0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 26px 26px; pointer-events:none;
}

.branding-content{
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center;
    width:100%; max-width:460px; margin:0 auto;
}

.auth-branding-logo{ margin-bottom: 2.25rem; display:flex; justify-content:center; }
.auth-branding-logo .logo-img{ height:80px; width:auto; filter: brightness(0) invert(1); opacity:.97; }

/* ============================================
   DEV CONSOLE — Effet terminal / coding minimaliste
   ============================================ */

   .dev-console{
    width: 100%;
    max-width: 440px;
    margin: 0 auto 2.5rem;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    opacity: 0;
    transform: translateY(10px);
    animation: devConsoleIn .5s ease .1s forwards;
}

@keyframes devConsoleIn{
    to{ opacity:1; transform: translateY(0); }
}

.dev-console-bar{
    display:flex; align-items:center; gap:8px;
    padding: 12px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.dev-console-dot{
    width:10px; height:10px; border-radius:50%;
    display:inline-block; opacity:.85;
}
.dev-console-dot.red    { background:#ff5f57; }
.dev-console-dot.yellow { background:#febc2e; }
.dev-console-dot.green  { background:#28c840; }

.dev-console-title{
    margin-left: 6px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 11.5px;
    color: rgba(255,255,255,.4);
    letter-spacing: .01em;
}

.dev-console-body{
    padding: 18px 20px 22px;
    min-height: 210px;
    max-height: 210px;
    overflow: hidden;
    position: relative;
}

.dev-console-body pre{
    margin: 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(255,255,255,.82);
    white-space: pre-wrap;
    word-break: break-word;
}

.dev-console-cursor{
    display: inline-block;
    color: var(--auth-primary);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    margin-left: 1px;
    animation: devCursorBlink 1s step-end infinite;
    vertical-align: -1px;
}

@keyframes devCursorBlink{
    0%, 49%  { opacity: 1; }
    50%, 100%{ opacity: 0; }
}

/* Coloration syntaxique minimaliste via spans injectés en JS */
.dev-tok-key    { color: #f6935f; }
.dev-tok-string { color: #a8e6a3; }
.dev-tok-num    { color: #7dd3fc; }
.dev-tok-comment{ color: rgba(255,255,255,.32); font-style: italic; }
.dev-tok-method { color: #c084fc; font-weight: 600; }
.dev-tok-punct  { color: rgba(255,255,255,.45); }

@media screen and (max-height: 780px){
    .dev-console{ max-width: 380px; margin-bottom: 1.5rem; }
    .dev-console-body{ min-height: 170px; max-height: 170px; padding: 14px 16px 18px; }
    .dev-console-body pre{ font-size: 11.5px; line-height: 1.6; }
}
@media screen and (max-height: 680px){
    .dev-console{ display: none; }
}

@media (prefers-reduced-motion: reduce){
    .dev-console{ animation: none !important; opacity: 1 !important; transform: none !important; }
    .dev-console-cursor{ animation: none !important; opacity: 1 !important; }
}

/* ── Bullet points features (alignés à gauche, une seule ligne) ── */
.auth-branding .auth-features{ width:100%; margin-bottom:0; }
.auth-branding .features-list{
    display:flex; flex-direction:column; gap:1.5rem;
    align-items: flex-start;
}
.auth-branding .features-list li{
    display:flex; flex-direction:row; align-items:flex-start; gap:1rem;
    text-align:left; width:100%;
}

.feature-icon-check{
    width:32px; height:32px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature-icon-check ion-icon{ font-size:16px; color:#fff !important; }

.auth-branding .feature-text{
    text-align:left;
    max-width:none;
    width:100%;
    min-width:0;
}
.auth-branding .feature-text h3{
    font-family: var(--font-serif);
    font-weight:500;
    line-height:1.35;
    letter-spacing:-0.01em;
    color:#fff;
    margin:0 0 4px;
    white-space: nowrap;
    overflow: visible;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
}
.auth-branding .feature-text p{
    font-size:.9rem;
    color: rgba(255,255,255,.55);
    line-height:1.5;
    margin:0;
    white-space: normal;
    max-width:none;
}

@media screen and (max-height: 860px){
    :root{ --auth-hd-scale:.85; }
    .auth-branding-logo .logo-img{ height:60px; }
}
@media screen and (max-height: 780px){
    :root{ --auth-hd-scale:.68; }
    .auth-branding .features-list{ gap:1.1rem; }
    .auth-branding .feature-text h3{ font-size: clamp(0.85rem, 1.4vw, 1rem); }
    .auth-branding-logo{ margin-bottom:1.25rem; }
    .auth-branding-logo .logo-img{ height:50px; }
}
@media screen and (max-height: 680px){ .auth-hd-outer{ display:none; } }

/* Sécurité sur largeurs intermédiaires (tablette large juste au-dessus de 1024px) :
   si le titre ne tient toujours pas, on autorise un retour à la ligne propre
   plutôt qu'un débordement du panneau. */
@media screen and (max-width: 1180px) and (min-width: 1025px){
    .auth-branding .feature-text h3{
        white-space: normal;
        font-size: 0.95rem;
    }
}

/* ============================================
   RIGHT SIDE — LIQUID GLASS FORM
   ============================================ */

.auth-forms-container{
    background: #F2F2F6;
    padding: 3rem;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    position:relative; overflow-y:auto; overflow-x:hidden;
    scrollbar-width: thin; scrollbar-color: rgba(10,10,10,.18) transparent;
}
.auth-forms-container::-webkit-scrollbar{ width:6px; }
.auth-forms-container::-webkit-scrollbar-track{ background:transparent; }
.auth-forms-container::-webkit-scrollbar-thumb{ background: rgba(10,10,10,.15); border-radius:10px; }
.auth-forms-container::-webkit-scrollbar-thumb:hover{ background: rgba(10,10,10,.28); }

.auth-forms-wrapper{ width:100%; max-width:480px; margin:auto; padding:2rem 0; position:relative; }

/* ── Carte principale glass ── */
.auth-form-card{
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 28px;
    padding: 40px;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 24px 60px rgba(242,112,62,.12), 0 4px 14px rgba(10,10,10,.06), inset 0 1px 0 rgba(255,255,255,.9);
    position:relative; overflow:hidden;
    animation: fadeInUp .5s ease;
}
.auth-form-card.hidden{ display:none; }
.auth-form-card::before{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 35%, transparent 65%, rgba(255,255,255,.15) 100%);
}
.auth-form-card > *{ position:relative; z-index:1; }

@keyframes fadeInUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }

/* Form Header */
.form-header{ text-align:center; margin-bottom:2rem; position:relative; }
.form-title{
    font-family: var(--font-serif); font-size:2rem; font-weight:500;
    color: var(--lp-ink); margin-bottom:.5rem; letter-spacing:-0.02em;
}
.form-subtitle{ font-size:1rem; color: var(--lp-text-muted); line-height:1.6; }
.dev-eyebrow{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color: var(--auth-primary); background: rgba(242,112,62,.1);
    padding:5px 12px; border-radius:999px; margin-bottom:14px;
}

/* Social buttons */
.social-login-buttons{ display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.5rem; }
.social-btn{
    width:100%; padding:.875rem 1.25rem; border-radius:999px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.8);
    color: var(--lp-ink); font-size:.9375rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:.75rem;
    transition: var(--lp-transition);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 4px 14px rgba(242,112,62,.08), inset 0 1px 0 rgba(255,255,255,.8);
}
.social-btn:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.78);
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 10px 26px rgba(242,112,62,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
.social-btn:active{ transform:translateY(0); }
.social-btn ion-icon{ font-size:1.15rem; }

/* Divider */
.auth-divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0; }
.divider-line{ flex:1; height:1px; background: var(--lp-border-soft); }
.divider-text{ font-size:.75rem; color: var(--lp-text-faint); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

/* Form elements */
.auth-form{ display:flex; flex-direction:column; gap:1.25rem; }
.form-group{ display:flex; flex-direction:column; gap:.5rem; }
.form-label{
    font-size:.72rem; font-weight:700; color: var(--lp-text-faint) !important;
    text-transform:uppercase; letter-spacing:.05em;
}

.form-input{
    width:100%; padding:.875rem 1.4rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.8);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--lp-ink) !important; font-size:1rem; font-family:inherit;
    transition: var(--lp-transition);
    box-shadow: inset 0 1px 3px rgba(242,112,62,.05);
}
.form-input::placeholder{ color: var(--lp-text-faint) !important; }
.form-input:hover:not(:focus){ background: rgba(255,255,255,.68); border-color: rgba(255,255,255,.9); }
.form-input:focus{
    outline:none; background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.95);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    box-shadow: 0 8px 24px rgba(242,112,62,.14), inset 0 1px 3px rgba(242,112,62,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
.form-input.input-error, .form-input.error{ border-color: var(--auth-error) !important; }
.form-input.error:focus{ box-shadow: 0 0 0 4px rgba(220,38,38,.12); }

.form-input{ color-scheme: light; caret-color: var(--lp-ink); }
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active{
    -webkit-text-fill-color: var(--lp-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.75) inset !important;
    box-shadow: 0 0 0 1000px rgba(255,255,255,.75) inset !important;
    background-color: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 999px !important;
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s;
}

.dev-field-error{ font-size:.85rem; color: var(--auth-error); min-height:0; }

/* Buttons */
button{ font-family:inherit; }
.btn-primary{
    width:100%; padding:1rem 1.5rem; border:none; cursor:pointer;
    margin-top:24px; border-radius:999px; font-size:1rem; font-weight:700; color:#fff;
    background: linear-gradient(135deg, #0a0a0a 0%, #26262e 100%);
    box-shadow: 0 10px 28px rgba(10,10,10,.22), inset 0 1px 0 rgba(255,255,255,.08);
    transition: var(--lp-transition);
}
.btn-primary:hover{
    background: linear-gradient(135deg, #1a1a20 0%, #34343d 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(10,10,10,.28), inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Error banner */
.dev-err-banner{
    color: var(--auth-error); font-size:13px; margin:0 0 16px; text-align:center;
    background: rgba(220,38,38,.07); border:1px solid rgba(220,38,38,.16);
    border-radius: var(--lp-radius); padding:10px 14px; display:none;
}
.dev-err-banner:not(:empty){ display:block; }

.dev-footer-link{
    text-align:center; margin-top:1.5rem; padding-top:1.5rem;
    border-top: 1px solid var(--lp-border-soft);
    font-size:.9375rem; color: var(--lp-text-muted);
}
.dev-footer-link a{ color: var(--auth-primary); font-weight:800; text-decoration:none; margin-left:.25rem; transition: color .3s ease; }
.dev-footer-link a:hover{ color: var(--auth-accent); text-decoration:underline; }

.dev-icon-circle{
    width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(242,112,62,.08); border:1px solid rgba(242,112,62,.18);
}
.dev-icon-circle ion-icon{ font-size:28px; color: var(--auth-primary); }
.dev-icon-circle.success{ background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.2); }
.dev-icon-circle.success ion-icon{ color: var(--auth-success); }

.center{ text-align:center; }
.hidden{ display:none !important; }

.dev-strength-bars{ display:flex; gap:.25rem; margin-top:.5rem; }
.dev-strength-bar{ height:4px; flex:1; background: var(--lp-border-soft); border-radius:2px; transition: var(--lp-transition); }
.dev-strength-bar.active{ background: var(--auth-primary); }
.dev-strength-text{ font-size:.72rem; font-weight:700; color: var(--lp-text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:6px; text-align:right; }

/* Trust badges (footer bas de carte) */
.trust-badges{
    display:flex; align-items:center; justify-content:center; gap:2rem;
    padding-top:2rem; margin-top:2rem; border-top:1px solid var(--lp-border-soft);
}
.trust-badge{ display:flex; align-items:center; gap:.5rem; color: var(--lp-text-muted); font-size:.85rem; font-weight:600; }
.trust-badge ion-icon{ font-size:1rem; color: var(--auth-success) !important; }

/* ============================================
   RESPONSIVE — TABLETTE (≤1024px) : uniquement le form
   ============================================ */

@media screen and (max-width: 1024px){
    body .auth-wrapper{ display:grid !important; grid-template-columns:1fr !important; height:auto !important; min-height:100vh !important; overflow:visible !important; overflow-x:hidden !important; }
    body .auth-branding{ display:none !important; }
    body .auth-forms-container{
        display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
        min-height:100vh !important; overflow-y:visible !important; overflow-x:hidden !important;
        padding:1.5rem 1.5rem 3rem !important; width:100% !important; box-sizing:border-box !important; height:auto !important;
    }
    body .auth-forms-wrapper{ width:100% !important; max-width:480px !important; margin:0 auto !important; padding-top:5rem !important; padding-bottom:2rem !important; box-sizing:border-box !important; }
    body .back-to-home{ position:fixed !important; top:1rem !important; left:1rem !important; padding:.625rem 1rem !important; font-size:.8125rem !important; border-radius:10px !important; z-index:1000 !important; }
}

@media screen and (max-width: 768px){
    body .form-input{ font-size:16px !important; -webkit-text-size-adjust:100% !important; }
    body .btn-primary{ min-height:52px !important; width:100% !important; box-sizing:border-box !important; }
    body .social-btn{ min-height:50px !important; width:100% !important; box-sizing:border-box !important; }
    body .auth-form-card{ padding:28px 22px !important; }
}

@media screen and (max-width: 640px){
    body .auth-forms-container{ padding:1.5rem 1rem 3rem !important; }
    body .auth-forms-wrapper{ padding-top:4rem !important; padding-bottom:2.5rem !important; }
    body .back-to-home{ padding:.625rem !important; border-radius:50% !important; width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; justify-content:center !important; }
    body .back-to-home span{ display:none !important; }
    body .form-title{ font-size:1.625rem !important; }
}

@media screen and (max-width: 480px){
    body .trust-badges{ gap:6px !important; padding-top:1.25rem !important; margin-top:1.25rem !important; }
    body .trust-badge{ font-size:.68rem !important; gap:.3rem !important; flex:1 1 0; justify-content:center; white-space:nowrap; }
    body .form-title{ font-size:1.5rem !important; }
    body .form-subtitle{ font-size:.9375rem !important; }
}

@media screen and (max-width: 360px){
    body .auth-forms-container{ padding:1rem .75rem 2.5rem !important; }
    body .auth-forms-wrapper{ padding-top:3.75rem !important; }
    body .form-title{ font-size:1.375rem !important; }
    body .form-input{ padding:.75rem .875rem !important; }
    body .auth-form{ gap:1rem !important; }
}

@supports (padding: env(safe-area-inset-top)){
    @media screen and (max-width: 1024px){
        body .auth-forms-container{
            padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
            padding-right: max(1.5rem, env(safe-area-inset-right)) !important;
            padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
        }
        body .back-to-home{ top: max(1rem, env(safe-area-inset-top)) !important; left: max(1rem, env(safe-area-inset-left)) !important; }
    }
}

@media (prefers-reduced-motion: reduce){
    .auth-hd-wrap, .auth-hd-svg, .auth-hd-svg path, .auth-hd-node{
        animation:none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important;
    }
    *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Microsoft button — identique au style Google, pas de couleur de marque dominante
   pour rester cohérent avec le design glass neutre */
.social-btn.microsoft-btn{
    /* hérite entièrement de .social-btn — aucune surcharge nécessaire */
}
.social-btn.microsoft-btn svg{
    flex-shrink: 0;
}

/* ============================================
   MFA SIGN-IN MODAL — Developer Portal
   ============================================ */

   .auth-mfa-overlay{
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,10,10,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
}
.auth-mfa-overlay.hidden{ display:none; }

.auth-mfa-card{
    width: 100%; max-width: 420px;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    animation: fadeInUp .3s ease;
}

.auth-mfa-header{
    display:flex; align-items:center; gap:12px; margin-bottom: 18px;
}
.auth-mfa-header h2{
    font-family: var(--font-serif);
    font-size: 1.3rem; font-weight: 600; color: var(--lp-ink); margin:0;
}
.auth-mfa-text{
    font-size: .9rem; color: var(--lp-text-muted); margin-bottom: 14px; line-height:1.5;
}

.mfa-factor-choice-btn{
    width:100%; padding: 12px 16px; border-radius: 12px;
    background: var(--lp-glass-bg);
    border: 1px solid var(--lp-glass-border);
    display:flex; align-items:center; gap:10px;
    font-size: .9rem; font-weight:600; color: var(--lp-ink);
    cursor:pointer; transition: var(--lp-transition);
}
.mfa-factor-choice-btn:hover{
    background: var(--lp-glass-bg-hover);
    border-color: var(--lp-glass-border-hv);
}

#mfaSignInRecaptchaContainer{ margin-bottom: 10px; }

.auth-mfa-card .btn-auth-primary,
.auth-mfa-card .btn-auth-secondary{
    width:100%; padding: 0.9rem 1.25rem; border:none; cursor:pointer;
    border-radius:999px; font-size:.95rem; font-weight:700;
    transition: var(--lp-transition); margin-top: 10px;
}
.auth-mfa-card .btn-auth-primary{
    color:#fff;
    background: linear-gradient(135deg, #0a0a0a 0%, #26262e 100%);
}
.auth-mfa-card .btn-auth-primary:hover{ transform: translateY(-2px); }
.auth-mfa-card .btn-auth-secondary{
    background: var(--lp-glass-bg);
    color: var(--lp-ink);
    border: 1px solid var(--lp-glass-border);
}
.auth-mfa-card .btn-auth-secondary:hover{ background: var(--lp-glass-bg-hover); }

.auth-mfa-card .form-error{
    font-size:.85rem; color: var(--auth-error);
}
.auth-mfa-card .form-input{
    /* réutilise .form-input existant */
    text-align: center;
    letter-spacing: 4px;
    font-weight: 700;
}