/* ==========================================================================

   1. VARIABLES & CONFIGURATION

   ========================================================================== */

:root {

    /* Couleurs Thème */

    --bg-main: #0b1020;

    --bg-input: #111827;

    --text-main: #e5e7eb;

    --text-muted: #94a3b8;

    --text-light: #cbd5e1;

    

    /* Gradients */

    --gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed);

    --gradient-danger: linear-gradient(135deg, #dc2626, #991b1b);

    --gradient-success: linear-gradient(135deg, #16a34a, #059669);

    

    /* Glassmorphism & Bordures */

    --glass-bg: rgba(255, 255, 255, 0.07);

    --glass-border: rgba(255, 255, 255, 0.12);

    --glass-focus: rgba(37, 99, 235, 0.5);

    

    /* Animations */

    --transition-fast: 0.2s ease-in-out;

}



*, *::before, *::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: Arial, system-ui, sans-serif; /* Fallback moderne */

    background-color: var(--bg-main);

    color: var(--text-main);

    line-height: 1.5; /* Améliore la lisibilité globale */

    -webkit-font-smoothing: antialiased;

}



/* ==========================================================================

   2. MISE EN PAGE & CONTENEURS

   ========================================================================== */

.container {

    width: 100%;

    max-width: 1200px;

    margin-inline: auto; /* Raccourci moderne pour margin-left/right auto */

    padding: 28px;

}



.card {

    background: var(--glass-bg);

    border: 1px solid var(--glass-border);

    border-radius: 18px;

    padding: 24px;

    margin-bottom: 22px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(8px); /* Effet flou "glassmorphism" réel */

}



/* ==========================================================================

   3. FORMULAIRES (INPUTS, SELECT, TEXTAREA)

   ========================================================================== */

input, select, textarea {

    width: 100%;

    padding: 13px;

    margin-top: 8px;

    margin-bottom: 15px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background-color: var(--bg-input);

    color: #fff;

    font-family: inherit; /* Aligne la police avec le body */

    font-size: 1rem;

    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



/* Amélioration de l'accessibilité au focus */

input:focus, select:focus, textarea:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow: 0 0 0 3px var(--glass-focus);

}



/* ==========================================================================

   4. BOUTONS & BADGES

   ========================================================================== */

button, .btn {

    display: inline-flex; /* Aligne mieux le texte et les icônes si besoin */

    align-items: center;

    justify-content: center;

    padding: 11px 16px;

    margin: 4px;

    border-radius: 12px;

    border: none;

    background: var(--gradient-primary);

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    text-decoration: none;

    transition: opacity var(--transition-fast), transform 0.1s ease;

}



button:hover, .btn:hover {

    opacity: 0.9;

}



button:active, .btn:active {

    transform: scale(0.98); /* Petit effet de clic dynamique */

}



.danger  { background: var(--gradient-danger); }

.success { background: var(--gradient-success); }

.primary { background: var(--gradient-primary); }



.ghost {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #fff;

}

.ghost:hover {

    background: rgba(255, 255, 255, 0.15);

}



.large {

    padding: 15px 24px;

    font-size: 16px;

}



.badge {

    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.2);

    color: #93c5fd;

    font-size: 12px;

    font-weight: 600;

}



/* ==========================================================================

   5. TABLEAUX (RESPONSIVE READY)

   ========================================================================== */

.table-container {

    overflow-x: auto; /* Empêche le tableau de casser le design sur mobile */

    margin-bottom: 22px;

}



table {

    width: 100%;

    border-collapse: collapse;

    background: rgba(255, 255, 255, 0.03);

    text-align: left; /* Meilleure pratique par défaut */

}



th, td {

    border: 1px solid var(--glass-border);

    padding: 12px;

    vertical-align: middle;

}



th {

    background: rgba(255, 255, 255, 0.08);

    font-weight: 600;

}



/* ==========================================================================

   6. SECTIONS : LANDING & HERO

   ========================================================================== */

.landing {

    background:

        radial-gradient(circle at top left, rgba(29, 78, 216, 0.4), transparent 45%),

        radial-gradient(circle at top right, rgba(124, 58, 237, 0.4), transparent 45%),

        var(--bg-main); /* Opacité réduite pour un rendu plus élégant */

}



.hero {

    min-height: 75vh;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px 24px;

}



.navbar {

    width: 100%;

    max-width: 1200px;

    margin-inline: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 30px;

    font-weight: bold;

    letter-spacing: 1px;

}



.hero-content {

    max-width: 800px;

    margin: auto; /* Centre verticalement et horizontalement dans le flex-container */

    padding: 60px 0;

    text-align: center;

}



.hero-content h1 {

    font-size: clamp(2.5rem, 5vw, 3.375rem); /* Taille fluide selon l'écran (36px à 54px) */

    margin-bottom: 20px;

    line-height: 1.2;

}



.hero-content p {

    font-size: 19px;

    color: var(--text-light);

    line-height: 1.7;

    margin-bottom: 30px;

}



/* ==========================================================================

   7. GRILLE DE FONCTIONNALITÉS (FEATURES)

   ========================================================================== */

.features {

    max-width: 1200px;

    margin: auto;

    padding: 60px 28px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive automatique sans media query */

    gap: 22px;

}



.feature-card {

    background: var(--glass-bg);

    border: 1px solid var(--glass-border);

    border-radius: 18px;

    padding: 26px;

    backdrop-filter: blur(8px);

}



footer {

    text-align: center;

    padding: 40px 25px;

    color: var(--text-muted);

    font-size: 14px;

}



/* ==========================================================================

   8. MEDIA QUERIES (ADAPTATIONS FINES)

   ========================================================================== */

@media (max-width: 768px) {

    .container {

        padding: 16px;

    }

    

    .hero-content {

        padding: 40px 0;

    }



    table {

        font-size: 13px;

    }

}
.subscription-link{
    text-align:center;
    margin-top:6px;
}

.subscription-link a{
    display:inline-block;
    color:#ffffff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    opacity:0.85;
    transition:0.2s;
}

.subscription-link a:hover{
    opacity:1;
    color:#f8fafc;
}
.toast-copy{
    position:fixed;
    bottom:25px;
    right:25px;

    background:linear-gradient(135deg,#16a34a,#059669);

    color:#fff;

    padding:12px 18px;

    border-radius:12px;

    font-size:14px;
    font-weight:600;

    box-shadow:0 10px 30px rgba(0,0,0,0.35);

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:all .25s ease;
}

.toast-copy.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.key-inline{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.edit-key-icon{
    width:25px;
    height:25px;
    padding:0;
    margin:0;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.edit-key-icon:hover{
    opacity:.9;
}
.alert-success{
    background:rgba(22,163,74,.15);
    border:1px solid rgba(22,163,74,.35);
    color:#86efac;
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
}

.alert-danger{
    background:rgba(220,38,38,.15);
    border:1px solid rgba(220,38,38,.35);
    color:#fca5a5;
    padding:12px;
    border-radius:12px;
    margin-bottom:20px;
}
.custom-modal{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:95%;
    max-width:650px;
    max-height:85vh;
    overflow-y:auto;
    z-index:10001;
    display:none;
    background:rgba(18,24,48,0.98);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    padding:25px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.btn-full{
    width:100%;
    margin-top:10px;
}
.subscription-link{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:8px;
}

.delete-device-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(239,68,68,.15);
    color:#ef4444 !important;
    text-decoration:none;
    font-size:14px;
    transition:.2s;
}

.delete-device-link:hover{
    background:rgba(239,68,68,.30);
    color:#f87171 !important;
}