/* relief.css — Relief des pages d'accueil de la suite Ameriack (avec relief.js et relief3d.js). */
.scene3d{position:relative;isolation:isolate;overflow:hidden}
.scene3d>canvas.relief3d{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.scene3d>canvas.relief3d.pret{opacity:1}
.scene3d .voile{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* Inclinaison sous la souris + reflet */
[data-incline]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;position:relative;will-change:transform}
[data-incline].incline{transition:transform .08s linear,box-shadow .3s ease;box-shadow:0 26px 50px -26px rgba(15,61,54,.45)}
[data-incline]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
[data-incline].incline::after{opacity:1}
.sombre [data-incline]::after,[data-incline].sur-sombre::after{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(233,176,67,.28),rgba(233,176,67,0) 55%)}
[data-incline] .sort{transform:translateZ(28px)}

/* Apparition en relief */
.relief-actif [data-apparait]{opacity:0;transform:perspective(900px) translateY(26px) rotateX(9deg);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.relief-actif [data-apparait="tourne"]{transform:perspective(900px) rotateY(-24deg) translateX(-14px);transform-origin:left center}
.relief-actif [data-apparait="profond"]{transform:perspective(900px) translateZ(-120px) translateY(18px)}
.relief-actif [data-apparait].vu{opacity:1;transform:none}
.relief-actif [data-apparait].vu[data-incline]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* Maquette inclinée qui se redresse au défilement */
[data-redresse]{transform:perspective(1400px) rotateX(calc(var(--redresse,0) * 16deg)) scale(calc(1 - var(--redresse,0) * .06));
  transform-origin:center top;transition:transform .1s linear}

/* Scène en perspective autour d'un objet (cartes flottantes en profondeur) */
.profondeur{position:relative;transform-style:preserve-3d;perspective:1200px}
.flottante{position:absolute;z-index:3;background:#fff;border:1px solid #ece7d8;border-radius:12px;padding:10px 14px;
  font-size:.8rem;box-shadow:0 18px 40px -18px rgba(15,61,54,.5);display:flex;align-items:center;gap:8px;white-space:nowrap;
  animation:flotte 6s ease-in-out infinite}
.flottante .p{width:8px;height:8px;border-radius:50%;background:#1d7a44;flex:none}
.flottante.b{animation-delay:-3s}
@keyframes flotte{0%,100%{transform:translateY(0) translateZ(40px)}50%{transform:translateY(-10px) translateZ(60px)}}

/* Anneaux et pièces dorés en relief (appel final) */
.anneaux{position:absolute;inset:0;pointer-events:none;perspective:900px;overflow:hidden}
.anneaux i{position:absolute;border-radius:50%;border:2px solid rgba(233,176,67,.55);transform-style:preserve-3d;
  animation:tourne 18s linear infinite}
.anneaux i:nth-child(1){width:220px;height:220px;right:-40px;top:-60px}
.anneaux i:nth-child(2){width:140px;height:140px;right:120px;bottom:-50px;animation-duration:24s;animation-direction:reverse;border-color:rgba(255,255,255,.25)}
.anneaux i:nth-child(3){width:70px;height:70px;right:30%;top:16px;background:radial-gradient(circle at 35% 30%,#f6d58b,#c88a12);border:none;animation-duration:12s;opacity:.85}
@keyframes tourne{from{transform:rotateX(62deg) rotateZ(0)}to{transform:rotateX(62deg) rotateZ(360deg)}}

@media (max-width:767px){.flottante{display:none}[data-redresse]{transform:none}}
@media (prefers-reduced-motion:reduce){
  [data-incline],[data-redresse]{transform:none!important;transition:none}
  .relief-actif [data-apparait],[data-apparait]{opacity:1!important;transform:none!important;transition:none}
  .flottante,.anneaux i{animation:none}
  .scene3d>canvas.relief3d{display:none}
}