/* ============================================================
   REFONTE 2026 — Couche "Dynamisme" (fond chaud + animations)
   ------------------------------------------------------------
   Chargé APRÈS aos.css (via header.php) afin de pouvoir
   amplifier les distances de déplacement AOS.
   Perf : transforms GPU, IntersectionObserver, rAF (voir js).
   A11y : respect total de prefers-reduced-motion (fin de fichier).
   ============================================================ */

:root {
  --cream: #fbe9d7; /* Fond de page — orange estompé (fini le blanc) */
  --cream-soft: #fdf3ea; /* Bandes claires réchauffées */
  --cream-line: #f1d9c2; /* Filet chaud discret */
}

/* ============================================================
   1. FOND ORANGE ESTOMPÉ
   ------------------------------------------------------------
   Le fond global passe en crème chaud. Les CARTES blanches
   internes ne sont PAS ciblées : les sélecteurs ci-dessous
   visent uniquement la RACINE des composants pleine largeur.
   ============================================================ */
html,
body {
  background-color: var(--cream) !important;
}

/* Bandes qui étaient blanches / grises -> crème chaud pour tuer les
   grands aplats blancs, tout en gardant les cartes blanches par-dessus. */
.reviews.bg-white,
.map-2.bg-white,
.features-2.bg-white,
.gallery-4.bg-obsidian-50,
.icons {
  background-color: var(--cream-soft) !important;
}

/* Les cartes blanches se détachent mieux du fond chaud */
.lift,
.gallery-tile,
.presta-card {
  box-shadow: 0 18px 40px -20px rgba(180, 110, 40, 0.28);
}

/* ============================================================
   2. AMPLIFICATION DES ANIMATIONS AOS
   ------------------------------------------------------------
   On augmente la distance parcourue à l'apparition pour un
   rendu nettement plus présent ("franco"). La durée/easing
   est gérée via AOS.init() (footer.php).
   ============================================================ */
/* Durée + easing garantis (indispensable : le reveal est piloté par notre JS,
   pas par AOS.init, qui posait sinon la durée en inline). */
[data-aos] {
  transition-timing-function: var(--ease-smooth);
  transition-duration: 0.9s;
}
[data-aos="fade-up"] {
  transform: translate3d(0, 72px, 0);
}
[data-aos="fade-down"] {
  transform: translate3d(0, -72px, 0);
}
[data-aos="fade-left"] {
  transform: translate3d(72px, 0, 0);
}
[data-aos="fade-right"] {
  transform: translate3d(-72px, 0, 0);
}
[data-aos="fade-up-right"] {
  transform: translate3d(-60px, 60px, 0);
}
[data-aos="fade-up-left"] {
  transform: translate3d(60px, 60px, 0);
}
[data-aos="zoom-in"],
[data-aos="zoom-in-up"] {
  transform: scale(0.82);
}
[data-aos].aos-animate {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ============================================================
   3. IMAGE "COUP DE ROULEAU" — photos jamais figées
   ------------------------------------------------------------
   Le voile navy se retire déjà (style.css). Puis :
   a) dézoom marqué pendant la révélation (1.25 -> 1) ;
   b) "Ken Burns" en boucle : grossissement lent + glissement
      (sens alterné via --kb-dir, posé en JS) ;
   c) grossissement lié au scroll via la propriété `scale`
      (--sz, posé en JS), qui se cumule avec `transform`.
   ============================================================ */
.roller-reveal img {
  transform: scale(1.25);
  scale: var(--sz, 1);
  transition: scale 0.35s ease-out;
  will-change: transform, scale;
}
.roller-reveal.is-in img,
.aos-animate.roller-reveal img {
  transform: scale(1);
  animation:
    rr-reveal 1.8s var(--ease-smooth) both,
    rr-kenburns 14s ease-in-out 1.8s infinite alternate;
}
@keyframes rr-reveal {
  from {
    transform: scale(1.25);
  }
  to {
    transform: scale(1);
  }
}
@keyframes rr-kenburns {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.14) translate3d(calc(var(--kb-dir, 1) * -2.5%), -1.5%, 0);
  }
}

/* ============================================================
   3bis. BANDEAU DE PAGE (page-title-8) — image vivante
   ------------------------------------------------------------
   Dézoom franc à l'arrivée sur la page, puis respiration lente.
   On anime `scale` : le `transform` inline de la parallaxe
   (footer.php) reste intact et se cumule.
   ============================================================ */
.page-title-8 [data-parallax] {
  animation:
    pt-intro 2.6s var(--ease-smooth) both,
    pt-breathe 18s ease-in-out 2.6s infinite alternate;
  will-change: transform, scale;
}
@keyframes pt-intro {
  from {
    scale: 1.35;
  }
  to {
    scale: 1;
  }
}
@keyframes pt-breathe {
  from {
    scale: 1;
  }
  to {
    scale: 1.12;
  }
}

/* ============================================================
   4. RÉVÉLATION D'IMAGE GÉNÉRIQUE (clip vertical + zoom)
   ------------------------------------------------------------
   Classe utilitaire .media-reveal (déclenchée en JS via .rvl-in)
   ============================================================ */
.media-reveal {
  overflow: hidden;
}
.media-reveal img,
.media-reveal .bg-cover {
  transform: scale(1.22);
  clip-path: inset(0 0 100% 0);
  transition:
    transform 1.5s var(--ease-smooth),
    clip-path 1.2s var(--ease-smooth);
  will-change: transform, clip-path;
}
.media-reveal.rvl-in img,
.media-reveal.rvl-in .bg-cover {
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   5. REVEAL GÉNÉRIQUE (blocs sans data-aos) — staggeré
   ------------------------------------------------------------
   Filet de sécurité : le JS pose [data-rvl] sur les enfants de
   grilles qui n'ont aucune animation, avec un décalage --rvl-i.
   ============================================================ */
[data-rvl] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 0.8s var(--ease-smooth),
    transform 0.8s var(--ease-smooth);
  transition-delay: calc(var(--rvl-i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-rvl="left"] {
  transform: translate3d(-52px, 0, 0);
}
[data-rvl="right"] {
  transform: translate3d(52px, 0, 0);
}
[data-rvl="zoom"] {
  transform: scale(0.9);
}
[data-rvl].rvl-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   5bis. ARRIVÉE DES BLOCS ENTIERS (le composant complet glisse)
   ------------------------------------------------------------
   C'est LA demande client : chaque section arrive en glissant,
   en plus de l'animation de son contenu interne (data-aos).
   Le JS pose .block-arrival sur chaque composant puis .is-arrived
   au scroll. Direction alternée gauche/droite pour du rythme.
   ============================================================ */
.block-arrival {
  opacity: 0;
  /* Glissement VERTICAL uniquement (pas d'horizontal sur les sections
     pleine largeur : éviterait un débordement / scroll horizontal). */
  transform: translate3d(0, 72px, 0) scale(0.985);
  transition:
    opacity 1s var(--ease-smooth),
    transform 1s var(--ease-smooth);
  will-change: opacity, transform;
}
.block-arrival.is-arrived {
  opacity: 1;
  transform: none;
}

/* ============================================================
   6. ZOOM AU SURVOL (images de contenu)
   ============================================================ */
.zoomable {
  overflow: hidden;
}
.zoomable img {
  transition: transform 0.8s var(--ease-smooth);
  will-change: transform;
}
.zoomable:hover img {
  transform: scale(1.06);
}

/* ============================================================
   7. BARRE DE PROGRESSION DE LECTURE (touche "agence")
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
  z-index: 300;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ============================================================
   8. COMPTEURS (opt-in : [data-count] ou .count-up)
   ============================================================ */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9. HOVERS RENFORCÉS
   ============================================================ */
.lift {
  transition:
    transform 0.5s var(--ease-smooth),
    box-shadow 0.5s var(--ease-smooth);
}
.lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 34px 60px -26px rgba(180, 110, 40, 0.45);
}

/* ============================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-rvl],
  .block-arrival,
  .media-reveal img,
  .media-reveal .bg-cover {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .roller-reveal img,
  .page-title-8 [data-parallax] {
    transform: none !important;
    scale: none !important;
    animation: none !important;
  }
  .scroll-progress {
    display: none;
  }
  .lift:hover {
    transform: none !important;
  }
}