/* ============================================================
   CWV-BOOST.CSS — Tourak Digital (MA) — Core Web Vitals
   Agent #12 — 2026-06-06
   RTL support inclus. Chargé via header.php
   ============================================================ */

/* ── 1. FONT DISPLAY SWAP ───────────────────────────────────
   Override pour éviter FOIT — polices arabes surtout lentes */
@font-face{font-family:'Cairo';font-display:swap;src:local('Cairo')}
@font-face{font-family:'Tajawal';font-display:swap;src:local('Tajawal')}
@font-face{font-family:'Space Grotesk';font-display:swap;src:local('Space Grotesk')}

/* ── 2. ANTI-CLS : DIMENSIONS EXPLICITES ────────────────────
   RTL-aware, direction:rtl préservé                         */
img{max-width:100%;height:auto;display:block}
img[width][height]{aspect-ratio:attr(width)/attr(height)}

/* Images logo / favicons */
.logo img,.navbar-logo img{width:auto;height:40px;object-fit:contain}

/* Images portfolio / réalisations */
.portfolio-item img,.portfolio-img,.realisation-img,
.service-card img,.ville-img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── 3. LAZY IMAGE PLACEHOLDER ──────────────────────────────*/
img[loading=lazy]{background:#1a1a2e;transition:opacity .3s ease}
[data-theme=light] img[loading=lazy]{background:#e8e8f0}

/* ── 4. CONTENT-VISIBILITY — sections off-screen ────────────*/
.services-section,.ville-section,.blog-section,.cta-section,
.about-section,.partners-section,.testimonials-section{
  content-visibility:auto;
  contain-intrinsic-size:auto 400px
}

/* ── 5. WILL-CHANGE CIBLÉ ───────────────────────────────────*/
.blob,.blob-mouse{will-change:transform}
.aos-animate{will-change:auto}

/* ── 6. IFRAME LAZY ─────────────────────────────────────────*/
iframe[loading=lazy]{min-height:400px;background:#0f0f23}
[data-theme=light] iframe[loading=lazy]{background:#e8edf5}

/* ── 7. FONT AWESOME swap ───────────────────────────────────*/
.fa,.fas,.fab,.far,.fal{font-display:swap;font-synthesis:none}

/* ── 8. BLOB CONTAINER ──────────────────────────────────────*/
#blob-container{contain:layout style paint;isolation:isolate}

/* ── 9. HERO MIN-HEIGHT RTL ─────────────────────────────────*/
.hero,.hero-section{min-height:100svh;min-height:100vh}

/* ── 10. WEBP FALLBACK DIMENSIONS ───────────────────────────
   Logo PNG 800x200 environ */
.logo-tourak-ma{width:160px;height:40px;object-fit:contain}