/* ══════════════════════════════════════════════════════════════
   AZUROTEC — coverflow (styles)
   La cellule porte la transformation 3D ; la carte à l'intérieur reste
   libre pour app.js, qui l'anime déjà en opacity et transform.
   ══════════════════════════════════════════════════════════════ */

.cf-frame {
  position: relative;
  overflow: hidden;
  /* Marge verticale : les ombres portées ne doivent pas être rognées
     par le débordement caché. */
  padding-block: clamp(2rem, 4vw, 3.5rem);
  cursor: grab;
  outline: none;
  /* Le glissement horizontal nous appartient ; la page garde le
     défilement vertical. */
  touch-action: pan-y;
}
.cf-frame:active { cursor: grabbing; }
.cf-frame:focus-visible { outline: 2px solid var(--color-burgundy); outline-offset: 4px; }

.cf-stage {
  position: relative;
  height: clamp(340px, 34vw, 520px);
  transform-style: preserve-3d;
  user-select: none;
}

.cf-cell {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(280px, 30vw, 460px);
  height: 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* La carte remplit sa cellule et garde son verre. */
.cf-cell > .service-card,
.cf-cell > .process-card {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 90px -40px rgba(23, 35, 59, .55);
}
.cf-cell > * > .service-asset,
.cf-cell > * > .process-visual { flex: 0 0 auto; }

.cf-nav {
  position: absolute;
  top: 50%;
  z-index: 200;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-white) 74%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-s) var(--ease-out), border-color var(--dur-s) var(--ease-out);
}
.cf-nav:hover { background: var(--color-white); border-color: var(--color-gold); }
.cf-prev { inset-inline-start: clamp(.5rem, 3vw, 2.5rem); }
.cf-next { inset-inline-end: clamp(.5rem, 3vw, 2.5rem); }
/* Les chevrons ne sont pas miroités par le navigateur. */
[dir="rtl"] .cf-nav { transform: translateY(-50%) scaleX(-1); }

/* Sur les sections sombres, les commandes s'inversent. */
.era-collage-section .cf-nav {
  background: color-mix(in srgb, var(--color-paper) 16%, transparent);
  border-color: var(--glass-edge-dark);
  color: var(--color-paper);
}
.era-collage-section .cf-nav:hover {
  background: color-mix(in srgb, var(--color-paper) 26%, transparent);
  border-color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .cf-cell { transition: none; }
}