/* =========================================================
 * AktaWifi — Premium Tech 2026 light · CSS partagé
 * Chargé par index.html + toutes les pages internes pour
 * cohérence visuelle complète du site.
 * Inspirations : Stripe, Linear, Vercel light mode.
 * ========================================================= */

:root {
    --grad-teal:   #14B8A6;
    --grad-coral:  #FB7185;
    --grad-violet: #8B5CF6;
    --paper:       #FAFBFC;
    --ink:         #0F172A;
}

html { scroll-behavior: smooth; }
body.akzp {
    font-family: 'Geist', system-ui, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────
   Mesh gradient SUBTIL en background du body
   ───────────────────────────────────────────────────────────────── */
.akzp-mesh-bg {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.akzp-mesh-blob {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.18;
    animation: akzp-mesh-float 22s ease-in-out infinite;
}
.akzp-mesh-blob.b1 { background: var(--grad-teal);   top: -250px; left: -150px;
                     animation-delay: 0s; }
.akzp-mesh-blob.b2 { background: var(--grad-coral);  top: 50px;   right: -150px;
                     animation-delay: -8s; opacity: 0.15; }
.akzp-mesh-blob.b3 { background: var(--grad-violet); bottom: -200px; left: 35%;
                     animation-delay: -15s; opacity: 0.12; }

@keyframes akzp-mesh-float {
    0%, 100% { transform: translate(0, 0)   scale(1); }
    33%      { transform: translate(60px, -40px) scale(1.1); }
    66%      { transform: translate(-40px, 50px) scale(0.95); }
}

/* Grille tech overlay 1px subtile */
body.akzp::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    z-index: 0;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   Typo Premium
   ───────────────────────────────────────────────────────────────── */
.akzp-display {
    font-family: 'Geist', sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.0;
}
.akzp-mono { font-family: 'Geist Mono', monospace; font-feature-settings: 'tnum'; }

.akzp-gradient-text {
    background: linear-gradient(135deg, #0D9488 0%, #8B5CF6 50%, #FB7185 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─────────────────────────────────────────────────────────────────
   Glassmorphism light : cards blanches sur fond légèrement coloré
   ───────────────────────────────────────────────────────────────── */
.akzp-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 10px 40px -10px rgba(15, 23, 42, 0.08),
        0 2px 8px -2px rgba(15, 23, 42, 0.04);
}
.akzp-glass:hover {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 16px 50px -10px rgba(20, 184, 166, 0.15),
        0 4px 12px -2px rgba(15, 23, 42, 0.05);
}

.akzp-glass-premium {
    background: white;
    border-radius: 24px;
    position: relative;
    box-shadow:
        0 20px 60px -10px rgba(15, 23, 42, 0.12),
        0 4px 16px -4px rgba(15, 23, 42, 0.06);
}

/* ─────────────────────────────────────────────────────────────────
   Boutons Premium
   ───────────────────────────────────────────────────────────────── */
.akzp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 0 0 1px rgba(20, 184, 166, 0.2),
        0 8px 24px -4px rgba(20, 184, 166, 0.35),
        0 2px 8px -2px rgba(20, 184, 166, 0.2);
    transition: all 0.2s ease;
}
.akzp-btn-primary:hover {
    transform: translateY(-1px);
    color: white;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 0 0 1px rgba(20, 184, 166, 0.3),
        0 12px 32px -4px rgba(20, 184, 166, 0.5),
        0 4px 12px -2px rgba(20, 184, 166, 0.3);
}
.akzp-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.8);
    font-weight: 500;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}
.akzp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ─────────────────────────────────────────────────────────────────
   Scroll-driven fade-up
   ───────────────────────────────────────────────────────────────── */
.akzp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.akzp-reveal.is-visible { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────────────────────
   Sticky nav avec backdrop blur
   ───────────────────────────────────────────────────────────────── */
.akzp-nav-glass {
    background: rgba(250, 251, 252, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Logo SIGNATURE : constant sur toutes les pages */
.akzp-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Geist', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-decoration: none;
}
.akzp-logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0D9488 0%, #FB7185 100%);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: -0.5px;
}

/* Couleurs utilitaires */
.akzp-text-muted  { color: rgba(15, 23, 42, 0.5); }
.akzp-text-soft   { color: rgba(15, 23, 42, 0.65); }
.akzp-border-soft { border-color: rgba(15, 23, 42, 0.08); }

/* ─────────────────────────────────────────────────────────────────
   Sections internes (titres + sous-titres standardisés)
   ───────────────────────────────────────────────────────────────── */
.akzp-section-eyebrow {
    font-family: 'Geist Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #0D9488;
    margin-bottom: 12px;
}
.akzp-section-title {
    font-family: 'Geist', sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-size: clamp(2rem, 4.5vw, 3rem);
}
.akzp-section-sub {
    color: rgba(15, 23, 42, 0.65);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 14px;
}

/* Override des cards Tailwind présentes dans les pages legacy pour
   qu'elles adoptent le look glassmorphism léger */
body.akzp .rounded-xl.border.border-slate-200,
body.akzp .rounded-2xl.border.border-slate-200,
body.akzp .border.border-slate-200.bg-white {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 8px 30px -10px rgba(15, 23, 42, 0.08);
}

/* Section background slate-50 trop "morne" → on garde le mesh */
body.akzp .bg-slate-50 {
    background: transparent !important;
}
body.akzp .bg-slate-900 {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    position: relative;
}