@charset "UTF-8";
/**
  * Theme Name: Thème Triomphe Immobilier
  * Description: Template réalisée exclusivement pour TriompheImmobilier.com
  * Author: Tahir Mhamed (Agence MAT 360)
  **/
@font-face {
  font-family: "Alexandria";
  src: url("./assets/Alexandria-VariableFont_wght.ttf") format("truetype");
  font-weight: inherit;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gloock";
  src: url("./assets/Gloock-Regular.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
.ff-gloock {
  font-family: "Gloock";
}

.ff-alexandria {
  font-family: "Alexandria";
}

:root {
  --black: #000000;
  --white: #ffffff;
  --light: #f7f7f7;
  --light-transparent: 247, 247, 247;
  --gray: #dddddd;
  --graydarken: #838383;
  --darken: #191919;
  --darken2: #45444C;
  --or-lighten-rgb-2: 242, 224, 183;
  --or-lighten-rgb: 230, 194, 116;
  --or-lighten: #e6c274;
  --or-darken-rgb: 209, 171, 99;
  --or-darken: #d1ab63;
  --gradient-or: linear-gradient(90deg, rgb(var(--or-lighten-rgb)), rgb(var(--or-darken-rgb)));
  --gradient-or-2: linear-gradient(280deg, rgb(var(--or-lighten-rgb)), rgb(var(--or-darken-rgb)), rgb(var(--or-lighten-rgb-2)));
}

html, body {
  background-color: var(--black) !important;
  color: var(--white);
  font-family: "Alexandria";
}

a, html {
  color: inherit;
}

small {
  font-size: 0.675em !important;
}

.fw-lightly {
  font-weight: 100 !important;
}

.breadcrumb {
  text-transform: uppercase !important;
  font-weight: 100;
  font-size: 0.875em !important;
  color: var(--white);
}

.bg-light {
  background-color: var(--light);
}

.bg-or-gradient {
  background: linear-gradient(120deg, rgb(var(--or-darken-rgb)), rgb(var(--or-lighten-rgb)));
}

.bg-gray {
  background-color: var(--gray);
}

.bg-light-transparent {
  background: rgba(var(--light-transparent), 0.95);
}

.bg-light-transparent-lighten {
  background: rgba(var(--light-transparent), 0.975);
}

.btn {
  font-weight: bold !important;
  font-family: "Alexandria" !important;
}

.input-group {
  justify-content: center;
}
.input-group .btn {
  padding: 0.65em 2.15em;
  font-size: 1.175em;
}
@media (max-width: 566px) {
  .input-group .btn {
    width: 300px !important;
    margin: 0.5em 0 !important;
  }
}
@media (max-width: 567px) {
  .input-group .btn {
    width: 200px !important;
  }
}
.input-group .btn-light {
  color: var(--black) !important;
}
.input-group .btn-outline-light {
  color: var(--white) !important;
}
.input-group .btn-light:hover {
  color: var(--black) !important;
}
.input-group .btn-outline-light:hover {
  color: var(--black) !important;
}
.input-group .btn-light.active {
  color: var(--black);
}
.input-group .btn-outline-light.active {
  color: var(--black);
}

.research-button {
  position: absolute;
  width: 100%;
  bottom: 125px;
  margin: 0 auto !important;
  z-index: 99999 !important;
  display: flex;
  justify-content: center;
}
.research-button .btn-blur {
  width: 250px;
  font-weight: 300 !important;
  padding: 1em 1em;
  margin-bottom: 0.5em;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-radius: 0 !important;
}

/* Hamburger */
.ifi-hamburger {
  position: absolute;
  top: 45px !important;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 99999;
}

.ifi-hamburger span {
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

@media (min-width: 769px) {
  [data-ifi-menu-toggle],
  .ifi-offcanvas-menu {
    display: none !important;
  }
}
/* Offcanvas menu */
.ifi-offcanvas-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  visibility: hidden; /* caché par défaut */
  opacity: 0;
}

.ifi-offcanvas-menu.is-active {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

.ifi-offcanvas-header-nav {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
}

.ifi-offcanvas-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  right: 5px;
}

.ifi-offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.ifi-offcanvas-body a {
  font-size: 1.2rem;
  font-weight: 200;
  text-decoration: none;
  color: #111;
  transition: color 0.2s;
}

.ifi-offcanvas-body a:hover {
  color: #000;
}

.icon {
  min-height: 35px;
}

.btn-transparent {
  color: var(--white) !important;
  background: transparent;
  border: 0;
}
.btn-transparent:hover {
  border: 0;
}

.btn-or {
  color: var(--black) !important;
  background: var(--gradient-or);
  border: 0;
}
.btn-or:hover {
  border: 0;
}

.fw-100 {
  font-weight: 100 !important;
}

.text-xs {
  font-size: 0.875em;
}

.text-darken {
  color: var(--darken) !important;
}

.form-check-input:checked {
  background-color: var(--black) !important;
  border-color: var(--black) !important;
}

.form-control,
.form-select {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.btn-dark {
  border-radius: 0 !important;
  background-color: var(--black) !important;
}

hr {
  height: 1px !important;
  color: var(--gray) !important;
}

/* =========================
   HERO — base
   ========================= */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Vidéo de fond */
.hero__video {
  position: relative;
  inset: 0;
  width: 100%;
  height: 110vh !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
  margin: 0 auto;
  z-index: 0;
}

/* Overlay par-dessus la vidéo */
/* Bloc top : logo + menu (mobile d’abord : en haut du header) */
/* Logo */
.hero__brand img {
  display: block;
  max-width: 260px;
  margin: 0 auto;
  height: auto;
}

@media (max-width: 576px) {
  .hero__brand img {
    max-width: 190px;
  }
}
/* Nav centré */
.hero__nav {
  width: 100%;
  background: transparent;
}

/* Liens de nav */
.hero .navbar-nav .nav-link {
  font-weight: 300 !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1rem;
}

.hero .navbar-nav .nav-link:hover,
.hero .navbar-nav .nav-link:focus {
  text-decoration: underline;
}

/* Toggler lisible sur vidéo sombre */
.navbar-dark .navbar-toggler {
  border: 0;
}

.navbar-dark .navbar-toggler-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

.hero__top {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 1rem 1rem 0;
  z-index: 99998 !important; /* au-dessus de l'overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease padding 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.hero__nav .nav-link {
  color: var(--black) !important;
  font-weight: 400 !important;
}

/* Titre/zone centrale */
.hero__title {
  position: relative;
  width: 100%;
  margin-bottom: 0.35em;
  z-index: 20; /* au-dessus overlay, sous le bloc top si besoin */
  color: #fff;
  text-align: center;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.1;
  font-family: "Gloock";
  font-weight: 200;
  padding: 0 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  display: block !important;
}

.hero__search {
  position: relative;
  width: 100%;
  margin: 0;
  z-index: 20; /* au-dessus overlay, sous le bloc top si besoin */
  color: #fff;
  text-align: center;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.1;
  font-weight: 700;
  padding: 0 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  display: block;
}

/* Typo Gloock pour la nav (si défini) */
.navbar-nav {
  padding: 0.25em 0;
  font-family: "Alexandria";
  font-size: 1.075em !important;
}

.navbar-nav .nav-link {
  color: var(--white, #fff);
  font-size: 0.875em !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0.75em;
  font-weight: 400 !important;
}

/* =========================
Desktop (≥992px)
========================= */
@media (min-width: 992px) {
  /* Docké en bas du header tant qu’on est dans le hero */
  /* Légère pastille pour la lisibilité quand docké en bas */
  .hero__nav {
    z-index: 99998 !important;
  }
  /* ===== Sticky (après scroll hors du header) ===== */
  .is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    transform: none;
    width: 100% !important;
    padding: 0.35rem 1rem;
    background: rgba(0, 0, 0, 0.65); /* fond noir */
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1000; /* au-dessus du contenu */
  }
  /* En sticky, la nav interne reste transparente : c’est le conteneur qui porte le fond */
  .is-sticky .hero__nav {
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Contrainte de largeur interne quand sticky */
  .is-sticky .hero__nav .container-lg {
    max-width: 1200px;
  }
  /* Logo légèrement réduit en sticky (optionnel) */
  .is-sticky .hero__brand img {
    max-width: 220px;
  }
}
/* Sticky forcé (pages ≠ accueil), à toutes largeurs */
.is-sticky--forced {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  transform: none !important;
  width: 100% !important;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

/* En sticky forcé, c’est le conteneur qui porte le fond */
.is-sticky--forced .hero__nav {
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Optionnel : logo un poil réduit quand sticky forcé */
.is-sticky--forced .hero__brand img {
  max-width: 220px;
}

.propv {
  padding: 3em 0;
}
.propv h2 {
  font-family: "Gloock";
  text-align: center;
  color: var(--white) !important;
  font-size: clamp(35px, 5vh, 40px);
}

/* État initial (invisible + un peu plus bas) */
.reveal-up,
.reveal-up .reveal-item {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Quand visible */
.reveal-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up.is-inview .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Hover (uniquement une fois visible) — la section se soulève un peu */
.reveal-up.is-inview:hover {
  transform: translateY(-6px);
  transition-duration: 0.35s;
}

/* Stagger par défaut si pas de data-stagger */
.reveal-up .reveal-item {
  transition-delay: 0s;
}

/* Accessibilité : pas d’anim si l’utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-up .reveal-item {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
/* ============== Structure section ============== */
.one {
  padding: 3em 0;
}
.one .card {
  background-color: var(--black);
}

@media (max-width: 567px) {
  .one {
    padding: 3em 0 3em 1em;
  }
}
.one .row {
  --bs-gutter-x: 0;
  margin: 0;
}

.one .col-lg-12 {
  padding-left: 0;
  padding-right: 0;
}

.one h2 {
  font-family: "Gloock";
  font-size: clamp(25px, 5vh, 40px);
  margin: 0 0 12px;
  color: #fff;
}

/* ============== Swiper container ============== */
/* Base */
#ifi-listings.swiper-container {
  position: relative;
  width: 100%;
  padding: 3em 1em 3em 0; /* haut droite bas gauche */
  padding-right: 320px; /* réserve la zone à droite pour les contrôles */
  overflow: hidden;
  flex-shrink: 0;
}
#ifi-listings.swiper-container .btn {
  font-weight: 100 !important;
}

/* Tes règles de padding-left par breakpoint */
@media screen and (min-width: 2560px) {
  #ifi-listings.swiper-container {
    padding-left: 612px !important;
  }
}
@media screen and (min-width: 1920px) and (max-width: 2559px) {
  #ifi-listings.swiper-container {
    padding-left: 298px !important;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  #ifi-listings.swiper-container {
    padding-left: 72px !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  #ifi-listings.swiper-container {
    padding-left: 42px !important;
  }
}
/* Optionnel: réduire la réserve à droite selon la taille d'écran */
@media (min-width: 1200px) and (max-width: 1439px) {
  #ifi-listings.swiper-container {
    padding-right: 280px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #ifi-listings.swiper-container {
    padding-right: 240px;
  }
}
/* Mobile / tablettes: on retire la zone droite */
@media (max-width: 991.98px) {
  #ifi-listings.swiper-container {
    padding-right: 0;
  }
}
/* ============== Slides / cartes ============== */
.swiper-slide {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  transition: all 0.5s ease-out !important;
  background: var(--darken) !important;
  color: var(--white) !important;
  border-left: 1px solid rgba(var(--light-transparent), 0.25);
  border-top: 1px solid rgba(var(--light-transparent), 0.25);
  border-bottom: 0 !important;
}

/* Image */
#ifi-listings .card-img-top {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  height: 275px;
  min-width: 375px; /* si tu veux forcer une largeur mini */
  width: 100%;
}

/* Carte */
#ifi-listings .card {
  position: relative;
  overflow: visible; /* pour que le body chevauche l'image */
  border: none;
  color: var(--white) !important;
  border-radius: 15px;
}

/* Corps (état normal) */
#ifi-listings .card-body {
  position: relative;
  background: var(--darken) !important;
  color: var(--white) !important;
  height: 200px; /* hauteur repliée */
  margin-top: 0; /* sans chevauchement */
  padding: 2rem 2rem !important;
  font-family: "Gloock";
  transition: height 0.25s ease, margin-top 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
#ifi-listings .card-body .card-title {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 0 !important;
  font-weight: 200;
  font-family: "Gloock";
  color: var(--white) !important;
  text-decoration: none !important;
}
#ifi-listings .card-body .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
#ifi-listings .card-body .chip {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #ddd;
  padding: 0.25rem 0.6rem;
}
#ifi-listings .card-body .price {
  background: var(--ifi-white);
  color: var(--white);
  font-weight: 200 !important;
  font-family: "Alexandria";
  margin: 0 !important;
  padding: 0 !important;
}

/* Bouton – caché par défaut */
#ifi-listings .view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 0 !important;
}

#ifi-listings .view-btn:hover {
  border-radius: 0 !important;
}

/* HOVER sur la carte → le body gagne 50px MAIS remonte de 50px
Résultat: l’agrandissement se fait visuellement vers le haut,
sans bouger le bas de la carte ni la grille. */
#ifi-listings .card:hover .card-body,
#ifi-listings .card:focus-within .card-body {
  height: 250px; /* +50px */
  margin-top: -50px; /* remonte de 50px */
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.08);
  background: var(--darken) !important;
}

/* Affiche le bouton au survol / focus */
#ifi-listings .card:hover .view-btn,
#ifi-listings .card:focus-within .view-btn {
  opacity: 1;
  transform: translateY(0);
}

/* (Option) petit gradient pour adoucir la jonction sur l'image lorsqu'on chevauche */
#ifi-listings .card:hover .card-img-top {
  -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to top, rgb(0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
}

#ifi-listings .button-service {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 11;
  border-radius: 3em;
}

/* ============== Contrôles Swiper ============== */
/* Les flèches sont en absolute DANS la zone droite réservée */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  right: 16px !important;
  transform: translateY(-50%);
  z-index: 10;
}

/* Si tu veux décaler la "next" sous la "prev" (pile à droite) */
.swiper-button-next {
  top: calc(50% + 48px);
}

/* Pagination et scrollbar aussi dans la zone droite (si utilisées) */
#ifi-listings .swiper-pagination {
  position: absolute;
  right: 16px;
  top: calc(50% + 110px);
  width: auto;
  left: auto;
}

#ifi-listings .swiper-scrollbar {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: auto;
  width: 280px; /* < padding-right desktop */
}

/* Sur mobile, on repasse en positions standard pour éviter le chevauchement */
@media (max-width: 991.98px) {
  .swiper-button-next,
  .swiper-button-prev,
  #ifi-listings .swiper-pagination,
  #ifi-listings .swiper-scrollbar {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    width: auto;
    margin-top: 0.75rem;
  }
}
/* Empêche tout débordement */
#ifi-listings .swiper-slide,
#ifi-listings .card {
  overflow: hidden;
}

/* La carte prend toute la largeur dispo */
#ifi-listings .card {
  width: 100%;
  box-sizing: border-box;
}

/* L'image ne dépasse jamais la carte */
#ifi-listings .card-img-top {
  display: block; /* évite l’espace blanc inline */
  width: 100%; /* suit la largeur de la carte */
  max-width: 100%;
  height: 275px; /* ta hauteur fixe */
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 0; /* 🔑 annule le min-width:375px */
}

/* Au cas où un reset poserait souci */
#ifi-listings .swiper-wrapper,
#ifi-listings .swiper-slide {
  box-sizing: border-box;
}

/* Si tu veux un fallback responsive sur petits écrans */
@media (max-width: 575.98px) {
  #ifi-listings .card-img-top {
    height: 220px; /* optionnel: un peu moins haut en mobile */
  }
}
.pres {
  font-family: "Gloock";
  padding: 3em 0;
}
.pres img {
  width: 100%;
  max-height: 750px !important;
  -o-object-fit: cover;
     object-fit: cover;
}
.pres .col-pres {
  background-image: url("./wp-content/uploads/themes/interieur.jpeg");
  background-size: cover;
}
.pres h2 {
  font-size: clamp(35px, 5vh, 40px);
  color: var(--white);
  margin: 0 auto 1em;
}
.pres p {
  font-size: 20px;
  font-family: "Alexandria";
  font-weight: 100 !important;
  color: var(--white);
}
.pres .col-lg-5 {
  padding: 1em 2em;
  display: flex;
  align-items: center;
}

/** HEADER **/
/* Wrapper global + hauteur contrôlée par variable */
.ifi-header-slider {
  position: relative;
  width: 100%;
  height: var(--ifi-header-height, 60vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* L’instance Swiper prend toute la place */
.ifi-header-slider .swiper {
  width: 100%;
  height: 100%;
}

/* Slides + image en cover */
.ifi-header-slide {
  position: relative;
  width: 100%;
  height: 100%;
}

.ifi-header-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Léger overlay pour lisibilité des éléments au-dessus */
.ifi-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Pagination & flèches sur fond visuel */
.ifi-header-slider .swiper-pagination-bullet {
  opacity: 0.7;
}

.ifi-header-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

.ifi-header-slider .swiper-button-prev,
.ifi-header-slider .swiper-button-next {
  color: var(--white) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Ajustements responsive */
@media (max-width: 991.98px) {
  .ifi-header-slider {
    height: 45vh;
  }
}
@media (max-width: 575.98px) {
  .ifi-header-slider {
    height: 38vh;
  }
}
/** Blog **/
.content-blog {
  color: var(--white);
  margin-top: 102px;
  padding: 3em 0;
}
.content-blog .card-img-top {
  max-height: 190px !important;
  width: auto;
}
.content-blog .searchform input[type=text] {
  border-right: 0 !important;
}
.content-blog .searchform button.btn.btn-white {
  border-right: 1px solid #000 !important;
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}
.content-blog ul.page-numbers {
  display: flex;
  justify-content: center;
  padding-left: 0;
  list-style: none;
}
.content-blog ul.page-numbers li {
  margin: 0 2px;
}
.content-blog ul.page-numbers .current,
.content-blog ul.page-numbers a {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  text-decoration: none;
}
.content-blog ul.page-numbers .current {
  background: #000;
  color: #fff;
  border-color: #000;
}
.content-blog .card-body > h4 {
  min-height: 80px;
}

.ft-blog h2 {
  font-size: clamp(2em, 5vw, 3em);
  text-align: center;
  margin-bottom: 0.25em;
  font-weight: 400;
  font-family: "Gloock";
}

article.content-blog h1 {
  font-family: "Gloock";
  font-size: clamp(2.5em, 5vw, 3em);
  font-weight: bold;
}
article.content-blog h2 {
  font-family: "Gloock";
  font-size: 1.5em !important;
  font-weight: normal;
}
article.content-blog h3 {
  font-family: "Gloock";
  font-size: 1.25em !important;
  font-weight: normal;
}
article.content-blog h4 {
  font-family: "Gloock";
  font-size: 1em;
  font-weight: normal;
}
article.content-blog p {
  font-weight: 200;
}

.content-blog > h4 {
  max-width: 190px;
}

#s.form-control {
  border-color: var(--black);
}

.content-archive-date {
  position: absolute;
  background-color: var(--white);
  border-radius: 4px;
  text-align: center;
  padding: 0.5em 1em;
  right: 15px;
}
@media (max-width: 320px) {
  .content-archive-date {
    top: 150px;
  }
}
@media (min-width: 321px) and (max-width: 375px) {
  .content-archive-date {
    top: 150px;
  }
}
@media (min-width: 376px) and (max-width: 767px) {
  .content-archive-date {
    top: 150px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-archive-date {
    top: 260px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .content-archive-date {
    top: 100px;
  }
}
@media (min-width: 1440px) {
  .content-archive-date {
    top: 150px;
  }
}

/* --- full-bleed : casse le container et prend toute la largeur viewport --- */
.fullbleed {
  position: relative;
}

/* Contenu texte (col gauche) */
.ifi-latest__content {
  padding: clamp(40px, 5vw, 64px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--light);
}

.ifi-latest__title {
  font-family: "Gloock";
  font-weight: 400;
  font-size: clamp(25px, 5vh, 40px);
  margin: 0 0 12px;
}

.ifi-latest__title a {
  color: #111;
  margin-bottom: 1em;
  text-decoration: none;
}

.ifi-latest__title a:hover {
  text-decoration: underline;
}

.ifi-latest__excerpt {
  margin: 0 0 16px;
  color: var(--darken);
  font-size: 20px;
  font-family: "Alexandria";
  font-weight: 200;
}

.ifi-latest__btn {
  display: inline-block;
  padding: 10px 14px;
  text-decoration: underline;
  color: var(--black);
  font-size: 18px !important;
  font-family: "Alexandria";
  font-weight: 100 !important;
}

/* Image (col droite) */
.ifi-latest__cover {
  display: block;
  height: 100%;
  min-height: 360px; /* hauteur mini */
}

.ifi-latest__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Petits écrans : l’image garde une bonne proportion */
@media (max-width: 992px) {
  .ifi-latest__cover {
    min-height: 280px;
  }
}
.blurred-section {
  filter: blur(16px !important);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative !important;
}

.blurred-section::after {
  content: "Zone restreinte" !important;
  position: absolute !important;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  padding: 1em 0;
  z-index: 10;
}

.newsletter {
  margin: 2em 0;
  padding: 5em 3em;
  min-height: 10em;
  background-color: var(--light);
  text-align: center;
}
.newsletter h2 {
  font-family: "Gloock";
  color: var(--black);
}
.newsletter .text {
  font-family: "Alexandria" !important;
  font-size: 1.075em;
  font-weight: 100 !important;
  color: var(--black);
}

footer {
  margin-top: 2em;
  padding: 3em 1em;
}
footer .title {
  font-family: "Gloock";
  font-size: 1.5em !important;
  margin-bottom: 0.25em;
  color: var(--white);
}
footer .text {
  font-family: "Alexandria" !important;
  font-size: 1.075em;
  font-weight: 100 !important;
  color: var(--white);
}
footer .bi {
  font-size: 2em;
  margin: 0 0.25em;
  color: var(--white);
}
footer a {
  color: var(--white);
  text-decoration: none;
}

/* Loader plein écran */
#page-loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* au-dessus de tout */
  opacity: 1;
  transition: opacity 0.8s ease;
}
#page-loader p {
  color: var(--white) !important;
  font-family: "Alexandria" !important;
  text-align: center !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  font-weight: 200;
}

/* Image du logo */
#page-loader img {
  max-width: 260px;
  height: auto;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Classe appliquée pour cacher le loader */
#page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 567px) {
  .navbar-collapse.collapse.show > .navbar-nav {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1em 0 0 0;
    margin: 1em 0 0 0;
    z-index: 41 !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
  }
}
/* état normal (non sticky) */
.js-sticky-nav {
  will-change: transform, opacity;
}

/* état sticky, avant l'animation d'entrée */
.js-sticky-nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%); /* caché en haut */
  opacity: 0;
  z-index: 1000; /* à adapter */
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms;
}

/* quand on veut l’afficher (slide du haut vers le bas) */
.js-sticky-nav.is-sticky.is-enter {
  transform: translateY(0);
  opacity: 1;
}

/* réduit les animations si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .js-sticky-nav.is-sticky,
  .js-sticky-nav.is-sticky.is-enter {
    transition: none;
  }
}
.estimation,
.gestion-locative {
  color: var(--white);
}
.estimation :not(.action-estimation),
.gestion-locative :not(.action-estimation) {
  font-family: "Gloock";
}
.estimation p, .estimation li,
.gestion-locative p,
.gestion-locative li {
  font-size: 1.175em;
  font-family: "Alexandria" !important;
  font-weight: 100 !important;
}
.estimation strong,
.gestion-locative strong {
  font-family: "Alexandria" !important;
}
.estimation .img-gestion-locative,
.gestion-locative .img-gestion-locative {
  background-image: url("https://triompheimmobilier.com/wp-content/uploads/themes/espace-client.jpeg");
  width: 100%;
  height: 550px;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  will-change: background-position;
  transition: background-position 0.05s ease-out;
  margin: 2em 0;
}
.estimation .img-estimer-mon-bien,
.gestion-locative .img-estimer-mon-bien {
  background-image: url("https://triompheimmobilier.com/wp-content/uploads/themes/enseigne.jpeg");
  width: 100%;
  height: 550px;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  will-change: background-position;
  transition: background-position 0.05s ease-out;
  margin: 2em 0;
}
.estimation iframe,
.gestion-locative iframe {
  height: 100vh !important;
}
.estimation .action-estimation p,
.gestion-locative .action-estimation p {
  font-family: "Alexandria";
}

#footer {
  background: none !important;
  box-shadow: none;
}
#footer .btn.btn-primary {
  border-radius: 0 !important;
}

.agence h1,
.agence h2,
.agence h3,
.agence .lead {
  color: var(--white);
}
.agence h3 {
  font-weight: 500 !important;
  font-family: "Alexandria";
}
.agence .lead {
  font-family: "Alexandria";
}
.agence .transport {
  color: var(--white);
}
.agence .item {
  min-height: 150px;
  min-width: 80px;
}
.agence .item img {
  margin-bottom: 1em;
}
.agence strong {
  font-family: "Alexandria";
}

:not(.swiper-slide) .card .card-body {
  padding: 2em !important;
}

.badge {
  font-size: 1em !important;
  padding: 1.075em;
  background: inherit;
  background-color: inherit;
}

.ifi-wishlist-form {
  position: absolute;
  right: 15px;
  top: 15px;
  color: var(--white);
}
.ifi-wishlist-form button {
  background: none;
  color: var(--white);
  border: 0;
}

.ifi-wishlist {
  color: var(--white);
  text-align: center;
}
.ifi-wishlist .card {
  text-align: left !important;
  border-radius: 0;
}
.ifi-wishlist .card .title-wishlist {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: 0 !important;
  font-weight: 200;
  font-family: "Gloock";
  color: var(--black) !important;
  text-decoration: none !important;
}
.ifi-wishlist .card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.ifi-wishlist .card .chip {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #ddd;
  padding: 0.25rem 0.6rem;
}
.ifi-wishlist .card .price {
  background: var(--ifi-white);
  color: var(--ifi-black);
  font-weight: 200 !important;
  font-family: "Alexandria";
  margin: 0 !important;
  padding: 0 !important;
}
.ifi-wishlist .card .badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: #000;
}
.ifi-wishlist .card img {
  width: 100%;
  height: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

.foot-partner {
  margin-top: 3em;
  overflow: hidden;
}
.foot-partner h3 {
  text-align: center;
  color: var(--white);
  font-family: "Gloock";
  font-size: clamp(25px, 5vh, 40px);
  margin: 0 0 24px;
}

.partenaires {
  background-color: var(--white);
  padding: 2em 0 !important;
  margin: 2em 0;
}
.partenaires .col {
  text-align: center;
}
.partenaires img {
  height: 75px !important;
}

.reviews {
  padding: 5em 1em;
}
.reviews h2 {
  text-align: center;
  color: var(--white);
  font-family: "Gloock";
  font-size: clamp(25px, 5vh, 40px);
  margin: 0 0 24px;
}

.page-obligatoire {
  margin: 2em 0;
  color: var(--white);
}
.page-obligatoire h1 {
  font-family: "Gloock";
  font-size: clamp(25px, 5vh, 40px) !important;
  text-align: center;
  margin-bottom: 2em;
}
.page-obligatoire a, .page-obligatoire span, .page-obligatoire strong, .page-obligatoire p {
  font-family: "Alexandria";
}
.page-obligatoire p {
  font-weight: 200;
}

.socials {
  position: absolute;
  padding: 1em;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
.socials a {
  gap: 2.5em;
  display: flex;
  flex-direction: row;
  font-size: 2em;
}/*# sourceMappingURL=style.css.map */