/* =========================================================================
   Matrix Digital — design-system.css
   Variables, reset, typographie, layout. (P1)
   Mobile-first : base = mobile, desktop en @media (min-width: 1024px).
   ========================================================================= */

/* ---------------------------------------------------------------- *
   1. VARIABLES (:root)
 * ---------------------------------------------------------------- */
:root {
    /* Couleurs fondamentales */
    --mx-black:    #080810;
    --mx-dark:     #0D0D1A;
    --mx-navy:     #0F0F2E;
    --mx-navy-mid: #1A1A3E;

    /* Accents signature — alignés sur le logo (cyan → bleu → violet → magenta) */
    --mx-cyan:     #16C7E6;   /* Cyan éclatant — accent froid du logo */
    --mx-blue:     #2F6BFF;   /* Bleu électrique — cœur du logo */
    --mx-violet:   #6E2FD6;   /* Violet profond */
    --mx-purple:   #8A4FE0;   /* Violet moyen — hover */
    --mx-magenta:  #C32FD9;   /* Magenta du logo — accent CTA */
    --mx-pink:     #B96BFF;   /* Highlight orchidée bleutée (ex-rose) */

    /* RGB (pour rgba() dynamiques) */
    --mx-cyan-rgb:    255, 255, 255;
    --mx-blue-rgb:    255, 255, 255;
    --mx-violet-rgb:  255, 255, 255;
    --mx-magenta-rgb: 255, 255, 255;

    /* Dégradés — sweep du logo */
    --mx-gradient:      linear-gradient(135deg, #16C7E6 0%, #2F6BFF 35%, #6E2FD6 68%, #C32FD9 100%);
    --mx-gradient-dark: linear-gradient(135deg, #123A8A 0%, #2F6BFF 45%, #6E2FD6 75%, #8A2FD0 100%);
    --mx-gradient-text: linear-gradient(90deg, #16C7E6 0%, #4F7BFF 45%, #C32FD9 100%);

    /* Neutres */
    --mx-white:     #FFFFFF;
    --mx-off-white: #EAF0FF;
    --mx-muted:     #8A93B8;
    --mx-border:    rgba(90, 120, 230, 0.16);
    --mx-glow:      rgba(255, 255, 255, 0.25);
    --mx-glow-strong: rgba(255, 255, 255, 0.45);

    /* Statuts */
    --status-ok:     #10B981;
    --status-warn:   #F97316;
    --status-danger: #EF4444;
    --status-info:   #06B6D4;

    /* Couleurs par service */
    --mx-service-dev:       #7B2FBE;
    --mx-service-marketing: #C850C0;
    --mx-service-conseil:   #9B59D0;
    --mx-service-seo:       #06B6D4;
    --mx-service-contenu:   #FF6BF8;

    /* Typographie */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Outfit', sans-serif;
    --font-mono:    'Orbitron', monospace;

    /* Échelle typographique (fluide) */
    --fs-h1: clamp(2.2rem, 6vw, 4rem);
    --fs-h2: clamp(1.7rem, 4vw, 2.75rem);
    --fs-h3: clamp(1.3rem, 3vw, 1.75rem);
    --fs-h4: clamp(1.1rem, 2vw, 1.3rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    /* Layout & spacing */
    --container-max: 1280px;
    --container-pad: 20px;
    --section-py:    64px;     /* mobile */
    --card-radius:   8px;
    --btn-radius:    4px;
    --gap-sm: 12px;
    --gap-md: 24px;
    --gap-lg: 48px;
    --gap-xl: 80px;

    /* Transitions */
    --t-fast: 0.2s ease;
    --t-base: 0.3s ease;
    --t-slow: 0.5s ease;

    /* Z-index */
    --z-header:  1000;
    --z-nav-mobile: 1100;
    --z-float:   900;
    --z-popup:   1200;
    --z-cursor:  9999;

    /* Header : barre + topbar (offset total = somme) */
    --mx-bar-h: 64px;
    --mx-topbar-h: 0px;
    --mx-header-h: calc(var(--mx-bar-h) + var(--mx-topbar-h));

    /* Easing */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
    :root {
        --container-pad: 32px;
        --section-py: 96px;
        --mx-bar-h: 80px;
        --mx-topbar-h: 38px;
    }
}

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--mx-black);
    color: var(--mx-off-white);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

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

button { cursor: pointer; background: none; border: none; }

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

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

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

/* ---------------------------------------------------------------- *
   3. Typographie de base
 * ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--mx-white);
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

a:hover { color: var(--mx-pink); }

::selection {
    background: var(--mx-magenta);
    color: var(--mx-white);
}

/* ---------------------------------------------------------------- *
   4. Layout — conteneur & sections
 * ---------------------------------------------------------------- */
.mx-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.mx-section { padding-block: var(--section-py); }

.mx-main { display: block; }

/* ---------------------------------------------------------------- *
   5. Utilitaires
 * ---------------------------------------------------------------- */
.mx-text-gradient {
    background: var(--mx-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mx-bg-dark  { background: var(--mx-dark); }
.mx-bg-navy  { background: var(--mx-navy); }
.mx-bg-black { background: var(--mx-black); }

.mx-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mx-magenta);
}

/* Caret clignotant pendant l'effet machine à écrire (data-mx-typeloop) */
[data-mx-typeloop] { min-height: 1em; }
[data-mx-typeloop].mx-typing::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 3px;
    background: currentColor;
    vertical-align: -0.1em;
    animation: blink 1s step-end infinite;
}

.mx-text-center { text-align: center; }
.mx-muted { color: var(--mx-muted); }

/* Accessibilité */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mx-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: var(--z-popup);
    padding: 10px 18px;
    background: var(--mx-violet);
    color: var(--mx-white);
    border-radius: var(--btn-radius);
    transition: top var(--t-fast);
}
.mx-skip-link:focus { top: 8px; }

:focus-visible {
    outline: 2px solid var(--mx-pink);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
   6. Scrollbar (desktop)
 * ---------------------------------------------------------------- */
@media (min-width: 1024px) {
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--mx-black); }
    ::-webkit-scrollbar-thumb {
        background: var(--mx-violet);
        border-radius: 6px;
        border: 2px solid var(--mx-black);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--mx-magenta); }
}

/* ================================================================= *
   MODE CLAIR (toggle) — :root[data-theme="light"]
   Le mode SOMBRE reste le défaut (:root ci-dessus). En clair, on
   redéfinit fonds + textes ; les accents/dégradés colorés sont
   conservés (ils ressortent sur fond clair).
 * ================================================================= */
:root[data-theme="light"] {
    /* Fonds → clairs */
    --mx-black:    #FFFFFF;   /* fond de page */
    --mx-dark:     #F4F6FB;   /* cartes / surfaces */
    --mx-navy:     #EDF1F8;   /* sections alternées */
    --mx-navy-mid: #E2E8F3;   /* surfaces surélevées */

    /* Textes (le « blanc » devient encre sombre) */
    --mx-white:     #0E1320;  /* titres / texte fort */
    --mx-off-white: #1E2636;  /* corps de texte */
    --mx-muted:     #5C6580;  /* texte secondaire */

    /* Bordures / lueurs adaptées au fond clair */
    --mx-border:      rgba(20, 30, 80, 0.14);
    --mx-glow:        rgba(47, 107, 255, 0.16);
    --mx-glow-strong: rgba(47, 107, 255, 0.28);
}

/* Re-forcer le texte BLANC là où --mx-white servait de blanc sur un fond coloré */
:root[data-theme="light"] .mx-btn-primary,
:root[data-theme="light"] .mx-btn-secondary,
:root[data-theme="light"] .mx-btn-secondary:hover,
:root[data-theme="light"] .mx-badge--soon { color: #FFFFFF; }

/* Lien survol : rose pâle peu lisible sur blanc → on fonce */
:root[data-theme="light"] a:hover { color: var(--mx-violet); }

/* Surfaces au fond SOMBRE codé en dur → contreparties claires en mode clair
   (les voiles de modale restent volontairement sombres : ce sont des scrims). */
/* En mode clair, le HEADER est BLANC (le texte devient sombre via les tokens
   clairs : nav, hamburger et toggle utilisent --mx-off-white/--mx-white). */
:root[data-theme="light"] .mx-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(20, 30, 80, 0.10);
}
:root[data-theme="light"] .mx-header.is-scrolled { box-shadow: 0 8px 30px rgba(20, 30, 80, 0.08); }
/* Topbar + dropdowns + menu mobile suivent aussi le mode clair (fonds clairs). */
:root[data-theme="light"] .mx-topbar { background: rgba(244, 246, 251, 0.96); }
:root[data-theme="light"] .mx-mobile-cta { background: rgba(255, 255, 255, 0.96); }
/* Boutons flottants : on garde les pastilles sombres, on force le texte clair */
:root[data-theme="light"] .mx-fab__btn { color: #FFFFFF; }

/* Les HEROS restent SOMBRES en mode clair — exactement comme en mode sombre,
   aucun filtre ni overlay. On re-déclare les tokens sombres pour tout le hero. */
:root[data-theme="light"] .mx-hero,
:root[data-theme="light"] .mx-about-hero,
:root[data-theme="light"] .mx-seo-hero,
:root[data-theme="light"] .mx-audit-hero,
:root[data-theme="light"] .mx-portfolio-hero,
:root[data-theme="light"] .mx-service-hero {
    --mx-black: #080810;
    --mx-dark: #0D0D1A;
    --mx-navy: #0F0F2E;
    --mx-navy-mid: #1A1A3E;
    --mx-white: #FFFFFF;
    --mx-off-white: #EAF0FF;
    --mx-muted: #8A93B8;
    --mx-border: rgba(90, 120, 230, 0.16);
}