/**
 * fluid-perf.css — Couche d'optimisations transverses (mobile + desktop).
 *
 * Objectif : appliquer un set de réglages "gratuits" (pas de changement
 * visuel) qui suppriment des microcoûts de paint / hit-testing répétés
 * sur toute la page. Ce fichier est chargé après les stylesheets
 * applicatives, donc il peut renforcer (mais pas écraser visuellement)
 * les composants existants.
 */

/* ─── Hit-testing & tap targets ────────────────────────────────────── */
/* Supprime le flash bleu iOS/Android sur les éléments tactiles + supprime
   le délai 300ms du double-tap zoom. Gain "fluide" instantané sur mobile. */
a, button, [role="button"], input, select, textarea, label,
.icon-btn, .home-btn, .topic-card, .post,
.dropdown-item, .tab, .filter-btn, .forum-tab,
.mobile-bottom-nav a, .mobile-bottom-nav button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ─── Texte : rendu plus rapide sur petit écran ────────────────────── */
@media (max-width: 768px) {
    body {
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-synthesis: none;
    }
}

/* ─── Scroll : pas de chaining + smooth respectueux ────────────────── */
html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body,
.main-content,
.sidebar,
.dropdown-panel,
.modal,
.dialog,
[data-scroll-container] {
    overscroll-behavior: contain;
}

/* ─── Images : décodage hors thread + résolution adaptative ────────── */
img {
    /* Évite des reflows quand l'image arrive : si width/height sont
       absents, le navigateur garde au moins un ratio cohérent. */
    image-rendering: auto;
}
img[loading="lazy"] {
    content-visibility: auto;
}

/* ─── Virtualisation étendue : élargir aux listes/feeds ────────────── */
.topic-card,
.message-item,
.notification-item,
.dropdown-item-message,
.forum-list-item,
.album-card,
.playlist-item,
.user-card-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
}
/* SCROLL OSCILLATION FIX: removed `.post { contain-intrinsic-size }`. The
   content-visibility:auto it was tuning is no longer set on .post (see
   performance-optimizations.css). */

/* ─── Boutons / icônes : isolation des paint layers ───────────────── */
.icon-btn,
.icon-btn-badge,
.home-btn,
.btn,
.fab,
.mobile-bottom-nav a {
    /* Isole le compositing pour éviter qu'un hover ne repaint la page.
       'paint' suffit : pas besoin de promouvoir en GPU layer permanent. */
    contain: paint;
}

/* ─── Animations : on ne paie plus quand l'élément est invisible ──── */
/* Les dropdowns du header utilisent `.open` pour s'afficher. Quand ils
   sont fermés et invisibles (display:none déjà appliqué par 2-layout.css),
   on garantit qu'aucun hit-test ou repaint ne s'exécute. */
.dropdown-panel:not(.open) {
    pointer-events: none;
}

/* ─── Inputs mobile : empêche le zoom auto iOS quand <16px ────────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: max(16px, 1rem);
    }
}

/* ─── Connection-aware : low-end device → flatten ─────────────────── */
.low-end-device *,
.low-end-device *::before,
.low-end-device *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.low-end-device .home-logo-glow,
.low-end-device .particle-canvas,
.low-end-device .warp-shader,
.low-end-device .goldParticles {
    display: none !important;
}
.low-end-device * {
    /* Désactive les transitions longues : on garde la sémantique mais on
       coupe les frames inutiles. <120ms reste imperceptible. */
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
}

/* ─── Scrollbars discrètes (desktop) ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
    }
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    *::-webkit-scrollbar-thumb {
        background-color: rgba(128, 128, 128, 0.35);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    *::-webkit-scrollbar-thumb:hover {
        background-color: rgba(128, 128, 128, 0.6);
        background-clip: content-box;
    }
}

/* ─── Print : on n'imprime pas la PWA ──────────────────────────────── */
@media print {
    .sidebar,
    .mobile-bottom-nav,
    .header-controls,
    .fixed-reply-form,
    .dropdown-panel,
    .toast-stack,
    .modal { display: none !important; }
}