/*
 * NexTrade Groupe — CSS Performance global
 * Chargé en preload sur toutes les pages via head_seo.php
 * Optimisé pour Core Web Vitals (LCP, CLS)
 */

/* ── Font display swap (évite FOIT) ── */
@font-face {
    font-family: 'Segoe UI';
    font-display: swap;
}

/* ── Réduction CLS — dimensions explicites pour éléments communs ── */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Placeholder pour images en chargement (évite layout shift) */
img:not([src]),
img[src=""] {
    visibility: hidden;
}

/* ── Variables globales NexTrade (évite redéfinition par page) ── */
:root {
    --vert: #1a6b3c;
    --vert-clair: #2d9b5a;
    --vert-fonce: #0f4526;
    --or: #c9a84c;
    --or-clair: #e8c96a;
    --or-fonce: #b8964a;
    --blanc: #fff;
    --gris: #f8f9fa;
    --texte: #2c2c2c;
    --gris-mid: #6c757d;
}

/* ── Reset minimal commun (évite flash) ── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Navigation sticky — hauteur réservée pour éviter CLS ── */
nav {
    contain: layout style;
}

/* ── Skeleton loader (évite CLS pendant chargement AJAX) ── */
.nt-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: nt-shimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes nt-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Boutons — éviter CLS sur hover ── */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* ── Pulse animation (rfq_float / whatsapp) ── */
@keyframes nt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ── content-visibility — sections hors écran (LCP/rendering) ── */
.nt-section-lazy {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ── Lazy images — transition douce au chargement ── */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity .3s ease;
}
img[loading="lazy"].nt-loaded {
    opacity: 1;
}

/* ── Optimisation rendu texte ── */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
}

/* ── Éviter layout shift sur images sans dimensions ── */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* ── Will-change uniquement sur éléments animés ── */
.nt-footer, nav {
    will-change: auto;
}

/* ── Prefers-reduced-motion — accessibilité ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}