/* ============================================================
   AR PICTURES - Correctifs performance & CLS
   Ce fichier doit être chargé APRÈS master.css
   ============================================================ */

/* ---------- 1. FIX CLS : Polices fallback ---------- */
/* Réduit le saut FOUT lors du chargement de Poppins */
@font-face {
  font-family: 'Poppins-fallback';
  src: local('Arial');
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SourceSansPro-fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* Applique les fallbacks à body et titres (ne casse rien, ajoute juste avant la police finale) */
body {
  font-family: 'Source Sans Pro', 'SourceSansPro-fallback', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.poppin-font,
.hero-text-wrap .hero-text .type-it,
.hero-text h1,
.btn {
  font-family: 'Poppins', 'Poppins-fallback', Arial, sans-serif;
}

/* ---------- 2. FIX CLS : Section hero (vidéo + type-it) ---------- */
/* Réserve la hauteur du hero dès le premier rendu */
.bg-video,
section.bg-video {
  min-height: 100vh;
  position: relative;
}

.homepage-hero-module {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.homepage-hero-module .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Vidéo et poster : même dimensions stables dès le début */
.homepage-hero-module .video-container video.fillWidth,
#bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  object-fit: cover;
}

.homepage-hero-module .poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.homepage-hero-module .poster img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover;
}

/* ---------- 3. FIX CLS : Effet machine à écrire (type-it / ti-cursor) ---------- */
/* Réserve la hauteur du texte animé pour éviter le saut pendant que typed.js écrit */
.hero-text-wrap .hero-text .type-it {
  min-height: 94px;   /* correspond au line-height 1.25 × font-size 78px */
  display: block;
  line-height: 1.25;
}

/* Curseur clignotant : n'affecte pas le layout */
.ti-cursor {
  display: inline-block !important;
  width: 3px !important;
  vertical-align: baseline !important;
}

/* ---------- 4. FIX CLS : Loader overlay ---------- */
/* Anime l'opacité au lieu de height pour éviter reflow */
#loader-overlay {
  will-change: opacity;
  transition: opacity 0.3s ease-out;
}

.loader-inner {
  will-change: transform;
}

/* ---------- 5. FIX CLS : Images blog & portfolio ---------- */
/* Garantit un aspect-ratio stable même si l'image n'est pas encore chargée */
.post-img,
.portfolio img,
.blog-slider .post-img img,
.cbp-item img {
  aspect-ratio: auto;
}

.blog-slider .post-img {
  aspect-ratio: 800 / 533;
  overflow: hidden;
}

.blog-slider .post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 6. FIX CLS : Slick slider blog ---------- */
/* Évite les sauts pendant l'initialisation de slick */
.blog-slider:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}
.blog-slider:not(.slick-initialized) > .post {
  flex: 0 0 33.3333%;
  padding: 0 10px;
}

/* ---------- 7. Contraste accessibilité ---------- */
/* Améliore le contraste du texte gris sur fond blanc (fail a11y) */
body p,
section.white-bg p,
section.white-bg li,
.section-heading p.font-26px {
  color: #595959; /* au lieu de #888 : passe AA */
}

.footer .widget-links li,
.footer .widget-links a,
.footer .widget-text p,
.footer .widget-links li i {
  color: #6d6d6d; /* au lieu de #9e9e9e : passe AA */
}

/* ---------- 8. Logos : éviter la distorsion et ratio correct ---------- */
.logo img {
  max-height: 30px;
  width: auto;
  height: auto;
}

/* ---------- 9. Loader : disparition plus rapide pour libérer le rendu ---------- */
#loader-overlay.loaded {
  opacity: 0;
  pointer-events: none;
}

/* ---------- 10. Listes d'expertises : styliser ul.feature-list comme des <p> ---------- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  line-height: 24px;
  color: #888;
  font-weight: 400;
  margin: 0;
  padding: 0;
}