/* ==========================================================================
   Retinax — base.css
   Variables, reset, typographie, utilitaires partagés
   Breakpoints alignés Elementor : 767 / 1024 / 1366
   ========================================================================== */

/* PP Neue Montreal (font payante Pangram Pangram) — fichiers locaux */
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
         url('../fonts/PPNeueMontreal-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'),
         url('../fonts/PPNeueMontreal-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('../fonts/PPNeueMontreal-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --color-bg: #000;
    --color-bg-soft: #1a1a1a;
    --color-text: #fff;
    --color-text-dark: #263238;
    --color-text-muted: rgba(255, 255, 255, 0.72);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-glass: rgba(104, 104, 104, 0.53);

    /* Système mono-typeface : PP Neue Montreal pour TOUT le contenu
     * (titres 700, corps 400, boutons 700). --font-special (DM Sans) est
     * réservé aux éventuels micro-textes UI (formulaires, légendes) — si
     * utilisé, recharger DM Sans (retiré du chargement car inutilisé). */
    --font-display: 'PP Neue Montreal', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-body: 'PP Neue Montreal', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-cta: 'PP Neue Montreal', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-special: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;

    --fs-hero: clamp(38px, 4.4vw, 64px);
    --fs-h2: clamp(24px, 2.4vw, 32px);
    --fs-body: clamp(16px, 1.4vw, 18px);
    --fs-cta: 15px;
    --fs-scroll: 18px;
    --fs-nav: 16px;

    --lh-hero: 1.1;
    --lh-h2: 1.56;
    --lh-body: 1.5;
    --lh-cta: 1.0;

    --radius-pill: 40px;
    --radius-sm: 20px;
    --radius-glass: 35px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 64px;

    --max-content: 1440px;
    --container-padding-inline: clamp(20px, 5vw, 80px);

    --transition-fast: 180ms ease;
    --transition-base: 280ms ease;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

/* Utilitaires partagés */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 11px 19px;
    font-family: var(--font-cta);
    font-size: var(--fs-cta);
    font-weight: 700;
    line-height: var(--lh-cta);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
}

.btn--primary {
    background-color: var(--color-text);
    color: var(--color-text-dark);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: #e6e6e6;
}

.btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    box-shadow: inset 0 0 0 2px var(--color-text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background-color: var(--color-text);
    color: var(--color-text-dark);
}

.btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    :root {
        --container-padding-inline: 20px;
    }
}