/**
 * Wouash — Design System (CSS Color Module 4/5 + typographie moderne)
 * ------------------------------------------------------------------
 * • Couleurs : OKLCH + color-mix() + Relative Color Syntax + Display P3 (dégradation automatique)
 * • Thème : light-dark() piloté par <meta name="color-scheme" content="light dark">
 * • Typographie : polices variables auto-hébergées (.woff2) + fluid type (clamp)
 * • Rendu : optical sizing, text-wrap balance, leading-trim (progressive enhancement)
 */

/* ============ POLICES VARIABLES AUTO-HÉBERGÉES ============ */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ TOKENS DESIGN SYSTEM (OKLCH + light-dark) ============ */
:root {
    color-scheme: light dark;

    /* Rendu global */
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* — Layout — */
    --promo-banner-h: 42px;
    --header-h: 64px;
    --site-top-h: calc(var(--promo-banner-h) + var(--header-h));

    /* — Brand (gamme étendue via @supports plus bas) — */
    --brand: oklch(0.737 0.179 53);             /* #fe841c */
    --brand-bright: oklch(0.791 0.148 60);      /* #ffa24d */
    --brand-bright-2: oklch(0.772 0.161 59);    /* #ff9838 */
    /* Relative Color Syntax : états interactifs dérivés du brand */
    --brand-hover: oklch(from var(--brand) calc(l - 0.05) calc(c - 0.012) h);
    --brand-active: oklch(from var(--brand) calc(l - 0.09) calc(c - 0.02) h);
    --on-brand: oklch(0.189 0.028 80);          /* #1a1205 (texte sur orange) */

    /* — Surfaces — */
    --surface-page: light-dark(oklch(0.98 0.004 255), oklch(0.195 0.034 258)); /* #0b1524 */
    --surface-1: light-dark(oklch(0.995 0.002 255), oklch(0.282 0.055 256));  /* #162a44 */
    --surface-2: light-dark(oklch(0.955 0.006 255), oklch(0.232 0.034 255));  /* #121e2d */
    --surface-3: light-dark(oklch(0.92 0.012 255), oklch(0.346 0.074 255));   /* #1d3a5f */
    --surface-4: light-dark(oklch(0.87 0.018 255), oklch(0.422 0.054 256));   /* #3a4f6b */

    /* — Texte — */
    --text-strong: light-dark(oklch(0.24 0.03 255), oklch(0.944 0.011 257));  /* #e8edf4 */
    --text-mid: light-dark(oklch(0.45 0.03 255), oklch(0.766 0.033 257));     /* #a6b4c8 */
    --text-soft: light-dark(oklch(0.55 0.025 255), oklch(0.632 0.038 258));   /* #7c8ba1 */
    --white: oklch(1 0 0);

    /* — États — */
    --success: oklch(0.696 0.149 163);           /* #10b981 */
    --error: oklch(0.637 0.208 25);              /* #ef4444 */

    /* — Dérivés via color-mix() (teintes / opacités depuis les variables primaires) — */
    --accent-soft: color-mix(in oklab, var(--brand) 10%, transparent);
    --accent-glow: color-mix(in oklab, var(--brand) 30%, transparent);
    --accent-border: color-mix(in oklab, var(--brand) 45%, transparent);
    --surface-glass: color-mix(in oklab, var(--surface-1) 55%, transparent);
    --border-subtle: light-dark(
        color-mix(in oklab, oklch(0.4 0.03 255) 14%, transparent),
        color-mix(in oklab, var(--text-mid) 16%, transparent)
    );
    --accent-gradient: linear-gradient(135deg, var(--brand-bright-2) 0%, var(--brand) 55%, var(--brand-hover) 100%);
    --gradient-hero-mesh: radial-gradient(ellipse 85% 65% at 15% 35%, color-mix(in oklab, var(--brand) 12%, transparent) 0%, transparent 50%);

    /* — Ombres — */
    --shadow-soft: light-dark(0 4px 24px oklch(0.5 0.03 255 / 0.12), 0 4px 24px oklch(0 0 0 / 0.3));
    --shadow-card: light-dark(0 10px 36px oklch(0.5 0.03 255 / 0.18), 0 10px 36px oklch(0 0 0 / 0.4));

    /* — Typographie — */
    --font-titre: 'Space Grotesk', system-ui, sans-serif;
    --font-corps: 'Manrope', system-ui, sans-serif;

    /* — Rayons — */
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* ============ ALIAS DE COMPATIBILITÉ (noms hérités) ============ */
    --red: var(--brand);
    --red-hover: var(--brand-hover);
    --accent: var(--brand);
    --accent-deep: var(--brand-hover);
    --accent-bright: var(--brand-bright);
    --accent-hover: var(--brand-hover);
    --accent-dark: var(--brand-hover);

    --off-white: var(--surface-page);
    --page: var(--surface-page);
    --anthracite: var(--surface-1);
    --dark: var(--surface-1);
    --black: var(--surface-1);
    --gray: var(--surface-3);
    --dark-gray: var(--surface-3);
    --light-gray: var(--surface-4);

    --gray-mid: var(--text-mid);
    --text-gray: var(--text-mid);
    --text-light: var(--text-mid);
    --ink: var(--text-strong);
    --ink-soft: var(--text-mid);
    --ink-muted: var(--text-soft);
    --surface: var(--surface-1);
}

/* ============ GAMME ÉTENDUE (Display P3) — dégradation automatique ============ */
@supports (color: color(display-p3 1 0 0)) {
    :root {
        --brand: oklch(0.746 0.202 53);
        --brand-bright: oklch(0.80 0.17 60);
        --brand-bright-2: oklch(0.78 0.184 59);
    }
}

/* ============ TYPOGRAPHIE FLUIDE (clamp, sans media queries) ============ */
:root {
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9rem);
    --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
    --text-lg: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    --text-xl: clamp(1.3rem, 1.2rem + 0.6vw, 1.75rem);
    --text-2xl: clamp(1.7rem, 1.5rem + 1.2vw, 2.5rem);
    --text-3xl: clamp(2.1rem, 1.8rem + 2vw, 3.25rem);
    --text-4xl: clamp(2.5rem, 2rem + 3vw, 4rem);
}

/* ============ RENDU TYPOGRAPHIQUE ============ */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .cta-title,
.hero-app-title, .service-name, .step-title, .city-name, .testimonial-name {
    text-wrap: balance;
    text-wrap-style: balance;
}

/* Leading trim — Chrome 133+ (text-box-trim) puis Safari (leading-trim) */
@supports (text-box-trim: trim-both) {
    h1, h2, h3, .hero-title, .section-title, .cta-title {
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
    }
}
@supports (leading-trim: both) and (not (text-box-trim: trim-both)) {
    h1, h2, h3, .hero-title, .section-title, .cta-title {
        leading-trim: both;
        text-edge: cap alphabetic;
    }
}