/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  SecurePass — styles.css                                    ║
 * ║  Mad Cre@tive Lab © 2025                                    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════
   CSS VARIABLES & RESET
════════════════════════════════════ */
:root {
    --blue: #3b82f6;
    --blue-glow: rgba(59,130,246,0.35);
}

* { box-sizing: border-box; }

body {
    font-family: 'Syne', sans-serif;
    transition: background-color .4s, color .4s;
}

html:not(.dark) body { background-color: #f0f6ff; }


/* ════════════════════════════════════
   LANDING — BACKGROUND
════════════════════════════════════ */
#landing {
    position: fixed; inset: 0;
    background: #0a0f1e;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 100; overflow: hidden;
    transition: background .4s;
}
html:not(.dark) #landing { background: #dbeafe; }

.grid-bg {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(59,130,246,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.07) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridPan 18s linear infinite;
}
html:not(.dark) .grid-bg {
    background-image:
        linear-gradient(rgba(59,130,246,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.14) 1px, transparent 1px);
}
@keyframes gridPan { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }

.glow-blob {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,.18) 0%, transparent 70%);
    animation: blobPulse 4s ease-in-out infinite;
    pointer-events: none;
}
html:not(.dark) .glow-blob { background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%); }
@keyframes blobPulse {
    0%,100% { transform: scale(1); opacity: .7; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* ── Particules flottantes ── */
.particle {
    position: absolute; width: 2px; height: 2px;
    background: var(--blue); border-radius: 50%; opacity: 0;
    animation: floatUp linear infinite;
}
@keyframes floatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .4; }
    100% { transform: translateY(-80vh) translateX(var(--drift)); opacity: 0; }
}


/* ════════════════════════════════════
   LANDING — ELEMENTS
════════════════════════════════════ */

/* Conteneur principal centré — adaptatif */
#landing .landing-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 4vw, 2rem) clamp(1.5rem, 5vw, 3rem);
    gap: clamp(0.75rem, 2vh, 1.5rem);
    width: 100%;
    max-width: min(560px, 94vw);
    box-sizing: border-box;
}

/* Icône */
.landing-icon {
    width:  clamp(60px, 10vw, 90px);
    height: clamp(60px, 10vw, 90px);
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    border-radius: clamp(16px, 2.5vw, 28px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 60px rgba(59,130,246,.5), 0 0 120px rgba(59,130,246,.2);
    opacity: 0; transform: scale(.6) translateY(20px);
    animation: popIn .7s cubic-bezier(.34,1.56,.64,1) .3s forwards;
    flex-shrink: 0;
}
.landing-icon svg {
    width:  clamp(30px, 5.5vw, 48px);
    height: clamp(30px, 5.5vw, 48px);
}
@keyframes popIn { to { opacity: 1; transform: scale(1) translateY(0); } }

/* Titre — taille calculée pour tenir sur une seule ligne dans son conteneur */
.l-title-text {
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    width: 100%;
    /* vw seul : le titre occupe une fraction fixe de la largeur d'écran
       min() empêche le débordement sur grands écrans
       Le titre "SECUREPASS" fait ~10 caractères → 7vw par char ≈ 70vw total
       On garde une marge et on bride à 3.5rem max */
    font-size: clamp(1.8rem, 7.5vw, 3.5rem);
    white-space: nowrap;
    /* Si malgré tout ça déborde (zoom navigateur…), on réduit automatiquement */
    overflow: hidden;
    text-overflow: clip;
    /* Dernier recours : scale pour que le texte ne dépasse jamais */
    display: block;
}

/* Typewriter */
.l-typewriter {
    font-size: clamp(0.58rem, 1.8vw, 0.75rem);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 0.3rem;
}

/* Sous-titre */
.l-subtitle {
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    line-height: 1.65;
    max-width: min(380px, 90vw);
    color: #64748b;
}
html.dark .l-subtitle { color: #94a3b8; }

/* Animations d'entrée */
.l-title   { opacity: 0; transform: translateY(16px); animation: fadeUp .6s ease .9s  forwards; width: 100%; }
.l-sub     { opacity: 0; transform: translateY(12px); animation: fadeUp .6s ease 1.1s forwards; }
.l-enter   { opacity: 0; transform: translateY(12px); animation: fadeUp .6s ease 1.4s forwards; }
.l-feats   { opacity: 0;                              animation: fadeUp .6s ease 1.6s forwards; }
.l-credit  { opacity: 0;                              animation: fadeUp .6s ease 2s   forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Typewriter cursor */
.typewriter::after {
    content: '|';
    animation: blink .8s step-end infinite;
    color: var(--blue);
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Feature pills */
.l-feats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(5px, 1.2vw, 10px);
    width: 100%;
}
.feat-pill {
    display: flex; align-items: center;
    gap: clamp(4px, 0.8vw, 6px);
    padding: clamp(4px, 0.8vw, 7px) clamp(9px, 2vw, 14px);
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 100px;
    font-size: clamp(9px, 1.6vw, 11px);
    font-family: 'Space Mono', monospace;
    letter-spacing: .05em;
    color: rgba(0,0,0,.5);
    white-space: nowrap;
}
html.dark .feat-pill { color: rgba(255,255,255,.5); }
.feat-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

/* Enter button */
.enter-btn {
    position: relative;
    padding: clamp(10px, 2vw, 14px) clamp(28px, 6vw, 48px);
    background: transparent;
    border: 1px solid rgba(59,130,246,.5);
    border-radius: 14px;
    font-family: 'Space Mono', monospace;
    font-size: clamp(10px, 2vw, 13px);
    letter-spacing: .2em;
    cursor: pointer; overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
    color: #fff;
    min-width: clamp(150px, 35vw, 200px);
}
html:not(.dark) .enter-btn { color: #1e3a8a; border-color: rgba(59,130,246,.7); }
.enter-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(59,130,246,.05));
    opacity: 0; transition: opacity .3s;
}
.enter-btn:hover           { border-color: var(--blue); box-shadow: 0 0 30px rgba(59,130,246,.3); }
.enter-btn:hover::before   { opacity: 1; }
.enter-btn:active          { transform: scale(.97); }
.enter-btn .scan {
    position: absolute; top: -100%; left: 0; right: 0; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(59,130,246,.2), transparent);
    animation: scanLine 2s ease-in-out infinite;
}
@keyframes scanLine { 0% { top: -100%; } 100% { top: 100%; } }

/* Crédit bas de page */
.l-credit-bar {
    position: absolute;
    bottom: clamp(10px, 2.5vh, 24px);
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.l-credit-text {
    font-size: clamp(8px, 1.5vw, 11px);
    font-family: 'Space Mono', monospace;
    letter-spacing: .15em;
    color: #94a3b8;
}
html.dark .l-credit-text { color: #475569; }

/* Landing exit transition */
#landing.exit { animation: landingExit .9s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes landingExit {
    0%   { opacity: 1; transform: scale(1);    clip-path: inset(0 0 0 0); }
    60%  { opacity: 1; transform: scale(1.03); clip-path: inset(0 0 0 0); }
    100% { opacity: 0; transform: scale(1.06); clip-path: inset(0 0 100% 0); }
}

/* ── Petits mobiles (< 380px) ── */
@media (max-width: 380px) {
    .l-title-text { font-size: 1.7rem; }
    .l-feats-grid { gap: 5px; }
    .feat-pill    { font-size: 9px; padding: 4px 9px; }
}

/* ── Très petite hauteur (< 600px — ex: iPhone SE, mode paysage) ── */
@media (max-height: 600px) {
    #landing .landing-inner { gap: 0.45rem; padding: 0.75rem 1.5rem; }
    .landing-icon            { width: 52px; height: 52px; border-radius: 14px; }
    .landing-icon svg        { width: 28px; height: 28px; }
    .l-feats-grid            { display: none; }
    .l-credit-bar            { display: none; }
}

/* ── Mode paysage très bas (< 440px) ── */
@media (max-height: 440px) and (orientation: landscape) {
    #landing .landing-inner {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.5rem 1.5rem;
        padding: 0.5rem 2rem;
        align-items: center;
        justify-content: center;
    }
    .landing-icon { width: 46px; height: 46px; }
    .landing-icon svg { width: 24px; height: 24px; }
    .l-sub, .l-feats, .l-credit { display: none; }
}

/* ── Grands écrans (> 1400px) ── */
@media (min-width: 1400px) {
    #landing .landing-inner { max-width: 620px; }
    .l-title-text            { font-size: 3.5rem; }
}


/* ════════════════════════════════════
   APP BACKGROUND — Canvas + Orbs + Grid
════════════════════════════════════ */
#appCanvas {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; opacity: 0;
    transition: opacity 1.2s ease .5s;
}
#appCanvas.visible { opacity: 1; }

.orb {
    position: fixed; border-radius: 50%;
    filter: blur(80px); pointer-events: none;
    z-index: 0; opacity: 0; transition: opacity 1.5s ease;
}
.orb.visible { opacity: 1; }

.orb-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(37,99,235,.12) 0%,transparent 70%); top:-120px; left:-150px; animation: od1 22s ease-in-out infinite; }
.orb-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(99,102,241,.09) 0%,transparent 70%); bottom:0; right:-100px; animation: od2 28s ease-in-out infinite; }
.orb-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(59,130,246,.07) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); animation: od3 18s ease-in-out infinite; }

html:not(.dark) .orb-1 { background: radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 70%); }
html:not(.dark) .orb-2 { background: radial-gradient(circle,rgba(99,102,241,.04) 0%,transparent 70%); }
html:not(.dark) .orb-3 { background: radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%); }

@keyframes od1 { 0%,100%{transform:translate(0,0) scale(1)}     33%{transform:translate(60px,40px) scale(1.08)}  66%{transform:translate(-30px,70px) scale(.95)} }
@keyframes od2 { 0%,100%{transform:translate(0,0) scale(1)}     40%{transform:translate(-80px,-50px) scale(1.1)} 70%{transform:translate(40px,-80px) scale(.92)} }
@keyframes od3 { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6} 50%{transform:translate(-50%,-50%) scale(1.3);opacity:1} }

#appGrid {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; opacity: 0;
    background-image:
        linear-gradient(rgba(59,130,246,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    transition: opacity 1.5s ease .8s;
}
html:not(.dark) #appGrid {
    background-image:
        linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);
}
#appGrid.visible { opacity: 1; }
#app > * { position: relative; z-index: 1; }


/* ════════════════════════════════════
   APP — CORE
════════════════════════════════════ */
#app { opacity: 0; transition: opacity .7s ease .4s; }
#app.visible { opacity: 1; }


/* ════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════ */
/* Range slider */
input[type="range"]                               { -webkit-appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { width:100%; height:6px; background:rgba(59,130,246,.15); border-radius:4px; }
html:not(.dark) input[type="range"]::-webkit-slider-runnable-track { background: rgba(59,130,246,.3); }
input[type="range"]::-webkit-slider-thumb {
    height:22px; width:22px; border-radius:50%; background:#3b82f6;
    cursor:pointer; -webkit-appearance:none; margin-top:-8px;
    border:2px solid white; box-shadow:0 0 10px rgba(59,130,246,.4);
}

/* Checkbox */
input[type="checkbox"] { accent-color: #3b82f6; }

/* Password display font */
#passwordDisplay { font-family: 'Space Mono', monospace; letter-spacing: .04em; }

/* QR Code image */
#qrcode img { margin: 0 auto; border: 8px solid white; border-radius: 8px; }


/* ════════════════════════════════════
   STRENGTH BARS
════════════════════════════════════ */
.strength-bar { height: 4px; border-radius: 2px; transition: background .5s ease; }


/* ════════════════════════════════════
   GENERATE GLOW ANIMATION
════════════════════════════════════ */
@keyframes flashGlow {
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
    40%  { box-shadow: 0 0 30px 8px rgba(59,130,246,.4); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.flash-glow { animation: flashGlow .6s ease forwards; }


/* ════════════════════════════════════
   COOKIE BANNER
════════════════════════════════════ */
/* ── Cookie banner — masqué par défaut via transform, sans display:none ── */
#cookieBanner {
    transform: translateY(110%);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34,1.2,.64,1), opacity .4s ease;
    pointer-events: none;
}
#cookieBanner.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#cookieBanner.hide {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
}


/* ════════════════════════════════════
   CUSTOM SCROLLBAR
════════════════════════════════════ */
.custom-scroll::-webkit-scrollbar       { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }
html:not(.dark) .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }


/* ════════════════════════════════════
   ADSENSE — AD SLOTS
════════════════════════════════════ */
.ad-slot {
    width: 100%; display: flex;
    align-items: center; justify-content: center;
    position: relative; z-index: 1;
}
.ad-slot-inner {
    max-width: 728px; width: 100%; min-height: 90px;
    display: flex; align-items: center; justify-content: center;
}
.ad-slot::before {
    content: 'Publicité';
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-family: 'Space Mono', monospace;
    letter-spacing: .1em; color: #64748b; text-transform: uppercase;
    pointer-events: none;
}
html:not(.dark) .ad-slot::before { color: #94a3b8; }

/* Sticky bottom ad */
#ad-sticky-bottom {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    display: none;
    background: rgba(15,23,42,0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(59,130,246,.2);
    padding: 8px 0 6px; text-align: center;
}
html:not(.dark) #ad-sticky-bottom {
    background: rgba(241,245,249,0.97);
    border-top: 1px solid rgba(59,130,246,.15);
}
#ad-sticky-bottom .ad-close {
    position: absolute; top: 4px; right: 8px;
    width: 22px; height: 22px;
    background: rgba(100,116,139,.2); border: none; border-radius: 50%;
    cursor: pointer; font-size: 11px; color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
#ad-sticky-bottom .ad-close:hover { background: rgba(100,116,139,.4); }

.ad-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(59,130,246,.15), transparent);
}