/* ---------- TYPO GLOBALE ---------- */

/* Texte normal : 16px mobile, 18px tablette, 20px desktop */
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ≥ 768px : tablette */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* ≥ 1024px : desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

/* Taille du logo dans le header/footer */
.fs-logo {
  font-size: 1.05rem;
}

/* Menu header */
.fs-menu {
  font-size: 0.95rem;
}

.fs-btn {
  font-size: 0.95rem;
}

.fs-bien-titre {
  font-size: 1.05rem;
  font-weight: 600;
}

.fs-footer {
  font-size: 0.9rem;
}

/* ---------- ANIMATIONS D'ENTRÉE ---------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-up,
.animate-fade-left,
.animate-fade-right {
  opacity: 0;
  transform: translateY(12px);
}

/* Appliqué depuis le JS quand l'élément entre en vue */
.is-visible.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}
.is-visible.animate-fade-left {
  animation: fadeLeft 0.8s ease-out forwards;
}
.is-visible.animate-fade-right {
  animation: fadeRight 0.8s ease-out forwards;
}

/* ---------- BOUTONS / HOVER GÉNÉRIQUE ---------- */

.btn-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hover-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.2);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
  border-color: rgba(37, 99, 235, 0.6);
}

/* ---------- HOVER IMAGES ---------- */

.img-hover-zoom img {
  transition: transform 0.4s ease;
}
.img-hover-zoom:hover img {
  transform: scale(1.04);
}

/* ---------- HEADER SCROLL ---------- */

.header-scrolled {
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.35);
  background-color: rgba(23, 37, 84, 0.98) !important;
}

/* ---------- SLIDER "QUI SOMMES-NOUS" ---------- */

.about-slider-wrapper {
  position: relative;
  width: 100%;
  height: 260px;            /* hauteur par défaut (mobile) */
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Hauteurs plus généreuses pour tablette / desktop */
@media (min-width: 768px) {
  .about-slider-wrapper {
    height: 340px;            /* tablette */
  }
}

@media (min-width: 1024px) {
  .about-slider-wrapper {
    height: 420px;            /* desktop */
  }
}

.about-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease-out;
}

.about-slide {
  flex: 0 0 100%;
  position: relative;
}

.about-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Petits indicateurs / contrôles (si utilisés) */
.about-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.about-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.about-slider-dot.is-active {
  width: 18px;
  background-color: rgba(59, 130, 246, 0.9);
}

/* ---------- SLIDER "SUR LE TERRAIN" ---------- */
/* (section avec .terrain-slider-wrapper / .terrain-slide / .terrain-dot) */

.terrain-slider-wrapper {
  position: relative;
  width: 100%;
  height: 240px;              /* mobile */
  overflow: hidden;
}

/* Hauteurs plus généreuses pour tablette / desktop */
@media (min-width: 768px) {
  .terrain-slider-wrapper {
    height: 300px;            /* tablette */
  }
}

@media (min-width: 1024px) {
  .terrain-slider-wrapper {
    height: 340px;            /* desktop */
  }
}

.terrain-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease-out;
}

.terrain-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Petits indicateurs sous le slider "Sur le terrain" */
.terrain-slider-dots {
  /* le HTML a déjà flex + gap via Tailwind, donc on ne force rien ici */
}

.terrain-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.7); /* gris bleu clair */
  border: 1px solid rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease, transform 0.2s ease;
}

.terrain-dot.is-active {
  width: 18px;
  background-color: rgba(37, 99, 235, 0.9); /* bleu brand */
  transform: translateY(-1px);
}

/* ---------- PAGE GESTION : SLIDER LATERAL ---------- */

.gestion-slider-wrapper {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}

.gestion-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease-out;
}

.gestion-slide {
  flex: 0 0 100%;
}

/* Navigation du slider gestion */
.gestion-dot {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.gestion-dot:hover {
  transform: scale(1.1);
}

/* ---------- AUTRES PETITS DÉTAILS ---------- */

.fs-hero-badge {
  letter-spacing: 0.25em;
  font-size: 0.75rem;
}

.fs-hero-title {
  font-size: 1.9rem;
}

@media (min-width: 640px) {
  .fs-hero-title {
    font-size: 2.4rem;
  }
}
@media (min-width: 1024px) {
  .fs-hero-title {
    font-size: 2.9rem;
  }
}

/* ================================================
   ANIMATIONS GLOBALES SUPPLÉMENTAIRES (NOV 2025)
   - Aucun impact sur la logique PHP
   - On ajoute seulement des transitions / animations
   ================================================ */

/* Scroll doux pour les ancres */
html {
  scroll-behavior: smooth;
}

/* HERO SLIDER : légère apparition + fondu lors du changement d'image */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-hero-slider {
  animation: heroFadeIn 0.7s ease-out both;
  transition: opacity 0.4s ease-out;
}

/* Utilisé par le JS du slider (class is-fading) */
.js-hero-slider.is-fading {
  opacity: 0.35;
}

/* Micro-interactions sur les cartes génériques (biens, articles…) */
article.bg-brand-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
article.bg-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
  border-color: rgba(37, 99, 235, 0.6);
}

/* Liens textes : petite transition de couleur */
a {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

/* Boutons "Contact / Voir plus / Envoyer" déjà en .btn-hover-lift :
   on renforce un peu l'effet (sans casser Tailwind) */
.btn-hover-lift {
  will-change: transform, box-shadow;
}

/* Petites ombres animées sur les sections claires pour donner du relief
   (uniquement grands écrans) */
@media (min-width: 1024px) {
  section.bg-brand-bg,
  section.bg-white {
    transition: box-shadow 0.25s ease;
  }
  section.bg-brand-bg:hover,
  section.bg-white:hover {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  }
}

/* Cartes d'infos (ex : Appel direct / Rendez-vous / Visites) */
.card-hover {
  will-change: transform, box-shadow, border-color, background-color;
}

/* === HERO : textes flottants au chargement === */

@keyframes heroItemUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Le bloc texte dans le hero est le <div class="relative ..."> qui est
   un enfant direct de .js-hero-slider (le 2e, après l'overlay absolu). */
.js-hero-slider > .relative > * {
  opacity: 0;
  transform: translateY(18px);
  animation: heroItemUp 0.7s ease-out forwards;
}

/* Effet en cascade : label, titre, texte, boutons arrivent l’un après l’autre */
.js-hero-slider > .relative > *:nth-child(1) {
  animation-delay: 0.05s;
}
.js-hero-slider > .relative > *:nth-child(2) {
  animation-delay: 0.18s;
}
.js-hero-slider > .relative > *:nth-child(3) {
  animation-delay: 0.30s;
}
.js-hero-slider > .relative > *:nth-child(4) {
  animation-delay: 0.42s;
}
/* S’il y a d’autres blocs (5e, 6e…) dans le hero */
.js-hero-slider > .relative > *:nth-child(5) {
  animation-delay: 0.54s;
}
.js-hero-slider > .relative > *:nth-child(6) {
  animation-delay: 0.66s;
}

/* === CARTES & COLONNES : flottant en entrée === */

@keyframes gridFloatUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cartes classiques (biens, articles…) */
section .grid > article.bg-brand-card,
section .grid > div.bg-brand-card,
section .grid > .card-hover {
  opacity: 0;
  transform: translateY(18px);
  animation: gridFloatUp 0.8s ease-out forwards;
}

/* Stagger / décalage entre les colonnes pour l’effet “colonne par colonne” */
section .grid > article.bg-brand-card:nth-child(1),
section .grid > div.bg-brand-card:nth-child(1),
section .grid > .card-hover:nth-child(1) {
  animation-delay: 0.10s;
}
section .grid > article.bg-brand-card:nth-child(2),
section .grid > div.bg-brand-card:nth-child(2),
section .grid > .card-hover:nth-child(2) {
  animation-delay: 0.20s;
}
section .grid > article.bg-brand-card:nth-child(3),
section .grid > div.bg-brand-card:nth-child(3),
section .grid > .card-hover:nth-child(3) {
  animation-delay: 0.30s;
}
section .grid > article.bg-brand-card:nth-child(4),
section .grid > div.bg-brand-card:nth-child(4),
section .grid > .card-hover:nth-child(4) {
  animation-delay: 0.40s;
}
section .grid > article.bg-brand-card:nth-child(5),
section .grid > div.bg-brand-card:nth-child(5),
section .grid > .card-hover:nth-child(5) {
  animation-delay: 0.50s;
}
section .grid > article.bg-brand-card:nth-child(6),
section .grid > div.bg-brand-card:nth-child(6),
section .grid > .card-hover:nth-child(6) {
  animation-delay: 0.60s;
}
section .grid > article.bg-brand-card:nth-child(7),
section .grid > div.bg-brand-card:nth-child(7),
section .grid > .card-hover:nth-child(7) {
  animation-delay: 0.70s;
}
section .grid > article.bg-brand-card:nth-child(8),
section .grid > div.bg-brand-card:nth-child(8),
section .grid > .card-hover:nth-child(8) {
  animation-delay: 0.80s;
}
section .grid > article.bg-brand-card:nth-child(9),
section .grid > div.bg-brand-card:nth-child(9),
section .grid > .card-hover:nth-child(9) {
  animation-delay: 0.90s;
}