/*
Theme Name: Novandex 2026
Theme URI: https://novandex.com
Author: Yorick MAPET
Author URI: https://novandex.com
Description: Thème WordPress premium « dark tech » pour Novandex — ingénierie, cybersécurité, innovation. Design fluide avec glassmorphism, dégradés mesh animés, micro-interactions et bascule clair/sombre. Accessible, responsive et sans dépendance externe.
Version: 2.0.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: novandex
Tags: dark, light, portfolio, blog, one-column, custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
*/

/* ==========================================================================
   NOVANDEX 2026 — DESIGN SYSTEM
   Fichier 1/2 : tokens, reset, typographie, layout, boutons, formulaires.
   Les composants (navbar, hero, cartes, footer…) sont dans
   assets/css/components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — thème sombre par défaut
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --bg:            #080b12;
    --bg-elevated:   #0d1220;
    --bg-sunken:     #05070c;
    --surface:       rgba(255, 255, 255, 0.028);
    --surface-hover: rgba(255, 255, 255, 0.055);
    --surface-solid: #10172a;

    /* Accents */
    --accent:        #22d3ee;
    --accent-soft:   #67e8f9;
    --accent-deep:   #0e7490;
    --accent-2:      #8b5cf6;
    --accent-2-soft: #a78bfa;
    --accent-rgb:    34, 211, 238;
    --accent-2-rgb:  139, 92, 246;

    /* Texte */
    --text:          #eef2f8;
    --text-soft:     #a3b1c6;
    --text-muted:    #6b7a90;
    --text-on-accent:#04141a;

    /* Bordures & voiles */
    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --border-accent: rgba(var(--accent-rgb), 0.38);
    --glow:          rgba(var(--accent-rgb), 0.14);
    --glow-2:        rgba(var(--accent-2-rgb), 0.12);

    /* Ombres */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg:  0 24px 60px -20px rgba(0, 0, 0, 0.75);
    --shadow-accent: 0 12px 40px -12px rgba(var(--accent-rgb), 0.45);

    /* Typographie */
    --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

    /* Échelle typographique fluide (clamp : mobile → desktop) */
    --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --fs-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
    --fs-base: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
    --fs-md:   clamp(1.05rem, 1.00rem + 0.25vw, 1.20rem);
    --fs-lg:   clamp(1.25rem, 1.15rem + 0.50vw, 1.60rem);
    --fs-xl:   clamp(1.55rem, 1.35rem + 0.95vw, 2.25rem);
    --fs-2xl:  clamp(1.95rem, 1.55rem + 1.90vw, 3.15rem);
    --fs-3xl:  clamp(2.60rem, 1.80rem + 3.80vw, 5.20rem);

    /* Rythme spatial fluide */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: clamp(3rem, 6vw, 5rem);
    --space-9: clamp(4rem, 9vw, 8rem);

    /* Rayons */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-full: 999px;

    /* Mouvement */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:   0.18s var(--ease);
    --t-base:   0.32s var(--ease);
    --t-slow:   0.6s var(--ease-out);

    /* Gabarits */
    --w-page:  1220px;
    --w-wide:  1020px;
    --w-prose: 44rem;
    --gutter:  clamp(1.15rem, 4vw, 2.5rem);
    --nav-h:   72px;
}

/* --------------------------------------------------------------------------
   2. TOKENS — thème clair
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
    --bg:            #fbfcfe;
    --bg-elevated:   #ffffff;
    --bg-sunken:     #f1f4f9;
    --surface:       rgba(9, 18, 33, 0.022);
    --surface-hover: rgba(9, 18, 33, 0.045);
    --surface-solid: #ffffff;

    --accent:        #0891b2;
    --accent-soft:   #0e7490;
    --accent-deep:   #155e75;
    --accent-2:      #7c3aed;
    --accent-2-soft: #6d28d9;
    --accent-rgb:    8, 145, 178;
    --accent-2-rgb:  124, 58, 237;

    --text:          #0a1220;
    --text-soft:     #47566c;
    --text-muted:    #74829a;
    --text-on-accent:#ffffff;

    --border:        rgba(9, 18, 33, 0.10);
    --border-strong: rgba(9, 18, 33, 0.18);
    --border-accent: rgba(var(--accent-rgb), 0.35);
    --glow:          rgba(var(--accent-rgb), 0.10);
    --glow-2:        rgba(var(--accent-2-rgb), 0.08);

    --shadow-sm:  0 1px 2px rgba(9, 18, 33, 0.06);
    --shadow-md:  0 8px 24px -10px rgba(9, 18, 33, 0.16);
    --shadow-lg:  0 24px 60px -24px rgba(9, 18, 33, 0.22);
    --shadow-accent: 0 12px 34px -14px rgba(var(--accent-rgb), 0.5);
}

/* Respect de la préférence système tant que l'utilisateur n'a pas choisi.
   Le script inline du <head> pose data-theme dès le 1er paint : pas de flash. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg:            #fbfcfe;
        --bg-elevated:   #ffffff;
        --bg-sunken:     #f1f4f9;
        --surface:       rgba(9, 18, 33, 0.022);
        --surface-hover: rgba(9, 18, 33, 0.045);
        --surface-solid: #ffffff;

        --accent:        #0891b2;
        --accent-soft:   #0e7490;
        --accent-deep:   #155e75;
        --accent-2:      #7c3aed;
        --accent-2-soft: #6d28d9;
        --accent-rgb:    8, 145, 178;
        --accent-2-rgb:  124, 58, 237;

        --text:          #0a1220;
        --text-soft:     #47566c;
        --text-muted:    #74829a;
        --text-on-accent:#ffffff;

        --border:        rgba(9, 18, 33, 0.10);
        --border-strong: rgba(9, 18, 33, 0.18);
        --glow:          rgba(var(--accent-rgb), 0.10);
        --glow-2:        rgba(var(--accent-2-rgb), 0.08);

        --shadow-sm:  0 1px 2px rgba(9, 18, 33, 0.06);
        --shadow-md:  0 8px 24px -10px rgba(9, 18, 33, 0.16);
        --shadow-lg:  0 24px 60px -24px rgba(9, 18, 33, 0.22);
        --shadow-accent: 0 12px 34px -14px rgba(var(--accent-rgb), 0.5);
    }
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
    transition: background-color var(--t-base), color var(--t-base);
}

img, picture, video, canvas, svg, iframe {
    display: block;
    max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
    margin: var(--space-7) 0;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: var(--text);
    text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p { color: var(--text-soft); text-wrap: pretty; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--t-fast), opacity var(--t-fast);
}

a:hover { color: var(--accent-soft); }

strong, b { font-weight: 650; color: var(--text); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection {
    background: rgba(var(--accent-rgb), 0.28);
    color: var(--text);
}

/* Petite majuscule technique — sert aux eyebrows et métadonnées */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.text-gradient {
    background: linear-gradient(120deg, var(--text) 0%, var(--accent) 55%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 2000;
    padding: var(--space-3) var(--space-5);
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: var(--space-4);
    color: var(--text-on-accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   6. LAYOUT
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide  { max-width: var(--w-wide); }
.container--prose { max-width: var(--w-prose); }

.section { padding-block: var(--space-9); position: relative; }
.section--tight { padding-block: var(--space-8); }
.section--sunken { background: var(--bg-sunken); }

.section-head {
    max-width: 52rem;
    margin-bottom: var(--space-8);
}

.section-head--center {
    text-align: center;
    margin-inline: auto;
}

.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { font-size: var(--fs-md); color: var(--text-soft); }

/* Grilles auto-responsives : pas de media query nécessaire */
.grid {
    display: grid;
    gap: var(--space-5);
}

.grid--cards    { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--cards-sm { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--halves   { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-8); }

.stack > * + * { margin-top: var(--space-4); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.center-x { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   7. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-border: var(--border-strong);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.78rem 1.6rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-full);
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    transition: transform var(--t-fast), box-shadow var(--t-base),
                border-color var(--t-fast), background-color var(--t-fast),
                color var(--t-fast);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
    width: 1em; height: 1em;
    flex: none;
    transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(3px); }

/* Primaire — dégradé + halo */
.btn--primary {
    --btn-fg: var(--text-on-accent);
    --btn-border: transparent;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 130%);
    box-shadow: var(--shadow-accent);
    font-weight: 650;
}

.btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, var(--accent-2) -30%, var(--accent) 100%);
    opacity: 0;
    transition: opacity var(--t-base);
}

.btn--primary:hover {
    color: var(--text-on-accent);
    box-shadow: 0 18px 46px -14px rgba(var(--accent-rgb), 0.6);
}

.btn--primary:hover::before { opacity: 1; }

/* Secondaire — verre dépoli */
.btn--ghost {
    background: var(--surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.btn--ghost:hover {
    --btn-border: var(--border-accent);
    color: var(--accent);
    background: var(--glow);
}

/* Discret — texte seul */
.btn--quiet {
    --btn-border: transparent;
    padding-inline: var(--space-3);
    color: var(--text-soft);
}

.btn--quiet:hover { color: var(--accent); }

.btn--sm  { padding: 0.55rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg  { padding: 0.95rem 2rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   8. FORMULAIRES
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 0.78rem 1.1rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--glow);
}

textarea { min-height: 10rem; resize: vertical; line-height: 1.7; }

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-soft);
    margin-bottom: var(--space-2);
}

/* Champ de recherche composite */
.search-form {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.search-form__field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-form__field svg {
    position: absolute;
    left: 1rem;
    width: 1.05rem; height: 1.05rem;
    color: var(--text-muted);
    pointer-events: none;
}

.search-form input[type="search"] {
    padding-left: 2.7rem;
    border-radius: var(--r-full);
}

.search-form .btn { flex: none; }

/* --------------------------------------------------------------------------
   9. UTILITAIRES
   -------------------------------------------------------------------------- */
.u-mono   { font-family: var(--font-mono); }
.u-muted  { color: var(--text-muted); }
.u-soft   { color: var(--text-soft); }
.u-center { text-align: center; }
.u-mt-6   { margin-top: var(--space-6); }
.u-mt-7   { margin-top: var(--space-7); }
.u-nowrap { white-space: nowrap; }

.glass {
    background: var(--surface);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--border);
}

/* Halo décoratif réutilisable */
.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   10. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}