/*
 * nadigit-shared.css  - Brand-aligned revision (Brand Guide V1.2, Mars 2026)
 * Unified design tokens, typography, header, hero, and common components.
 * All pages must link this stylesheet BEFORE their page-specific styles.
 *
 * CHANGES vs. previous version:
 *  – Color tokens updated to match official brand palette exactly
 *  – Display font changed to Poppins (brand guide §8), body to Inter
 *  – Gradients updated to official brand gradients (§7)
 *  – Button primary color updated to #1E5EFF (Bleu SaaS)
 *  – Hero glow accent updated to Cyan Tech (#18C5D8)
 *  – Gold accent (#F4B740) replaces amber (#e8a020) for premium feel
 *  – Dark-mode surface tokens added for app/dashboard usage
 */

/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════ */
:root {
    /* ── Brand Primary Colours (Brand Guide §6) ── */
    --navy:          #0B1F4A;   /* Bleu Marine - principal branding, sidebar */
    --navy-deep:     #08183A;   /* Fond secondaire dark mode (Brand Guide §10.1) */
    --navy-mid:      #102B63;   /* Bleu Corporate - secondary sections       */
    --blue-saas:     #1E5EFF;   /* Bleu SaaS - primary buttons / CTA         */
    --cyan-tech:     #18C5D8;   /* Cyan Tech - IA / innovation / highlights  */
    --green-perf:    #16C784;   /* Vert Performance - validation / analytics */
    --gold:          #F4B740;   /* Or Premium - accent marketing / premium   */
    --gold-light:    #F8CC6E;   /* Lighter gold for hovers                   */
    --gold-pale:     #FEF6E4;   /* Pale gold for pill backgrounds            */

    /* Legacy aliases kept for backward-compat with existing pages */
    --accent:        #F4B740;   /* = --gold */
    --accent-light:  #F8CC6E;   /* = --gold-light */
    --accent-pale:   #FEF6E4;   /* = --gold-pale */
    --teal:          #18C5D8;   /* = --cyan-tech */
    --teal-light:    #D4F5FA;

    /* ── Neutral Palette (Brand Guide §6) ── */
    --white:         #FFFFFF;
    --off-white:     #F5F7FB;   /* Gris Clair - secondary background */
    --gray-100:      #F5F7FB;
    --gray-200:      #DCE3F0;   /* Gris Bordure */
    --gray-400:      #9ba3b8;
    --gray-600:      #667085;   /* Texte Secondaire */
    --gray-900:      #1A1F36;   /* Texte Principal */

    /* ── Dark Mode Surface Tokens (Brand Guide §10.1 Dark Mode) ── */
    --dark-bg:       #0B1F4A;
    --dark-bg-deep:  #08183A;
    --dark-surface:  #102B63;
    --dark-text:     #FFFFFF;
    --dark-text-sub: #C9D4E5;

    /* ── Typography (Brand Guide §8) ── */
    --font-display:  'Poppins', 'Montserrat', sans-serif;   /* Titres / CTA / visuels */
    --font-body:     'Inter', 'Open Sans', sans-serif;      /* Paragraphes / UI       */

    /* RTL / Arabic fallback - Inter covers Arabic reasonably; keep IBM Plex as extra fallback */
    --font-arabic:   'IBM Plex Sans Arabic', 'Inter', sans-serif;

    /* ── Radii ── */
    --radius-sm:     8px;
    --radius-md:     14px;
    --radius-lg:     24px;
    --radius-xl:     40px;

    /* ── Shadows ── */
    --shadow-sm:     0 2px 12px rgba(11,31,74,0.07);
    --shadow-md:     0 8px 32px rgba(11,31,74,0.12);
    --shadow-lg:     0 20px 60px rgba(11,31,74,0.18);

    /* ── Gradients (Brand Guide §7) ── */
    --grad-primary:    linear-gradient(135deg, #0B1F4A 0%, #1E5EFF 100%);
    --grad-innovation: linear-gradient(135deg, #1E5EFF 0%, #18C5D8 100%);
    --grad-analytics:  linear-gradient(135deg, #16C784 0%, #18C5D8 100%);

    /* ── Layout ── */
    --container-max: 1140px;
    --nav-height:    70px;
}


/* ══════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--gray-900);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ══════════════════════════════════════════════════════════
   3. TYPOGRAPHY SYSTEM  (Brand Guide §8)
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.2;
}

/* RTL: Arabic headings use the Arabic-capable body font */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
    font-family: var(--font-arabic);
}

[dir="rtl"] body {
    font-family: var(--font-arabic);
}

/* Section label - small uppercase pill above titles */
.section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-pale);
    border: 1px solid rgba(244,183,64,0.35);
    padding: 4px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
    font-family: var(--font-display);
}

/* Section title */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

/* Section subtitle */
.section-subtitle {
    font-size: 1rem;
    color: var(--gray-600);
    max-width: 620px;
    margin: 0 auto 48px;
    line-height: 1.7;
    font-family: var(--font-body);
}

/* Inverted (dark background) variants */
.section-title--white  { color: var(--white); }
.section-subtitle--white { color: var(--dark-text-sub); }


/* ══════════════════════════════════════════════════════════
   4. LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.section     { padding: 96px 0; }
.text-center { text-align: center; }


/* ══════════════════════════════════════════════════════════
   5. HEADER / NAV  (Brand Guide §10 - Light Mode marketing surface)
   ══════════════════════════════════════════════════════════ */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(8,24,58,0.95);   /* navy-deep semi-transparent */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
    background: rgba(8,24,58,0.99);
    box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}

/* Light Mode header - Brand Guide §10.1 (activates on scroll past hero) */
.header.header-light {
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.header.header-light .logo span { color: var(--navy); }

.header.header-light .nav-links a {
    color: var(--gray-600);
}

.header.header-light .nav-links a:hover { color: var(--blue-saas); }

.header.header-light .language-switcher {
    background: var(--gray-100);
}

.header.header-light .lang-btn {
    color: var(--gray-600);
}

.header.header-light .lang-btn.active {
    background: var(--blue-saas);
    color: var(--white);
}

.header.header-light .nav-hamburger { color: var(--navy); }

/* Logo swap: Light variant only - Dark SVG embeds a navy rect that shows as a box on dark surfaces */
.header .logo-img--dark  { display: none; }
.header .logo-img--light {
    display: block;
    filter: brightness(0) invert(1);
}

.header.header-light .logo-img--light {
    filter: none;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    height: 40px;
    width: auto;
    display: block;
    background: none;
}

.logo span {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-family: var(--font-body);
    transition: color 0.2s;
}

.nav-links a:hover { color: var(--gold-light); }

/* Nav right area */
.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Language switcher */
.language-switcher {
    display: flex;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    padding: 3px;
    gap: 2px;
}

.lang-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
}

.lang-btn.active {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
}

/* Primary CTA in nav - Bleu SaaS (Brand Guide §10 Bouton Principal) */
.nav-trial-btn {
    display: inline-flex;
    align-items: center;
    background: var(--blue-saas);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 99px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-trial-btn:hover {
    background: #1a52e0;   /* slightly darker Bleu SaaS on hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(30,94,255,0.35);
}

/* Mobile hamburger */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 4px;
}


/* ══════════════════════════════════════════════════════════
   6. HERO  (shared baseline - Brand Guide §10 Dark Mode palette for hero)
   ══════════════════════════════════════════════════════════ */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--navy-deep);
    padding-top: var(--nav-height);
}

/* Ambient grid pattern */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

/* Radial glows - Cyan Tech primary, Gold secondary (Brand Guide §6 accent colours) */
.hero-glow {
    position: absolute;
    top: -20%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(24,197,216,0.16) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.hero-glow-2 {
    position: absolute;
    bottom: -20%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(244,183,64,0.10) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* Hero inner - two-column by default */
.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 80px 0;
}

.hero-inner--centered {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Breadcrumb */
.hero-breadcrumb {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.hero-breadcrumb a { color: var(--gold); }

/* Badge pill - Cyan Tech tones (innovation highlight) */
.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(24,197,216,0.12);
    border: 1px solid rgba(24,197,216,0.35);
    color: #7EEAF5;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 99px;
    margin-bottom: 24px;
    letter-spacing: .05em;
    font-family: var(--font-display);
}

.hero-badge-pill .dot {
    width: 6px; height: 6px;
    background: #7EEAF5;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Hero h1 */
.hero h1,
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.12;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

/* Accent word in hero titles → Gold (Or Premium) */
.hero h1 .highlight,
.hero-title em,
.hero-title .accent {
    font-style: normal;
    color: var(--gold);
}

/* Hero description */
.hero-desc {
    font-size: 1.05rem;
    color: var(--dark-text-sub);   /* #C9D4E5 as per dark-mode spec */
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 520px;
    font-family: var(--font-body);
}

.hero-inner--centered .hero-desc { margin-left: auto; margin-right: auto; }

/* CTA row */
.hero-cta-row,
.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-inner--centered .hero-cta-row,
.hero-inner--centered .hero-ctas {
    justify-content: center;
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════
   7. BUTTONS  (Brand Guide §10 Boutons)
   ══════════════════════════════════════════════════════════ */

/* Primary: Bleu SaaS background, white text */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-saas);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 99px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}

.btn-primary:hover {
    background: #1a52e0;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30,94,255,0.38);
}

/* Secondary: white background, blue border + text (light surfaces) */
.btn-secondary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: var(--blue-saas);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 99px;
    text-decoration: none;
    border: 1.5px solid var(--blue-saas);
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.btn-secondary:hover,
.btn-outline:hover {
    background: rgba(30,94,255,0.06);
    border-color: #1a52e0;
}

/* Ghost/outline variant for dark hero backgrounds */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.07);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 99px;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.20);
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.38);
}

/* Gold CTA variant - premium / marketing accent */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 30px;
    border-radius: 99px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
}

.btn-gold:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244,183,64,0.38);
}


/* ══════════════════════════════════════════════════════════
   8. TRUST ITEMS (hero footer row)
   ══════════════════════════════════════════════════════════ */
.hero-trust-row {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    font-family: var(--font-body);
}

.trust-item svg { color: var(--cyan-tech); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════
   9. GRADIENT UTILITY CLASSES  (Brand Guide §7)
   ══════════════════════════════════════════════════════════ */
.bg-grad-primary    { background: var(--grad-primary); }
.bg-grad-innovation { background: var(--grad-innovation); }
.bg-grad-analytics  { background: var(--grad-analytics); }

/* Cyan Tech accent text (IA / tech highlights) */
.text-cyan { color: var(--cyan-tech); }
.text-gold  { color: var(--gold); }
.text-green { color: var(--green-perf); }


/* ══════════════════════════════════════════════════════════
   10. WHATSAPP FLOATING BUTTON
   ══════════════════════════════════════════════════════════ */
.whatsapp-float {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: var(--white);
    padding: 12px 22px;
    border-radius: 99px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 24px rgba(0,0,0,0.28);
    transition: transform 0.25s, box-shadow 0.25s;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.38);
}


/* ══════════════════════════════════════════════════════════
   11. SCROLL-REVEAL ANIMATION
   ══════════════════════════════════════════════════════════ */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════
   12. CARD COMPONENT  (Brand Guide §10 UI - rounded cards, light shadows)
   ══════════════════════════════════════════════════════════ */
.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 28px;
    transition: box-shadow 0.25s, transform 0.25s;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Card on secondary background */
.card--muted {
    background: var(--off-white);
    border-color: var(--gray-200);
}

/* Card on dark surface (dashboard / dark mode) */
.card--dark {
    background: var(--dark-surface);
    border-color: rgba(255,255,255,0.08);
    color: var(--white);
}


/* ══════════════════════════════════════════════════════════
   13. RESPONSIVE - HEADER & HERO
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual { display: none; }
}

@media (max-width: 700px) {
    :root { --nav-height: 62px; }

    .nav-links    { display: none; }
    .nav-hamburger { display: flex; }
    .logo span    { font-size: 1rem; }
    .language-switcher { display: none; }

    .hero-inner { padding: 60px 0; }

    .hero h1, .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
    }

    .section { padding: 64px 0; }

    .whatsapp-float {
        bottom: 16px; right: 16px;
        padding: 11px 18px;
        font-size: 0.82rem;
    }
}